@umbraco-ui/uui-card-block-type 1.12.2 → 1.13.0-rc.0

package/lib/index.js

@@ -3,7 +3,6 @@ import { UUICardElement } from '@umbraco-ui/uui-card/lib';
 import { html, css, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { styleMap } from 'lit/directives/style-map.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -21,21 +20,25 @@ 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 _UUICardBlockTypeElement_instances, renderButton_fn, renderLink_fn;
+var _UUICardBlockTypeElement_instances, renderButton_fn, renderLink_fn, renderMedia_fn, renderContent_fn;
 let UUICardBlockTypeElement = class extends UUICardElement {
   constructor() {
     super(...arguments);
     __privateAdd(this, _UUICardBlockTypeElement_instances);
     this.name = "";
   }
+  get background() {
+    return void 0;
+  }
+  set background(value) {
+    this.style.backgroundColor = value ?? "";
+  }
   render() {
     return html`
-      <div
-        id="portrait"
-        style=${styleMap({ backgroundColor: this.background })}>
-        <slot></slot>
-      </div>
+      ${__privateMethod(this, _UUICardBlockTypeElement_instances, renderMedia_fn).call(this)}
       ${this.href ? __privateMethod(this, _UUICardBlockTypeElement_instances, renderLink_fn).call(this) : __privateMethod(this, _UUICardBlockTypeElement_instances, renderButton_fn).call(this)}
+      <!-- Select border must be right after #open-part -->
+      <div id="select-border"></div>
 
       <slot name="tag"></slot>
       <slot name="actions"></slot>
@@ -47,10 +50,11 @@ renderButton_fn = function() {
   return html`
       <button
         id="open-part"
+        class="uui-text"
         tabindex=${this.disabled ? nothing : "0"}
         @click=${this.handleOpenClick}
         @keydown=${this.handleOpenKeydown}>
-        <strong>${this.name}</strong><small>${this.description}</small>
+        ${__privateMethod(this, _UUICardBlockTypeElement_instances, renderContent_fn).call(this)}
       </button>
     `;
 };
@@ -58,6 +62,7 @@ renderLink_fn = function() {
   return html`
       <a
         id="open-part"
+        class="uui-text"
         tabindex=${this.disabled ? nothing : "0"}
         href=${ifDefined(!this.disabled ? this.href : void 0)}
         target=${ifDefined(this.target || void 0)}
@@ -66,54 +71,83 @@ renderLink_fn = function() {
       this.target === "_blank" ? "noopener noreferrer" : void 0
     )
   )}>
-        <strong>${this.name}</strong><small>${this.description}</small>
+        ${__privateMethod(this, _UUICardBlockTypeElement_instances, renderContent_fn).call(this)}
       </a>
     `;
 };
+renderMedia_fn = function() {
+  return html`<div id="portrait">
+      <slot></slot>
+    </div> `;
+};
+renderContent_fn = function() {
+  return html`
+      <div id="content">
+        <span id="name">${this.name}</span>
+        <small>${this.description}<slot name="description"></slot></small>
+      </div></div>
+    `;
+};
 UUICardBlockTypeElement.styles = [
   ...UUICardElement.styles,
   css`
       :host {
-        flex-direction: column;
-        justify-content: flex-start;
+        background-color: var(--uui-color-surface-alt,#f3f3f5);
       }
 
-      :host(:hover) #info {
-        color: var(--uui-color-interactive-emphasis,#3544b1);
+      slot[name='tag'] {
+        position: absolute;
+        top: var(--uui-size-4,12px);
+        right: var(--uui-size-4,12px);
+        display: flex;
+        justify-content: right;
+        z-index: 2;
+      }
+
+      slot[name='actions'] {
+        position: absolute;
+        top: var(--uui-size-4,12px);
+        right: var(--uui-size-4,12px);
+        display: flex;
+        justify-content: right;
+        z-index: 2;
+        opacity: 0;
+        transition: opacity 120ms;
+      }
+      :host(:focus) slot[name='actions'],
+      :host(:focus-within) slot[name='actions'],
+      :host(:hover) slot[name='actions'] {
+        opacity: 1;
       }
 
       #portrait {
-        background-color: var(--uui-color-surface-alt,#f3f3f5);
         display: flex;
         justify-content: center;
         min-height: 150px;
         max-height: 150px;
+        width: 100%;
+        margin-bottom: var(--uui-size-layout-2,30px);
       }
 
       slot:not([name])::slotted(*) {
         align-self: center;
-        font-size: var(--uui-size-8,24px);
         border-radius: var(--uui-border-radius,3px);
         object-fit: cover;
         max-width: 100%;
         max-height: 100%;
+        font-size: var(--uui-size-8,24px);
       }
 
       #open-part {
-        text-align: left;
-        background-color: var(--uui-color-surface,#fff);
-        cursor: pointer;
+        position: absolute;
+        z-index: 1;
+        inset: 0;
         color: var(--uui-color-interactive,#1b264f);
         border: none;
-        border-top: 1px solid var(--uui-color-divider,#f6f6f7);
-        border-radius: 0 0 var(--uui-border-radius,3px) var(--uui-border-radius,3px);
-        font-family: inherit;
-        font-size: var(--uui-type-small-size,12px);
-        box-sizing: border-box;
-        padding: var(--uui-size-2,6px) var(--uui-size-4,12px);
+        cursor: pointer;
         display: flex;
         flex-direction: column;
-        line-height: var(--uui-size-6,18px);
+        justify-content: flex-end;
       }
 
       :host([disabled]) #open-part {
@@ -122,35 +156,43 @@ UUICardBlockTypeElement.styles = [
         color: var(--uui-color-contrast-disabled);
       }
 
-      #open-part:hover strong {
-        text-decoration: underline;
-      }
       #open-part:hover {
         color: var(--uui-color-interactive-emphasis,#3544b1);
       }
+      #open-part:hover #name {
+        text-decoration: underline;
+      }
 
       :host([image]:not([image=''])) #open-part {
         transition: opacity 0.5s 0.5s;
         opacity: 0;
       }
-      slot[name='tag'] {
-        position: absolute;
-        top: var(--uui-size-4,12px);
-        right: var(--uui-size-4,12px);
+
+      #content {
+        position: relative;
         display: flex;
-        justify-content: right;
+        flex-direction: column;
+        width: 100%;
+        font-family: inherit;
+        font-size: var(--uui-type-small-size,12px);
+        box-sizing: border-box;
+        text-align: left;
+        word-break: break-word;
+        padding-top: var(--uui-size-space-3,9px);
       }
 
-      slot[name='actions'] {
+      #content::before {
+        content: '';
         position: absolute;
-        top: var(--uui-size-4,12px);
-        right: var(--uui-size-4,12px);
-        display: flex;
-        justify-content: right;
-
-        opacity: 0;
-        transition: opacity 120ms;
+        inset: 0;
+        z-index: -1;
+        border-top: 1px solid var(--uui-color-divider,#f6f6f7);
+        border-radius: 0 0 var(--uui-border-radius,3px) var(--uui-border-radius,3px);
+        background-color: var(--uui-color-surface,#fff);
+        pointer-events: none;
+        opacity: 0.96;
       }
+
       :host(:focus) slot[name='actions'],
       :host(:focus-within) slot[name='actions'],
       :host(:hover) slot[name='actions'] {
@@ -169,6 +211,18 @@ UUICardBlockTypeElement.styles = [
         transition-duration: 120ms;
         transition-delay: 0s;
       }
+
+      :host([selectable]) #open-part {
+        inset: var(--uui-size-space-3,9px) var(--uui-size-space-4,12px);
+      }
+      :host(:not([selectable])) #content {
+        padding: var(--uui-size-space-3,9px) var(--uui-size-space-4,12px);
+      }
+      :host([selectable]) #content::before {
+        inset: calc(var(--uui-size-space-3,9px) * -1)
+          calc(var(--uui-size-space-4,12px) * -1);
+        top: 0;
+      }
     `
 ];
 __decorateClass([
@@ -179,7 +233,7 @@ __decorateClass([
 ], UUICardBlockTypeElement.prototype, "description", 2);
 __decorateClass([
   property({ type: String, attribute: "background" })
-], UUICardBlockTypeElement.prototype, "background", 2);
+], UUICardBlockTypeElement.prototype, "background", 1);
 UUICardBlockTypeElement = __decorateClass([
   defineElement("uui-card-block-type")
 ], UUICardBlockTypeElement);

package/lib/uui-card-block-type.element.d.ts

@@ -25,7 +25,8 @@ export declare class UUICardBlockTypeElement extends UUICardElement {
      * @default undefined
      */
     description?: string;
-    background?: string;
+    get background(): string | undefined;
+    set background(value: string | undefined);
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-card-block-type",
-  "version": "1.12.2",
+  "version": "1.13.0-rc.0",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,8 +30,8 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.12.2",
-    "@umbraco-ui/uui-card": "1.12.2"
+    "@umbraco-ui/uui-base": "1.13.0-rc.0",
+    "@umbraco-ui/uui-card": "1.13.0-rc.0"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build && rollup -c rollup.config.js",
@@ -42,5 +42,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-card-block-type",
-  "gitHead": "207119ec53a655eeddfa1d626155490490336753"
+  "gitHead": "864afa6c182c2a73c479237732dadc1abc69a4a0"
 }