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

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

@@ -0,0 +1 @@
+{"version":3,"file":"loader-bar.element.js","sources":["../../../src/components/loader-bar/loader-bar.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { clamp } from '../../internal/utils/index.js';\n\n/**\n *  @element uui-loader-bar\n * @description - Linear loader for indicating loading.\n */\nexport class UUILoaderBarElement extends LitElement {\n  private _progress = 0;\n\n  /**\n   * Set this to a number between 0 and 100 to reflect the progress of some operation. When the value is left at 0 loader will looped animation\n   * @type {number}\n   * @attr\n   * @default 0\n   */\n  @property({ type: Number })\n  get progress() {\n    return this._progress;\n  }\n\n  set progress(newVal) {\n    const oldVal = this._progress;\n    this._progress = clamp(newVal, 0, 100);\n    this.requestUpdate('progress', oldVal);\n  }\n\n  private _animationDuration = 1;\n  /**\n   * Set this to a number greater then 0 to define the length of loader animation in seconds. Passing 0 or a negative number as a value will set it to 1 second. This is because negative values are illegal in the `animation-duration` css property, and value of 0 just stops the animation.\n   * @type {number}\n   * @attr\n   * @default 1\n   */\n  @property({ type: Number })\n  get animationDuration() {\n    return this._animationDuration;\n  }\n\n  set animationDuration(newVal) {\n    const oldVal = this._animationDuration;\n    this._animationDuration = newVal >= 0 ? newVal : 1;\n    this.requestUpdate('animationDuration', oldVal);\n  }\n\n  render() {\n    return html`\n      ${this.progress\n        ? html`<div\n            id=\"bar\"\n            style=\"max-width: ${this.progress.toString()}%;\"></div>`\n        : ''}\n      <div\n        id=\"bar-anim\"\n        class=${this.progress ? '' : 'animate'}\n        style=\"animation-duration: ${this.animationDuration}s\"></div>\n      <div id=\"bar-background\"></div>\n    `;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        position: relative;\n        display: block;\n        width: 100%;\n        height: 2px;\n        border-radius: 1px;\n        overflow: hidden;\n        color: var(--uui-color-default);\n      }\n\n      #bar,\n      #bar-anim,\n      #bar-background {\n        position: absolute;\n        inset: 0; /* top, left, bottom and right = 0*/\n        height: 100%;\n      }\n\n      #bar-background,\n      #bar {\n        background: currentColor;\n      }\n\n      #bar {\n        transition: max-width 120ms ease;\n      }\n\n      #bar-background {\n        opacity: 0.3;\n      }\n\n      #bar-anim {\n        transform: scaleX(0.4);\n        animation: bar-loading 1s infinite linear;\n        background: linear-gradient(\n          -90deg,\n          white 0%,\n          white 25%,\n          transparent 100%\n        );\n      }\n\n      #bar-anim.animate {\n        background: linear-gradient(\n          -90deg,\n          currentColor 0%,\n          currentColor 25%,\n          transparent 100%\n        );\n      }\n\n      @keyframes bar-loading {\n        0% {\n          transform-origin: -175% 0%;\n        }\n        100% {\n          transform-origin: 175% 0%;\n        }\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAQO,MAAM,uBAAN,MAAM,6BAA4B,WAAW;AAAA,EAA7C,cAAA;AAAA,UAAA,GAAA,SAAA;AACL,SAAQ,YAAY;AAmBpB,SAAQ,qBAAqB;AAAA,EAAA;AAAA,EAV7B,IAAI,WAAW;AACb,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,IAAI,SAAS,QAAQ;AACnB,UAAM,SAAS,KAAK;AACpB,SAAK,YAAY,MAAM,QAAQ,GAAG,GAAG;AACrC,SAAK,cAAc,YAAY,MAAM;AAAA,EACvC;AAAA,EAUA,IAAI,oBAAoB;AACtB,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,IAAI,kBAAkB,QAAQ;AAC5B,UAAM,SAAS,KAAK;AACpB,SAAK,qBAAqB,UAAU,IAAI,SAAS;AACjD,SAAK,cAAc,qBAAqB,MAAM;AAAA,EAChD;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,QACH,KAAK,WACH;AAAA;AAAA,gCAEsB,KAAK,SAAS,SAAA,CAAU,eAC9C,EAAE;AAAA;AAAA;AAAA,gBAGI,KAAK,WAAW,KAAK,SAAS;AAAA,qCACT,KAAK,iBAAiB;AAAA;AAAA;AAAA,EAGzD;AAiEF;AA/DE,qBAAyB,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAtDG,IAAM,sBAAN;AAUD,gBAAA;AAAA,EADH,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GATf,oBAUP,WAAA,UAAA;AAkBA,gBAAA;AAAA,EADH,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA3Bf,oBA4BP,WAAA,mBAAA;"}

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

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

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

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

package/dist/components/loader-circle/loader-circle.d.ts

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

package/dist/components/loader-circle/loader-circle.element.d.ts

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+/**
+ *  @element uui-loader-circle
+ * @description - Circular loader for indicating loading. You can put in in a button ;)
+ */
+export declare class UUILoaderCircleElement extends LitElement {
+    private _circleStyle;
+    /**
+     * Sets the progress that loader shows
+     * @type {number}
+     * @attr
+     * @default 0
+     */
+    progress: number;
+    /**
+     * If true then element displays progress number at bigger sizes
+     * @type {boolean}
+     * @attr show-progress
+     * @default false
+     */
+    showProgress: boolean;
+    private readonly _resizeObserver;
+    private _isLarge;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    onResize(): void;
+    protected renderProgress(): import("lit-html").TemplateResult<1> | "";
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}

package/dist/components/loader-circle/loader-circle.element.js

@@ -0,0 +1,163 @@
+import { LitElement, html, css } from "lit";
+import { property } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.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 _UUILoaderCircleElement = class _UUILoaderCircleElement extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.progress = 0;
+    this.showProgress = false;
+    this._resizeObserver = new ResizeObserver(() => this.onResize());
+    this._isLarge = false;
+  }
+  _circleStyle() {
+    if (this.progress) {
+      return { strokeDasharray: `${this.progress} 100` };
+    } else {
+      return { strokeDasharray: "100 100" };
+    }
+  }
+  firstUpdated() {
+    this._resizeObserver.observe(this);
+  }
+  disconnectedCallback() {
+    this._resizeObserver.disconnect();
+  }
+  onResize() {
+    const newIsLarge = this.clientHeight >= 30;
+    if (this._isLarge != newIsLarge) {
+      this._isLarge = newIsLarge;
+      this.requestUpdate();
+    }
+  }
+  renderProgress() {
+    return this._isLarge && this.progress && this.showProgress ? html`<span id="progress-display">${this.progress}</span>` : "";
+  }
+  render() {
+    return html`
+      <svg
+        id="spinner"
+        class=${this.progress ? "" : "animate"}
+        viewBox="0 0 40 40"
+        xmlns="http://www.w3.org/2000/svg">
+        <circle id="bg" cx="50%" cy="50%" r="16" />
+        <g>
+          <circle
+            id="circle"
+            cx="50%"
+            cy="50%"
+            r="16"
+            style=${styleMap(this._circleStyle())} />
+        </g>
+      </svg>
+      ${this.renderProgress()}
+    `;
+  }
+};
+_UUILoaderCircleElement.styles = [
+  css`
+      :host {
+        vertical-align: middle;
+        line-height: 0;
+        overflow: hidden;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        width: 1em;
+        height: 1em;
+        color: var(--uui-color-default);
+      }
+
+      #spinner {
+        width: 100%;
+        height: 100%;
+      }
+      #spinner g {
+        transform-origin: 50% 50%;
+        animation: 18s linear infinite spinner-animation;
+      }
+      #spinner.animate g {
+        animation: 800ms linear infinite spinner-animation;
+      }
+
+      @keyframes spinner-animation {
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+
+      #spinner.animate #circle {
+        animation: 1400ms ease-in infinite circle-animation;
+        /** ease-in */
+      }
+
+      @keyframes circle-animation {
+        0% {
+          stroke-dashoffset: -55;
+        }
+        38% {
+          stroke-dashoffset: -88;
+        }
+        100% {
+          stroke-dashoffset: -55;
+        }
+      }
+
+      svg circle {
+        fill: transparent;
+        stroke: currentColor;
+        stroke-width: 4px;
+      }
+
+      #bg {
+        opacity: 0.5;
+      }
+
+      #circle {
+        stroke-linecap: round;
+        stroke-dasharray: 0 0;
+
+        transform-origin: 50% 50%;
+        transform: rotate(-90deg);
+        transition: stroke-dasharray 120ms ease;
+      }
+
+      #progress-display {
+        position: absolute;
+        left: 0;
+        top: 50%;
+        right: 0;
+        stroke: currentColor;
+        transform: translateY(-50%);
+        font-size: 0.3em;
+        font-weight: 700;
+        text-align: center;
+
+        /* Center the text */
+        padding-top: 0.09em;
+      }
+    `
+];
+let UUILoaderCircleElement = _UUILoaderCircleElement;
+__decorateClass([
+  property({ type: Number })
+], UUILoaderCircleElement.prototype, "progress");
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "show-progress" })
+], UUILoaderCircleElement.prototype, "showProgress");
+export {
+  UUILoaderCircleElement
+};
+//# sourceMappingURL=loader-circle.element.js.map

