@universal-material/web 3.0.135 → 3.0.136
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/checkbox/checkbox.d.ts +1 -1
- package/checkbox/checkbox.d.ts.map +1 -1
- package/checkbox/checkbox.js +4 -6
- package/checkbox/checkbox.js.map +1 -1
- package/checkbox/checkbox.styles.d.ts.map +1 -1
- package/checkbox/checkbox.styles.js +0 -65
- package/checkbox/checkbox.styles.js.map +1 -1
- package/custom-elements.json +3127 -2724
- package/package.json +1 -1
- package/radio/radio.d.ts +1 -1
- package/radio/radio.d.ts.map +1 -1
- package/radio/radio.js +1 -2
- package/radio/radio.js.map +1 -1
- package/radio/radio.styles.d.ts.map +1 -1
- package/radio/radio.styles.js +0 -65
- package/radio/radio.styles.js.map +1 -1
- package/shared/menu-field/menu-field-navigation-controller.d.ts.map +1 -1
- package/shared/menu-field/menu-field-navigation-controller.js +0 -1
- package/shared/menu-field/menu-field-navigation-controller.js.map +1 -1
- package/shared/selection-control/checkbox-base.d.ts +1 -0
- package/shared/selection-control/checkbox-base.d.ts.map +1 -0
- package/shared/selection-control/checkbox-base.js +7 -0
- package/shared/selection-control/checkbox-base.js.map +1 -0
- package/shared/selection-control/selection-control-list-item.d.ts.map +1 -1
- package/shared/selection-control/selection-control-list-item.js +9 -5
- package/shared/selection-control/selection-control-list-item.js.map +1 -1
- package/shared/selection-control/selection-control.d.ts +6 -0
- package/shared/selection-control/selection-control.d.ts.map +1 -1
- package/shared/selection-control/selection-control.js +67 -10
- package/shared/selection-control/selection-control.js.map +1 -1
- package/shared/selection-control/selection-control.styles.d.ts.map +1 -1
- package/shared/selection-control/selection-control.styles.js +0 -1
- package/shared/selection-control/selection-control.styles.js.map +1 -1
- package/switch/switch.d.ts +1 -1
- package/switch/switch.d.ts.map +1 -1
- package/switch/switch.js +7 -9
- package/switch/switch.js.map +1 -1
- package/switch/switch.styles.d.ts.map +1 -1
- package/switch/switch.styles.js +0 -65
- package/switch/switch.styles.js.map +1 -1
package/package.json
CHANGED
package/radio/radio.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ import { HTMLTemplateResult } from 'lit';
|
|
|
3
3
|
import { UmSelectionControl } from '../shared/selection-control/selection-control.js';
|
|
4
4
|
export declare class UmRadio extends UmSelectionControl {
|
|
5
5
|
#private;
|
|
6
|
-
static styles: import("lit").
|
|
6
|
+
static styles: import("lit").CSSResultGroup[];
|
|
7
7
|
hideStateLayer: boolean;
|
|
8
8
|
protected inputType: 'radio' | 'checkbox';
|
|
9
9
|
protected renderIndicator(): HTMLTemplateResult;
|
package/radio/radio.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../src/radio/radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAQ,kBAAkB,EAAE,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../src/radio/radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAQ,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAK/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kDAAkD,CAAC;AAEtF,qBACa,OAAQ,SAAQ,kBAAkB;;IAC7C,OAAgB,MAAM,iCAAuC;IAEc,cAAc,UAAS;IAElG,UAAmB,SAAS,EAAE,OAAO,GAAG,UAAU,CAAW;cAE1C,eAAe,IAAI,kBAAkB;IAMxD,IAAa,OAAO,IAGQ,OAAO,CADlC;IACD,IAAa,OAAO,CAAC,KAAK,EAAE,OAAO,EAYlC;;IAcQ,YAAY,CAAC,iBAAiB,EAAE,cAAc;IAM9C,iBAAiB;IAKjB,oBAAoB;IAkE7B,OAAO,CAAC,oBAAoB;IAe5B,OAAO,CAAC,eAAe;CAaxB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,OAAO,CAAC;KACpB;CACF"}
|
package/radio/radio.js
CHANGED
|
@@ -6,11 +6,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
6
6
|
};
|
|
7
7
|
import { html } from 'lit';
|
|
8
8
|
import { customElement, property } from 'lit/decorators.js';
|
|
9
|
-
import { styles as baseStyles } from '../shared/base.styles.js';
|
|
10
9
|
import { styles } from './radio.styles.js';
|
|
11
10
|
import { UmSelectionControl } from '../shared/selection-control/selection-control.js';
|
|
12
11
|
let UmRadio = class UmRadio extends UmSelectionControl {
|
|
13
|
-
static { this.styles = [
|
|
12
|
+
static { this.styles = [UmSelectionControl.styles, styles]; }
|
|
14
13
|
renderIndicator() {
|
|
15
14
|
return html `
|
|
16
15
|
<div class="indicator"></div>
|
package/radio/radio.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../src/radio/radio.ts"],"names":[],"mappings":";;;;;;AACA,OAAO,EAAE,IAAI,EAAsB,MAAM,KAAK,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../src/radio/radio.ts"],"names":[],"mappings":";;;;;;AACA,OAAO,EAAE,IAAI,EAAsB,MAAM,KAAK,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kDAAkD,CAAC;AAG/E,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,kBAAkB;aAC7B,WAAM,GAAG,CAAC,kBAAkB,CAAC,MAAM,EAAE,MAAM,CAAC,AAAtC,CAAuC;IAM1C,eAAe;QAChC,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;IAED,IAAa,OAAO;QAClB,OAAO,KAAK,CAAC,OAAO,CAAC;IACvB,CAAC;IACD,IAAa,OAAO,CAAC,KAAc;QACjC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;QAEtB,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAO;QACT,CAAC;QAED,IAAI,CAAC,eAAe,EAAE,CAAC;QAEvB,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,CAAC,CAAC;QAC1B,CAAC;IACH,CAAC;IAED,IAAI,SAAS;QACX,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,OAAO,CAAC,IAAI,CAAC,CAAC;QAChB,CAAC;QAED,OAAO,KAAK,CAAC,IAAI,CAAW,IAAI,CAAC,WAAW,EAAG,CAAC,gBAAgB,CAAU,GAAG,IAAI,CAAC,OAAO,UAAU,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC;IACrH,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QApCiE,mBAAc,GAAG,KAAK,CAAC;QAE/E,cAAS,GAAyB,OAAO,CAAC;IAmC7D,CAAC;IAEQ,YAAY,CAAC,iBAAiC;QACrD,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QAEtC,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IACxD,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IAC3D,CAAC;IAED,cAAc,CAAC,KAAoB;QACjC,MAAM,MAAM,GAAG,KAAK,CAAC,GAAG,KAAK,WAAW,CAAC;QACzC,MAAM,IAAI,GAAG,KAAK,CAAC,GAAG,KAAK,SAAS,CAAC;QACrC,MAAM,MAAM,GAAG,KAAK,CAAC,GAAG,KAAK,WAAW,CAAC;QACzC,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,KAAK,YAAY,CAAC;QAE3C,IAAI,CAAC,MAAM,IAAI,CAAC,OAAO,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;YAC5C,OAAO;QACT,CAAC;QAED,2DAA2D;QAC3D,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC;QAEhC,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;YACrB,OAAO;QACT,CAAC;QAED,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,MAAM,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC,SAAS,KAAK,KAAK,CAAC;QACzD,MAAM,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,MAAM,IAAI,MAAM,CAAC,CAAC,CAAC,OAAO,IAAI,MAAM,CAAC;QAC9D,MAAM,MAAM,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAEjC,MAAM,SAAS,GAAG,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QACzC,IAAI,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;QAEnC,OAAO,SAAS,KAAK,SAAS,EAAE,CAAC;YAC/B,IAAI,SAAS,IAAI,QAAQ,CAAC,MAAM,EAAE,CAAC;gBACjC,gDAAgD;gBAChD,SAAS,GAAG,CAAC,CAAC;YAChB,CAAC;iBAAM,IAAI,SAAS,GAAG,CAAC,EAAE,CAAC;gBACzB,6CAA6C;gBAC7C,SAAS,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;YAClC,CAAC;YAED,MAAM,WAAW,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;YAExC,IAAI,WAAW,CAAC,QAAQ,EAAE,CAAC;gBACzB,SAAS,IAAI,MAAM,CAAC;gBACpB,SAAS;YACX,CAAC;YAED,MAAM,aAAa,GAAG,CAAC,WAAW,CAAC,aAAa,CAC9C,IAAI,KAAK,CAAC,OAAO,EAAE;gBACjB,OAAO,EAAE,IAAI;gBACb,UAAU,EAAE,IAAI;aACjB,CAAC,CACH,CAAC;YAEF,WAAW,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;YAE1B,IAAI,aAAa,EAAE,CAAC;gBAClB,MAAM;YACR,CAAC;YAED,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;YAC3B,WAAW,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;YAClE,MAAM;QACR,CAAC;IACH,CAAC;IAEO,oBAAoB;QAC1B,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,OAAO;QACT,CAAC;QAED,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAU,GAAG,IAAI,CAAC,OAAO,UAAU,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC;QACtG,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;QAE1D,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,OAAO;QACT,CAAC;QAED,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;IAC7B,CAAC;IAEO,eAAe;QACrB,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnC,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;gBACnB,SAAS;YACX,CAAC;YAED,IAAI,KAAK,CAAC,KAAK,EAAE,CAAC;gBAChB,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;YAC5B,CAAC;YAED,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;QACxB,CAAC;IACH,CAAC;;AA/I0E;IAA1E,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAwB;AAHvF,OAAO;IADnB,aAAa,CAAC,SAAS,CAAC;GACZ,OAAO,CAmJnB","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\nimport { html, HTMLTemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { styles } from './radio.styles.js';\n\nimport { UmSelectionControl } from '../shared/selection-control/selection-control.js';\n\n@customElement('u-radio')\nexport class UmRadio extends UmSelectionControl {\n static override styles = [UmSelectionControl.styles, styles];\n\n @property({ type: Boolean, attribute: 'hide-state-layer', reflect: true }) hideStateLayer = false;\n\n protected override inputType: 'radio' | 'checkbox' = 'radio';\n\n protected override renderIndicator(): HTMLTemplateResult {\n return html`\n <div class=\"indicator\"></div>\n `;\n }\n\n override get checked() {\n return super.checked;\n }\n override set checked(value: boolean) {\n super.checked = value;\n\n if (!value) {\n return;\n }\n\n this.uncheckSiblings();\n\n if (this.input) {\n this.input.tabIndex = 0;\n }\n }\n\n get #siblings(): UmRadio[] {\n if (!this.name) {\n return [this];\n }\n\n return Array.from((<Element>this.getRootNode()).querySelectorAll<UmRadio>(`${this.tagName}[name=\"${this.name}\"]`));\n }\n\n constructor() {\n super();\n }\n\n override firstUpdated(changedProperties: PropertyValues) {\n super.firstUpdated(changedProperties);\n\n this.ensureOnlyOneChecked();\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this.addEventListener('keydown', this.#handleKeyDown);\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('keydown', this.#handleKeyDown);\n }\n\n #handleKeyDown(event: KeyboardEvent) {\n const isDown = event.key === 'ArrowDown';\n const isUp = event.key === 'ArrowUp';\n const isLeft = event.key === 'ArrowLeft';\n const isRight = event.key === 'ArrowRight';\n\n if (!isLeft && !isRight && !isDown && !isUp) {\n return;\n }\n\n // Don't try to select another sibling if there aren't any.\n const siblings = this.#siblings;\n\n if (!siblings.length) {\n return;\n }\n\n event.preventDefault();\n\n const isRtl = getComputedStyle(this).direction === 'rtl';\n const forwards = isRtl ? isLeft || isDown : isRight || isDown;\n const factor = forwards ? 1 : -1;\n\n const thisIndex = siblings.indexOf(this);\n let nextIndex = thisIndex + factor;\n\n while (nextIndex !== thisIndex) {\n if (nextIndex >= siblings.length) {\n // Return to start if moving past the last item.\n nextIndex = 0;\n } else if (nextIndex < 0) {\n // Go to end if moving before the first item.\n nextIndex = siblings.length - 1;\n }\n\n const nextSibling = siblings[nextIndex];\n\n if (nextSibling.disabled) {\n nextIndex += factor;\n continue;\n }\n\n const clickCanceled = !nextSibling.dispatchEvent(\n new Event('click', {\n bubbles: true,\n cancelable: true,\n }),\n );\n\n nextSibling.input.focus();\n\n if (clickCanceled) {\n break;\n }\n\n nextSibling.checked = true;\n nextSibling.dispatchEvent(new Event('change', { bubbles: true }));\n break;\n }\n }\n\n private ensureOnlyOneChecked() {\n if (!this.name) {\n return;\n }\n\n const radios = Array.from(document.querySelectorAll<UmRadio>(`${this.tagName}[name=\"${this.name}\"]`));\n const lastChecked = radios.reverse().find(r => r.checked);\n\n if (!lastChecked) {\n return;\n }\n\n lastChecked.checked = true;\n }\n\n private uncheckSiblings() {\n for (const radio of this.#siblings) {\n if (radio === this) {\n continue;\n }\n\n if (radio.input) {\n radio.input.tabIndex = -1;\n }\n\n radio.checked = false;\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-radio': UmRadio;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio.styles.d.ts","sourceRoot":"","sources":["../../src/radio/radio.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"radio.styles.d.ts","sourceRoot":"","sources":["../../src/radio/radio.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA8BlB,CAAC"}
|
package/radio/radio.styles.js
CHANGED
|
@@ -1,70 +1,5 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
2
|
export const styles = css `
|
|
3
|
-
:host {
|
|
4
|
-
--_state-layer-padding: var(--u-radio-state-layer-padding, 4px);
|
|
5
|
-
--_input-size: calc(var(--_width) - var(--_state-layer-padding) * 2);
|
|
6
|
-
--_indicator-color: var(--u-radio-indicator-unselected-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
|
|
7
|
-
display: inline-block;
|
|
8
|
-
vertical-align: middle;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.container {
|
|
12
|
-
cursor: pointer;
|
|
13
|
-
position: relative;
|
|
14
|
-
width: var(--_width);
|
|
15
|
-
height: var(--_height);
|
|
16
|
-
padding: var(--_state-layer-padding);
|
|
17
|
-
border-radius: var(--u-shape-corner-full, 9999px);
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
:host([hide-state-layer]) .container {
|
|
21
|
-
width: var(--_indicator-size);
|
|
22
|
-
height: var(--_indicator-size);
|
|
23
|
-
padding: 0;
|
|
24
|
-
}
|
|
25
|
-
:host([hide-state-layer]) u-ripple {
|
|
26
|
-
display: none;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
input {
|
|
30
|
-
cursor: pointer;
|
|
31
|
-
width: 100%;
|
|
32
|
-
height: 100%;
|
|
33
|
-
padding: 0;
|
|
34
|
-
margin: 0;
|
|
35
|
-
border-radius: inherit;
|
|
36
|
-
appearance: none;
|
|
37
|
-
pointer-events: none;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
u-ripple {
|
|
41
|
-
padding: var(--_state-layer-padding);
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.indicator-container {
|
|
45
|
-
position: absolute;
|
|
46
|
-
display: flex;
|
|
47
|
-
align-items: center;
|
|
48
|
-
justify-content: center;
|
|
49
|
-
inset: 0;
|
|
50
|
-
pointer-events: none;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
input:checked ~ .indicator-container {
|
|
54
|
-
--_indicator-color: var(--u-radio-indicator-selected-color, var(--u-color-primary, rgb(103, 80, 164)));
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
:host([disabled]) {
|
|
58
|
-
opacity: var(--u-radio-disabled-state-opacity, 0.38);
|
|
59
|
-
}
|
|
60
|
-
:host([disabled]) input,
|
|
61
|
-
:host([disabled]) .container {
|
|
62
|
-
cursor: default;
|
|
63
|
-
}
|
|
64
|
-
:host([disabled]) .indicator-container {
|
|
65
|
-
--_indicator-color: var(--u-radio-indicator-disabled-color, var(--u-color-on-surface, rgb(29, 27, 32)));
|
|
66
|
-
}
|
|
67
|
-
|
|
68
3
|
:host {
|
|
69
4
|
--_indicator-size: var(--u-radio-indicator-size, 1.25rem);
|
|
70
5
|
--_width: var(--u-radio-size, 3rem);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio.styles.js","sourceRoot":"","sources":["../../src/radio/radio.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC
|
|
1
|
+
{"version":3,"file":"radio.styles.js","sourceRoot":"","sources":["../../src/radio/radio.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host {\n --_indicator-size: var(--u-radio-indicator-size, 1.25rem);\n --_width: var(--u-radio-size, 3rem);\n --_height: var(--_width);\n }\n\n .indicator {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--_indicator-size);\n height: var(--_indicator-size);\n border: var(--u-radio-indicator-border-width, 0.125rem) solid var(--_indicator-color);\n border-radius: 50%;\n }\n .indicator::before {\n content: \"\";\n width: calc(var(--_indicator-size) / 2);\n height: calc(var(--_indicator-size) / 2);\n background: var(--_indicator-color);\n border-radius: 50%;\n transition: transform 250ms;\n transform: scale3d(0, 0, 1);\n }\n\n input:checked ~ .indicator-container .indicator::before {\n transform: scale3d(1, 1, 1);\n }\n`;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-field-navigation-controller.d.ts","sourceRoot":"","sources":["../../../src/shared/menu-field/menu-field-navigation-controller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,qBAAa,6BAA6B,CAAC,MAAM,SAAS,WAAW,EAAE,SAAS,SAAS,UAAU;;IAEjG,SAAS,CAAC,WAAW,EAAE,SAAS,GAAG,IAAI,CAAQ;IAC/C,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAEhC,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAiC;gBAExD,IAAI,EAAE,MAAM;IAKxB,MAAM,CAAC,OAAO,EAAE,WAAW;IAQ3B,MAAM;IAQN,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO;IA4CtD,OAAO,CAAC,QAAQ;IAwBhB,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,GAAG,SAAS,EAAE,KAAK,EAAE,MAAM;IAYrF,SAAS,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,UAAO,EAAE,MAAM,UAAO;IAetE,QAAQ;IAUR,OAAO,CAAC,gBAAgB;
|
|
1
|
+
{"version":3,"file":"menu-field-navigation-controller.d.ts","sourceRoot":"","sources":["../../../src/shared/menu-field/menu-field-navigation-controller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,qBAAa,6BAA6B,CAAC,MAAM,SAAS,WAAW,EAAE,SAAS,SAAS,UAAU;;IAEjG,SAAS,CAAC,WAAW,EAAE,SAAS,GAAG,IAAI,CAAQ;IAC/C,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAEhC,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAiC;gBAExD,IAAI,EAAE,MAAM;IAKxB,MAAM,CAAC,OAAO,EAAE,WAAW;IAQ3B,MAAM;IAQN,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO;IA4CtD,OAAO,CAAC,QAAQ;IAwBhB,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,GAAG,SAAS,EAAE,KAAK,EAAE,MAAM;IAYrF,SAAS,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,UAAO,EAAE,MAAM,UAAO;IAetE,QAAQ;IAUR,OAAO,CAAC,gBAAgB;IAUxB,SAAS,CAAC,UAAU,CAAC,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,MAAM;IAE7C,SAAS,CAAC,SAAS;CACpB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-field-navigation-controller.js","sourceRoot":"","sources":["../../../src/shared/menu-field/menu-field-navigation-controller.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"menu-field-navigation-controller.js","sourceRoot":"","sources":["../../../src/shared/menu-field/menu-field-navigation-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import { UmMenuItem } from '../../menu/menu-item.js';\nimport { UmMenuField } from './menu-field.js';\n\nexport class MenuFieldNavigationController<TField extends UmMenuField, TMenuItem extends UmMenuItem> {\n #element: HTMLElement | null = null;\n protected focusedMenu: TMenuItem | null = null;\n protected readonly host: TField;\n\n private readonly _bindHandleKeyDown: (event: KeyboardEvent) => void;\n\n constructor(host: TField) {\n this.host = host;\n this._bindHandleKeyDown = this.handleKeyDown.bind(this);\n }\n\n attach(element: HTMLElement) {\n this.detach();\n\n element?.addEventListener('keydown', this._bindHandleKeyDown, { capture: true });\n this.host._menu?.addEventListener('close', this.#handleMenuClose);\n this.#element = element;\n }\n\n detach() {\n this.#element?.removeEventListener('keydown', this._bindHandleKeyDown);\n this.host._menu?.removeEventListener('close', this.#handleMenuClose);\n this.#element = null;\n }\n\n #handleMenuClose = () => this.blurMenu();\n\n protected handleKeyDown(event: KeyboardEvent): boolean {\n if (this.host._menu?.open !== true) {\n return false;\n }\n\n const isEscape = event.key === 'Escape';\n\n if (isEscape) {\n this.host._menu.close();\n }\n\n if (event.key === 'Home') {\n this.navigateTo(event, <TMenuItem>this.host._menuItems[0], 0);\n return true;\n }\n\n if (event.key === 'End') {\n this.navigateTo(\n event,\n <TMenuItem>this.host._menuItems[this.host._menuItems.length - 1],\n this.host._menuItems.length - 1,\n );\n return true;\n }\n\n const isDown = event.key === 'ArrowDown';\n const isUp = event.key === 'ArrowUp';\n\n if (isDown || isUp) {\n this.navigate(event, isDown);\n return true;\n }\n\n const isEnter = event.key === 'Enter';\n const isTab = event.key === 'Tab';\n\n if (isEnter || isTab) {\n this.selectActiveItem(event);\n return true;\n }\n\n return false;\n }\n\n private navigate(event: KeyboardEvent, forwards: boolean) {\n const menuItems = this.host._menuItems;\n\n if (!menuItems.length) {\n return;\n }\n\n event.preventDefault();\n\n const activeMenu = this.focusedMenu;\n\n const activeMenuIndex = activeMenu ? menuItems.indexOf(<TMenuItem>activeMenu) : -1;\n\n const nextMenu = forwards\n ? <TMenuItem>menuItems[activeMenuIndex + 1] ?? menuItems[0]\n : <TMenuItem>menuItems[activeMenuIndex - 1] ?? menuItems[menuItems.length - 1];\n\n if (!nextMenu) {\n return;\n }\n\n this.navigateTo(event, nextMenu, menuItems.indexOf(<TMenuItem>nextMenu));\n }\n\n protected navigateTo(event: KeyboardEvent, menu: TMenuItem | undefined, index: number) {\n event.preventDefault();\n\n this.blurMenu();\n\n if (!menu) {\n return;\n }\n\n this.focusMenu(menu, index);\n }\n\n focusMenu(menu: TMenuItem, index: number, active = true, scroll = true) {\n if (this.focusedMenu) {\n this.focusedMenu.active = false;\n }\n\n this.focusedMenu = menu;\n menu.active = active;\n\n if (scroll) {\n menu.scrollIntoView({ block: 'nearest' });\n }\n\n this.afterFocus(menu, index);\n }\n\n blurMenu() {\n if (!this.focusedMenu) {\n return;\n }\n\n this.focusedMenu.active = false;\n this.focusedMenu = null;\n this.afterBlur();\n }\n\n private selectActiveItem(event: KeyboardEvent) {\n if (!this.focusedMenu) {\n return;\n }\n\n event.preventDefault();\n this.focusedMenu.click();\n this.host._menu.open = false;\n }\n\n protected afterFocus(_: TMenuItem, __: number) {}\n\n protected afterBlur() {}\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//# sourceMappingURL=checkbox-base.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"checkbox-base.d.ts","sourceRoot":"","sources":["../../../src/shared/selection-control/checkbox-base.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"checkbox-base.js","sourceRoot":"","sources":["../../../src/shared/selection-control/checkbox-base.ts"],"names":[],"mappings":";AAAA,+DAA+D;AAC/D,EAAE;AACF,oEAAoE;AACpE,0CAA0C;AAC1C,IAAI","sourcesContent":["// import { UmSelectionControl } from './selection-control.js';\n//\n// export abstract class UmCheckboxBase extends UmSelectionControl {\n// @property({ type: Boolean }) checked;\n// }\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"selection-control-list-item.d.ts","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control-list-item.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAG5D,eAAO,MAAM,6BAA6B,kDAAmD,CAAC,KAAG,YAAY,CAAC,
|
|
1
|
+
{"version":3,"file":"selection-control-list-item.d.ts","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control-list-item.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAG5D,eAAO,MAAM,6BAA6B,kDAAmD,CAAC,KAAG,YAAY,CAAC,CAoC7G,CAAC"}
|
|
@@ -13,6 +13,8 @@ export const mixinSelectionControlListItem = (base) => {
|
|
|
13
13
|
constructor() {
|
|
14
14
|
super(...arguments);
|
|
15
15
|
this.leading = false;
|
|
16
|
+
this.inputDescribedById = 'description';
|
|
17
|
+
this.inputLabelledById = 'label';
|
|
16
18
|
}
|
|
17
19
|
static { this.styles = [
|
|
18
20
|
base.styles ?? [],
|
|
@@ -29,11 +31,13 @@ export const mixinSelectionControlListItem = (base) => {
|
|
|
29
31
|
]; }
|
|
30
32
|
render() {
|
|
31
33
|
return html `
|
|
32
|
-
<
|
|
33
|
-
<
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
34
|
+
<label>
|
|
35
|
+
<u-list-item ?selectable=${!this.disabled}>
|
|
36
|
+
<div slot="${this.leading ? 'leading' : 'trailing'}">${super.render()}</div>
|
|
37
|
+
<span id="label"><slot></slot></span>
|
|
38
|
+
<span id="description" slot="supporting-text"><slot name="supporting-text"></slot></span>
|
|
39
|
+
</u-list-item>
|
|
40
|
+
</label>
|
|
37
41
|
`;
|
|
38
42
|
}
|
|
39
43
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"selection-control-list-item.js","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control-list-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkC,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAK7C,aAAa;AACb,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAA0C,IAAO,EAAkB,EAAE;IAChH,aAAa;IACb,MAAe,wBAAyB,SAAQ,IAAI;QAApD;;YAe+B,YAAO,GAAG,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"selection-control-list-item.js","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control-list-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkC,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAK7C,aAAa;AACb,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAA0C,IAAO,EAAkB,EAAE;IAChH,aAAa;IACb,MAAe,wBAAyB,SAAQ,IAAI;QAApD;;YAe+B,YAAO,GAAG,KAAK,CAAC;YAE1B,uBAAkB,GAAG,aAAa,CAAC;YACnC,sBAAiB,GAAG,OAAO,CAAC;QAajD,CAAC;iBA9BQ,WAAM,GAAG;YACb,IAAqC,CAAC,MAAM,IAAI,EAAE;YACnD,GAAG,CAAA;;;;;;;;;OASF;SACF,AAZY,CAYX;QAOO,MAAM;YACb,OAAO,IAAI,CAAA;;qCAEoB,CAAC,IAAI,CAAC,QAAQ;yBAC1B,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,KAAK,KAAK,CAAC,MAAM,EAAE;;;;;OAK1E,CAAC;QACJ,CAAC;;IAf4B;QAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6DAAiB;IAkB/C,OAAO,wBAAwB,CAAC;AAClC,CAAC,CAAC","sourcesContent":["import { css, html, HTMLTemplateResult, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { MixinBase, MixinReturn } from '../mixin.js';\nimport { UmSelectionControl } from './selection-control.js';\n\n// @ts-ignore\nexport const mixinSelectionControlListItem = <T extends MixinBase<UmSelectionControl>>(base: T): MixinReturn<T> => {\n // @ts-ignore\n abstract class SelectionControlListItem extends base {\n static styles = [\n (base as unknown as typeof LitElement).styles ?? [],\n css`\n :host {\n --u-list-item-block-padding: 0;\n display: block;\n }\n\n :host(:not([disabled])) {\n cursor: pointer;\n }\n `,\n ];\n\n @property({ type: Boolean }) leading = false;\n\n protected override inputDescribedById = 'description';\n protected override inputLabelledById = 'label';\n\n override render(): HTMLTemplateResult {\n return html`\n <label>\n <u-list-item ?selectable=${!this.disabled}>\n <div slot=\"${this.leading ? 'leading' : 'trailing'}\">${super.render()}</div>\n <span id=\"label\"><slot></slot></span>\n <span id=\"description\" slot=\"supporting-text\"><slot name=\"supporting-text\"></slot></span>\n </u-list-item>\n </label>\n `;\n }\n }\n\n return SelectionControlListItem;\n};\n"]}
|
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
import { PropertyValues } from '@lit/reactive-element';
|
|
2
|
+
import { CSSResultGroup } from '@lit/reactive-element/css-tag';
|
|
2
3
|
import { HTMLTemplateResult, LitElement } from 'lit';
|
|
3
4
|
import '../../ripple/ripple.js';
|
|
5
|
+
export declare function isActivationClick(event: Event): boolean;
|
|
4
6
|
export declare abstract class UmSelectionControl extends LitElement {
|
|
5
7
|
#private;
|
|
8
|
+
static styles: CSSResultGroup;
|
|
6
9
|
static readonly formAssociated = true;
|
|
7
10
|
static shadowRootOptions: ShadowRootInit;
|
|
8
11
|
protected readonly elementInternals: ElementInternals;
|
|
@@ -13,6 +16,8 @@ export declare abstract class UmSelectionControl extends LitElement {
|
|
|
13
16
|
focus(options?: FocusOptions): void;
|
|
14
17
|
protected inputType: 'checkbox' | 'radio';
|
|
15
18
|
protected renderRipple: boolean;
|
|
19
|
+
protected inputDescribedById: string | undefined;
|
|
20
|
+
protected inputLabelledById: string | undefined;
|
|
16
21
|
protected abstract renderIndicator(): HTMLTemplateResult;
|
|
17
22
|
/**
|
|
18
23
|
* The element value to use in form submission when checked.
|
|
@@ -26,5 +31,6 @@ export declare abstract class UmSelectionControl extends LitElement {
|
|
|
26
31
|
connectedCallback(): void;
|
|
27
32
|
disconnectedCallback(): void;
|
|
28
33
|
protected render(): HTMLTemplateResult;
|
|
34
|
+
protected _handleClick(e: Event): void;
|
|
29
35
|
}
|
|
30
36
|
//# sourceMappingURL=selection-control.d.ts.map
|
|
@@ -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;
|
|
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,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAQpE,OAAO,wBAAwB,CAAC;AAEhC,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,KAAK,WAmB7C;AA2BD,8BAAsB,kBAAmB,SAAQ,UAAU;;IACzD,OAAgB,MAAM,EAAE,cAAc,CAAwB;IAE9D,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;IAMrC,SAAS,CAAC,SAAS,EAAE,UAAU,GAAG,OAAO,CAAc;IACvD,SAAS,CAAC,YAAY,UAAQ;IAC9B,SAAS,CAAC,kBAAkB,EAAE,MAAM,GAAG,SAAS,CAAa;IAC7D,SAAS,CAAC,iBAAiB,EAAE,MAAM,GAAG,SAAS,CAAa;IAE5D,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;IAuC/C,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,KAAK;CAKhC"}
|
|
@@ -6,8 +6,49 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
6
6
|
};
|
|
7
7
|
import { html, LitElement, nothing } from 'lit';
|
|
8
8
|
import { property, query } from 'lit/decorators.js';
|
|
9
|
+
import { styles as baseStyles } from '../base.styles.js';
|
|
10
|
+
import { styles } from './selection-control.styles.js';
|
|
11
|
+
import { redispatchEvent } from '../events/redispatch-event.js';
|
|
9
12
|
import '../../ripple/ripple.js';
|
|
13
|
+
export function isActivationClick(event) {
|
|
14
|
+
// Event must start at the event target.
|
|
15
|
+
if (event.currentTarget !== event.target) {
|
|
16
|
+
return false;
|
|
17
|
+
}
|
|
18
|
+
// Event must not be retargeted from shadowRoot.
|
|
19
|
+
if (event.composedPath()[0] !== event.target) {
|
|
20
|
+
return false;
|
|
21
|
+
}
|
|
22
|
+
// Target must not be disabled; this should only occur for a synthetically
|
|
23
|
+
// dispatched click.
|
|
24
|
+
if (event.target.disabled) {
|
|
25
|
+
return false;
|
|
26
|
+
}
|
|
27
|
+
// This is an activation if the event should not be squelched.
|
|
28
|
+
return !squelchEvent(event);
|
|
29
|
+
}
|
|
30
|
+
// TODO(https://bugzilla.mozilla.org/show_bug.cgi?id=1804576)
|
|
31
|
+
// Remove when Firefox bug is addressed.
|
|
32
|
+
function squelchEvent(event) {
|
|
33
|
+
const squelched = isSquelchingEvents;
|
|
34
|
+
if (squelched) {
|
|
35
|
+
event.preventDefault();
|
|
36
|
+
event.stopImmediatePropagation();
|
|
37
|
+
}
|
|
38
|
+
squelchEventsForMicrotask();
|
|
39
|
+
return squelched;
|
|
40
|
+
}
|
|
41
|
+
// Ignore events for one microtask only.
|
|
42
|
+
let isSquelchingEvents = false;
|
|
43
|
+
async function squelchEventsForMicrotask() {
|
|
44
|
+
isSquelchingEvents = true;
|
|
45
|
+
// Need to pause for just one microtask.
|
|
46
|
+
// tslint:disable-next-line
|
|
47
|
+
await null;
|
|
48
|
+
isSquelchingEvents = false;
|
|
49
|
+
}
|
|
10
50
|
export class UmSelectionControl extends LitElement {
|
|
51
|
+
static { this.styles = [baseStyles, styles]; }
|
|
11
52
|
static { this.formAssociated = true; }
|
|
12
53
|
static { this.shadowRootOptions = {
|
|
13
54
|
...LitElement.shadowRootOptions,
|
|
@@ -37,6 +78,8 @@ export class UmSelectionControl extends LitElement {
|
|
|
37
78
|
this.#checked = false;
|
|
38
79
|
this.inputType = 'checkbox';
|
|
39
80
|
this.renderRipple = true;
|
|
81
|
+
this.inputDescribedById = undefined;
|
|
82
|
+
this.inputLabelledById = undefined;
|
|
40
83
|
/**
|
|
41
84
|
* The element value to use in form submission when checked.
|
|
42
85
|
*/
|
|
@@ -50,15 +93,15 @@ export class UmSelectionControl extends LitElement {
|
|
|
50
93
|
}
|
|
51
94
|
connectedCallback() {
|
|
52
95
|
super.connectedCallback();
|
|
53
|
-
this.addEventListener('click', this
|
|
96
|
+
this.addEventListener('click', this._handleClick);
|
|
54
97
|
}
|
|
55
98
|
disconnectedCallback() {
|
|
56
99
|
super.disconnectedCallback();
|
|
57
|
-
this.removeEventListener('click', this
|
|
100
|
+
this.removeEventListener('click', this._handleClick);
|
|
58
101
|
}
|
|
59
102
|
render() {
|
|
60
103
|
const ripple = html `
|
|
61
|
-
<u-ripple ?disabled=${this.disabled}></u-ripple>
|
|
104
|
+
<u-ripple ?disabled=${this.disabled} @click=${this.#handleRippleClick}></u-ripple>
|
|
62
105
|
`;
|
|
63
106
|
return html `
|
|
64
107
|
<div class="container">
|
|
@@ -68,18 +111,32 @@ export class UmSelectionControl extends LitElement {
|
|
|
68
111
|
type=${this.inputType}
|
|
69
112
|
class="focus-ring"
|
|
70
113
|
.checked=${this._checkedAttribute}
|
|
71
|
-
.disabled=${this.disabled}
|
|
114
|
+
.disabled=${this.disabled}
|
|
115
|
+
aria-labelledby="${this.inputLabelledById || nothing}"
|
|
116
|
+
aria-describedby="${this.inputDescribedById || nothing}"
|
|
117
|
+
@input=${this.#handleInput}
|
|
118
|
+
@change=${this.#handleChange} />
|
|
72
119
|
<div class="indicator-container">${this.renderIndicator()}</div>
|
|
73
120
|
</div>
|
|
74
121
|
`;
|
|
75
122
|
}
|
|
76
|
-
#
|
|
77
|
-
|
|
78
|
-
|
|
123
|
+
#handleInput(event) {
|
|
124
|
+
const target = event.target;
|
|
125
|
+
this.checked = target.checked;
|
|
126
|
+
// <input> 'input' event bubbles and is composed, don't re-dispatch it.
|
|
127
|
+
}
|
|
128
|
+
#handleChange(event) {
|
|
129
|
+
// <input> 'change' event is not composed, re-dispatch it.
|
|
130
|
+
redispatchEvent(this, event);
|
|
131
|
+
}
|
|
132
|
+
#handleRippleClick(e) {
|
|
133
|
+
e.preventDefault();
|
|
134
|
+
this.input.click();
|
|
135
|
+
}
|
|
136
|
+
_handleClick(e) {
|
|
137
|
+
if (isActivationClick(e)) {
|
|
138
|
+
this.input.click();
|
|
79
139
|
}
|
|
80
|
-
this.checked = this.inputType === 'radio' || !this.checked;
|
|
81
|
-
this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
|
|
82
|
-
this.dispatchEvent(new Event('change', { bubbles: true }));
|
|
83
140
|
}
|
|
84
141
|
}
|
|
85
142
|
__decorate([
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"selection-control.js","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control.ts"],"names":[],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"selection-control.js","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\nimport { CSSResultGroup } from '@lit/reactive-element/css-tag';\nimport { html, HTMLTemplateResult, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../base.styles.js';\nimport { styles } from './selection-control.styles.js';\n\nimport { redispatchEvent } from '../events/redispatch-event.js';\n\nimport '../../ripple/ripple.js';\n\nexport function isActivationClick(event: Event) {\n // Event must start at the event target.\n if (event.currentTarget !== event.target) {\n return false;\n }\n\n // Event must not be retargeted from shadowRoot.\n if (event.composedPath()[0] !== event.target) {\n return false;\n }\n\n // Target must not be disabled; this should only occur for a synthetically\n // dispatched click.\n if ((event.target as EventTarget & { disabled: boolean }).disabled) {\n return false;\n }\n\n // This is an activation if the event should not be squelched.\n return !squelchEvent(event);\n}\n\n// TODO(https://bugzilla.mozilla.org/show_bug.cgi?id=1804576)\n// Remove when Firefox bug is addressed.\nfunction squelchEvent(event: Event) {\n const squelched = isSquelchingEvents;\n\n if (squelched) {\n event.preventDefault();\n event.stopImmediatePropagation();\n }\n\n squelchEventsForMicrotask();\n return squelched;\n}\n\n// Ignore events for one microtask only.\nlet isSquelchingEvents = false;\n\nasync function squelchEventsForMicrotask() {\n isSquelchingEvents = true;\n // Need to pause for just one microtask.\n // tslint:disable-next-line\n await null;\n isSquelchingEvents = false;\n}\n\nexport abstract class UmSelectionControl extends LitElement {\n static override styles: CSSResultGroup = [baseStyles, styles];\n\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\n protected inputType: 'checkbox' | 'radio' = 'checkbox';\n protected renderRipple = true;\n protected inputDescribedById: string | undefined = undefined;\n protected inputLabelledById: string | undefined = undefined;\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} @click=${this.#handleRippleClick}></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 aria-labelledby=\"${this.inputLabelledById || nothing}\"\n aria-describedby=\"${this.inputDescribedById || nothing}\"\n @input=${this.#handleInput}\n @change=${this.#handleChange} />\n <div class=\"indicator-container\">${this.renderIndicator()}</div>\n </div>\n `;\n }\n\n #handleInput(event: Event) {\n const target = event.target as HTMLInputElement;\n this.checked = target.checked;\n // <input> 'input' event bubbles and is composed, don't re-dispatch it.\n }\n\n #handleChange(event: Event) {\n // <input> 'change' event is not composed, re-dispatch it.\n redispatchEvent(this, event);\n }\n\n #handleRippleClick(e: Event) {\n e.preventDefault();\n this.input!.click();\n }\n\n protected _handleClick(e: Event) {\n if (isActivationClick(e)) {\n this.input!.click();\n }\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"selection-control.styles.d.ts","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"selection-control.styles.d.ts","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAgElB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"selection-control.styles.js","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC
|
|
1
|
+
{"version":3,"file":"selection-control.styles.js","sourceRoot":"","sources":["../../../src/shared/selection-control/selection-control.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgEzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host {\n --_state-layer-padding: var(--u--state-layer-padding, 4px);\n --_input-size: calc(var(--_width) - var(--_state-layer-padding) * 2);\n --_indicator-color: var(--u--indicator-unselected-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n display: inline-block;\n vertical-align: middle;\n }\n\n .container {\n cursor: pointer;\n position: relative;\n width: var(--_width);\n height: var(--_height);\n padding: var(--_state-layer-padding);\n border-radius: var(--u-shape-corner-full, 9999px);\n }\n\n :host([hide-state-layer]) .container {\n width: var(--_indicator-size);\n height: var(--_indicator-size);\n padding: 0;\n }\n :host([hide-state-layer]) u-ripple {\n display: none;\n }\n\n input {\n cursor: pointer;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n border-radius: inherit;\n appearance: none;\n }\n\n u-ripple {\n padding: var(--_state-layer-padding);\n }\n\n .indicator-container {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n inset: 0;\n pointer-events: none;\n }\n\n input:checked ~ .indicator-container {\n --_indicator-color: var(--u--indicator-selected-color, var(--u-color-primary, rgb(103, 80, 164)));\n }\n\n :host([disabled]) {\n opacity: var(--u--disabled-state-opacity, 0.38);\n }\n :host([disabled]) input,\n :host([disabled]) .container {\n cursor: default;\n }\n :host([disabled]) .indicator-container {\n --_indicator-color: var(--u--indicator-disabled-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n }\n`;\n"]}
|
package/switch/switch.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { HTMLTemplateResult } from 'lit';
|
|
2
2
|
import { UmSelectionControl } from '../shared/selection-control/selection-control.js';
|
|
3
3
|
export declare class UmSwitch extends UmSelectionControl {
|
|
4
|
-
static styles: import("lit").
|
|
4
|
+
static styles: import("lit").CSSResultGroup[];
|
|
5
5
|
constructor();
|
|
6
6
|
protected renderRipple: boolean;
|
|
7
7
|
protected renderIndicator(): HTMLTemplateResult;
|
package/switch/switch.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/switch/switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/switch/switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAK/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kDAAkD,CAAC;AAEtF,qBACa,QAAS,SAAQ,kBAAkB;IAC9C,OAAgB,MAAM,iCAAuC;;IAM7D,UAAmB,YAAY,UAAS;cAErB,eAAe,IAAI,kBAAkB;CASzD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,QAAQ,CAAC;KACtB;CACF"}
|
package/switch/switch.js
CHANGED
|
@@ -6,24 +6,22 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
6
6
|
};
|
|
7
7
|
import { html } from 'lit';
|
|
8
8
|
import { customElement } from 'lit/decorators.js';
|
|
9
|
-
import { styles as baseStyles } from '../shared/base.styles.js';
|
|
10
9
|
import { styles } from './switch.styles.js';
|
|
11
10
|
import { UmSelectionControl } from '../shared/selection-control/selection-control.js';
|
|
12
11
|
let UmSwitch = class UmSwitch extends UmSelectionControl {
|
|
13
|
-
static { this.styles = [
|
|
14
|
-
baseStyles,
|
|
15
|
-
styles
|
|
16
|
-
]; }
|
|
12
|
+
static { this.styles = [UmSelectionControl.styles, styles]; }
|
|
17
13
|
constructor() {
|
|
18
14
|
super();
|
|
19
15
|
this.renderRipple = false;
|
|
20
16
|
}
|
|
21
17
|
renderIndicator() {
|
|
22
|
-
return html
|
|
23
|
-
<div class="
|
|
24
|
-
<div class="
|
|
18
|
+
return html `
|
|
19
|
+
<div class="indicator">
|
|
20
|
+
<div class="state-layer">
|
|
21
|
+
<div class="handle"></div>
|
|
22
|
+
</div>
|
|
25
23
|
</div>
|
|
26
|
-
|
|
24
|
+
`;
|
|
27
25
|
}
|
|
28
26
|
};
|
|
29
27
|
UmSwitch = __decorate([
|
package/switch/switch.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../src/switch/switch.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAsB,MAAM,KAAK,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../src/switch/switch.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAsB,MAAM,KAAK,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAE5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kDAAkD,CAAC;AAG/E,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,kBAAkB;aAC9B,WAAM,GAAG,CAAC,kBAAkB,CAAC,MAAM,EAAE,MAAM,CAAC,AAAtC,CAAuC;IAE7D;QACE,KAAK,EAAE,CAAC;QAGS,iBAAY,GAAG,KAAK,CAAC;IAFxC,CAAC;IAIkB,eAAe;QAChC,OAAO,IAAI,CAAA;;;;;;KAMV,CAAC;IACJ,CAAC;;AAjBU,QAAQ;IADpB,aAAa,CAAC,UAAU,CAAC;GACb,QAAQ,CAkBpB","sourcesContent":["import { html, HTMLTemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\nimport { styles } from './switch.styles.js';\n\nimport { UmSelectionControl } from '../shared/selection-control/selection-control.js';\n\n@customElement('u-switch')\nexport class UmSwitch extends UmSelectionControl {\n static override styles = [UmSelectionControl.styles, styles];\n\n constructor() {\n super();\n }\n\n protected override renderRipple = false;\n\n protected override renderIndicator(): HTMLTemplateResult {\n return html`\n <div class=\"indicator\">\n <div class=\"state-layer\">\n <div class=\"handle\"></div>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-switch': UmSwitch;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"switch.styles.d.ts","sourceRoot":"","sources":["../../src/switch/switch.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"switch.styles.d.ts","sourceRoot":"","sources":["../../src/switch/switch.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA2ElB,CAAC"}
|