@govtechsg/sgds-web-component 3.16.1-rc.3 → 3.17.0
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/components/Accordion/accordion-item.js +1 -1
- package/components/Accordion/index.umd.min.js +13 -11
- package/components/Accordion/index.umd.min.js.map +1 -1
- package/components/Accordion/sgds-accordion-item.d.ts +4 -1
- package/components/Accordion/sgds-accordion-item.js +15 -11
- package/components/Accordion/sgds-accordion-item.js.map +1 -1
- package/components/Accordion/sgds-accordion.d.ts +1 -1
- package/components/Accordion/sgds-accordion.js.map +1 -1
- package/components/Radio/index.umd.min.js +9 -9
- package/components/Radio/index.umd.min.js.map +1 -1
- package/components/Radio/sgds-radio-group.d.ts +2 -0
- package/components/Radio/sgds-radio-group.js +10 -1
- package/components/Radio/sgds-radio-group.js.map +1 -1
- package/components/Radio/sgds-radio.d.ts +2 -0
- package/components/Radio/sgds-radio.js +6 -1
- package/components/Radio/sgds-radio.js.map +1 -1
- package/components/Tab/index.umd.min.js +3 -2
- package/components/Tab/index.umd.min.js.map +1 -1
- package/components/Tab/sgds-tab-group.js +1 -0
- package/components/Tab/sgds-tab-group.js.map +1 -1
- package/components/Tab/tab-group.js +1 -1
- package/components/Tab/tab.js +1 -1
- package/components/Toast/index.umd.min.js +1 -1
- package/components/Toast/index.umd.min.js.map +1 -1
- package/components/Toast/toast.js +1 -1
- package/components/index.umd.min.js +16 -13
- package/components/index.umd.min.js.map +1 -1
- package/custom-elements.json +50 -3
- package/index.umd.min.js +16 -13
- package/index.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/react/components/Accordion/accordion-item.cjs.js +1 -1
- package/react/components/Accordion/accordion-item.js +1 -1
- package/react/components/Accordion/sgds-accordion-item.cjs.js +15 -11
- package/react/components/Accordion/sgds-accordion-item.cjs.js.map +1 -1
- package/react/components/Accordion/sgds-accordion-item.js +15 -11
- package/react/components/Accordion/sgds-accordion-item.js.map +1 -1
- package/react/components/Accordion/sgds-accordion.cjs.js.map +1 -1
- package/react/components/Accordion/sgds-accordion.js.map +1 -1
- package/react/components/Radio/sgds-radio-group.cjs.js +10 -1
- package/react/components/Radio/sgds-radio-group.cjs.js.map +1 -1
- package/react/components/Radio/sgds-radio-group.js +10 -1
- package/react/components/Radio/sgds-radio-group.js.map +1 -1
- package/react/components/Radio/sgds-radio.cjs.js +6 -1
- package/react/components/Radio/sgds-radio.cjs.js.map +1 -1
- package/react/components/Radio/sgds-radio.js +6 -1
- package/react/components/Radio/sgds-radio.js.map +1 -1
- package/react/components/Tab/sgds-tab-group.cjs.js +1 -0
- package/react/components/Tab/sgds-tab-group.cjs.js.map +1 -1
- package/react/components/Tab/sgds-tab-group.js +1 -0
- package/react/components/Tab/sgds-tab-group.js.map +1 -1
- package/react/components/Tab/tab-group.cjs.js +1 -1
- package/react/components/Tab/tab-group.js +1 -1
- package/react/components/Tab/tab.cjs.js +1 -1
- package/react/components/Tab/tab.js +1 -1
- package/react/components/Toast/toast.cjs.js +1 -1
- package/react/components/Toast/toast.js +1 -1
- package/types/react.d.ts +6 -2
|
@@ -7,9 +7,11 @@ import { AccordionDensity } from "./sgds-accordion";
|
|
|
7
7
|
* @event sgds-hide - Emitted on hide.
|
|
8
8
|
* @event sgds-after-hide - Emitted on hide after animation has completed.
|
|
9
9
|
*
|
|
10
|
+
* @slot icon - An icon placed before the header text, typically used to provide visual context for the accordion item.
|
|
10
11
|
* @slot header - The accordion-item button header slot.
|
|
12
|
+
* @slot badge - A badge placed after the header text, aligned to the right via auto left margin.
|
|
11
13
|
* @slot content - The accordion-item content slot.
|
|
12
|
-
* @slot caret - The caret icon of accordion-item.
|
|
14
|
+
* @slot caret - The caret icon of accordion-item. Defaults to a chevron-down icon.
|
|
13
15
|
*
|
|
14
16
|
*/
|
|
15
17
|
export declare class SgdsAccordionItem extends SgdsElement {
|
|
@@ -33,6 +35,7 @@ export declare class SgdsAccordionItem extends SgdsElement {
|
|
|
33
35
|
show(): Promise<void>;
|
|
34
36
|
/** Hide the accordion */
|
|
35
37
|
hide(): Promise<void>;
|
|
38
|
+
firstUpdated(): void;
|
|
36
39
|
render(): import("lit").TemplateResult<1>;
|
|
37
40
|
}
|
|
38
41
|
export default SgdsAccordionItem;
|
|
@@ -16,9 +16,11 @@ import css_248z from './accordion-item.js';
|
|
|
16
16
|
* @event sgds-hide - Emitted on hide.
|
|
17
17
|
* @event sgds-after-hide - Emitted on hide after animation has completed.
|
|
18
18
|
*
|
|
19
|
+
* @slot icon - An icon placed before the header text, typically used to provide visual context for the accordion item.
|
|
19
20
|
* @slot header - The accordion-item button header slot.
|
|
21
|
+
* @slot badge - A badge placed after the header text, aligned to the right via auto left margin.
|
|
20
22
|
* @slot content - The accordion-item content slot.
|
|
21
|
-
* @slot caret - The caret icon of accordion-item.
|
|
23
|
+
* @slot caret - The caret icon of accordion-item. Defaults to a chevron-down icon.
|
|
22
24
|
*
|
|
23
25
|
*/
|
|
24
26
|
class SgdsAccordionItem extends SgdsElement {
|
|
@@ -108,8 +110,11 @@ class SgdsAccordionItem extends SgdsElement {
|
|
|
108
110
|
this.open = false;
|
|
109
111
|
return waitForEvent(this, "sgds-after-hide");
|
|
110
112
|
}
|
|
113
|
+
firstUpdated() {
|
|
114
|
+
if (!this.open)
|
|
115
|
+
this.body.classList.add("hidden");
|
|
116
|
+
}
|
|
111
117
|
render() {
|
|
112
|
-
const isHydrated = this.hasUpdated;
|
|
113
118
|
return html `
|
|
114
119
|
<div class="accordion-item">
|
|
115
120
|
<button
|
|
@@ -127,17 +132,16 @@ class SgdsAccordionItem extends SgdsElement {
|
|
|
127
132
|
@click=${this.handleSummaryClick}
|
|
128
133
|
@keydown=${this.handleSummaryKeyDown}
|
|
129
134
|
>
|
|
135
|
+
<slot name="icon"></slot>
|
|
130
136
|
<slot name="header"></slot>
|
|
131
|
-
<
|
|
132
|
-
<
|
|
133
|
-
|
|
137
|
+
<div class="accordion-header__trailing">
|
|
138
|
+
<slot name="badge"></slot>
|
|
139
|
+
<slot name="caret">
|
|
140
|
+
<sgds-icon name="chevron-down" size=${this.density === "compact" ? "md" : "lg"}></sgds-icon>
|
|
141
|
+
</slot>
|
|
142
|
+
</div>
|
|
134
143
|
</button>
|
|
135
|
-
<div
|
|
136
|
-
class=${classMap({
|
|
137
|
-
"accordion-body": true,
|
|
138
|
-
hidden: !this.open && !isHydrated
|
|
139
|
-
})}
|
|
140
|
-
>
|
|
144
|
+
<div class="accordion-body">
|
|
141
145
|
<slot id="content" name="content" class="content" role="region" aria-labelledby="header"></slot>
|
|
142
146
|
</div>
|
|
143
147
|
</div>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sgds-accordion-item.js","sources":["../../../src/components/Accordion/sgds-accordion-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport { watch } from \"../../utils/watch\";\nimport accordionItemStyle from \"./accordion-item.css\";\nimport { AccordionDensity } from \"./sgds-accordion\";\n\n/**\n *\n * @event sgds-show - Emitted on show.\n * @event sgds-after-show - Emitted on show after animation has completed.\n * @event sgds-hide - Emitted on hide.\n * @event sgds-after-hide - Emitted on hide after animation has completed.\n *\n * @slot header - The accordion-item button header slot.\n * @slot content - The accordion-item content slot.\n * @slot caret - The caret icon of accordion-item.\n *\n */\nexport class SgdsAccordionItem extends SgdsElement {\n static styles = [...SgdsElement.styles, accordionItemStyle];\n /** @internal */\n @query(\".accordion-item\") accordion: HTMLElement;\n /** @internal */\n @query(\".accordion-btn\") header: HTMLElement;\n /** @internal */\n @query(\".accordion-body\") body: HTMLElement;\n\n /** Controls whether accordion-item is open or close */\n @property({ type: Boolean, reflect: true }) open = false;\n\n /** Disables the accordion item */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /** Controls the density of the individual accordion item. This value is controlled by sgds-accordion */\n @property({ type: String, reflect: true }) density: AccordionDensity = \"default\";\n\n private handleSummaryClick() {\n if (this.open) {\n this.hide();\n } else {\n this.show();\n }\n\n this.header.focus();\n }\n\n private handleSummaryKeyDown(event: KeyboardEvent) {\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n\n if (this.open) {\n this.hide();\n } else {\n this.show();\n }\n }\n\n if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n event.preventDefault();\n this.hide();\n }\n\n if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n event.preventDefault();\n this.show();\n }\n }\n\n @watch(\"open\", { waitUntilFirstUpdate: true })\n async handleOpenChange() {\n if (this.open) {\n // Show\n const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n if (sgdsShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n await stopAnimations(this.body);\n this.body.classList.remove(\"hidden\");\n\n const { keyframes, options } = getAnimation(this, \"accordion.show\");\n await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n this.emit(\"sgds-after-show\");\n } else {\n // Hide\n const slHide = this.emit(\"sgds-hide\", { cancelable: true });\n if (slHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n await stopAnimations(this.body);\n\n const { keyframes, options } = getAnimation(this, \"accordion.hide\");\n const animationDuration = options.duration as number;\n // Workaround to fix GSIB delay after animateTo.\n //Setting a timeout of duration slightly less than animation's duraton to prevent case where animation runs faster than .hidden class is added\n setTimeout(() => {\n this.body.classList.add(\"hidden\");\n }, animationDuration - 20);\n\n await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n this.emit(\"sgds-after-hide\");\n }\n }\n\n /** Shows the accordion. */\n public async show() {\n if (this.open) {\n return;\n }\n\n this.open = true;\n return waitForEvent(this, \"sgds-after-show\");\n }\n\n /** Hide the accordion */\n public async hide() {\n if (!this.open) {\n return;\n }\n this.open = false;\n return waitForEvent(this, \"sgds-after-hide\");\n }\n render() {\n const isHydrated = this.hasUpdated;\n\n return html`\n <div class=\"accordion-item\">\n <button\n class=${classMap({\n \"accordion-btn\": true,\n disabled: this.disabled,\n collapsed: !this.open\n })}\n ?disabled=${this.disabled}\n role=\"button\"\n aria-expanded=${this.open ? \"true\" : \"false\"}\n aria-disabled=${this.disabled ? \"true\" : \"false\"}\n aria-controls=\"content\"\n tabindex=${this.disabled ? \"-1\" : \"0\"}\n @click=${this.handleSummaryClick}\n @keydown=${this.handleSummaryKeyDown}\n >\n <slot name=\"header\"></slot>\n <slot name=\"caret\">\n <sgds-icon name=\"chevron-down\" size=${this.density === \"compact\" ? \"md\" : \"lg\"}></sgds-icon>\n </slot>\n </button>\n <div\n class=${classMap({\n \"accordion-body\": true,\n hidden: !this.open && !isHydrated\n })}\n >\n <slot id=\"content\" name=\"content\" class=\"content\" role=\"region\" aria-labelledby=\"header\"></slot>\n </div>\n </div>\n `;\n }\n}\n\nsetDefaultAnimation(\"accordion.show\", {\n keyframes: [\n { height: \"0\", opacity: \"0\" },\n { height: \"auto\", opacity: \"1\" }\n ],\n options: { duration: 350, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"accordion.hide\", {\n keyframes: [\n { height: \"auto\", opacity: \"1\" },\n { height: \"0\", opacity: \"0\" }\n ],\n options: { duration: 350, easing: \"ease-in-out\" }\n});\n\nexport default SgdsAccordionItem;\n"],"names":["accordionItemStyle"],"mappings":";;;;;;;;;;;AAWA;;;;;;;;;;;AAWG;AACG,MAAO,iBAAkB,SAAQ,WAAW,CAAA;AAAlD,IAAA,WAAA,GAAA;;;QAU8C,IAAI,CAAA,IAAA,GAAG,KAAK,CAAC;;QAGb,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAGlB,IAAO,CAAA,OAAA,GAAqB,SAAS,CAAC;KA+HlF;IA7HS,kBAAkB,GAAA;AACxB,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;aAAM;YACL,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;AAED,QAAA,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;KACrB;AAEO,IAAA,oBAAoB,CAAC,KAAoB,EAAA;AAC/C,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YAC9C,KAAK,CAAC,cAAc,EAAE,CAAC;AAEvB,YAAA,IAAI,IAAI,CAAC,IAAI,EAAE;gBACb,IAAI,CAAC,IAAI,EAAE,CAAC;aACb;iBAAM;gBACL,IAAI,CAAC,IAAI,EAAE,CAAC;aACb;SACF;AAED,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;YACxD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;AAED,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,EAAE;YAC3D,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;KACF;IAGK,MAAA,gBAAgB,GAAA;AACpB,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;;AAEb,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;AAC9D,YAAA,IAAI,QAAQ,CAAC,gBAAgB,EAAE;AAC7B,gBAAA,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;gBAClB,OAAO;aACR;AAED,YAAA,MAAM,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAChC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;AAErC,YAAA,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,YAAY,CAAC,IAAI,EAAE,gBAAgB,CAAC,CAAC;AACpE,YAAA,MAAM,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,uBAAuB,CAAC,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC;AAChG,YAAA,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;SAC9B;aAAM;;AAEL,YAAA,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;AAC5D,YAAA,IAAI,MAAM,CAAC,gBAAgB,EAAE;AAC3B,gBAAA,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;gBACjB,OAAO;aACR;AAED,YAAA,MAAM,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEhC,YAAA,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,YAAY,CAAC,IAAI,EAAE,gBAAgB,CAAC,CAAC;AACpE,YAAA,MAAM,iBAAiB,GAAG,OAAO,CAAC,QAAkB,CAAC;;;YAGrD,UAAU,CAAC,MAAK;gBACd,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;AACpC,aAAC,EAAE,iBAAiB,GAAG,EAAE,CAAC,CAAC;AAE3B,YAAA,MAAM,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,uBAAuB,CAAC,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC;AAChG,YAAA,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;SAC9B;KACF;;AAGM,IAAA,MAAM,IAAI,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,OAAO;SACR;AAED,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;AACjB,QAAA,OAAO,YAAY,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC;KAC9C;;AAGM,IAAA,MAAM,IAAI,GAAA;AACf,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,OAAO;SACR;AACD,QAAA,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;AAClB,QAAA,OAAO,YAAY,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC;KAC9C;IACD,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;AAEnC,QAAA,OAAO,IAAI,CAAA,CAAA;;;AAGG,gBAAA,EAAA,QAAQ,CAAC;AACf,YAAA,eAAe,EAAE,IAAI;YACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACvB,YAAA,SAAS,EAAE,CAAC,IAAI,CAAC,IAAI;SACtB,CAAC,CAAA;AACU,oBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;0BAET,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,CAAA;0BAC5B,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;;qBAErC,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG,CAAA;AAC5B,iBAAA,EAAA,IAAI,CAAC,kBAAkB,CAAA;AACrB,mBAAA,EAAA,IAAI,CAAC,oBAAoB,CAAA;;;;kDAII,IAAI,CAAC,OAAO,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,CAAA;;;;AAIxE,gBAAA,EAAA,QAAQ,CAAC;AACf,YAAA,gBAAgB,EAAE,IAAI;AACtB,YAAA,MAAM,EAAE,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,UAAU;SAClC,CAAC,CAAA;;;;;KAKP,CAAC;KACH;;AA7IM,iBAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAkB,CAA7C,CAA+C;AAElC,UAAA,CAAA;IAAzB,KAAK,CAAC,iBAAiB,CAAC;AAAwB,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAExB,UAAA,CAAA;IAAxB,KAAK,CAAC,gBAAgB,CAAC;AAAqB,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEnB,UAAA,CAAA;IAAzB,KAAK,CAAC,iBAAiB,CAAC;AAAmB,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGA,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAc,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGb,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGlB,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAuC,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAmC3E,UAAA,CAAA;IADL,KAAK,CAAC,MAAM,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAqC7C,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,IAAA,CAAA,CAAA;AA0DH,mBAAmB,CAAC,gBAAgB,EAAE;AACpC,IAAA,SAAS,EAAE;AACT,QAAA,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE;AAC7B,QAAA,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE;AACjC,KAAA;IACD,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,aAAa,EAAE;AAClD,CAAA,CAAC,CAAC;AAEH,mBAAmB,CAAC,gBAAgB,EAAE;AACpC,IAAA,SAAS,EAAE;AACT,QAAA,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE;AAChC,QAAA,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE;AAC9B,KAAA;IACD,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,aAAa,EAAE;AAClD,CAAA,CAAC;;;;"}
|
|
1
|
+
{"version":3,"file":"sgds-accordion-item.js","sources":["../../../src/components/Accordion/sgds-accordion-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport { watch } from \"../../utils/watch\";\nimport accordionItemStyle from \"./accordion-item.css\";\nimport { AccordionDensity } from \"./sgds-accordion\";\n\n/**\n *\n * @event sgds-show - Emitted on show.\n * @event sgds-after-show - Emitted on show after animation has completed.\n * @event sgds-hide - Emitted on hide.\n * @event sgds-after-hide - Emitted on hide after animation has completed.\n *\n * @slot icon - An icon placed before the header text, typically used to provide visual context for the accordion item.\n * @slot header - The accordion-item button header slot.\n * @slot badge - A badge placed after the header text, aligned to the right via auto left margin.\n * @slot content - The accordion-item content slot.\n * @slot caret - The caret icon of accordion-item. Defaults to a chevron-down icon.\n *\n */\nexport class SgdsAccordionItem extends SgdsElement {\n static styles = [...SgdsElement.styles, accordionItemStyle];\n /** @internal */\n @query(\".accordion-item\") accordion: HTMLElement;\n /** @internal */\n @query(\".accordion-btn\") header: HTMLElement;\n /** @internal */\n @query(\".accordion-body\") body: HTMLElement;\n\n /** Controls whether accordion-item is open or close */\n @property({ type: Boolean, reflect: true }) open = false;\n\n /** Disables the accordion item */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /** Controls the density of the individual accordion item. This value is controlled by sgds-accordion */\n @property({ type: String, reflect: true }) density: AccordionDensity = \"default\";\n\n private handleSummaryClick() {\n if (this.open) {\n this.hide();\n } else {\n this.show();\n }\n\n this.header.focus();\n }\n\n private handleSummaryKeyDown(event: KeyboardEvent) {\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n\n if (this.open) {\n this.hide();\n } else {\n this.show();\n }\n }\n\n if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n event.preventDefault();\n this.hide();\n }\n\n if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n event.preventDefault();\n this.show();\n }\n }\n\n @watch(\"open\", { waitUntilFirstUpdate: true })\n async handleOpenChange() {\n if (this.open) {\n // Show\n const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n if (sgdsShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n await stopAnimations(this.body);\n this.body.classList.remove(\"hidden\");\n\n const { keyframes, options } = getAnimation(this, \"accordion.show\");\n await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n this.emit(\"sgds-after-show\");\n } else {\n // Hide\n const slHide = this.emit(\"sgds-hide\", { cancelable: true });\n if (slHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n await stopAnimations(this.body);\n\n const { keyframes, options } = getAnimation(this, \"accordion.hide\");\n const animationDuration = options.duration as number;\n // Workaround to fix GSIB delay after animateTo.\n //Setting a timeout of duration slightly less than animation's duraton to prevent case where animation runs faster than .hidden class is added\n setTimeout(() => {\n this.body.classList.add(\"hidden\");\n }, animationDuration - 20);\n\n await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n this.emit(\"sgds-after-hide\");\n }\n }\n\n /** Shows the accordion. */\n public async show() {\n if (this.open) {\n return;\n }\n\n this.open = true;\n return waitForEvent(this, \"sgds-after-show\");\n }\n\n /** Hide the accordion */\n public async hide() {\n if (!this.open) {\n return;\n }\n this.open = false;\n return waitForEvent(this, \"sgds-after-hide\");\n }\n firstUpdated() {\n if (!this.open) this.body.classList.add(\"hidden\");\n }\n\n render() {\n return html`\n <div class=\"accordion-item\">\n <button\n class=${classMap({\n \"accordion-btn\": true,\n disabled: this.disabled,\n collapsed: !this.open\n })}\n ?disabled=${this.disabled}\n role=\"button\"\n aria-expanded=${this.open ? \"true\" : \"false\"}\n aria-disabled=${this.disabled ? \"true\" : \"false\"}\n aria-controls=\"content\"\n tabindex=${this.disabled ? \"-1\" : \"0\"}\n @click=${this.handleSummaryClick}\n @keydown=${this.handleSummaryKeyDown}\n >\n <slot name=\"icon\"></slot>\n <slot name=\"header\"></slot>\n <div class=\"accordion-header__trailing\">\n <slot name=\"badge\"></slot>\n <slot name=\"caret\">\n <sgds-icon name=\"chevron-down\" size=${this.density === \"compact\" ? \"md\" : \"lg\"}></sgds-icon>\n </slot>\n </div>\n </button>\n <div class=\"accordion-body\">\n <slot id=\"content\" name=\"content\" class=\"content\" role=\"region\" aria-labelledby=\"header\"></slot>\n </div>\n </div>\n `;\n }\n}\n\nsetDefaultAnimation(\"accordion.show\", {\n keyframes: [\n { height: \"0\", opacity: \"0\" },\n { height: \"auto\", opacity: \"1\" }\n ],\n options: { duration: 350, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"accordion.hide\", {\n keyframes: [\n { height: \"auto\", opacity: \"1\" },\n { height: \"0\", opacity: \"0\" }\n ],\n options: { duration: 350, easing: \"ease-in-out\" }\n});\n\nexport default SgdsAccordionItem;\n"],"names":["accordionItemStyle"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import SgdsElement from "../../base/sgds-element";
|
|
2
2
|
import type SgdsAccordionItem from "./sgds-accordion-item";
|
|
3
|
-
export type AccordionDensity = "default" | "compact";
|
|
3
|
+
export type AccordionDensity = "default" | "compact" | "spacious";
|
|
4
4
|
export type AccordionVariant = "default" | "border";
|
|
5
5
|
/**
|
|
6
6
|
* @summary A dropdown mechanism that allow users to either show or hide related content. `SgdsAccordion` is a wrapper to manage the behaviour for multiple `SgdsAccordionItems`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sgds-accordion.js","sources":["../../../src/components/Accordion/sgds-accordion.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport type SgdsAccordionItem from \"./sgds-accordion-item\";\nimport accordionStyle from \"./accordion.css\";\n\nexport type AccordionDensity = \"default\" | \"compact\";\nexport type AccordionVariant = \"default\" | \"border\";\n\nconst VALID_KEYS = [\"Enter\", \"ArrowUp\", \"ArrowLeft\", \"ArrowDown\", \"ArrowRight\"];\n\n/**\n * @summary A dropdown mechanism that allow users to either show or hide related content. `SgdsAccordion` is a wrapper to manage the behaviour for multiple `SgdsAccordionItems`\n * @slot default - slot for accordion-item\n *\n */\n\nexport class SgdsAccordion extends SgdsElement {\n static styles = [...SgdsElement.styles, accordionStyle];\n\n /** Allows multiple accordion items to be opened at the same time */\n @property({ type: Boolean, reflect: true }) allowMultiple = false;\n\n /** The variant of accordion */\n @property({ type: String, reflect: true }) variant: AccordionVariant = \"default\";\n\n /** The density of accordion */\n @property({ type: String, reflect: true }) density: AccordionDensity = \"default\";\n\n /** @internal */\n @queryAssignedElements() private defaultNodes!: SgdsAccordionItem[];\n\n /** @internal */\n get items(): SgdsAccordionItem[] {\n return [...(this.defaultNodes || [])].filter(\n (node: HTMLElement) => typeof node.tagName !== \"undefined\"\n ) as SgdsAccordionItem[];\n }\n\n private _handleSlotChange() {\n const items = [...this.items] as SgdsAccordionItem[];\n items.forEach((item, index) => {\n if (items.length > 1) {\n switch (index) {\n case 0:\n item.setAttribute(\"first-of-type\", \"\");\n break;\n\n case items.length - 1:\n item.setAttribute(\"last-of-type\", \"\");\n break;\n\n default:\n item.setAttribute(\"nth-of-type\", \"\");\n }\n }\n\n item.setAttribute(\"variant\", this.variant);\n item.setAttribute(\"density\", this.density);\n });\n }\n\n private async _onToggle(event: Event) {\n if (this.allowMultiple) {\n // No toggling when `allowMultiple` or the user prevents it.\n return;\n }\n const items = [...this.items] as SgdsAccordionItem[];\n if (items && !items.length) {\n // no toggling when there aren't items.\n return;\n }\n items.forEach(item => {\n // Covers all elements within accordion-item\n if (!event.composedPath().includes(item)) {\n // Close all the items that didn't dispatch the event.\n item.open = false;\n }\n });\n }\n\n private async _onKeyboardToggle(event: KeyboardEvent) {\n if (!VALID_KEYS.includes(event.key)) return;\n return this._onToggle(event);\n }\n\n render() {\n return html`\n <div class=\"accordion\">\n <slot @slotchange=${this._handleSlotChange} @click=${this._onToggle} @keydown=${this._onKeyboardToggle}></slot>\n </div>\n `;\n }\n}\n\nexport default SgdsAccordion;\n"],"names":["accordionStyle"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sgds-accordion.js","sources":["../../../src/components/Accordion/sgds-accordion.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport type SgdsAccordionItem from \"./sgds-accordion-item\";\nimport accordionStyle from \"./accordion.css\";\n\nexport type AccordionDensity = \"default\" | \"compact\" | \"spacious\";\nexport type AccordionVariant = \"default\" | \"border\";\n\nconst VALID_KEYS = [\"Enter\", \"ArrowUp\", \"ArrowLeft\", \"ArrowDown\", \"ArrowRight\"];\n\n/**\n * @summary A dropdown mechanism that allow users to either show or hide related content. `SgdsAccordion` is a wrapper to manage the behaviour for multiple `SgdsAccordionItems`\n * @slot default - slot for accordion-item\n *\n */\n\nexport class SgdsAccordion extends SgdsElement {\n static styles = [...SgdsElement.styles, accordionStyle];\n\n /** Allows multiple accordion items to be opened at the same time */\n @property({ type: Boolean, reflect: true }) allowMultiple = false;\n\n /** The variant of accordion */\n @property({ type: String, reflect: true }) variant: AccordionVariant = \"default\";\n\n /** The density of accordion */\n @property({ type: String, reflect: true }) density: AccordionDensity = \"default\";\n\n /** @internal */\n @queryAssignedElements() private defaultNodes!: SgdsAccordionItem[];\n\n /** @internal */\n get items(): SgdsAccordionItem[] {\n return [...(this.defaultNodes || [])].filter(\n (node: HTMLElement) => typeof node.tagName !== \"undefined\"\n ) as SgdsAccordionItem[];\n }\n\n private _handleSlotChange() {\n const items = [...this.items] as SgdsAccordionItem[];\n items.forEach((item, index) => {\n if (items.length > 1) {\n switch (index) {\n case 0:\n item.setAttribute(\"first-of-type\", \"\");\n break;\n\n case items.length - 1:\n item.setAttribute(\"last-of-type\", \"\");\n break;\n\n default:\n item.setAttribute(\"nth-of-type\", \"\");\n }\n }\n\n item.setAttribute(\"variant\", this.variant);\n item.setAttribute(\"density\", this.density);\n });\n }\n\n private async _onToggle(event: Event) {\n if (this.allowMultiple) {\n // No toggling when `allowMultiple` or the user prevents it.\n return;\n }\n const items = [...this.items] as SgdsAccordionItem[];\n if (items && !items.length) {\n // no toggling when there aren't items.\n return;\n }\n items.forEach(item => {\n // Covers all elements within accordion-item\n if (!event.composedPath().includes(item)) {\n // Close all the items that didn't dispatch the event.\n item.open = false;\n }\n });\n }\n\n private async _onKeyboardToggle(event: KeyboardEvent) {\n if (!VALID_KEYS.includes(event.key)) return;\n return this._onToggle(event);\n }\n\n render() {\n return html`\n <div class=\"accordion\">\n <slot @slotchange=${this._handleSlotChange} @click=${this._onToggle} @keydown=${this._onKeyboardToggle}></slot>\n </div>\n `;\n }\n}\n\nexport default SgdsAccordion;\n"],"names":["accordionStyle"],"mappings":"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"}
|
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
!function(t){"function"==typeof define&&define.amd?define(t):t()}(function(){"use strict";function t(t,e,i,s){var n,r=arguments.length,
|
|
1
|
+
!function(t){"function"==typeof define&&define.amd?define(t):t()}(function(){"use strict";function t(t,e,i,s){var n,r=arguments.length,o=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,e,i,s);else for(var a=t.length-1;a>=0;a--)(n=t[a])&&(o=(r<3?n(o):r>3?n(e,i,o):n(e,i))||o);return r>3&&o&&Object.defineProperty(e,i,o),o}"function"==typeof SuppressedError&&SuppressedError;
|
|
2
2
|
/**
|
|
3
3
|
* @license
|
|
4
4
|
* Copyright 2019 Google LLC
|
|
5
5
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
6
6
|
*/
|
|
7
|
-
const e=globalThis,i=e.ShadowRoot&&(void 0===e.ShadyCSS||e.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s=Symbol(),n=new WeakMap;class r{constructor(t,e,i){if(this._$cssResult$=!0,i!==s)throw new Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this._strings=e}get styleSheet(){let t=this._styleSheet;const e=this._strings;if(i&&void 0===t){const i=void 0!==e&&1===e.length;i&&(t=n.get(e)),void 0===t&&((this._styleSheet=t=new CSSStyleSheet).replaceSync(this.cssText),i&&n.set(e,t))}return t}toString(){return this.cssText}}const a=(t,...e)=>{const i=1===t.length?t[0]:e.reduce((e,i,s)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw new Error(`Value passed to 'css' function must be a 'css' function result: ${t}. Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.`)})(i)+t[s+1],t[0]);return new r(i,t,s)},o=t=>{let e="";for(const i of t.cssRules)e+=i.cssText;return new r("string"==typeof(i=e)?i:String(i),void 0,s);var i},l=i?t=>t:t=>t instanceof CSSStyleSheet?o(t):t,{is:d,defineProperty:h,getOwnPropertyDescriptor:c,getOwnPropertyNames:u,getOwnPropertySymbols:p,getPrototypeOf:m}=Object,f=globalThis;let g;const v=f.trustedTypes,_=v?v.emptyScript:"",b=f.reactiveElementPolyfillSupportDevMode;f.litIssuedWarnings??=new Set,g=(t,e)=>{e+=` See https://lit.dev/msg/${t} for more information.`,f.litIssuedWarnings.has(e)||f.litIssuedWarnings.has(t)||(console.warn(e),f.litIssuedWarnings.add(e))},queueMicrotask(()=>{g("dev-mode","Lit is in dev mode. Not recommended for production!"),f.ShadyDOM?.inUse&&void 0===b&&g("polyfill-support-missing","Shadow DOM is being polyfilled via `ShadyDOM` but the `polyfill-support` module has not been loaded.")});const y=(t,e)=>t,w={toAttribute(t,e){switch(e){case Boolean:t=t?_:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let i=t;switch(e){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t)}catch(t){i=null}}return i}},$=(t,e)=>!d(t,e),k={attribute:!0,type:String,converter:w,reflect:!1,useDefault:!1,hasChanged:$};Symbol.metadata??=Symbol("metadata"),f.litPropertyMetadata??=new WeakMap;class S extends HTMLElement{static addInitializer(t){this.__prepare(),(this._initializers??=[]).push(t)}static get observedAttributes(){return this.finalize(),this.__attributeToPropertyMap&&[...this.__attributeToPropertyMap.keys()]}static createProperty(t,e=k){if(e.state&&(e.attribute=!1),this.__prepare(),this.prototype.hasOwnProperty(t)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(t,e),!e.noAccessor){const i=Symbol.for(`${String(t)} (@property() cache)`),s=this.getPropertyDescriptor(t,i,e);void 0!==s&&h(this.prototype,t,s)}}static getPropertyDescriptor(t,e,i){const{get:s,set:n}=c(this.prototype,t)??{get(){return this[e]},set(t){this[e]=t}};if(null==s){if("value"in(c(this.prototype,t)??{}))throw new Error(`Field ${JSON.stringify(String(t))} on ${this.name} was declared as a reactive property but it's actually declared as a value on the prototype. Usually this is due to using @property or @state on a method.`);g("reactive-property-without-getter",`Field ${JSON.stringify(String(t))} on ${this.name} was declared as a reactive property but it does not have a getter. This will be an error in a future version of Lit.`)}return{get:s,set(e){const r=s?.call(this);n?.call(this,e),this.requestUpdate(t,r,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??k}static __prepare(){if(this.hasOwnProperty(y("elementProperties")))return;const t=m(this);t.finalize(),void 0!==t._initializers&&(this._initializers=[...t._initializers]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(y("finalized")))return;if(this.finalized=!0,this.__prepare(),this.hasOwnProperty(y("properties"))){const t=this.properties,e=[...u(t),...p(t)];for(const i of e)this.createProperty(i,t[i])}const t=this[Symbol.metadata];if(null!==t){const e=litPropertyMetadata.get(t);if(void 0!==e)for(const[t,i]of e)this.elementProperties.set(t,i)}this.__attributeToPropertyMap=new Map;for(const[t,e]of this.elementProperties){const i=this.__attributeNameForProperty(t,e);void 0!==i&&this.__attributeToPropertyMap.set(i,t)}this.elementStyles=this.finalizeStyles(this.styles),this.hasOwnProperty("createProperty")&&g("no-override-create-property","Overriding ReactiveElement.createProperty() is deprecated. The override will not be called with standard decorators"),this.hasOwnProperty("getPropertyDescriptor")&&g("no-override-get-property-descriptor","Overriding ReactiveElement.getPropertyDescriptor() is deprecated. The override will not be called with standard decorators")}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const i=new Set(t.flat(1/0).reverse());for(const t of i)e.unshift(l(t))}else void 0!==t&&e.push(l(t));return e}static __attributeNameForProperty(t,e){const i=e.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this.__instanceProperties=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this.__reflectingProperty=null,this.__initialize()}__initialize(){this.__updatePromise=new Promise(t=>this.enableUpdating=t),this._$changedProperties=new Map,this.__saveInstanceProperties(),this.requestUpdate(),this.constructor._initializers?.forEach(t=>t(this))}addController(t){(this.__controllers??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.()}removeController(t){this.__controllers?.delete(t)}__saveInstanceProperties(){const t=new Map,e=this.constructor.elementProperties;for(const i of e.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this.__instanceProperties=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return((t,s)=>{if(i)t.adoptedStyleSheets=s.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const i of s){const s=document.createElement("style"),n=e.litNonce;void 0!==n&&s.setAttribute("nonce",n),s.textContent=i.cssText,t.appendChild(s)}})(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this.__controllers?.forEach(t=>t.hostConnected?.())}enableUpdating(t){}disconnectedCallback(){this.__controllers?.forEach(t=>t.hostDisconnected?.())}attributeChangedCallback(t,e,i){this._$attributeToProperty(t,i)}__propertyToAttribute(t,e){const i=this.constructor.elementProperties.get(t),s=this.constructor.__attributeNameForProperty(t,i);if(void 0!==s&&!0===i.reflect){const n=(void 0!==i.converter?.toAttribute?i.converter:w).toAttribute(e,i.type);this.constructor.enabledWarnings.includes("migration")&&void 0===n&&g("undefined-attribute-value",`The attribute value for the ${t} property is undefined on element ${this.localName}. The attribute will be removed, but in the previous version of \`ReactiveElement\`, the attribute would not have changed.`),this.__reflectingProperty=t,null==n?this.removeAttribute(s):this.setAttribute(s,n),this.__reflectingProperty=null}}_$attributeToProperty(t,e){const i=this.constructor,s=i.__attributeToPropertyMap.get(t);if(void 0!==s&&this.__reflectingProperty!==s){const t=i.getPropertyOptions(s),n="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:w;this.__reflectingProperty=s;const r=n.fromAttribute(e,t.type);this[s]=r??this.__defaultValues?.get(s)??r,this.__reflectingProperty=null}}requestUpdate(t,e,i,s=!1,n){if(void 0!==t){t instanceof Event&&g("","The requestUpdate() method was called with an Event as the property name. This is probably a mistake caused by binding this.requestUpdate as an event listener. Instead bind a function that will call it with no arguments: () => this.requestUpdate()");const r=this.constructor;!1===s&&(n=this[t]),i??=r.getPropertyOptions(t);if(!((i.hasChanged??$)(n,e)||i.useDefault&&i.reflect&&n===this.__defaultValues?.get(t)&&!this.hasAttribute(r.__attributeNameForProperty(t,i))))return;this._$changeProperty(t,e,i)}!1===this.isUpdatePending&&(this.__updatePromise=this.__enqueueUpdate())}_$changeProperty(t,e,{useDefault:i,reflect:s,wrapped:n},r){i&&!(this.__defaultValues??=new Map).has(t)&&(this.__defaultValues.set(t,r??e??this[t]),!0!==n||void 0!==r)||(this._$changedProperties.has(t)||(this.hasUpdated||i||(e=void 0),this._$changedProperties.set(t,e)),!0===s&&this.__reflectingProperty!==t&&(this.__reflectingProperties??=new Set).add(t))}async __enqueueUpdate(){this.isUpdatePending=!0;try{await this.__updatePromise}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){const t=this.performUpdate();return this.constructor.enabledWarnings.includes("async-perform-update")&&"function"==typeof t?.then&&g("async-perform-update",`Element ${this.localName} returned a Promise from performUpdate(). This behavior is deprecated and will be removed in a future version of ReactiveElement.`),t}performUpdate(){if(!this.isUpdatePending)return;var t;if(t={kind:"update"},f.emitLitDebugLogEvents&&f.dispatchEvent(new CustomEvent("lit-debug",{detail:t})),!this.hasUpdated){this.renderRoot??=this.createRenderRoot();{const t=[...this.constructor.elementProperties.keys()].filter(t=>this.hasOwnProperty(t)&&t in m(this));if(t.length)throw new Error(`The following properties on element ${this.localName} will not trigger updates as expected because they are set using class fields: ${t.join(", ")}. Native class fields and some compiled output will overwrite accessors used for detecting changes. See https://lit.dev/msg/class-field-shadowing for more information.`)}if(this.__instanceProperties){for(const[t,e]of this.__instanceProperties)this[t]=e;this.__instanceProperties=void 0}const t=this.constructor.elementProperties;if(t.size>0)for(const[e,i]of t){const{wrapped:t}=i,s=this[e];!0!==t||this._$changedProperties.has(e)||void 0===s||this._$changeProperty(e,void 0,i,s)}}let e=!1;const i=this._$changedProperties;try{e=this.shouldUpdate(i),e?(this.willUpdate(i),this.__controllers?.forEach(t=>t.hostUpdate?.()),this.update(i)):this.__markUpdated()}catch(t){throw e=!1,this.__markUpdated(),t}e&&this._$didUpdate(i)}willUpdate(t){}_$didUpdate(t){this.__controllers?.forEach(t=>t.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t),this.isUpdatePending&&this.constructor.enabledWarnings.includes("change-in-update")&&g("change-in-update",`Element ${this.localName} scheduled an update (generally because a property was set) after an update completed, causing a new update to be scheduled. This is inefficient and should be avoided unless the next update can only be scheduled as a side effect of the previous update.`)}__markUpdated(){this._$changedProperties=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this.__updatePromise}shouldUpdate(t){return!0}update(t){this.__reflectingProperties&&=this.__reflectingProperties.forEach(t=>this.__propertyToAttribute(t,this[t])),this.__markUpdated()}updated(t){}firstUpdated(t){}}S.elementStyles=[],S.shadowRootOptions={mode:"open"},S[y("elementProperties")]=new Map,S[y("finalized")]=new Map,b?.({ReactiveElement:S});{S.enabledWarnings=["change-in-update","async-perform-update"];const t=function(t){t.hasOwnProperty(y("enabledWarnings"))||(t.enabledWarnings=t.enabledWarnings.slice())};S.enableWarning=function(e){t(this),this.enabledWarnings.includes(e)||this.enabledWarnings.push(e)},S.disableWarning=function(e){t(this);const i=this.enabledWarnings.indexOf(e);i>=0&&this.enabledWarnings.splice(i,1)}}(f.reactiveElementVersions??=[]).push("2.1.2"),f.reactiveElementVersions.length>1&&queueMicrotask(()=>{g("multiple-versions","Multiple versions of Lit loaded. Loading multiple versions is not recommended.")});
|
|
7
|
+
const e=globalThis,i=e.ShadowRoot&&(void 0===e.ShadyCSS||e.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s=Symbol(),n=new WeakMap;class r{constructor(t,e,i){if(this._$cssResult$=!0,i!==s)throw new Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this._strings=e}get styleSheet(){let t=this._styleSheet;const e=this._strings;if(i&&void 0===t){const i=void 0!==e&&1===e.length;i&&(t=n.get(e)),void 0===t&&((this._styleSheet=t=new CSSStyleSheet).replaceSync(this.cssText),i&&n.set(e,t))}return t}toString(){return this.cssText}}const o=(t,...e)=>{const i=1===t.length?t[0]:e.reduce((e,i,s)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw new Error(`Value passed to 'css' function must be a 'css' function result: ${t}. Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.`)})(i)+t[s+1],t[0]);return new r(i,t,s)},a=t=>{let e="";for(const i of t.cssRules)e+=i.cssText;return new r("string"==typeof(i=e)?i:String(i),void 0,s);var i},l=i?t=>t:t=>t instanceof CSSStyleSheet?a(t):t,{is:d,defineProperty:h,getOwnPropertyDescriptor:c,getOwnPropertyNames:u,getOwnPropertySymbols:p,getPrototypeOf:m}=Object,f=globalThis;let g;const v=f.trustedTypes,_=v?v.emptyScript:"",y=f.reactiveElementPolyfillSupportDevMode;f.litIssuedWarnings??=new Set,g=(t,e)=>{e+=` See https://lit.dev/msg/${t} for more information.`,f.litIssuedWarnings.has(e)||f.litIssuedWarnings.has(t)||(console.warn(e),f.litIssuedWarnings.add(e))},queueMicrotask(()=>{g("dev-mode","Lit is in dev mode. Not recommended for production!"),f.ShadyDOM?.inUse&&void 0===y&&g("polyfill-support-missing","Shadow DOM is being polyfilled via `ShadyDOM` but the `polyfill-support` module has not been loaded.")});const b=(t,e)=>t,w={toAttribute(t,e){switch(e){case Boolean:t=t?_:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let i=t;switch(e){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t)}catch(t){i=null}}return i}},$=(t,e)=>!d(t,e),k={attribute:!0,type:String,converter:w,reflect:!1,useDefault:!1,hasChanged:$};Symbol.metadata??=Symbol("metadata"),f.litPropertyMetadata??=new WeakMap;class S extends HTMLElement{static addInitializer(t){this.__prepare(),(this._initializers??=[]).push(t)}static get observedAttributes(){return this.finalize(),this.__attributeToPropertyMap&&[...this.__attributeToPropertyMap.keys()]}static createProperty(t,e=k){if(e.state&&(e.attribute=!1),this.__prepare(),this.prototype.hasOwnProperty(t)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(t,e),!e.noAccessor){const i=Symbol.for(`${String(t)} (@property() cache)`),s=this.getPropertyDescriptor(t,i,e);void 0!==s&&h(this.prototype,t,s)}}static getPropertyDescriptor(t,e,i){const{get:s,set:n}=c(this.prototype,t)??{get(){return this[e]},set(t){this[e]=t}};if(null==s){if("value"in(c(this.prototype,t)??{}))throw new Error(`Field ${JSON.stringify(String(t))} on ${this.name} was declared as a reactive property but it's actually declared as a value on the prototype. Usually this is due to using @property or @state on a method.`);g("reactive-property-without-getter",`Field ${JSON.stringify(String(t))} on ${this.name} was declared as a reactive property but it does not have a getter. This will be an error in a future version of Lit.`)}return{get:s,set(e){const r=s?.call(this);n?.call(this,e),this.requestUpdate(t,r,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??k}static __prepare(){if(this.hasOwnProperty(b("elementProperties")))return;const t=m(this);t.finalize(),void 0!==t._initializers&&(this._initializers=[...t._initializers]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(b("finalized")))return;if(this.finalized=!0,this.__prepare(),this.hasOwnProperty(b("properties"))){const t=this.properties,e=[...u(t),...p(t)];for(const i of e)this.createProperty(i,t[i])}const t=this[Symbol.metadata];if(null!==t){const e=litPropertyMetadata.get(t);if(void 0!==e)for(const[t,i]of e)this.elementProperties.set(t,i)}this.__attributeToPropertyMap=new Map;for(const[t,e]of this.elementProperties){const i=this.__attributeNameForProperty(t,e);void 0!==i&&this.__attributeToPropertyMap.set(i,t)}this.elementStyles=this.finalizeStyles(this.styles),this.hasOwnProperty("createProperty")&&g("no-override-create-property","Overriding ReactiveElement.createProperty() is deprecated. The override will not be called with standard decorators"),this.hasOwnProperty("getPropertyDescriptor")&&g("no-override-get-property-descriptor","Overriding ReactiveElement.getPropertyDescriptor() is deprecated. The override will not be called with standard decorators")}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const i=new Set(t.flat(1/0).reverse());for(const t of i)e.unshift(l(t))}else void 0!==t&&e.push(l(t));return e}static __attributeNameForProperty(t,e){const i=e.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this.__instanceProperties=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this.__reflectingProperty=null,this.__initialize()}__initialize(){this.__updatePromise=new Promise(t=>this.enableUpdating=t),this._$changedProperties=new Map,this.__saveInstanceProperties(),this.requestUpdate(),this.constructor._initializers?.forEach(t=>t(this))}addController(t){(this.__controllers??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.()}removeController(t){this.__controllers?.delete(t)}__saveInstanceProperties(){const t=new Map,e=this.constructor.elementProperties;for(const i of e.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this.__instanceProperties=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return((t,s)=>{if(i)t.adoptedStyleSheets=s.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const i of s){const s=document.createElement("style"),n=e.litNonce;void 0!==n&&s.setAttribute("nonce",n),s.textContent=i.cssText,t.appendChild(s)}})(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this.__controllers?.forEach(t=>t.hostConnected?.())}enableUpdating(t){}disconnectedCallback(){this.__controllers?.forEach(t=>t.hostDisconnected?.())}attributeChangedCallback(t,e,i){this._$attributeToProperty(t,i)}__propertyToAttribute(t,e){const i=this.constructor.elementProperties.get(t),s=this.constructor.__attributeNameForProperty(t,i);if(void 0!==s&&!0===i.reflect){const n=(void 0!==i.converter?.toAttribute?i.converter:w).toAttribute(e,i.type);this.constructor.enabledWarnings.includes("migration")&&void 0===n&&g("undefined-attribute-value",`The attribute value for the ${t} property is undefined on element ${this.localName}. The attribute will be removed, but in the previous version of \`ReactiveElement\`, the attribute would not have changed.`),this.__reflectingProperty=t,null==n?this.removeAttribute(s):this.setAttribute(s,n),this.__reflectingProperty=null}}_$attributeToProperty(t,e){const i=this.constructor,s=i.__attributeToPropertyMap.get(t);if(void 0!==s&&this.__reflectingProperty!==s){const t=i.getPropertyOptions(s),n="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:w;this.__reflectingProperty=s;const r=n.fromAttribute(e,t.type);this[s]=r??this.__defaultValues?.get(s)??r,this.__reflectingProperty=null}}requestUpdate(t,e,i,s=!1,n){if(void 0!==t){t instanceof Event&&g("","The requestUpdate() method was called with an Event as the property name. This is probably a mistake caused by binding this.requestUpdate as an event listener. Instead bind a function that will call it with no arguments: () => this.requestUpdate()");const r=this.constructor;!1===s&&(n=this[t]),i??=r.getPropertyOptions(t);if(!((i.hasChanged??$)(n,e)||i.useDefault&&i.reflect&&n===this.__defaultValues?.get(t)&&!this.hasAttribute(r.__attributeNameForProperty(t,i))))return;this._$changeProperty(t,e,i)}!1===this.isUpdatePending&&(this.__updatePromise=this.__enqueueUpdate())}_$changeProperty(t,e,{useDefault:i,reflect:s,wrapped:n},r){i&&!(this.__defaultValues??=new Map).has(t)&&(this.__defaultValues.set(t,r??e??this[t]),!0!==n||void 0!==r)||(this._$changedProperties.has(t)||(this.hasUpdated||i||(e=void 0),this._$changedProperties.set(t,e)),!0===s&&this.__reflectingProperty!==t&&(this.__reflectingProperties??=new Set).add(t))}async __enqueueUpdate(){this.isUpdatePending=!0;try{await this.__updatePromise}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){const t=this.performUpdate();return this.constructor.enabledWarnings.includes("async-perform-update")&&"function"==typeof t?.then&&g("async-perform-update",`Element ${this.localName} returned a Promise from performUpdate(). This behavior is deprecated and will be removed in a future version of ReactiveElement.`),t}performUpdate(){if(!this.isUpdatePending)return;var t;if(t={kind:"update"},f.emitLitDebugLogEvents&&f.dispatchEvent(new CustomEvent("lit-debug",{detail:t})),!this.hasUpdated){this.renderRoot??=this.createRenderRoot();{const t=[...this.constructor.elementProperties.keys()].filter(t=>this.hasOwnProperty(t)&&t in m(this));if(t.length)throw new Error(`The following properties on element ${this.localName} will not trigger updates as expected because they are set using class fields: ${t.join(", ")}. Native class fields and some compiled output will overwrite accessors used for detecting changes. See https://lit.dev/msg/class-field-shadowing for more information.`)}if(this.__instanceProperties){for(const[t,e]of this.__instanceProperties)this[t]=e;this.__instanceProperties=void 0}const t=this.constructor.elementProperties;if(t.size>0)for(const[e,i]of t){const{wrapped:t}=i,s=this[e];!0!==t||this._$changedProperties.has(e)||void 0===s||this._$changeProperty(e,void 0,i,s)}}let e=!1;const i=this._$changedProperties;try{e=this.shouldUpdate(i),e?(this.willUpdate(i),this.__controllers?.forEach(t=>t.hostUpdate?.()),this.update(i)):this.__markUpdated()}catch(t){throw e=!1,this.__markUpdated(),t}e&&this._$didUpdate(i)}willUpdate(t){}_$didUpdate(t){this.__controllers?.forEach(t=>t.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t),this.isUpdatePending&&this.constructor.enabledWarnings.includes("change-in-update")&&g("change-in-update",`Element ${this.localName} scheduled an update (generally because a property was set) after an update completed, causing a new update to be scheduled. This is inefficient and should be avoided unless the next update can only be scheduled as a side effect of the previous update.`)}__markUpdated(){this._$changedProperties=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this.__updatePromise}shouldUpdate(t){return!0}update(t){this.__reflectingProperties&&=this.__reflectingProperties.forEach(t=>this.__propertyToAttribute(t,this[t])),this.__markUpdated()}updated(t){}firstUpdated(t){}}S.elementStyles=[],S.shadowRootOptions={mode:"open"},S[b("elementProperties")]=new Map,S[b("finalized")]=new Map,y?.({ReactiveElement:S});{S.enabledWarnings=["change-in-update","async-perform-update"];const t=function(t){t.hasOwnProperty(b("enabledWarnings"))||(t.enabledWarnings=t.enabledWarnings.slice())};S.enableWarning=function(e){t(this),this.enabledWarnings.includes(e)||this.enabledWarnings.push(e)},S.disableWarning=function(e){t(this);const i=this.enabledWarnings.indexOf(e);i>=0&&this.enabledWarnings.splice(i,1)}}(f.reactiveElementVersions??=[]).push("2.1.2"),f.reactiveElementVersions.length>1&&queueMicrotask(()=>{g("multiple-versions","Multiple versions of Lit loaded. Loading multiple versions is not recommended.")});
|
|
8
8
|
/**
|
|
9
9
|
* @license
|
|
10
10
|
* Copyright 2017 Google LLC
|
|
11
11
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
12
12
|
*/
|
|
13
|
-
const x=globalThis,C=t=>{x.emitLitDebugLogEvents&&x.dispatchEvent(new CustomEvent("lit-debug",{detail:t}))};let V,P=0;x.litIssuedWarnings??=new Set,V=(t,e)=>{e+=t?` See https://lit.dev/msg/${t} for more information.`:"",x.litIssuedWarnings.has(e)||x.litIssuedWarnings.has(t)||(console.warn(e),x.litIssuedWarnings.add(e))},queueMicrotask(()=>{V("dev-mode","Lit is in dev mode. Not recommended for production!")});const E=x.ShadyDOM?.inUse&&!0===x.ShadyDOM?.noPatch?x.ShadyDOM.wrap:t=>t,T=x.trustedTypes,I=T?T.createPolicy("lit-html",{createHTML:t=>t}):void 0,U=t=>t,M=(t,e,i)=>U,N=t=>{if(rt!==M)throw new Error("Attempted to overwrite existing lit-html security policy. setSanitizeDOMValueFactory should be called at most once.");rt=t},O=()=>{rt=M},R=(t,e,i)=>rt(t,e,i),A="$lit$",z=`lit$${Math.random().toFixed(9).slice(2)}$`,D="?"+z,L=`<${D}>`,F=document,W=()=>F.createComment(""),q=t=>null===t||"object"!=typeof t&&"function"!=typeof t,j=Array.isArray,H="[ \t\n\f\r]",B=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,Z=/-->/g,J=/>/g,G=new RegExp(`>|${H}(?:([^\\s"'>=/]+)(${H}*=${H}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),K=/'/g,Y=/"/g,X=/^(?:script|style|textarea|title)$/i,Q=(tt=1,(t,...e)=>(t.some(t=>void 0===t)&&console.warn("Some template strings are undefined.\nThis is probably caused by illegal octal escape sequences."),e.some(t=>t?._$litStatic$)&&V("","Static values 'literal' or 'unsafeStatic' cannot be used as values to non-static templates.\nPlease use the static 'html' tag function. See https://lit.dev/docs/templates/expressions/#static-expressions"),{_$litType$:tt,strings:t,values:e}));var tt;const et=Symbol.for("lit-noChange"),it=Symbol.for("lit-nothing"),st=new WeakMap,nt=F.createTreeWalker(F,129);let rt=M;function at(t,e){if(!j(t)||!t.hasOwnProperty("raw")){let t="invalid template strings array";throw t="\n Internal Error: expected template strings to be an array\n with a 'raw' field. Faking a template strings array by\n calling html or svg like an ordinary function is effectively\n the same as calling unsafeHtml and can lead to major security\n issues, e.g. opening your code up to XSS attacks.\n If you're using the html or svg tagged template functions normally\n and still seeing this error, please file a bug at\n https://github.com/lit/lit/issues/new?template=bug_report.md\n and include information about your build tooling, if any.\n ".trim().replace(/\n */g,"\n"),new Error(t)}return void 0!==I?I.createHTML(e):e}class ot{constructor({strings:t,_$litType$:e},i){let s;this.parts=[];let n=0,r=0;const a=t.length-1,o=this.parts,[l,d]=((t,e)=>{const i=t.length-1,s=[];let n,r=2===e?"<svg>":3===e?"<math>":"",a=B;for(let e=0;e<i;e++){const i=t[e];let o,l,d=-1,h=0;for(;h<i.length&&(a.lastIndex=h,l=a.exec(i),null!==l);)if(h=a.lastIndex,a===B){if("!--"===l[1])a=Z;else if(void 0!==l[1])a=J;else if(void 0!==l[2])X.test(l[2])&&(n=new RegExp(`</${l[2]}`,"g")),a=G;else if(void 0!==l[3])throw new Error("Bindings in tag names are not supported. Please use static templates instead. See https://lit.dev/docs/templates/expressions/#static-expressions")}else a===G?">"===l[0]?(a=n??B,d=-1):void 0===l[1]?d=-2:(d=a.lastIndex-l[2].length,o=l[1],a=void 0===l[3]?G:'"'===l[3]?Y:K):a===Y||a===K?a=G:a===Z||a===J?a=B:(a=G,n=void 0);console.assert(-1===d||a===G||a===K||a===Y,"unexpected parse state B");const c=a===G&&t[e+1].startsWith("/>")?" ":"";r+=a===B?i+L:d>=0?(s.push(o),i.slice(0,d)+A+i.slice(d)+z+c):i+z+(-2===d?e:c)}return[at(t,r+(t[i]||"<?>")+(2===e?"</svg>":3===e?"</math>":"")),s]})(t,e);if(this.el=ot.createElement(l,i),nt.currentNode=this.el.content,2===e||3===e){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes)}for(;null!==(s=nt.nextNode())&&o.length<a;){if(1===s.nodeType){{const t=s.localName;if(/^(?:textarea|template)$/i.test(t)&&s.innerHTML.includes(z)){const e=`Expressions are not supported inside \`${t}\` elements. See https://lit.dev/msg/expression-in-${t} for more information.`;if("template"===t)throw new Error(e);V("",e)}}if(s.hasAttributes())for(const t of s.getAttributeNames())if(t.endsWith(A)){const e=d[r++],i=s.getAttribute(t).split(z),a=/([.?@])?(.*)/.exec(e);o.push({type:1,index:n,name:a[2],strings:i,ctor:"."===a[1]?ut:"?"===a[1]?pt:"@"===a[1]?mt:ct}),s.removeAttribute(t)}else t.startsWith(z)&&(o.push({type:6,index:n}),s.removeAttribute(t));if(X.test(s.tagName)){const t=s.textContent.split(z),e=t.length-1;if(e>0){s.textContent=T?T.emptyScript:"";for(let i=0;i<e;i++)s.append(t[i],W()),nt.nextNode(),o.push({type:2,index:++n});s.append(t[e],W())}}}else if(8===s.nodeType){if(s.data===D)o.push({type:2,index:n});else{let t=-1;for(;-1!==(t=s.data.indexOf(z,t+1));)o.push({type:7,index:n}),t+=z.length-1}}n++}if(d.length!==r)throw new Error('Detected duplicate attribute bindings. This occurs if your template has duplicate attributes on an element tag. For example "<input ?disabled=${true} ?disabled=${false}>" contains a duplicate "disabled" attribute. The error was detected in the following template: \n`'+t.join("${...}")+"`");C&&C({kind:"template prep",template:this,clonableTemplate:this.el,parts:this.parts,strings:t})}static createElement(t,e){const i=F.createElement("template");return i.innerHTML=t,i}}function lt(t,e,i=t,s){if(e===et)return e;let n=void 0!==s?i.__directives?.[s]:i.__directive;const r=q(e)?void 0:e._$litDirective$;return n?.constructor!==r&&(n?._$notifyDirectiveConnectionChanged?.(!1),void 0===r?n=void 0:(n=new r(t),n._$initialize(t,i,s)),void 0!==s?(i.__directives??=[])[s]=n:i.__directive=n),void 0!==n&&(e=lt(t,n._$resolve(t,e.values),n,s)),e}class dt{constructor(t,e){this._$parts=[],this._$disconnectableChildren=void 0,this._$template=t,this._$parent=e}get parentNode(){return this._$parent.parentNode}get _$isConnected(){return this._$parent._$isConnected}_clone(t){const{el:{content:e},parts:i}=this._$template,s=(t?.creationScope??F).importNode(e,!0);nt.currentNode=s;let n=nt.nextNode(),r=0,a=0,o=i[0];for(;void 0!==o;){if(r===o.index){let e;2===o.type?e=new ht(n,n.nextSibling,this,t):1===o.type?e=new o.ctor(n,o.name,o.strings,this,t):6===o.type&&(e=new ft(n,this,t)),this._$parts.push(e),o=i[++a]}r!==o?.index&&(n=nt.nextNode(),r++)}return nt.currentNode=F,s}_update(t){let e=0;for(const i of this._$parts)void 0!==i&&(C&&C({kind:"set part",part:i,value:t[e],valueIndex:e,values:t,templateInstance:this}),void 0!==i.strings?(i._$setValue(t,i,e),e+=i.strings.length-2):i._$setValue(t[e])),e++}}class ht{get _$isConnected(){return this._$parent?._$isConnected??this.__isConnected}constructor(t,e,i,s){this.type=2,this._$committedValue=it,this._$disconnectableChildren=void 0,this._$startNode=t,this._$endNode=e,this._$parent=i,this.options=s,this.__isConnected=s?.isConnected??!0,this._textSanitizer=void 0}get parentNode(){let t=E(this._$startNode).parentNode;const e=this._$parent;return void 0!==e&&11===t?.nodeType&&(t=e.parentNode),t}get startNode(){return this._$startNode}get endNode(){return this._$endNode}_$setValue(t,e=this){if(null===this.parentNode)throw new Error("This `ChildPart` has no `parentNode` and therefore cannot accept a value. This likely means the element containing the part was manipulated in an unsupported way outside of Lit's control such that the part's marker nodes were ejected from DOM. For example, setting the element's `innerHTML` or `textContent` can do this.");if(t=lt(this,t,e),q(t))t===it||null==t||""===t?(this._$committedValue!==it&&(C&&C({kind:"commit nothing to child",start:this._$startNode,end:this._$endNode,parent:this._$parent,options:this.options}),this._$clear()),this._$committedValue=it):t!==this._$committedValue&&t!==et&&this._commitText(t);else if(void 0!==t._$litType$)this._commitTemplateResult(t);else if(void 0!==t.nodeType){if(this.options?.host===t)return this._commitText("[probable mistake: rendered a template's host in itself (commonly caused by writing ${this} in a template]"),void console.warn("Attempted to render the template host",t,"inside itself. This is almost always a mistake, and in dev mode ","we render some warning text. In production however, we'll ","render it, which will usually result in an error, and sometimes ","in the element disappearing from the DOM.");this._commitNode(t)}else(t=>j(t)||"function"==typeof t?.[Symbol.iterator])(t)?this._commitIterable(t):this._commitText(t)}_insert(t){return E(E(this._$startNode).parentNode).insertBefore(t,this._$endNode)}_commitNode(t){if(this._$committedValue!==t){if(this._$clear(),rt!==M){const t=this._$startNode.parentNode?.nodeName;if("STYLE"===t||"SCRIPT"===t){let e="Forbidden";throw e="STYLE"===t?"Lit does not support binding inside style nodes. This is a security risk, as style injection attacks can exfiltrate data and spoof UIs. Consider instead using css`...` literals to compose styles, and do dynamic styling with css custom properties, ::parts, <slot>s, and by mutating the DOM rather than stylesheets.":"Lit does not support binding inside script nodes. This is a security risk, as it could allow arbitrary code execution.",new Error(e)}}C&&C({kind:"commit node",start:this._$startNode,parent:this._$parent,value:t,options:this.options}),this._$committedValue=this._insert(t)}}_commitText(t){if(this._$committedValue!==it&&q(this._$committedValue)){const e=E(this._$startNode).nextSibling;void 0===this._textSanitizer&&(this._textSanitizer=R(e,"data","property")),t=this._textSanitizer(t),C&&C({kind:"commit text",node:e,value:t,options:this.options}),e.data=t}else{const e=F.createTextNode("");this._commitNode(e),void 0===this._textSanitizer&&(this._textSanitizer=R(e,"data","property")),t=this._textSanitizer(t),C&&C({kind:"commit text",node:e,value:t,options:this.options}),e.data=t}this._$committedValue=t}_commitTemplateResult(t){const{values:e,_$litType$:i}=t,s="number"==typeof i?this._$getTemplate(t):(void 0===i.el&&(i.el=ot.createElement(at(i.h,i.h[0]),this.options)),i);if(this._$committedValue?._$template===s)C&&C({kind:"template updating",template:s,instance:this._$committedValue,parts:this._$committedValue._$parts,options:this.options,values:e}),this._$committedValue._update(e);else{const t=new dt(s,this),i=t._clone(this.options);C&&C({kind:"template instantiated",template:s,instance:t,parts:t._$parts,options:this.options,fragment:i,values:e}),t._update(e),C&&C({kind:"template instantiated and updated",template:s,instance:t,parts:t._$parts,options:this.options,fragment:i,values:e}),this._commitNode(i),this._$committedValue=t}}_$getTemplate(t){let e=st.get(t.strings);return void 0===e&&st.set(t.strings,e=new ot(t)),e}_commitIterable(t){j(this._$committedValue)||(this._$committedValue=[],this._$clear());const e=this._$committedValue;let i,s=0;for(const n of t)s===e.length?e.push(i=new ht(this._insert(W()),this._insert(W()),this,this.options)):i=e[s],i._$setValue(n),s++;s<e.length&&(this._$clear(i&&E(i._$endNode).nextSibling,s),e.length=s)}_$clear(t=E(this._$startNode).nextSibling,e){for(this._$notifyConnectionChanged?.(!1,!0,e);t!==this._$endNode;){const e=E(t).nextSibling;E(t).remove(),t=e}}setConnected(t){if(void 0!==this._$parent)throw new Error("part.setConnected() may only be called on a RootPart returned from render().");this.__isConnected=t,this._$notifyConnectionChanged?.(t)}}class ct{get tagName(){return this.element.tagName}get _$isConnected(){return this._$parent._$isConnected}constructor(t,e,i,s,n){this.type=1,this._$committedValue=it,this._$disconnectableChildren=void 0,this.element=t,this.name=e,this._$parent=s,this.options=n,i.length>2||""!==i[0]||""!==i[1]?(this._$committedValue=new Array(i.length-1).fill(new String),this.strings=i):this._$committedValue=it,this._sanitizer=void 0}_$setValue(t,e=this,i,s){const n=this.strings;let r=!1;if(void 0===n)t=lt(this,t,e,0),r=!q(t)||t!==this._$committedValue&&t!==et,r&&(this._$committedValue=t);else{const s=t;let a,o;for(t=n[0],a=0;a<n.length-1;a++)o=lt(this,s[i+a],e,a),o===et&&(o=this._$committedValue[a]),r||=!q(o)||o!==this._$committedValue[a],o===it?t=it:t!==it&&(t+=(o??"")+n[a+1]),this._$committedValue[a]=o}r&&!s&&this._commitValue(t)}_commitValue(t){t===it?E(this.element).removeAttribute(this.name):(void 0===this._sanitizer&&(this._sanitizer=rt(this.element,this.name,"attribute")),t=this._sanitizer(t??""),C&&C({kind:"commit attribute",element:this.element,name:this.name,value:t,options:this.options}),E(this.element).setAttribute(this.name,t??""))}}class ut extends ct{constructor(){super(...arguments),this.type=3}_commitValue(t){void 0===this._sanitizer&&(this._sanitizer=rt(this.element,this.name,"property")),t=this._sanitizer(t),C&&C({kind:"commit property",element:this.element,name:this.name,value:t,options:this.options}),this.element[this.name]=t===it?void 0:t}}class pt extends ct{constructor(){super(...arguments),this.type=4}_commitValue(t){C&&C({kind:"commit boolean attribute",element:this.element,name:this.name,value:!(!t||t===it),options:this.options}),E(this.element).toggleAttribute(this.name,!!t&&t!==it)}}class mt extends ct{constructor(t,e,i,s,n){if(super(t,e,i,s,n),this.type=5,void 0!==this.strings)throw new Error(`A \`<${t.localName}>\` has a \`@${e}=...\` listener with invalid content. Event listeners in templates must have exactly one expression and no surrounding text.`)}_$setValue(t,e=this){if((t=lt(this,t,e,0)??it)===et)return;const i=this._$committedValue,s=t===it&&i!==it||t.capture!==i.capture||t.once!==i.once||t.passive!==i.passive,n=t!==it&&(i===it||s);C&&C({kind:"commit event listener",element:this.element,name:this.name,value:t,options:this.options,removeListener:s,addListener:n,oldListener:i}),s&&this.element.removeEventListener(this.name,this,i),n&&this.element.addEventListener(this.name,this,t),this._$committedValue=t}handleEvent(t){"function"==typeof this._$committedValue?this._$committedValue.call(this.options?.host??this.element,t):this._$committedValue.handleEvent(t)}}class ft{constructor(t,e,i){this.element=t,this.type=6,this._$disconnectableChildren=void 0,this._$parent=e,this.options=i}get _$isConnected(){return this._$parent._$isConnected}_$setValue(t){C&&C({kind:"commit to element binding",element:this.element,value:t,options:this.options}),lt(this,t)}}const gt=x.litHtmlPolyfillSupportDevMode;gt?.(ot,ht),(x.litHtmlVersions??=[]).push("3.3.2"),x.litHtmlVersions.length>1&&queueMicrotask(()=>{V("multiple-versions","Multiple versions of Lit loaded. Loading multiple versions is not recommended.")});const vt=(t,e,i)=>{if(null==e)throw new TypeError(`The container to render into may not be ${e}`);const s=P++,n=i?.renderBefore??e;let r=n._$litPart$;if(C&&C({kind:"begin render",id:s,value:t,container:e,options:i,part:r}),void 0===r){const t=i?.renderBefore??null;n._$litPart$=r=new ht(e.insertBefore(W(),t),t,void 0,i??{})}return r._$setValue(t),C&&C({kind:"end render",id:s,value:t,container:e,options:i,part:r}),r};vt.setSanitizer=N,vt.createSanitizer=R,vt._testOnlyClearSanitizerFactoryDoNotCallOrElse=O;
|
|
13
|
+
const x=globalThis,C=t=>{x.emitLitDebugLogEvents&&x.dispatchEvent(new CustomEvent("lit-debug",{detail:t}))};let V,P=0;x.litIssuedWarnings??=new Set,V=(t,e)=>{e+=t?` See https://lit.dev/msg/${t} for more information.`:"",x.litIssuedWarnings.has(e)||x.litIssuedWarnings.has(t)||(console.warn(e),x.litIssuedWarnings.add(e))},queueMicrotask(()=>{V("dev-mode","Lit is in dev mode. Not recommended for production!")});const E=x.ShadyDOM?.inUse&&!0===x.ShadyDOM?.noPatch?x.ShadyDOM.wrap:t=>t,T=x.trustedTypes,I=T?T.createPolicy("lit-html",{createHTML:t=>t}):void 0,U=t=>t,M=(t,e,i)=>U,N=t=>{if(rt!==M)throw new Error("Attempted to overwrite existing lit-html security policy. setSanitizeDOMValueFactory should be called at most once.");rt=t},O=()=>{rt=M},R=(t,e,i)=>rt(t,e,i),A="$lit$",z=`lit$${Math.random().toFixed(9).slice(2)}$`,D="?"+z,L=`<${D}>`,F=document,W=()=>F.createComment(""),q=t=>null===t||"object"!=typeof t&&"function"!=typeof t,j=Array.isArray,B="[ \t\n\f\r]",H=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,Z=/-->/g,J=/>/g,G=new RegExp(`>|${B}(?:([^\\s"'>=/]+)(${B}*=${B}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),K=/'/g,Y=/"/g,X=/^(?:script|style|textarea|title)$/i,Q=(tt=1,(t,...e)=>(t.some(t=>void 0===t)&&console.warn("Some template strings are undefined.\nThis is probably caused by illegal octal escape sequences."),e.some(t=>t?._$litStatic$)&&V("","Static values 'literal' or 'unsafeStatic' cannot be used as values to non-static templates.\nPlease use the static 'html' tag function. See https://lit.dev/docs/templates/expressions/#static-expressions"),{_$litType$:tt,strings:t,values:e}));var tt;const et=Symbol.for("lit-noChange"),it=Symbol.for("lit-nothing"),st=new WeakMap,nt=F.createTreeWalker(F,129);let rt=M;function ot(t,e){if(!j(t)||!t.hasOwnProperty("raw")){let t="invalid template strings array";throw t="\n Internal Error: expected template strings to be an array\n with a 'raw' field. Faking a template strings array by\n calling html or svg like an ordinary function is effectively\n the same as calling unsafeHtml and can lead to major security\n issues, e.g. opening your code up to XSS attacks.\n If you're using the html or svg tagged template functions normally\n and still seeing this error, please file a bug at\n https://github.com/lit/lit/issues/new?template=bug_report.md\n and include information about your build tooling, if any.\n ".trim().replace(/\n */g,"\n"),new Error(t)}return void 0!==I?I.createHTML(e):e}class at{constructor({strings:t,_$litType$:e},i){let s;this.parts=[];let n=0,r=0;const o=t.length-1,a=this.parts,[l,d]=((t,e)=>{const i=t.length-1,s=[];let n,r=2===e?"<svg>":3===e?"<math>":"",o=H;for(let e=0;e<i;e++){const i=t[e];let a,l,d=-1,h=0;for(;h<i.length&&(o.lastIndex=h,l=o.exec(i),null!==l);)if(h=o.lastIndex,o===H){if("!--"===l[1])o=Z;else if(void 0!==l[1])o=J;else if(void 0!==l[2])X.test(l[2])&&(n=new RegExp(`</${l[2]}`,"g")),o=G;else if(void 0!==l[3])throw new Error("Bindings in tag names are not supported. Please use static templates instead. See https://lit.dev/docs/templates/expressions/#static-expressions")}else o===G?">"===l[0]?(o=n??H,d=-1):void 0===l[1]?d=-2:(d=o.lastIndex-l[2].length,a=l[1],o=void 0===l[3]?G:'"'===l[3]?Y:K):o===Y||o===K?o=G:o===Z||o===J?o=H:(o=G,n=void 0);console.assert(-1===d||o===G||o===K||o===Y,"unexpected parse state B");const c=o===G&&t[e+1].startsWith("/>")?" ":"";r+=o===H?i+L:d>=0?(s.push(a),i.slice(0,d)+A+i.slice(d)+z+c):i+z+(-2===d?e:c)}return[ot(t,r+(t[i]||"<?>")+(2===e?"</svg>":3===e?"</math>":"")),s]})(t,e);if(this.el=at.createElement(l,i),nt.currentNode=this.el.content,2===e||3===e){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes)}for(;null!==(s=nt.nextNode())&&a.length<o;){if(1===s.nodeType){{const t=s.localName;if(/^(?:textarea|template)$/i.test(t)&&s.innerHTML.includes(z)){const e=`Expressions are not supported inside \`${t}\` elements. See https://lit.dev/msg/expression-in-${t} for more information.`;if("template"===t)throw new Error(e);V("",e)}}if(s.hasAttributes())for(const t of s.getAttributeNames())if(t.endsWith(A)){const e=d[r++],i=s.getAttribute(t).split(z),o=/([.?@])?(.*)/.exec(e);a.push({type:1,index:n,name:o[2],strings:i,ctor:"."===o[1]?ut:"?"===o[1]?pt:"@"===o[1]?mt:ct}),s.removeAttribute(t)}else t.startsWith(z)&&(a.push({type:6,index:n}),s.removeAttribute(t));if(X.test(s.tagName)){const t=s.textContent.split(z),e=t.length-1;if(e>0){s.textContent=T?T.emptyScript:"";for(let i=0;i<e;i++)s.append(t[i],W()),nt.nextNode(),a.push({type:2,index:++n});s.append(t[e],W())}}}else if(8===s.nodeType){if(s.data===D)a.push({type:2,index:n});else{let t=-1;for(;-1!==(t=s.data.indexOf(z,t+1));)a.push({type:7,index:n}),t+=z.length-1}}n++}if(d.length!==r)throw new Error('Detected duplicate attribute bindings. This occurs if your template has duplicate attributes on an element tag. For example "<input ?disabled=${true} ?disabled=${false}>" contains a duplicate "disabled" attribute. The error was detected in the following template: \n`'+t.join("${...}")+"`");C&&C({kind:"template prep",template:this,clonableTemplate:this.el,parts:this.parts,strings:t})}static createElement(t,e){const i=F.createElement("template");return i.innerHTML=t,i}}function lt(t,e,i=t,s){if(e===et)return e;let n=void 0!==s?i.__directives?.[s]:i.__directive;const r=q(e)?void 0:e._$litDirective$;return n?.constructor!==r&&(n?._$notifyDirectiveConnectionChanged?.(!1),void 0===r?n=void 0:(n=new r(t),n._$initialize(t,i,s)),void 0!==s?(i.__directives??=[])[s]=n:i.__directive=n),void 0!==n&&(e=lt(t,n._$resolve(t,e.values),n,s)),e}class dt{constructor(t,e){this._$parts=[],this._$disconnectableChildren=void 0,this._$template=t,this._$parent=e}get parentNode(){return this._$parent.parentNode}get _$isConnected(){return this._$parent._$isConnected}_clone(t){const{el:{content:e},parts:i}=this._$template,s=(t?.creationScope??F).importNode(e,!0);nt.currentNode=s;let n=nt.nextNode(),r=0,o=0,a=i[0];for(;void 0!==a;){if(r===a.index){let e;2===a.type?e=new ht(n,n.nextSibling,this,t):1===a.type?e=new a.ctor(n,a.name,a.strings,this,t):6===a.type&&(e=new ft(n,this,t)),this._$parts.push(e),a=i[++o]}r!==a?.index&&(n=nt.nextNode(),r++)}return nt.currentNode=F,s}_update(t){let e=0;for(const i of this._$parts)void 0!==i&&(C&&C({kind:"set part",part:i,value:t[e],valueIndex:e,values:t,templateInstance:this}),void 0!==i.strings?(i._$setValue(t,i,e),e+=i.strings.length-2):i._$setValue(t[e])),e++}}class ht{get _$isConnected(){return this._$parent?._$isConnected??this.__isConnected}constructor(t,e,i,s){this.type=2,this._$committedValue=it,this._$disconnectableChildren=void 0,this._$startNode=t,this._$endNode=e,this._$parent=i,this.options=s,this.__isConnected=s?.isConnected??!0,this._textSanitizer=void 0}get parentNode(){let t=E(this._$startNode).parentNode;const e=this._$parent;return void 0!==e&&11===t?.nodeType&&(t=e.parentNode),t}get startNode(){return this._$startNode}get endNode(){return this._$endNode}_$setValue(t,e=this){if(null===this.parentNode)throw new Error("This `ChildPart` has no `parentNode` and therefore cannot accept a value. This likely means the element containing the part was manipulated in an unsupported way outside of Lit's control such that the part's marker nodes were ejected from DOM. For example, setting the element's `innerHTML` or `textContent` can do this.");if(t=lt(this,t,e),q(t))t===it||null==t||""===t?(this._$committedValue!==it&&(C&&C({kind:"commit nothing to child",start:this._$startNode,end:this._$endNode,parent:this._$parent,options:this.options}),this._$clear()),this._$committedValue=it):t!==this._$committedValue&&t!==et&&this._commitText(t);else if(void 0!==t._$litType$)this._commitTemplateResult(t);else if(void 0!==t.nodeType){if(this.options?.host===t)return this._commitText("[probable mistake: rendered a template's host in itself (commonly caused by writing ${this} in a template]"),void console.warn("Attempted to render the template host",t,"inside itself. This is almost always a mistake, and in dev mode ","we render some warning text. In production however, we'll ","render it, which will usually result in an error, and sometimes ","in the element disappearing from the DOM.");this._commitNode(t)}else(t=>j(t)||"function"==typeof t?.[Symbol.iterator])(t)?this._commitIterable(t):this._commitText(t)}_insert(t){return E(E(this._$startNode).parentNode).insertBefore(t,this._$endNode)}_commitNode(t){if(this._$committedValue!==t){if(this._$clear(),rt!==M){const t=this._$startNode.parentNode?.nodeName;if("STYLE"===t||"SCRIPT"===t){let e="Forbidden";throw e="STYLE"===t?"Lit does not support binding inside style nodes. This is a security risk, as style injection attacks can exfiltrate data and spoof UIs. Consider instead using css`...` literals to compose styles, and do dynamic styling with css custom properties, ::parts, <slot>s, and by mutating the DOM rather than stylesheets.":"Lit does not support binding inside script nodes. This is a security risk, as it could allow arbitrary code execution.",new Error(e)}}C&&C({kind:"commit node",start:this._$startNode,parent:this._$parent,value:t,options:this.options}),this._$committedValue=this._insert(t)}}_commitText(t){if(this._$committedValue!==it&&q(this._$committedValue)){const e=E(this._$startNode).nextSibling;void 0===this._textSanitizer&&(this._textSanitizer=R(e,"data","property")),t=this._textSanitizer(t),C&&C({kind:"commit text",node:e,value:t,options:this.options}),e.data=t}else{const e=F.createTextNode("");this._commitNode(e),void 0===this._textSanitizer&&(this._textSanitizer=R(e,"data","property")),t=this._textSanitizer(t),C&&C({kind:"commit text",node:e,value:t,options:this.options}),e.data=t}this._$committedValue=t}_commitTemplateResult(t){const{values:e,_$litType$:i}=t,s="number"==typeof i?this._$getTemplate(t):(void 0===i.el&&(i.el=at.createElement(ot(i.h,i.h[0]),this.options)),i);if(this._$committedValue?._$template===s)C&&C({kind:"template updating",template:s,instance:this._$committedValue,parts:this._$committedValue._$parts,options:this.options,values:e}),this._$committedValue._update(e);else{const t=new dt(s,this),i=t._clone(this.options);C&&C({kind:"template instantiated",template:s,instance:t,parts:t._$parts,options:this.options,fragment:i,values:e}),t._update(e),C&&C({kind:"template instantiated and updated",template:s,instance:t,parts:t._$parts,options:this.options,fragment:i,values:e}),this._commitNode(i),this._$committedValue=t}}_$getTemplate(t){let e=st.get(t.strings);return void 0===e&&st.set(t.strings,e=new at(t)),e}_commitIterable(t){j(this._$committedValue)||(this._$committedValue=[],this._$clear());const e=this._$committedValue;let i,s=0;for(const n of t)s===e.length?e.push(i=new ht(this._insert(W()),this._insert(W()),this,this.options)):i=e[s],i._$setValue(n),s++;s<e.length&&(this._$clear(i&&E(i._$endNode).nextSibling,s),e.length=s)}_$clear(t=E(this._$startNode).nextSibling,e){for(this._$notifyConnectionChanged?.(!1,!0,e);t!==this._$endNode;){const e=E(t).nextSibling;E(t).remove(),t=e}}setConnected(t){if(void 0!==this._$parent)throw new Error("part.setConnected() may only be called on a RootPart returned from render().");this.__isConnected=t,this._$notifyConnectionChanged?.(t)}}class ct{get tagName(){return this.element.tagName}get _$isConnected(){return this._$parent._$isConnected}constructor(t,e,i,s,n){this.type=1,this._$committedValue=it,this._$disconnectableChildren=void 0,this.element=t,this.name=e,this._$parent=s,this.options=n,i.length>2||""!==i[0]||""!==i[1]?(this._$committedValue=new Array(i.length-1).fill(new String),this.strings=i):this._$committedValue=it,this._sanitizer=void 0}_$setValue(t,e=this,i,s){const n=this.strings;let r=!1;if(void 0===n)t=lt(this,t,e,0),r=!q(t)||t!==this._$committedValue&&t!==et,r&&(this._$committedValue=t);else{const s=t;let o,a;for(t=n[0],o=0;o<n.length-1;o++)a=lt(this,s[i+o],e,o),a===et&&(a=this._$committedValue[o]),r||=!q(a)||a!==this._$committedValue[o],a===it?t=it:t!==it&&(t+=(a??"")+n[o+1]),this._$committedValue[o]=a}r&&!s&&this._commitValue(t)}_commitValue(t){t===it?E(this.element).removeAttribute(this.name):(void 0===this._sanitizer&&(this._sanitizer=rt(this.element,this.name,"attribute")),t=this._sanitizer(t??""),C&&C({kind:"commit attribute",element:this.element,name:this.name,value:t,options:this.options}),E(this.element).setAttribute(this.name,t??""))}}class ut extends ct{constructor(){super(...arguments),this.type=3}_commitValue(t){void 0===this._sanitizer&&(this._sanitizer=rt(this.element,this.name,"property")),t=this._sanitizer(t),C&&C({kind:"commit property",element:this.element,name:this.name,value:t,options:this.options}),this.element[this.name]=t===it?void 0:t}}class pt extends ct{constructor(){super(...arguments),this.type=4}_commitValue(t){C&&C({kind:"commit boolean attribute",element:this.element,name:this.name,value:!(!t||t===it),options:this.options}),E(this.element).toggleAttribute(this.name,!!t&&t!==it)}}class mt extends ct{constructor(t,e,i,s,n){if(super(t,e,i,s,n),this.type=5,void 0!==this.strings)throw new Error(`A \`<${t.localName}>\` has a \`@${e}=...\` listener with invalid content. Event listeners in templates must have exactly one expression and no surrounding text.`)}_$setValue(t,e=this){if((t=lt(this,t,e,0)??it)===et)return;const i=this._$committedValue,s=t===it&&i!==it||t.capture!==i.capture||t.once!==i.once||t.passive!==i.passive,n=t!==it&&(i===it||s);C&&C({kind:"commit event listener",element:this.element,name:this.name,value:t,options:this.options,removeListener:s,addListener:n,oldListener:i}),s&&this.element.removeEventListener(this.name,this,i),n&&this.element.addEventListener(this.name,this,t),this._$committedValue=t}handleEvent(t){"function"==typeof this._$committedValue?this._$committedValue.call(this.options?.host??this.element,t):this._$committedValue.handleEvent(t)}}class ft{constructor(t,e,i){this.element=t,this.type=6,this._$disconnectableChildren=void 0,this._$parent=e,this.options=i}get _$isConnected(){return this._$parent._$isConnected}_$setValue(t){C&&C({kind:"commit to element binding",element:this.element,value:t,options:this.options}),lt(this,t)}}const gt=x.litHtmlPolyfillSupportDevMode;gt?.(at,ht),(x.litHtmlVersions??=[]).push("3.3.2"),x.litHtmlVersions.length>1&&queueMicrotask(()=>{V("multiple-versions","Multiple versions of Lit loaded. Loading multiple versions is not recommended.")});const vt=(t,e,i)=>{if(null==e)throw new TypeError(`The container to render into may not be ${e}`);const s=P++,n=i?.renderBefore??e;let r=n._$litPart$;if(C&&C({kind:"begin render",id:s,value:t,container:e,options:i,part:r}),void 0===r){const t=i?.renderBefore??null;n._$litPart$=r=new ht(e.insertBefore(W(),t),t,void 0,i??{})}return r._$setValue(t),C&&C({kind:"end render",id:s,value:t,container:e,options:i,part:r}),r};vt.setSanitizer=N,vt.createSanitizer=R,vt._testOnlyClearSanitizerFactoryDoNotCallOrElse=O;
|
|
14
14
|
/**
|
|
15
15
|
* @license
|
|
16
16
|
* Copyright 2017 Google LLC
|
|
17
17
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
18
18
|
*/
|
|
19
|
-
const _t=globalThis;let
|
|
19
|
+
const _t=globalThis;let yt;_t.litIssuedWarnings??=new Set,yt=(t,e)=>{e+=` See https://lit.dev/msg/${t} for more information.`,_t.litIssuedWarnings.has(e)||_t.litIssuedWarnings.has(t)||(console.warn(e),_t.litIssuedWarnings.add(e))};class bt extends S{constructor(){super(...arguments),this.renderOptions={host:this},this.__childPart=void 0}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this.__childPart=vt(e,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this.__childPart?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this.__childPart?.setConnected(!1)}render(){return et}}var wt;bt._$litElement$=!0,bt[(wt="finalized",wt)]=!0,_t.litElementHydrateSupport?.({LitElement:bt});const $t=_t.litElementPolyfillSupportDevMode;
|
|
20
20
|
/**
|
|
21
21
|
* @license
|
|
22
22
|
* Copyright 2017 Google LLC
|
|
23
23
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
24
24
|
*/
|
|
25
|
-
let kt;$t?.({LitElement:
|
|
25
|
+
let kt;$t?.({LitElement:bt}),(_t.litElementVersions??=[]).push("4.2.2"),_t.litElementVersions.length>1&&queueMicrotask(()=>{yt("multiple-versions","Multiple versions of Lit loaded. Loading multiple versions is not recommended.")}),globalThis.litIssuedWarnings??=new Set,kt=(t,e)=>{e+=` See https://lit.dev/msg/${t} for more information.`,globalThis.litIssuedWarnings.has(e)||globalThis.litIssuedWarnings.has(t)||(console.warn(e),globalThis.litIssuedWarnings.add(e))};const St={attribute:!0,type:String,converter:w,reflect:!1,hasChanged:$},xt=(t=St,e,i)=>{const{kind:s,metadata:n}=i;null==n&&kt("missing-class-metadata",`The class ${e} is missing decorator metadata. This could mean that you're using a compiler that supports decorators but doesn't support decorator metadata, such as TypeScript 5.1. Please update your compiler.`);let r=globalThis.litPropertyMetadata.get(n);if(void 0===r&&globalThis.litPropertyMetadata.set(n,r=new Map),"setter"===s&&((t=Object.create(t)).wrapped=!0),r.set(i.name,t),"accessor"===s){const{name:s}=i;return{set(i){const n=e.get.call(this);e.set.call(this,i),this.requestUpdate(s,n,t,!0,i)},init(e){return void 0!==e&&this._$changeProperty(s,void 0,t,e),e}}}if("setter"===s){const{name:s}=i;return function(i){const n=this[s];e.call(this,i),this.requestUpdate(s,n,t,!0,i)}}throw new Error(`Unsupported decorator location: ${s}`)};function Ct(t){return(e,i)=>"object"==typeof i?xt(t,e,i):((t,e,i)=>{const s=e.hasOwnProperty(i);return e.constructor.createProperty(i,t),s?Object.getOwnPropertyDescriptor(e,i):void 0})(t,e,i)}
|
|
26
26
|
/**
|
|
27
27
|
* @license
|
|
28
28
|
* Copyright 2017 Google LLC
|
|
@@ -63,7 +63,7 @@ const Ut=1,Mt=3,Nt=4,Ot=t=>(...e)=>({_$litDirective$:t,values:e});class Rt{const
|
|
|
63
63
|
* @license
|
|
64
64
|
* Copyright 2018 Google LLC
|
|
65
65
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
66
|
-
*/var Dt=
|
|
66
|
+
*/var Dt=o`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color-default);display:block;font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-16);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-24);margin:0;*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;height:1em;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;vertical-align:top;width:1em}::slotted(svg){vertical-align:middle}}`;class Lt extends bt{emit(t,e){const i=new CustomEvent(t,Object.assign({bubbles:!0,cancelable:!1,composed:!0,detail:{}},e));return this.dispatchEvent(i),i}static define(t,e=this,i={}){if(customElements.get(t));else try{customElements.define(t,e,i)}catch(s){customElements.define(t,class extends e{},i)}}constructor(){super(),this.ssr=Boolean(this.shadowRoot),Object.entries(this.constructor.dependencies).forEach(([t,e])=>{this.constructor.define(t,e)})}firstUpdated(t){var e;super.firstUpdated(t),this.ssr&&(null===(e=this.shadowRoot)||void 0===e||e.querySelectorAll("slot").forEach(t=>{t.dispatchEvent(new Event("slotchange",{bubbles:!0,composed:!1,cancelable:!1}))}))}}Lt.styles=[Dt],Lt.dependencies={},t([Ct({type:Boolean,reflect:!0})],Lt.prototype,"ssr",void 0);var Ft=o`.form-label{color:var(--sgds-form-color-default);margin-bottom:0}.form-label.disabled{opacity:var(--sgds-opacity-50)}.form-check-label{color:var(--sgds-form-color-default)}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:not-allowed}`,Wt=o`input{margin:0}.form-check{display:flex;gap:var(--sgds-form-gap-md);padding:var(--sgds-form-padding-inline-sm) 0}.form-check-input{appearance:none;background-color:var(--sgds-form-surface-default);background-image:var(--sgds-radio-bg-image);background-position:50%;background-repeat:no-repeat;background-size:auto;border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-default);height:var(--sgds-form-height-sm);width:var(--sgds-form-width-xs)}.form-check-input[checked]{background-color:var(--sgds-form-primary-surface-default);border:var(--sgds-form-border-width-default) solid var(--sgds-border-color-transparent)}.form-check-input:focus-visible{outline:var(--sgds-form-outline-focus);outline-offset:var(--sgds-form-outline-offset-focus)}.form-check-input:not([disabled]):not(.is-invalid):not([aria-checked=true]):not(:focus-visible):hover{outline:var(--sgds-form-border-width-thick) solid var(--sgds-border-color-emphasis);outline-offset:var(--sgds-form-outline-offset-focus)}.form-check-input:not([disabled]):not(.is-invalid)[checked]:focus-visible,.form-check-input:not([disabled]):not(.is-invalid)[checked]:hover{background-color:var(--sgds-form-primary-surface-emphasis)}:host([disabled]) .form-check{cursor:not-allowed;opacity:var(--sgds-opacity-50)}.form-check-input:not([disabled]).is-invalid{border:var(--sgds-form-border-width-default) solid var(--sgds-form-danger-border-color-default)}.form-check-input:not([disabled]).is-invalid:focus-visible{outline:var(--sgds-border-width-2) solid var(--sgds-form-danger-color-default);outline-offset:var(--sgds-form-outline-offset-focus)}`;function qt(t="",e=""){return`id-${Math.random().toString().substring(2,6)}-sgds-${t}-${e}`}function jt(t,e){const i=Object.assign({waitUntilFirstUpdate:!1},e);return(e,s)=>{const{update:n}=e;if(t in e){const r=t;e.update=function(t){if(t.has(r)){const e=t.get(r),n=this[r];e!==n&&(i.waitUntilFirstUpdate&&!this.hasUpdated||this[s](e,n))}n.call(this,t)}}}}var Bt=o`:host{outline:0}.form-check-input[type=radio]{border-radius:50%}.form-check-input[checked]{--sgds-radio-bg-image:url('data:image/svg+xml;charset=utf-8,<svg width="8" height="8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 4a4 4 0 1 1 8 0 4 4 0 0 1-8 0Z" fill="%23fff"/></svg>')}.form-check-input[checked].is-invalid{background-color:var(--sgds-form-danger-surface-default)}`;class Ht extends Lt{constructor(){super(...arguments),this.checked=!1,this.disabled=!1,this.invalid=!1,this.autofocus=!1,this.radioId=qt("radio")}connectedCallback(){super.connectedCallback(),this.setInitialAttributes(),this.addEventListeners()}handleCheckedChange(){var t;this.checked&&this.autofocus&&(null===(t=this.input)||void 0===t||t.focus()),this.setAttribute("aria-checked",this.checked?"true":"false"),this.setAttribute("tabindex",this.checked?"0":"-1")}handleDisabledChange(){this.setAttribute("aria-disabled",this.disabled?"true":"false")}handleBlur(){this.emit("sgds-blur")}handleClick(){this.disabled||(this.checked=!0)}handleFocus(){this.emit("sgds-focus")}addEventListeners(){this.addEventListener("blur",()=>this.handleBlur()),this.addEventListener("click",()=>this.handleClick()),this.addEventListener("focus",()=>this.handleFocus())}setInitialAttributes(){this.setAttribute("role","radio"),this.setAttribute("tabindex","-1"),this.setAttribute("aria-disabled",this.disabled?"true":"false")}render(){return Q`
|
|
67
67
|
<div class="form-check">
|
|
68
68
|
<input
|
|
69
69
|
class=${At({"form-check-input":!0,"is-invalid":this.invalid})}
|
|
@@ -80,7 +80,7 @@ const Ut=1,Mt=3,Nt=4,Ot=t=>(...e)=>({_$litDirective$:t,values:e});class Rt{const
|
|
|
80
80
|
<slot></slot>
|
|
81
81
|
</label>
|
|
82
82
|
</div>
|
|
83
|
-
`}}
|
|
83
|
+
`}}Ht.styles=[...Lt.styles,Wt,Ft,Bt],t([Ct({type:Boolean,reflect:!0})],Ht.prototype,"checked",void 0),t([Ct()],Ht.prototype,"value",void 0),t([Ct({type:Boolean,reflect:!0})],Ht.prototype,"disabled",void 0),t([Ct({type:Boolean,reflect:!0})],Ht.prototype,"invalid",void 0),t([Ct({type:Boolean,reflect:!1})],Ht.prototype,"autofocus",void 0),t([Tt("input")],Ht.prototype,"input",void 0),t([jt("checked")],Ht.prototype,"handleCheckedChange",null),t([jt("disabled",{waitUntilFirstUpdate:!0})],Ht.prototype,"handleDisabledChange",null),
|
|
84
84
|
/**
|
|
85
85
|
* @license
|
|
86
86
|
* Copyright 2020 Google LLC
|
|
@@ -92,7 +92,7 @@ window.ShadyDOM?.inUse&&!0===window.ShadyDOM?.noPatch&&window.ShadyDOM.wrap;cons
|
|
|
92
92
|
* Copyright 2020 Google LLC
|
|
93
93
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
94
94
|
*/
|
|
95
|
-
class extends Rt{constructor(t){if(super(t),t.type!==Mt&&t.type!==Ut&&t.type!==Nt)throw new Error("The `live` directive is not allowed on child or event bindings");if(void 0!==t.strings)throw new Error("`live` bindings can only contain a single expression")}render(t){return t}update(t,[e]){if(e===et||e===it)return e;const i=t.element,s=t.name;if(t.type===Mt){if(e===i[s])return et}else if(t.type===Nt){if(!!e===i.hasAttribute(s))return et}else if(t.type===Ut&&i.getAttribute(s)===String(e))return et;return((t,e=Zt)=>{t._$committedValue=e})(t),e}});var Gt=
|
|
95
|
+
class extends Rt{constructor(t){if(super(t),t.type!==Mt&&t.type!==Ut&&t.type!==Nt)throw new Error("The `live` directive is not allowed on child or event bindings");if(void 0!==t.strings)throw new Error("`live` bindings can only contain a single expression")}render(t){return t}update(t,[e]){if(e===et||e===it)return e;const i=t.element,s=t.name;if(t.type===Mt){if(e===i[s])return et}else if(t.type===Nt){if(!!e===i.hasAttribute(s))return et}else if(t.type===Ut&&i.getAttribute(s)===String(e))return et;return((t,e=Zt)=>{t._$committedValue=e})(t),e}});var Gt=o`.invalid-feedback-container{display:flex;gap:var(--sgds-form-gap-sm)}.invalid-feedback,.invalid-feedback-container{color:var(--sgds-form-danger-color-default);line-height:var(--sgds-line-height-20)}.invalid-feedback{font-size:var(--sgds-font-size-14);font-weight:var(--sgds-font-weight-regular)}.valid-icon{color:var(--sgds-form-success-color-default)}`,Kt=o`.form-text{color:var(--sgds-form-color-subtle);font-size:var(--sgds-font-size-14);line-height:var(--sgds-line-height-20)}.form-text.disabled{opacity:var(--sgds-opacity-50)}`,Yt=o`.form-control::placeholder{color:var(--sgds-form-color-subtle);font-family:var(--sgds-font-family-brand);font-weight:var(--sgds-font-weight-light);line-height:var(--sgds-line-height-24)}`;class Xt extends Lt{constructor(){super(...arguments),this.label="",this.hintText="",this.disabled=!1,this.invalid=!1,this._controlId=qt("input"),this._labelId=qt("label")}setInvalid(t){this.invalid=t,t?this.emit("sgds-invalid"):this.emit("sgds-valid")}}Xt.styles=[...Lt.styles,Gt,Kt,Ft,Yt],t([Ct({reflect:!0})],Xt.prototype,"label",void 0),t([Ct({reflect:!0})],Xt.prototype,"hintText",void 0),t([Ct({reflect:!0})],Xt.prototype,"name",void 0),t([Ct({type:Boolean,reflect:!0})],Xt.prototype,"disabled",void 0),t([Ct({type:Boolean,reflect:!0})],Xt.prototype,"invalid",void 0);class Qt{constructor(t,e){(this.host=t).addController(this),this._internals=t._internals||this.host.attachInternals(),this.options=Object.assign({setInvalid:(t,e)=>{t.invalid=e},value:t=>t.value,input:t=>t.input},e)}hostConnected(){this.host.addEventListener("invalid",t=>this.handleInvalid(t))}hostDisconnected(){this.host.removeEventListener("invalid",t=>this.handleInvalid(t))}handleInvalid(t){t.preventDefault(),this.options.setInvalid(this.host,!0)}handleInput(t){const e=t.target;this.options.setInvalid(this.host,!1),this.validateInput(e)}handleChange(t){const e=t.target;this.validateInput(e),this.options.setInvalid(this.host,!this.checkValidity())}get form(){return this._internals.form}get validity(){return this._internals.validity}get validationMessage(){return this._internals.validationMessage}get willValidate(){return this._internals.willValidate}updateInvalidState(){this.options.setInvalid(this.host,!this.checkValidity())}resetValidity(){return this._internals.setValidity({})}checkValidity(){return this._internals.checkValidity()}reportValidity(){return this._internals.reportValidity()}setValidity(t,e,i){return this._internals.setValidity(t,e,i)}setFormValue(){const t=this.options.value(this.host);this._internals.setFormValue(t)}validateInput(t){if(this.options.input(this.host).disabled)return this._internals.setValidity({});const e=t.validity;if(e.valid)this._internals.setValidity({});else for(const i in e)e[i]&&(this.validationError=i.toString(),this._internals.setValidity({[this.validationError]:!0},t.validationMessage,t))}}const te=e=>{class i extends e{constructor(...t){super(...t),this._isTouched=!1,this._internals=this.attachInternals()}connectedCallback(){var t;super.connectedCallback(),this._mixinShouldSkipSgdsValidation()||null!==(t=this.inputValidationController)&&void 0!==t||(this.inputValidationController=new Qt(this))}async firstUpdated(t){super.firstUpdated(t),this.input=this.shadowRoot.querySelector("input")||await this.sgdsInput||this.shadowRoot.querySelector("textarea")||await this.sgdsDatepickerInput,this._mixinSetFormValue(),this._mixinShouldSkipSgdsValidation()||this._mixinValidate(this.input)}formResetCallback(){this._mixinResetFormControl?this._mixinResetFormControl():(this.value=this.defaultValue,this._mixinResetValidity(this.input)),this._mixinSetFormValue()}_mixinHandleChange(t){this._mixinSetFormValue(),this._mixinShouldSkipSgdsValidation()||this.inputValidationController.handleChange(t)}_mixinHandleInputChange(t){this._mixinSetFormValue(),this._mixinShouldSkipSgdsValidation()||this.inputValidationController.handleInput(t)}_mixinResetValidity(t){this._mixinShouldSkipSgdsValidation()||(this.inputValidationController.resetValidity(),this.inputValidationController.updateInvalidState(),this.inputValidationController.validateInput(t),this._isTouched&&(this._isTouched=!1))}_mixinValidate(t){this._mixinShouldSkipSgdsValidation()||this.inputValidationController.validateInput(t)}_mixinSetFormValue(){const t=this.value;this._internals.setFormValue(t)}_mixinCheckValidity(){return!!this._mixinShouldSkipSgdsValidation()||this.inputValidationController.checkValidity()}_mixinReportValidity(){return!!this._mixinShouldSkipSgdsValidation()||this.inputValidationController.reportValidity()}_mixinGetValidity(){return this._internals.validity}_mixinGetValidationMessage(){return this._internals.validationMessage}_mixinSetValidity(t,e,i){if(!this._mixinShouldSkipSgdsValidation())return this.inputValidationController.setValidity(t,e,i)}_mixinShouldSkipSgdsValidation(){const t=this.closest("form");return(null==t?void 0:t.noValidate)||this.noValidate}}return i.formAssociated=!0,t([It("sgds-input")],i.prototype,"sgdsInput",void 0),t([It("sgds-datepicker-input")],i.prototype,"sgdsDatepickerInput",void 0),i};var ee,ie=o`fieldset{border:0;gap:var(--sgds-form-gap-md);margin:0;min-width:0;padding:0}.label-hint-container,fieldset{display:flex;flex-direction:column}.label-hint-container{gap:var(--sgds-form-gap-sm)}.radio-group-validation-input{display:none}.radio-container{display:flex;flex-direction:column;gap:var(--sgds-form-gap-md)}:host([disabled]) .label-hint-container{cursor:not-allowed;opacity:var(--sgds-opacity-50)}`;class se extends(te(Xt)){constructor(){super(...arguments),this.defaultValue="",this.value="",this.invalidFeedback="",this.hasFeedback=!1,this.required=!1,this.autofocus=!1,this._isTouched=!1}_handleValueChange(){this.emit("sgds-change",{detail:{value:this.value}}),this._updateCheckedRadio()}_handleInvalidChange(){this._radios.forEach(t=>t.invalid=this.invalid)}_mixinResetFormControl(){this.value=this.input.value=this.defaultValue,this._updateInputValue("reset"),this._mixinResetValidity(this.input)}connectedCallback(){super.connectedCallback(),this.defaultValue=this.value,this.addEventListener("sgds-blur",()=>{this._isTouched=!0})}firstUpdated(t){super.firstUpdated(t);const e=this._radios;e.forEach((t,i)=>{if(e.length>1)switch(i){case 0:t.setAttribute("first-of-type","");break;case e.length-1:t.setAttribute("last-of-type","");break;default:t.setAttribute("nth-of-type","")}}),this.value&&this._updateInputValue("change")}_handleRadioClick(t){t.preventDefault();const e=t.target;if(e.disabled)return;this.value=e.value,this._updateInputValue();this._radios.forEach(t=>t.checked=t===e)}_updateInputValue(t="change"){this.input.value=this.value,this.input.dispatchEvent(new InputEvent(t))}_handleKeyDown(t){var e;if(!["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"," "].includes(t.key))return;const i=this._radios.filter(t=>!t.disabled),s=null!==(e=i.find(t=>t.checked))&&void 0!==e?e:i[0],n=" "===t.key?0:["ArrowUp","ArrowLeft"].includes(t.key)?-1:1;let r=i.indexOf(s)+n;r<0&&(r=i.length-1),r>i.length-1&&(r=0),this._radios.forEach(t=>{t.checked=!1,t.tabIndex=-1}),this.value=i[r].value,this._updateInputValue(),i[r].checked=!0,i[r].tabIndex=0,t.preventDefault()}_handleSlotChange(){const t=this._radios;t.forEach(t=>(t.autofocus=this.autofocus,t.checked=t.value===this.value,t)),this._disabledChildRadios(),t.some(t=>t.checked)||t[0]&&(t[0].tabIndex=0)}_updateCheckedRadio(){this._radios.forEach(t=>t.checked=t.value===this.value)}_renderHintText(){const t=Q` <div id="${this._controlId}Help" class="form-text">${this.hintText}</div> `;return this.hintText&&t}reportValidity(){return this._mixinReportValidity()}checkValidity(){return this._mixinCheckValidity()}get validity(){return this._mixinGetValidity()}get validationMessage(){return this._mixinGetValidationMessage()}_handleIsTouched(){this._isTouched&&(this.invalid=!this.input.checkValidity())}_handleDisabledChange(){this.setInvalid(!1),this._disabledChildRadios()}_disabledChildRadios(){if(this.disabled){this._radios.forEach(t=>t.disabled=this.disabled)}}render(){const t=Q`
|
|
96
96
|
<slot
|
|
97
97
|
class="radio-container"
|
|
98
98
|
@click=${this._handleRadioClick}
|
|
@@ -136,5 +136,5 @@ class extends Rt{constructor(t){if(super(t),t.type!==Mt&&t.type!==Ut&&t.type!==N
|
|
|
136
136
|
</div>
|
|
137
137
|
`:it}
|
|
138
138
|
</fieldset>
|
|
139
|
-
`}}function ne(t,e){customElements.get(t)||customElements.define(t,e)}se.styles=[...Xt.styles,ie],t([Tt("slot:not([name])")],se.prototype,"defaultSlot",void 0),t([Vt()],se.prototype,"defaultValue",void 0),t([Ct({reflect:!0})],se.prototype,"value",void 0),t([Ct({type:String,reflect:!0})],se.prototype,"invalidFeedback",void 0),t([Ct({type:Boolean,reflect:!0})],se.prototype,"hasFeedback",void 0),t([Ct({type:Boolean,reflect:!0})],se.prototype,"required",void 0),t([jt("value",{waitUntilFirstUpdate:!0})],se.prototype,"_handleValueChange",null),t([jt("invalid",{waitUntilFirstUpdate:!0})],se.prototype,"_handleInvalidChange",null),t([Vt()],se.prototype,"_isTouched",void 0),t([(t,e)=>{const{slot:i,selector:s}=ee??{},n="slot"+(i?`[name=${i}]`:":not([name])");return Pt(t,e,{get(){const t=this.renderRoot?.querySelector(n),e=t?.assignedElements(ee)??[];return void 0===s?e:e.filter(t=>t.matches(s))}})}],se.prototype,"_radios",void 0),t([jt("_isTouched",{waitUntilFirstUpdate:!0})],se.prototype,"_handleIsTouched",null),t([jt("disabled",{waitUntilFirstUpdate:!0})],se.prototype,"_handleDisabledChange",null),ne("sgds-radio",
|
|
139
|
+
`}}function ne(t,e){customElements.get(t)||customElements.define(t,e)}se.styles=[...Xt.styles,ie],t([Tt("slot:not([name])")],se.prototype,"defaultSlot",void 0),t([Vt()],se.prototype,"defaultValue",void 0),t([Ct({reflect:!0})],se.prototype,"value",void 0),t([Ct({type:String,reflect:!0})],se.prototype,"invalidFeedback",void 0),t([Ct({type:Boolean,reflect:!0})],se.prototype,"hasFeedback",void 0),t([Ct({type:Boolean,reflect:!0})],se.prototype,"required",void 0),t([Ct({type:Boolean,reflect:!0})],se.prototype,"autofocus",void 0),t([jt("value",{waitUntilFirstUpdate:!0})],se.prototype,"_handleValueChange",null),t([jt("invalid",{waitUntilFirstUpdate:!0})],se.prototype,"_handleInvalidChange",null),t([Vt()],se.prototype,"_isTouched",void 0),t([(t,e)=>{const{slot:i,selector:s}=ee??{},n="slot"+(i?`[name=${i}]`:":not([name])");return Pt(t,e,{get(){const t=this.renderRoot?.querySelector(n),e=t?.assignedElements(ee)??[];return void 0===s?e:e.filter(t=>t.matches(s))}})}],se.prototype,"_radios",void 0),t([jt("_isTouched",{waitUntilFirstUpdate:!0})],se.prototype,"_handleIsTouched",null),t([jt("disabled",{waitUntilFirstUpdate:!0})],se.prototype,"_handleDisabledChange",null),ne("sgds-radio",Ht),ne("sgds-radio-group",se)});
|
|
140
140
|
//# sourceMappingURL=index.umd.min.js.map
|