package/dist/components/loader-circle/loader-circle.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader-circle.element.js","sources":["../../../src/components/loader-circle/loader-circle.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\n\n/**\n *  @element uui-loader-circle\n * @description - Circular loader for indicating loading. You can put in in a button ;)\n */\nexport class UUILoaderCircleElement extends LitElement {\n  private _circleStyle() {\n    if (this.progress) {\n      return { strokeDasharray: `${this.progress} 100` };\n    } else {\n      return { strokeDasharray: '100 100' };\n    }\n  }\n\n  /**\n   * Sets the progress that loader shows\n   * @type {number}\n   * @attr\n   * @default 0\n   */\n  @property({ type: Number })\n  progress = 0;\n\n  /**\n   * If true then element displays progress number at bigger sizes\n   * @type {boolean}\n   * @attr show-progress\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'show-progress' })\n  showProgress = false;\n\n  private readonly _resizeObserver = new ResizeObserver(() => this.onResize());\n  private _isLarge = false;\n\n  firstUpdated() {\n    this._resizeObserver.observe(this);\n  }\n\n  disconnectedCallback() {\n    this._resizeObserver.disconnect();\n  }\n\n  onResize() {\n    const newIsLarge = this.clientHeight >= 30;\n\n    if (this._isLarge != newIsLarge) {\n      this._isLarge = newIsLarge;\n      this.requestUpdate();\n    }\n  }\n\n  protected renderProgress() {\n    return this._isLarge && this.progress && this.showProgress\n      ? html`<span id=\"progress-display\">${this.progress}</span>`\n      : '';\n  }\n\n  render() {\n    return html`\n      <svg\n        id=\"spinner\"\n        class=${this.progress ? '' : 'animate'}\n        viewBox=\"0 0 40 40\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <circle id=\"bg\" cx=\"50%\" cy=\"50%\" r=\"16\" />\n        <g>\n          <circle\n            id=\"circle\"\n            cx=\"50%\"\n            cy=\"50%\"\n            r=\"16\"\n            style=${styleMap(this._circleStyle())} />\n        </g>\n      </svg>\n      ${this.renderProgress()}\n    `;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        vertical-align: middle;\n        line-height: 0;\n        overflow: hidden;\n        display: inline-flex;\n        justify-content: center;\n        align-items: center;\n        position: relative;\n        width: 1em;\n        height: 1em;\n        color: var(--uui-color-default);\n      }\n\n      #spinner {\n        width: 100%;\n        height: 100%;\n      }\n      #spinner g {\n        transform-origin: 50% 50%;\n        animation: 18s linear infinite spinner-animation;\n      }\n      #spinner.animate g {\n        animation: 800ms linear infinite spinner-animation;\n      }\n\n      @keyframes spinner-animation {\n        0% {\n          transform: rotate(0deg);\n        }\n        100% {\n          transform: rotate(360deg);\n        }\n      }\n\n      #spinner.animate #circle {\n        animation: 1400ms ease-in infinite circle-animation;\n        /** ease-in */\n      }\n\n      @keyframes circle-animation {\n        0% {\n          stroke-dashoffset: -55;\n        }\n        38% {\n          stroke-dashoffset: -88;\n        }\n        100% {\n          stroke-dashoffset: -55;\n        }\n      }\n\n      svg circle {\n        fill: transparent;\n        stroke: currentColor;\n        stroke-width: 4px;\n      }\n\n      #bg {\n        opacity: 0.5;\n      }\n\n      #circle {\n        stroke-linecap: round;\n        stroke-dasharray: 0 0;\n\n        transform-origin: 50% 50%;\n        transform: rotate(-90deg);\n        transition: stroke-dasharray 120ms ease;\n      }\n\n      #progress-display {\n        position: absolute;\n        left: 0;\n        top: 50%;\n        right: 0;\n        stroke: currentColor;\n        transform: translateY(-50%);\n        font-size: 0.3em;\n        font-weight: 700;\n        text-align: center;\n\n        /* Center the text */\n        padding-top: 0.09em;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAQO,MAAM,0BAAN,MAAM,gCAA+B,WAAW;AAAA,EAAhD,cAAA;AAAA,UAAA,GAAA,SAAA;AAgBL,SAAA,WAAW;AASX,SAAA,eAAe;AAEf,SAAiB,kBAAkB,IAAI,eAAe,MAAM,KAAK,UAAU;AAC3E,SAAQ,WAAW;AAAA,EAAA;AAAA,EA3BX,eAAe;AACrB,QAAI,KAAK,UAAU;AACjB,aAAO,EAAE,iBAAiB,GAAG,KAAK,QAAQ,OAAA;AAAA,IAC5C,OAAO;AACL,aAAO,EAAE,iBAAiB,UAAA;AAAA,IAC5B;AAAA,EACF;AAAA,EAuBA,eAAe;AACb,SAAK,gBAAgB,QAAQ,IAAI;AAAA,EACnC;AAAA,EAEA,uBAAuB;AACrB,SAAK,gBAAgB,WAAA;AAAA,EACvB;AAAA,EAEA,WAAW;AACT,UAAM,aAAa,KAAK,gBAAgB;AAExC,QAAI,KAAK,YAAY,YAAY;AAC/B,WAAK,WAAW;AAChB,WAAK,cAAA;AAAA,IACP;AAAA,EACF;AAAA,EAEU,iBAAiB;AACzB,WAAO,KAAK,YAAY,KAAK,YAAY,KAAK,eAC1C,mCAAmC,KAAK,QAAQ,YAChD;AAAA,EACN;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,gBAGK,KAAK,WAAW,KAAK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAU1B,SAAS,KAAK,aAAA,CAAc,CAAC;AAAA;AAAA;AAAA,QAGzC,KAAK,gBAAgB;AAAA;AAAA,EAE3B;AA0FF;AAxFE,wBAAyB,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;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;AA3EG,IAAM,yBAAN;AAgBL,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAff,uBAgBX,WAAA,UAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,iBAAiB;AAAA,GAxB3D,uBAyBX,WAAA,cAAA;"}

