@universal-material/web 3.0.100 → 3.0.102
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-field/chip-field.d.ts.map +1 -1
- package/chip-field/chip-field.js +16 -22
- package/chip-field/chip-field.js.map +1 -1
- package/custom-elements.json +3491 -3491
- package/menu/menu-item.d.ts.map +1 -1
- package/menu/menu-item.js +3 -12
- package/menu/menu-item.js.map +1 -1
- package/package.json +1 -1
|
@@ -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,
|
|
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;IAoDtD,GAAG,CAAC,KAAK,EAAE,GAAG,EAAE,aAAa,UAAQ;IAMrC,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,aAAa,UAAQ;IAgD7C,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
|
@@ -17,7 +17,8 @@ let UmChipField = class UmChipField extends UmTextFieldBase {
|
|
|
17
17
|
*/
|
|
18
18
|
this.manual = false;
|
|
19
19
|
this.#value = [];
|
|
20
|
-
this.#removeChip = (index) => () => {
|
|
20
|
+
this.#removeChip = (index) => (e) => {
|
|
21
|
+
e?.preventDefault();
|
|
21
22
|
const defaultPrevented = this.#dispatchRemoveEvent(index);
|
|
22
23
|
if (defaultPrevented) {
|
|
23
24
|
return;
|
|
@@ -25,10 +26,7 @@ let UmChipField = class UmChipField extends UmTextFieldBase {
|
|
|
25
26
|
this.removeAt(index, true);
|
|
26
27
|
};
|
|
27
28
|
}
|
|
28
|
-
static { this.styles = [
|
|
29
|
-
UmTextFieldBase.styles,
|
|
30
|
-
styles
|
|
31
|
-
]; }
|
|
29
|
+
static { this.styles = [UmTextFieldBase.styles, styles]; }
|
|
32
30
|
#value;
|
|
33
31
|
/**
|
|
34
32
|
* An array containing the value representation of each chip.
|
|
@@ -55,8 +53,8 @@ let UmChipField = class UmChipField extends UmTextFieldBase {
|
|
|
55
53
|
renderControl() {
|
|
56
54
|
return html `
|
|
57
55
|
<div class="input">
|
|
58
|
-
${
|
|
59
|
-
<input
|
|
56
|
+
${this.#getChips()}
|
|
57
|
+
<input
|
|
60
58
|
part="input"
|
|
61
59
|
id=${this.id || nothing}
|
|
62
60
|
aria-labelledby="label"
|
|
@@ -64,22 +62,20 @@ let UmChipField = class UmChipField extends UmTextFieldBase {
|
|
|
64
62
|
placeholder=${this.placeholder || nothing}
|
|
65
63
|
@blur=${this.#handleBlur}
|
|
66
64
|
@keydown=${this.#handleKeyDown}
|
|
67
|
-
@input=${this.#handleInput}/>
|
|
68
|
-
</div
|
|
65
|
+
@input=${this.#handleInput} />
|
|
66
|
+
</div>
|
|
67
|
+
`;
|
|
69
68
|
}
|
|
70
69
|
#getChips() {
|
|
71
|
-
return this.value
|
|
72
|
-
?.map((item, index) => {
|
|
70
|
+
return this.value?.map((item, index) => {
|
|
73
71
|
const leadingIcon = this.leadingIconTemplate
|
|
74
|
-
? html
|
|
72
|
+
? html `
|
|
73
|
+
<span slot="leading-icon">${unsafeHTML(this.leadingIconTemplate(item))}</span>
|
|
74
|
+
`
|
|
75
75
|
: nothing;
|
|
76
76
|
return html `
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
@remove=${this.#removeChip(index)}>
|
|
80
|
-
${leadingIcon}
|
|
81
|
-
${this.getItemLabel(item)}
|
|
82
|
-
</u-chip>`;
|
|
77
|
+
<u-chip removable @remove=${this.#removeChip(index)}>${leadingIcon} ${this.getItemLabel(item)}</u-chip>
|
|
78
|
+
`;
|
|
83
79
|
});
|
|
84
80
|
}
|
|
85
81
|
#handleBlur() {
|
|
@@ -126,15 +122,13 @@ let UmChipField = class UmChipField extends UmTextFieldBase {
|
|
|
126
122
|
const item = this.value[index];
|
|
127
123
|
const event = new CustomEvent('remove', {
|
|
128
124
|
cancelable: true,
|
|
129
|
-
detail: item
|
|
125
|
+
detail: item,
|
|
130
126
|
});
|
|
131
127
|
this.dispatchEvent(event);
|
|
132
128
|
return event.defaultPrevented;
|
|
133
129
|
}
|
|
134
130
|
getItemLabel(item) {
|
|
135
|
-
return this.formatter
|
|
136
|
-
? this.formatter(item)
|
|
137
|
-
: item.toString();
|
|
131
|
+
return this.formatter ? this.formatter(item) : item.toString();
|
|
138
132
|
}
|
|
139
133
|
};
|
|
140
134
|
__decorate([
|
|
@@ -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;;
|
|
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 @remove=${this.#removeChip(index)}>${leadingIcon} ${this.getItemLabel(item)}</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 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"]}
|