@umbraco-ui/uui 1.17.0 → 2.0.0-alpha.1

package/dist/components/card/card.element.d.ts

@@ -0,0 +1,54 @@
+import { LitElement } from 'lit';
+import '../checkbox/checkbox.js';
+declare const UUICardElement_base: (new (...args: any[]) => import("../../index.js").UUISelectOnlyMixinInterface) & (new (...args: any[]) => import("../../index.js").UUISelectableMixinInterface) & typeof LitElement;
+/**
+ *  Card is a Component that provides the basics for a Card component. This can be extended in code to match a certain need.
+ *  @element uui-card
+ *  @fires {UUICardEvent} open - fires when the card title is clicked.
+ *  @description - Base card component to be extended by specific card elements.
+ *  @slot - Default content.
+ */
+export declare class UUICardElement extends UUICardElement_base {
+    /**
+     * Set to true to prevent opening of this item.
+     * This does not prevent selection, selection is controlled by property 'selectable'
+     * @type {boolean}
+     * @attr disabled
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Set to true to highlight there is an error with this item.
+     * @type {boolean}
+     * @attr error
+     * @default false
+     */
+    error: boolean;
+    /**
+     * Set an href, this will turns the name of the card into an anchor tag.
+     * @type {string}
+     * @attr
+     * @default undefined
+     */
+    href?: string;
+    /**
+     * Set an anchor tag target, only used when using href.
+     * @type {string}
+     * @attr
+     * @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;
+    protected handleOpenClick(e: Event): void;
+    protected handleOpenKeydown(e: KeyboardEvent): void;
+    protected renderCheckbox(): import("lit-html").TemplateResult<1> | undefined;
+    protected render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}
+export {};

package/dist/components/card/card.element.js

@@ -0,0 +1,242 @@
+import { LitElement, html, css } from "lit";
+import { property } from "lit/decorators.js";
+import { UUICardEvent } from "./UUICardEvent.js";
+import "../checkbox/checkbox.js";
+import { SelectOnlyMixin } from "../../internal/mixins/SelectOnlyMixin.js";
+import { SelectableMixin } from "../../internal/mixins/SelectableMixin.js";
+import { UUITextStyles } from "../../styles/uui-text.styles.js";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const _UUICardElement = class _UUICardElement extends SelectOnlyMixin(
+  SelectableMixin(LitElement)
+) {
+  constructor() {
+    super(...arguments);
+    this.disabled = false;
+    this.error = false;
+  }
+  // This is deprecated - use href instead
+  handleOpenClick(e) {
+    if (this.disabled) return;
+    e.stopPropagation();
+    this.dispatchEvent(new UUICardEvent(UUICardEvent.OPEN));
+  }
+  // This is deprecated - use href instead
+  handleOpenKeydown(e) {
+    if (this.disabled) return;
+    if (e.key !== "Enter") return;
+    e.preventDefault();
+    e.stopPropagation();
+    this.dispatchEvent(new UUICardEvent(UUICardEvent.OPEN));
+  }
+  renderCheckbox() {
+    if (!this.selectable) return;
+    return html`
+      <uui-checkbox
+        id="select-checkbox"
+        label="select"
+        tabindex="-1"
+        ?checked=${this.selected}
+        @click=${(e) => e.stopPropagation()}
+        @change=${() => this.click()}>
+      </uui-checkbox>
+    `;
+  }
+  render() {
+    return html`<slot id="open-part"></slot>
+      <div id="select-border"></div>`;
+  }
+};
+_UUICardElement.styles = [
+  UUITextStyles,
+  css`
+      :host {
+        position: relative;
+        display: flex;
+        width: 100%;
+        justify-content: center;
+        box-sizing: border-box;
+        border: 1px solid var(--uui-color-border);
+        border-radius: var(--uui-border-radius-2);
+        min-height: var(--uui-layout-medium);
+        background-color: var(--uui-color-surface);
+        --uui-card-border-width: 3px;
+        transition: box-shadow 100ms ease-out;
+      }
+
+      :host([selectable]:focus-visible) {
+        outline-color: var(--uui-color-focus);
+        outline-width: var(--uui-card-border-width);
+        outline-style: solid;
+        outline-offset: var(--uui-card-border-width);
+      }
+
+      :host() * {
+        /* TODO: implement globally shared outline style */
+        outline-color: var(--uui-color-focus);
+      }
+
+      :host([error])::before {
+        content: '';
+        position: absolute;
+        pointer-events: none;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+        box-sizing: border-box;
+        border: var(--uui-card-border-width) solid var(--uui-color-invalid);
+        border-radius: var(--uui-border-radius-2);
+      }
+
+      button {
+        font-size: inherit;
+        font-family: inherit;
+        border: 0;
+        padding: 0;
+        margin: 0 0 1px 0;
+        background-color: transparent;
+        text-align: left;
+        color: var(--uui-color-text);
+      }
+
+      a {
+        text-decoration: none;
+        color: inherit;
+        line-height: initial;
+      }
+
+      button:focus,
+      a:focus {
+        outline-color: var(--uui-color-focus);
+        outline-width: var(--uui-card-border-width);
+        outline-style: solid;
+        outline-offset: var(--uui-card-border-width);
+        border-radius: var(--uui-border-radius-2);
+      }
+
+      :host([selectable]) {
+        cursor: pointer;
+      }
+      :host([selectable]) #select-border {
+        position: absolute;
+        z-index: 2;
+        top: -2px;
+        left: -2px;
+        right: -2px;
+        bottom: -2px;
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity 120ms;
+      }
+      :host([selectable]) #select-border::after {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        border: 2px solid var(--uui-color-selected);
+        border-radius: calc(var(--uui-border-radius-2) + 2px);
+        box-shadow:
+          0 0 4px 0 var(--uui-color-selected),
+          inset 0 0 2px 0 var(--uui-color-selected);
+      }
+      :host([selected]) #select-border {
+        opacity: 1;
+      }
+      :host([selectable]:not([selected]):hover) #select-border {
+        opacity: 0.33;
+      }
+      :host([selectable][selected]:hover) #select-border {
+        opacity: 0.8;
+      }
+
+      :host([selectable]:not([selected])) #open-part:hover + #select-border {
+        opacity: 0;
+      }
+      :host([selectable][selected]) #open-part:hover + #select-border {
+        opacity: 1;
+      }
+
+      :host([selectable]:not([selected]):hover) #select-border::after {
+        animation: not-selected--hover 1.2s infinite;
+      }
+      @keyframes not-selected--hover {
+        0%,
+        100% {
+          opacity: 0.66;
+        }
+        50% {
+          opacity: 1;
+        }
+      }
+
+      :host([selectable][selected]:hover) #select-border::after {
+        animation: selected--hover 1.4s infinite;
+      }
+      @keyframes selected--hover {
+        0%,
+        100% {
+          opacity: 1;
+        }
+        50% {
+          opacity: 0.66;
+        }
+      }
+      :host([selectable]) #open-part:hover + #select-border::after {
+        animation: none;
+      }
+
+      :host([select-only]) *,
+      :host([select-only]) ::slotted(*) {
+        pointer-events: none;
+      }
+
+      :host([disabled]) {
+        background: var(--uui-color-disabled);
+        color: var(--uui-color-disabled-contrast);
+      }
+
+      #select-checkbox {
+        position: absolute;
+        top: var(--uui-size-4);
+        left: var(--uui-size-4);
+        opacity: 0;
+        transition: opacity 120ms;
+        z-index: 3;
+      }
+      :host(:focus) #select-checkbox,
+      :host(:focus-within) #select-checkbox,
+      :host(:hover) #select-checkbox,
+      #select-checkbox[checked] {
+        opacity: 1;
+      }
+    `
+];
+let UUICardElement = _UUICardElement;
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "disabled" })
+], UUICardElement.prototype, "disabled");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UUICardElement.prototype, "error");
+__decorateClass([
+  property({ type: String })
+], UUICardElement.prototype, "href");
+__decorateClass([
+  property({ type: String })
+], UUICardElement.prototype, "target");
+__decorateClass([
+  property({ type: String })
+], UUICardElement.prototype, "rel");
+export {
+  UUICardElement
+};
+//# sourceMappingURL=card.element.js.map

package/dist/components/card/card.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.element.js","sources":["../../../src/components/card/card.element.ts"],"sourcesContent":["import {\n  SelectableMixin,\n  SelectOnlyMixin,\n} from '../../internal/mixins/index.js';\nimport { UUITextStyles } from '../../styles/index.js';\nimport { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { UUICardEvent } from './UUICardEvent.js';\n\nimport '../checkbox/checkbox.js';\n\n/**\n *  Card is a Component that provides the basics for a Card component. This can be extended in code to match a certain need.\n *  @element uui-card\n *  @fires {UUICardEvent} open - fires when the card title is clicked.\n *  @description - Base card component to be extended by specific card elements.\n *  @slot - Default content.\n */\nexport class UUICardElement extends SelectOnlyMixin(\n  SelectableMixin(LitElement),\n) {\n  /**\n   * Set to true to prevent opening of this item.\n   * This does not prevent selection, selection is controlled by property 'selectable'\n   * @type {boolean}\n   * @attr disabled\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'disabled' })\n  disabled = false;\n\n  /**\n   * Set to true to highlight there is an error with this item.\n   * @type {boolean}\n   * @attr error\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  error = false;\n\n  /**\n   * Set an href, this will turns the name of the card into an anchor tag.\n   * @type {string}\n   * @attr\n   * @default undefined\n   */\n  @property({ type: String })\n  public href?: string;\n\n  /**\n   * Set an anchor tag target, only used when using href.\n   * @type {string}\n   * @attr\n   * @default undefined\n   */\n  @property({ type: String })\n  public target?: '_blank' | '_parent' | '_self' | '_top';\n\n  /**\n   * Set the rel attribute for an anchor tag, only used when using href.\n   * @type {string}\n   * @attr\n   * @default undefined\n   */\n  @property({ type: String })\n  public rel?: string;\n\n  // This is deprecated - use href instead\n  protected handleOpenClick(e: Event) {\n    if (this.disabled) return;\n\n    e.stopPropagation();\n    this.dispatchEvent(new UUICardEvent(UUICardEvent.OPEN));\n  }\n  // This is deprecated - use href instead\n  protected handleOpenKeydown(e: KeyboardEvent) {\n    if (this.disabled) return;\n    if (e.key !== 'Enter') return;\n\n    e.preventDefault();\n    e.stopPropagation();\n    this.dispatchEvent(new UUICardEvent(UUICardEvent.OPEN));\n  }\n\n  protected renderCheckbox() {\n    if (!this.selectable) return;\n    return html`\n      <uui-checkbox\n        id=\"select-checkbox\"\n        label=\"select\"\n        tabindex=\"-1\"\n        ?checked=${this.selected}\n        @click=${(e: MouseEvent) => e.stopPropagation()}\n        @change=${() => this.click()}>\n      </uui-checkbox>\n    `;\n  }\n\n  protected render() {\n    return html`<slot id=\"open-part\"></slot>\n      <div id=\"select-border\"></div>`;\n  }\n\n  static override readonly styles = [\n    UUITextStyles,\n    css`\n      :host {\n        position: relative;\n        display: flex;\n        width: 100%;\n        justify-content: center;\n        box-sizing: border-box;\n        border: 1px solid var(--uui-color-border);\n        border-radius: var(--uui-border-radius-2);\n        min-height: var(--uui-layout-medium);\n        background-color: var(--uui-color-surface);\n        --uui-card-border-width: 3px;\n        transition: box-shadow 100ms ease-out;\n      }\n\n      :host([selectable]:focus-visible) {\n        outline-color: var(--uui-color-focus);\n        outline-width: var(--uui-card-border-width);\n        outline-style: solid;\n        outline-offset: var(--uui-card-border-width);\n      }\n\n      :host() * {\n        /* TODO: implement globally shared outline style */\n        outline-color: var(--uui-color-focus);\n      }\n\n      :host([error])::before {\n        content: '';\n        position: absolute;\n        pointer-events: none;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        z-index: 1;\n        box-sizing: border-box;\n        border: var(--uui-card-border-width) solid var(--uui-color-invalid);\n        border-radius: var(--uui-border-radius-2);\n      }\n\n      button {\n        font-size: inherit;\n        font-family: inherit;\n        border: 0;\n        padding: 0;\n        margin: 0 0 1px 0;\n        background-color: transparent;\n        text-align: left;\n        color: var(--uui-color-text);\n      }\n\n      a {\n        text-decoration: none;\n        color: inherit;\n        line-height: initial;\n      }\n\n      button:focus,\n      a:focus {\n        outline-color: var(--uui-color-focus);\n        outline-width: var(--uui-card-border-width);\n        outline-style: solid;\n        outline-offset: var(--uui-card-border-width);\n        border-radius: var(--uui-border-radius-2);\n      }\n\n      :host([selectable]) {\n        cursor: pointer;\n      }\n      :host([selectable]) #select-border {\n        position: absolute;\n        z-index: 2;\n        top: -2px;\n        left: -2px;\n        right: -2px;\n        bottom: -2px;\n        pointer-events: none;\n        opacity: 0;\n        transition: opacity 120ms;\n      }\n      :host([selectable]) #select-border::after {\n        content: '';\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n        border: 2px solid var(--uui-color-selected);\n        border-radius: calc(var(--uui-border-radius-2) + 2px);\n        box-shadow:\n          0 0 4px 0 var(--uui-color-selected),\n          inset 0 0 2px 0 var(--uui-color-selected);\n      }\n      :host([selected]) #select-border {\n        opacity: 1;\n      }\n      :host([selectable]:not([selected]):hover) #select-border {\n        opacity: 0.33;\n      }\n      :host([selectable][selected]:hover) #select-border {\n        opacity: 0.8;\n      }\n\n      :host([selectable]:not([selected])) #open-part:hover + #select-border {\n        opacity: 0;\n      }\n      :host([selectable][selected]) #open-part:hover + #select-border {\n        opacity: 1;\n      }\n\n      :host([selectable]:not([selected]):hover) #select-border::after {\n        animation: not-selected--hover 1.2s infinite;\n      }\n      @keyframes not-selected--hover {\n        0%,\n        100% {\n          opacity: 0.66;\n        }\n        50% {\n          opacity: 1;\n        }\n      }\n\n      :host([selectable][selected]:hover) #select-border::after {\n        animation: selected--hover 1.4s infinite;\n      }\n      @keyframes selected--hover {\n        0%,\n        100% {\n          opacity: 1;\n        }\n        50% {\n          opacity: 0.66;\n        }\n      }\n      :host([selectable]) #open-part:hover + #select-border::after {\n        animation: none;\n      }\n\n      :host([select-only]) *,\n      :host([select-only]) ::slotted(*) {\n        pointer-events: none;\n      }\n\n      :host([disabled]) {\n        background: var(--uui-color-disabled);\n        color: var(--uui-color-disabled-contrast);\n      }\n\n      #select-checkbox {\n        position: absolute;\n        top: var(--uui-size-4);\n        left: var(--uui-size-4);\n        opacity: 0;\n        transition: opacity 120ms;\n        z-index: 3;\n      }\n      :host(:focus) #select-checkbox,\n      :host(:focus-within) #select-checkbox,\n      :host(:hover) #select-checkbox,\n      #select-checkbox[checked] {\n        opacity: 1;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAmBO,MAAM,kBAAN,MAAM,wBAAuB;AAAA,EAClC,gBAAgB,UAAU;AAC5B,EAAE;AAAA,EAFK,cAAA;AAAA,UAAA,GAAA,SAAA;AAWL,SAAA,WAAW;AASX,SAAA,QAAQ;AAAA,EAAA;AAAA;AAAA,EA8BE,gBAAgB,GAAU;AAClC,QAAI,KAAK,SAAU;AAEnB,MAAE,gBAAA;AACF,SAAK,cAAc,IAAI,aAAa,aAAa,IAAI,CAAC;AAAA,EACxD;AAAA;AAAA,EAEU,kBAAkB,GAAkB;AAC5C,QAAI,KAAK,SAAU;AACnB,QAAI,EAAE,QAAQ,QAAS;AAEvB,MAAE,eAAA;AACF,MAAE,gBAAA;AACF,SAAK,cAAc,IAAI,aAAa,aAAa,IAAI,CAAC;AAAA,EACxD;AAAA,EAEU,iBAAiB;AACzB,QAAI,CAAC,KAAK,WAAY;AACtB,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKQ,KAAK,QAAQ;AAAA,iBACf,CAAC,MAAkB,EAAE,gBAAA,CAAiB;AAAA,kBACrC,MAAM,KAAK,OAAO;AAAA;AAAA;AAAA,EAGlC;AAAA,EAEU,SAAS;AACjB,WAAO;AAAA;AAAA,EAET;AAwKF;AAtKE,gBAAyB,SAAS;AAAA,EAChC;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAvFG,IAAM,iBAAN;AAWL,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,YAAY;AAAA,GAVtD,eAWX,WAAA,UAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAnB/B,eAoBX,WAAA,OAAA;AASO,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA5Bf,eA6BJ,WAAA,MAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GArCf,eAsCJ,WAAA,QAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA9Cf,eA+CJ,WAAA,KAAA;"}

