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

package/dist/components/badge/badge.element.js

@@ -0,0 +1,154 @@
+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 _UUIBadgeElement = class _UUIBadgeElement extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.color = "default";
+    this.look = "primary";
+    this.attention = false;
+  }
+  render() {
+    return html` <slot></slot> `;
+  }
+};
+_UUIBadgeElement.styles = [
+  css`
+      :host {
+        position: var(--uui-badge-position, absolute);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        padding: var(--uui-size-1) var(--uui-size-2);
+        inset: var(--uui-badge-inset, -8px -8px auto auto);
+
+        text-align: center;
+        font-size: var(--uui-badge-font-size, var(--uui-type-small-size));
+        font-weight: 900;
+        line-height: 1;
+
+        margin-right: 0;
+
+        min-width: var(--uui-size-8);
+        min-height: var(--uui-size-8);
+        box-sizing: border-box;
+
+        border-radius: var(--uui-size-4);
+        border: 1px solid transparent;
+      }
+
+      :host {
+        --color: var(--uui-color-default);
+        --color-standalone: var(--uui-color-default-standalone);
+        --color-contrast: var(--uui-color-default-contrast);
+      }
+      :host([color='positive']) {
+        --color: var(--uui-color-positive);
+        --color-standalone: var(--uui-color-positive-standalone);
+        --color-contrast: var(--uui-color-positive-contrast);
+      }
+      :host([color='warning']) {
+        --color: var(--uui-color-warning);
+        --color-standalone: var(--uui-color-warning-standalone);
+        --color-contrast: var(--uui-color-warning-contrast);
+      }
+      :host([color='danger']) {
+        --color: var(--uui-color-danger);
+        --color-standalone: var(--uui-color-danger-standalone);
+        --color-contrast: var(--uui-color-danger-contrast);
+      }
+      :host([color='invalid']) {
+        --color: var(--uui-color-invalid);
+        --color-standalone: var(--uui-color-invalid-standalone);
+        --color-contrast: var(--uui-color-invalid-contrast);
+      }
+
+      :host {
+        background-color: var(--uui-color-surface);
+        color: var(--color-standalone);
+        border-color: transparent;
+      }
+      :host([look='primary']) {
+        background-color: var(--color);
+        color: var(--color-contrast);
+        border-color: transparent;
+      }
+      :host([look='secondary']) {
+        background-color: var(--uui-color-surface-alt);
+        color: var(--color-standalone);
+        border-color: transparent;
+      }
+      :host([look='outline']) {
+        background-color: var(--uui-color-surface);
+        color: var(--color-standalone);
+        border-color: var(--color-standalone);
+      }
+      :host([look='placeholder']) {
+        border-style: dashed;
+        background-color: var(--uui-color-surface);
+        color: var(--color-standalone);
+        border-color: var(--uui-color-border-standalone);
+      }
+
+      /** TODO: we didn't want to target elements by name, but what else can we do? */
+      ::slotted(uui-icon) {
+        margin-left: -0.2em;
+        margin-right: -0.2em;
+      }
+
+      @keyframes --uui-badge-bounce {
+        0% {
+          transform: translateY(0);
+        }
+        20% {
+          transform: translateY(-6px);
+        }
+        40% {
+          transform: translateY(0);
+        }
+        55% {
+          transform: translateY(-3px);
+        }
+        70% {
+          transform: translateY(0);
+        }
+        100% {
+          transform: translateY(0);
+        }
+      }
+      :host([attention]) {
+        animation-duration: 1.4s;
+        animation-iteration-count: infinite;
+        animation-name: --uui-badge-bounce;
+        animation-timing-function: ease;
+      }
+      @media (prefers-reduced-motion) {
+        :host([attention]) {
+          animation: none;
+        }
+      }
+    `
+];
+let UUIBadgeElement = _UUIBadgeElement;
+__decorateClass([
+  property({ reflect: true })
+], UUIBadgeElement.prototype, "color");
+__decorateClass([
+  property({ reflect: true })
+], UUIBadgeElement.prototype, "look");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UUIBadgeElement.prototype, "attention");
+export {
+  UUIBadgeElement
+};
+//# sourceMappingURL=badge.element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.element.js","sources":["../../../src/components/badge/badge.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport type {\n  UUIInterfaceColor,\n  UUIInterfaceLook,\n} from '../../internal/types/index.js';\n\n/**\n *  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`.\n *  @element uui-badge\n *  @slot - The slot for badge contents\n */\n\nexport class UUIBadgeElement extends LitElement {\n  /**\n   * 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.\n   * @type {\"default\" | \"positive\" | \"warning\" | \"danger\"}\n   * @attr\n   * @default \"default\"\n   */\n  @property({ reflect: true })\n  color: UUIInterfaceColor = 'default';\n\n  /**\n   * 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.\n   * @type {\"default\" | \"primary\" | \"secondary\" | \"outline\" | \"placeholder\"}\n   * @attr\n   * @default \"default\"\n   */\n  @property({ reflect: true })\n  look: UUIInterfaceLook = 'primary';\n\n  /**\n   * Bring attention to this badge by applying a bounce animation.\n   * @type boolean\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  attention: boolean = false;\n\n  render() {\n    return html` <slot></slot> `;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        position: var(--uui-badge-position, absolute);\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        padding: var(--uui-size-1) var(--uui-size-2);\n        inset: var(--uui-badge-inset, -8px -8px auto auto);\n\n        text-align: center;\n        font-size: var(--uui-badge-font-size, var(--uui-type-small-size));\n        font-weight: 900;\n        line-height: 1;\n\n        margin-right: 0;\n\n        min-width: var(--uui-size-8);\n        min-height: var(--uui-size-8);\n        box-sizing: border-box;\n\n        border-radius: var(--uui-size-4);\n        border: 1px solid transparent;\n      }\n\n      :host {\n        --color: var(--uui-color-default);\n        --color-standalone: var(--uui-color-default-standalone);\n        --color-contrast: var(--uui-color-default-contrast);\n      }\n      :host([color='positive']) {\n        --color: var(--uui-color-positive);\n        --color-standalone: var(--uui-color-positive-standalone);\n        --color-contrast: var(--uui-color-positive-contrast);\n      }\n      :host([color='warning']) {\n        --color: var(--uui-color-warning);\n        --color-standalone: var(--uui-color-warning-standalone);\n        --color-contrast: var(--uui-color-warning-contrast);\n      }\n      :host([color='danger']) {\n        --color: var(--uui-color-danger);\n        --color-standalone: var(--uui-color-danger-standalone);\n        --color-contrast: var(--uui-color-danger-contrast);\n      }\n      :host([color='invalid']) {\n        --color: var(--uui-color-invalid);\n        --color-standalone: var(--uui-color-invalid-standalone);\n        --color-contrast: var(--uui-color-invalid-contrast);\n      }\n\n      :host {\n        background-color: var(--uui-color-surface);\n        color: var(--color-standalone);\n        border-color: transparent;\n      }\n      :host([look='primary']) {\n        background-color: var(--color);\n        color: var(--color-contrast);\n        border-color: transparent;\n      }\n      :host([look='secondary']) {\n        background-color: var(--uui-color-surface-alt);\n        color: var(--color-standalone);\n        border-color: transparent;\n      }\n      :host([look='outline']) {\n        background-color: var(--uui-color-surface);\n        color: var(--color-standalone);\n        border-color: var(--color-standalone);\n      }\n      :host([look='placeholder']) {\n        border-style: dashed;\n        background-color: var(--uui-color-surface);\n        color: var(--color-standalone);\n        border-color: var(--uui-color-border-standalone);\n      }\n\n      /** TODO: we didn't want to target elements by name, but what else can we do? */\n      ::slotted(uui-icon) {\n        margin-left: -0.2em;\n        margin-right: -0.2em;\n      }\n\n      @keyframes --uui-badge-bounce {\n        0% {\n          transform: translateY(0);\n        }\n        20% {\n          transform: translateY(-6px);\n        }\n        40% {\n          transform: translateY(0);\n        }\n        55% {\n          transform: translateY(-3px);\n        }\n        70% {\n          transform: translateY(0);\n        }\n        100% {\n          transform: translateY(0);\n        }\n      }\n      :host([attention]) {\n        animation-duration: 1.4s;\n        animation-iteration-count: infinite;\n        animation-name: --uui-badge-bounce;\n        animation-timing-function: ease;\n      }\n      @media (prefers-reduced-motion) {\n        :host([attention]) {\n          animation: none;\n        }\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAaO,MAAM,mBAAN,MAAM,yBAAwB,WAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA;AAQL,SAAA,QAA2B;AAS3B,SAAA,OAAyB;AASzB,SAAA,YAAqB;AAAA,EAAA;AAAA,EAErB,SAAS;AACP,WAAO;AAAA,EACT;AAwHF;AAtHE,iBAAyB,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAjCG,IAAM,kBAAN;AAQL,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAA,CAAM;AAAA,GAPhB,gBAQX,WAAA,OAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAA,CAAM;AAAA,GAhBhB,gBAiBX,WAAA,MAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAzB/B,gBA0BX,WAAA,WAAA;"}

