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

package/dist/components/box/box.element.js

@@ -0,0 +1,130 @@
+import { LitElement, css } from "lit";
+import { property, state } from "lit/decorators.js";
+import { unsafeStatic, html } from "lit/static-html.js";
+import { UUITextStyles } from "../../styles/uui-text.styles.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;
+};
+function slotHasContent(target) {
+  return target ? target.assignedNodes({ flatten: true }).length > 0 : false;
+}
+const _UUIBoxElement = class _UUIBoxElement extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.headline = null;
+    this._headlineVariantTag = "h5";
+    this._headlineSlotHasContent = false;
+    this._headlineSlotChanged = (e) => {
+      this._headlineSlotHasContent = slotHasContent(e.target);
+    };
+    this._headerSlotHasContent = false;
+    this._headerSlotChanged = (e) => {
+      this._headerSlotHasContent = slotHasContent(e.target);
+    };
+    this._headerActionsSlotHasContent = false;
+    this._headerActionsSlotChanged = (e) => {
+      this._headerActionsSlotHasContent = slotHasContent(e.target);
+    };
+  }
+  set headlineVariant(value) {
+    this._headlineVariantTag = value;
+  }
+  get headlineVariant() {
+    return this._headlineVariantTag;
+  }
+  /**
+   * Renders a header with the `header`-slot, `header-actions`-slot, headline and `headline`-slot within
+   * @returns {TemplateResult}
+   * @protected
+   * @method
+   */
+  renderHeader() {
+    return html`<div
+      id="header"
+      class="uui-text"
+      style=${this._headerSlotHasContent || this._headlineSlotHasContent || this._headerActionsSlotHasContent || this.headline !== null ? "" : "display: none"}>
+      <${unsafeStatic(this._headlineVariantTag)}
+        id="headline"
+        class="uui-h5"
+        style=${this._headlineSlotHasContent || this.headline !== null ? "" : "display: none"}>
+        ${this.headline}
+        <slot name="headline" @slotchange=${this._headlineSlotChanged}></slot>
+      </${unsafeStatic(this._headlineVariantTag)}>
+      <slot name="header" @slotchange=${this._headerSlotChanged}></slot>
+      <slot name="header-actions" @slotchange=${this._headerActionsSlotChanged}></slot>
+    </div>`;
+  }
+  render() {
+    return html`
+      ${this.renderHeader()}
+      <slot></slot>
+    `;
+  }
+};
+_UUIBoxElement.styles = [
+  UUITextStyles,
+  css`
+      :host {
+        display: block;
+        border-width: var(--uui-box-border-width, 1px);
+        border-style: solid;
+        border-color: var(
+          --uui-box-border-color,
+          var(--uui-color-divider-standalone)
+        );
+        border-radius: var(--uui-box-border-radius, var(--uui-border-radius-3));
+        background-color: var(--uui-color-surface);
+      }
+
+      #header {
+        display: flex;
+        align-items: center;
+        column-gap: var(--uui-size-space-5);
+        border-bottom: 1px solid var(--uui-color-divider-standalone);
+        padding: var(
+          --uui-box-header-padding,
+          var(--uui-size-space-4) var(--uui-size-space-5)
+        );
+      }
+
+      slot:not([name]) {
+        display: block;
+        padding: var(--uui-box-default-padding, var(--uui-size-space-5));
+      }
+
+      slot[name='header-actions'] {
+        display: block;
+        margin-left: auto;
+      }
+    `
+];
+let UUIBoxElement = _UUIBoxElement;
+__decorateClass([
+  property({ type: String })
+], UUIBoxElement.prototype, "headline", 2);
+__decorateClass([
+  property({ attribute: "headline-variant" })
+], UUIBoxElement.prototype, "headlineVariant", 1);
+__decorateClass([
+  state()
+], UUIBoxElement.prototype, "_headlineVariantTag", 2);
+__decorateClass([
+  state()
+], UUIBoxElement.prototype, "_headlineSlotHasContent", 2);
+__decorateClass([
+  state()
+], UUIBoxElement.prototype, "_headerSlotHasContent", 2);
+__decorateClass([
+  state()
+], UUIBoxElement.prototype, "_headerActionsSlotHasContent", 2);
+export {
+  UUIBoxElement
+};
+//# sourceMappingURL=box.element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"box.element.js","sources":["../../../src/components/box/box.element.ts"],"sourcesContent":["import { LitElement, css } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { UUITextStyles } from '../../styles/index.js';\nimport type { UUIInterfaceHeading } from '../../internal/index.js';\nimport { html, unsafeStatic } from 'lit/static-html.js';\n\nfunction slotHasContent(target: EventTarget | null): boolean {\n  return target\n    ? (target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0\n    : false;\n}\n\n/**\n *  A layout box for grouping elements, as well its possible to append a header, with a headline or other elements to the box.\n *  @element uui-box\n *  @slot headline - headline area, this area is placed within the headline tag which is located inside the header. Use this to ensure the right headline styling.\n *  @slot header - header area, use this for things that are not the headline but are located in the header.\n *  @slot header-actions - right-side of the box header, use this to append some actions that are general for the topic of this box.\n *  @slot - area for the content of the box\n *  @cssprop --uui-box-header-padding - overwrite the header padding\n *  @cssprop --uui-box-default-padding - overwrite the box padding\n *  @cssprop --uui-box-border-radius - overwrite the box border-radius, default is var(--uui-border-radius-3)\n *  @cssprop --uui-box-border-color - overwrites the box border colorm default is var(--uui-color-divider-standalone)\n */\nexport class UUIBoxElement extends LitElement {\n  /**\n   * Headline for this box, can also be set via the `headline` slot.\n   * @type string\n   * @attr\n   * @default null\n   */\n  @property({ type: String })\n  headline: string | null = null;\n\n  /**\n   * Changes the headline variant for accessibility for this box.\n   * Notice this does not change the visual representation of the headline. (Umbraco recommends displaying a h5 size headline in the UUI-BOX)\n   * @type {\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"}\n   * @attr\n   * @default \"h5\"\n   */\n  @property({ attribute: 'headline-variant' })\n  set headlineVariant(value: UUIInterfaceHeading) {\n    this._headlineVariantTag = value;\n  }\n  get headlineVariant() {\n    return this._headlineVariantTag;\n  }\n\n  @state()\n  private _headlineVariantTag: UUIInterfaceHeading = 'h5';\n\n  @state()\n  private _headlineSlotHasContent = false;\n  private readonly _headlineSlotChanged = (e: Event) => {\n    this._headlineSlotHasContent = slotHasContent(e.target);\n  };\n\n  @state()\n  private _headerSlotHasContent = false;\n  private readonly _headerSlotChanged = (e: Event) => {\n    this._headerSlotHasContent = slotHasContent(e.target);\n  };\n\n  @state()\n  private _headerActionsSlotHasContent = false;\n  private readonly _headerActionsSlotChanged = (e: Event) => {\n    this._headerActionsSlotHasContent = slotHasContent(e.target);\n  };\n\n  /**\n   * Renders a header with the `header`-slot, `header-actions`-slot, headline and `headline`-slot within\n   * @returns {TemplateResult}\n   * @protected\n   * @method\n   */\n  protected renderHeader() {\n    /* eslint-disable lit/no-invalid-html, lit/binding-positions */\n    return html`<div\n      id=\"header\"\n      class=\"uui-text\"\n      style=${\n        this._headerSlotHasContent ||\n        this._headlineSlotHasContent ||\n        this._headerActionsSlotHasContent ||\n        this.headline !== null\n          ? ''\n          : 'display: none'\n      }>\n      <${unsafeStatic(this._headlineVariantTag)}\n        id=\"headline\"\n        class=\"uui-h5\"\n        style=${\n          this._headlineSlotHasContent || this.headline !== null\n            ? ''\n            : 'display: none'\n        }>\n        ${this.headline}\n        <slot name=\"headline\" @slotchange=${this._headlineSlotChanged}></slot>\n      </${unsafeStatic(this._headlineVariantTag)}>\n      <slot name=\"header\" @slotchange=${this._headerSlotChanged}></slot>\n      <slot name=\"header-actions\" @slotchange=${\n        this._headerActionsSlotChanged\n      }></slot>\n    </div>`;\n    /* eslint-enable lit/no-invalid-html, lit/binding-positions */\n  }\n\n  render() {\n    return html`\n      ${this.renderHeader()}\n      <slot></slot>\n    `;\n  }\n\n  static override readonly styles = [\n    UUITextStyles,\n    css`\n      :host {\n        display: block;\n        border-width: var(--uui-box-border-width, 1px);\n        border-style: solid;\n        border-color: var(\n          --uui-box-border-color,\n          var(--uui-color-divider-standalone)\n        );\n        border-radius: var(--uui-box-border-radius, var(--uui-border-radius-3));\n        background-color: var(--uui-color-surface);\n      }\n\n      #header {\n        display: flex;\n        align-items: center;\n        column-gap: var(--uui-size-space-5);\n        border-bottom: 1px solid var(--uui-color-divider-standalone);\n        padding: var(\n          --uui-box-header-padding,\n          var(--uui-size-space-4) var(--uui-size-space-5)\n        );\n      }\n\n      slot:not([name]) {\n        display: block;\n        padding: var(--uui-box-default-padding, var(--uui-size-space-5));\n      }\n\n      slot[name='header-actions'] {\n        display: block;\n        margin-left: auto;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAMA,SAAS,eAAe,QAAqC;AAC3D,SAAO,SACF,OAA2B,cAAc,EAAE,SAAS,MAAM,EAAE,SAAS,IACtE;AACN;AAcO,MAAM,iBAAN,MAAM,uBAAsB,WAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA;AAQL,SAAA,WAA0B;AAkB1B,SAAQ,sBAA2C;AAGnD,SAAQ,0BAA0B;AAClC,SAAiB,uBAAuB,CAAC,MAAa;AACpD,WAAK,0BAA0B,eAAe,EAAE,MAAM;AAAA,IACxD;AAGA,SAAQ,wBAAwB;AAChC,SAAiB,qBAAqB,CAAC,MAAa;AAClD,WAAK,wBAAwB,eAAe,EAAE,MAAM;AAAA,IACtD;AAGA,SAAQ,+BAA+B;AACvC,SAAiB,4BAA4B,CAAC,MAAa;AACzD,WAAK,+BAA+B,eAAe,EAAE,MAAM;AAAA,IAC7D;AAAA,EAAA;AAAA,EA1BA,IAAI,gBAAgB,OAA4B;AAC9C,SAAK,sBAAsB;AAAA,EAC7B;AAAA,EACA,IAAI,kBAAkB;AACpB,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA6BU,eAAe;AAEvB,WAAO;AAAA;AAAA;AAAA,cAIH,KAAK,yBACL,KAAK,2BACL,KAAK,gCACL,KAAK,aAAa,OACd,KACA,eACN;AAAA,SACG,aAAa,KAAK,mBAAmB,CAAC;AAAA;AAAA;AAAA,gBAIrC,KAAK,2BAA2B,KAAK,aAAa,OAC9C,KACA,eACN;AAAA,UACE,KAAK,QAAQ;AAAA,4CACqB,KAAK,oBAAoB;AAAA,UAC3D,aAAa,KAAK,mBAAmB,CAAC;AAAA,wCACR,KAAK,kBAAkB;AAAA,gDAEvD,KAAK,yBACP;AAAA;AAAA,EAGJ;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,QACH,KAAK,cAAc;AAAA;AAAA;AAAA,EAGzB;AAuCF;AArCE,eAAyB,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;AA7FG,IAAM,gBAAN;AAQL,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAPf,cAQX,WAAA,YAAA,CAAA;AAUI,gBAAA;AAAA,EADH,SAAS,EAAE,WAAW,mBAAA,CAAoB;AAAA,GAjBhC,cAkBP,WAAA,mBAAA,CAAA;AAQI,gBAAA;AAAA,EADP,MAAA;AAAM,GAzBI,cA0BH,WAAA,uBAAA,CAAA;AAGA,gBAAA;AAAA,EADP,MAAA;AAAM,GA5BI,cA6BH,WAAA,2BAAA,CAAA;AAMA,gBAAA;AAAA,EADP,MAAA;AAAM,GAlCI,cAmCH,WAAA,yBAAA,CAAA;AAMA,gBAAA;AAAA,EADP,MAAA;AAAM,GAxCI,cAyCH,WAAA,gCAAA,CAAA;"}

