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

package/dist/components/action-bar/action-bar.d.ts

@@ -0,0 +1,8 @@
+import { UUIActionBarElement } from './action-bar.element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-action-bar': UUIActionBarElement;
+    }
+}
+export * from './action-bar.element.js';
+export { UUIActionBarElement as default } from './action-bar.element.js';

package/dist/components/action-bar/action-bar.element.d.ts

@@ -0,0 +1,8 @@
+import { UUIButtonGroupElement } from '../button-group/button-group.js';
+/**
+ *  @element uui-action-bar
+ *  @description - Extends button group to hold buttons with icons that represent actions.
+ */
+export declare class UUIActionBarElement extends UUIButtonGroupElement {
+    static readonly styles: import("lit").CSSResult[];
+}

package/dist/components/action-bar/action-bar.element.js

@@ -0,0 +1,56 @@
+import "../button-group/button-group.js";
+import { css } from "lit";
+import { UUIButtonGroupElement } from "../button-group/button-group.element.js";
+const _UUIActionBarElement = class _UUIActionBarElement extends UUIButtonGroupElement {
+};
+_UUIActionBarElement.styles = [
+  ...UUIButtonGroupElement.styles,
+  css`
+      ::slotted(*) {
+        --uui-button-padding-left-factor: 0.5;
+        --uui-button-padding-right-factor: 0.5;
+      }
+
+      ::slotted(*:first-child) {
+        --uui-button-border-radius: 50px 0 0 50px;
+        --uui-button-padding-left-factor: 2;
+      }
+      ::slotted(*:last-child) {
+        --uui-button-border-radius: 0 50px 50px 0;
+        --uui-button-padding-right-factor: 2;
+      }
+      ::slotted(*:first-child:last-child) {
+        --uui-button-border-radius: 50px 50px 50px 50px;
+        --uui-button-padding-left-factor: 2;
+        --uui-button-padding-right-factor: 2;
+      }
+
+      ::slotted([look='outline']),
+      ::slotted([look='placeholder']) {
+        --uui-button-padding-left-factor: 1;
+        --uui-button-padding-right-factor: 1;
+      }
+
+      ::slotted(uui-button[look='outline']:first-child),
+      ::slotted(uui-button[look='placeholder']:first-child) {
+        --uui-button-border-radius: 50px 0 0 50px;
+        --uui-button-padding-left-factor: 1.5;
+      }
+      ::slotted(uui-button[look='outline']:last-child),
+      ::slotted(uui-button[look='placeholder']:last-child) {
+        --uui-button-border-radius: 0 50px 50px 0;
+        --uui-button-padding-right-factor: 1.5;
+      }
+      ::slotted(uui-button[look='outline']:first-child:last-child),
+      ::slotted(uui-button[look='placeholder']:first-child:last-child) {
+        --uui-button-border-radius: 50px 50px 50px 50px;
+        --uui-button-padding-left-factor: 1.5;
+        --uui-button-padding-right-factor: 1.5;
+      }
+    `
+];
+let UUIActionBarElement = _UUIActionBarElement;
+export {
+  UUIActionBarElement
+};
+//# sourceMappingURL=action-bar.element.js.map