package/dist/components/badge/badge.js

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

package/dist/components/badge/badge.js.map

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

package/dist/components/boolean-input/UUIBooleanInputEvent.d.ts

@@ -0,0 +1,6 @@
+import { UUIEvent } from '../../internal/events/index.js';
+import type { UUIBooleanInputElement } from './boolean-input.element.js';
+export declare class UUIBooleanInputEvent extends UUIEvent<{}, UUIBooleanInputElement> {
+    static readonly CHANGE: string;
+    constructor(evName: string, eventInit?: any);
+}

package/dist/components/boolean-input/UUIBooleanInputEvent.js

@@ -0,0 +1,15 @@
+import { UUIEvent } from "../../internal/events/UUIEvent.js";
+const _UUIBooleanInputEvent = class _UUIBooleanInputEvent extends UUIEvent {
+  constructor(evName, eventInit = {}) {
+    super(evName, {
+      bubbles: true,
+      ...eventInit
+    });
+  }
+};
+_UUIBooleanInputEvent.CHANGE = "change";
+let UUIBooleanInputEvent = _UUIBooleanInputEvent;
+export {
+  UUIBooleanInputEvent
+};
+//# sourceMappingURL=UUIBooleanInputEvent.js.map

package/dist/components/boolean-input/UUIBooleanInputEvent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UUIBooleanInputEvent.js","sources":["../../../src/components/boolean-input/UUIBooleanInputEvent.ts"],"sourcesContent":["import { UUIEvent } from '../../internal/events/index.js';\nimport type { UUIBooleanInputElement } from './boolean-input.element.js';\n\nexport class UUIBooleanInputEvent extends UUIEvent<{}, UUIBooleanInputElement> {\n  public static readonly CHANGE: string = 'change';\n\n  constructor(evName: string, eventInit: any = {}) {\n    super(evName, {\n      bubbles: true,\n      ...eventInit,\n    });\n  }\n}\n"],"names":[],"mappings":";AAGO,MAAM,wBAAN,MAAM,8BAA6B,SAAqC;AAAA,EAG7E,YAAY,QAAgB,YAAiB,IAAI;AAC/C,UAAM,QAAQ;AAAA,MACZ,SAAS;AAAA,MACT,GAAG;AAAA,IAAA,CACJ;AAAA,EACH;AACF;AARE,sBAAuB,SAAiB;AADnC,IAAM,uBAAN;"}