package/dist/components/box/box.js

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

package/dist/components/box/box.js.map

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

package/dist/components/breadcrumbs/breadcrumb-item.element.d.ts

@@ -0,0 +1,27 @@
+import { LitElement } from 'lit';
+/**
+ * A breadcrumb-item to be used with the breadcrumbs component.
+ *  @element uui-breadcrumb-item
+ *  @slot - This slot displays elements inside the breadcrumb
+ *  @csspart separator - change the content of the after element of this part to change the separator
+ */
+export declare class UUIBreadcrumbItemElement extends LitElement {
+    connectedCallback(): void;
+    /**
+     * Specifies the link href.
+     * @type {String}
+     * @default undefined
+     */
+    href?: string;
+    /**
+     * Specifies if the element is the last item in the uui-breadcrumbs. Last item will not render as a link
+     * @type {Boolean}
+     * @attr last-item
+     * @default 'false'
+     */
+    lastItem: boolean;
+    renderLinkAndSeparator(): import("lit-html").TemplateResult<1>;
+    renderCurrent(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}

package/dist/components/breadcrumbs/breadcrumb-item.element.js

@@ -0,0 +1,83 @@
+import { LitElement, html, css } from "lit";
+import { 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 _UUIBreadcrumbItemElement = class _UUIBreadcrumbItemElement extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.lastItem = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  renderLinkAndSeparator() {
+    const item = this.href ? html`<a id="link" href=${this.href}><slot></slot></a>` : html`<span id="link"><slot></slot></span>`;
+    return html`${item}<span part="separator"></span>`;
+  }
+  renderCurrent() {
+    return html`<span id="last-item"><slot></slot></span>`;
+  }
+  render() {
+    return html`${this.lastItem ? this.renderCurrent() : this.renderLinkAndSeparator()}`;
+  }
+};
+_UUIBreadcrumbItemElement.styles = [
+  css`
+      :host {
+        font-size: var(--uui-type-small-size);
+        color: currentColor;
+      }
+
+      a,
+      a:visited {
+        color: currentColor;
+      }
+      a:hover {
+        color: var(--uui-color-interactive-emphasis);
+      }
+      a:focus {
+        color: var(--uui-color-focus);
+      }
+
+      a:focus-visible {
+        border-radius: var(--uui-border-radius);
+        outline: 2px solid var(--uui-color-focus);
+      }
+
+      [part='separator']::after {
+        content: '/';
+        speak: never;
+        position: relative;
+        top: 1px;
+        margin: -3px 1px 0;
+        color: var(--uui-color-border);
+      }
+
+      #link,
+      #last-item {
+        padding: 0 4px;
+        max-width: 150px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    `
+];
+let UUIBreadcrumbItemElement = _UUIBreadcrumbItemElement;
+__decorateClass([
+  property()
+], UUIBreadcrumbItemElement.prototype, "href");
+__decorateClass([
+  property({ type: Boolean, attribute: "last-item" })
+], UUIBreadcrumbItemElement.prototype, "lastItem");
+export {
+  UUIBreadcrumbItemElement
+};
+//# sourceMappingURL=breadcrumb-item.element.js.map

package/dist/components/breadcrumbs/breadcrumb-item.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb-item.element.js","sources":["../../../src/components/breadcrumbs/breadcrumb-item.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\n/**\n * A breadcrumb-item to be used with the breadcrumbs component.\n *  @element uui-breadcrumb-item\n *  @slot - This slot displays elements inside the breadcrumb\n *  @csspart separator - change the content of the after element of this part to change the separator\n */\nexport class UUIBreadcrumbItemElement extends LitElement {\n  connectedCallback() {\n    super.connectedCallback();\n  }\n\n  /**\n   * Specifies the link href.\n   * @type {String}\n   * @default undefined\n   */\n  @property()\n  href?: string;\n\n  /**\n   * Specifies if the element is the last item in the uui-breadcrumbs. Last item will not render as a link\n   * @type {Boolean}\n   * @attr last-item\n   * @default 'false'\n   */\n  @property({ type: Boolean, attribute: 'last-item' })\n  lastItem = false;\n\n  renderLinkAndSeparator() {\n    const item = this.href\n      ? html`<a id=\"link\" href=${this.href}><slot></slot></a>`\n      : html`<span id=\"link\"><slot></slot></span>`;\n\n    return html`${item}<span part=\"separator\"></span>`;\n  }\n\n  renderCurrent() {\n    return html`<span id=\"last-item\"><slot></slot></span>`;\n  }\n\n  render() {\n    return html`${this.lastItem\n      ? this.renderCurrent()\n      : this.renderLinkAndSeparator()}`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        font-size: var(--uui-type-small-size);\n        color: currentColor;\n      }\n\n      a,\n      a:visited {\n        color: currentColor;\n      }\n      a:hover {\n        color: var(--uui-color-interactive-emphasis);\n      }\n      a:focus {\n        color: var(--uui-color-focus);\n      }\n\n      a:focus-visible {\n        border-radius: var(--uui-border-radius);\n        outline: 2px solid var(--uui-color-focus);\n      }\n\n      [part='separator']::after {\n        content: '/';\n        speak: never;\n        position: relative;\n        top: 1px;\n        margin: -3px 1px 0;\n        color: var(--uui-color-border);\n      }\n\n      #link,\n      #last-item {\n        padding: 0 4px;\n        max-width: 150px;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;AASO,MAAM,4BAAN,MAAM,kCAAiC,WAAW;AAAA,EAAlD,cAAA;AAAA,UAAA,GAAA,SAAA;AAoBL,SAAA,WAAW;AAAA,EAAA;AAAA,EAnBX,oBAAoB;AAClB,UAAM,kBAAA;AAAA,EACR;AAAA,EAmBA,yBAAyB;AACvB,UAAM,OAAO,KAAK,OACd,yBAAyB,KAAK,IAAI,uBAClC;AAEJ,WAAO,OAAO,IAAI;AAAA,EACpB;AAAA,EAEA,gBAAgB;AACd,WAAO;AAAA,EACT;AAAA,EAEA,SAAS;AACP,WAAO,OAAO,KAAK,WACf,KAAK,kBACL,KAAK,wBAAwB;AAAA,EACnC;AA4CF;AA1CE,0BAAyB,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAzCG,IAAM,2BAAN;AAWL,gBAAA;AAAA,EADC,SAAA;AAAS,GAVC,yBAWX,WAAA,MAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,aAAa;AAAA,GAnBxC,yBAoBX,WAAA,UAAA;"}

package/dist/components/breadcrumbs/breadcrumbs.d.ts

@@ -0,0 +1,11 @@
+import { UUIBreadcrumbItemElement } from './breadcrumb-item.element.js';
+import { UUIBreadcrumbsElement } from './breadcrumbs.element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-breadcrumb-item': UUIBreadcrumbItemElement;
+        'uui-breadcrumbs': UUIBreadcrumbsElement;
+    }
+}
+export * from './breadcrumb-item.element.js';
+export * from './breadcrumbs.element.js';
+export { UUIBreadcrumbsElement as default } from './breadcrumbs.element.js';

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

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+import '../responsive-container/responsive-container.js';
+/**
+ * A breadcrumbs component to be used in combination with the uui-breadcrumb-item.
+ *  @element uui-breadcrumbs
+ *  @slot - Slot to display nested breadcrumb items. It supports `<uui-breadcrumb-item>` elements or elements containing the `role="listitem"` attribute
+ */
+export declare class UUIBreadcrumbsElement extends LitElement {
+    private readonly slotNodes;
+    private elementIsBreadcrumbItem;
+    connectedCallback(): void;
+    handleSlotChange(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}

package/dist/components/breadcrumbs/breadcrumbs.element.js

@@ -0,0 +1,87 @@
+import { LitElement, html, css } from "lit";
+import { queryAssignedElements } from "lit/decorators.js";
+import { UUIBreadcrumbItemElement } from "./breadcrumb-item.element.js";
+import "../responsive-container/responsive-container.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 _UUIBreadcrumbsElement = class _UUIBreadcrumbsElement extends LitElement {
+  elementIsBreadcrumbItem(el) {
+    return el instanceof UUIBreadcrumbItemElement;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("aria-label", "breadcrumb");
+    this.setAttribute("role", "navigation");
+  }
+  handleSlotChange() {
+    if (this.slotNodes.length > 0) {
+      const lastItem = this.slotNodes.at(-1);
+      lastItem.setAttribute("aria-current", "page");
+      if (this.elementIsBreadcrumbItem(lastItem)) {
+        lastItem.lastItem = true;
+      }
+    }
+  }
+  render() {
+    return html`<uui-responsive-container
+      id="breadcrumbs-list"
+      collapse="start">
+      <span slot="trigger-content">
+        <span class="ellipsis">…</span> <span class="separator">/</span>
+      </span>
+      <slot @slotchange=${this.handleSlotChange}></slot>
+    </uui-responsive-container>`;
+  }
+};
+_UUIBreadcrumbsElement.styles = [
+  css`
+      :host {
+        display: flex;
+      }
+
+      #breadcrumbs-list {
+        display: flex;
+        list-style-type: decimal;
+        margin-block-start: 0em;
+        margin-block-end: 0em;
+        margin-inline-start: 0px;
+        margin-inline-end: 0px;
+        padding-inline-start: 0px;
+      }
+      uui-responsive-container {
+        --uui-responsive-container-gap: 0;
+      }
+
+      /* Style the trigger content to match breadcrumb items */
+      [slot='trigger-content'] {
+        font-size: var(--uui-type-small-size);
+      }
+
+      [slot='trigger-content'] .ellipsis {
+        color: currentColor; /* Black/default text color */
+      }
+
+      [slot='trigger-content'] .separator {
+        color: var(--uui-color-border); /* Matches breadcrumb separator */
+        margin-left: var(--uui-size-2);
+      }
+    `
+];
+let UUIBreadcrumbsElement = _UUIBreadcrumbsElement;
+__decorateClass([
+  queryAssignedElements({
+    flatten: true,
+    selector: "uui-breadcrumb-item, [uui-breadcrumb-item], [role=listitem]"
+  })
+], UUIBreadcrumbsElement.prototype, "slotNodes");
+export {
+  UUIBreadcrumbsElement
+};
+//# sourceMappingURL=breadcrumbs.element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.element.js","sources":["../../../src/components/breadcrumbs/breadcrumbs.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { queryAssignedElements } from 'lit/decorators.js';\n\nimport { UUIBreadcrumbItemElement } from './breadcrumb-item.element.js';\nimport '../responsive-container/responsive-container.js';\n\n/**\n * A breadcrumbs component to be used in combination with the uui-breadcrumb-item.\n *  @element uui-breadcrumbs\n *  @slot - Slot to display nested breadcrumb items. It supports `<uui-breadcrumb-item>` elements or elements containing the `role=\"listitem\"` attribute\n */\nexport class UUIBreadcrumbsElement extends LitElement {\n  @queryAssignedElements({\n    flatten: true,\n    selector: 'uui-breadcrumb-item, [uui-breadcrumb-item], [role=listitem]',\n  })\n  private readonly slotNodes!: HTMLElement[];\n\n  private elementIsBreadcrumbItem(el: unknown): el is UUIBreadcrumbItemElement {\n    return el instanceof UUIBreadcrumbItemElement;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('aria-label', 'breadcrumb');\n    this.setAttribute('role', 'navigation');\n  }\n\n  handleSlotChange() {\n    if (this.slotNodes.length > 0) {\n      const lastItem = this.slotNodes.at(-1)!;\n      lastItem.setAttribute('aria-current', 'page');\n\n      if (this.elementIsBreadcrumbItem(lastItem)) {\n        lastItem.lastItem = true;\n      }\n    }\n  }\n\n  render() {\n    return html`<uui-responsive-container\n      id=\"breadcrumbs-list\"\n      collapse=\"start\">\n      <span slot=\"trigger-content\">\n        <span class=\"ellipsis\">…</span> <span class=\"separator\">/</span>\n      </span>\n      <slot @slotchange=${this.handleSlotChange}></slot>\n    </uui-responsive-container>`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: flex;\n      }\n\n      #breadcrumbs-list {\n        display: flex;\n        list-style-type: decimal;\n        margin-block-start: 0em;\n        margin-block-end: 0em;\n        margin-inline-start: 0px;\n        margin-inline-end: 0px;\n        padding-inline-start: 0px;\n      }\n      uui-responsive-container {\n        --uui-responsive-container-gap: 0;\n      }\n\n      /* Style the trigger content to match breadcrumb items */\n      [slot='trigger-content'] {\n        font-size: var(--uui-type-small-size);\n      }\n\n      [slot='trigger-content'] .ellipsis {\n        color: currentColor; /* Black/default text color */\n      }\n\n      [slot='trigger-content'] .separator {\n        color: var(--uui-color-border); /* Matches breadcrumb separator */\n        margin-left: var(--uui-size-2);\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAWO,MAAM,yBAAN,MAAM,+BAA8B,WAAW;AAAA,EAO5C,wBAAwB,IAA6C;AAC3E,WAAO,cAAc;AAAA,EACvB;AAAA,EAEA,oBAAoB;AAClB,UAAM,kBAAA;AACN,SAAK,aAAa,cAAc,YAAY;AAC5C,SAAK,aAAa,QAAQ,YAAY;AAAA,EACxC;AAAA,EAEA,mBAAmB;AACjB,QAAI,KAAK,UAAU,SAAS,GAAG;AAC7B,YAAM,WAAW,KAAK,UAAU,GAAG,EAAE;AACrC,eAAS,aAAa,gBAAgB,MAAM;AAE5C,UAAI,KAAK,wBAAwB,QAAQ,GAAG;AAC1C,iBAAS,WAAW;AAAA,MACtB;AAAA,IACF;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAMe,KAAK,gBAAgB;AAAA;AAAA,EAE7C;AAoCF;AAlCE,uBAAyB,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;AAAA;AAxCG,IAAM,wBAAN;AAKY,gBAAA;AAAA,EAJhB,sBAAsB;AAAA,IACrB,SAAS;AAAA,IACT,UAAU;AAAA,EAAA,CACX;AAAA,GAJU,sBAKM,WAAA,WAAA;"}