package/dist/components/card/card.js

@@ -0,0 +1,10 @@
+import { defineElement } from "../../internal/registration/index.js";
+import { UUICardElement } from "./card.element.js";
+import { UUICardEvent } from "./UUICardEvent.js";
+defineElement("uui-card", UUICardElement);
+export {
+  UUICardElement,
+  UUICardEvent,
+  UUICardElement as default
+};
+//# sourceMappingURL=card.js.map

package/dist/components/card/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sources":["../../../src/components/card/card.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUICardElement } from './card.element.js';\n\ndefineElement('uui-card', UUICardElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-card': UUICardElement;\n  }\n}\n\nexport * from './card.element.js';\nexport * from './UUICardEvent.js';\nexport { UUICardElement as default } from './card.element.js';\n"],"names":[],"mappings":";;;AAGA,cAAc,YAAY,cAAc;"}

package/dist/components/card-block-type/card-block-type.d.ts

@@ -0,0 +1,8 @@
+import { UUICardBlockTypeElement } from './card-block-type.element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-card-block-type': UUICardBlockTypeElement;
+    }
+}
+export * from './card-block-type.element.js';
+export { UUICardBlockTypeElement as default } from './card-block-type.element.js';

package/dist/components/card-block-type/card-block-type.element.d.ts

