@universal-material/web 3.0.133 → 3.0.135
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/chip/chip.js +2 -2
- package/chip/chip.js.map +1 -1
- package/chip/chip.styles.d.ts.map +1 -1
- package/chip/chip.styles.js +4 -0
- package/chip/chip.styles.js.map +1 -1
- package/chip-field/chip-field.d.ts.map +1 -1
- package/chip-field/chip-field.js +3 -1
- package/chip-field/chip-field.js.map +1 -1
- package/custom-elements.json +3906 -3836
- package/package.json +1 -1
- package/shared/char-count-text-field/native-text-field-wrapper.d.ts +1 -0
- package/shared/char-count-text-field/native-text-field-wrapper.d.ts.map +1 -1
- package/shared/char-count-text-field/native-text-field-wrapper.js +4 -0
- package/shared/char-count-text-field/native-text-field-wrapper.js.map +1 -1
- package/shared/text-field-base/text-field-base.styles.d.ts.map +1 -1
- package/shared/text-field-base/text-field-base.styles.js +4 -0
- package/shared/text-field-base/text-field-base.styles.js.map +1 -1
- package/text-area/text-area.js +1 -1
- package/text-area/text-area.js.map +1 -1
package/chip/chip.js
CHANGED
|
@@ -105,8 +105,8 @@ let UmChip = class UmChip extends UmButtonWrapper {
|
|
|
105
105
|
}
|
|
106
106
|
renderContent() {
|
|
107
107
|
const remove = html `
|
|
108
|
-
<button class="icon remove-button focus-ring" @click=${this.#handleRemoveClick}>
|
|
109
|
-
<u-ripple id="remove-ripple"></u-ripple>
|
|
108
|
+
<button class="icon remove-button focus-ring" ?disabled=${this.disabled} @click=${this.#handleRemoveClick}>
|
|
109
|
+
<u-ripple id="remove-ripple" ?disabled=${this.disabled}></u-ripple>
|
|
110
110
|
<slot name="remove-icon">
|
|
111
111
|
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em" fill="currentColor">
|
|
112
112
|
<path
|
package/chip/chip.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chip.js","sourceRoot":"","sources":["../../src/chip/chip.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"chip.js","sourceRoot":"","sources":["../../src/chip/chip.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult, nothing } from 'lit';\nimport { customElement, property, query, queryAssignedElements } from 'lit/decorators.js';\n\nimport { styles } from './chip.styles.js';\n\nimport { UmRipple } from '../ripple/ripple.js';\nimport { UmButtonWrapper } from '../shared/button-wrapper.js';\n\nimport '../ripple/ripple.js';\nimport '../elevation/elevation.js';\n\n@customElement('u-chip')\nexport class UmChip extends UmButtonWrapper {\n static override styles = [UmButtonWrapper.styles, styles];\n\n #clickable = false;\n #toggle = false;\n\n /**\n * Whether the chip is selected or not\n */\n @property({ type: Boolean, reflect: true }) selected = false;\n\n @property({ type: Boolean, reflect: true })\n get clickable(): boolean {\n return this.#clickable;\n }\n set clickable(value: boolean) {\n this.#clickable = value;\n this.renderRipple = this.#clickable || this.#toggle;\n }\n\n /**\n * Adds elevation to the chip\n */\n @property({ type: Boolean, reflect: true }) elevated = false;\n\n /**\n * When true, the chip will toggle between selected and unselected\n * states\n */\n @property({ type: Boolean, reflect: true })\n get toggle(): boolean {\n return this.#toggle;\n }\n set toggle(value: boolean) {\n this.#toggle = value;\n this.renderRipple = this.#clickable || this.#toggle;\n }\n\n /**\n * Add the remove icon\n */\n @property({ type: Boolean, reflect: true }) removable = false;\n\n /**\n * Hide the selected icon\n */\n @property({ type: Boolean, attribute: 'hide-selected-icon', reflect: true }) hideSelectedIcon = false;\n\n /**\n * Whether the chip has a leading icon or not\n *\n * _Note:_ Readonly\n */\n @property({ type: Boolean, attribute: 'has-leading-icon', reflect: true }) hasLeadingIcon = false;\n\n /**\n * Whether the chip has a selected icon or not\n *\n * _Note:_ Readonly\n */\n @property({ type: Boolean, attribute: 'has-selected-icon', reflect: true }) hasSelectedIcon = false;\n\n /**\n * Whether the chip has a trailing icon or not\n *\n * _Note:_ Readonly\n */\n @property({ type: Boolean, attribute: 'has-trailing-icon', reflect: true }) hasTrailingIcon = false;\n\n @queryAssignedElements({ slot: 'leading-icon', flatten: true })\n private readonly assignedLeadingIcons!: HTMLElement[];\n\n @queryAssignedElements({ slot: 'selected-icon', flatten: true })\n private readonly assignedSelectedIcons!: HTMLElement[];\n\n @queryAssignedElements({ slot: 'trailing-icon', flatten: true })\n private readonly assignedTrailingIcons!: HTMLElement[];\n\n @query('#remove-ripple') removeRipple!: UmRipple;\n\n override connectedCallback() {\n super.connectedCallback();\n this.renderRipple = this.#clickable || this.#toggle;\n }\n\n #handleRemoveClick(e: Event) {\n e.stopPropagation();\n\n if (!(<PointerEvent>e).pointerType) {\n this.removeRipple.createRipple();\n }\n\n const removeEvent = new Event('remove', { cancelable: true });\n this.dispatchEvent(removeEvent);\n\n if (!removeEvent.defaultPrevented) {\n this.remove();\n }\n }\n\n #handleTrailingIconSlotChange() {\n this.hasTrailingIcon = this.assignedTrailingIcons.length > 0;\n }\n\n #handleLeadingIconSlotChange() {\n this.hasLeadingIcon = this.assignedLeadingIcons.length > 0;\n }\n\n #handleSelectedIconSlotChange() {\n this.hasSelectedIcon = this.assignedSelectedIcons.length > 0;\n }\n\n protected override handleClick(event: UIEvent): void {\n super.handleClick(event);\n\n if (!this.toggle) {\n return;\n }\n\n this.selected = !this.selected;\n this.dispatchEvent(new Event('change', { bubbles: true }));\n }\n\n protected override renderContent(): HTMLTemplateResult {\n const remove = html`\n <button class=\"icon remove-button focus-ring\" ?disabled=${this.disabled} @click=${this.#handleRemoveClick}>\n <u-ripple id=\"remove-ripple\" ?disabled=${this.disabled}></u-ripple>\n <slot name=\"remove-icon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 -960 960 960\" width=\"1em\" fill=\"currentColor\">\n <path\n d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\" />\n </svg>\n </slot>\n </button>\n `;\n\n return html`\n <div class=\"container\">\n <div class=\"outline\"></div>\n <span class=\"icon leading\" part=\"icon leading\">\n <slot name=\"leading-icon\" @slotchange=\"${this.#handleLeadingIconSlotChange}\"></slot>\n </span>\n <span class=\"icon selected\" part=\"icon selected\">\n <slot name=\"selected-icon\" @slotchange=\"${this.#handleSelectedIconSlotChange}\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"1em\"\n viewBox=\"0 -960 960 960\"\n width=\"1em\"\n fill=\"currentColor\">\n <path d=\"M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z\" />\n </svg>\n </slot>\n </span>\n <div class=\"label\">\n <slot></slot>\n </div>\n <slot\n class=\"icon trailing\"\n part=\"icon trailing\"\n name=\"trailing-icon\"\n @slotchange=\"${this.#handleTrailingIconSlotChange}\"></slot>\n ${this.removable ? remove : nothing}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-chip': UmChip;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chip.styles.d.ts","sourceRoot":"","sources":["../../src/chip/chip.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"chip.styles.d.ts","sourceRoot":"","sources":["../../src/chip/chip.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAqKlB,CAAC"}
|
package/chip/chip.styles.js
CHANGED
package/chip/chip.styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chip.styles.js","sourceRoot":"","sources":["../../src/chip/chip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC
|
|
1
|
+
{"version":3,"file":"chip.styles.js","sourceRoot":"","sources":["../../src/chip/chip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqKzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host {\n --_height: var(--u-chip-height, 32px);\n --_outline-width: var(--u-chip-outline-width, 1px);\n --_outline-color: var(--u-chip-outline-color, var(--u-color-outline, rgb(121, 116, 126)));\n --_shape: var(--u-chip-shape, var(--u-shape-corner-small, 8px));\n --_gap: var(--u-chip-gap, 8px);\n --_icon-size: var(--u-chip-icon-size, 1.125rem);\n --_remove-button-margin: var(--u-chip-remove-button-margin, 2px);\n --_remove-button-size: calc(var(--_height) - var(--_remove-button-margin) * 2);\n --_selected-icon-color: var(--u-chip-selected-icon-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n display: inline-block;\n height: var(--_height);\n border-radius: var(--_shape);\n }\n\n :host(:not([disabled]):not([elevated]):not([selected])) .outline {\n border: var(--_outline-width) solid var(--_outline-color);\n }\n\n :host([elevated]:not([disabled])) {\n --u-elevation-level: var(--u-elevated-chip-elevation-level, 1);\n }\n\n @media (hover: hover) {\n :host([elevated]:not([disabled]):hover) {\n --u-elevation-level: var(--u-elevated-chip-hover-elevation-level, 2);\n }\n }\n .outline {\n position: absolute;\n inset: 0;\n border-radius: inherit;\n pointer-events: none;\n }\n\n .container {\n display: flex;\n align-items: center;\n border-radius: inherit;\n height: 100%;\n padding-inline: var(--u-chip-padding, 16px);\n gap: var(--_gap);\n }\n\n .icon {\n width: 1em;\n height: var(--_icon-size);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--_icon-size);\n }\n\n .leading {\n color: var(--u-chip-leading-icon-color, var(--u-color-primary, rgb(103, 80, 164)));\n }\n\n .selected {\n color: var(--_selected-icon-color);\n }\n\n .trailing {\n color: var(--u-chip-trailing-icon-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n }\n\n .label {\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-chip-label-line-height, var(--u-label-l-line-height, 1.25rem));\n font-size: var(--u-chip-label-font-size, var(--u-label-l-font-size, 0.875rem));\n letter-spacing: var(--u-chip-label-letter-spacing, var(--u-label-l-letter-spacing, 0.0071428571rem));\n font-weight: var(--u-chip-label-font-weight, var(--u-label-l-font-weight, var(--u-font-weight-medium, 500)));\n }\n\n .remove-button {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: var(--_remove-button-size);\n height: var(--_remove-button-size);\n cursor: pointer;\n padding: 0;\n margin: 0;\n margin-inline: calc((var(--_remove-button-size) - var(--_icon-size)) * -0.5);\n background: gray;\n border: none;\n border-radius: var(--u-chip-remove-button-border-radius, var(--u-shape-corner-full, 9999px));\n background: none;\n appearance: none;\n outline: 0;\n outline-offset: 0;\n z-index: 1;\n }\n\n ::slotted([slot=remove-icon]),\n ::slotted([slot=selected-icon]),\n ::slotted([slot=leading-icon]),\n ::slotted([slot=trailing-icon]) {\n font-size: inherit !important;\n }\n\n slot[name=selected-icon] {\n display: none;\n }\n\n :host(:not([clickable]):not([toggle])) .button {\n cursor: auto;\n }\n\n :host([selected]:not([hide-selected-icon])) .leading {\n display: none;\n }\n :host([selected]:not([hide-selected-icon])) slot[name=selected-icon] {\n display: contents;\n }\n\n .default-select-icon {\n display: contents;\n }\n\n :host([has-selected-icon]) .default-select-icon {\n display: none;\n }\n\n :host([selected]:not([disabled])) {\n background-color: var(--u-chip-selected-bg-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n }\n :host([selected]:not([disabled])) .leading {\n color: var(--u-chip-selected-leading-icon-color, var(--_selected-icon-color));\n }\n :host([selected]:not([disabled])) .trailing {\n color: var(--u-chip-selected-trailing-icon-color, var(--_selected-icon-color));\n }\n\n :host([has-leading-icon]) .container,\n :host([selected]:not([hide-selected-icon])) .container {\n padding-inline-start: var(--_gap);\n }\n\n :host([has-trailing-icon]) .container,\n :host([removable]) .container {\n padding-inline-end: var(--_gap);\n }\n\n :host(:not([has-leading-icon])) .leading {\n display: none;\n }\n\n :host([hide-selected-icon]) .selected,\n :host(:not([selected])) .selected {\n display: none;\n }\n\n :host(:not([has-trailing-icon])) .trailing {\n display: none;\n }\n\n [part=default-selected-icon] {\n display: contents;\n }\n\n :host([disabled]) .remove-button {\n cursor: default;\n }\n`;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chip-field.d.ts","sourceRoot":"","sources":["../../src/chip-field/chip-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAQ,kBAAkB,EAAW,MAAM,KAAK,CAAC;AAMxD,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAE/E,qBACa,WAAY,SAAQ,eAAe;;IAC9C,OAAgB,MAAM,EAAE,cAAc,CAAoC;IAE1D,KAAK,EAAG,gBAAgB,CAAC;IAC7B,IAAI,EAAG,MAAM,CAAC;IAE1B;;OAEG;IAC0B,MAAM,UAAS;IAE5C;;OAEG;IACH,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE,GAAG,KAAK,MAAM,CAAC,GAAG,SAAS,CAAC;IAEhD;;;;OAIG;IACH,mBAAmB,EAAE,CAAC,CAAC,KAAK,EAAE,GAAG,KAAK,MAAM,CAAC,GAAG,SAAS,CAAC;IAI1D;;;;OAIG;IACH,IAAI,KAAK,IAAI,GAAG,EAAE,CAEjB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,EAGrB;IAED,OAAO,CAAC,YAAY;IAUX,KAAK;cAIK,aAAa,IAAI,kBAAkB;
|
|
1
|
+
{"version":3,"file":"chip-field.d.ts","sourceRoot":"","sources":["../../src/chip-field/chip-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAQ,kBAAkB,EAAW,MAAM,KAAK,CAAC;AAMxD,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAE/E,qBACa,WAAY,SAAQ,eAAe;;IAC9C,OAAgB,MAAM,EAAE,cAAc,CAAoC;IAE1D,KAAK,EAAG,gBAAgB,CAAC;IAC7B,IAAI,EAAG,MAAM,CAAC;IAE1B;;OAEG;IAC0B,MAAM,UAAS;IAE5C;;OAEG;IACH,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE,GAAG,KAAK,MAAM,CAAC,GAAG,SAAS,CAAC;IAEhD;;;;OAIG;IACH,mBAAmB,EAAE,CAAC,CAAC,KAAK,EAAE,GAAG,KAAK,MAAM,CAAC,GAAG,SAAS,CAAC;IAI1D;;;;OAIG;IACH,IAAI,KAAK,IAAI,GAAG,EAAE,CAEjB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,EAGrB;IAED,OAAO,CAAC,YAAY;IAUX,KAAK;cAIK,aAAa,IAAI,kBAAkB;IAsDtD,GAAG,CAAC,KAAK,EAAE,GAAG,EAAE,aAAa,UAAQ;IAMrC,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,aAAa,UAAQ;IAiD7C,OAAO,CAAC,YAAY;CAGrB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}
|
package/chip-field/chip-field.js
CHANGED
|
@@ -75,7 +75,9 @@ let UmChipField = class UmChipField extends UmTextFieldBase {
|
|
|
75
75
|
`
|
|
76
76
|
: nothing;
|
|
77
77
|
return html `
|
|
78
|
-
<u-chip removable @remove=${this.#removeChip(index)}
|
|
78
|
+
<u-chip removable ?disabled=${this.disabled} @remove=${this.#removeChip(index)}>
|
|
79
|
+
${leadingIcon} ${this.getItemLabel(item)}
|
|
80
|
+
</u-chip>
|
|
79
81
|
`;
|
|
80
82
|
});
|
|
81
83
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chip-field.js","sourceRoot":"","sources":["../../src/chip-field/chip-field.ts"],"names":[],"mappings":";;;;;;AACA,OAAO,EAAE,IAAI,EAAsB,OAAO,EAAE,MAAM,KAAK,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAGxE,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,eAAe;IAAzC;;QAML;;WAEG;QAC0B,WAAM,GAAG,KAAK,CAAC;QAc5C,WAAM,GAAU,EAAE,CAAC;
|
|
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';\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 { styles } from './chip-field.styles.js';\n\nimport { UmTextFieldBase } from '../shared/text-field-base/text-field-base.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 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 #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"]}
|