package/dist/components/breadcrumbs/breadcrumbs.js

@@ -0,0 +1,11 @@
+import { defineElement } from "../../internal/registration/index.js";
+import { UUIBreadcrumbItemElement } from "./breadcrumb-item.element.js";
+import { UUIBreadcrumbsElement } from "./breadcrumbs.element.js";
+defineElement("uui-breadcrumb-item", UUIBreadcrumbItemElement);
+defineElement("uui-breadcrumbs", UUIBreadcrumbsElement);
+export {
+  UUIBreadcrumbItemElement,
+  UUIBreadcrumbsElement,
+  UUIBreadcrumbsElement as default
+};
+//# sourceMappingURL=breadcrumbs.js.map

package/dist/components/breadcrumbs/breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.js","sources":["../../../src/components/breadcrumbs/breadcrumbs.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUIBreadcrumbItemElement } from './breadcrumb-item.element.js';\nimport { UUIBreadcrumbsElement } from './breadcrumbs.element.js';\n\ndefineElement('uui-breadcrumb-item', UUIBreadcrumbItemElement);\ndefineElement('uui-breadcrumbs', UUIBreadcrumbsElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-breadcrumb-item': UUIBreadcrumbItemElement;\n    'uui-breadcrumbs': UUIBreadcrumbsElement;\n  }\n}\n\nexport * from './breadcrumb-item.element.js';\nexport * from './breadcrumbs.element.js';\nexport { UUIBreadcrumbsElement as default } from './breadcrumbs.element.js';\n"],"names":[],"mappings":";;;AAIA,cAAc,uBAAuB,wBAAwB;AAC7D,cAAc,mBAAmB,qBAAqB;"}

package/dist/components/button/button.d.ts

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

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

@@ -0,0 +1,120 @@
+import type { UUIInterfaceColor, UUIInterfaceLook } from '../../internal/types/index.js';
+import type { TemplateResult } from 'lit';
+import { LitElement, nothing } from 'lit';
+import '../icon/icon.js';
+import '../loader-circle/loader-circle.js';
+export type UUIButtonState = undefined | 'waiting' | 'success' | 'failed';
+export type UUIButtonType = 'submit' | 'button' | 'reset';
+declare const UUIButtonElement_base: (new (...args: any[]) => import("../../index.js").UUIFormControlWithBasicsMixinElement<FormDataEntryValue | FormData | undefined>) & (new (...args: any[]) => import("../../index.js").UUILabelMixinInterface) & (new (...args: any[]) => import("../../index.js").UUIPopoverTargetMixinInterface) & typeof LitElement;
+/**
+ *  @element uui-button
+ *  @fires {UUIButtonEvent} click - fires when the element is clicked
+ *  @slot - for default content
+ *  @slot label - for label content
+ *  @slot extra - for extra
+ *  @property {string} label - label to be used for aria-label and potentially as visual label for some components
+ *  @attribute label - label to be used for aria-label and potentially as visual label for some components
+ *  @description - All-around button
+ *  @cssprop --uui-button-height - overwrite the button height
+ *  @cssprop --uui-button-border-width - overwrite the border width
+ *  @cssprop --uui-button-border-radius - overwrite the border radius
+ *  @cssprop --uui-button-font-weight - overwrite the font weight
+ *  @cssprop --uui-button-font-size - overwrite the font size
+ *  @cssprop --uui-button-background-color - overwrite the background color
+ *  @cssprop --uui-button-background-color-hover - overwrite the background color for hover state
+ *  @cssprop --uui-button-background-color-disabled - overwrite the background color for disabled state
+ *  @cssprop --uui-button-border-color - overwrite the border color
+ *  @cssprop --uui-button-border-color-hover - overwrite the border color for hover state
+ *  @cssprop --uui-button-border-color-disabled - overwrite the border color for disabled state
+ *  @cssprop --uui-button-contrast - overwrite the text color
+ *  @cssprop --uui-button-contrast-hover - overwrite the text color for hover state
+ *  @cssprop --uui-button-contrast-disabled - overwrite the text color for disabled state
+ *  @cssprop --uui-button-content-align - Overwrite justify-content alignment. Possible values: 'left', 'right', 'center'.
+ *  @cssprop --uui-button-transition - Add transition to the button. Default is none.
+ *  @cssprop --uui-focus-outline-color - overwrite the focus outline color
+ */
+export declare class UUIButtonElement extends UUIButtonElement_base {
+    #private;
+    /**
+     * Specifies the type of button
+     * @type {"submit" | "button" | "reset"}
+     * @attr
+     * @default "button"
+     */
+    type: UUIButtonType;
+    /**
+     * Disables the button, changes the looks of it and prevents if from emitting the click event
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * Makes the left and right padding of the button narrower.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    compact: boolean;
+    /**
+     * Sets the state of the button. With waiting state a loader will show, the success and fail states display icons. State is automatically reset to the default after 3 seconds.
+     * @type {undefined |'waiting' | 'success' | 'failed'}
+     * @attr
+     * @default undefined
+     */
+    state: UUIButtonState;
+    /**
+     * Set an href, this will turns the button into a 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;
+    /**
+     * Sets the title attribute, which provides a tooltip for both button and anchor elements.
+     * @type {string}
+     * @attr
+     * @default ''
+     */
+    title: string;
+    protected readonly _button: HTMLInputElement;
+    constructor();
+    protected getFormElement(): HTMLElement;
+    focus(): Promise<void>;
+    blur(): Promise<void>;
+    click(): Promise<void>;
+    private _onHostClick;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    protected renderState(): TemplateResult | typeof nothing;
+    render(): TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}
+export {};