@universal-material/web 3.0.66 → 3.0.68
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/button/button-base.d.ts +0 -4
- package/button/button-base.d.ts.map +1 -1
- package/button/button-base.js +0 -7
- package/button/button-base.js.map +1 -1
- package/custom-elements.json +353 -397
- package/field/field-base.d.ts +5 -4
- package/field/field-base.d.ts.map +1 -1
- package/field/field-base.js.map +1 -1
- package/menu/menu-item.d.ts.map +1 -1
- package/menu/menu-item.js +3 -1
- package/menu/menu-item.js.map +1 -1
- package/package.json +1 -1
- package/select/option.d.ts +2 -5
- package/select/option.d.ts.map +1 -1
- package/select/option.js +59 -52
- package/select/option.js.map +1 -1
- package/select/select.d.ts +5 -5
- package/select/select.d.ts.map +1 -1
- package/select/select.js +28 -18
- package/select/select.js.map +1 -1
package/field/field-base.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { Context, ContextProvider } from '@lit/context';
|
|
2
2
|
import { CSSResultGroup } from '@lit/reactive-element/css-tag';
|
|
3
|
-
import {
|
|
3
|
+
import { LitElement } from 'lit';
|
|
4
|
+
import { TemplateResult } from 'lit-html';
|
|
4
5
|
import { UmFieldDefaults } from './field-defaults.js';
|
|
5
6
|
export declare abstract class UmFieldBase extends LitElement {
|
|
6
7
|
#private;
|
|
@@ -40,9 +41,9 @@ export declare abstract class UmFieldBase extends LitElement {
|
|
|
40
41
|
container: HTMLElement;
|
|
41
42
|
private labelSizeObserver;
|
|
42
43
|
constructor();
|
|
43
|
-
protected render():
|
|
44
|
-
protected abstract renderControl():
|
|
45
|
-
protected renderAfterContent():
|
|
44
|
+
protected render(): TemplateResult;
|
|
45
|
+
protected abstract renderControl(): TemplateResult;
|
|
46
|
+
protected renderAfterContent(): TemplateResult;
|
|
46
47
|
connectedCallback(): void;
|
|
47
48
|
disconnectedCallback(): void;
|
|
48
49
|
private handleLeadingIconSlotChange;
|
|
@@ -1 +1 @@
|
|
|
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;AAC/D,OAAO,EAAQ,
|
|
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;AAC/D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAO1C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,8BAAsB,WAAY,SAAQ,UAAU;;IAClD,OAAgB,MAAM,EAAE,cAAc,CAAwB;IAI9D,OAAO,CAAC,MAAM,CAA8B;IAEhC,OAAO,EAAE,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAY;IAEtD,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IACE,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAEzB,KAAK,UAAS;IACd,QAAQ,UAAS;IACjB,OAAO,UAAS;IAE1D,MAAM,CAAC,WAAW,CAAC,WAAW,EAAE,WAAW,EAAE,MAAM,EAAE,eAAe,GAAG,eAAe,CAAC,OAAO,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;IAO7H;;;;OAIG;IACsE,cAAc,UAAS;IAEhG;;;;OAIG;IACuE,eAAe,UAAS;IAElG;;;;OAIG;IACoE,YAAY,UAAS;IAG5F,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAAiB;IAGtD,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAAiB;IAGvD,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAiB;IAEnC,YAAY,EAAG,WAAW,CAAC;IACvB,SAAS,EAAG,WAAW,CAAC;IAE7C,OAAO,CAAC,iBAAiB,CAA+B;;cAOrC,MAAM,IAAI,cAAc;IAsC3C,SAAS,CAAC,QAAQ,CAAC,aAAa,IAAI,cAAc;IAClD,SAAS,CAAC,kBAAkB,IAAI,cAAc;IAIrC,iBAAiB;IAOjB,oBAAoB;IAc7B,OAAO,CAAC,2BAA2B;IASnC,OAAO,CAAC,4BAA4B;IAIpC,OAAO,CAAC,yBAAyB;IAIjC,OAAO,CAAC,uBAAuB;CAchC"}
|
package/field/field-base.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field-base.js","sourceRoot":"","sources":["../../src/field/field-base.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,OAAO,EAAW,eAAe,EAAE,MAAM,cAAc,CAAC;AAEjE,OAAO,EAAE,IAAI,
|
|
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';\nimport { html, LitElement } from 'lit';\nimport { TemplateResult } from 'lit-html';\nimport { property, query, queryAssignedElements, state } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './field-base.styles.js';\n\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 config: UmFieldDefaults | undefined;\n\n @property() variant: 'filled' | 'outlined' | undefined = 'filled';\n\n @property() label: string | undefined;\n @property() counter: string | undefined;\n @property({attribute: 'supporting-text'}) supportingText: string | undefined;\n @property({attribute: 'error-text'}) errorText: string | undefined;\n\n @property({type: Boolean, reflect: true}) empty = false;\n @property({type: Boolean, reflect: true}) disabled = false;\n @property({type: Boolean, reflect: true}) invalid = false;\n\n static setDefaults(contextRoot: HTMLElement, config: UmFieldDefaults): 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}) 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}) 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}) 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') labelElement!: HTMLElement;\n @query('.container') container!: HTMLElement;\n\n private labelSizeObserver: ResizeObserver | null = null;\n\n constructor() {\n super();\n this.variant = undefined;\n }\n\n protected override render(): TemplateResult {\n return html`\n <div class=\"container ${this.variant ?? this.config?.variant ?? 'filled'}\">\n <slot\n class=\"icon leading-icon\"\n name=\"leading-icon\"\n @slotchange=\"${this.handleLeadingIconSlotChange}\">\n </slot>\n <label class=\"label\" slot=\"label\" id=\"label\">\n <slot name=\"label\">${this.label}</slot>\n </label>\n <div class=\"input-wrapper\" part=\"wrapper\">\n ${this.renderControl()}\n </div>\n <slot\n class=\"icon trailing-icon\"\n name=\"trailing-icon\"\n @slotchange=\"${this.handleTrailingIconSlotChange}\">\n </slot>\n </div>\n <div class=\"supporting-text\" id=\"supporting-text\">\n <slot\n class=\"error-text\"\n name=\"error-text\"\n @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 <slot class=\"counter\" name=\"counter\">\n <div>${this.counter}</div>\n </slot>\n </div>\n ${this.renderAfterContent()}\n `;\n }\n\n protected abstract renderControl(): TemplateResult;\n protected renderAfterContent(): TemplateResult {\n return html``;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this.hasLeadingIcon = !!this.assignedLeadingIcons.length;\n\n this.#attach();\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n\n this.labelSizeObserver!.disconnect();\n this.labelSizeObserver = null;\n }\n\n async #attach(): Promise<void> {\n await this.updateComplete;\n this.labelSizeObserver = new ResizeObserver(() => this.setLabelWidthProperties())\n this.labelSizeObserver.observe(this.labelElement);\n this.setLabelWidthProperties();\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 private setLabelWidthProperties() {\n\n const width = this.labelElement.offsetWidth;\n\n this.style.setProperty('--u-field-label-width', `${width}px`);\n this.style.setProperty('--u-field-label-half-width', `${width / 2}px`);\n\n if (!width) {\n this.container.classList.add('no-label');\n return;\n }\n\n this.container.classList.remove('no-label');\n }\n}\n"]}
|
package/menu/menu-item.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-item.d.ts","sourceRoot":"","sources":["../../src/menu/menu-item.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAK/C,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAE9D,qBACa,UAAW,SAAQ,eAAe;;IAE7C,OAAgB,MAAM,0BAAU;IAIhC;;OAEG;IACH,IACI,MAAM,IAAI,OAAO,CAEpB;IACD,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,EASzB;IAED;;;;OAIG;IAC8D,OAAO,UAAS;IAEjF;;;;OAIG;IAC+D,QAAQ,UAAS;IAGnF,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAiB;IAEtC,SAAS,SAAc;IAEvB,iBAAiB;cAKP,aAAa,IAAI,kBAAkB;
|
|
1
|
+
{"version":3,"file":"menu-item.d.ts","sourceRoot":"","sources":["../../src/menu/menu-item.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAK/C,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAE9D,qBACa,UAAW,SAAQ,eAAe;;IAE7C,OAAgB,MAAM,0BAAU;IAIhC;;OAEG;IACH,IACI,MAAM,IAAI,OAAO,CAEpB;IACD,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,EASzB;IAED;;;;OAIG;IAC8D,OAAO,UAAS;IAEjF;;;;OAIG;IAC+D,QAAQ,UAAS;IAGnF,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAiB;IAEtC,SAAS,SAAc;IAEvB,iBAAiB;cAKP,aAAa,IAAI,kBAAkB;IActD,OAAO,CAAC,oBAAoB;CAG7B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
|
package/menu/menu-item.js
CHANGED
|
@@ -64,7 +64,9 @@ let UmMenuItem = class UmMenuItem extends UmButtonWrapper {
|
|
|
64
64
|
aria-hidden="true"
|
|
65
65
|
@slotchange="${this.handleIconSlotChange}"></slot>
|
|
66
66
|
</div>
|
|
67
|
-
<span class="label" id="text"
|
|
67
|
+
<span class="label" id="text">
|
|
68
|
+
<slot></slot>
|
|
69
|
+
</span>
|
|
68
70
|
`;
|
|
69
71
|
}
|
|
70
72
|
handleIconSlotChange() {
|
package/menu/menu-item.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-item.js","sourceRoot":"","sources":["../../src/menu/menu-item.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AACA,OAAO,EAAE,IAAI,EAAsB,MAAM,KAAK,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAEnF,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAE/C,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAGvD,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,eAAe;IAAxC;;QAIL,6BAAU,KAAK,EAAC;QAoBhB;;;;WAIG;QAC8D,YAAO,GAAG,KAAK,CAAC;QAEjF;;;;WAIG;QAC+D,aAAQ,GAAG,KAAK,CAAC;QAK1E,cAAS,GAAG,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"menu-item.js","sourceRoot":"","sources":["../../src/menu/menu-item.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AACA,OAAO,EAAE,IAAI,EAAsB,MAAM,KAAK,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAEnF,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAE/C,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAGvD,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,eAAe;IAAxC;;QAIL,6BAAU,KAAK,EAAC;QAoBhB;;;;WAIG;QAC8D,YAAO,GAAG,KAAK,CAAC;QAEjF;;;;WAIG;QAC+D,aAAQ,GAAG,KAAK,CAAC;QAK1E,cAAS,GAAG,UAAU,CAAC;IAwBlC,CAAC;IA3DC;;OAEG;IAEH,IAAI,MAAM;QACR,OAAO,uBAAA,IAAI,0BAAQ,CAAC;IACtB,CAAC;IACD,IAAI,MAAM,CAAC,MAAe;QACxB,uBAAA,IAAI,sBAAW,MAAM,MAAA,CAAC;QAEtB,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;YACvC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;IAC5C,CAAC;IAqBQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,GAAG,cAAc,CAAC;IAC7B,CAAC;IAEkB,aAAa;QAC9B,OAAO,IAAI,CAAA;;;;;yBAKU,IAAI,CAAC,oBAAoB;;;;;KAK7C,CAAC;IACJ,CAAC;IAEO,oBAAoB;QAC1B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;IAC/C,CAAC;;;AA9De,iBAAM,GAAG,MAAM,AAAT,CAAU;AAQhC;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;wCAGxC;AAiBgE;IAAhE,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;2CAAiB;AAOf;IAAjE,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;4CAAkB;AAGlE;IADhB,qBAAqB,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;iDACN;AAvCpC,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAiEtB","sourcesContent":["\nimport { html, HTMLTemplateResult } from 'lit';\nimport { customElement, property, queryAssignedElements } from 'lit/decorators.js';\n\nimport { styles } from './menu-item.styles.js';\n\nimport { UmButtonWrapper } from '../shared/button-wrapper.js';\n\n@customElement('u-menu-item')\nexport class UmMenuItem extends UmButtonWrapper {\n\n static override styles = styles;\n\n #active = false;\n\n /**\n * Force show focus ring\n */\n @property({type: Boolean, reflect: true})\n get active(): boolean {\n return this.#active;\n }\n set active(active: boolean) {\n this.#active = active;\n\n if (active) {\n this.classList.add('force-focus-ring');\n return;\n }\n\n this.classList.remove('force-focus-ring');\n }\n\n /**\n * Whether the drawer item has icon or not\n *\n * _Note:_ Readonly\n */\n @property({type: Boolean, attribute: 'has-icon', reflect: true}) hasIcon = false;\n\n /**\n * Whether the drawer item has badge or not\n *\n * _Note:_ Readonly\n */\n @property({type: Boolean, attribute: 'has-badge', reflect: true}) hasBadge = false;\n\n @queryAssignedElements({slot: 'icon', flatten: true})\n private readonly assignedIcons!: HTMLElement[];\n\n override innerRole = 'menuitem';\n\n override connectedCallback() {\n super.connectedCallback();\n this.role = 'presentation';\n }\n\n protected override renderContent(): HTMLTemplateResult {\n return html`\n <div class=\"icon\">\n <slot\n name=\"icon\"\n aria-hidden=\"true\"\n @slotchange=\"${this.handleIconSlotChange}\"></slot>\n </div>\n <span class=\"label\" id=\"text\">\n <slot></slot>\n </span>\n `;\n }\n\n private handleIconSlotChange() {\n this.hasIcon = this.assignedIcons.length > 0;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-menu-item': UmMenuItem;\n }\n}\n"]}
|
package/package.json
CHANGED
package/select/option.d.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { UmMenuItem } from '../menu/menu-item.js';
|
|
2
|
-
import { UmSelect } from './select.js';
|
|
3
2
|
import './select.js';
|
|
4
3
|
export declare class UmOption extends UmMenuItem {
|
|
5
4
|
#private;
|
|
@@ -7,10 +6,8 @@ export declare class UmOption extends UmMenuItem {
|
|
|
7
6
|
set value(value: string);
|
|
8
7
|
get selected(): boolean;
|
|
9
8
|
set selected(selected: boolean);
|
|
10
|
-
get _selectedAttribute()
|
|
11
|
-
set _selectedAttribute(
|
|
12
|
-
private get _nativeOption();
|
|
13
|
-
select: UmSelect | null;
|
|
9
|
+
private get _selectedAttribute();
|
|
10
|
+
private set _selectedAttribute(value);
|
|
14
11
|
connectedCallback(): void;
|
|
15
12
|
disconnectedCallback(): void;
|
|
16
13
|
}
|
package/select/option.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"option.d.ts","sourceRoot":"","sources":["../../src/select/option.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"option.d.ts","sourceRoot":"","sources":["../../src/select/option.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAGlD,OAAO,aAAa,CAAC;AAErB,qBACa,QAAS,SAAQ,UAAU;;IAKtC,IACI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED,IACI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,QAAQ,EAAE,OAAO,EAU7B;IAID,OAAO,KAAK,kBAAkB,GAE7B;IAED,OAAO,KAAK,kBAAkB,QAO7B;IAIQ,iBAAiB;IAQjB,oBAAoB;CAiE9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,QAAQ,CAAC;KACtB;CACF"}
|
package/select/option.js
CHANGED
|
@@ -15,7 +15,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
|
|
|
15
15
|
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
16
16
|
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
17
17
|
};
|
|
18
|
-
var _UmOption_instances,
|
|
18
|
+
var _UmOption_instances, _UmOption_nativeOption, _UmOption_mutationObserver, _UmOption_select, _UmOption_attach, _UmOption_handleClick, _UmOption_updateContent, _UmOption_setNativeOption;
|
|
19
19
|
import { customElement, property, state } from 'lit/decorators.js';
|
|
20
20
|
import { UmMenuItem } from '../menu/menu-item.js';
|
|
21
21
|
import './select.js';
|
|
@@ -23,92 +23,99 @@ let UmOption = class UmOption extends UmMenuItem {
|
|
|
23
23
|
constructor() {
|
|
24
24
|
super(...arguments);
|
|
25
25
|
_UmOption_instances.add(this);
|
|
26
|
-
|
|
27
|
-
|
|
26
|
+
_UmOption_nativeOption.set(this, document.createElement('option'));
|
|
27
|
+
_UmOption_mutationObserver.set(this, null);
|
|
28
|
+
_UmOption_select.set(this, void 0);
|
|
28
29
|
}
|
|
29
30
|
get value() {
|
|
30
|
-
return __classPrivateFieldGet(this,
|
|
31
|
+
return __classPrivateFieldGet(this, _UmOption_nativeOption, "f").value;
|
|
31
32
|
}
|
|
32
33
|
set value(value) {
|
|
33
|
-
|
|
34
|
-
value = String(value);
|
|
35
|
-
this.value = value;
|
|
36
|
-
return;
|
|
37
|
-
}
|
|
38
|
-
__classPrivateFieldSet(this, _UmOption_value, value, "f");
|
|
39
|
-
if (!this._nativeOption) {
|
|
40
|
-
return;
|
|
41
|
-
}
|
|
42
|
-
this._nativeOption.value = value;
|
|
34
|
+
__classPrivateFieldGet(this, _UmOption_nativeOption, "f").value = value;
|
|
43
35
|
}
|
|
44
36
|
get selected() {
|
|
45
|
-
return this.
|
|
37
|
+
return __classPrivateFieldGet(this, _UmOption_nativeOption, "f").selected;
|
|
46
38
|
}
|
|
47
39
|
set selected(selected) {
|
|
48
|
-
if (selected ===
|
|
40
|
+
if (this.selected === selected) {
|
|
49
41
|
return;
|
|
50
42
|
}
|
|
51
|
-
__classPrivateFieldGet(this,
|
|
43
|
+
__classPrivateFieldGet(this, _UmOption_nativeOption, "f").selected = selected;
|
|
44
|
+
if (__classPrivateFieldGet(this, _UmOption_select, "f")) {
|
|
45
|
+
__classPrivateFieldGet(this, _UmOption_select, "f").empty = !__classPrivateFieldGet(this, _UmOption_nativeOption, "f").textContent?.trim();
|
|
46
|
+
}
|
|
52
47
|
}
|
|
53
48
|
get _selectedAttribute() {
|
|
54
|
-
return __classPrivateFieldGet(this,
|
|
49
|
+
return __classPrivateFieldGet(this, _UmOption_nativeOption, "f").hasAttribute('selected');
|
|
55
50
|
}
|
|
51
|
+
// @ts-ignore
|
|
56
52
|
set _selectedAttribute(selected) {
|
|
57
|
-
__classPrivateFieldSet(this, _UmOption_selectedAttribute, selected, "f");
|
|
58
|
-
if (!this._nativeOption) {
|
|
59
|
-
return;
|
|
60
|
-
}
|
|
61
53
|
if (selected) {
|
|
62
|
-
this.
|
|
63
|
-
this.select?.requestUpdate();
|
|
54
|
+
__classPrivateFieldGet(this, _UmOption_nativeOption, "f").setAttribute('selected', '');
|
|
64
55
|
return;
|
|
65
56
|
}
|
|
66
|
-
this.
|
|
67
|
-
}
|
|
68
|
-
get _nativeOption() {
|
|
69
|
-
if (!this.select) {
|
|
70
|
-
return null;
|
|
71
|
-
}
|
|
72
|
-
const index = this.select.options.indexOf(this);
|
|
73
|
-
return this.select.nativeOptions[index];
|
|
57
|
+
__classPrivateFieldGet(this, _UmOption_nativeOption, "f").removeAttribute('selected');
|
|
74
58
|
}
|
|
75
59
|
connectedCallback() {
|
|
76
60
|
super.connectedCallback();
|
|
77
61
|
this.addEventListener('click', __classPrivateFieldGet(this, _UmOption_instances, "m", _UmOption_handleClick));
|
|
78
62
|
this.setAttribute('tabindex', '-1');
|
|
79
|
-
this
|
|
80
|
-
? this.parentElement
|
|
81
|
-
: null;
|
|
63
|
+
__classPrivateFieldGet(this, _UmOption_instances, "m", _UmOption_attach).call(this);
|
|
82
64
|
}
|
|
83
65
|
disconnectedCallback() {
|
|
84
66
|
super.disconnectedCallback();
|
|
85
67
|
this.removeEventListener('click', __classPrivateFieldGet(this, _UmOption_instances, "m", _UmOption_handleClick));
|
|
86
|
-
this
|
|
68
|
+
__classPrivateFieldGet(this, _UmOption_mutationObserver, "f").disconnect();
|
|
69
|
+
__classPrivateFieldSet(this, _UmOption_mutationObserver, null, "f");
|
|
70
|
+
__classPrivateFieldGet(this, _UmOption_nativeOption, "f").remove();
|
|
71
|
+
if (!__classPrivateFieldGet(this, _UmOption_select, "f")) {
|
|
72
|
+
return;
|
|
73
|
+
}
|
|
74
|
+
// eslint-disable-next-line no-self-assign
|
|
75
|
+
__classPrivateFieldGet(this, _UmOption_select, "f").value = __classPrivateFieldGet(this, _UmOption_select, "f").value;
|
|
76
|
+
__classPrivateFieldSet(this, _UmOption_select, null, "f");
|
|
87
77
|
}
|
|
88
78
|
};
|
|
89
|
-
|
|
90
|
-
|
|
79
|
+
_UmOption_nativeOption = new WeakMap();
|
|
80
|
+
_UmOption_mutationObserver = new WeakMap();
|
|
81
|
+
_UmOption_select = new WeakMap();
|
|
91
82
|
_UmOption_instances = new WeakSet();
|
|
92
|
-
|
|
93
|
-
|
|
83
|
+
_UmOption_attach = async function _UmOption_attach() {
|
|
84
|
+
__classPrivateFieldSet(this, _UmOption_select, this.parentElement.tagName === 'U-SELECT'
|
|
85
|
+
? this.parentElement
|
|
86
|
+
: null, "f");
|
|
87
|
+
if (!__classPrivateFieldGet(this, _UmOption_select, "f")) {
|
|
94
88
|
return;
|
|
95
89
|
}
|
|
96
|
-
|
|
97
|
-
__classPrivateFieldGet(this,
|
|
98
|
-
this.
|
|
99
|
-
this.select.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
|
|
100
|
-
this.select.dispatchEvent(new Event('change', { bubbles: true }));
|
|
90
|
+
__classPrivateFieldSet(this, _UmOption_mutationObserver, new MutationObserver(() => __classPrivateFieldGet(this, _UmOption_instances, "m", _UmOption_updateContent).call(this)), "f");
|
|
91
|
+
__classPrivateFieldGet(this, _UmOption_mutationObserver, "f").observe(this, { characterData: true, childList: true, subtree: true });
|
|
92
|
+
await __classPrivateFieldGet(this, _UmOption_instances, "m", _UmOption_setNativeOption).call(this);
|
|
101
93
|
};
|
|
102
|
-
|
|
103
|
-
if (!this
|
|
94
|
+
_UmOption_handleClick = function _UmOption_handleClick(e) {
|
|
95
|
+
if (!__classPrivateFieldGet(this, _UmOption_select, "f")) {
|
|
104
96
|
return;
|
|
105
97
|
}
|
|
106
|
-
|
|
107
|
-
this.
|
|
98
|
+
e.stopPropagation();
|
|
99
|
+
this.selected = true;
|
|
100
|
+
// eslint-disable-next-line no-self-assign
|
|
101
|
+
__classPrivateFieldGet(this, _UmOption_select, "f").value = __classPrivateFieldGet(this, _UmOption_select, "f").value;
|
|
102
|
+
__classPrivateFieldGet(this, _UmOption_select, "f").dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
|
|
103
|
+
__classPrivateFieldGet(this, _UmOption_select, "f").dispatchEvent(new Event('change', { bubbles: true }));
|
|
104
|
+
__classPrivateFieldGet(this, _UmOption_select, "f").menu?.close();
|
|
105
|
+
};
|
|
106
|
+
_UmOption_updateContent = function _UmOption_updateContent() {
|
|
107
|
+
__classPrivateFieldGet(this, _UmOption_nativeOption, "f").textContent = this.textContent;
|
|
108
108
|
};
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
109
|
+
_UmOption_setNativeOption = async function _UmOption_setNativeOption() {
|
|
110
|
+
if (this.hasAttribute('selected')) {
|
|
111
|
+
__classPrivateFieldGet(this, _UmOption_nativeOption, "f").setAttribute('selected', '');
|
|
112
|
+
}
|
|
113
|
+
else {
|
|
114
|
+
__classPrivateFieldGet(this, _UmOption_nativeOption, "f").removeAttribute('selected');
|
|
115
|
+
}
|
|
116
|
+
__classPrivateFieldGet(this, _UmOption_select, "f").nativeSelect.appendChild(__classPrivateFieldGet(this, _UmOption_nativeOption, "f"));
|
|
117
|
+
await this.updateComplete;
|
|
118
|
+
__classPrivateFieldGet(this, _UmOption_instances, "m", _UmOption_updateContent).call(this);
|
|
112
119
|
};
|
|
113
120
|
__decorate([
|
|
114
121
|
property({ reflect: true })
|
package/select/option.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"option.js","sourceRoot":"","sources":["../../src/select/option.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAGlD,OAAO,aAAa,CAAC;AAGd,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;;QAEL,
|
|
1
|
+
{"version":3,"file":"option.js","sourceRoot":"","sources":["../../src/select/option.ts"],"names":[],"mappings":"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","sourcesContent":["import { customElement, property, state } from 'lit/decorators.js';\n\nimport { UmMenuItem } from '../menu/menu-item.js';\nimport { UmSelect } from './select.js';\n\nimport './select.js';\n\n@customElement('u-option')\nexport class UmOption extends UmMenuItem {\n\n #nativeOption: HTMLOptionElement = document.createElement('option');\n #mutationObserver: MutationObserver | null = null;\n\n @property({reflect: true})\n get value(): string {\n return this.#nativeOption.value;\n }\n set value(value: string) {\n this.#nativeOption.value = value;\n }\n\n @state()\n get selected(): boolean {\n return this.#nativeOption.selected;\n }\n set selected(selected: boolean) {\n if (this.selected === selected) {\n return;\n }\n\n this.#nativeOption.selected = selected;\n\n if (this.#select) {\n this.#select.empty = !this.#nativeOption.textContent?.trim();\n }\n }\n\n @property({type: Boolean, attribute: 'selected'})\n // @ts-ignore\n private get _selectedAttribute(): boolean {\n return this.#nativeOption.hasAttribute('selected');\n }\n // @ts-ignore\n private set _selectedAttribute(selected: boolean) {\n if (selected) {\n this.#nativeOption.setAttribute('selected', '');\n return;\n }\n\n this.#nativeOption.removeAttribute('selected');\n }\n\n #select!: UmSelect | null;\n\n override connectedCallback() {\n super.connectedCallback();\n this.addEventListener('click', this.#handleClick);\n this.setAttribute('tabindex', '-1');\n\n this.#attach();\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('click', this.#handleClick);\n\n this.#mutationObserver!.disconnect();\n this.#mutationObserver = null;\n this.#nativeOption.remove();\n\n if (!this.#select) {\n return;\n }\n\n // eslint-disable-next-line no-self-assign\n this.#select.value = this.#select.value;\n this.#select = null;\n }\n\n async #attach(): Promise<void> {\n\n this.#select = this.parentElement!.tagName === 'U-SELECT'\n ? this.parentElement as UmSelect\n : null;\n\n if (!this.#select) {\n return;\n }\n\n this.#mutationObserver = new MutationObserver(() => this.#updateContent())\n this.#mutationObserver.observe(this, {characterData: true, childList: true, subtree: true});\n\n await this.#setNativeOption();\n }\n\n #handleClick(e: Event) {\n if (!this.#select) {\n return;\n }\n\n e.stopPropagation();\n\n this.selected = true;\n // eslint-disable-next-line no-self-assign\n this.#select.value = this.#select.value;\n this.#select.dispatchEvent(new InputEvent('input', {bubbles: true, composed: true}));\n this.#select.dispatchEvent(new Event('change', {bubbles: true}));\n\n this.#select.menu?.close();\n }\n\n #updateContent() {\n this.#nativeOption.textContent = this.textContent;\n }\n\n async #setNativeOption(): Promise<void> {\n if (this.hasAttribute('selected')) {\n this.#nativeOption.setAttribute('selected', '');\n } else {\n this.#nativeOption.removeAttribute('selected');\n }\n\n this.#select!.nativeSelect.appendChild(this.#nativeOption);\n\n await this.updateComplete;\n this.#updateContent();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-option': UmOption;\n }\n}\n"]}
|
package/select/select.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { PropertyValues } from '@lit/reactive-element';
|
|
2
|
-
import {
|
|
2
|
+
import { TemplateResult } from 'lit-html';
|
|
3
3
|
import { UmMenu } from '../menu/menu.js';
|
|
4
4
|
import { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';
|
|
5
5
|
import { UmOption } from './option.js';
|
|
@@ -7,18 +7,18 @@ import './option.js';
|
|
|
7
7
|
export declare class UmSelect extends UmTextFieldBase {
|
|
8
8
|
#private;
|
|
9
9
|
static styles: import("lit").CSSResultGroup[];
|
|
10
|
+
nativeSelect: HTMLSelectElement;
|
|
10
11
|
get value(): string;
|
|
11
12
|
set value(value: string);
|
|
12
13
|
menu: UmMenu;
|
|
13
|
-
|
|
14
|
-
nativeOptions: HTMLOptionElement[];
|
|
14
|
+
input: HTMLElement;
|
|
15
15
|
get selectedIndex(): number;
|
|
16
16
|
set selectedIndex(index: number);
|
|
17
17
|
get selectedOption(): UmOption | null;
|
|
18
18
|
private _options;
|
|
19
19
|
get options(): UmOption[];
|
|
20
|
-
protected renderControl():
|
|
21
|
-
protected renderAfterContent():
|
|
20
|
+
protected renderControl(): TemplateResult;
|
|
21
|
+
protected renderAfterContent(): TemplateResult;
|
|
22
22
|
protected updated(changedProperties: PropertyValues): void;
|
|
23
23
|
connectedCallback(): void;
|
|
24
24
|
disconnectedCallback(): void;
|
package/select/select.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/select/select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/select/select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAM1C,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAC/E,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,OAAO,aAAa,CAAC;AAErB,qBACa,QAAS,SAAQ,eAAe;;IAC3C,OAAgB,MAAM,iCAAoC;IAE1D,YAAY,EAAE,iBAAiB,CAAoC;IAGnE,IACI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAQtB;IAEgB,IAAI,EAAG,MAAM,CAAC;IACd,KAAK,EAAG,WAAW,CAAC;IAErC,IACI,aAAa,IAAI,MAAM,CAE1B;IACD,IAAI,aAAa,CAAC,KAAK,EAAE,MAAM,EAI9B;IAED,IAAI,cAAc,IAAI,QAAQ,GAAG,IAAI,CAEpC;IAED,OAAO,CAAC,QAAQ,CAAkB;IAClC,IAAI,OAAO,IAAI,QAAQ,EAAE,CAExB;cAEkB,aAAa,IAAI,cAAc;cAI/B,kBAAkB,IAAI,cAAc;cAQpC,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAMnD,iBAAiB;IAOjB,oBAAoB;CA0C9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,QAAQ,CAAC;KACtB;CACF"}
|
package/select/select.js
CHANGED
|
@@ -9,9 +9,16 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
|
|
|
9
9
|
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
10
10
|
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
11
11
|
};
|
|
12
|
-
var
|
|
12
|
+
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
|
|
13
|
+
if (kind === "m") throw new TypeError("Private method is not writable");
|
|
14
|
+
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
|
|
15
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
16
|
+
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
17
|
+
};
|
|
18
|
+
var _UmSelect_instances, _UmSelect_connected, _UmSelect_handleClick, _UmSelect_handleMenuClick, _UmSelect_handleSlotChange, _UmSelect_attach;
|
|
13
19
|
import { html } from 'lit';
|
|
14
|
-
import { customElement, query,
|
|
20
|
+
import { customElement, query, state } from 'lit/decorators.js';
|
|
21
|
+
import { html as staticHtml } from 'lit/static-html.js';
|
|
15
22
|
import { styles } from './select.styles.js';
|
|
16
23
|
import { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';
|
|
17
24
|
import { UmOption } from './option.js';
|
|
@@ -20,23 +27,30 @@ let UmSelect = class UmSelect extends UmTextFieldBase {
|
|
|
20
27
|
constructor() {
|
|
21
28
|
super(...arguments);
|
|
22
29
|
_UmSelect_instances.add(this);
|
|
30
|
+
this.nativeSelect = document.createElement('select');
|
|
31
|
+
_UmSelect_connected.set(this, false);
|
|
23
32
|
this._options = [];
|
|
24
33
|
_UmSelect_handleClick.set(this, () => {
|
|
25
34
|
this.menu.toggle();
|
|
26
35
|
});
|
|
27
36
|
}
|
|
28
37
|
get value() {
|
|
29
|
-
return this.nativeSelect
|
|
38
|
+
return this.nativeSelect.value;
|
|
30
39
|
}
|
|
31
40
|
set value(value) {
|
|
32
41
|
this.nativeSelect.value = value;
|
|
42
|
+
if (!__classPrivateFieldGet(this, _UmSelect_connected, "f")) {
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
33
45
|
this.elementInternals.setFormValue(value);
|
|
34
46
|
}
|
|
35
47
|
get selectedIndex() {
|
|
36
48
|
return this.nativeSelect?.selectedIndex ?? -1;
|
|
37
49
|
}
|
|
38
50
|
set selectedIndex(index) {
|
|
39
|
-
this.nativeSelect
|
|
51
|
+
if (this.nativeSelect) {
|
|
52
|
+
this.nativeSelect.selectedIndex = index;
|
|
53
|
+
}
|
|
40
54
|
}
|
|
41
55
|
get selectedOption() {
|
|
42
56
|
return this.options[this.selectedIndex] ?? null;
|
|
@@ -45,13 +59,7 @@ let UmSelect = class UmSelect extends UmTextFieldBase {
|
|
|
45
59
|
return this._options;
|
|
46
60
|
}
|
|
47
61
|
renderControl() {
|
|
48
|
-
return
|
|
49
|
-
<div class="input">
|
|
50
|
-
<select>
|
|
51
|
-
${this.options.map(o => html `<option value="${o.value}" ?selected=${o._selectedAttribute}>${o.textContent}</option>`)}
|
|
52
|
-
</select>
|
|
53
|
-
</div>
|
|
54
|
-
`;
|
|
62
|
+
return staticHtml `<div class="input"></div>`;
|
|
55
63
|
}
|
|
56
64
|
renderAfterContent() {
|
|
57
65
|
return html `
|
|
@@ -62,19 +70,23 @@ let UmSelect = class UmSelect extends UmTextFieldBase {
|
|
|
62
70
|
}
|
|
63
71
|
updated(changedProperties) {
|
|
64
72
|
super.updated(changedProperties);
|
|
65
|
-
this.empty =
|
|
66
|
-
this.elementInternals.setFormValue(this.nativeSelect.value);
|
|
73
|
+
this.empty = !this.selectedOption?.textContent?.trim();
|
|
74
|
+
this.elementInternals.setFormValue(this.nativeSelect.value || null);
|
|
67
75
|
}
|
|
68
76
|
connectedCallback() {
|
|
69
77
|
super.connectedCallback();
|
|
78
|
+
__classPrivateFieldSet(this, _UmSelect_connected, true, "f");
|
|
70
79
|
__classPrivateFieldGet(this, _UmSelect_instances, "m", _UmSelect_attach).call(this);
|
|
71
80
|
}
|
|
72
81
|
disconnectedCallback() {
|
|
73
82
|
super.disconnectedCallback();
|
|
83
|
+
__classPrivateFieldSet(this, _UmSelect_connected, false, "f");
|
|
84
|
+
this.nativeSelect.remove();
|
|
74
85
|
this.container.removeEventListener('click', __classPrivateFieldGet(this, _UmSelect_handleClick, "f"));
|
|
75
86
|
this.menu.removeEventListener('click', __classPrivateFieldGet(this, _UmSelect_instances, "m", _UmSelect_handleMenuClick));
|
|
76
87
|
}
|
|
77
88
|
};
|
|
89
|
+
_UmSelect_connected = new WeakMap();
|
|
78
90
|
_UmSelect_handleClick = new WeakMap();
|
|
79
91
|
_UmSelect_instances = new WeakSet();
|
|
80
92
|
_UmSelect_handleMenuClick = function _UmSelect_handleMenuClick(e) {
|
|
@@ -95,6 +107,7 @@ _UmSelect_handleSlotChange = function _UmSelect_handleSlotChange(e) {
|
|
|
95
107
|
};
|
|
96
108
|
_UmSelect_attach = async function _UmSelect_attach() {
|
|
97
109
|
await this.updateComplete;
|
|
110
|
+
this.input.appendChild(this.nativeSelect);
|
|
98
111
|
this.container.addEventListener('click', __classPrivateFieldGet(this, _UmSelect_handleClick, "f"));
|
|
99
112
|
this.menu.anchorElement = this.container;
|
|
100
113
|
this.menu.addEventListener('click', __classPrivateFieldGet(this, _UmSelect_instances, "m", _UmSelect_handleMenuClick));
|
|
@@ -107,11 +120,8 @@ __decorate([
|
|
|
107
120
|
query('u-menu')
|
|
108
121
|
], UmSelect.prototype, "menu", void 0);
|
|
109
122
|
__decorate([
|
|
110
|
-
query('
|
|
111
|
-
], UmSelect.prototype, "
|
|
112
|
-
__decorate([
|
|
113
|
-
queryAll('option')
|
|
114
|
-
], UmSelect.prototype, "nativeOptions", void 0);
|
|
123
|
+
query('.input')
|
|
124
|
+
], UmSelect.prototype, "input", void 0);
|
|
115
125
|
__decorate([
|
|
116
126
|
state()
|
|
117
127
|
], UmSelect.prototype, "selectedIndex", null);
|
package/select/select.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.js","sourceRoot":"","sources":["../../src/select/select.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"select.js","sourceRoot":"","sources":["../../src/select/select.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\nimport { html } from 'lit';\nimport { TemplateResult } from 'lit-html';\nimport { customElement, query, state } from 'lit/decorators.js';\nimport { html as staticHtml } from 'lit/static-html.js';\n\nimport { styles } from './select.styles.js';\n\nimport { UmMenu } from '../menu/menu.js';\nimport { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';\nimport { UmOption } from './option.js';\n\nimport './option.js';\n\n@customElement('u-select')\nexport class UmSelect extends UmTextFieldBase {\n static override styles = [UmTextFieldBase.styles, styles];\n\n nativeSelect: HTMLSelectElement = document.createElement('select');\n #connected = false;\n\n @state()\n get value(): string {\n return this.nativeSelect.value;\n }\n set value(value: string) {\n this.nativeSelect.value = value;\n\n if (!this.#connected) {\n return;\n }\n\n this.elementInternals.setFormValue(value);\n }\n\n @query('u-menu') menu!: UmMenu;\n @query('.input') input!: HTMLElement;\n\n @state()\n get selectedIndex(): number {\n return this.nativeSelect?.selectedIndex ?? -1;\n }\n set selectedIndex(index: number) {\n if (this.nativeSelect) {\n this.nativeSelect.selectedIndex = index;\n }\n }\n\n get selectedOption(): UmOption | null {\n return this.options[this.selectedIndex] ?? null;\n }\n\n private _options: UmOption[] = [];\n get options(): UmOption[] {\n return this._options;\n }\n\n protected override renderControl(): TemplateResult {\n return staticHtml`<div class=\"input\"></div>`;\n }\n\n protected override renderAfterContent(): TemplateResult {\n return html`\n <u-menu>\n <slot @slotchange=${this.#handleSlotChange}></slot>\n </u-menu>\n `;\n }\n\n protected override updated(changedProperties: PropertyValues) {\n super.updated(changedProperties);\n this.empty = !this.selectedOption?.textContent?.trim();\n this.elementInternals.setFormValue(this.nativeSelect.value || null);\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n this.#connected = true;\n this.#attach();\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.#connected = false;\n this.nativeSelect.remove();\n this.container.removeEventListener('click', this.#handleClick);\n this.menu.removeEventListener('click', this.#handleMenuClick);\n }\n\n #handleClick = () => {\n this.menu.toggle();\n };\n\n #handleMenuClick(e: Event) {\n e.stopPropagation();\n }\n\n #handleSlotChange(e: Event) {\n const slot = e.target as HTMLSlotElement;\n const elements = slot.assignedElements({\n flatten: true\n });\n\n this.options.length = 0;\n\n for (const element of elements) {\n if (element instanceof UmOption) {\n this.options.push(element)\n }\n }\n\n this.requestUpdate();\n }\n\n async #attach(): Promise<void> {\n await this.updateComplete;\n\n this.input.appendChild(this.nativeSelect);\n this.container.addEventListener('click', this.#handleClick);\n\n this.menu.anchorElement = this.container;\n this.menu.addEventListener('click', this.#handleMenuClick);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-select': UmSelect;\n }\n}\n"]}
|