@universal-material/web 3.0.140 → 3.0.142

package/dialog/dialog.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.styles.js","sourceRoot":"","sources":["../../src/dialog/dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkKzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    --u-elevation-level: var(--u-dialog-elevation, 3);\n    --_icon-size: var(--u-dialog-icon-size, 24px);\n    --_divider-color: var(--u-dialog-divider-color, var(--u-color-outline-variant, rgb(202, 196, 208)));\n    --_scrim-opacity: var(--u-dialog-scrim-opacity, .32);\n    --_padding: var(--u-dialog-padding, 24px);\n  }\n\n  :host(:not([has-headline])) .headline {\n    display: none;\n  }\n\n  :host([has-icon]) .icon {\n    display: flex;\n  }\n  :host([has-icon]) .headline {\n    padding-top: 0;\n  }\n  :host([has-icon]) .headline,\n  :host([has-icon]) .container {\n    text-align: center;\n  }\n\n  :host([has-headline]) .content.top-divider,\n  :host([has-icon]) .content.top-divider {\n    border-top: 1px solid var(--_divider-color);\n    margin-top: -1px;\n  }\n\n  .scrim {\n    position: fixed;\n    inset: 0;\n    background-color: var(--u-dialog-scrim-color, var(--u-color-scrim, rgb(0, 0, 0)));\n    animation: scrim-show-animation 300ms;\n    animation-fill-mode: forwards;\n    z-index: -1;\n  }\n\n  dialog {\n    align-items: center;\n    background: none;\n    border: none;\n    overflow: visible;\n    padding: var(--_padding);\n    max-width: none;\n    max-height: none;\n    width: 100%;\n    height: 100%;\n  }\n  dialog[open] {\n    display: flex;\n  }\n  dialog::backdrop {\n    background: none;\n  }\n\n  .container {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    margin-inline: auto;\n    background-color: var(--u-dialog-container-bg-color, var(--u-color-surface-container-high, rgb(236, 230, 240)));\n    border-radius: var(--u-dialog-border-radius, var(--u-shape-corner-extra-large, 28px));\n    min-width: min(var(--u-dialog-min-width, 280px), 100%);\n    max-width: var(--u-dialog-max-width, 560px);\n    max-height: min(var(--u-dialog-max-height, 560px), 100%);\n    animation: show 250ms cubic-bezier(0.19, 1, 0.22, 1);\n    z-index: 1;\n  }\n\n  .headline,\n  .icon,\n  .content,\n  .actions {\n    padding: var(--_padding);\n  }\n\n  .headline {\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-dialog-headline-line-height, var(--u-headline-s-line-height, 2rem));\n    font-size: var(--u-dialog-headline-font-size, var(--u-headline-s-font-size, 1.5rem));\n    letter-spacing: var(--u-dialog-headline-letter-spacing, var(--u-headline-s-letter-spacing, 0rem));\n    font-weight: var(--u-dialog-headline-font-weight, var(--u-headline-s-font-weight, var(--u-font-weight-regular, 400)));\n    padding-bottom: var(--u-headline-padding, 16px);\n  }\n\n  .icon {\n    display: none;\n    justify-content: center;\n    align-items: center;\n    font-size: var(--_icon-size);\n    line-height: var(--_icon-size);\n    color: var(--u-dialog-icon-color, var(--u-color-secondary, rgb(98, 91, 113)));\n    padding-bottom: var(--u-icon-padding, 16px);\n  }\n\n  .content {\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-dialog-content-line-height, var(--u-body-m-line-height, 1.25rem));\n    font-size: var(--u-dialog-content-font-size, var(--u-body-m-font-size, 0.875rem));\n    letter-spacing: var(--u-dialog-content-letter-spacing, var(--u-body-m-letter-spacing, 0.0178571429rem));\n    font-weight: var(--u-dialog-content-font-weight, var(--u-body-m-font-weight, var(--u-font-weight-regular, 400)));\n    color: var(--u-dialog-content-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n    padding-block: 0;\n    overflow: auto;\n  }\n  .content.bottom-divider {\n    border-bottom: 1px solid var(--_divider-color);\n    margin-bottom: -1px;\n  }\n\n  :host(:not([has-headline]):not([has-icon])) .content {\n    padding-top: var(--_padding);\n  }\n\n  .actions {\n    display: flex;\n    flex-direction: row-reverse;\n    flex-wrap: wrap-reverse;\n    gap: var(--u-dialog-actions-gap, 8px);\n  }\n\n  :host(.closing) .container {\n    animation-name: close;\n  }\n  :host(.closing) .scrim {\n    animation-name: scrim-close-animation;\n  }\n\n  @keyframes scrim-show-animation {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: var(--_scrim-opacity);\n    }\n  }\n  @keyframes scrim-close-animation {\n    from {\n      opacity: var(--_scrim-opacity);\n    }\n    to {\n      opacity: 0;\n    }\n  }\n  @keyframes show {\n    from {\n      transform: scale3d(0, 0, 1);\n    }\n    to {\n      transform: scale3d(1, 1, 1);\n    }\n  }\n  @keyframes close {\n    from {\n      transform: scale3d(1, 1, 1);\n    }\n    to {\n      transform: scale3d(0, 0, 1);\n    }\n  }\n`;\n"]}

package/dialog/message-dialog-builder.d.ts

@@ -0,0 +1,10 @@
+import { DialogBuilder } from './dialog-builder.js';
+import { DialogButtonDef } from './dialog-button-def.js';
+import { UmDialog } from './dialog.js';
+export declare class MessageDialogBuilder extends DialogBuilder<MessageDialogBuilder, void> {
+    #private;
+    static create(message: string): MessageDialogBuilder;
+    acknowledgeButton(acknowledgeButtonDef: DialogButtonDef): MessageDialogBuilder;
+    addButtons(dialog: UmDialog): void;
+}
+//# sourceMappingURL=message-dialog-builder.d.ts.map

package/dialog/message-dialog-builder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-dialog-builder.d.ts","sourceRoot":"","sources":["../../src/dialog/message-dialog-builder.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,qBAAa,oBAAqB,SAAQ,aAAa,CAAC,oBAAoB,EAAE,IAAI,CAAC;;IACjF,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,GAAG,oBAAoB;IAMpD,iBAAiB,CAAC,oBAAoB,EAAE,eAAe,GAAG,oBAAoB;IAKrE,UAAU,CAAC,MAAM,EAAE,QAAQ,GAAG,IAAI;CAO5C"}

package/dialog/message-dialog-builder.js

@@ -0,0 +1,16 @@
+import { config } from '../config.js';
+import { DialogBuilder } from './dialog-builder.js';
+export class MessageDialogBuilder extends DialogBuilder {
+    static create(message) {
+        return new MessageDialogBuilder(message);
+    }
+    #acknowledgeButtonDef;
+    acknowledgeButton(acknowledgeButtonDef) {
+        this.#acknowledgeButtonDef = acknowledgeButtonDef;
+        return this;
+    }
+    addButtons(dialog) {
+        this.addButton(dialog, { ...config.dialog.alertDefaults.acknowledgeButton, ...this.#acknowledgeButtonDef }, () => dialog.close());
+    }
+}
+//# sourceMappingURL=message-dialog-builder.js.map

package/dialog/message-dialog-builder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-dialog-builder.js","sourceRoot":"","sources":["../../src/dialog/message-dialog-builder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAIpD,MAAM,OAAO,oBAAqB,SAAQ,aAAyC;IACjF,MAAM,CAAC,MAAM,CAAC,OAAe;QAC3B,OAAO,IAAI,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAC3C,CAAC;IAED,qBAAqB,CAAmB;IAExC,iBAAiB,CAAC,oBAAqC;QACrD,IAAI,CAAC,qBAAqB,GAAG,oBAAoB,CAAC;QAClD,OAAO,IAAI,CAAC;IACd,CAAC;IAEQ,UAAU,CAAC,MAAgB;QAElC,IAAI,CAAC,SAAS,CACZ,MAAM,EACN,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,iBAAiB,EAAE,GAAG,IAAI,CAAC,qBAAqB,EAAE,EACnF,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;IAC1B,CAAC;CACF","sourcesContent":["import { config } from '../config.js';\nimport { DialogBuilder } from './dialog-builder.js';\nimport { DialogButtonDef } from './dialog-button-def.js';\nimport { UmDialog } from './dialog.js';\n\nexport class MessageDialogBuilder extends DialogBuilder<MessageDialogBuilder, void> {\n  static create(message: string): MessageDialogBuilder {\n    return new MessageDialogBuilder(message);\n  }\n\n  #acknowledgeButtonDef?: DialogButtonDef;\n\n  acknowledgeButton(acknowledgeButtonDef: DialogButtonDef): MessageDialogBuilder {\n    this.#acknowledgeButtonDef = acknowledgeButtonDef;\n    return this;\n  }\n\n  override addButtons(dialog: UmDialog): void {\n\n    this.addButton(\n      dialog,\n      { ...config.dialog.alertDefaults.acknowledgeButton, ...this.#acknowledgeButtonDef },\n      () => dialog.close());\n  }\n}\n"]}

package/elevation/elevation.d.ts

@@ -0,0 +1,11 @@
+import { LitElement } from 'lit';
+export declare class UmElevation extends LitElement {
+    static styles: import("lit").CSSResult;
+    connectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-elevation': UmElevation;
+    }
+}
+//# sourceMappingURL=elevation.d.ts.map

package/elevation/elevation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"elevation.d.ts","sourceRoot":"","sources":["../../src/elevation/elevation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,0BAAU;IAEvB,iBAAiB;CAI3B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,WAAW,CAAC;KAC5B;CACF"}

package/elevation/elevation.js

@@ -0,0 +1,16 @@
+import { __decorate } from "tslib";
+import { LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { styles } from './elevation.styles.js';
+let UmElevation = class UmElevation extends LitElement {
+    static { this.styles = styles; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.ariaHidden = 'true';
+    }
+};
+UmElevation = __decorate([
+    customElement('u-elevation')
+], UmElevation);
+export { UmElevation };
+//# sourceMappingURL=elevation.js.map

package/elevation/elevation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elevation.js","sourceRoot":"","sources":["../../src/elevation/elevation.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAGxC,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;aACzB,WAAM,GAAG,MAAM,AAAT,CAAU;IAEvB,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC;IAC3B,CAAC;;AANU,WAAW;IADvB,aAAa,CAAC,aAAa,CAAC;GAChB,WAAW,CAOvB","sourcesContent":["import { LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\nimport { styles } from './elevation.styles.js';\n\n@customElement('u-elevation')\nexport class UmElevation extends LitElement {\n  static override styles = styles;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.ariaHidden = 'true';\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-elevation': UmElevation;\n  }\n}\n"]}

package/elevation/elevation.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=elevation.styles.d.ts.map

package/elevation/elevation.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"elevation.styles.d.ts","sourceRoot":"","sources":["../../src/elevation/elevation.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAyBlB,CAAC"}

package/elevation/elevation.styles.js

@@ -0,0 +1,28 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    --_level: var(--u-elevation-level, 0);
+    --_shadow-color: var(--u-color-shadow, rgb(0, 0, 0));
+    -webkit-tap-highlight-color: transparent;
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+  }
+  :host::before, :host::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    transition: box-shadow 150ms ease-in-out;
+  }
+  :host::before {
+    box-shadow: 0 calc(1px * (clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 3, 1) + 2 * clamp(0, var(--_level) - 4, 1))) calc(1px * (2 * clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 2, 1) + clamp(0, var(--_level) - 4, 1))) 0 var(--_shadow-color);
+    opacity: 0.3;
+  }
+  :host::after {
+    box-shadow: 0 calc(1px * (clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 1, 1) + 2 * clamp(0, var(--_level) - 2, 3))) calc(1px * (3 * clamp(0, var(--_level), 2) + 2 * clamp(0, var(--_level) - 2, 3))) calc(1px * (clamp(0, var(--_level), 4) + 2 * clamp(0, var(--_level) - 4, 1))) var(--_shadow-color);
+    opacity: 0.15;
+  }
+`;
+//# sourceMappingURL=elevation.styles.js.map

