@umbraco-ui/uui-card-content-node 1.10.0 → 1.12.0

package/custom-elements.json

@@ -11,6 +11,12 @@
           "type": "string",
           "default": "\"''\""
         },
+        {
+          "name": "detail",
+          "description": "Node details",
+          "type": "string",
+          "default": "\"''\""
+        },
         {
           "name": "disabled",
           "description": "Set to true to prevent opening of this item.\nThis does not prevent selection, selection is controlled by property 'selectable'",
@@ -66,6 +72,13 @@
           "type": "string",
           "default": "\"''\""
         },
+        {
+          "name": "detail",
+          "attribute": "detail",
+          "description": "Node details",
+          "type": "string",
+          "default": "\"''\""
+        },
         {
           "name": "disabled",
           "attribute": "disabled",

package/lib/index.js

@@ -1,7 +1,7 @@
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
 import { UUICardElement } from '@umbraco-ui/uui-card/lib';
-import { css, html, nothing } from 'lit';
+import { html, css, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
@@ -21,14 +21,26 @@ 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 _UUICardContentNodeElement_instances, renderButton_fn, renderLink_fn;
+var _UUICardContentNodeElement_instances, renderContent_fn, renderButton_fn, renderLink_fn;
 let UUICardContentNodeElement = class extends UUICardElement {
   constructor() {
     super(...arguments);
     __privateAdd(this, _UUICardContentNodeElement_instances);
     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>`;
   }
   _onSlotIconChange(event) {
     this._iconSlotHasContent = event.target.assignedNodes({ flatten: true }).length > 0;
@@ -37,31 +49,45 @@ let UUICardContentNodeElement = class extends UUICardElement {
     demandCustomElement(this, "uui-icon");
     return html`<uui-icon .svg="${this.fallbackIcon}"></uui-icon>`;
   }
+  renderDetail() {
+    return html`<small id="detail"
+        >${this.detail}<slot name="detail"></slot></small
+      ><slot id="default"></slot>`;
+  }
   render() {
     return html`
       ${this.href ? __privateMethod(this, _UUICardContentNodeElement_instances, renderLink_fn).call(this) : __privateMethod(this, _UUICardContentNodeElement_instances, renderButton_fn).call(this)}
       <!-- Select border must be right after #open-part -->
       <div id="select-border"></div>
 
-      <slot></slot>
       <slot name="tag"></slot>
       <slot name="actions"></slot>
     `;
   }
 };
 _UUICardContentNodeElement_instances = new WeakSet();
+renderContent_fn = function() {
+  return html`
+      <span id="content">
+        <span id="item">
+          <span id="icon">
+            <slot name="icon" @slotchange=${this._onSlotIconChange}></slot>
+            ${this._iconSlotHasContent === false ? this._renderFallbackIcon() : ""}
+          </span>
+          <div id="name">${this.name}<slot name="name"></slot></div>
+        </span>
+        ${this.renderDetail()}
+      </span>
+    `;
+};
 renderButton_fn = function() {
-  return html`<div
+  return html`<button
       id="open-part"
       tabindex=${this.disabled ? nothing : 0}
       @click=${this.handleOpenClick}
       @keydown=${this.handleOpenKeydown}>
-      <span id="icon">
-        <slot name="icon" @slotchange=${this._onSlotIconChange}></slot>
-        ${this._iconSlotHasContent === false ? this._renderFallbackIcon() : ""}
-      </span>
-      <span id="name"> ${this.name} </span>
-    </div>`;
+      ${__privateMethod(this, _UUICardContentNodeElement_instances, renderContent_fn).call(this)}
+    </button>`;
 };
 renderLink_fn = function() {
   return html`<a
@@ -74,11 +100,7 @@ renderLink_fn = function() {
       this.target === "_blank" ? "noopener noreferrer" : void 0
     )
   )}>
-      <span id="icon">
-        <slot name="icon" @slotchange=${this._onSlotIconChange}></slot>
-        ${this._iconSlotHasContent === false ? this._renderFallbackIcon() : ""}
-      </span>
-      <span id="name"> ${this.name} </span>
+      ${__privateMethod(this, _UUICardContentNodeElement_instances, renderContent_fn).call(this)}
     </a>`;
 };
 UUICardContentNodeElement.styles = [
@@ -88,7 +110,6 @@ UUICardContentNodeElement.styles = [
         min-width: 250px;
         flex-direction: column;
         justify-content: space-between;
-        padding: var(--uui-size-3,9px) var(--uui-size-4,12px);
       }
 
       slot[name='tag'] {
@@ -126,36 +147,66 @@ UUICardContentNodeElement.styles = [
         line-height: calc(2 * var(--uui-size-3,9px));
       }
 
-      #icon {
-        font-size: 1.2em;
-        margin-right: var(--uui-size-1,3px);
-      }
-
       #open-part {
         display: flex;
         position: relative;
         font-weight: 700;
         align-items: center;
         cursor: pointer;
+        flex-grow: 1;
+        padding: var(--uui-size-space-4,12px) var(--uui-size-space-5,18px);
       }
 
-      :host([disabled]) #open-part {
+      #content {
+        align-self: stretch;
+        display: flex;
+        flex-direction: column;
+      }
+
+      #item {
+        position: relative;
+        display: flex;
+        align-self: stretch;
+        line-height: normal;
+        align-items: center;
+        margin-top: var(--uui-size-1,3px);
+      }
+
+      #icon {
+        font-size: 1.2em;
+        margin-right: var(--uui-size-1,3px);
+      }
+
+      :host([selectable]) #open-part {
+        padding: 0;
+        margin: var(--uui-size-space-4,12px) var(--uui-size-space-5,18px);
+      }
+
+      :host([disabled]) #name {
         pointer-events: none;
       }
 
-      #open-part:hover {
+      :host(:not([disabled])) #open-part:hover #icon {
+        color: var(--uui-color-interactive-emphasis,#3544b1);
+      }
+      :host(:not([disabled])) #open-part:hover #name {
         text-decoration: underline;
         color: var(--uui-color-interactive-emphasis,#3544b1);
       }
-
-      #name {
-        margin-top: 4px;
+      :host(:not([disabled])) #open-part:hover #detail {
+        color: var(--uui-color-interactive-emphasis,#3544b1);
+      }
+      :host(:not([disabled])) #open-part:hover #default {
+        color: var(--uui-color-interactive-emphasis,#3544b1);
       }
     `
 ];
 __decorateClass([
   property({ type: String })
 ], UUICardContentNodeElement.prototype, "name", 2);
+__decorateClass([
+  property({ type: String })
+], UUICardContentNodeElement.prototype, "detail", 2);
 __decorateClass([
   state()
 ], UUICardContentNodeElement.prototype, "_iconSlotHasContent", 2);

package/lib/uui-card-content-node.element.d.ts

@@ -16,10 +16,18 @@ export declare class UUICardContentNodeElement extends UUICardElement {
      * @default ''
      */
     name: string;
+    /**
+     * Node details
+     * @type {string}
+     * @attr
+     * @default ''
+     */
+    detail: string;
     private _iconSlotHasContent;
     protected fallbackIcon: string;
     private _onSlotIconChange;
     private _renderFallbackIcon;
+    protected renderDetail(): import("lit-html").TemplateResult<1>;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }

package/package.json

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