package/dist/components/loader-circle/loader-circle.js

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

package/dist/components/loader-circle/loader-circle.js.map

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

package/dist/components/menu-item/UUIMenuItemEvent.d.ts

@@ -0,0 +1,7 @@
+import { UUIEvent } from '../../internal/events/index.js';
+import type { UUIMenuItemElement } from './menu-item.element.js';
+export declare class UUIMenuItemEvent extends UUIEvent<{}, UUIMenuItemElement> {
+    static readonly SHOW_CHILDREN = "show-children";
+    static readonly HIDE_CHILDREN = "hide-children";
+    static readonly CLICK_LABEL = "click-label";
+}

package/dist/components/menu-item/UUIMenuItemEvent.js

@@ -0,0 +1,11 @@
+import { UUIEvent } from "../../internal/events/UUIEvent.js";
+const _UUIMenuItemEvent = class _UUIMenuItemEvent extends UUIEvent {
+};
+_UUIMenuItemEvent.SHOW_CHILDREN = "show-children";
+_UUIMenuItemEvent.HIDE_CHILDREN = "hide-children";
+_UUIMenuItemEvent.CLICK_LABEL = "click-label";
+let UUIMenuItemEvent = _UUIMenuItemEvent;
+export {
+  UUIMenuItemEvent
+};
+//# sourceMappingURL=UUIMenuItemEvent.js.map