package/dist/components/boolean-input/boolean-input.d.ts

@@ -0,0 +1,3 @@
+export * from './boolean-input.element.js';
+export * from './UUIBooleanInputEvent.js';
+export { UUIBooleanInputElement as default } from './boolean-input.element.js';

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

@@ -0,0 +1,77 @@
+import type { TemplateResult } from 'lit';
+import { LitElement } from 'lit';
+type LabelPosition = 'left' | 'right' | 'top' | 'bottom';
+declare const UUIBooleanInputElement_base: (new (...args: any[]) => import("../../index.js").UUIFormControlWithBasicsMixinElement<FormDataEntryValue | FormData>) & (new (...args: any[]) => import("../../index.js").UUILabelMixinInterface) & typeof LitElement;
+/**
+ * Base class wrapping native input type="checkbox". Extend for custom boolean input.
+ * @extends LabelMixin
+ * @fires UUIBooleanInputEvent#change on change
+ * @abstract
+ */
+export declare abstract class UUIBooleanInputElement extends UUIBooleanInputElement_base {
+    #private;
+    private _value;
+    /** intentional overwrite of FormControlMixins value getter and setter method. */
+    get value(): string;
+    set value(newVal: string);
+    /**
+     * Specifies the label position of the checkbox or the toggle
+     * @type {'left' | 'right' | 'top' | 'bottom'}
+     * @attr label-position
+     * @default right
+     */
+    labelPosition: LabelPosition;
+    private _checked;
+    /**
+     * Reflects the state of the element.
+     * True if checkbox or toggle is checked. Change this to switch the state programmatically.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    get checked(): boolean;
+    set checked(newVal: boolean);
+    /**
+     * Indeterminate state for the input.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    indeterminate: boolean;
+    /**
+     * Disables the input.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
+     * @type {boolean}
+     * @attr
+     * @default false
+     */
+    readonly: boolean;
+    protected readonly _input: HTMLInputElement;
+    private readonly inputRole;
+    constructor(inputRole?: 'checkbox' | 'switch');
+    protected getFormElement(): HTMLInputElement;
+    hasValue(): boolean;
+    formResetCallback(): void;
+    /**
+     * This method enables <label for="..."> to focus the input
+     */
+    focus(): Promise<void>;
+    click(): Promise<void>;
+    private _onInputChange;
+    /**
+     * When extending UUIBooleanInputBase class you need to implement this abstract method. It should return a template of your input.
+     * @returns {TemplateResult}
+     * @abstract
+     * @method
+     */
+    protected abstract renderCheckbox(): TemplateResult;
+    render(): TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}
+export {};

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

