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

package/dist/components/input-password/input-password.element.d.ts

@@ -0,0 +1,18 @@
+import type { InputType } from '../input/input.js';
+import { UUIInputElement } from '../input/input.js';
+import '../icon/icon.js';
+import '../button/button.js';
+/**
+ * @element uui-input-password
+ * @extends uui-input
+ */
+export declare class UUIInputPasswordElement extends UUIInputElement {
+    private passwordType;
+    get type(): InputType;
+    set type(newValue: InputType);
+    _onPasswordToggle(): void;
+    connectedCallback(): void;
+    renderIcon(): import("lit-html").TemplateResult<1>;
+    renderAppend(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}

package/dist/components/input-password/input-password.element.js

@@ -0,0 +1,82 @@
+import "../input/input.js";
+import { html, css } from "lit";
+import { state, property } from "lit/decorators.js";
+import "../icon/icon.js";
+import "../button/button.js";
+import { UUIInputElement } from "../input/input.element.js";
+import { iconSee } from "../icon-registry-essential/svgs/iconSee.js";
+import { iconUnsee } from "../icon-registry-essential/svgs/iconUnsee.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 _UUIInputPasswordElement = class _UUIInputPasswordElement extends UUIInputElement {
+  constructor() {
+    super(...arguments);
+    this.passwordType = "password";
+  }
+  get type() {
+    return this.passwordType;
+  }
+  set type(newValue) {
+    this.passwordType = newValue;
+  }
+  _onPasswordToggle() {
+    if (this.passwordType === "password") {
+      this.passwordType = "text";
+    } else {
+      this.passwordType = "password";
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.hasAttribute("spellcheck")) {
+      this.spellcheck = false;
+    }
+  }
+  renderIcon() {
+    return this.passwordType === "password" ? html`<uui-icon name="see" .fallback=${iconSee.strings[0]}></uui-icon>` : html`<uui-icon
+          name="unsee"
+          .fallback=${iconUnsee.strings[0]}></uui-icon>`;
+  }
+  renderAppend() {
+    return html`<uui-button
+      .disabled=${this.disabled}
+      @click=${this._onPasswordToggle}
+      compact
+      label="${this.passwordType === "password" ? "Show password" : "Hide password"}"
+      id="eye">
+      ${this.renderIcon()}
+    </uui-button>`;
+  }
+};
+_UUIInputPasswordElement.styles = [
+  ...UUIInputElement.styles,
+  css`
+      #eye {
+        height: 100%;
+        margin-left: -6px;
+      }
+
+      #clear:hover {
+        color: black;
+      }
+    `
+];
+let UUIInputPasswordElement = _UUIInputPasswordElement;
+__decorateClass([
+  state()
+], UUIInputPasswordElement.prototype, "passwordType", 2);
+__decorateClass([
+  property()
+], UUIInputPasswordElement.prototype, "type", 1);
+export {
+  UUIInputPasswordElement
+};
+//# sourceMappingURL=input-password.element.js.map

