@universal-material/web 3.0.140 → 3.0.142

package/chip-field/chip-field.js

@@ -0,0 +1,145 @@
+import { __decorate } from "tslib";
+import { html, nothing } from 'lit';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+import { customElement, property, query } from 'lit/decorators.js';
+import { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';
+import { styles } from './chip-field.styles.js';
+let UmChipField = class UmChipField extends UmTextFieldBase {
+    constructor() {
+        super(...arguments);
+        /**
+         * If true, ignore enter key input
+         */
+        this.manual = false;
+        this.#value = [];
+        this.#removeChip = (index) => (e) => {
+            e?.preventDefault();
+            this.input.focus();
+            const defaultPrevented = this.#dispatchRemoveEvent(index);
+            if (defaultPrevented) {
+                return;
+            }
+            this.removeAt(index, true);
+        };
+    }
+    static { this.styles = [UmTextFieldBase.styles, styles]; }
+    #value;
+    /**
+     * An array containing the value representation of each chip.
+     *
+     * _Note:_ Add or remove items directly from value array won't trigger a render on Chip Field. Use the methods `add` or `removeAt`.
+     */
+    get value() {
+        return this.#value;
+    }
+    set value(value) {
+        this.#value = value;
+        this.#valueUpdate();
+    }
+    setFormValue() {
+        const formData = new FormData();
+        for (const item of this.value) {
+            formData.append(this.name, this.getItemLabel(item));
+        }
+        this.elementInternals.setFormValue(formData);
+    }
+    focus() {
+        this.input.focus();
+    }
+    renderControl() {
+        return html `
+      <div class="input">
+        ${this.#getChips()}
+        <input
+          part="input"
+          id=${this.id || nothing}
+          aria-labelledby="label"
+          ?disabled=${this.disabled}
+          placeholder=${this.placeholder || nothing}
+          @blur=${this.#handleBlur}
+          @keydown=${this.#handleKeyDown}
+          @input=${this.#handleInput} />
+      </div>
+    `;
+    }
+    #getChips() {
+        return this.value?.map((item, index) => {
+            const leadingIcon = this.leadingIconTemplate
+                ? html `
+            <span slot="leading-icon">${unsafeHTML(this.leadingIconTemplate(item))}</span>
+          `
+                : nothing;
+            return html `
+        <u-chip removable ?disabled=${this.disabled} @remove=${this.#removeChip(index)}>
+          ${leadingIcon} ${this.getItemLabel(item)}
+        </u-chip>
+      `;
+        });
+    }
+    #handleBlur() {
+        this.requestUpdate();
+    }
+    #handleInput() {
+        this.#setEmpty();
+    }
+    #handleKeyDown(e) {
+        if (!this.manual && e.key === 'Enter') {
+            this.add(this.input.value, true);
+            this.input.value = '';
+            return;
+        }
+        if (e.key === 'Backspace' && this.input.selectionStart === 0 && this.input.selectionEnd === 0) {
+            this.#removeChip(this.value.length - 1)();
+            return;
+        }
+    }
+    add(value, triggerChange = false) {
+        this.value.push(value);
+        this.#changed(triggerChange);
+    }
+    removeAt(index, triggerChange = false) {
+        this.value.splice(index, 1);
+        this.#changed(triggerChange);
+    }
+    #removeChip;
+    #changed(triggerChange) {
+        this.#valueUpdate();
+        if (triggerChange) {
+            this.dispatchEvent(new Event('change', { bubbles: true }));
+        }
+    }
+    #valueUpdate() {
+        this.#setEmpty();
+        this.setFormValue();
+        this.requestUpdate();
+    }
+    #setEmpty() {
+        this.empty = !this.value?.length && !this.input?.value;
+    }
+    #dispatchRemoveEvent(index) {
+        const item = this.value[index];
+        const event = new CustomEvent('remove', {
+            cancelable: true,
+            detail: item,
+        });
+        this.dispatchEvent(event);
+        return event.defaultPrevented;
+    }
+    getItemLabel(item) {
+        return this.formatter ? this.formatter(item) : item.toString();
+    }
+};
+__decorate([
+    query('input')
+], UmChipField.prototype, "input", void 0);
+__decorate([
+    property()
+], UmChipField.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean })
+], UmChipField.prototype, "manual", void 0);
+UmChipField = __decorate([
+    customElement('u-chip-field')
+], UmChipField);
+export { UmChipField };
+//# sourceMappingURL=chip-field.js.map