@@ -0,0 +1,32 @@
+import { UUICardElement } from '../card/card.js';
+export type BlockTypeIcon = {
+    name?: string;
+    color?: string;
+};
+/**
+ * @element uui-card-block-type
+ * @slot - slot for the default content area
+ * @slot tag - slot for the tag with support for `<uui-tag>` elements
+ * @slot actions - slot for the actions with support for the `<uui-action-bar>` element
+ */
+export declare class UUICardBlockTypeElement extends UUICardElement {
+    #private;
+    /**
+     * Block type name
+     * @type {string}
+     * @attr name
+     * @default ''
+     */
+    name: string;
+    /**
+     * Block type description
+     * @type {string}
+     * @attr description
+     * @default undefined
+     */
+    description?: string;
+    get background(): string | undefined;
+    set background(value: string | undefined);
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}

package/dist/components/card-block-type/card-block-type.element.js

@@ -0,0 +1,249 @@
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+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, renderMedia_fn, renderContent_fn;
+import "../card/card.js";
+import { nothing, html, css } from "lit";
+import { property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { UUICardElement } from "../card/card.element.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+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);
+  return result;
+};
+const _UUICardBlockTypeElement = class _UUICardBlockTypeElement 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`
+      ${__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>
+      ${this.selectable ? this.renderCheckbox() : nothing}
+      <slot name="tag"></slot>
+      <slot name="actions"></slot>
+    `;
+  }
+};
+_UUICardBlockTypeElement_instances = new WeakSet();
+renderButton_fn = function() {
+  const tabIndex = !this.disabled ? this.selectOnly ? -1 : 0 : void 0;
+  return html`
+      <button
+        id="open-part"
+        class="uui-text"
+        tabindex=${ifDefined(tabIndex)}
+        @click=${this.handleOpenClick}
+        @keydown=${this.handleOpenKeydown}>
+        ${__privateMethod(this, _UUICardBlockTypeElement_instances, renderContent_fn).call(this)}
+      </button>
+    `;
+};
+renderLink_fn = function() {
+  const tabIndex = !this.disabled ? this.selectOnly ? -1 : 0 : void 0;
+  const rel = this.target === "_blank" ? "noopener noreferrer" : void 0;
+  return html`
+      <a
+        id="open-part"
+        class="uui-text"
+        tabindex=${ifDefined(tabIndex)}
+        href=${ifDefined(!this.disabled ? this.href : void 0)}
+        target=${ifDefined(this.target || void 0)}
+        rel=${ifDefined(this.rel || rel)}>
+        ${__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 title="${this.name}" id="name">${this.name}</span>
+        <small title="${ifDefined(this.description)}">${this.description}<slot name="description"></slot></small>
+      </div></div>
+    `;
+};
+_UUICardBlockTypeElement.styles = [
+  ...UUICardElement.styles,
+  css`
+      :host {
+        background-color: var(--uui-color-surface-alt);
+      }
+
+      slot[name='tag'] {
+        position: absolute;
+        bottom: var(--uui-size-4);
+        right: var(--uui-size-4);
+        display: flex;
+        justify-content: right;
+        z-index: 2;
+      }
+
+      slot[name='actions'] {
+        position: absolute;
+        top: var(--uui-size-4);
+        right: var(--uui-size-4);
+        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 {
+        display: flex;
+        justify-content: center;
+        min-height: 150px;
+        max-height: 150px;
+        width: 100%;
+        margin-bottom: var(--uui-size-layout-2);
+      }
+
+      slot:not([name])::slotted(*) {
+        align-self: center;
+        border-radius: var(--uui-border-radius-2);
+        object-fit: cover;
+        max-width: 100%;
+        max-height: 100%;
+        font-size: var(--uui-size-8);
+      }
+
+      #open-part {
+        position: absolute;
+        z-index: 1;
+        inset: 0;
+        margin-bottom: 0;
+        color: var(--uui-color-interactive);
+        border: none;
+        cursor: pointer;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+      }
+
+      :host([disabled]) #open-part {
+        pointer-events: none;
+        background: var(--uui-color-disabled);
+        color: var(--uui-color-contrast-disabled);
+      }
+
+      #open-part:hover {
+        color: var(--uui-color-interactive-emphasis);
+      }
+      #open-part:hover #name {
+        text-decoration: underline;
+      }
+      #open-part #name,
+      #open-part small {
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        overflow-wrap: anywhere;
+      }
+
+      :host([image]:not([image=''])) #open-part {
+        transition: opacity 0.5s 0.5s;
+        opacity: 0;
+      }
+
+      #content {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        font-family: inherit;
+        font-size: var(--uui-type-small-size);
+        box-sizing: border-box;
+        text-align: left;
+        word-break: break-word;
+        padding-top: var(--uui-size-space-3);
+      }
+
+      #content::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        z-index: -1;
+        border-top: 1px solid var(--uui-color-divider);
+        border-radius: 0 0 var(--uui-border-radius-2) var(--uui-border-radius-2);
+        background-color: var(--uui-color-surface);
+        pointer-events: none;
+        opacity: 0.96;
+      }
+
+      :host(:focus) slot[name='actions'],
+      :host(:focus-within) slot[name='actions'],
+      :host(:hover) slot[name='actions'] {
+        opacity: 1;
+      }
+
+      :host(
+          [image]:not([image='']):hover,
+          [image]:not([image='']):focus,
+          [image]:not([image='']):focus-within,
+          [selected][image]:not([image='']),
+          [error][image]:not([image=''])
+        )
+        #open-part {
+        opacity: 1;
+        transition-duration: 120ms;
+        transition-delay: 0s;
+      }
+
+      :host([selectable]) #open-part {
+        inset: var(--uui-size-space-3) var(--uui-size-space-4);
+      }
+      :host(:not([selectable])) #content {
+        padding: var(--uui-size-space-3) var(--uui-size-space-4);
+      }
+      :host([selectable]) #content::before {
+        inset: calc(var(--uui-size-space-3) * -1)
+          calc(var(--uui-size-space-4) * -1);
+        top: 0;
+      }
+    `
+];
+let UUICardBlockTypeElement = _UUICardBlockTypeElement;
+__decorateClass([
+  property({ type: String })
+], UUICardBlockTypeElement.prototype, "name", 2);
+__decorateClass([
+  property({ type: String })
+], UUICardBlockTypeElement.prototype, "description", 2);
+__decorateClass([
+  property({ type: String, attribute: "background" })
+], UUICardBlockTypeElement.prototype, "background", 1);
+export {
+  UUICardBlockTypeElement
+};
+//# sourceMappingURL=card-block-type.element.js.map