package/dist/components/menu-item/UUIMenuItemEvent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UUIMenuItemEvent.js","sources":["../../../src/components/menu-item/UUIMenuItemEvent.ts"],"sourcesContent":["import { UUIEvent } from '../../internal/events/index.js';\nimport type { UUIMenuItemElement } from './menu-item.element.js';\n\nexport class UUIMenuItemEvent extends UUIEvent<{}, UUIMenuItemElement> {\n  public static readonly SHOW_CHILDREN = 'show-children';\n  public static readonly HIDE_CHILDREN = 'hide-children';\n\n  public static readonly CLICK_LABEL = 'click-label';\n}\n"],"names":[],"mappings":";AAGO,MAAM,oBAAN,MAAM,0BAAyB,SAAiC;AAKvE;AAJE,kBAAuB,gBAAgB;AACvC,kBAAuB,gBAAgB;AAEvC,kBAAuB,cAAc;AAJhC,IAAM,mBAAN;"}

package/dist/components/menu-item/menu-item.d.ts

@@ -0,0 +1,9 @@
+import { UUIMenuItemElement } from './menu-item.element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-menu-item': UUIMenuItemElement;
+    }
+}
+export * from './menu-item.element.js';
+export * from './UUIMenuItemEvent.js';
+export { UUIMenuItemElement as default } from './menu-item.element.js';