package/dist/components/action-bar/action-bar.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-bar.element.js","sources":["../../../src/components/action-bar/action-bar.element.ts"],"sourcesContent":["import { UUIButtonGroupElement } from '../button-group/button-group.js';\nimport { css } from 'lit';\n\n/**\n *  @element uui-action-bar\n *  @description - Extends button group to hold buttons with icons that represent actions.\n */\nexport class UUIActionBarElement extends UUIButtonGroupElement {\n  static override readonly styles = [\n    ...UUIButtonGroupElement.styles,\n    css`\n      ::slotted(*) {\n        --uui-button-padding-left-factor: 0.5;\n        --uui-button-padding-right-factor: 0.5;\n      }\n\n      ::slotted(*:first-child) {\n        --uui-button-border-radius: 50px 0 0 50px;\n        --uui-button-padding-left-factor: 2;\n      }\n      ::slotted(*:last-child) {\n        --uui-button-border-radius: 0 50px 50px 0;\n        --uui-button-padding-right-factor: 2;\n      }\n      ::slotted(*:first-child:last-child) {\n        --uui-button-border-radius: 50px 50px 50px 50px;\n        --uui-button-padding-left-factor: 2;\n        --uui-button-padding-right-factor: 2;\n      }\n\n      ::slotted([look='outline']),\n      ::slotted([look='placeholder']) {\n        --uui-button-padding-left-factor: 1;\n        --uui-button-padding-right-factor: 1;\n      }\n\n      ::slotted(uui-button[look='outline']:first-child),\n      ::slotted(uui-button[look='placeholder']:first-child) {\n        --uui-button-border-radius: 50px 0 0 50px;\n        --uui-button-padding-left-factor: 1.5;\n      }\n      ::slotted(uui-button[look='outline']:last-child),\n      ::slotted(uui-button[look='placeholder']:last-child) {\n        --uui-button-border-radius: 0 50px 50px 0;\n        --uui-button-padding-right-factor: 1.5;\n      }\n      ::slotted(uui-button[look='outline']:first-child:last-child),\n      ::slotted(uui-button[look='placeholder']:first-child:last-child) {\n        --uui-button-border-radius: 50px 50px 50px 50px;\n        --uui-button-padding-left-factor: 1.5;\n        --uui-button-padding-right-factor: 1.5;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;AAOO,MAAM,uBAAN,MAAM,6BAA4B,sBAAsB;AA+C/D;AA9CE,qBAAyB,SAAS;AAAA,EAChC,GAAG,sBAAsB;AAAA,EACzB;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;AAHG,IAAM,sBAAN;"}

package/dist/components/action-bar/action-bar.js

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

package/dist/components/action-bar/action-bar.js.map

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

package/dist/components/avatar/avatar.d.ts

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

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

@@ -0,0 +1,49 @@
+import { LitElement } from 'lit';
+/**
+ *  Avatar for displaying users
+ *  @element uui-avatar
+ *  @slot - For anything other than initials (no more than 2-3 characters)
+ */
+export declare class UUIAvatarElement extends LitElement {
+    /**
+     * Set to true to prevent content from getting hidden if going outside the parent. Useful in combination with something like a Badge.
+     * @type {boolean}
+     * @attr overflow
+     * @default true
+     */
+    overflow: boolean;
+    /**
+     * Use this to apply a image src
+     * @type {string}
+     * @attr img-src
+     * @default ''
+     */
+    imgSrc: string;
+    /**
+     * Use this to apply a image srcset
+     * @type {string}
+     * @attr img-srcset
+     * @default ''
+     */
+    imgSrcset: string;
+    /**
+     * Provide the name used for labels and to generate the initials.
+     * @type {string}
+     * @attr
+     * @default ''
+     */
+    name: string;
+    /**
+     * Use this to override the initials generated from the name.
+     * @type {string}
+     * @attr
+     * @default undefined
+     */
+    initials?: string;
+    private get _initials();
+    connectedCallback(): void;
+    private createInitials;
+    private renderImage;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}

package/dist/components/avatar/avatar.element.js

@@ -0,0 +1,124 @@
+import { LitElement, html, css } from "lit";
+import { property } from "lit/decorators.js";
+import { when } from "lit/directives/when.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 _UUIAvatarElement = class _UUIAvatarElement extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.overflow = true;
+    this.imgSrc = "";
+    this.imgSrcset = "";
+    this.name = "";
+  }
+  get _initials() {
+    return this.initials?.substring(0, 3) || this.createInitials(this.name);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.name) {
+      console.warn(this.tagName + " needs a `name`", this);
+    }
+  }
+  createInitials(name) {
+    let initials = "";
+    if (!name) {
+      return initials;
+    }
+    const nameParts = name.split(/\s+/).filter((part) => part.length > 0 && !/^[^\p{L}\p{N}]/u.test(part));
+    if (nameParts.length === 0) {
+      const trimmedName = name.trim();
+      if (trimmedName.length > 0 && new RegExp("\\p{Extended_Pictographic}", "u").test(trimmedName)) {
+        const parts = trimmedName.split(/\s+/);
+        for (const part of parts) {
+          if (new RegExp("\\p{Extended_Pictographic}", "u").test(part)) {
+            return part;
+          }
+        }
+      }
+      return initials;
+    }
+    initials = nameParts[0].charAt(0);
+    if (nameParts.length > 1) {
+      initials += nameParts.at(-1).charAt(0);
+    }
+    return initials.toUpperCase();
+  }
+  renderImage() {
+    return html` <img
+      src="${this.imgSrc}"
+      srcset="${this.imgSrcset}"
+      alt="${this._initials}"
+      title="${this.name}" />`;
+  }
+  render() {
+    return html`
+      ${when(
+      this.imgSrc,
+      () => this.renderImage(),
+      () => this._initials
+    )}
+      <slot></slot>
+    `;
+  }
+};
+_UUIAvatarElement.styles = [
+  css`
+      :host {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        position: relative;
+        overflow: hidden;
+        border-radius: 50%;
+        font-weight: 700;
+        -webkit-font-smoothing: subpixel-antialiased;
+        width: calc(2em + 4px);
+        height: calc(2em + 4px);
+        user-select: none;
+        /* box-sizing: border-box; */
+        aspect-ratio: 1;
+        box-shadow: 0 0 0 1.5px var(--uui-color-border);
+      }
+
+      :host([overflow]) {
+        overflow: unset;
+      }
+
+      img {
+        object-fit: cover;
+        height: 100%;
+        width: 100%;
+        overflow: hidden;
+        border-radius: 50%;
+      }
+    `
+];
+let UUIAvatarElement = _UUIAvatarElement;
+__decorateClass([
+  property({ type: Boolean, attribute: true, reflect: true })
+], UUIAvatarElement.prototype, "overflow");
+__decorateClass([
+  property({ type: String, attribute: "img-src" })
+], UUIAvatarElement.prototype, "imgSrc");
+__decorateClass([
+  property({ type: String, attribute: "img-srcset" })
+], UUIAvatarElement.prototype, "imgSrcset");
+__decorateClass([
+  property({ type: String, reflect: true })
+], UUIAvatarElement.prototype, "name");
+__decorateClass([
+  property({ type: String })
+], UUIAvatarElement.prototype, "initials");
+export {
+  UUIAvatarElement
+};
+//# sourceMappingURL=avatar.element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.element.js","sources":["../../../src/components/avatar/avatar.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { when } from 'lit/directives/when.js';\n\n/**\n *  Avatar for displaying users\n *  @element uui-avatar\n *  @slot - For anything other than initials (no more than 2-3 characters)\n */\nexport class UUIAvatarElement extends LitElement {\n  /**\n   * Set to true to prevent content from getting hidden if going outside the parent. Useful in combination with something like a Badge.\n   * @type {boolean}\n   * @attr overflow\n   * @default true\n   */\n  @property({ type: Boolean, attribute: true, reflect: true })\n  public overflow = true;\n\n  /**\n   * Use this to apply a image src\n   * @type {string}\n   * @attr img-src\n   * @default ''\n   */\n  @property({ type: String, attribute: 'img-src' })\n  public imgSrc = '';\n\n  /**\n   * Use this to apply a image srcset\n   * @type {string}\n   * @attr img-srcset\n   * @default ''\n   */\n  @property({ type: String, attribute: 'img-srcset' })\n  public imgSrcset = '';\n\n  /**\n   * Provide the name used for labels and to generate the initials.\n   * @type {string}\n   * @attr\n   * @default ''\n   */\n  @property({ type: String, reflect: true })\n  name = '';\n\n  /**\n   * Use this to override the initials generated from the name.\n   * @type {string}\n   * @attr\n   * @default undefined\n   */\n  @property({ type: String })\n  initials?: string;\n\n  private get _initials() {\n    return this.initials?.substring(0, 3) || this.createInitials(this.name);\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (!this.name) {\n      console.warn(this.tagName + ' needs a `name`', this);\n    }\n  }\n\n  private createInitials(name: string) {\n    let initials = '';\n\n    if (!name) {\n      return initials;\n    }\n\n    // Split by whitespace and filter out parts that start with special characters or emojis\n    // This filters out parts beginning with punctuation (like parentheses, brackets, @ symbols)\n    // and emojis, while keeping parts that start with letters or numbers\n    const nameParts = name\n      .split(/\\s+/)\n      .filter(part => part.length > 0 && !/^[^\\p{L}\\p{N}]/u.test(part));\n\n    // If no valid letter/number parts, check if we have emojis or other pictographic content\n    if (nameParts.length === 0) {\n      const trimmedName = name.trim();\n      // Only render content if it contains emojis/pictographs, not just punctuation\n      // Limit to the first emoji to avoid overflow in small avatars\n      if (\n        trimmedName.length > 0 &&\n        /\\p{Extended_Pictographic}/u.test(trimmedName)\n      ) {\n        // Split by spaces and get the first part that contains an emoji\n        const parts = trimmedName.split(/\\s+/);\n        for (const part of parts) {\n          if (/\\p{Extended_Pictographic}/u.test(part)) {\n            return part;\n          }\n        }\n      }\n      return initials;\n    }\n\n    // Take first character of the first valid name part\n    initials = nameParts[0].charAt(0);\n\n    // If there's more than one valid name part, add the first character of the last valid name part\n    if (nameParts.length > 1) {\n      initials += nameParts.at(-1)!.charAt(0);\n    }\n\n    return initials.toUpperCase();\n  }\n\n  private renderImage() {\n    return html` <img\n      src=\"${this.imgSrc}\"\n      srcset=\"${this.imgSrcset}\"\n      alt=\"${this._initials}\"\n      title=\"${this.name}\" />`;\n  }\n\n  render() {\n    return html`\n      ${when(\n        this.imgSrc,\n        () => this.renderImage(),\n        () => this._initials,\n      )}\n      <slot></slot>\n    `;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n        position: relative;\n        overflow: hidden;\n        border-radius: 50%;\n        font-weight: 700;\n        -webkit-font-smoothing: subpixel-antialiased;\n        width: calc(2em + 4px);\n        height: calc(2em + 4px);\n        user-select: none;\n        /* box-sizing: border-box; */\n        aspect-ratio: 1;\n        box-shadow: 0 0 0 1.5px var(--uui-color-border);\n      }\n\n      :host([overflow]) {\n        overflow: unset;\n      }\n\n      img {\n        object-fit: cover;\n        height: 100%;\n        width: 100%;\n        overflow: hidden;\n        border-radius: 50%;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AASO,MAAM,oBAAN,MAAM,0BAAyB,WAAW;AAAA,EAA1C,cAAA;AAAA,UAAA,GAAA,SAAA;AAQL,SAAO,WAAW;AASlB,SAAO,SAAS;AAShB,SAAO,YAAY;AASnB,SAAA,OAAO;AAAA,EAAA;AAAA,EAWP,IAAY,YAAY;AACtB,WAAO,KAAK,UAAU,UAAU,GAAG,CAAC,KAAK,KAAK,eAAe,KAAK,IAAI;AAAA,EACxE;AAAA,EAEA,oBAAoB;AAClB,UAAM,kBAAA;AACN,QAAI,CAAC,KAAK,MAAM;AACd,cAAQ,KAAK,KAAK,UAAU,mBAAmB,IAAI;AAAA,IACrD;AAAA,EACF;AAAA,EAEQ,eAAe,MAAc;AACnC,QAAI,WAAW;AAEf,QAAI,CAAC,MAAM;AACT,aAAO;AAAA,IACT;AAKA,UAAM,YAAY,KACf,MAAM,KAAK,EACX,OAAO,CAAA,SAAQ,KAAK,SAAS,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;AAGlE,QAAI,UAAU,WAAW,GAAG;AAC1B,YAAM,cAAc,KAAK,KAAA;AAGzB,UACE,YAAY,SAAS,KACrB,WAAA,8BAAA,GAAA,EAA6B,KAAK,WAAW,GAC7C;AAEA,cAAM,QAAQ,YAAY,MAAM,KAAK;AACrC,mBAAW,QAAQ,OAAO;AACxB,cAAI,WAAA,8BAAA,GAAA,EAA6B,KAAK,IAAI,GAAG;AAC3C,mBAAO;AAAA,UACT;AAAA,QACF;AAAA,MACF;AACA,aAAO;AAAA,IACT;AAGA,eAAW,UAAU,CAAC,EAAE,OAAO,CAAC;AAGhC,QAAI,UAAU,SAAS,GAAG;AACxB,kBAAY,UAAU,GAAG,EAAE,EAAG,OAAO,CAAC;AAAA,IACxC;AAEA,WAAO,SAAS,YAAA;AAAA,EAClB;AAAA,EAEQ,cAAc;AACpB,WAAO;AAAA,aACE,KAAK,MAAM;AAAA,gBACR,KAAK,SAAS;AAAA,aACjB,KAAK,SAAS;AAAA,eACZ,KAAK,IAAI;AAAA,EACtB;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,QACH;AAAA,MACA,KAAK;AAAA,MACL,MAAM,KAAK,YAAA;AAAA,MACX,MAAM,KAAK;AAAA,IAAA,CACZ;AAAA;AAAA;AAAA,EAGL;AAmCF;AAjCE,kBAAyB,SAAS;AAAA,EAChC;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;AA1HG,IAAM,mBAAN;AAQE,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,WAAW,MAAM,SAAS,MAAM;AAAA,GAPhD,iBAQJ,WAAA,UAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,WAAW,WAAW;AAAA,GAhBrC,iBAiBJ,WAAA,QAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,WAAW,cAAc;AAAA,GAzBxC,iBA0BJ,WAAA,WAAA;AASP,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAlC9B,iBAmCX,WAAA,MAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA3Cf,iBA4CX,WAAA,UAAA;"}

package/dist/components/avatar/avatar.js

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

package/dist/components/avatar/avatar.js.map

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

package/dist/components/avatar-group/avatar-group.d.ts

@@ -0,0 +1,8 @@
+import { UUIAvatarGroupElement } from './avatar-group.element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-avatar-group': UUIAvatarGroupElement;
+    }
+}
+export * from './avatar-group.element.js';
+export { UUIAvatarGroupElement as default } from './avatar-group.element.js';

