@universal-material/web 3.0.121 → 3.0.122
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/custom-elements.json +769 -560
- package/field/field-base.d.ts.map +1 -1
- package/field/field-base.js.map +1 -1
- package/package.json +1 -1
- package/shared/selection-control/selection-control.d.ts +2 -0
- package/shared/selection-control/selection-control.d.ts.map +1 -1
- package/shared/selection-control/selection-control.js +13 -3
- package/shared/selection-control/selection-control.js.map +1 -1
|
@@ -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,UAAU,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAQhE,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;IAElE;;OAEG;IAEH,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAEjB,SAAS,CAAC,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAEgB,WAAW,UAAS;IAE5E;;OAEG;IACyC,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;IAE/E;;;OAGG;IACoC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAErE;;OAEG;IACyC,KAAK,UAAS;IACd,QAAQ,UAAS;IAE7D;;OAEG;IACyC,OAAO,UAAS;IAE5D,MAAM,CAAC,WAAW,CAChB,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,eAAe,GACtB,eAAe,CAAC,OAAO,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;IAOzD;;;;OAIG;IAEH,cAAc,UAAS;IAEvB;;;;OAIG;IAEH,eAAe,UAAS;IAExB;;;;OAIG;IAEH,YAAY,UAAS;IAGrB,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAAiB;IAGtD,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAAiB;IAGvD,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAiB;IAE7B,OAAO,CAAC,aAAa,CAAe;IAChC,SAAS,CAAC,UAAU,EAAG,WAAW,CAAC;;cAO3C,MAAM,IAAI,cAAc;IA+C3C,SAAS,CAAC,QAAQ,CAAC,aAAa,IAAI,cAAc;
|
|
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,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAQhE,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;IAElE;;OAEG;IAEH,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAEjB,SAAS,CAAC,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAEgB,WAAW,UAAS;IAE5E;;OAEG;IACyC,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;IAE/E;;;OAGG;IACoC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAErE;;OAEG;IACyC,KAAK,UAAS;IACd,QAAQ,UAAS;IAE7D;;OAEG;IACyC,OAAO,UAAS;IAE5D,MAAM,CAAC,WAAW,CAChB,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,eAAe,GACtB,eAAe,CAAC,OAAO,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;IAOzD;;;;OAIG;IAEH,cAAc,UAAS;IAEvB;;;;OAIG;IAEH,eAAe,UAAS;IAExB;;;;OAIG;IAEH,YAAY,UAAS;IAGrB,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAAiB;IAGtD,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAAiB;IAGvD,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAiB;IAE7B,OAAO,CAAC,aAAa,CAAe;IAChC,SAAS,CAAC,UAAU,EAAG,WAAW,CAAC;;cAO3C,MAAM,IAAI,cAAc;IA+C3C,SAAS,CAAC,QAAQ,CAAC,aAAa,IAAI,cAAc;IAElD,SAAS,CAAC,kBAAkB,IAAI,cAAc;IAIrC,iBAAiB;IAK1B,OAAO,CAAC,2BAA2B;IASnC,OAAO,CAAC,4BAA4B;IAIpC,OAAO,CAAC,yBAAyB;IAIjC,SAAS,CAAC,yBAAyB,IAAI,cAAc,GAAG,OAAO,OAAO;CAGvE"}
|
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":"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","sourcesContent":["import { consume, Context, ContextProvider } from '@lit/context';\nimport { CSSResultGroup } from '@lit/reactive-element/css-tag';\nimport { html, LitElement, nothing, TemplateResult } from 'lit';\nimport { property, query, queryAssignedElements, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.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 /**\n * The floating label for the field\n */\n @property()\n label: string | undefined;\n\n @state() protected _innerCounter: string | undefined;\n @property() counter: string | undefined;\n\n @property({ type: Boolean, attribute: 'hide-counter' }) hideCounter = false;\n\n /**\n * Supporting text conveys additional information about the field, such as how it will be used\n */\n @property({ attribute: 'supporting-text' }) supportingText: string | undefined;\n\n /**\n * For text fields that validate their content (such as passwords), replace supporting text with error text when applicable.\n * If `errorText` is not an empty string, changing the property `invalid` to `true` will show the `errorText` instead of `supportingText`\n */\n @property({ attribute: 'error-text' }) errorText: string | undefined;\n\n /**\n * Whether the field is empty or not. This changes the behavior of the floating label when the field is not focused.\n */\n @property({ type: Boolean, reflect: true }) empty = false;\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /**\n * Get or sets where or not the field is in a visually invalid state.\n */\n @property({ type: Boolean, reflect: true }) invalid = false;\n\n static setDefaults(\n contextRoot: HTMLElement,\n config: UmFieldDefaults,\n ): 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 })\n 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 })\n 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 })\n 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', true) private _labelElement!: HTMLElement;\n @query('.container', true) protected _container!: HTMLElement;\n\n constructor() {\n super();\n this.variant = undefined;\n }\n\n protected override render(): TemplateResult {\n const variant = this.variant ?? this.config?.variant ?? 'filled';\n\n const classes = {\n [variant]: true,\n 'no-label': !this.label,\n };\n\n const counter = html`\n <slot class=\"counter\" name=\"counter\">\n <div>${this.counter ?? this._innerCounter}</div>\n </slot>\n `;\n\n const outline = html`\n <div class=\"outline\">\n <div class=\"outline-start\"></div>\n <div class=\"outline-notch\">\n <div class=\"outline-notch-label\">${this.label}</div>\n </div>\n <div class=\"outline-end\"></div>\n </div>\n `;\n\n return html`\n <div class=\"container ${classMap(classes)}\">\n ${variant === 'outlined' ? outline : nothing}\n <slot class=\"icon leading-icon\" name=\"leading-icon\" @slotchange=\"${this.handleLeadingIconSlotChange}\"></slot>\n <label class=\"label\" id=\"label\">${this.label}</label>\n <div class=\"input-wrapper\" part=\"wrapper\">${this.renderControl()}</div>\n <slot class=\"icon trailing-icon\" name=\"trailing-icon\" @slotchange=\"${this.handleTrailingIconSlotChange}\">\n <span>${this.renderDefaultTrailingIcon()}</span>\n </slot>\n </div>\n <div class=\"supporting-text\" id=\"supporting-text\">\n <slot class=\"error-text\" name=\"error-text\" @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 ${this.hideCounter ? nothing : counter}\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\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 protected renderDefaultTrailingIcon(): TemplateResult | typeof nothing {\n return nothing;\n }\n}\n"]}
|
|
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, nothing, TemplateResult } from 'lit';\nimport { property, query, queryAssignedElements, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.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 /**\n * The floating label for the field\n */\n @property()\n label: string | undefined;\n\n @state() protected _innerCounter: string | undefined;\n @property() counter: string | undefined;\n\n @property({ type: Boolean, attribute: 'hide-counter' }) hideCounter = false;\n\n /**\n * Supporting text conveys additional information about the field, such as how it will be used\n */\n @property({ attribute: 'supporting-text' }) supportingText: string | undefined;\n\n /**\n * For text fields that validate their content (such as passwords), replace supporting text with error text when applicable.\n * If `errorText` is not an empty string, changing the property `invalid` to `true` will show the `errorText` instead of `supportingText`\n */\n @property({ attribute: 'error-text' }) errorText: string | undefined;\n\n /**\n * Whether the field is empty or not. This changes the behavior of the floating label when the field is not focused.\n */\n @property({ type: Boolean, reflect: true }) empty = false;\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /**\n * Get or sets where or not the field is in a visually invalid state.\n */\n @property({ type: Boolean, reflect: true }) invalid = false;\n\n static setDefaults(\n contextRoot: HTMLElement,\n config: UmFieldDefaults,\n ): 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 })\n 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 })\n 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 })\n 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', true) private _labelElement!: HTMLElement;\n @query('.container', true) protected _container!: HTMLElement;\n\n constructor() {\n super();\n this.variant = undefined;\n }\n\n protected override render(): TemplateResult {\n const variant = this.variant ?? this.config?.variant ?? 'filled';\n\n const classes = {\n [variant]: true,\n 'no-label': !this.label,\n };\n\n const counter = html`\n <slot class=\"counter\" name=\"counter\">\n <div>${this.counter ?? this._innerCounter}</div>\n </slot>\n `;\n\n const outline = html`\n <div class=\"outline\">\n <div class=\"outline-start\"></div>\n <div class=\"outline-notch\">\n <div class=\"outline-notch-label\">${this.label}</div>\n </div>\n <div class=\"outline-end\"></div>\n </div>\n `;\n\n return html`\n <div class=\"container ${classMap(classes)}\">\n ${variant === 'outlined' ? outline : nothing}\n <slot class=\"icon leading-icon\" name=\"leading-icon\" @slotchange=\"${this.handleLeadingIconSlotChange}\"></slot>\n <label class=\"label\" id=\"label\">${this.label}</label>\n <div class=\"input-wrapper\" part=\"wrapper\">${this.renderControl()}</div>\n <slot class=\"icon trailing-icon\" name=\"trailing-icon\" @slotchange=\"${this.handleTrailingIconSlotChange}\">\n <span>${this.renderDefaultTrailingIcon()}</span>\n </slot>\n </div>\n <div class=\"supporting-text\" id=\"supporting-text\">\n <slot class=\"error-text\" name=\"error-text\" @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 ${this.hideCounter ? nothing : counter}\n </div>\n ${this.renderAfterContent()}\n `;\n }\n\n protected abstract renderControl(): TemplateResult;\n\n protected renderAfterContent(): TemplateResult {\n return html``;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this.hasLeadingIcon = !!this.assignedLeadingIcons.length;\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 protected renderDefaultTrailingIcon(): TemplateResult | typeof nothing {\n return nothing;\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -4,11 +4,13 @@ import '../../ripple/ripple.js';
|
|
|
4
4
|
export declare abstract class UmSelectionControl extends LitElement {
|
|
5
5
|
#private;
|
|
6
6
|
static readonly formAssociated = true;
|
|
7
|
+
static shadowRootOptions: ShadowRootInit;
|
|
7
8
|
protected readonly elementInternals: ElementInternals;
|
|
8
9
|
name: string | undefined;
|
|
9
10
|
disabled: boolean;
|
|
10
11
|
input: HTMLInputElement;
|
|
11
12
|
get form(): HTMLFormElement | null;
|
|
13
|
+
focus(options?: FocusOptions): void;
|
|
12
14
|
protected inputType: 'checkbox' | 'radio';
|
|
13
15
|
protected renderRipple: boolean;
|
|
14
16
|
protected abstract renderIndicator(): HTMLTemplateResult;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"selection-control.d.ts","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAGpE,OAAO,wBAAwB,CAAC;AAEhC,8BAAsB,kBAAmB,SAAQ,UAAU;;IACzD,MAAM,CAAC,QAAQ,CAAC,cAAc,QAAQ;IAEtC,SAAS,CAAC,QAAQ,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"selection-control.d.ts","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAGpE,OAAO,wBAAwB,CAAC;AAEhC,8BAAsB,kBAAmB,SAAQ,UAAU;;IACzD,MAAM,CAAC,QAAQ,CAAC,cAAc,QAAQ;IAEtC,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;IAEF,SAAS,CAAC,QAAQ,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;IAEzB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAM;IACf,QAAQ,UAAS;IAC7C,KAAK,EAAG,gBAAgB,CAAC;IAEzC,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IAEQ,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAKrC,SAAS,CAAC,SAAS,EAAE,UAAU,GAAG,OAAO,CAAc;IACvD,SAAS,CAAC,YAAY,UAAQ;IAE9B,SAAS,CAAC,QAAQ,CAAC,eAAe,IAAI,kBAAkB;IAExD;;OAEG;IACS,KAAK,SAAQ;IAEzB,IACI,OAAO,IAGU,OAAO,CAD3B;IACD,IAAI,OAAO,CAAC,OAAO,EAAE,OAAO,EAQ3B;IAEkD,OAAO,CAAC,iBAAiB,CAAS;IAErF,SAAS;IAKA,YAAY,CAAC,iBAAiB,EAAE,cAAc;IAM9C,iBAAiB;IAMjB,oBAAoB;cAKV,MAAM,IAAI,kBAAkB;CA4BhD"}
|
|
@@ -9,9 +9,16 @@ import { property, query } from 'lit/decorators.js';
|
|
|
9
9
|
import '../../ripple/ripple.js';
|
|
10
10
|
export class UmSelectionControl extends LitElement {
|
|
11
11
|
static { this.formAssociated = true; }
|
|
12
|
+
static { this.shadowRootOptions = {
|
|
13
|
+
...LitElement.shadowRootOptions,
|
|
14
|
+
delegatesFocus: true,
|
|
15
|
+
}; }
|
|
12
16
|
get form() {
|
|
13
17
|
return this.elementInternals.form;
|
|
14
18
|
}
|
|
19
|
+
focus(options) {
|
|
20
|
+
this.input.focus(options);
|
|
21
|
+
}
|
|
15
22
|
#checked;
|
|
16
23
|
get checked() {
|
|
17
24
|
return this.input ? this.input.checked : this.#checked;
|
|
@@ -50,7 +57,9 @@ export class UmSelectionControl extends LitElement {
|
|
|
50
57
|
this.removeEventListener('click', this.#handleClick);
|
|
51
58
|
}
|
|
52
59
|
render() {
|
|
53
|
-
const ripple = html
|
|
60
|
+
const ripple = html `
|
|
61
|
+
<u-ripple ?disabled=${this.disabled}></u-ripple>
|
|
62
|
+
`;
|
|
54
63
|
return html `
|
|
55
64
|
<div class="container">
|
|
56
65
|
${this.renderRipple ? ripple : nothing}
|
|
@@ -61,7 +70,8 @@ export class UmSelectionControl extends LitElement {
|
|
|
61
70
|
.checked=${this._checkedAttribute}
|
|
62
71
|
.disabled=${this.disabled} />
|
|
63
72
|
<div class="indicator-container">${this.renderIndicator()}</div>
|
|
64
|
-
</div
|
|
73
|
+
</div>
|
|
74
|
+
`;
|
|
65
75
|
}
|
|
66
76
|
#handleClick(e) {
|
|
67
77
|
if (e.defaultPrevented) {
|
|
@@ -73,7 +83,7 @@ export class UmSelectionControl extends LitElement {
|
|
|
73
83
|
}
|
|
74
84
|
}
|
|
75
85
|
__decorate([
|
|
76
|
-
property()
|
|
86
|
+
property({ reflect: true })
|
|
77
87
|
], UmSelectionControl.prototype, "name", void 0);
|
|
78
88
|
__decorate([
|
|
79
89
|
property({ type: Boolean, reflect: true })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"selection-control.js","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control.ts"],"names":[],"mappings":";;;;;;AACA,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,wBAAwB,CAAC;AAEhC,MAAM,OAAgB,kBAAmB,SAAQ,UAAU;aACzC,mBAAc,GAAG,IAAI,AAAP,CAAQ;
|
|
1
|
+
{"version":3,"file":"selection-control.js","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control.ts"],"names":[],"mappings":";;;;;;AACA,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,wBAAwB,CAAC;AAEhC,MAAM,OAAgB,kBAAmB,SAAQ,UAAU;aACzC,mBAAc,GAAG,IAAI,AAAP,CAAQ;aAEtB,sBAAiB,GAAmB;QAClD,GAAG,UAAU,CAAC,iBAAiB;QAC/B,cAAc,EAAE,IAAI;KACrB,AAHgC,CAG/B;IAQF,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;IACpC,CAAC;IAEQ,KAAK,CAAC,OAAsB;QACnC,IAAI,CAAC,KAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC7B,CAAC;IAED,QAAQ,CAAS;IAYjB,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;IACzD,CAAC;IACD,IAAI,OAAO,CAAC,OAAgB;QAC1B,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;QAExB,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;QAC/B,CAAC;QAED,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAClE,CAAC;IAID;QACE,KAAK,EAAE,CAAC;QAxCmB,SAAI,GAAuB,EAAE,CAAC;QACf,aAAQ,GAAG,KAAK,CAAC;QAW7D,aAAQ,GAAG,KAAK,CAAC;QACP,cAAS,GAAyB,UAAU,CAAC;QAC7C,iBAAY,GAAG,IAAI,CAAC;QAI9B;;WAEG;QACS,UAAK,GAAG,IAAI,CAAC;QAgBkC,sBAAiB,GAAG,KAAK,CAAC;QAInF,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IACjD,CAAC;IAEQ,YAAY,CAAC,iBAAiC;QACrD,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QAEtC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC;IACrC,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IACpD,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IACvD,CAAC;IAEkB,MAAM;QACvB,MAAM,MAAM,GAAG,IAAI,CAAA;4BACK,IAAI,CAAC,QAAQ;KACpC,CAAC;QAEF,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;;;iBAG7B,IAAI,CAAC,SAAS;;qBAEV,IAAI,CAAC,iBAAiB;sBACrB,IAAI,CAAC,QAAQ;2CACQ,IAAI,CAAC,eAAe,EAAE;;KAE5D,CAAC;IACJ,CAAC;IAED,YAAY,CAAC,CAAQ;QACnB,IAAI,CAAC,CAAC,gBAAgB,EAAE,CAAC;YACvB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,SAAS,KAAK,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;QAC3D,IAAI,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAC/E,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IAC7D,CAAC;;AAxF4B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAA+B;AACf;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDAAkB;AAC7C;IAAf,KAAK,CAAC,OAAO,CAAC;iDAA0B;AAmB7B;IAAX,QAAQ,EAAE;iDAAc;AAGzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAG3B;AAW0D;IAA1D,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;6DAAmC","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\nimport { html, HTMLTemplateResult, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\n\nimport '../../ripple/ripple.js';\n\nexport abstract class UmSelectionControl extends LitElement {\n static readonly formAssociated = true;\n\n static override shadowRootOptions: ShadowRootInit = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n protected readonly elementInternals: ElementInternals;\n\n @property({ reflect: true }) name: string | undefined = '';\n @property({ type: Boolean, reflect: true }) disabled = false;\n @query('input') input!: HTMLInputElement;\n\n get form(): HTMLFormElement | null {\n return this.elementInternals.form;\n }\n\n override focus(options?: FocusOptions) {\n this.input!.focus(options);\n }\n\n #checked = false;\n protected inputType: 'checkbox' | 'radio' = 'checkbox';\n protected renderRipple = true;\n\n protected abstract renderIndicator(): HTMLTemplateResult;\n\n /**\n * The element value to use in form submission when checked.\n */\n @property() value = 'on';\n\n @property({ type: Boolean })\n get checked() {\n return this.input ? this.input.checked : this.#checked;\n }\n set checked(checked: boolean) {\n this.#checked = checked;\n\n if (this.input) {\n this.input.checked = checked;\n }\n\n this.elementInternals.setFormValue(checked ? this.value : null);\n }\n\n @property({ type: Boolean, attribute: 'checked' }) private _checkedAttribute = false;\n\n protected constructor() {\n super();\n this.elementInternals = this.attachInternals();\n }\n\n override firstUpdated(changedProperties: PropertyValues) {\n super.firstUpdated(changedProperties);\n\n this.input.checked = this.#checked;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n this.addEventListener('click', this.#handleClick);\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('click', this.#handleClick);\n }\n\n protected override render(): HTMLTemplateResult {\n const ripple = html`\n <u-ripple ?disabled=${this.disabled}></u-ripple>\n `;\n\n return html`\n <div class=\"container\">\n ${this.renderRipple ? ripple : nothing}\n <input\n id=\"input\"\n type=${this.inputType}\n class=\"focus-ring\"\n .checked=${this._checkedAttribute}\n .disabled=${this.disabled} />\n <div class=\"indicator-container\">${this.renderIndicator()}</div>\n </div>\n `;\n }\n\n #handleClick(e: Event) {\n if (e.defaultPrevented) {\n return;\n }\n\n this.checked = this.inputType === 'radio' || !this.checked;\n this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));\n this.dispatchEvent(new Event('change', { bubbles: true }));\n }\n}\n"]}
|