package/dist/components/card-block-type/card-block-type.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-block-type.element.js","sources":["../../../src/components/card-block-type/card-block-type.element.ts"],"sourcesContent":["import { UUICardElement } from '../card/card.js';\nimport { css, html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nexport type BlockTypeIcon = {\n  name?: string;\n  color?: string;\n};\n\n/**\n * @element uui-card-block-type\n * @slot - slot for the default content area\n * @slot tag - slot for the tag with support for `<uui-tag>` elements\n * @slot actions - slot for the actions with support for the `<uui-action-bar>` element\n */\nexport class UUICardBlockTypeElement extends UUICardElement {\n  /**\n   * Block type name\n   * @type {string}\n   * @attr name\n   * @default ''\n   */\n  @property({ type: String })\n  name = '';\n\n  /**\n   * Block type description\n   * @type {string}\n   * @attr description\n   * @default undefined\n   */\n  @property({ type: String })\n  description?: string;\n\n  @property({ type: String, attribute: 'background' })\n  public get background(): string | undefined {\n    return undefined;\n  }\n  public set background(value: string | undefined) {\n    this.style.backgroundColor = value ?? '';\n  }\n\n  render() {\n    return html`\n      ${this.#renderMedia()}\n      ${this.href ? this.#renderLink() : this.#renderButton()}\n      <!-- Select border must be right after #open-part -->\n      <div id=\"select-border\"></div>\n      ${this.selectable ? this.renderCheckbox() : nothing}\n      <slot name=\"tag\"></slot>\n      <slot name=\"actions\"></slot>\n    `;\n  }\n\n  #renderButton() {\n    const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;\n    return html`\n      <button\n        id=\"open-part\"\n        class=\"uui-text\"\n        tabindex=${ifDefined(tabIndex)}\n        @click=${this.handleOpenClick}\n        @keydown=${this.handleOpenKeydown}>\n        ${this.#renderContent()}\n      </button>\n    `;\n  }\n\n  #renderLink() {\n    const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;\n    const rel = this.target === '_blank' ? 'noopener noreferrer' : undefined;\n    return html`\n      <a\n        id=\"open-part\"\n        class=\"uui-text\"\n        tabindex=${ifDefined(tabIndex)}\n        href=${ifDefined(!this.disabled ? this.href : undefined)}\n        target=${ifDefined(this.target || undefined)}\n        rel=${ifDefined(this.rel || rel)}>\n        ${this.#renderContent()}\n      </a>\n    `;\n  }\n\n  #renderMedia() {\n    return html`<div id=\"portrait\">\n      <slot></slot>\n    </div> `;\n  }\n\n  #renderContent() {\n    return html`\n      <div id=\"content\">\n        <span title=\"${this.name}\" id=\"name\">${this.name}</span>\n        <small title=\"${ifDefined(this.description)}\">${this.description}<slot name=\"description\"></slot></small>\n      </div></div>\n    `;\n  }\n\n  static override readonly styles = [\n    ...UUICardElement.styles,\n    css`\n      :host {\n        background-color: var(--uui-color-surface-alt);\n      }\n\n      slot[name='tag'] {\n        position: absolute;\n        bottom: var(--uui-size-4);\n        right: var(--uui-size-4);\n        display: flex;\n        justify-content: right;\n        z-index: 2;\n      }\n\n      slot[name='actions'] {\n        position: absolute;\n        top: var(--uui-size-4);\n        right: var(--uui-size-4);\n        display: flex;\n        justify-content: right;\n        z-index: 2;\n        opacity: 0;\n        transition: opacity 120ms;\n      }\n      :host(:focus) slot[name='actions'],\n      :host(:focus-within) slot[name='actions'],\n      :host(:hover) slot[name='actions'] {\n        opacity: 1;\n      }\n\n      #portrait {\n        display: flex;\n        justify-content: center;\n        min-height: 150px;\n        max-height: 150px;\n        width: 100%;\n        margin-bottom: var(--uui-size-layout-2);\n      }\n\n      slot:not([name])::slotted(*) {\n        align-self: center;\n        border-radius: var(--uui-border-radius-2);\n        object-fit: cover;\n        max-width: 100%;\n        max-height: 100%;\n        font-size: var(--uui-size-8);\n      }\n\n      #open-part {\n        position: absolute;\n        z-index: 1;\n        inset: 0;\n        margin-bottom: 0;\n        color: var(--uui-color-interactive);\n        border: none;\n        cursor: pointer;\n        display: flex;\n        flex-direction: column;\n        justify-content: flex-end;\n      }\n\n      :host([disabled]) #open-part {\n        pointer-events: none;\n        background: var(--uui-color-disabled);\n        color: var(--uui-color-contrast-disabled);\n      }\n\n      #open-part:hover {\n        color: var(--uui-color-interactive-emphasis);\n      }\n      #open-part:hover #name {\n        text-decoration: underline;\n      }\n      #open-part #name,\n      #open-part small {\n        display: -webkit-box;\n        -webkit-line-clamp: 1;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        overflow-wrap: anywhere;\n      }\n\n      :host([image]:not([image=''])) #open-part {\n        transition: opacity 0.5s 0.5s;\n        opacity: 0;\n      }\n\n      #content {\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        width: 100%;\n        font-family: inherit;\n        font-size: var(--uui-type-small-size);\n        box-sizing: border-box;\n        text-align: left;\n        word-break: break-word;\n        padding-top: var(--uui-size-space-3);\n      }\n\n      #content::before {\n        content: '';\n        position: absolute;\n        inset: 0;\n        z-index: -1;\n        border-top: 1px solid var(--uui-color-divider);\n        border-radius: 0 0 var(--uui-border-radius-2) var(--uui-border-radius-2);\n        background-color: var(--uui-color-surface);\n        pointer-events: none;\n        opacity: 0.96;\n      }\n\n      :host(:focus) slot[name='actions'],\n      :host(:focus-within) slot[name='actions'],\n      :host(:hover) slot[name='actions'] {\n        opacity: 1;\n      }\n\n      :host(\n          [image]:not([image='']):hover,\n          [image]:not([image='']):focus,\n          [image]:not([image='']):focus-within,\n          [selected][image]:not([image='']),\n          [error][image]:not([image=''])\n        )\n        #open-part {\n        opacity: 1;\n        transition-duration: 120ms;\n        transition-delay: 0s;\n      }\n\n      :host([selectable]) #open-part {\n        inset: var(--uui-size-space-3) var(--uui-size-space-4);\n      }\n      :host(:not([selectable])) #content {\n        padding: var(--uui-size-space-3) var(--uui-size-space-4);\n      }\n      :host([selectable]) #content::before {\n        inset: calc(var(--uui-size-space-3) * -1)\n          calc(var(--uui-size-space-4) * -1);\n        top: 0;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":"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"}

package/dist/components/card-block-type/card-block-type.js

@@ -0,0 +1,8 @@
+import { defineElement } from "../../internal/registration/index.js";
+import { UUICardBlockTypeElement } from "./card-block-type.element.js";
+defineElement("uui-card-block-type", UUICardBlockTypeElement);
+export {
+  UUICardBlockTypeElement,
+  UUICardBlockTypeElement as default
+};
+//# sourceMappingURL=card-block-type.js.map

package/dist/components/card-block-type/card-block-type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-block-type.js","sources":["../../../src/components/card-block-type/card-block-type.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUICardBlockTypeElement } from './card-block-type.element.js';\n\ndefineElement('uui-card-block-type', UUICardBlockTypeElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-card-block-type': UUICardBlockTypeElement;\n  }\n}\n\nexport * from './card-block-type.element.js';\nexport { UUICardBlockTypeElement as default } from './card-block-type.element.js';\n"],"names":[],"mappings":";;AAGA,cAAc,uBAAuB,uBAAuB;"}

package/dist/components/card-content-node/card-content-node.d.ts

@@ -0,0 +1,8 @@
+import { UUICardContentNodeElement } from './card-content-node.element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-card-content-node': UUICardContentNodeElement;
+    }
+}
+export * from './card-content-node.element.js';
+export { UUICardContentNodeElement as default } from './card-content-node.element.js';