@universal-material/web 3.0.66 → 3.0.67
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 +2562 -2623
- 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/package.json +1 -1
- package/select/option.d.ts +3 -5
- package/select/option.d.ts.map +1 -1
- package/select/option.js +52 -53
- 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 +27 -19
- 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":";;;;;;;;;;;;AAAA,OAAO,EAAE,OAAO,EAAW,eAAe,EAAE,MAAM,cAAc,CAAC;AAEjE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEvC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,qBAAqB,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAElF,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAGnE,MAAM,OAAgB,WAAY,SAAQ,UAAU;IAkBlD,MAAM,CAAC,WAAW,CAAC,WAAwB,EAAE,MAAuB;QAClE,OAAO,IAAI,eAAe,CAAC,WAAW,EAAE;YACtC,OAAO,EAAE,oBAAoB;YAC7B,YAAY,EAAE,MAAM;SACrB,CAAC,CAAC;IACL,CAAC;IAqCD;QACE,KAAK,EAAE,CAAC;;QAtDE,YAAO,GAAsC,QAAQ,CAAC;QAOxB,UAAK,GAAG,KAAK,CAAC;QACd,aAAQ,GAAG,KAAK,CAAC;QACjB,YAAO,GAAG,KAAK,CAAC;QAS1D;;;;WAIG;QACsE,mBAAc,GAAG,KAAK,CAAC;QAEhG;;;;WAIG;QACuE,oBAAe,GAAG,KAAK,CAAC;QAElG;;;;WAIG;QACoE,iBAAY,GAAG,KAAK,CAAC;QAcpF,sBAAiB,GAA0B,IAAI,CAAC;QAItD,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;IAC3B,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;8BACe,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,MAAM,EAAE,OAAO,IAAI,QAAQ;;;;yBAIrD,IAAI,CAAC,2BAA2B;;;+BAG1B,IAAI,CAAC,KAAK;;;YAG7B,IAAI,CAAC,aAAa,EAAE;;;;;yBAKP,IAAI,CAAC,4BAA4B;;;;;;;yBAOjC,IAAI,CAAC,yBAAyB;iBACtC,IAAI,CAAC,SAAS;;;iBAGd,IAAI,CAAC,cAAc;;;iBAGnB,IAAI,CAAC,OAAO;;;QAGrB,IAAI,CAAC,kBAAkB,EAAE;KAC5B,CAAC;IACJ,CAAC;IAGS,kBAAkB;QAC1B,OAAO,IAAI,CAAA,EAAE,CAAC;IAChB,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC;QAEzD,uBAAA,IAAI,mDAAQ,MAAZ,IAAI,CAAU,CAAC;IACjB,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE7B,IAAI,CAAC,iBAAkB,CAAC,UAAU,EAAE,CAAC;QACrC,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;IAChC,CAAC;IASO,2BAA2B;QACjC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,UAAU,GAAG,MAAM,CAAC;QAC5C,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,oBAAoB,CAAC,MAAM,GAAG,CAAC,CAAC;QAE3D,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,UAAU,GAAG,EAAE,CAAC;QAC1C,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,4BAA4B;QAClC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,qBAAqB,CAAC,MAAM,GAAG,CAAC,CAAC;IAC/D,CAAC;IAEO,yBAAyB;QAC/B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,kBAAkB,CAAC,MAAM,GAAG,CAAC,CAAC;IACzD,CAAC;IAEO,uBAAuB;QAE7B,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC;QAE5C,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,uBAAuB,EAAE,GAAG,KAAK,IAAI,CAAC,CAAC;QAC9D,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,4BAA4B,EAAE,GAAG,KAAK,GAAG,CAAC,IAAI,CAAC,CAAC;QAEvE,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;YACzC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;IAC9C,CAAC;;8DArCD,KAAK;IACH,MAAM,IAAI,CAAC,cAAc,CAAC;IAC1B,IAAI,CAAC,iBAAiB,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,CAAC,CAAA;IACjF,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAClD,IAAI,CAAC,uBAAuB,EAAE,CAAC;AACjC,CAAC;AA9He,kBAAM,GAAmB,CAAC,UAAU,EAAE,MAAM,CAAC,AAAvC,CAAwC;AAItD;IAFP,OAAO,CAAC,EAAC,OAAO,EAAE,oBAAoB,EAAE,SAAS,EAAE,IAAI,EAAC,CAAC;IACzD,KAAK,EAAE;2CACoC;AAEhC;IAAX,QAAQ,EAAE;4CAAuD;AAEtD;IAAX,QAAQ,EAAE;0CAA2B;AAC1B;IAAX,QAAQ,EAAE;4CAA6B;AACE;IAAzC,QAAQ,CAAC,EAAC,SAAS,EAAE,iBAAiB,EAAC,CAAC;mDAAoC;AACxC;IAApC,QAAQ,CAAC,EAAC,SAAS,EAAE,YAAY,EAAC,CAAC;8CAA+B;AAEzB;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;0CAAe;AACd;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;6CAAkB;AACjB;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;4CAAiB;AAce;IAAxE,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;mDAAwB;AAOtB;IAAzE,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,mBAAmB,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;oDAAyB;AAO3B;IAAtE,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;iDAAsB;AAG3E;IADhB,qBAAqB,CAAC,EAAC,IAAI,EAAE,cAAc,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;yDACP;AAGrC;IADhB,qBAAqB,CAAC,EAAC,IAAI,EAAE,eAAe,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;0DACP;AAGtC;IADhB,qBAAqB,CAAC,EAAC,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;uDACP;AAEnC;IAAhB,KAAK,CAAC,QAAQ,CAAC;iDAA4B;AACvB;IAApB,KAAK,CAAC,YAAY,CAAC;8CAAyB","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/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,12 +6,11 @@ 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;
|
|
13
|
+
private setNativeOption;
|
|
16
14
|
}
|
|
17
15
|
declare global {
|
|
18
16
|
interface HTMLElementTagNameMap {
|
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;;IAItC,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;IA2C7B,OAAO,CAAC,eAAe;CAYxB;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_select, _UmOption_attach, _UmOption_handleClick;
|
|
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,91 @@ 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_select.set(this, void 0);
|
|
28
28
|
}
|
|
29
29
|
get value() {
|
|
30
|
-
return __classPrivateFieldGet(this,
|
|
30
|
+
return __classPrivateFieldGet(this, _UmOption_nativeOption, "f").value;
|
|
31
31
|
}
|
|
32
32
|
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;
|
|
33
|
+
__classPrivateFieldGet(this, _UmOption_nativeOption, "f").value = value;
|
|
43
34
|
}
|
|
44
35
|
get selected() {
|
|
45
|
-
return this.
|
|
36
|
+
return __classPrivateFieldGet(this, _UmOption_nativeOption, "f").selected;
|
|
46
37
|
}
|
|
47
38
|
set selected(selected) {
|
|
48
|
-
if (selected ===
|
|
39
|
+
if (this.selected === selected) {
|
|
49
40
|
return;
|
|
50
41
|
}
|
|
51
|
-
__classPrivateFieldGet(this,
|
|
42
|
+
__classPrivateFieldGet(this, _UmOption_nativeOption, "f").selected = selected;
|
|
43
|
+
if (__classPrivateFieldGet(this, _UmOption_select, "f")) {
|
|
44
|
+
__classPrivateFieldGet(this, _UmOption_select, "f").empty = !__classPrivateFieldGet(this, _UmOption_nativeOption, "f").textContent?.trim();
|
|
45
|
+
}
|
|
52
46
|
}
|
|
53
47
|
get _selectedAttribute() {
|
|
54
|
-
return __classPrivateFieldGet(this,
|
|
48
|
+
return __classPrivateFieldGet(this, _UmOption_nativeOption, "f").hasAttribute('selected');
|
|
55
49
|
}
|
|
50
|
+
// @ts-ignore
|
|
56
51
|
set _selectedAttribute(selected) {
|
|
57
|
-
__classPrivateFieldSet(this, _UmOption_selectedAttribute, selected, "f");
|
|
58
|
-
if (!this._nativeOption) {
|
|
59
|
-
return;
|
|
60
|
-
}
|
|
61
52
|
if (selected) {
|
|
62
|
-
this.
|
|
63
|
-
this.select?.requestUpdate();
|
|
53
|
+
__classPrivateFieldGet(this, _UmOption_nativeOption, "f").setAttribute('selected', '');
|
|
64
54
|
return;
|
|
65
55
|
}
|
|
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];
|
|
56
|
+
__classPrivateFieldGet(this, _UmOption_nativeOption, "f").removeAttribute('selected');
|
|
74
57
|
}
|
|
75
58
|
connectedCallback() {
|
|
76
59
|
super.connectedCallback();
|
|
77
60
|
this.addEventListener('click', __classPrivateFieldGet(this, _UmOption_instances, "m", _UmOption_handleClick));
|
|
78
61
|
this.setAttribute('tabindex', '-1');
|
|
79
|
-
this
|
|
80
|
-
? this.parentElement
|
|
81
|
-
: null;
|
|
62
|
+
__classPrivateFieldGet(this, _UmOption_instances, "m", _UmOption_attach).call(this);
|
|
82
63
|
}
|
|
83
64
|
disconnectedCallback() {
|
|
84
65
|
super.disconnectedCallback();
|
|
85
66
|
this.removeEventListener('click', __classPrivateFieldGet(this, _UmOption_instances, "m", _UmOption_handleClick));
|
|
86
|
-
this
|
|
67
|
+
__classPrivateFieldGet(this, _UmOption_nativeOption, "f").remove();
|
|
68
|
+
if (!__classPrivateFieldGet(this, _UmOption_select, "f")) {
|
|
69
|
+
return;
|
|
70
|
+
}
|
|
71
|
+
// eslint-disable-next-line no-self-assign
|
|
72
|
+
__classPrivateFieldGet(this, _UmOption_select, "f").value = __classPrivateFieldGet(this, _UmOption_select, "f").value;
|
|
73
|
+
__classPrivateFieldSet(this, _UmOption_select, null, "f");
|
|
74
|
+
}
|
|
75
|
+
setNativeOption() {
|
|
76
|
+
__classPrivateFieldGet(this, _UmOption_nativeOption, "f").textContent = this.textContent;
|
|
77
|
+
if (this.hasAttribute('selected')) {
|
|
78
|
+
__classPrivateFieldGet(this, _UmOption_nativeOption, "f").setAttribute('selected', '');
|
|
79
|
+
}
|
|
80
|
+
else {
|
|
81
|
+
__classPrivateFieldGet(this, _UmOption_nativeOption, "f").removeAttribute('selected');
|
|
82
|
+
}
|
|
83
|
+
__classPrivateFieldGet(this, _UmOption_select, "f").nativeSelect.appendChild(__classPrivateFieldGet(this, _UmOption_nativeOption, "f"));
|
|
84
|
+
__classPrivateFieldGet(this, _UmOption_select, "f").empty = !__classPrivateFieldGet(this, _UmOption_nativeOption, "f").textContent?.trim();
|
|
87
85
|
}
|
|
88
86
|
};
|
|
89
|
-
|
|
90
|
-
|
|
87
|
+
_UmOption_nativeOption = new WeakMap();
|
|
88
|
+
_UmOption_select = new WeakMap();
|
|
91
89
|
_UmOption_instances = new WeakSet();
|
|
92
|
-
|
|
93
|
-
|
|
90
|
+
_UmOption_attach = async function _UmOption_attach() {
|
|
91
|
+
await this.updateComplete;
|
|
92
|
+
__classPrivateFieldSet(this, _UmOption_select, this.parentElement.tagName === 'U-SELECT'
|
|
93
|
+
? this.parentElement
|
|
94
|
+
: null, "f");
|
|
95
|
+
if (!__classPrivateFieldGet(this, _UmOption_select, "f")) {
|
|
94
96
|
return;
|
|
95
97
|
}
|
|
96
|
-
|
|
97
|
-
__classPrivateFieldGet(this, _UmOption_instances, "m", _UmOption_select).call(this);
|
|
98
|
-
this.select.menu?.close();
|
|
99
|
-
this.select.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
|
|
100
|
-
this.select.dispatchEvent(new Event('change', { bubbles: true }));
|
|
98
|
+
this.setNativeOption();
|
|
101
99
|
};
|
|
102
|
-
|
|
103
|
-
if (!this
|
|
100
|
+
_UmOption_handleClick = function _UmOption_handleClick(e) {
|
|
101
|
+
if (!__classPrivateFieldGet(this, _UmOption_select, "f")) {
|
|
104
102
|
return;
|
|
105
103
|
}
|
|
106
|
-
|
|
107
|
-
this.
|
|
108
|
-
|
|
109
|
-
_UmOption_select =
|
|
110
|
-
__classPrivateFieldGet(this,
|
|
111
|
-
this.
|
|
104
|
+
e.stopPropagation();
|
|
105
|
+
this.selected = true;
|
|
106
|
+
// eslint-disable-next-line no-self-assign
|
|
107
|
+
__classPrivateFieldGet(this, _UmOption_select, "f").value = __classPrivateFieldGet(this, _UmOption_select, "f").value;
|
|
108
|
+
__classPrivateFieldGet(this, _UmOption_select, "f").dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
|
|
109
|
+
__classPrivateFieldGet(this, _UmOption_select, "f").dispatchEvent(new Event('change', { bubbles: true }));
|
|
110
|
+
__classPrivateFieldGet(this, _UmOption_select, "f").menu?.close();
|
|
112
111
|
};
|
|
113
112
|
__decorate([
|
|
114
113
|
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\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 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 await this.updateComplete;\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.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 private setNativeOption() {\n this.#nativeOption.textContent = this.textContent;\n\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 this.#select!.empty = !this.#nativeOption.textContent?.trim();\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,EAMtB;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;IAKnD,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,29 @@ 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;
|
|
33
|
-
this
|
|
42
|
+
if (__classPrivateFieldGet(this, _UmSelect_connected, "f")) {
|
|
43
|
+
this.elementInternals.setFormValue(value);
|
|
44
|
+
}
|
|
34
45
|
}
|
|
35
46
|
get selectedIndex() {
|
|
36
47
|
return this.nativeSelect?.selectedIndex ?? -1;
|
|
37
48
|
}
|
|
38
49
|
set selectedIndex(index) {
|
|
39
|
-
this.nativeSelect
|
|
50
|
+
if (this.nativeSelect) {
|
|
51
|
+
this.nativeSelect.selectedIndex = index;
|
|
52
|
+
}
|
|
40
53
|
}
|
|
41
54
|
get selectedOption() {
|
|
42
55
|
return this.options[this.selectedIndex] ?? null;
|
|
@@ -45,13 +58,7 @@ let UmSelect = class UmSelect extends UmTextFieldBase {
|
|
|
45
58
|
return this._options;
|
|
46
59
|
}
|
|
47
60
|
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
|
-
`;
|
|
61
|
+
return staticHtml `<div class="input"></div>`;
|
|
55
62
|
}
|
|
56
63
|
renderAfterContent() {
|
|
57
64
|
return html `
|
|
@@ -62,19 +69,22 @@ let UmSelect = class UmSelect extends UmTextFieldBase {
|
|
|
62
69
|
}
|
|
63
70
|
updated(changedProperties) {
|
|
64
71
|
super.updated(changedProperties);
|
|
65
|
-
this.
|
|
66
|
-
this.elementInternals.setFormValue(this.nativeSelect.value);
|
|
72
|
+
this.elementInternals.setFormValue(this.nativeSelect.value || null);
|
|
67
73
|
}
|
|
68
74
|
connectedCallback() {
|
|
69
75
|
super.connectedCallback();
|
|
76
|
+
__classPrivateFieldSet(this, _UmSelect_connected, true, "f");
|
|
70
77
|
__classPrivateFieldGet(this, _UmSelect_instances, "m", _UmSelect_attach).call(this);
|
|
71
78
|
}
|
|
72
79
|
disconnectedCallback() {
|
|
73
80
|
super.disconnectedCallback();
|
|
81
|
+
__classPrivateFieldSet(this, _UmSelect_connected, false, "f");
|
|
82
|
+
this.nativeSelect.remove();
|
|
74
83
|
this.container.removeEventListener('click', __classPrivateFieldGet(this, _UmSelect_handleClick, "f"));
|
|
75
84
|
this.menu.removeEventListener('click', __classPrivateFieldGet(this, _UmSelect_instances, "m", _UmSelect_handleMenuClick));
|
|
76
85
|
}
|
|
77
86
|
};
|
|
87
|
+
_UmSelect_connected = new WeakMap();
|
|
78
88
|
_UmSelect_handleClick = new WeakMap();
|
|
79
89
|
_UmSelect_instances = new WeakSet();
|
|
80
90
|
_UmSelect_handleMenuClick = function _UmSelect_handleMenuClick(e) {
|
|
@@ -95,6 +105,7 @@ _UmSelect_handleSlotChange = function _UmSelect_handleSlotChange(e) {
|
|
|
95
105
|
};
|
|
96
106
|
_UmSelect_attach = async function _UmSelect_attach() {
|
|
97
107
|
await this.updateComplete;
|
|
108
|
+
this.input.appendChild(this.nativeSelect);
|
|
98
109
|
this.container.addEventListener('click', __classPrivateFieldGet(this, _UmSelect_handleClick, "f"));
|
|
99
110
|
this.menu.anchorElement = this.container;
|
|
100
111
|
this.menu.addEventListener('click', __classPrivateFieldGet(this, _UmSelect_instances, "m", _UmSelect_handleMenuClick));
|
|
@@ -107,11 +118,8 @@ __decorate([
|
|
|
107
118
|
query('u-menu')
|
|
108
119
|
], UmSelect.prototype, "menu", void 0);
|
|
109
120
|
__decorate([
|
|
110
|
-
query('
|
|
111
|
-
], UmSelect.prototype, "
|
|
112
|
-
__decorate([
|
|
113
|
-
queryAll('option')
|
|
114
|
-
], UmSelect.prototype, "nativeOptions", void 0);
|
|
121
|
+
query('.input')
|
|
122
|
+
], UmSelect.prototype, "input", void 0);
|
|
115
123
|
__decorate([
|
|
116
124
|
state()
|
|
117
125
|
], 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 this.elementInternals.setFormValue(value);\n }\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.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"]}
|