@umbraco-ui/uui-card-user 1.10.0 → 1.12.0

package/lib/index.js

@@ -1,7 +1,7 @@
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { slotHasContent, 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,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 _UUICardUserElement_instances, renderButton_fn, renderLink_fn;
+var _UUICardUserElement_instances, renderButton_fn, renderLink_fn, renderContent_fn;
 let UUICardUserElement = class extends UUICardElement {
   constructor() {
     super(...arguments);
@@ -38,16 +38,9 @@ let UUICardUserElement = class extends UUICardElement {
   }
   render() {
     return html`
-      ${this._avatarSlotHasContent ? nothing : html`<uui-avatar
-            id="avatar"
-            name=${this.name}
-            size="m"></uui-avatar>`}
-      <slot
-        name="avatar"
-        id="avatar"
-        @slotchange=${this._avatarSlotChanged}></slot>
       ${this.href ? __privateMethod(this, _UUICardUserElement_instances, renderLink_fn).call(this) : __privateMethod(this, _UUICardUserElement_instances, renderButton_fn).call(this)}
-      <slot></slot>
+      <!-- Select border must be right after #open-part -->
+      <div id="select-border"></div>
       <slot name="tag"></slot>
       <slot name="actions"></slot>
     `;
@@ -60,7 +53,7 @@ renderButton_fn = function() {
       tabindex=${this.disabled ? nothing : "0"}
       @click=${this.handleOpenClick}
       @keydown=${this.handleOpenKeydown}>
-      <span> ${this.name} </span>
+      ${__privateMethod(this, _UUICardUserElement_instances, renderContent_fn).call(this)}
     </div>`;
 };
 renderLink_fn = function() {
@@ -74,18 +67,28 @@ renderLink_fn = function() {
       this.target === "_blank" ? "noopener noreferrer" : void 0
     )
   )}>
-      <span>${this.name}</span>
+      ${__privateMethod(this, _UUICardUserElement_instances, renderContent_fn).call(this)}
     </a>`;
 };
+renderContent_fn = function() {
+  return html`<div id="content">
+      ${this._avatarSlotHasContent ? nothing : html`<uui-avatar
+            class="avatar"
+            name=${this.name}
+            size="m"></uui-avatar>`}
+      <slot
+        name="avatar"
+        class="avatar"
+        @slotchange=${this._avatarSlotChanged}></slot>
+      <span>${this.name}</span>
+      <slot></slot>
+    </div>`;
+};
 UUICardUserElement.styles = [
   ...UUICardElement.styles,
   css`
       :host {
         min-width: 250px;
-        flex-direction: column;
-        justify-content: space-between;
-        padding: var(--uui-size-3,9px);
-        align-items: center;
       }
 
       slot:not([name])::slotted(*) {
@@ -107,8 +110,8 @@ UUICardUserElement.styles = [
 
       slot[name='actions'] {
         position: absolute;
-        top: var(--uui-size-4,12px);
-        right: var(--uui-size-4,12px);
+        top: var(--uui-size-space-4,12px);
+        right: var(--uui-size-space-4,12px);
         display: flex;
         justify-content: right;
 
@@ -121,35 +124,46 @@ UUICardUserElement.styles = [
         opacity: 1;
       }
 
-      #avatar {
-        margin: var(--uui-size-3,9px);
+      #open-part {
+        cursor: pointer;
+        flex-grow: 1;
+        padding: var(--uui-size-space-5,18px) var(--uui-size-space-4,12px);
+      }
+
+      :host([disabled]) #open-part {
+        pointer-events: none;
       }
 
-      slot[name='icon']::slotted(*) {
-        font-size: 1.2em;
+      #open-part:hover #content {
+        color: var(--uui-color-interactive-emphasis,#3544b1);
+      }
+      #open-part:hover #content > span {
+        text-decoration: underline;
       }
 
-      #open-part {
+      :host([selectable]) #open-part {
+        padding: 0;
+        margin: var(--uui-size-space-5,18px) var(--uui-size-space-4,12px);
+      }
+
+      #content {
         display: flex;
+        flex-direction: column;
         position: relative;
-        font-weight: 700;
         align-items: center;
-        cursor: pointer;
         margin: 0 0 3px 0;
       }
 
-      :host([disabled]) #open-part {
-        pointer-events: none;
-      }
-
-      #open-part > span {
+      #content > span {
         vertical-align: center;
         margin-top: 3px;
+        font-weight: 700;
       }
 
-      #open-part:hover {
-        text-decoration: underline;
-        color: var(--uui-color-interactive-emphasis,#3544b1);
+      .avatar {
+        font-size: 1.5em;
+        margin-top: var(--uui-size-space-1,3px);
+        margin-bottom: var(--uui-size-space-2,6px);
       }
     `
 ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-card-user",
-  "version": "1.10.0",
+  "version": "1.12.0",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -31,9 +31,9 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-avatar": "1.10.0",
-    "@umbraco-ui/uui-base": "1.10.0",
-    "@umbraco-ui/uui-card": "1.10.0"
+    "@umbraco-ui/uui-avatar": "1.12.0",
+    "@umbraco-ui/uui-base": "1.12.0",
+    "@umbraco-ui/uui-card": "1.12.0"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build && rollup -c rollup.config.js",
@@ -44,5 +44,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-card-user",
-  "gitHead": "fc19b5d3cd80cf4205ec56d14403ae0e926d6aed"
+  "gitHead": "0ac5219b2765bf6c90fe4943a6620b46a7fced4e"
 }