package/dist/components/input-password/input-password.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-password.element.js","sources":["../../../src/components/input-password/input-password.element.ts"],"sourcesContent":["import { iconSee, iconUnsee } from '../icon-registry-essential/svgs/index.js';\nimport type { InputType } from '../input/input.js';\nimport { UUIInputElement } from '../input/input.js';\nimport { css, html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\n\nimport '../icon/icon.js';\nimport '../button/button.js';\n\n/**\n * @element uui-input-password\n * @extends uui-input\n */\nexport class UUIInputPasswordElement extends UUIInputElement {\n  @state()\n  private passwordType: InputType = 'password';\n\n  // this overrides the inherited type property, and moves the input's type handling to the passwordType state.\n  @property()\n  get type() {\n    return this.passwordType;\n  }\n  set type(newValue) {\n    this.passwordType = newValue;\n  }\n\n  _onPasswordToggle() {\n    if (this.passwordType === 'password') {\n      this.passwordType = 'text';\n    } else {\n      this.passwordType = 'password';\n    }\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    if (!this.hasAttribute('spellcheck')) {\n      this.spellcheck = false;\n    }\n  }\n\n  renderIcon() {\n    return this.passwordType === 'password'\n      ? html`<uui-icon name=\"see\" .fallback=${iconSee.strings[0]}></uui-icon>`\n      : html`<uui-icon\n          name=\"unsee\"\n          .fallback=${iconUnsee.strings[0]}></uui-icon>`;\n  }\n\n  renderAppend() {\n    return html`<uui-button\n      .disabled=${this.disabled}\n      @click=${this._onPasswordToggle}\n      compact\n      label=\"${this.passwordType === 'password'\n        ? 'Show password'\n        : 'Hide password'}\"\n      id=\"eye\">\n      ${this.renderIcon()}\n    </uui-button>`;\n  }\n\n  static override readonly styles = [\n    ...UUIInputElement.styles,\n    css`\n      #eye {\n        height: 100%;\n        margin-left: -6px;\n      }\n\n      #clear:hover {\n        color: black;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAaO,MAAM,2BAAN,MAAM,iCAAgC,gBAAgB;AAAA,EAAtD,cAAA;AAAA,UAAA,GAAA,SAAA;AAEL,SAAQ,eAA0B;AAAA,EAAA;AAAA,EAIlC,IAAI,OAAO;AACT,WAAO,KAAK;AAAA,EACd;AAAA,EACA,IAAI,KAAK,UAAU;AACjB,SAAK,eAAe;AAAA,EACtB;AAAA,EAEA,oBAAoB;AAClB,QAAI,KAAK,iBAAiB,YAAY;AACpC,WAAK,eAAe;AAAA,IACtB,OAAO;AACL,WAAK,eAAe;AAAA,IACtB;AAAA,EACF;AAAA,EAEA,oBAA0B;AACxB,UAAM,kBAAA;AAEN,QAAI,CAAC,KAAK,aAAa,YAAY,GAAG;AACpC,WAAK,aAAa;AAAA,IACpB;AAAA,EACF;AAAA,EAEA,aAAa;AACX,WAAO,KAAK,iBAAiB,aACzB,sCAAsC,QAAQ,QAAQ,CAAC,CAAC,iBACxD;AAAA;AAAA,sBAEc,UAAU,QAAQ,CAAC,CAAC;AAAA,EACxC;AAAA,EAEA,eAAe;AACb,WAAO;AAAA,kBACO,KAAK,QAAQ;AAAA,eAChB,KAAK,iBAAiB;AAAA;AAAA,eAEtB,KAAK,iBAAiB,aAC3B,kBACA,eAAe;AAAA;AAAA,QAEjB,KAAK,YAAY;AAAA;AAAA,EAEvB;AAeF;AAbE,yBAAyB,SAAS;AAAA,EAChC,GAAG,gBAAgB;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AApDG,IAAM,0BAAN;AAEG,gBAAA;AAAA,EADP,MAAA;AAAM,GADI,wBAEH,WAAA,gBAAA,CAAA;AAIJ,gBAAA;AAAA,EADH,SAAA;AAAS,GALC,wBAMP,WAAA,QAAA,CAAA;"}

package/dist/components/input-password/input-password.js

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

package/dist/components/input-password/input-password.js.map

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

package/dist/components/keyboard-shortcut/key.element.d.ts

@@ -0,0 +1,10 @@
+import { LitElement } from 'lit';
+/**
+ *  A visual representation of a key on you keyboard. use inside `<uui-keyboard-shortcut></uui-keyboard-shortcut>`
+ *  @element uui-key
+ *  @slot - for the key name. Anything you put in here will be lowercase.
+ */
+export declare class UUIKeyElement extends LitElement {
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}

package/dist/components/keyboard-shortcut/key.element.js

@@ -0,0 +1,28 @@
+import { LitElement, html, css } from "lit";
+const _UUIKeyElement = class _UUIKeyElement extends LitElement {
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+_UUIKeyElement.styles = [
+  css`
+      :host {
+        background: var(--uui-color-surface);
+        border: 1px solid var(--uui-color-border);
+        font-family: inherit;
+        font-size: var(--uui-type-small-size);
+        color: var(--uui-color-text);
+        border-radius: var(--uui-border-radius);
+        margin: 0px 5px;
+        padding: 5px 7px;
+        box-sizing: border-box;
+        user-select: none;
+        text-transform: lowercase;
+      }
+    `
+];
+let UUIKeyElement = _UUIKeyElement;
+export {
+  UUIKeyElement
+};
+//# sourceMappingURL=key.element.js.map

package/dist/components/keyboard-shortcut/key.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"key.element.js","sources":["../../../src/components/keyboard-shortcut/key.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\n\n/**\n *  A visual representation of a key on you keyboard. use inside `<uui-keyboard-shortcut></uui-keyboard-shortcut>`\n *  @element uui-key\n *  @slot - for the key name. Anything you put in here will be lowercase.\n */\nexport class UUIKeyElement extends LitElement {\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        background: var(--uui-color-surface);\n        border: 1px solid var(--uui-color-border);\n        font-family: inherit;\n        font-size: var(--uui-type-small-size);\n        color: var(--uui-color-text);\n        border-radius: var(--uui-border-radius);\n        margin: 0px 5px;\n        padding: 5px 7px;\n        box-sizing: border-box;\n        user-select: none;\n        text-transform: lowercase;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";AAOO,MAAM,iBAAN,MAAM,uBAAsB,WAAW;AAAA,EAC5C,SAAS;AACP,WAAO;AAAA,EACT;AAmBF;AAjBE,eAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AANG,IAAM,gBAAN;"}

package/dist/components/keyboard-shortcut/keyboard-shortcut.d.ts

@@ -0,0 +1,11 @@
+import { UUIKeyElement } from './key.element.js';
+import { UUIKeyboardShortcutElement } from './keyboard-shortcut.element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-key': UUIKeyElement;
+        'uui-keyboard-shortcut': UUIKeyboardShortcutElement;
+    }
+}
+export * from './key.element.js';
+export * from './keyboard-shortcut.element.js';
+export { UUIKeyboardShortcutElement as default } from './keyboard-shortcut.element.js';

package/dist/components/keyboard-shortcut/keyboard-shortcut.element.d.ts

@@ -0,0 +1,10 @@
+import { LitElement } from 'lit';
+/**
+ *  A visual representation of a keyboard shortcut.
+ *  @element uui-keyboard-shortcut
+ *  @slot - for `<uui-key></uui-key>` elements
+ */
+export declare class UUIKeyboardShortcutElement extends LitElement {
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}

package/dist/components/keyboard-shortcut/keyboard-shortcut.element.js

@@ -0,0 +1,29 @@
+import { LitElement, html, css } from "lit";
+const _UUIKeyboardShortcutElement = class _UUIKeyboardShortcutElement extends LitElement {
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+_UUIKeyboardShortcutElement.styles = [
+  css`
+      :host {
+        display: inline-block;
+        font-family: inherit;
+        font-size: var(--uui-size-4);
+        color: var(--uui-color-text);
+      }
+
+      ::slotted(*:first-child)uui-key {
+        margin-left: 0px;
+      }
+
+      ::slotted(*:last-child)uui-key {
+        margin-right: 0px;
+      }
+    `
+];
+let UUIKeyboardShortcutElement = _UUIKeyboardShortcutElement;
+export {
+  UUIKeyboardShortcutElement
+};
+//# sourceMappingURL=keyboard-shortcut.element.js.map

package/dist/components/keyboard-shortcut/keyboard-shortcut.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard-shortcut.element.js","sources":["../../../src/components/keyboard-shortcut/keyboard-shortcut.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\n\n/**\n *  A visual representation of a keyboard shortcut.\n *  @element uui-keyboard-shortcut\n *  @slot - for `<uui-key></uui-key>` elements\n */\nexport class UUIKeyboardShortcutElement extends LitElement {\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: inline-block;\n        font-family: inherit;\n        font-size: var(--uui-size-4);\n        color: var(--uui-color-text);\n      }\n\n      ::slotted(*:first-child)uui-key {\n        margin-left: 0px;\n      }\n\n      ::slotted(*:last-child)uui-key {\n        margin-right: 0px;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";AAOO,MAAM,8BAAN,MAAM,oCAAmC,WAAW;AAAA,EACzD,SAAS;AACP,WAAO;AAAA,EACT;AAoBF;AAlBE,4BAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AANG,IAAM,6BAAN;"}

package/dist/components/keyboard-shortcut/keyboard-shortcut.js

@@ -0,0 +1,11 @@
+import { defineElement } from "../../internal/registration/index.js";
+import { UUIKeyElement } from "./key.element.js";
+import { UUIKeyboardShortcutElement } from "./keyboard-shortcut.element.js";
+defineElement("uui-key", UUIKeyElement);
+defineElement("uui-keyboard-shortcut", UUIKeyboardShortcutElement);
+export {
+  UUIKeyElement,
+  UUIKeyboardShortcutElement,
+  UUIKeyboardShortcutElement as default
+};
+//# sourceMappingURL=keyboard-shortcut.js.map

package/dist/components/keyboard-shortcut/keyboard-shortcut.js.map

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

package/dist/components/label/label.d.ts

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

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

@@ -0,0 +1,35 @@
+import { LitElement } from 'lit';
+/**
+ * Label element for Custom Element
+ * @element uui-label
+ * @slot - for the label text.
+ * @cssprop --uui-validation-color - Color property for the required asterisk.
+ */
+export declare class UUILabelElement extends LitElement {
+    /**
+     * Disables the label.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Define the related element to this label.
+     * @type {string | HTMLElement}
+     * @attr for
+     * @default null
+     */
+    for: string | HTMLElement | null;
+    /**
+     * Highlight that the related element is required.
+     * @type {boolean}
+     * @attr required
+     * @default false
+     */
+    required: boolean;
+    constructor();
+    private _onClick;
+    protected getForElement(): HTMLElement | null;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}

package/dist/components/label/label.element.js

@@ -0,0 +1,73 @@
+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 _UUILabelElement = class _UUILabelElement extends LitElement {
+  constructor() {
+    super();
+    this.disabled = false;
+    this.for = null;
+    this.required = false;
+    this.addEventListener("click", this._onClick);
+  }
+  _onClick() {
+    if (this.disabled) return;
+    const el = this.getForElement();
+    if (el) {
+      el.focus();
+      el.click();
+    }
+  }
+  getForElement() {
+    if (typeof this.for === "string") {
+      const scope = this.getRootNode();
+      return scope?.getElementById(this.for) || null;
+    }
+    return this.for || null;
+  }
+  render() {
+    return html`
+      <slot></slot>
+      ${this.required ? html`<div id="required">*</div>` : ""}
+    `;
+  }
+};
+_UUILabelElement.styles = [
+  css`
+      :host {
+        font-weight: 700;
+      }
+      :host([for]) {
+        cursor: pointer;
+      }
+      :host([disabled]) {
+        cursor: default;
+      }
+      #required {
+        display: inline;
+        color: var(--uui-color-danger);
+        font-weight: 900;
+      }
+    `
+];
+let UUILabelElement = _UUILabelElement;
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UUILabelElement.prototype, "disabled");
+__decorateClass([
+  property({ reflect: true, attribute: true })
+], UUILabelElement.prototype, "for");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UUILabelElement.prototype, "required");
+export {
+  UUILabelElement
+};
+//# sourceMappingURL=label.element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"label.element.js","sources":["../../../src/components/label/label.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\n/**\n * Label element for Custom Element\n * @element uui-label\n * @slot - for the label text.\n * @cssprop --uui-validation-color - Color property for the required asterisk.\n */\nexport class UUILabelElement extends LitElement {\n  /**\n   * Disables the label.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Define the related element to this label.\n   * @type {string | HTMLElement}\n   * @attr for\n   * @default null\n   */\n  @property({ reflect: true, attribute: true })\n  for: string | HTMLElement | null = null;\n\n  /**\n   * Highlight that the related element is required.\n   * @type {boolean}\n   * @attr required\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  constructor() {\n    super();\n    this.addEventListener('click', this._onClick);\n  }\n\n  private _onClick() {\n    if (this.disabled) return;\n\n    const el = this.getForElement();\n    if (el) {\n      el.focus();\n      el.click();\n    }\n  }\n\n  protected getForElement(): HTMLElement | null {\n    if (typeof this.for === 'string') {\n      const scope = this.getRootNode();\n      return (scope as DocumentFragment)?.getElementById(this.for) || null;\n    }\n    return this.for || null;\n  }\n\n  render() {\n    return html`\n      <slot></slot>\n      ${this.required ? html`<div id=\"required\">*</div>` : ''}\n    `;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        font-weight: 700;\n      }\n      :host([for]) {\n        cursor: pointer;\n      }\n      :host([disabled]) {\n        cursor: default;\n      }\n      #required {\n        display: inline;\n        color: var(--uui-color-danger);\n        font-weight: 900;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;AASO,MAAM,mBAAN,MAAM,yBAAwB,WAAW;AAAA,EA4B9C,cAAc;AACZ,UAAA;AArBF,SAAA,WAAW;AASX,SAAA,MAAmC;AASnC,SAAA,WAAW;AAIT,SAAK,iBAAiB,SAAS,KAAK,QAAQ;AAAA,EAC9C;AAAA,EAEQ,WAAW;AACjB,QAAI,KAAK,SAAU;AAEnB,UAAM,KAAK,KAAK,cAAA;AAChB,QAAI,IAAI;AACN,SAAG,MAAA;AACH,SAAG,MAAA;AAAA,IACL;AAAA,EACF;AAAA,EAEU,gBAAoC;AAC5C,QAAI,OAAO,KAAK,QAAQ,UAAU;AAChC,YAAM,QAAQ,KAAK,YAAA;AACnB,aAAQ,OAA4B,eAAe,KAAK,GAAG,KAAK;AAAA,IAClE;AACA,WAAO,KAAK,OAAO;AAAA,EACrB;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA,QAEH,KAAK,WAAW,mCAAmC,EAAE;AAAA;AAAA,EAE3D;AAoBF;AAlBE,iBAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA3DG,IAAM,kBAAN;AAQL,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAP/B,gBAQX,WAAA,UAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,MAAM,WAAW,MAAM;AAAA,GAhBjC,gBAiBX,WAAA,KAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAzB/B,gBA0BX,WAAA,UAAA;"}

package/dist/components/label/label.js

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

package/dist/components/label/label.js.map

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

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

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

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

@@ -0,0 +1,9 @@
+import { LitElement } from 'lit';
+/**
+ *  A basic loader.
+ *  @element uui-loader
+ */
+export declare class UUILoaderElement extends LitElement {
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}

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

@@ -0,0 +1,61 @@
+import { LitElement, html, css } from "lit";
+const _UUILoaderElement = class _UUILoaderElement extends LitElement {
+  render() {
+    return html`
+      <div></div>
+      <div></div>
+      <div></div>
+    `;
+  }
+};
+_UUILoaderElement.styles = [
+  css`
+      :host {
+        color: var(--uui-color-default);
+      }
+
+      div {
+        display: inline-block;
+        width: var(--uui-size-2);
+        height: var(--uui-size-2);
+        border: 1px solid currentColor;
+        border-radius: 100%;
+        animation: loaderAnimation 1.2s infinite;
+        transition:
+          transform 60ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
+          background-color 60ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
+      }
+
+      div:nth-child(1n) {
+        animation-delay: 0s;
+      }
+
+      div:nth-child(2n) {
+        animation-delay: 0.15s;
+      }
+
+      div:nth-child(3n) {
+        animation-delay: 0.3s;
+      }
+
+      @keyframes loaderAnimation {
+        0% {
+          transform: scale(0.33);
+          background-color: currentColor;
+        }
+        50% {
+          transform: scale(1);
+          background-color: transparent;
+        }
+        100% {
+          transform: scale(0.33);
+          background-color: currentColor;
+        }
+      }
+    `
+];
+let UUILoaderElement = _UUILoaderElement;
+export {
+  UUILoaderElement
+};
+//# sourceMappingURL=loader.element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"loader.element.js","sources":["../../../src/components/loader/loader.element.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\n/**\n *  A basic loader.\n *  @element uui-loader\n */\nexport class UUILoaderElement extends LitElement {\n  render() {\n    return html`\n      <div></div>\n      <div></div>\n      <div></div>\n    `;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        color: var(--uui-color-default);\n      }\n\n      div {\n        display: inline-block;\n        width: var(--uui-size-2);\n        height: var(--uui-size-2);\n        border: 1px solid currentColor;\n        border-radius: 100%;\n        animation: loaderAnimation 1.2s infinite;\n        transition:\n          transform 60ms cubic-bezier(0.68, -0.55, 0.265, 1.55),\n          background-color 60ms cubic-bezier(0.68, -0.55, 0.265, 1.55);\n      }\n\n      div:nth-child(1n) {\n        animation-delay: 0s;\n      }\n\n      div:nth-child(2n) {\n        animation-delay: 0.15s;\n      }\n\n      div:nth-child(3n) {\n        animation-delay: 0.3s;\n      }\n\n      @keyframes loaderAnimation {\n        0% {\n          transform: scale(0.33);\n          background-color: currentColor;\n        }\n        50% {\n          transform: scale(1);\n          background-color: transparent;\n        }\n        100% {\n          transform: scale(0.33);\n          background-color: currentColor;\n        }\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";AAKO,MAAM,oBAAN,MAAM,0BAAyB,WAAW;AAAA,EAC/C,SAAS;AACP,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT;AAgDF;AA9CE,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAVG,IAAM,mBAAN;"}

package/dist/components/loader/loader.js

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

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

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

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

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

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

@@ -0,0 +1,27 @@
+import { LitElement } from 'lit';
+/**
+ *  @element uui-loader-bar
+ * @description - Linear loader for indicating loading.
+ */
+export declare class UUILoaderBarElement extends LitElement {
+    private _progress;
+    /**
+     * 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
+     * @type {number}
+     * @attr
+     * @default 0
+     */
+    get progress(): number;
+    set progress(newVal: number);
+    private _animationDuration;
+    /**
+     * 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.
+     * @type {number}
+     * @attr
+     * @default 1
+     */
+    get animationDuration(): number;
+    set animationDuration(newVal: number);
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}

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

@@ -0,0 +1,122 @@
+import { LitElement, html, css } from "lit";
+import { property } from "lit/decorators.js";
+import { clamp } from "../../internal/utils/math.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = __getOwnPropDesc(target, key);
+  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 _UUILoaderBarElement = class _UUILoaderBarElement extends LitElement {
+  constructor() {
+    super(...arguments);
+    this._progress = 0;
+    this._animationDuration = 1;
+  }
+  get progress() {
+    return this._progress;
+  }
+  set progress(newVal) {
+    const oldVal = this._progress;
+    this._progress = clamp(newVal, 0, 100);
+    this.requestUpdate("progress", oldVal);
+  }
+  get animationDuration() {
+    return this._animationDuration;
+  }
+  set animationDuration(newVal) {
+    const oldVal = this._animationDuration;
+    this._animationDuration = newVal >= 0 ? newVal : 1;
+    this.requestUpdate("animationDuration", oldVal);
+  }
+  render() {
+    return html`
+      ${this.progress ? html`<div
+            id="bar"
+            style="max-width: ${this.progress.toString()}%;"></div>` : ""}
+      <div
+        id="bar-anim"
+        class=${this.progress ? "" : "animate"}
+        style="animation-duration: ${this.animationDuration}s"></div>
+      <div id="bar-background"></div>
+    `;
+  }
+};
+_UUILoaderBarElement.styles = [
+  css`
+      :host {
+        position: relative;
+        display: block;
+        width: 100%;
+        height: 2px;
+        border-radius: 1px;
+        overflow: hidden;
+        color: var(--uui-color-default);
+      }
+
+      #bar,
+      #bar-anim,
+      #bar-background {
+        position: absolute;
+        inset: 0; /* top, left, bottom and right = 0*/
+        height: 100%;
+      }
+
+      #bar-background,
+      #bar {
+        background: currentColor;
+      }
+
+      #bar {
+        transition: max-width 120ms ease;
+      }
+
+      #bar-background {
+        opacity: 0.3;
+      }
+
+      #bar-anim {
+        transform: scaleX(0.4);
+        animation: bar-loading 1s infinite linear;
+        background: linear-gradient(
+          -90deg,
+          white 0%,
+          white 25%,
+          transparent 100%
+        );
+      }
+
+      #bar-anim.animate {
+        background: linear-gradient(
+          -90deg,
+          currentColor 0%,
+          currentColor 25%,
+          transparent 100%
+        );
+      }
+
+      @keyframes bar-loading {
+        0% {
+          transform-origin: -175% 0%;
+        }
+        100% {
+          transform-origin: 175% 0%;
+        }
+      }
+    `
+];
+let UUILoaderBarElement = _UUILoaderBarElement;
+__decorateClass([
+  property({ type: Number })
+], UUILoaderBarElement.prototype, "progress");
+__decorateClass([
+  property({ type: Number })
+], UUILoaderBarElement.prototype, "animationDuration");
+export {
+  UUILoaderBarElement
+};
+//# sourceMappingURL=loader-bar.element.js.map