package/dist/components/avatar-group/avatar-group.element.d.ts

@@ -0,0 +1,26 @@
+import { LitElement } from 'lit';
+/**
+ * Group a set of avatars, set a limit to minimize the visual space.
+ * @element uui-avatar-group
+ * @slot - Insert the `<uui-avatar>` elements in the default slot
+ * @cssprop --uui-avatar-border-color - Border color of the avatars
+ */
+export declare class UUIAvatarGroupElement extends LitElement {
+    private readonly _avatarNodes?;
+    private _avatarArray;
+    /**
+     * This sets a limit of how many avatars can be shown. It will ad a +{number} after the avatars to show the number of hidden avatars.
+     * @type {number}
+     * @attr
+     * @default 0
+     */
+    limit: number;
+    firstUpdated(): void;
+    private _onSlotChange;
+    private _setAvatarArray;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    private _updateAvatarVisibility;
+    private _isLimitExceeded;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}

package/dist/components/avatar-group/avatar-group.element.js

@@ -0,0 +1,87 @@
+import { LitElement, html, css } from "lit";
+import { queryAssignedElements, state, property } from "lit/decorators.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 _UUIAvatarGroupElement = class _UUIAvatarGroupElement extends LitElement {
+  constructor() {
+    super(...arguments);
+    this._avatarArray = [];
+    this.limit = 0;
+  }
+  firstUpdated() {
+    this._setAvatarArray();
+  }
+  _onSlotChange() {
+    this._setAvatarArray();
+    this._updateAvatarVisibility();
+  }
+  _setAvatarArray() {
+    this._avatarArray = this._avatarNodes ?? [];
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("limit")) {
+      this._updateAvatarVisibility();
+    }
+  }
+  _updateAvatarVisibility() {
+    this._avatarArray.forEach((avatar, index) => {
+      avatar.style.display = index < this.limit || this.limit === 0 ? "" : "none";
+    });
+  }
+  _isLimitExceeded() {
+    return this.limit !== 0 && this._avatarArray.length > this.limit;
+  }
+  render() {
+    return html`
+      <slot @slotchange=${this._onSlotChange}></slot>
+      ${this._isLimitExceeded() ? (
+      //prettier-ignore
+      html`<small id="overflow-indication">+${this._avatarArray.length - this.limit}</small>`
+    ) : ""}
+    `;
+  }
+};
+_UUIAvatarGroupElement.styles = [
+  css`
+      :host {
+        display: inline-flex;
+        align-items: center;
+        padding-left: 3px;
+        padding-right: 3px;
+      }
+
+      ::slotted(uui-avatar) {
+        margin-left: -0.2em;
+        margin-right: -0.2em;
+        border: 0.1em solid var(--uui-avatar-border-color);
+      }
+
+      #overflow-indication {
+        margin-left: 6px;
+      }
+    `
+];
+let UUIAvatarGroupElement = _UUIAvatarGroupElement;
+__decorateClass([
+  queryAssignedElements({
+    selector: "uui-avatar, [uui-avatar]",
+    flatten: true
+  })
+], UUIAvatarGroupElement.prototype, "_avatarNodes");
+__decorateClass([
+  state()
+], UUIAvatarGroupElement.prototype, "_avatarArray");
+__decorateClass([
+  property({ type: Number, attribute: true })
+], UUIAvatarGroupElement.prototype, "limit");
+export {
+  UUIAvatarGroupElement
+};
+//# sourceMappingURL=avatar-group.element.js.map

