Merge pull request #2029 from umbraco/v14/feature/umb-property-editor-ui-tags-readonly-mode

Feature:  Readonly mode for Tags Property Editor UI

Author: loivsen

src/packages/tags/components/tags-input/tags-input.element.ts

@@ -34,6 +34,15 @@ export class UmbTagsInputElement extends UUIFormControlMixin(UmbLitElement, '')
 		return this._items;
 	}
 
+	/**
+	 * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
+	 * @type {boolean}
+	 * @attr
+	 * @default false
+	 */
+	@property({ type: Boolean, reflect: true })
+	readonly = false;
+
 	@state()
 	private _matches: Array<TagResponseModel> = [];
 
@@ -188,18 +197,7 @@ export class UmbTagsInputElement extends UUIFormControlMixin(UmbLitElement, '')
 					<uui-tag id="input-width-tracker" aria-hidden="true" style="visibility:hidden;opacity:0;position:absolute;">
 						${this._currentInput}
 					</uui-tag>
-					<uui-tag look="outline" id="main-tag" @click="${this.focus}" slot="trigger">
-						<input
-							id="tag-input"
-							aria-label="tag input"
-							placeholder="Enter tag"
-							.value="${this._currentInput ?? undefined}"
-							@keydown="${this.#onKeydown}"
-							@input="${this.#onInput}"
-							@blur="${this.#onBlur}" />
-						<uui-icon id="icon-add" name="icon-add"></uui-icon>
-						${this.#renderTagOptions()}
-					</uui-tag>
+					${this.#renderAddButton()}
 				</span>
 			</div>
 		`;
@@ -210,7 +208,7 @@ export class UmbTagsInputElement extends UUIFormControlMixin(UmbLitElement, '')
 			return html`
 				<uui-tag class="tag">
 					<span>${tag}</span>
-					<uui-icon name="icon-wrong" @click="${() => this.#delete(tag)}"></uui-icon>
+					${this.#renderRemoveButton(tag)}
 				</uui-tag>
 			`;
 		})}`;
@@ -233,14 +231,39 @@ export class UmbTagsInputElement extends UUIFormControlMixin(UmbLitElement, '')
 								name="${tag.group ?? ''}"
 								@click="${() => this.#optionClick(index)}"
 								@keydown="${(e: KeyboardEvent) => this.#optionKeydown(e, index)}"
-								value="${tag.text ?? ''}" />
+								value="${tag.text ?? ''}"
+								?readonly=${this.readonly} />
 							<label for="tag-${tag.id}"> ${tag.text} </label>`;
 					},
 				)}
 			</div>
 		`;
 	}
 
+	#renderAddButton() {
+		if (this.readonly) return nothing;
+
+		return html`
+			<uui-tag look="outline" id="main-tag" @click="${this.focus}" slot="trigger">
+				<input
+					id="tag-input"
+					aria-label="tag input"
+					placeholder="Enter tag"
+					.value="${this._currentInput ?? undefined}"
+					@keydown="${this.#onKeydown}"
+					@input="${this.#onInput}"
+					@blur="${this.#onBlur}" />
+				<uui-icon id="icon-add" name="icon-add"></uui-icon>
+				${this.#renderTagOptions()}
+			</uui-tag>
+		`;
+	}
+
+	#renderRemoveButton(tag: string) {
+		if (this.readonly) return nothing;
+		return html` <uui-icon name="icon-wrong" @click="${() => this.#delete(tag)}"></uui-icon> `;
+	}
+
 	static styles = [
 		css`
 			#wrapper {
@@ -253,6 +276,7 @@ export class UmbTagsInputElement extends UUIFormControlMixin(UmbLitElement, '')
 				border: 1px solid var(--uui-color-border);
 				background-color: var(--uui-input-background-color, var(--uui-color-surface));
 				flex: 1;
+				min-height: 40px;
 			}
 
 			#main-tag-wrapper {

src/packages/tags/property-editors/tags/property-editor-ui-tags.element.ts

@@ -25,6 +25,15 @@ export class UmbPropertyEditorUITagsElement extends UmbLitElement implements Umb
 		return this._value;
 	}
 
+	/**
+	 * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
+	 * @type {boolean}
+	 * @attr
+	 * @default false
+	 */
+	@property({ type: Boolean, reflect: true })
+	readonly = false;
+
 	@state()
 	private _group?: string;
 
@@ -62,7 +71,8 @@ export class UmbPropertyEditorUITagsElement extends UmbLitElement implements Umb
 			group=${ifDefined(this._group)}
 			.culture=${this._culture}
 			.items=${this.value}
-			@change=${this.#onChange}></umb-tags-input>`;
+			@change=${this.#onChange}
+			?readonly=${this.readonly}></umb-tags-input>`;
 	}
 }