feat: implement readonly mode for uui-ref-node

Author: madsrasmussen

packages/uui-ref-node/lib/uui-ref-node.element.ts

@@ -85,14 +85,18 @@ export class UUIRefNodeElement extends UUIRefElement {
 
   #renderContent() {
     return html`
-      <span id="icon">
-        <slot name="icon" @slotchange=${this.#onSlotIconChange}></slot>
-        ${this._iconSlotHasContent === false ? this.#renderFallbackIcon() : ''}
+      <span id="content">
+        <span id="icon">
+          <slot name="icon" @slotchange=${this.#onSlotIconChange}></slot>
+          ${this._iconSlotHasContent === false
+            ? this.#renderFallbackIcon()
+            : ''}
+        </span>
+        <div id="info">
+          <div id="name">${this.name}</div>
+          ${this.renderDetail()}
+        </div>
       </span>
-      <div id="info">
-        <div id="name">${this.name}</div>
-        ${this.renderDetail()}
-      </div>
     `;
   }
 
@@ -125,7 +129,7 @@ export class UUIRefNodeElement extends UUIRefElement {
 
   public render() {
     return html`
-      ${this.href ? this.#renderLink() : this.#renderButton()}
+      ${this.#renderSomething()}
       <!-- Select border must be right after #open-part -->
       <div id="select-border"></div>
 
@@ -135,6 +139,14 @@ export class UUIRefNodeElement extends UUIRefElement {
     `;
   }
 
+  #renderSomething() {
+    if (this.readonly) {
+      return html`${this.#renderContent()}`;
+    } else {
+      return this.href ? this.#renderLink() : this.#renderButton();
+    }
+  }
+
   static styles = [
     ...UUIRefElement.styles,
     css`
@@ -143,15 +155,17 @@ export class UUIRefNodeElement extends UUIRefElement {
         padding: calc(var(--uui-size-2) + 1px);
       }
 
-      #open-part {
-        text-decoration: none;
-        color: inherit;
+      #content {
         align-self: stretch;
         line-height: normal;
-
         display: flex;
         position: relative;
         align-items: center;
+      }
+
+      #open-part {
+        color: inherit;
+        text-decoration: none;
         cursor: pointer;
       }
 

packages/uui-ref/lib/uui-ref.element.ts

@@ -31,6 +31,15 @@ export class UUIRefElement extends SelectOnlyMixin(
   @property({ type: Boolean, reflect: true })
   disabled = false;
 
+  /**
+   * 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;
+
   /**
    * Set to true to display error state
    * @type {boolean}