package/dist/components/avatar-group/avatar-group.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group.element.js","sources":["../../../src/components/avatar-group/avatar-group.element.ts"],"sourcesContent":["import type { UUIAvatarElement } from '../avatar/avatar.js';\nimport { css, html, LitElement } from 'lit';\nimport { property, queryAssignedElements, state } from 'lit/decorators.js';\n\n/**\n * Group a set of avatars, set a limit to minimize the visual space.\n * @element uui-avatar-group\n * @slot - Insert the `<uui-avatar>` elements in the default slot\n * @cssprop --uui-avatar-border-color - Border color of the avatars\n */\nexport class UUIAvatarGroupElement extends LitElement {\n  @queryAssignedElements({\n    selector: 'uui-avatar, [uui-avatar]',\n    flatten: true,\n  })\n  private readonly _avatarNodes?: UUIAvatarElement[];\n\n  @state()\n  private _avatarArray: UUIAvatarElement[] = [];\n\n  /**\n   * This sets a limit of how many avatars can be shown. It will ad a +{number} after the avatars to show the number of hidden avatars.\n   * @type {number}\n   * @attr\n   * @default 0\n   */\n  @property({ type: Number, attribute: true })\n  limit = 0;\n\n  firstUpdated() {\n    this._setAvatarArray();\n  }\n\n  private _onSlotChange() {\n    this._setAvatarArray();\n    this._updateAvatarVisibility();\n  }\n\n  private _setAvatarArray() {\n    this._avatarArray = this._avatarNodes ?? [];\n  }\n\n  updated(changedProperties: Map<string | number | symbol, unknown>) {\n    if (changedProperties.has('limit')) {\n      this._updateAvatarVisibility();\n    }\n  }\n\n  private _updateAvatarVisibility() {\n    this._avatarArray.forEach((avatar: UUIAvatarElement, index: number) => {\n      avatar.style.display =\n        index < this.limit || this.limit === 0 ? '' : 'none';\n    });\n  }\n\n  private _isLimitExceeded() {\n    return this.limit !== 0 && this._avatarArray.length > this.limit;\n  }\n\n  render() {\n    return html`\n      <slot @slotchange=${this._onSlotChange}></slot>\n      ${this._isLimitExceeded()\n        ? //prettier-ignore\n          html`<small id=\"overflow-indication\">+${this._avatarArray.length - this.limit}</small>`\n        : ''}\n    `;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: inline-flex;\n        align-items: center;\n        padding-left: 3px;\n        padding-right: 3px;\n      }\n\n      ::slotted(uui-avatar) {\n        margin-left: -0.2em;\n        margin-right: -0.2em;\n        border: 0.1em solid var(--uui-avatar-border-color);\n      }\n\n      #overflow-indication {\n        margin-left: 6px;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAUO,MAAM,yBAAN,MAAM,+BAA8B,WAAW;AAAA,EAA/C,cAAA;AAAA,UAAA,GAAA,SAAA;AAQL,SAAQ,eAAmC,CAAA;AAS3C,SAAA,QAAQ;AAAA,EAAA;AAAA,EAER,eAAe;AACb,SAAK,gBAAA;AAAA,EACP;AAAA,EAEQ,gBAAgB;AACtB,SAAK,gBAAA;AACL,SAAK,wBAAA;AAAA,EACP;AAAA,EAEQ,kBAAkB;AACxB,SAAK,eAAe,KAAK,gBAAgB,CAAA;AAAA,EAC3C;AAAA,EAEA,QAAQ,mBAA2D;AACjE,QAAI,kBAAkB,IAAI,OAAO,GAAG;AAClC,WAAK,wBAAA;AAAA,IACP;AAAA,EACF;AAAA,EAEQ,0BAA0B;AAChC,SAAK,aAAa,QAAQ,CAAC,QAA0B,UAAkB;AACrE,aAAO,MAAM,UACX,QAAQ,KAAK,SAAS,KAAK,UAAU,IAAI,KAAK;AAAA,IAClD,CAAC;AAAA,EACH;AAAA,EAEQ,mBAAmB;AACzB,WAAO,KAAK,UAAU,KAAK,KAAK,aAAa,SAAS,KAAK;AAAA,EAC7D;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,0BACe,KAAK,aAAa;AAAA,QACpC,KAAK,iBAAA;AAAA;AAAA,MAEH,wCAAwC,KAAK,aAAa,SAAS,KAAK,KAAK;AAAA,QAC7E,EAAE;AAAA;AAAA,EAEV;AAsBF;AApBE,uBAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA5DG,IAAM,wBAAN;AAKY,gBAAA;AAAA,EAJhB,sBAAsB;AAAA,IACrB,UAAU;AAAA,IACV,SAAS;AAAA,EAAA,CACV;AAAA,GAJU,sBAKM,WAAA,cAAA;AAGT,gBAAA;AAAA,EADP,MAAA;AAAM,GAPI,sBAQH,WAAA,cAAA;AASR,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,MAAM;AAAA,GAhBhC,sBAiBX,WAAA,OAAA;"}

package/dist/components/avatar-group/avatar-group.js

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

package/dist/components/avatar-group/avatar-group.js.map

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

package/dist/components/badge/badge.d.ts

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

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

@@ -0,0 +1,32 @@
+import { LitElement } from 'lit';
+import type { UUIInterfaceColor, UUIInterfaceLook } from '../../internal/types/index.js';
+/**
+ *  A badge to notify that there is something that requires attention of the user. The badge is positioned with `position: absolute`. It will determine its position against the first ancestor with `position: relative`.
+ *  @element uui-badge
+ *  @slot - The slot for badge contents
+ */
+export declare class UUIBadgeElement extends LitElement {
+    /**
+     * Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green "confirm" button.
+     * @type {"default" | "positive" | "warning" | "danger"}
+     * @attr
+     * @default "default"
+     */
+    color: UUIInterfaceColor;
+    /**
+     * Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green "confirm" button.
+     * @type {"default" | "primary" | "secondary" | "outline" | "placeholder"}
+     * @attr
+     * @default "default"
+     */
+    look: UUIInterfaceLook;
+    /**
+     * Bring attention to this badge by applying a bounce animation.
+     * @type boolean
+     * @attr
+     * @default false
+     */
+    attention: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}