package/chip-field/chip-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip-field.js","sourceRoot":"","sources":["../../src/chip-field/chip-field.ts"],"names":[],"mappings":"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","sourcesContent":["import { CSSResultGroup } from '@lit/reactive-element/css-tag';\n\nimport { html, HTMLTemplateResult, nothing } from 'lit';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js';\nimport { customElement, property, query } from 'lit/decorators.js';\n\nimport { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';\nimport { styles } from './chip-field.styles.js';\n\n@customElement('u-chip-field')\nexport class UmChipField extends UmTextFieldBase {\n  static override styles: CSSResultGroup = [UmTextFieldBase.styles, styles];\n\n  @query('input') input!: HTMLInputElement;\n  @property() name!: string;\n\n  /**\n   * If true, ignore enter key input\n   */\n  @property({ type: Boolean }) manual = false;\n\n  /**\n   * A function return a string based on a item from the `value`. Useful when the items of value are objects.\n   */\n  formatter: ((value: any) => string) | undefined;\n\n  /**\n   * A string representing an HTML to be rendered inside as leading icon of each chip.\n   *\n   * _Note:_ Subject to signature change\n   */\n  leadingIconTemplate: ((value: any) => string) | undefined;\n\n  #value: any[] = [];\n\n  /**\n   * An array containing the value representation of each chip.\n   *\n   * _Note:_ Add or remove items directly from value array won't trigger a render on Chip Field. Use the methods `add` or `removeAt`.\n   */\n  get value(): any[] {\n    return this.#value;\n  }\n\n  set value(value: any[]) {\n    this.#value = value;\n    this.#valueUpdate();\n  }\n\n  private setFormValue() {\n    const formData = new FormData();\n\n    for (const item of this.value) {\n      formData.append(this.name, this.getItemLabel(item));\n    }\n\n    this.elementInternals.setFormValue(formData);\n  }\n\n  override focus() {\n    this.input.focus();\n  }\n\n  protected override renderControl(): HTMLTemplateResult {\n    return html`\n      <div class=\"input\">\n        ${this.#getChips()}\n        <input\n          part=\"input\"\n          id=${this.id || nothing}\n          aria-labelledby=\"label\"\n          ?disabled=${this.disabled}\n          placeholder=${this.placeholder || nothing}\n          @blur=${this.#handleBlur}\n          @keydown=${this.#handleKeyDown}\n          @input=${this.#handleInput} />\n      </div>\n    `;\n  }\n\n  #getChips() {\n    return this.value?.map((item, index) => {\n      const leadingIcon = this.leadingIconTemplate\n        ? html`\n            <span slot=\"leading-icon\">${unsafeHTML(this.leadingIconTemplate(item))}</span>\n          `\n        : nothing;\n\n      return html`\n        <u-chip removable ?disabled=${this.disabled} @remove=${this.#removeChip(index)}>\n          ${leadingIcon} ${this.getItemLabel(item)}\n        </u-chip>\n      `;\n    });\n  }\n\n  #handleBlur() {\n    this.requestUpdate();\n  }\n\n  #handleInput() {\n    this.#setEmpty();\n  }\n\n  #handleKeyDown(e: KeyboardEvent) {\n    if (!this.manual && e.key === 'Enter') {\n      this.add(this.input.value, true);\n      this.input.value = '';\n      return;\n    }\n\n    if (e.key === 'Backspace' && this.input.selectionStart === 0 && this.input.selectionEnd === 0) {\n      this.#removeChip(this.value.length - 1)();\n      return;\n    }\n  }\n\n  add(value: any, triggerChange = false) {\n    this.value.push(value);\n\n    this.#changed(triggerChange);\n  }\n\n  removeAt(index: number, triggerChange = false) {\n    this.value.splice(index, 1);\n    this.#changed(triggerChange);\n  }\n\n  readonly #removeChip = (index: number) => (e?: Event) => {\n    e?.preventDefault();\n\n    this.input.focus();\n    const defaultPrevented = this.#dispatchRemoveEvent(index);\n\n    if (defaultPrevented) {\n      return;\n    }\n\n    this.removeAt(index, true);\n  };\n\n  #changed(triggerChange: boolean) {\n    this.#valueUpdate();\n\n    if (triggerChange) {\n      this.dispatchEvent(new Event('change', { bubbles: true }));\n    }\n  }\n\n  #valueUpdate() {\n    this.#setEmpty();\n    this.setFormValue();\n    this.requestUpdate();\n  }\n\n  #setEmpty() {\n    this.empty = !this.value?.length && !this.input?.value;\n  }\n\n  #dispatchRemoveEvent(index: number): boolean {\n    const item = this.value[index];\n\n    const event = new CustomEvent('remove', {\n      cancelable: true,\n      detail: item,\n    });\n\n    this.dispatchEvent(event);\n\n    return event.defaultPrevented;\n  }\n\n  private getItemLabel(item: any) {\n    return this.formatter ? this.formatter(item) : item.toString();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-chip-field': UmChipField;\n  }\n}\n"]}

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

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

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

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

package/chip-field/chip-field.styles.js

@@ -0,0 +1,22 @@
+import { css } from 'lit';
+export const styles = css `
+  u-chip {
+    flex-basis: 0;
+  }
+
+  .input {
+    display: flex;
+    gap: var(--u-chip-field-chips-gap, var(--u-spacing-extra-small, 4px));
+    flex-wrap: wrap;
+  }
+  .input:has(u-chip) {
+    margin-top: var(--u-chip-field-chips-margin, var(--u-spacing-extra-small, 4px));
+  }
+  .input input {
+    width: auto;
+    flex-basis: 200px;
+    padding: 4px 0;
+    margin-block: -4px;
+  }
+`;
+//# sourceMappingURL=chip-field.styles.js.map

package/chip-field/chip-field.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip-field.styles.js","sourceRoot":"","sources":["../../src/chip-field/chip-field.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;CAmBzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  u-chip {\n    flex-basis: 0;\n  }\n\n  .input {\n    display: flex;\n    gap: var(--u-chip-field-chips-gap, var(--u-spacing-extra-small, 4px));\n    flex-wrap: wrap;\n  }\n  .input:has(u-chip) {\n    margin-top: var(--u-chip-field-chips-margin, var(--u-spacing-extra-small, 4px));\n  }\n  .input input {\n    width: auto;\n    flex-basis: 200px;\n    padding: 4px 0;\n    margin-block: -4px;\n  }\n`;\n"]}

package/config.d.ts

@@ -0,0 +1,16 @@
+import { DialogButtonDef } from './dialog/dialog-button-def.js';
+export declare const config: {
+    dialog: {
+        alertDefaults: {
+            acknowledgeButton: DialogButtonDef;
+        };
+        confirmDefaults: {
+            confirmButton: DialogButtonDef;
+            cancelButton: DialogButtonDef;
+        };
+    };
+    navigationDrawer: {
+        useSwiperJs: boolean;
+    };
+};
+//# sourceMappingURL=config.d.ts.map

package/config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AA0BhE,eAAO,MAAM,MAAM;;;+BAlBR,eAAe;;;2BAMf,eAAe;0BAIf,eAAe;;;;;;CAQG,CAAC"}

package/config.js

@@ -0,0 +1,25 @@
+const _config = {
+    dialog: {
+        alertDefaults: {
+            acknowledgeButton: {
+                label: 'Ok',
+                variant: 'text',
+            },
+        },
+        confirmDefaults: {
+            confirmButton: {
+                label: 'Ok',
+                variant: 'text',
+            },
+            cancelButton: {
+                label: 'Cancel',
+                variant: 'text',
+            },
+        },
+    },
+    navigationDrawer: {
+        useSwiperJs: false,
+    },
+};
+export const config = _config;
+//# sourceMappingURL=config.js.map

package/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAGA,MAAM,OAAO,GAAG;IACd,MAAM,EAAE;QACN,aAAa,EAAE;YACb,iBAAiB,EAAE;gBACjB,KAAK,EAAE,IAAI;gBACX,OAAO,EAAE,MAAyB;aAChB;SACrB;QACD,eAAe,EAAE;YACf,aAAa,EAAE;gBACb,KAAK,EAAE,IAAI;gBACX,OAAO,EAAE,MAAyB;aAChB;YACpB,YAAY,EAAE;gBACZ,KAAK,EAAE,QAAQ;gBACf,OAAO,EAAE,MAAyB;aAChB;SACrB;KACF;IACD,gBAAgB,EAAE;QAChB,WAAW,EAAE,KAAK;KACnB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,OAAO,CAAC","sourcesContent":["import { UmButtonVariant } from './button/button.js';\nimport { DialogButtonDef } from './dialog/dialog-button-def.js';\n\nconst _config = {\n  dialog: {\n    alertDefaults: {\n      acknowledgeButton: {\n        label: 'Ok',\n        variant: 'text' as UmButtonVariant,\n      } as DialogButtonDef,\n    },\n    confirmDefaults: {\n      confirmButton: {\n        label: 'Ok',\n        variant: 'text' as UmButtonVariant,\n      } as DialogButtonDef,\n      cancelButton: {\n        label: 'Cancel',\n        variant: 'text' as UmButtonVariant,\n      } as DialogButtonDef,\n    },\n  },\n  navigationDrawer: {\n    useSwiperJs: false,\n  },\n};\n\nexport const config = _config;\n"]}