@umbraco-ui/uui-ref-node 1.11.0 → 1.12.0

package/lib/index.js

@@ -2,7 +2,7 @@ import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { UUIRefElement } from '@umbraco-ui/uui-ref/lib';
-import { css, html, nothing } from 'lit';
+import { html, css, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 
 var __defProp = Object.defineProperty;
@@ -21,7 +21,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 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;
+var _UUIRefNodeElement_instances, onSlotIconChange_fn, renderFallbackIcon_fn, renderContent_fn, renderLink_fn, renderButton_fn, renderOpenPart_fn;
 let UUIRefNodeElement = class extends UUIRefElement {
   constructor() {
     super(...arguments);
@@ -29,7 +29,18 @@ let UUIRefNodeElement = class extends UUIRefElement {
     this.name = "";
     this.detail = "";
     this._iconSlotHasContent = false;
-    this.fallbackIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M396.441 138.878l-83.997-83.993-7.331-7.333H105.702v416.701h298.071V146.214l-7.332-7.336zM130.74 439.217V72.591h141.613c37.201 0 19.274 88.18 19.274 88.18s86-20.901 87.104 18.534v259.912H130.74z"></path></svg>';
+    this.fallbackIcon = `<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.75"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    id="icon">
+    <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
+    <path d="M14 2v4a2 2 0 0 0 2 2h4" />
+  </svg>`;
   }
   connectedCallback() {
     super.connectedCallback();
@@ -42,12 +53,12 @@ let UUIRefNodeElement = class extends UUIRefElement {
   }
   render() {
     return html`
-      ${__privateMethod(this, _UUIRefNodeElement_instances, renderSomething_fn).call(this)}
+      ${__privateMethod(this, _UUIRefNodeElement_instances, renderOpenPart_fn).call(this)}
       <!-- Select border must be right after #open-part -->
       <div id="select-border"></div>
 
       <slot></slot>
-      <slot name="tag"></slot>
+      <slot name="tag" id="tag-container"></slot>
       <slot name="actions" id="actions-container"></slot>
     `;
   }
@@ -100,7 +111,7 @@ renderButton_fn = function() {
       </button>
     `;
 };
-renderSomething_fn = function() {
+renderOpenPart_fn = function() {
   if (this.readonly) {
     return html`${__privateMethod(this, _UUIRefNodeElement_instances, renderContent_fn).call(this)}`;
   } else {
@@ -112,7 +123,7 @@ UUIRefNodeElement.styles = [
   css`
       :host {
         min-width: 250px;
-        padding: calc(var(--uui-size-2,6px) + 1px);
+        padding: 1px;
       }
 
       #content {
@@ -127,6 +138,10 @@ UUIRefNodeElement.styles = [
         color: inherit;
         text-decoration: none;
         cursor: pointer;
+        align-self: stretch;
+        display: flex;
+        flex-grow: 1;
+        padding: calc(var(--uui-size-2,6px));
       }
 
       #icon {
@@ -152,11 +167,16 @@ UUIRefNodeElement.styles = [
         font-size: var(--uui-type-small-size,12px);
       }
 
+      :host([selectable]) #open-part {
+        flex-grow: 0;
+        padding: 0;
+        margin: calc(var(--uui-size-2,6px));
+      }
+
       :host(:not([disabled])) #open-part:hover #icon {
         color: var(--uui-color-interactive-emphasis,#3544b1);
       }
       :host(:not([disabled])) #open-part:hover #name {
-        font-weight: 700;
         text-decoration: underline;
         color: var(--uui-color-interactive-emphasis,#3544b1);
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-ref-node",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,9 +30,9 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.11.0",
-    "@umbraco-ui/uui-icon": "1.11.0",
-    "@umbraco-ui/uui-ref": "1.11.0"
+    "@umbraco-ui/uui-base": "1.12.0",
+    "@umbraco-ui/uui-icon": "1.12.0",
+    "@umbraco-ui/uui-ref": "1.12.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": "414ce88901f82c5fc7d6be942779047bb34a1407"
+  "gitHead": "0ac5219b2765bf6c90fe4943a6620b46a7fced4e"
 }