@@ -0,0 +1,196 @@
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _UUIBooleanInputElement_instances, onKeyDown_fn;
+import { LitElement, html, css } from "lit";
+import { property, query } from "lit/decorators.js";
+import { UUIBooleanInputEvent } from "./UUIBooleanInputEvent.js";
+import { UUIFormControlWithBasicsMixin } from "../../internal/mixins/FormControlWithBasicsMixin.js";
+import { LabelMixin } from "../../internal/mixins/LabelMixin.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 _UUIBooleanInputElement = class _UUIBooleanInputElement extends UUIFormControlWithBasicsMixin(
+  LabelMixin("", LitElement),
+  ""
+) {
+  constructor(inputRole = "checkbox") {
+    super();
+    __privateAdd(this, _UUIBooleanInputElement_instances);
+    this._value = "";
+    this.labelPosition = "right";
+    this._checked = false;
+    this.indeterminate = false;
+    this.disabled = false;
+    this.readonly = false;
+    if (this._value === "") {
+      this._value = "on";
+    }
+    this.inputRole = inputRole;
+    this.addEventListener("keydown", __privateMethod(this, _UUIBooleanInputElement_instances, onKeyDown_fn));
+  }
+  /** intentional overwrite of FormControlMixins value getter and setter method. */
+  get value() {
+    return this._value;
+  }
+  set value(newVal) {
+    const oldValue = super.value;
+    this._value = newVal;
+    this._internals.setFormValue(
+      this._checked && this.name !== "" ? this._value : null
+    );
+    this.requestUpdate("value", oldValue);
+  }
+  // Do not 'reflect' as the attribute is used as fallback.
+  get checked() {
+    return this._checked;
+  }
+  set checked(newVal) {
+    const oldValue = this._checked;
+    this._checked = newVal;
+    this._internals.setFormValue(
+      this._checked && this.name !== "" ? this._value || "on" : null
+    );
+    this.requestUpdate("checked", oldValue);
+  }
+  getFormElement() {
+    return this._input;
+  }
+  hasValue() {
+    return this.checked;
+  }
+  formResetCallback() {
+    super.formResetCallback();
+    this.checked = this.hasAttribute("checked");
+  }
+  /**
+   * This method enables <label for="..."> to focus the input
+   */
+  async focus() {
+    await this.updateComplete;
+    this._input.focus();
+  }
+  async click() {
+    await this.updateComplete;
+    this._input.click();
+  }
+  _onInputChange(e) {
+    e.stopPropagation();
+    this.pristine = false;
+    this.checked = this._input.checked;
+    this.indeterminate = this._input.indeterminate;
+    this.dispatchEvent(new UUIBooleanInputEvent(UUIBooleanInputEvent.CHANGE));
+  }
+  render() {
+    return html`
+      <label>
+        <input
+          id="input"
+          type="checkbox"
+          @change="${this._onInputChange}"
+          .disabled=${this.disabled || this.readonly}
+          .checked=${this.checked}
+          .indeterminate=${this.indeterminate}
+          aria-checked="${this.checked ? "true" : "false"}"
+          aria-label=${this.label}
+          role="${this.inputRole}" />
+        ${this.renderCheckbox()} ${this.renderLabel()}
+      </label>
+    `;
+  }
+};
+_UUIBooleanInputElement_instances = new WeakSet();
+onKeyDown_fn = function(e) {
+  if (e.key == "Enter") {
+    this.submit();
+  }
+};
+_UUIBooleanInputElement.styles = [
+  css`
+      :host {
+        display: inline-block;
+      }
+
+      label {
+        position: relative;
+        cursor: pointer;
+        user-select: none;
+        display: flex;
+        flex-wrap: nowrap;
+        align-items: center;
+        justify-items: center;
+        gap: var(--uui-size-3);
+      }
+
+      :host([readonly]) label {
+        cursor: default;
+      }
+
+      input {
+        position: absolute;
+        height: 0px;
+        width: 0px;
+        opacity: 0;
+      }
+
+      :host([label-position='left']) label {
+        flex-direction: row-reverse;
+      }
+
+      :host([label-position='top']) label {
+        gap: var(--uui-size-half-base-unit);
+        flex-direction: column-reverse;
+      }
+
+      :host([label-position='bottom']) label {
+        gap: var(--uui-size-half-base-unit);
+        flex-direction: column;
+      }
+
+      :host([disabled]) label {
+        cursor: not-allowed;
+        opacity: 0.5;
+      }
+
+      .label {
+        display: block;
+      }
+
+      span.label:empty {
+        display: none;
+      }
+    `
+];
+let UUIBooleanInputElement = _UUIBooleanInputElement;
+__decorateClass([
+  property({ type: String, attribute: "label-position", reflect: true })
+], UUIBooleanInputElement.prototype, "labelPosition", 2);
+__decorateClass([
+  property({ type: Boolean })
+], UUIBooleanInputElement.prototype, "checked", 1);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UUIBooleanInputElement.prototype, "indeterminate", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UUIBooleanInputElement.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UUIBooleanInputElement.prototype, "readonly", 2);
+__decorateClass([
+  query("#input")
+], UUIBooleanInputElement.prototype, "_input", 2);
+export {
+  UUIBooleanInputElement
+};
+//# sourceMappingURL=boolean-input.element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"boolean-input.element.js","sources":["../../../src/components/boolean-input/boolean-input.element.ts"],"sourcesContent":["import {\n  UUIFormControlWithBasicsMixin,\n  LabelMixin,\n} from '../../internal/mixins/index.js';\nimport type { TemplateResult } from 'lit';\nimport { css, html, LitElement } from 'lit';\nimport { property, query } from 'lit/decorators.js';\n\nimport { UUIBooleanInputEvent } from './UUIBooleanInputEvent.js';\n\ntype LabelPosition = 'left' | 'right' | 'top' | 'bottom';\n\n/**\n * Base class wrapping native input type=\"checkbox\". Extend for custom boolean input.\n * @extends LabelMixin\n * @fires UUIBooleanInputEvent#change on change\n * @abstract\n */\nexport abstract class UUIBooleanInputElement extends UUIFormControlWithBasicsMixin(\n  LabelMixin('', LitElement),\n  '',\n) {\n  private _value = '';\n\n  /** intentional overwrite of FormControlMixins value getter and setter method. */\n  get value() {\n    return this._value;\n  }\n  set value(newVal: string) {\n    const oldValue = super.value;\n    this._value = newVal;\n    this._internals.setFormValue(\n      this._checked && this.name !== '' ? this._value : null,\n    );\n\n    this.requestUpdate('value', oldValue);\n  }\n\n  /**\n   * Specifies the label position of the checkbox or the toggle\n   * @type {'left' | 'right' | 'top' | 'bottom'}\n   * @attr label-position\n   * @default right\n   */\n  @property({ type: String, attribute: 'label-position', reflect: true })\n  labelPosition: LabelPosition = 'right';\n\n  private _checked = false;\n\n  /**\n   * Reflects the state of the element.\n   * True if checkbox or toggle is checked. Change this to switch the state programmatically.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean }) // Do not 'reflect' as the attribute is used as fallback.\n  get checked() {\n    return this._checked;\n  }\n  set checked(newVal) {\n    const oldValue = this._checked;\n    this._checked = newVal;\n    this._internals.setFormValue(\n      this._checked && this.name !== '' ? this._value || 'on' : null,\n    );\n    this.requestUpdate('checked', oldValue);\n  }\n\n  /**\n   * Indeterminate state for the input.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  indeterminate = false;\n\n  /**\n   * Disables the input.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  @query('#input')\n  protected readonly _input!: HTMLInputElement;\n\n  private readonly inputRole: 'checkbox' | 'switch';\n\n  constructor(inputRole: 'checkbox' | 'switch' = 'checkbox') {\n    super();\n    if (this._value === '') {\n      this._value = 'on';\n    }\n    this.inputRole = inputRole;\n    this.addEventListener('keydown', this.#onKeyDown);\n  }\n\n  protected getFormElement(): HTMLInputElement {\n    return this._input;\n  }\n\n  #onKeyDown(e: KeyboardEvent): void {\n    if (e.key == 'Enter') {\n      this.submit();\n    }\n  }\n\n  public hasValue(): boolean {\n    return this.checked;\n  }\n\n  public formResetCallback() {\n    super.formResetCallback();\n    this.checked = this.hasAttribute('checked');\n  }\n\n  /**\n   * This method enables <label for=\"...\"> to focus the input\n   */\n  async focus() {\n    await this.updateComplete;\n    this._input.focus();\n  }\n  async click() {\n    await this.updateComplete;\n    this._input.click();\n  }\n\n  private _onInputChange(e: Event) {\n    e.stopPropagation();\n    this.pristine = false;\n    this.checked = this._input.checked;\n    this.indeterminate = this._input.indeterminate;\n    this.dispatchEvent(new UUIBooleanInputEvent(UUIBooleanInputEvent.CHANGE));\n  }\n\n  /**\n   * When extending UUIBooleanInputBase class you need to implement this abstract method. It should return a template of your input.\n   * @returns {TemplateResult}\n   * @abstract\n   * @method\n   */\n  protected abstract renderCheckbox(): TemplateResult;\n\n  render() {\n    return html`\n      <label>\n        <input\n          id=\"input\"\n          type=\"checkbox\"\n          @change=\"${this._onInputChange}\"\n          .disabled=${this.disabled || this.readonly}\n          .checked=${this.checked}\n          .indeterminate=${this.indeterminate}\n          aria-checked=\"${this.checked ? 'true' : 'false'}\"\n          aria-label=${this.label}\n          role=\"${this.inputRole}\" />\n        ${this.renderCheckbox()} ${this.renderLabel()}\n      </label>\n    `;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: inline-block;\n      }\n\n      label {\n        position: relative;\n        cursor: pointer;\n        user-select: none;\n        display: flex;\n        flex-wrap: nowrap;\n        align-items: center;\n        justify-items: center;\n        gap: var(--uui-size-3);\n      }\n\n      :host([readonly]) label {\n        cursor: default;\n      }\n\n      input {\n        position: absolute;\n        height: 0px;\n        width: 0px;\n        opacity: 0;\n      }\n\n      :host([label-position='left']) label {\n        flex-direction: row-reverse;\n      }\n\n      :host([label-position='top']) label {\n        gap: var(--uui-size-half-base-unit);\n        flex-direction: column-reverse;\n      }\n\n      :host([label-position='bottom']) label {\n        gap: var(--uui-size-half-base-unit);\n        flex-direction: column;\n      }\n\n      :host([disabled]) label {\n        cursor: not-allowed;\n        opacity: 0.5;\n      }\n\n      .label {\n        display: block;\n      }\n\n      span.label:empty {\n        display: none;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":"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"}