package/elevation/elevation.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elevation.styles.js","sourceRoot":"","sources":["../../src/elevation/elevation.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;CAyBzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    --_level: var(--u-elevation-level, 0);\n    --_shadow-color: var(--u-color-shadow, rgb(0, 0, 0));\n    -webkit-tap-highlight-color: transparent;\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    pointer-events: none;\n  }\n  :host::before, :host::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    transition: box-shadow 150ms ease-in-out;\n  }\n  :host::before {\n    box-shadow: 0 calc(1px * (clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 3, 1) + 2 * clamp(0, var(--_level) - 4, 1))) calc(1px * (2 * clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 2, 1) + clamp(0, var(--_level) - 4, 1))) 0 var(--_shadow-color);\n    opacity: 0.3;\n  }\n  :host::after {\n    box-shadow: 0 calc(1px * (clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 1, 1) + 2 * clamp(0, var(--_level) - 2, 3))) calc(1px * (3 * clamp(0, var(--_level), 2) + 2 * clamp(0, var(--_level) - 2, 3))) calc(1px * (clamp(0, var(--_level), 4) + 2 * clamp(0, var(--_level) - 4, 1))) var(--_shadow-color);\n    opacity: 0.15;\n  }\n`;\n"]}

package/field/field-base.d.ts

@@ -0,0 +1,68 @@
+import { Context, ContextProvider } from '@lit/context';
+import { CSSResultGroup } from '@lit/reactive-element/css-tag';
+import { LitElement, nothing, TemplateResult } from 'lit';
+import { UmFieldDefaults } from './field-defaults.js';
+export declare abstract class UmFieldBase extends LitElement {
+    static styles: CSSResultGroup;
+    private readonly config;
+    variant: 'filled' | 'outlined' | undefined;
+    /**
+     * The floating label for the field
+     */
+    label: string | undefined;
+    protected _innerCounter: string | undefined;
+    counter: string | undefined;
+    hideCounter: boolean;
+    /**
+     * Supporting text conveys additional information about the field, such as how it will be used
+     */
+    supportingText: string | undefined;
+    /**
+     * For text fields that validate their content (such as passwords), replace supporting text with error text when applicable.
+     * If `errorText` is not an empty string, changing the property `invalid` to `true` will show the `errorText` instead of `supportingText`
+     */
+    errorText: string | undefined;
+    /**
+     * Whether the field is empty or not. This changes the behavior of the floating label when the field is not focused.
+     */
+    empty: boolean;
+    disabled: boolean;
+    /**
+     * Get or sets where or not the field is in a visually invalid state.
+     */
+    invalid: boolean;
+    static setDefaults(contextRoot: HTMLElement, config: UmFieldDefaults): ContextProvider<Context<HTMLElement, UmFieldDefaults>>;
+    /**
+     * Whether the field has a leading icon or not
+     *
+     * _Note:_ Readonly
+     */
+    hasLeadingIcon: boolean;
+    /**
+     * Whether the field has a trailing icon or not
+     *
+     * _Note:_ Readonly
+     */
+    hasTrailingIcon: boolean;
+    /**
+     * Whether the field has an error text or not
+     *
+     * _Note:_ Readonly
+     */
+    hasErrorText: boolean;
+    private readonly assignedLeadingIcons;
+    private readonly assignedTrailingIcons;
+    private readonly assignedErrorTexts;
+    private readonly _labelElement;
+    protected _container: HTMLElement;
+    constructor();
+    protected render(): TemplateResult;
+    protected abstract renderControl(): TemplateResult;
+    protected renderAfterContent(): TemplateResult;
+    connectedCallback(): void;
+    private handleLeadingIconSlotChange;
+    private handleTrailingIconSlotChange;
+    private handleErrorTextSlotChange;
+    protected renderDefaultTrailingIcon(): TemplateResult | typeof nothing;
+}
+//# sourceMappingURL=field-base.d.ts.map

package/field/field-base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-base.d.ts","sourceRoot":"","sources":["../../src/field/field-base.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAE/D,OAAO,EAAQ,UAAU,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAOhE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,8BAAsB,WAAY,SAAQ,UAAU;IAClD,OAAgB,MAAM,EAAE,cAAc,CAAwB;IAI9D,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA8B;IAEzC,OAAO,EAAE,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAY;IAElE;;OAEG;IAEH,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAEjB,SAAS,CAAC,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAEgB,WAAW,UAAS;IAE5E;;OAEG;IACyC,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;IAE/E;;;OAGG;IACoC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAErE;;OAEG;IACyC,KAAK,UAAS;IACd,QAAQ,UAAS;IAE7D;;OAEG;IACyC,OAAO,UAAS;IAE5D,MAAM,CAAC,WAAW,CAChB,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,eAAe,GACtB,eAAe,CAAC,OAAO,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;IAOzD;;;;OAIG;IAEH,cAAc,UAAS;IAEvB;;;;OAIG;IAEH,eAAe,UAAS;IAExB;;;;OAIG;IAEH,YAAY,UAAS;IAGrB,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAAiB;IAGtD,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAAiB;IAGvD,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAiB;IAE7B,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAe;IACzC,SAAS,CAAC,UAAU,EAAG,WAAW,CAAC;;cAO3C,MAAM,IAAI,cAAc;IA+C3C,SAAS,CAAC,QAAQ,CAAC,aAAa,IAAI,cAAc;IAElD,SAAS,CAAC,kBAAkB,IAAI,cAAc;IAIrC,iBAAiB;IAK1B,OAAO,CAAC,2BAA2B;IASnC,OAAO,CAAC,4BAA4B;IAIpC,OAAO,CAAC,yBAAyB;IAIjC,SAAS,CAAC,yBAAyB,IAAI,cAAc,GAAG,OAAO,OAAO;CAGvE"}

package/field/field-base.js

@@ -0,0 +1,174 @@
+import { __decorate } from "tslib";
+import { consume, ContextProvider } from '@lit/context';
+import { html, LitElement, nothing } from 'lit';
+import { property, query, queryAssignedElements, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styles as baseStyles } from '../shared/base.styles.js';
+import { styles } from './field-base.styles.js';
+import { fieldDefaultsContext } from './field-defaults-context.js';
+export class UmFieldBase extends LitElement {
+    static { this.styles = [baseStyles, styles]; }
+    static setDefaults(contextRoot, config) {
+        return new ContextProvider(contextRoot, {
+            context: fieldDefaultsContext,
+            initialValue: config,
+        });
+    }
+    constructor() {
+        super();
+        this.variant = 'filled';
+        this.hideCounter = false;
+        /**
+         * Whether the field is empty or not. This changes the behavior of the floating label when the field is not focused.
+         */
+        this.empty = false;
+        this.disabled = false;
+        /**
+         * Get or sets where or not the field is in a visually invalid state.
+         */
+        this.invalid = false;
+        /**
+         * Whether the field has a leading icon or not
+         *
+         * _Note:_ Readonly
+         */
+        this.hasLeadingIcon = false;
+        /**
+         * Whether the field has a trailing icon or not
+         *
+         * _Note:_ Readonly
+         */
+        this.hasTrailingIcon = false;
+        /**
+         * Whether the field has an error text or not
+         *
+         * _Note:_ Readonly
+         */
+        this.hasErrorText = false;
+        this.variant = undefined;
+    }
+    render() {
+        const variant = this.variant ?? this.config?.variant ?? 'filled';
+        const classes = {
+            [variant]: true,
+            'no-label': !this.label,
+        };
+        const counter = html `
+      <slot class="counter" name="counter">
+        <div>${this.counter ?? this._innerCounter}</div>
+      </slot>
+    `;
+        const outline = html `
+      <div class="outline">
+        <div class="outline-start"></div>
+        <div class="outline-notch">
+          <div class="outline-notch-label">${this.label}</div>
+        </div>
+        <div class="outline-end"></div>
+      </div>
+    `;
+        return html `
+      <div class="container ${classMap(classes)}">
+        ${variant === 'outlined' ? outline : nothing}
+        <slot class="icon leading-icon" name="leading-icon" @slotchange="${this.handleLeadingIconSlotChange}"></slot>
+        <label class="label" id="label">${this.label}</label>
+        <div class="input-wrapper" part="wrapper">${this.renderControl()}</div>
+        <slot class="icon trailing-icon" name="trailing-icon" @slotchange="${this.handleTrailingIconSlotChange}">
+          <span>${this.renderDefaultTrailingIcon()}</span>
+        </slot>
+      </div>
+      <div class="supporting-text" id="supporting-text">
+        <slot class="error-text" name="error-text" @slotchange="${this.handleErrorTextSlotChange}">
+          <div>${this.errorText}</div>
+        </slot>
+        <slot name="supporting-text" id="supporting-text">
+          <div>${this.supportingText}</div>
+        </slot>
+        ${this.hideCounter ? nothing : counter}
+      </div>
+      ${this.renderAfterContent()}
+    `;
+    }
+    renderAfterContent() {
+        return html ``;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.hasLeadingIcon = !!this.assignedLeadingIcons.length;
+    }
+    handleLeadingIconSlotChange() {
+        this._labelElement.style.transition = 'none';
+        this.hasLeadingIcon = this.assignedLeadingIcons.length > 0;
+        setTimeout(() => {
+            this._labelElement.style.transition = '';
+        });
+    }
+    handleTrailingIconSlotChange() {
+        this.hasTrailingIcon = this.assignedTrailingIcons.length > 0;
+    }
+    handleErrorTextSlotChange() {
+        this.hasErrorText = this.assignedErrorTexts.length > 0;
+    }
+    renderDefaultTrailingIcon() {
+        return nothing;
+    }
+}
+__decorate([
+    consume({ context: fieldDefaultsContext, subscribe: true }),
+    state()
+], UmFieldBase.prototype, "config", void 0);
+__decorate([
+    property()
+], UmFieldBase.prototype, "variant", void 0);
+__decorate([
+    property()
+], UmFieldBase.prototype, "label", void 0);
+__decorate([
+    state()
+], UmFieldBase.prototype, "_innerCounter", void 0);
+__decorate([
+    property()
+], UmFieldBase.prototype, "counter", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'hide-counter' })
+], UmFieldBase.prototype, "hideCounter", void 0);
+__decorate([
+    property({ attribute: 'supporting-text' })
+], UmFieldBase.prototype, "supportingText", void 0);
+__decorate([
+    property({ attribute: 'error-text' })
+], UmFieldBase.prototype, "errorText", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UmFieldBase.prototype, "empty", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UmFieldBase.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UmFieldBase.prototype, "invalid", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'has-leading-icon', reflect: true })
+], UmFieldBase.prototype, "hasLeadingIcon", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'has-trailing-icon', reflect: true })
+], UmFieldBase.prototype, "hasTrailingIcon", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'has-error-text', reflect: true })
+], UmFieldBase.prototype, "hasErrorText", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'leading-icon', flatten: true })
+], UmFieldBase.prototype, "assignedLeadingIcons", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'trailing-icon', flatten: true })
+], UmFieldBase.prototype, "assignedTrailingIcons", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'error-text', flatten: true })
+], UmFieldBase.prototype, "assignedErrorTexts", void 0);
+__decorate([
+    query('.label', true)
+], UmFieldBase.prototype, "_labelElement", void 0);
+__decorate([
+    query('.container', true)
+], UmFieldBase.prototype, "_container", void 0);
+//# sourceMappingURL=field-base.js.map

package/field/field-base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-base.js","sourceRoot":"","sources":["../../src/field/field-base.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume, Context, ContextProvider } from '@lit/context';\nimport { CSSResultGroup } from '@lit/reactive-element/css-tag';\n\nimport { html, LitElement, nothing, TemplateResult } from 'lit';\nimport { property, query, queryAssignedElements, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './field-base.styles.js';\nimport { fieldDefaultsContext } from './field-defaults-context.js';\nimport { UmFieldDefaults } from './field-defaults.js';\n\nexport abstract class UmFieldBase extends LitElement {\n  static override styles: CSSResultGroup = [baseStyles, styles];\n\n  @consume({ context: fieldDefaultsContext, subscribe: true })\n  @state()\n  private readonly config: UmFieldDefaults | undefined;\n\n  @property() variant: 'filled' | 'outlined' | undefined = 'filled';\n\n  /**\n   * The floating label for the field\n   */\n  @property()\n  label: string | undefined;\n\n  @state() protected _innerCounter: string | undefined;\n  @property() counter: string | undefined;\n\n  @property({ type: Boolean, attribute: 'hide-counter' }) hideCounter = false;\n\n  /**\n   * Supporting text conveys additional information about the field, such as how it will be used\n   */\n  @property({ attribute: 'supporting-text' }) supportingText: string | undefined;\n\n  /**\n   * For text fields that validate their content (such as passwords), replace supporting text with error text when applicable.\n   * If `errorText` is not an empty string, changing the property `invalid` to `true` will show the `errorText` instead of `supportingText`\n   */\n  @property({ attribute: 'error-text' }) errorText: string | undefined;\n\n  /**\n   * Whether the field is empty or not. This changes the behavior of the floating label when the field is not focused.\n   */\n  @property({ type: Boolean, reflect: true }) empty = false;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * Get or sets where or not the field is in a visually invalid state.\n   */\n  @property({ type: Boolean, reflect: true }) invalid = false;\n\n  static setDefaults(\n    contextRoot: HTMLElement,\n    config: UmFieldDefaults,\n  ): ContextProvider<Context<HTMLElement, UmFieldDefaults>> {\n    return new ContextProvider(contextRoot, {\n      context: fieldDefaultsContext,\n      initialValue: config,\n    });\n  }\n\n  /**\n   * Whether the field has a leading icon or not\n   *\n   * _Note:_ Readonly\n   */\n  @property({ type: Boolean, attribute: 'has-leading-icon', reflect: true })\n  hasLeadingIcon = false;\n\n  /**\n   * Whether the field has a trailing icon or not\n   *\n   * _Note:_ Readonly\n   */\n  @property({ type: Boolean, attribute: 'has-trailing-icon', reflect: true })\n  hasTrailingIcon = false;\n\n  /**\n   * Whether the field has an error text or not\n   *\n   * _Note:_ Readonly\n   */\n  @property({ type: Boolean, attribute: 'has-error-text', reflect: true })\n  hasErrorText = false;\n\n  @queryAssignedElements({ slot: 'leading-icon', flatten: true })\n  private readonly assignedLeadingIcons!: HTMLElement[];\n\n  @queryAssignedElements({ slot: 'trailing-icon', flatten: true })\n  private readonly assignedTrailingIcons!: HTMLElement[];\n\n  @queryAssignedElements({ slot: 'error-text', flatten: true })\n  private readonly assignedErrorTexts!: HTMLElement[];\n\n  @query('.label', true) private readonly _labelElement!: HTMLElement;\n  @query('.container', true) protected _container!: HTMLElement;\n\n  constructor() {\n    super();\n    this.variant = undefined;\n  }\n\n  protected override render(): TemplateResult {\n    const variant = this.variant ?? this.config?.variant ?? 'filled';\n\n    const classes = {\n      [variant]: true,\n      'no-label': !this.label,\n    };\n\n    const counter = html`\n      <slot class=\"counter\" name=\"counter\">\n        <div>${this.counter ?? this._innerCounter}</div>\n      </slot>\n    `;\n\n    const outline = html`\n      <div class=\"outline\">\n        <div class=\"outline-start\"></div>\n        <div class=\"outline-notch\">\n          <div class=\"outline-notch-label\">${this.label}</div>\n        </div>\n        <div class=\"outline-end\"></div>\n      </div>\n    `;\n\n    return html`\n      <div class=\"container ${classMap(classes)}\">\n        ${variant === 'outlined' ? outline : nothing}\n        <slot class=\"icon leading-icon\" name=\"leading-icon\" @slotchange=\"${this.handleLeadingIconSlotChange}\"></slot>\n        <label class=\"label\" id=\"label\">${this.label}</label>\n        <div class=\"input-wrapper\" part=\"wrapper\">${this.renderControl()}</div>\n        <slot class=\"icon trailing-icon\" name=\"trailing-icon\" @slotchange=\"${this.handleTrailingIconSlotChange}\">\n          <span>${this.renderDefaultTrailingIcon()}</span>\n        </slot>\n      </div>\n      <div class=\"supporting-text\" id=\"supporting-text\">\n        <slot class=\"error-text\" name=\"error-text\" @slotchange=\"${this.handleErrorTextSlotChange}\">\n          <div>${this.errorText}</div>\n        </slot>\n        <slot name=\"supporting-text\" id=\"supporting-text\">\n          <div>${this.supportingText}</div>\n        </slot>\n        ${this.hideCounter ? nothing : counter}\n      </div>\n      ${this.renderAfterContent()}\n    `;\n  }\n\n  protected abstract renderControl(): TemplateResult;\n\n  protected renderAfterContent(): TemplateResult {\n    return html``;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.hasLeadingIcon = !!this.assignedLeadingIcons.length;\n  }\n\n  private handleLeadingIconSlotChange() {\n    this._labelElement.style.transition = 'none';\n    this.hasLeadingIcon = this.assignedLeadingIcons.length > 0;\n\n    setTimeout(() => {\n      this._labelElement.style.transition = '';\n    });\n  }\n\n  private handleTrailingIconSlotChange() {\n    this.hasTrailingIcon = this.assignedTrailingIcons.length > 0;\n  }\n\n  private handleErrorTextSlotChange() {\n    this.hasErrorText = this.assignedErrorTexts.length > 0;\n  }\n\n  protected renderDefaultTrailingIcon(): TemplateResult | typeof nothing {\n    return nothing;\n  }\n}\n"]}

package/field/field-base.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=field-base.styles.d.ts.map

package/field/field-base.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-base.styles.d.ts","sourceRoot":"","sources":["../../src/field/field-base.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAiXlB,CAAC"}