@umbraco-ui/uui-ref-node 1.8.0 → 1.9.0-rc.0

package/custom-elements.json

@@ -29,6 +29,18 @@
           "type": "string",
           "default": "\"undefined\""
         },
+        {
+          "name": "rel",
+          "description": "Set the rel attribute for an anchor tag, only used when using href.",
+          "type": "string",
+          "default": "\"undefined\""
+        },
+        {
+          "name": "readonly",
+          "description": "Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
         {
           "name": "disabled",
           "description": "Set tot true to disable",
@@ -93,6 +105,20 @@
           "type": "string",
           "default": "\"undefined\""
         },
+        {
+          "name": "rel",
+          "attribute": "rel",
+          "description": "Set the rel attribute for an anchor tag, only used when using href.",
+          "type": "string",
+          "default": "\"undefined\""
+        },
+        {
+          "name": "readonly",
+          "attribute": "readonly",
+          "description": "Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
         {
           "name": "styles",
           "type": "CSSResult[]",

package/lib/index.js

@@ -7,37 +7,25 @@ import { property, state } from 'lit/decorators.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
 var __decorateClass = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp(target, key, result);
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
-var __accessCheck = (obj, member, msg) => {
-  if (!member.has(obj))
-    throw TypeError("Cannot " + msg);
-};
-var __privateAdd = (obj, member, value) => {
-  if (member.has(obj))
-    throw TypeError("Cannot add the same private member more than once");
-  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-};
-var __privateMethod = (obj, member, method) => {
-  __accessCheck(obj, member, "access private method");
-  return method;
-};
-var _onSlotIconChange, onSlotIconChange_fn, _renderFallbackIcon, renderFallbackIcon_fn, _renderContent, renderContent_fn, _renderLink, renderLink_fn, _renderButton, renderButton_fn;
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _UUIRefNodeElement_instances, onSlotIconChange_fn, renderFallbackIcon_fn, renderContent_fn, renderLink_fn, renderButton_fn, renderSomething_fn;
 let UUIRefNodeElement = class extends UUIRefElement {
   constructor() {
     super(...arguments);
-    __privateAdd(this, _onSlotIconChange);
-    __privateAdd(this, _renderFallbackIcon);
-    __privateAdd(this, _renderContent);
-    __privateAdd(this, _renderLink);
-    __privateAdd(this, _renderButton);
+    __privateAdd(this, _UUIRefNodeElement_instances);
     this.name = "";
     this.detail = "";
     this._iconSlotHasContent = false;
@@ -54,7 +42,7 @@ let UUIRefNodeElement = class extends UUIRefElement {
   }
   render() {
     return html`
-      ${this.href ? __privateMethod(this, _renderLink, renderLink_fn).call(this) : __privateMethod(this, _renderButton, renderButton_fn).call(this)}
+      ${__privateMethod(this, _UUIRefNodeElement_instances, renderSomething_fn).call(this)}
       <!-- Select border must be right after #open-part -->
       <div id="select-border"></div>
 
@@ -64,28 +52,27 @@ let UUIRefNodeElement = class extends UUIRefElement {
     `;
   }
 };
-_onSlotIconChange = new WeakSet();
+_UUIRefNodeElement_instances = new WeakSet();
 onSlotIconChange_fn = function(event) {
   this._iconSlotHasContent = event.target.assignedNodes({ flatten: true }).length > 0;
 };
-_renderFallbackIcon = new WeakSet();
 renderFallbackIcon_fn = function() {
   return html`<uui-icon .svg="${this.fallbackIcon}"></uui-icon>`;
 };
-_renderContent = new WeakSet();
 renderContent_fn = function() {
   return html`
-      <span id="icon">
-        <slot name="icon" @slotchange=${__privateMethod(this, _onSlotIconChange, onSlotIconChange_fn)}></slot>
-        ${this._iconSlotHasContent === false ? __privateMethod(this, _renderFallbackIcon, renderFallbackIcon_fn).call(this) : ""}
+      <span id="content">
+        <span id="icon">
+          <slot name="icon" @slotchange=${__privateMethod(this, _UUIRefNodeElement_instances, onSlotIconChange_fn)}></slot>
+          ${this._iconSlotHasContent === false ? __privateMethod(this, _UUIRefNodeElement_instances, renderFallbackIcon_fn).call(this) : ""}
+        </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>
     `;
 };
-_renderLink = new WeakSet();
 renderLink_fn = function() {
   return html`<a
       id="open-part"
@@ -93,12 +80,13 @@ renderLink_fn = function() {
       href=${ifDefined(!this.disabled ? this.href : void 0)}
       target=${ifDefined(this.target || void 0)}
       rel=${ifDefined(
-    this.target === "_blank" ? "noopener noreferrer" : void 0
+    this.rel || ifDefined(
+      this.target === "_blank" ? "noopener noreferrer" : void 0
+    )
   )}>
-      ${__privateMethod(this, _renderContent, renderContent_fn).call(this)}
+      ${__privateMethod(this, _UUIRefNodeElement_instances, renderContent_fn).call(this)}
     </a>`;
 };
-_renderButton = new WeakSet();
 renderButton_fn = function() {
   return html`
       <button
@@ -108,10 +96,17 @@ renderButton_fn = function() {
         @click=${this.handleOpenClick}
         @keydown=${this.handleOpenKeydown}
         ?disabled=${this.disabled}>
-        ${__privateMethod(this, _renderContent, renderContent_fn).call(this)}
+        ${__privateMethod(this, _UUIRefNodeElement_instances, renderContent_fn).call(this)}
       </button>
     `;
 };
+renderSomething_fn = function() {
+  if (this.readonly) {
+    return html`${__privateMethod(this, _UUIRefNodeElement_instances, renderContent_fn).call(this)}`;
+  } else {
+    return this.href ? __privateMethod(this, _UUIRefNodeElement_instances, renderLink_fn).call(this) : __privateMethod(this, _UUIRefNodeElement_instances, renderButton_fn).call(this);
+  }
+};
 UUIRefNodeElement.styles = [
   ...UUIRefElement.styles,
   css`
@@ -120,15 +115,17 @@ UUIRefNodeElement.styles = [
         padding: calc(var(--uui-size-2,6px) + 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;
       }
 
@@ -190,6 +187,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String })
 ], UUIRefNodeElement.prototype, "target", 2);
+__decorateClass([
+  property({ type: String })
+], UUIRefNodeElement.prototype, "rel", 2);
 __decorateClass([
   state()
 ], UUIRefNodeElement.prototype, "_iconSlotHasContent", 2);

package/lib/uui-ref-node.element.d.ts

@@ -40,6 +40,13 @@ export declare class UUIRefNodeElement extends UUIRefElement {
      * @default undefined
      */
     target?: '_blank' | '_parent' | '_self' | '_top';
+    /**
+     * Set the rel attribute for an anchor tag, only used when using href.
+     * @type {string}
+     * @attr
+     * @default undefined
+     */
+    rel?: string;
     private _iconSlotHasContent;
     protected fallbackIcon: string;
     connectedCallback(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-ref-node",
-  "version": "1.8.0",
+  "version": "1.9.0-rc.0",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,9 +30,9 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.8.0",
-    "@umbraco-ui/uui-icon": "1.8.0",
-    "@umbraco-ui/uui-ref": "1.8.0"
+    "@umbraco-ui/uui-base": "1.9.0-rc.0",
+    "@umbraco-ui/uui-icon": "1.9.0-rc.0",
+    "@umbraco-ui/uui-ref": "1.9.0-rc.0"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build && rollup -c rollup.config.js",
@@ -43,5 +43,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-ref-node",
-  "gitHead": "53021762a52dc54a46f0c5ef829c1cbaabde1160"
+  "gitHead": "e3e398e07b6ff9874aa0656cb7767df42f58a4ce"
 }