@universal-material/web 3.0.81 → 3.0.83
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/css/universal-material.css +3 -2
- package/css/universal-material.min.css +2 -2
- package/custom-elements.json +471 -349
- package/package.json +1 -1
- package/scss/table/_table.scss +1 -0
- package/shared/selection-control/selection-control.d.ts +2 -1
- package/shared/selection-control/selection-control.d.ts.map +1 -1
- package/shared/selection-control/selection-control.js +13 -8
- package/shared/selection-control/selection-control.js.map +1 -1
package/package.json
CHANGED
package/scss/table/_table.scss
CHANGED
|
@@ -16,7 +16,8 @@ export declare abstract class UmSelectionControl extends LitElement {
|
|
|
16
16
|
*/
|
|
17
17
|
value: string;
|
|
18
18
|
get checked(): boolean;
|
|
19
|
-
set checked(
|
|
19
|
+
set checked(checked: boolean);
|
|
20
|
+
private _checkedAttribute;
|
|
20
21
|
protected constructor();
|
|
21
22
|
connectedCallback(): void;
|
|
22
23
|
disconnectedCallback(): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"selection-control.d.ts","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control.ts"],"names":[],"mappings":"AAAA,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;IAE1C,IAAI,EAAE,MAAM,GAAG,SAAS,CAAM;IACA,QAAQ,UAAS;IAC3C,KAAK,EAAG,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"selection-control.d.ts","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control.ts"],"names":[],"mappings":"AAAA,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;IAE1C,IAAI,EAAE,MAAM,GAAG,SAAS,CAAM;IACA,QAAQ,UAAS;IAC3C,KAAK,EAAG,gBAAgB,CAAC;IAEzC,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IAGD,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;IAEgD,OAAO,CAAC,iBAAiB,CAAS;IAEnF,SAAS;IAKA,iBAAiB;IAMjB,oBAAoB;cAKV,MAAM,IAAI,kBAAkB;CAyBhD"}
|
|
@@ -9,18 +9,19 @@ 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
|
-
// eslint-disable-next-line
|
|
13
|
-
// #value: any = '';
|
|
14
12
|
get form() {
|
|
15
13
|
return this.elementInternals.form;
|
|
16
14
|
}
|
|
17
15
|
#checked;
|
|
18
16
|
get checked() {
|
|
19
|
-
return this.#checked;
|
|
17
|
+
return this.input ? this.input.checked : this.#checked;
|
|
20
18
|
}
|
|
21
|
-
set checked(
|
|
22
|
-
this.#checked =
|
|
23
|
-
|
|
19
|
+
set checked(checked) {
|
|
20
|
+
this.#checked = checked;
|
|
21
|
+
if (this.input) {
|
|
22
|
+
this.input.checked = checked;
|
|
23
|
+
}
|
|
24
|
+
this.elementInternals.setFormValue(checked ? this.value : null);
|
|
24
25
|
}
|
|
25
26
|
constructor() {
|
|
26
27
|
super();
|
|
@@ -33,11 +34,13 @@ export class UmSelectionControl extends LitElement {
|
|
|
33
34
|
* The element value to use in form submission when checked.
|
|
34
35
|
*/
|
|
35
36
|
this.value = 'on';
|
|
37
|
+
this._checkedAttribute = false;
|
|
36
38
|
this.elementInternals = this.attachInternals();
|
|
37
39
|
}
|
|
38
40
|
connectedCallback() {
|
|
39
41
|
super.connectedCallback();
|
|
40
42
|
this.addEventListener('click', this.#handleClick);
|
|
43
|
+
this.updateComplete.then(() => this.input.checked = this.#checked);
|
|
41
44
|
}
|
|
42
45
|
disconnectedCallback() {
|
|
43
46
|
super.disconnectedCallback();
|
|
@@ -52,8 +55,7 @@ export class UmSelectionControl extends LitElement {
|
|
|
52
55
|
id="input"
|
|
53
56
|
type=${this.inputType}
|
|
54
57
|
class="focus-ring"
|
|
55
|
-
.
|
|
56
|
-
.checked=${this.#checked}
|
|
58
|
+
.checked=${this._checkedAttribute}
|
|
57
59
|
.disabled=${this.disabled} />
|
|
58
60
|
<div class="indicator-container">${this.renderIndicator()}</div>
|
|
59
61
|
</div>`;
|
|
@@ -82,4 +84,7 @@ __decorate([
|
|
|
82
84
|
__decorate([
|
|
83
85
|
property({ type: Boolean })
|
|
84
86
|
], UmSelectionControl.prototype, "checked", null);
|
|
87
|
+
__decorate([
|
|
88
|
+
property({ type: Boolean, attribute: 'checked' })
|
|
89
|
+
], UmSelectionControl.prototype, "_checkedAttribute", void 0);
|
|
85
90
|
//# sourceMappingURL=selection-control.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"selection-control.js","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control.ts"],"names":[],"mappings":";;;;;;AAAA,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;IAQtC,
|
|
1
|
+
{"version":3,"file":"selection-control.js","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control.ts"],"names":[],"mappings":"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","sourcesContent":["import { 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 protected readonly elementInternals: ElementInternals;\n\n @property() 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 #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 connectedCallback() {\n super.connectedCallback();\n this.addEventListener('click', this.#handleClick);\n this.updateComplete.then(() => this.input.checked = this.#checked);\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`<u-ripple ?disabled=${this.disabled}></u-ripple>`;\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 #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"]}
|