package/dist/components/box/box.d.ts

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

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

@@ -0,0 +1,48 @@
+import { LitElement } from 'lit';
+import type { UUIInterfaceHeading } from '../../internal/index.js';
+/**
+ *  A layout box for grouping elements, as well its possible to append a header, with a headline or other elements to the box.
+ *  @element uui-box
+ *  @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.
+ *  @slot header - header area, use this for things that are not the headline but are located in the header.
+ *  @slot header-actions - right-side of the box header, use this to append some actions that are general for the topic of this box.
+ *  @slot - area for the content of the box
+ *  @cssprop --uui-box-header-padding - overwrite the header padding
+ *  @cssprop --uui-box-default-padding - overwrite the box padding
+ *  @cssprop --uui-box-border-radius - overwrite the box border-radius, default is var(--uui-border-radius-3)
+ *  @cssprop --uui-box-border-color - overwrites the box border colorm default is var(--uui-color-divider-standalone)
+ */
+export declare class UUIBoxElement extends LitElement {
+    /**
+     * Headline for this box, can also be set via the `headline` slot.
+     * @type string
+     * @attr
+     * @default null
+     */
+    headline: string | null;
+    /**
+     * Changes the headline variant for accessibility for this box.
+     * Notice this does not change the visual representation of the headline. (Umbraco recommends displaying a h5 size headline in the UUI-BOX)
+     * @type {"h1" | "h2" | "h3" | "h4" | "h5" | "h6"}
+     * @attr
+     * @default "h5"
+     */
+    set headlineVariant(value: UUIInterfaceHeading);
+    get headlineVariant(): UUIInterfaceHeading;
+    private _headlineVariantTag;
+    private _headlineSlotHasContent;
+    private readonly _headlineSlotChanged;
+    private _headerSlotHasContent;
+    private readonly _headerSlotChanged;
+    private _headerActionsSlotHasContent;
+    private readonly _headerActionsSlotChanged;
+    /**
+     * Renders a header with the `header`-slot, `header-actions`-slot, headline and `headline`-slot within
+     * @returns {TemplateResult}
+     * @protected
+     * @method
+     */
+    protected renderHeader(): import("lit-html").TemplateResult;
+    render(): import("lit-html").TemplateResult;
+    static readonly styles: import("lit").CSSResult[];
+}