package/dist/components/menu-item/menu-item.element.d.ts

@@ -0,0 +1,110 @@
+import type { TemplateResult } from 'lit';
+import { LitElement } from 'lit';
+import '../loader-bar/loader-bar.js';
+import '../symbol-expand/symbol-expand.js';
+declare const UUIMenuItemElement_base: (new (...args: any[]) => import("../../index.js").UUISelectOnlyMixinInterface) & (new (...args: any[]) => import("../../index.js").UUISelectableMixinInterface) & (new (...args: any[]) => import("../../index.js").UUIActiveMixinInterface) & (new (...args: any[]) => import("../../index.js").UUILabelMixinInterface) & typeof LitElement;
+/**
+ *  @element uui-menu-item
+ *  @cssprop --uui-menu-item-indent - set indentation of the menu items
+ *  @cssprop --uui-menu-item-flat-structure - set to 1 to remove the indentation of the chevron. Use this when you have a flat menu structure
+ *  @cssprop --uui-menu-item-background-color-hover - background color when hovering
+ *  @cssprop --uui-menu-item-color-hover - text color when hovering
+ *  @cssprop --uui-menu-item-background-color-active - background color when active
+ *  @cssprop --uui-menu-item-color-active - text color when active
+ *  @cssprop --uui-menu-item-background-color-disabled - background color when disabled
+ *  @cssprop --uui-menu-item-color-disabled - text color when disabled
+ *  @cssprop --uui-menu-item-background-color-selected - background color when selected
+ *  @cssprop --uui-menu-item-color-selected - text color when selected
+ *  @cssprop --uui-menu-item-color-background-selected-hover - text color when selected
+ *  @fires {UUIMenuItemEvent} show-children - fires when the expand icon is clicked to show nested menu items
+ *  @fires {UUIMenuItemEvent} hide-children - fires when the expend icon is clicked to hide nested menu items
+ *  @fires {UUIMenuItemEvent} click-label - fires when the label is clicked
+ *  @fires {UUISelectableEvent} selected - fires when the media card is selected
+ *  @fires {UUISelectableEvent} deselected - fires when the media card is deselected
+ *  @slot - nested menu items go here
+ *  @slot icon - icon area
+ *  @slot actions - actions area
+ *  @slot label - area to place the label
+ */
+export declare class UUIMenuItemElement extends UUIMenuItemElement_base {
+    #private;
+    /**
+     * Disables the menu item, changes the looks of it and prevents it from emitting the click event
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Controls if nested items should be shown.
+     * @type {boolean}
+     * @attr show-children
+     * @default false
+     */
+    showChildren: boolean;
+    /**
+     * Shows/hides the caret.
+     * @type {boolean}
+     * @attr has-children
+     * @default false
+     */
+    hasChildren: boolean;
+    /**
+     * Shows/hides the loading indicator
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    loading: boolean;
+    /**
+     * Set an href, this will turns the label 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 selection mode.
+     * @type {string}
+     * @attr select-mode
+     * @default undefined
+     */
+    selectMode?: 'highlight' | 'persisting';
+    /**
+     * Sets the aria-label for the caret button.
+     * @remark Only used when the menu item has children.
+     * @attr caret-label
+     * @default 'Reveal the underlying items'
+     */
+    caretLabel: string;
+    /**
+     * Overwrite the expand symbol rendering, this replaces the Expand Symbol from UI Library.
+     */
+    renderExpandSymbol?: () => Element | TemplateResult<1> | undefined;
+    private iconSlotHasContent;
+    connectedCallback(): void;
+    focus(): Promise<void>;
+    private readonly _labelButtonChanged;
+    private readonly _iconSlotChanged;
+    private readonly _onCaretClicked;
+    private _renderLabelInside;
+    private _renderLabelAsAnchor;
+    private _renderLabelAsButton;
+    render(): TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}
+export {};