@solid-design-system/components 4.6.13 → 4.6.14
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/cdn/chunks/chunk.J3MO67NR.js +4 -0
- package/cdn/components/tooltip/tooltip.d.ts +1 -0
- package/cdn/components/tooltip/tooltip.js +1 -1
- package/cdn/custom-elements.json +1 -1
- package/cdn/solid-components.bundle.js +13 -13
- package/cdn/solid-components.iife.js +13 -13
- package/cdn/solid-components.js +1 -1
- package/cdn/web-types.json +1 -1
- package/cdn-versioned/_components/menu/menu.js +1 -1
- package/cdn-versioned/_components/menu/menu.styles.js +1 -1
- package/cdn-versioned/_components/menu-item/menu-item.js +2 -2
- package/cdn-versioned/chunks/chunk.3CZQFEYM.js +1 -1
- package/cdn-versioned/chunks/chunk.3LNKE2CG.js +1 -1
- package/cdn-versioned/chunks/chunk.65NSSTJE.js +1 -1
- package/cdn-versioned/chunks/chunk.6G6DPUNG.js +1 -1
- package/cdn-versioned/chunks/chunk.6NP6ACYF.js +1 -1
- package/cdn-versioned/chunks/chunk.6WMAE6EM.js +1 -1
- package/cdn-versioned/chunks/chunk.7QJPML7E.js +1 -1
- package/cdn-versioned/chunks/chunk.7R5WVKOU.js +1 -1
- package/cdn-versioned/chunks/chunk.7VF3CHZ2.js +1 -1
- package/cdn-versioned/chunks/chunk.A2HHAWSZ.js +1 -1
- package/cdn-versioned/chunks/chunk.A4472UE3.js +1 -1
- package/cdn-versioned/chunks/chunk.AULSVEYK.js +1 -1
- package/cdn-versioned/chunks/chunk.C7TENCCC.js +1 -1
- package/cdn-versioned/chunks/chunk.CDEAOHOV.js +1 -1
- package/cdn-versioned/chunks/chunk.CEVVDV52.js +1 -1
- package/cdn-versioned/chunks/chunk.CJHO2CRN.js +1 -1
- package/cdn-versioned/chunks/chunk.CNGICFLY.js +1 -1
- package/cdn-versioned/chunks/chunk.CRUS5X5G.js +1 -1
- package/cdn-versioned/chunks/chunk.EAAM3VG2.js +3 -3
- package/cdn-versioned/chunks/chunk.EQSUVFCF.js +1 -1
- package/cdn-versioned/chunks/chunk.ETYUJIA4.js +1 -1
- package/cdn-versioned/chunks/chunk.FK5LYWC7.js +1 -1
- package/cdn-versioned/chunks/chunk.FPWMHC7P.js +1 -1
- package/cdn-versioned/chunks/chunk.FYIER3I3.js +1 -1
- package/cdn-versioned/chunks/chunk.G3JDMNCB.js +1 -1
- package/cdn-versioned/chunks/chunk.G5HXH4DJ.js +1 -1
- package/cdn-versioned/chunks/chunk.GG4532YR.js +1 -1
- package/cdn-versioned/chunks/chunk.HLHBWQSY.js +1 -1
- package/cdn-versioned/chunks/chunk.IMSUZE4K.js +1 -1
- package/cdn-versioned/chunks/chunk.J3MO67NR.js +4 -0
- package/cdn-versioned/chunks/chunk.KMWJUXQH.js +1 -1
- package/cdn-versioned/chunks/chunk.KSYRDJ33.js +1 -1
- package/cdn-versioned/chunks/chunk.L2PFOOBK.js +1 -1
- package/cdn-versioned/chunks/chunk.L7T6YEYN.js +1 -1
- package/cdn-versioned/chunks/chunk.LSAUVFWV.js +1 -1
- package/cdn-versioned/chunks/chunk.M7NPMAK2.js +1 -1
- package/cdn-versioned/chunks/chunk.MT35MRN2.js +1 -1
- package/cdn-versioned/chunks/chunk.NTK6WXO7.js +1 -1
- package/cdn-versioned/chunks/chunk.O62YAWLB.js +4 -4
- package/cdn-versioned/chunks/chunk.OCOLBSJK.js +2 -2
- package/cdn-versioned/chunks/chunk.P2CPGH2M.js +1 -1
- package/cdn-versioned/chunks/chunk.QE3HRWOD.js +4 -4
- package/cdn-versioned/chunks/chunk.QJK7ON6G.js +1 -1
- package/cdn-versioned/chunks/chunk.QX6EC2OV.js +1 -1
- package/cdn-versioned/chunks/chunk.RCNLUAML.js +1 -1
- package/cdn-versioned/chunks/chunk.RTOLPQCZ.js +1 -1
- package/cdn-versioned/chunks/chunk.SA2YRNVP.js +1 -1
- package/cdn-versioned/chunks/chunk.TGMCWOXL.js +1 -1
- package/cdn-versioned/chunks/chunk.TWHESFGL.js +1 -1
- package/cdn-versioned/chunks/chunk.UJZJOR6Z.js +1 -1
- package/cdn-versioned/chunks/chunk.W7A3TU2Z.js +1 -1
- package/cdn-versioned/chunks/chunk.YICLGCNM.js +1 -1
- package/cdn-versioned/chunks/chunk.ZDACAU6O.js +1 -1
- package/cdn-versioned/components/accordion/accordion.d.ts +1 -1
- package/cdn-versioned/components/accordion-group/accordion-group.d.ts +1 -1
- package/cdn-versioned/components/animation/animation.d.ts +1 -1
- package/cdn-versioned/components/audio/audio.d.ts +1 -1
- package/cdn-versioned/components/badge/badge.d.ts +1 -1
- package/cdn-versioned/components/brandshape/brandshape.d.ts +1 -1
- package/cdn-versioned/components/button/button.d.ts +1 -1
- package/cdn-versioned/components/button-group/button-group.d.ts +1 -1
- package/cdn-versioned/components/carousel/carousel.d.ts +1 -1
- package/cdn-versioned/components/carousel-item/carousel-item.d.ts +1 -1
- package/cdn-versioned/components/checkbox/checkbox.d.ts +1 -1
- package/cdn-versioned/components/checkbox-group/checkbox-group.d.ts +1 -1
- package/cdn-versioned/components/combobox/combobox.d.ts +1 -1
- package/cdn-versioned/components/dialog/dialog.d.ts +1 -1
- package/cdn-versioned/components/divider/divider.d.ts +1 -1
- package/cdn-versioned/components/drawer/drawer.d.ts +1 -1
- package/cdn-versioned/components/dropdown/dropdown.d.ts +1 -1
- package/cdn-versioned/components/expandable/expandable.d.ts +1 -1
- package/cdn-versioned/components/flipcard/flipcard.d.ts +1 -1
- package/cdn-versioned/components/header/header.d.ts +1 -1
- package/cdn-versioned/components/icon/icon.d.ts +1 -1
- package/cdn-versioned/components/include/include.d.ts +1 -1
- package/cdn-versioned/components/input/input.d.ts +1 -1
- package/cdn-versioned/components/link/link.d.ts +1 -1
- package/cdn-versioned/components/map-marker/map-marker.d.ts +1 -1
- package/cdn-versioned/components/navigation-item/navigation-item.d.ts +1 -1
- package/cdn-versioned/components/notification/notification.d.ts +1 -1
- package/cdn-versioned/components/optgroup/optgroup.d.ts +2 -2
- package/cdn-versioned/components/option/option.d.ts +1 -1
- package/cdn-versioned/components/popup/popup.d.ts +1 -1
- package/cdn-versioned/components/quickfact/quickfact.d.ts +1 -1
- package/cdn-versioned/components/radio/radio.d.ts +1 -1
- package/cdn-versioned/components/radio-button/radio-button.d.ts +1 -1
- package/cdn-versioned/components/radio-group/radio-group.d.ts +2 -2
- package/cdn-versioned/components/scrollable/scrollable.d.ts +1 -1
- package/cdn-versioned/components/select/select.d.ts +1 -1
- package/cdn-versioned/components/spinner/spinner.d.ts +1 -1
- package/cdn-versioned/components/step/step.d.ts +1 -1
- package/cdn-versioned/components/step-group/step-group.d.ts +1 -1
- package/cdn-versioned/components/switch/switch.d.ts +1 -1
- package/cdn-versioned/components/tab/tab.d.ts +1 -1
- package/cdn-versioned/components/tab-group/tab-group.d.ts +1 -1
- package/cdn-versioned/components/tab-panel/tab-panel.d.ts +1 -1
- package/cdn-versioned/components/tag/tag.d.ts +1 -1
- package/cdn-versioned/components/textarea/textarea.d.ts +1 -1
- package/cdn-versioned/components/tooltip/tooltip.d.ts +2 -1
- package/cdn-versioned/components/tooltip/tooltip.js +1 -1
- package/cdn-versioned/components/video/video.d.ts +1 -1
- package/cdn-versioned/custom-elements.json +211 -211
- package/cdn-versioned/internal/form.js +3 -3
- package/cdn-versioned/solid-components.bundle.js +18 -18
- package/cdn-versioned/solid-components.css +2 -2
- package/cdn-versioned/solid-components.iife.js +18 -18
- package/cdn-versioned/solid-components.js +1 -1
- package/cdn-versioned/vscode.html-custom-data.json +80 -80
- package/cdn-versioned/web-types.json +137 -137
- package/dist/chunks/{chunk.DCOXCIL6.js → chunk.5DTO5VHH.js} +12 -2
- package/dist/components/tooltip/tooltip.d.ts +1 -0
- package/dist/components/tooltip/tooltip.js +1 -1
- package/dist/custom-elements.json +1 -1
- package/dist/solid-components.js +1 -1
- package/dist/web-types.json +1 -1
- package/dist-versioned/_components/menu/menu.js +1 -1
- package/dist-versioned/_components/menu/menu.styles.js +1 -1
- package/dist-versioned/_components/menu-item/menu-item.js +2 -2
- package/dist-versioned/chunks/chunk.2J5UWA4O.js +6 -6
- package/dist-versioned/chunks/chunk.2ROGEIKB.js +2 -2
- package/dist-versioned/chunks/{chunk.DCOXCIL6.js → chunk.5DTO5VHH.js} +16 -6
- package/dist-versioned/chunks/chunk.5GXWP6YW.js +2 -2
- package/dist-versioned/chunks/chunk.5H3SWQYU.js +2 -2
- package/dist-versioned/chunks/chunk.5PZUOPFS.js +4 -4
- package/dist-versioned/chunks/chunk.6DKXZWRN.js +4 -4
- package/dist-versioned/chunks/chunk.7HZNYBYX.js +2 -2
- package/dist-versioned/chunks/chunk.AIC2K6F6.js +2 -2
- package/dist-versioned/chunks/chunk.BCX6GWFU.js +1 -1
- package/dist-versioned/chunks/chunk.BLEQBK6L.js +2 -2
- package/dist-versioned/chunks/chunk.BTFVVZN7.js +2 -2
- package/dist-versioned/chunks/chunk.C3OAT5IL.js +8 -8
- package/dist-versioned/chunks/chunk.COLY2AS3.js +3 -3
- package/dist-versioned/chunks/chunk.DCMNY5PW.js +1 -1
- package/dist-versioned/chunks/chunk.DDQ43DMG.js +1 -1
- package/dist-versioned/chunks/chunk.DRFKZJ6U.js +2 -2
- package/dist-versioned/chunks/chunk.EJADH4TP.js +2 -2
- package/dist-versioned/chunks/chunk.G6HSZF64.js +1 -1
- package/dist-versioned/chunks/chunk.GG6EDMMX.js +1 -1
- package/dist-versioned/chunks/chunk.GR4QWBKR.js +2 -2
- package/dist-versioned/chunks/chunk.HY3UDFFO.js +3 -3
- package/dist-versioned/chunks/chunk.IGLAKKCM.js +2 -2
- package/dist-versioned/chunks/chunk.IJO3II3P.js +2 -2
- package/dist-versioned/chunks/chunk.IUDU7IPQ.js +3 -3
- package/dist-versioned/chunks/chunk.IZJ3ASKW.js +2 -2
- package/dist-versioned/chunks/chunk.JKMRTFLI.js +1 -1
- package/dist-versioned/chunks/chunk.KDKAOP5K.js +5 -5
- package/dist-versioned/chunks/chunk.KVKRZJS7.js +3 -3
- package/dist-versioned/chunks/chunk.LHDIK3CL.js +1 -1
- package/dist-versioned/chunks/chunk.LMZE7CWI.js +2 -2
- package/dist-versioned/chunks/chunk.MHSIUMF2.js +5 -5
- package/dist-versioned/chunks/chunk.N4PCVM2O.js +1 -1
- package/dist-versioned/chunks/chunk.PAMIVTVZ.js +1 -1
- package/dist-versioned/chunks/chunk.QB4ZOKFD.js +4 -4
- package/dist-versioned/chunks/chunk.QGTHHUEP.js +11 -11
- package/dist-versioned/chunks/chunk.QJSVVX5A.js +5 -5
- package/dist-versioned/chunks/chunk.RSBV2TUF.js +3 -3
- package/dist-versioned/chunks/chunk.RX6EYXKU.js +1 -1
- package/dist-versioned/chunks/chunk.SA5CVRAH.js +1 -1
- package/dist-versioned/chunks/chunk.SH4PL7NS.js +26 -26
- package/dist-versioned/chunks/chunk.SONGMTFR.js +5 -5
- package/dist-versioned/chunks/chunk.TOAVJJSV.js +2 -2
- package/dist-versioned/chunks/chunk.UIQBHPD3.js +2 -2
- package/dist-versioned/chunks/chunk.ULJ5M2KG.js +1 -1
- package/dist-versioned/chunks/chunk.V2GCDMDD.js +9 -9
- package/dist-versioned/chunks/chunk.V32MUHC2.js +1 -1
- package/dist-versioned/chunks/chunk.VJYNSYQW.js +1 -1
- package/dist-versioned/chunks/chunk.WE6ILGOF.js +13 -13
- package/dist-versioned/chunks/chunk.XG3WGOFU.js +23 -23
- package/dist-versioned/chunks/chunk.ZFWQYTKN.js +14 -14
- package/dist-versioned/chunks/chunk.ZTC7JGWI.js +6 -6
- package/dist-versioned/chunks/chunk.ZW2FQM2X.js +2 -2
- package/dist-versioned/components/accordion/accordion.d.ts +1 -1
- package/dist-versioned/components/accordion-group/accordion-group.d.ts +1 -1
- package/dist-versioned/components/animation/animation.d.ts +1 -1
- package/dist-versioned/components/audio/audio.d.ts +1 -1
- package/dist-versioned/components/badge/badge.d.ts +1 -1
- package/dist-versioned/components/brandshape/brandshape.d.ts +1 -1
- package/dist-versioned/components/button/button.d.ts +1 -1
- package/dist-versioned/components/button-group/button-group.d.ts +1 -1
- package/dist-versioned/components/carousel/carousel.d.ts +1 -1
- package/dist-versioned/components/carousel-item/carousel-item.d.ts +1 -1
- package/dist-versioned/components/checkbox/checkbox.d.ts +1 -1
- package/dist-versioned/components/checkbox-group/checkbox-group.d.ts +1 -1
- package/dist-versioned/components/combobox/combobox.d.ts +1 -1
- package/dist-versioned/components/dialog/dialog.d.ts +1 -1
- package/dist-versioned/components/divider/divider.d.ts +1 -1
- package/dist-versioned/components/drawer/drawer.d.ts +1 -1
- package/dist-versioned/components/dropdown/dropdown.d.ts +1 -1
- package/dist-versioned/components/expandable/expandable.d.ts +1 -1
- package/dist-versioned/components/flipcard/flipcard.d.ts +1 -1
- package/dist-versioned/components/header/header.d.ts +1 -1
- package/dist-versioned/components/icon/icon.d.ts +1 -1
- package/dist-versioned/components/include/include.d.ts +1 -1
- package/dist-versioned/components/input/input.d.ts +1 -1
- package/dist-versioned/components/link/link.d.ts +1 -1
- package/dist-versioned/components/map-marker/map-marker.d.ts +1 -1
- package/dist-versioned/components/navigation-item/navigation-item.d.ts +1 -1
- package/dist-versioned/components/notification/notification.d.ts +1 -1
- package/dist-versioned/components/optgroup/optgroup.d.ts +2 -2
- package/dist-versioned/components/option/option.d.ts +1 -1
- package/dist-versioned/components/popup/popup.d.ts +1 -1
- package/dist-versioned/components/quickfact/quickfact.d.ts +1 -1
- package/dist-versioned/components/radio/radio.d.ts +1 -1
- package/dist-versioned/components/radio-button/radio-button.d.ts +1 -1
- package/dist-versioned/components/radio-group/radio-group.d.ts +2 -2
- package/dist-versioned/components/scrollable/scrollable.d.ts +1 -1
- package/dist-versioned/components/select/select.d.ts +1 -1
- package/dist-versioned/components/spinner/spinner.d.ts +1 -1
- package/dist-versioned/components/step/step.d.ts +1 -1
- package/dist-versioned/components/step-group/step-group.d.ts +1 -1
- package/dist-versioned/components/switch/switch.d.ts +1 -1
- package/dist-versioned/components/tab/tab.d.ts +1 -1
- package/dist-versioned/components/tab-group/tab-group.d.ts +1 -1
- package/dist-versioned/components/tab-panel/tab-panel.d.ts +1 -1
- package/dist-versioned/components/tag/tag.d.ts +1 -1
- package/dist-versioned/components/textarea/textarea.d.ts +1 -1
- package/dist-versioned/components/tooltip/tooltip.d.ts +2 -1
- package/dist-versioned/components/tooltip/tooltip.js +1 -1
- package/dist-versioned/components/video/video.d.ts +1 -1
- package/dist-versioned/custom-elements.json +211 -211
- package/dist-versioned/internal/form.js +3 -3
- package/dist-versioned/solid-components.css +2 -2
- package/dist-versioned/solid-components.js +1 -1
- package/dist-versioned/vscode.html-custom-data.json +80 -80
- package/dist-versioned/web-types.json +137 -137
- package/package.json +1 -1
- package/cdn/chunks/chunk.4YCOU55E.js +0 -4
- package/cdn-versioned/chunks/chunk.4YCOU55E.js +0 -4
|
@@ -77,10 +77,10 @@ var SdRadioGroup = class extends SolidElement {
|
|
|
77
77
|
this.formControlController.updateValidity();
|
|
78
78
|
}
|
|
79
79
|
getAllRadios() {
|
|
80
|
-
return [...this.querySelectorAll("sd-4-6-
|
|
80
|
+
return [...this.querySelectorAll("sd-4-6-14-radio, sd-4-6-14-radio-button")];
|
|
81
81
|
}
|
|
82
82
|
handleRadioClick(event) {
|
|
83
|
-
const target = event.target.closest("sd-4-6-
|
|
83
|
+
const target = event.target.closest("sd-4-6-14-radio, sd-4-6-14-radio-button");
|
|
84
84
|
const radios = this.getAllRadios();
|
|
85
85
|
const oldValue = this.value;
|
|
86
86
|
if (target.disabled) {
|
|
@@ -157,7 +157,7 @@ var SdRadioGroup = class extends SolidElement {
|
|
|
157
157
|
}
|
|
158
158
|
})
|
|
159
159
|
);
|
|
160
|
-
this.hasButtonGroup = radios.some((radio) => radio.tagName.toLowerCase() === "sd-4-6-
|
|
160
|
+
this.hasButtonGroup = radios.some((radio) => radio.tagName.toLowerCase() === "sd-4-6-14-radio-button");
|
|
161
161
|
if (!radios.some((radio) => radio.checked)) {
|
|
162
162
|
if (this.hasButtonGroup) {
|
|
163
163
|
const buttonRadio = (_a = radios[0].shadowRoot) == null ? void 0 : _a.querySelector("button");
|
|
@@ -169,26 +169,26 @@ var SdRadioGroup = class extends SolidElement {
|
|
|
169
169
|
}
|
|
170
170
|
}
|
|
171
171
|
if (this.hasButtonGroup) {
|
|
172
|
-
const buttonGroup = (_b = this.shadowRoot) == null ? void 0 : _b.querySelector("sd-4-6-
|
|
172
|
+
const buttonGroup = (_b = this.shadowRoot) == null ? void 0 : _b.querySelector("sd-4-6-14-button-group");
|
|
173
173
|
if (buttonGroup) {
|
|
174
174
|
buttonGroup.disableRole = true;
|
|
175
175
|
}
|
|
176
176
|
}
|
|
177
177
|
}
|
|
178
178
|
syncRadios() {
|
|
179
|
-
if (customElements.get("sd-4-6-
|
|
179
|
+
if (customElements.get("sd-4-6-14-radio") && customElements.get("sd-4-6-14-radio-button")) {
|
|
180
180
|
this.syncRadioElements();
|
|
181
181
|
return;
|
|
182
182
|
}
|
|
183
|
-
if (customElements.get("sd-4-6-
|
|
183
|
+
if (customElements.get("sd-4-6-14-radio")) {
|
|
184
184
|
this.syncRadioElements();
|
|
185
185
|
} else {
|
|
186
|
-
customElements.whenDefined("sd-4-6-
|
|
186
|
+
customElements.whenDefined("sd-4-6-14-radio").then(() => this.syncRadios());
|
|
187
187
|
}
|
|
188
|
-
if (customElements.get("sd-4-6-
|
|
188
|
+
if (customElements.get("sd-4-6-14-radio-button")) {
|
|
189
189
|
this.syncRadioElements();
|
|
190
190
|
} else {
|
|
191
|
-
customElements.whenDefined("sd-4-6-
|
|
191
|
+
customElements.whenDefined("sd-4-6-14-radio-button").then(() => this.syncRadios());
|
|
192
192
|
}
|
|
193
193
|
}
|
|
194
194
|
updateCheckedRadio() {
|
|
@@ -267,16 +267,16 @@ var SdRadioGroup = class extends SolidElement {
|
|
|
267
267
|
vertical: "flex-col",
|
|
268
268
|
horizontal: "flex-row"
|
|
269
269
|
}[this.orientation]
|
|
270
|
-
)}"><div class="sr-only"><label><input id="validation-input" type="text" ?required="${this.required}" aria-labelledby="label" tabindex="-1" hidden @invalid="${this.handleInvalid}"></label></div>${this.hasButtonGroup ? html`<sd-4-6-
|
|
270
|
+
)}"><div class="sr-only"><label><input id="validation-input" type="text" ?required="${this.required}" aria-labelledby="label" tabindex="-1" hidden @invalid="${this.handleInvalid}"></label></div>${this.hasButtonGroup ? html`<sd-4-6-14-button-group part="button-group" exportparts="base:button-group__base" role="presentation">${defaultSlot}</sd-4-6-14-button-group>` : defaultSlot}</div></fieldset><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-2", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot>${this.formControlController.renderInvalidMessage()}`;
|
|
271
271
|
}
|
|
272
272
|
};
|
|
273
|
-
SdRadioGroup.dependencies = { "sd-4-6-
|
|
273
|
+
SdRadioGroup.dependencies = { "sd-4-6-14-button-group": SdButtonGroup };
|
|
274
274
|
/**
|
|
275
275
|
* Inherits Tailwind classes and includes additional styling.
|
|
276
276
|
*/
|
|
277
277
|
SdRadioGroup.styles = [
|
|
278
278
|
...SolidElement.styles,
|
|
279
|
-
css`:host{display:block}:host([orientation=vertical]) ::slotted(sd-4-6-
|
|
279
|
+
css`:host{display:block}:host([orientation=vertical]) ::slotted(sd-4-6-14-radio){display:flex;margin-bottom:var(--sd-spacing-2,.5rem)}:host([orientation=vertical]) ::slotted(sd-4-6-14-radio:last-of-type){margin-bottom:var(--sd-spacing-0,0)}:host([orientation=horizontal]) ::slotted(sd-4-6-14-radio){margin-right:var(--sd-spacing-6,1.5rem)}:host([orientation=horizontal]) ::slotted(sd-4-6-14-radio:last-of-type){margin-right:var(--sd-spacing-0,0)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-4-6-14-radio){margin-right:var(--sd-spacing-4,1rem)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-4-6-14-radio:last-of-type){margin-right:var(--sd-spacing-0,0)}:host([required]) #label:after{content:" *"}`
|
|
280
280
|
];
|
|
281
281
|
__decorateClass([
|
|
282
282
|
query("slot:not([name])")
|
|
@@ -333,7 +333,7 @@ __decorateClass([
|
|
|
333
333
|
watch("value")
|
|
334
334
|
], SdRadioGroup.prototype, "handleValueChange", 1);
|
|
335
335
|
SdRadioGroup = __decorateClass([
|
|
336
|
-
customElement("sd-4-6-
|
|
336
|
+
customElement("sd-4-6-14-radio-group")
|
|
337
337
|
], SdRadioGroup);
|
|
338
338
|
|
|
339
339
|
export {
|
|
@@ -54,7 +54,7 @@ var SdCombobox = class extends SolidElement {
|
|
|
54
54
|
constructor() {
|
|
55
55
|
super(...arguments);
|
|
56
56
|
this.formControlController = new FormControlController(this, {
|
|
57
|
-
assumeInteractionOn: ["sd-blur", "sd-4-6-
|
|
57
|
+
assumeInteractionOn: ["sd-blur", "sd-4-6-14-input"]
|
|
58
58
|
});
|
|
59
59
|
this.hasSlotController = new HasSlotController(this, "help-text", "label");
|
|
60
60
|
this.localize = new LocalizeController(this);
|
|
@@ -97,11 +97,11 @@ var SdCombobox = class extends SolidElement {
|
|
|
97
97
|
return normalizedOption.includes(normalizedQuery) || normalizedOptionLabel.includes(normalizedQuery);
|
|
98
98
|
};
|
|
99
99
|
this.getTag = (option) => {
|
|
100
|
-
return html`<sd-4-6-
|
|
100
|
+
return html`<sd-4-6-14-tag ?disabled="${this.disabled}" part="tag" exportparts="
|
|
101
101
|
base:tag__base,
|
|
102
102
|
content:tag__content,
|
|
103
103
|
removable-indicator:tag__removable-indicator,
|
|
104
|
-
" size="${this.size === "sm" ? "sm" : "lg"}" removable @keydown="${(event) => this.handleTagKeyDown(event, option)}" @sd-remove="${(event) => this.handleTagRemove(event, option)}">${option.getTextLabel()}</sd-4-6-
|
|
104
|
+
" size="${this.size === "sm" ? "sm" : "lg"}" removable @keydown="${(event) => this.handleTagKeyDown(event, option)}" @sd-remove="${(event) => this.handleTagRemove(event, option)}">${option.getTextLabel()}</sd-4-6-14-tag>`;
|
|
105
105
|
};
|
|
106
106
|
this.handleDocumentFocusIn = (event) => {
|
|
107
107
|
const path = event.composedPath();
|
|
@@ -236,9 +236,9 @@ var SdCombobox = class extends SolidElement {
|
|
|
236
236
|
return html`${typeof optionHtml === "string" ? unsafeHTML(optionHtml) : optionHtml}`;
|
|
237
237
|
};
|
|
238
238
|
return this.filteredOptions.map((item) => {
|
|
239
|
-
if (item.tagName.toLowerCase() === "sd-4-6-
|
|
239
|
+
if (item.tagName.toLowerCase() === "sd-4-6-14-optgroup") {
|
|
240
240
|
Array.from(item.children).forEach((option) => {
|
|
241
|
-
if (option.tagName.toLowerCase() === "sd-4-6-
|
|
241
|
+
if (option.tagName.toLowerCase() === "sd-4-6-14-option") {
|
|
242
242
|
renderOption(option);
|
|
243
243
|
}
|
|
244
244
|
});
|
|
@@ -258,11 +258,11 @@ var SdCombobox = class extends SolidElement {
|
|
|
258
258
|
});
|
|
259
259
|
} else {
|
|
260
260
|
return [
|
|
261
|
-
html`<sd-4-6-
|
|
261
|
+
html`<sd-4-6-14-tag ?disabled="${this.disabled}" part="tag" exportparts="
|
|
262
262
|
base:tag__base,
|
|
263
263
|
content:tag__content,
|
|
264
264
|
removable-indicator:tag__removable-indicator,
|
|
265
|
-
" size="${this.size === "sm" ? "sm" : "lg"}" removable @keydown="${(event) => this.handleTagMaxOptionsKeyDown(event)}" @sd-remove="${(event) => this.handleTagRemove(event)}">${this.selectedOptions.length} ${this.localize.term("tagsSelected")}</sd-4-6-
|
|
265
|
+
" size="${this.size === "sm" ? "sm" : "lg"}" removable @keydown="${(event) => this.handleTagMaxOptionsKeyDown(event)}" @sd-remove="${(event) => this.handleTagRemove(event)}">${this.selectedOptions.length} ${this.localize.term("tagsSelected")}</sd-4-6-14-tag>`
|
|
266
266
|
];
|
|
267
267
|
}
|
|
268
268
|
}
|
|
@@ -381,7 +381,7 @@ var SdCombobox = class extends SolidElement {
|
|
|
381
381
|
}
|
|
382
382
|
handleOptionClick(event) {
|
|
383
383
|
const target = event.target;
|
|
384
|
-
const option = target.closest("sd-4-6-
|
|
384
|
+
const option = target.closest("sd-4-6-14-option");
|
|
385
385
|
const oldValue = this.value;
|
|
386
386
|
if (option && !option.disabled) {
|
|
387
387
|
if (this.multiple) {
|
|
@@ -433,7 +433,7 @@ var SdCombobox = class extends SolidElement {
|
|
|
433
433
|
scrollIntoView(this.getCurrentOption(), this.listbox, "vertical", "auto");
|
|
434
434
|
}
|
|
435
435
|
getAllFilteredOptions() {
|
|
436
|
-
return [...this.filteredWrapper.querySelectorAll("sd-4-6-
|
|
436
|
+
return [...this.filteredWrapper.querySelectorAll("sd-4-6-14-option")];
|
|
437
437
|
}
|
|
438
438
|
getCurrentOption() {
|
|
439
439
|
return this.getAllFilteredOptions().find((option) => option.current);
|
|
@@ -563,7 +563,7 @@ var SdCombobox = class extends SolidElement {
|
|
|
563
563
|
clonedOption.selected = option.selected;
|
|
564
564
|
clonedOption.checkbox = option.checkbox;
|
|
565
565
|
clonedOption.size = option.size;
|
|
566
|
-
const hasOptgroup = ((_b = option.parentElement) == null ? void 0 : _b.tagName.toLowerCase()) === "sd-4-6-
|
|
566
|
+
const hasOptgroup = ((_b = option.parentElement) == null ? void 0 : _b.tagName.toLowerCase()) === "sd-4-6-14-optgroup";
|
|
567
567
|
if (!hasOptgroup) {
|
|
568
568
|
return clonedOption;
|
|
569
569
|
}
|
|
@@ -587,7 +587,7 @@ var SdCombobox = class extends SolidElement {
|
|
|
587
587
|
this.formControlController.emitInvalidEvent(event);
|
|
588
588
|
this.invalidMessage.textContent = event.target.validationMessage;
|
|
589
589
|
}
|
|
590
|
-
/** Receives incoming event detail from sd-4-6-
|
|
590
|
+
/** Receives incoming event detail from sd-4-6-14-popup and updates local state for conditional styling. */
|
|
591
591
|
handleCurrentPlacement(e) {
|
|
592
592
|
const incomingPlacement = e.detail;
|
|
593
593
|
if (incomingPlacement) {
|
|
@@ -599,7 +599,7 @@ var SdCombobox = class extends SolidElement {
|
|
|
599
599
|
}
|
|
600
600
|
handleUseTagsChange() {
|
|
601
601
|
const allOptions = this.getAllFilteredOptions();
|
|
602
|
-
if (customElements.get("sd-4-6-
|
|
602
|
+
if (customElements.get("sd-4-6-14-option")) {
|
|
603
603
|
allOptions.forEach((option) => {
|
|
604
604
|
option.checkbox = this.multiple;
|
|
605
605
|
});
|
|
@@ -725,8 +725,8 @@ var SdCombobox = class extends SolidElement {
|
|
|
725
725
|
return filterOnlyOptgroups(getAssignedElementsForSlot(this.defaultSlot));
|
|
726
726
|
}
|
|
727
727
|
async handleDefaultSlotChange() {
|
|
728
|
-
if (!customElements.get("sd-4-6-
|
|
729
|
-
customElements.whenDefined("sd-4-6-
|
|
728
|
+
if (!customElements.get("sd-4-6-14-option")) {
|
|
729
|
+
customElements.whenDefined("sd-4-6-14-option").then(() => this.handleDefaultSlotChange());
|
|
730
730
|
return;
|
|
731
731
|
}
|
|
732
732
|
const slottedOptions = this.getSlottedOptions();
|
|
@@ -738,10 +738,10 @@ var SdCombobox = class extends SolidElement {
|
|
|
738
738
|
if (this.multiple) {
|
|
739
739
|
option.checkbox = true;
|
|
740
740
|
}
|
|
741
|
-
option.id = option.id || `sd-4-6-
|
|
741
|
+
option.id = option.id || `sd-4-6-14-combobox-option-${index}`;
|
|
742
742
|
});
|
|
743
743
|
slottedOptgroups.forEach((optgroup, index) => {
|
|
744
|
-
optgroup.id = optgroup.id || `sd-4-6-
|
|
744
|
+
optgroup.id = optgroup.id || `sd-4-6-14-combobox-optgroup-${index}`;
|
|
745
745
|
});
|
|
746
746
|
await this.syncSelectedOptionsAndValue();
|
|
747
747
|
if (this.multiple) {
|
|
@@ -789,7 +789,7 @@ var SdCombobox = class extends SolidElement {
|
|
|
789
789
|
default: "border-neutral-800"
|
|
790
790
|
}[selectState],
|
|
791
791
|
this.open && (this.currentPlacement === "bottom" ? "rounded-bl-none rounded-br-none" : "rounded-tl-none rounded-tr-none")
|
|
792
|
-
)}"></div><sd-4-6-
|
|
792
|
+
)}"></div><sd-4-6-14-popup @sd-current-placement="${this.handleCurrentPlacement}" class="${cx(
|
|
793
793
|
"inline-flex relative w-full",
|
|
794
794
|
this.currentPlacement === "bottom" ? "origin-top" : "origin-bottom"
|
|
795
795
|
)}" placement="${this.placement}" strategy="${this.hoist ? "fixed" : "absolute"}" flip shift sync="width" auto-size="vertical" auto-size-padding="10" exportparts="
|
|
@@ -811,23 +811,23 @@ var SdCombobox = class extends SolidElement {
|
|
|
811
811
|
"flex justify-center",
|
|
812
812
|
iconMarginLeft,
|
|
813
813
|
this.value.length > 0 ? "visible" : "invisible"
|
|
814
|
-
)}" type="button" aria-label="${this.localize.term("clearEntry")}" @mousedown="${this.preventLoosingFocus}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-4-6-
|
|
814
|
+
)}" type="button" aria-label="${this.localize.term("clearEntry")}" @mousedown="${this.preventLoosingFocus}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-4-6-14-icon class="${cx("text-icon-fill-neutral-800", iconSize)}" name="closing-round" library="system"></sd-4-6-14-icon></slot></button>` : ""} ${this.showInvalidStyle ? html`<sd-4-6-14-icon part="invalid-icon" class="${cx(iconMarginLeft, iconSize, "text-error")}" library="system" name="risk"></sd-4-6-14-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-4-6-14-icon part="valid-icon" class="${cx("flex-shrink-0 text-success", iconMarginLeft, iconSize)}" library="system" name="status-check"></sd-4-6-14-icon>` : ""}<slot name="right" part="right" class="${cx(
|
|
815
815
|
"inline-flex ml-2 leading-[0]",
|
|
816
816
|
this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-primary",
|
|
817
817
|
iconSize
|
|
818
|
-
)}">${this.type !== "search" ? html`<sd-4-6-
|
|
818
|
+
)}">${this.type !== "search" ? html`<sd-4-6-14-icon class="${cx("transition-all", this.open ? "rotate-180" : "rotate-0")}" name="chevron-down" part="chevron" library="system" color="currentColor" label="${this.localize.term("open")}"></sd-4-6-14-icon>` : ""}</slot>${this.type === "search" ? html`<button class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button"><sd-4-6-14-icon class="${cx(iconColor, iconSize)}" library="system" name="magnifying-glass" label="${this.localize.term("search")}"></sd-4-6-14-icon></button>` : html`<button class="sd-interactive combobox-button absolute top-2" @keydown="${this.handleComboboxMouseDown}" type="button"><span class="sr-only">${this.localize.term("open")}</span></button>`}</div><div id="listbox" role="${ifDefined(!this.multiple ? "listbox" : void 0)}" aria-expanded="${this.open}" aria-multiselectable="${this.multiple}" aria-labelledby="label" part="listbox" class="${cx(
|
|
819
819
|
"bg-white px-2 py-3 relative border-primary overflow-y-auto",
|
|
820
820
|
this.open && "shadow",
|
|
821
821
|
this.currentPlacement === "bottom" ? "border-r-2 border-b-2 border-l-2 rounded-br-default rounded-bl-default" : "border-r-2 border-t-2 border-l-2 rounded-tr-default rounded-tl-default"
|
|
822
|
-
)}" tabindex="-1" @mousedown="${this.preventLoosingFocus}" @mouseup="${this.handleOptionClick}"><div part="filtered-listbox">${this.filteredOptions.length === 0 ? html`<span id="noResults" class="px-4 flex items-center w-full transition-all text-left text-base relative text-black py-3" aria-hidden="true" @click="${this.handleNoResultsClick}">${this.localize.term("noResults")}</span>` : this.options}</div><slot id="defaultOptionsSlot" class="hidden" @slotchange="${this.handleDefaultSlotChange}"></slot></div></sd-4-6-
|
|
822
|
+
)}" tabindex="-1" @mousedown="${this.preventLoosingFocus}" @mouseup="${this.handleOptionClick}"><div part="filtered-listbox">${this.filteredOptions.length === 0 ? html`<span id="noResults" class="px-4 flex items-center w-full transition-all text-left text-base relative text-black py-3" aria-hidden="true" @click="${this.handleNoResultsClick}">${this.localize.term("noResults")}</span>` : this.options}</div><slot id="defaultOptionsSlot" class="hidden" @slotchange="${this.handleDefaultSlotChange}"></slot></div></sd-4-6-14-popup></div><div part="form-control-help-text" id="help-text" class="text-sm text-neutral-700 mt-2" aria-hidden="${!hasHelpText}"><slot name="help-text">${this.helpText}</slot></div></div>${this.formControlController.renderInvalidMessage()}`;
|
|
823
823
|
}
|
|
824
824
|
};
|
|
825
825
|
SdCombobox.styles = [
|
|
826
826
|
...SolidElement.styles,
|
|
827
|
-
css`:host{display:block;position:relative;width:100%}:host([required]) #label:after{content:" *"}:host([disabled]) ::-moz-placeholder,:host([visually-disabled]) ::-moz-placeholder{--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-500,174 174 174)/var(--tw-text-opacity,1))}:host([disabled]) ::placeholder,:host([visually-disabled]) ::placeholder{--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-500,174 174 174)/var(--tw-text-opacity,1))}:host([size=sm]) .combobox-button{height:var(--sd-spacing-4,1rem);right:var(--sd-spacing-4,1rem);width:var(--sd-spacing-4,1rem)}:host([size=md]) .combobox-button{height:var(--sd-spacing-6,1.5rem);right:.85rem;width:var(--sd-spacing-6,1.5rem)}:host([size=lg]) .combobox-button{height:var(--sd-spacing-8,2rem);right:var(--sd-spacing-3,.75rem);width:var(--sd-spacing-8,2rem)}[part=listbox]{max-height:var(--auto-size-available-height,auto)}sd-4-6-
|
|
827
|
+
css`:host{display:block;position:relative;width:100%}:host([required]) #label:after{content:" *"}:host([disabled]) ::-moz-placeholder,:host([visually-disabled]) ::-moz-placeholder{--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-500,174 174 174)/var(--tw-text-opacity,1))}:host([disabled]) ::placeholder,:host([visually-disabled]) ::placeholder{--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-500,174 174 174)/var(--tw-text-opacity,1))}:host([size=sm]) .combobox-button{height:var(--sd-spacing-4,1rem);right:var(--sd-spacing-4,1rem);width:var(--sd-spacing-4,1rem)}:host([size=md]) .combobox-button{height:var(--sd-spacing-6,1.5rem);right:.85rem;width:var(--sd-spacing-6,1.5rem)}:host([size=lg]) .combobox-button{height:var(--sd-spacing-8,2rem);right:var(--sd-spacing-3,.75rem);width:var(--sd-spacing-8,2rem)}[part=listbox]{max-height:var(--auto-size-available-height,auto)}sd-4-6-14-popup::part(popup){z-index:var(--sd-z-index-dropdown,900)}sd-4-6-14-tag::part(base){border-radius:var(--sd-border-radius-default,.25rem);padding-left:var(--sd-spacing-1,.25rem);padding-right:var(--sd-spacing-1,.25rem)}sd-4-6-14-tag::part(content){display:inline-block;max-width:var(--tag-max-width,15ch);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}sd-4-6-14-tag[size=lg]::part(base){padding-left:var(--sd-spacing-2,.5rem);padding-right:var(--sd-spacing-2,.5rem)}sd-4-6-14-tag[disabled=false]::part(base):hover{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-primary-100,236 240 249)/var(--tw-bg-opacity,1))}[part=filtered-listbox] sd-4-6-14-optgroup:first-of-type{--display-divider:none}mark{background-color:transparent;color:inherit;font-weight:700}`
|
|
828
828
|
];
|
|
829
829
|
__decorateClass([
|
|
830
|
-
query("sd-4-6-
|
|
830
|
+
query("sd-4-6-14-popup")
|
|
831
831
|
], SdCombobox.prototype, "popup", 2);
|
|
832
832
|
__decorateClass([
|
|
833
833
|
query('[part="combobox"]')
|
|
@@ -985,7 +985,7 @@ __decorateClass([
|
|
|
985
985
|
watch("open", { waitUntilFirstUpdate: true })
|
|
986
986
|
], SdCombobox.prototype, "handleOpenChange", 1);
|
|
987
987
|
SdCombobox = __decorateClass([
|
|
988
|
-
customElement("sd-4-6-
|
|
988
|
+
customElement("sd-4-6-14-combobox")
|
|
989
989
|
], SdCombobox);
|
|
990
990
|
setDefaultAnimation("combobox.show", {
|
|
991
991
|
keyframes: [
|
|
@@ -29,8 +29,8 @@ var SdTabGroup = class extends SolidElement {
|
|
|
29
29
|
}
|
|
30
30
|
connectedCallback() {
|
|
31
31
|
const whenAllDefined = Promise.all([
|
|
32
|
-
customElements.whenDefined("sd-4-6-
|
|
33
|
-
customElements.whenDefined("sd-4-6-
|
|
32
|
+
customElements.whenDefined("sd-4-6-14-tab"),
|
|
33
|
+
customElements.whenDefined("sd-4-6-14-tab-panel")
|
|
34
34
|
]);
|
|
35
35
|
super.connectedCallback();
|
|
36
36
|
this.resizeObserver = new ResizeObserver(() => {
|
|
@@ -70,20 +70,20 @@ var SdTabGroup = class extends SolidElement {
|
|
|
70
70
|
}
|
|
71
71
|
getAllTabs(options = { includeDisabled: true }) {
|
|
72
72
|
const slot = this.shadowRoot.querySelector('slot[name="nav"]');
|
|
73
|
-
return Array.from(slot.assignedElements()).map((el) => el.tagName.toLocaleLowerCase() === "sd-4-6-
|
|
74
|
-
return el && options.includeDisabled ? el.tagName.toLowerCase() === "sd-4-6-
|
|
73
|
+
return Array.from(slot.assignedElements()).map((el) => el.tagName.toLocaleLowerCase() === "sd-4-6-14-tab" ? el : el.querySelector("sd-4-6-14-tab")).filter((el) => {
|
|
74
|
+
return el && options.includeDisabled ? el.tagName.toLowerCase() === "sd-4-6-14-tab" : el.tagName.toLowerCase() === "sd-4-6-14-tab" && !el.disabled;
|
|
75
75
|
});
|
|
76
76
|
}
|
|
77
77
|
getAllPanels() {
|
|
78
|
-
return [...this.body.assignedElements()].filter((el) => el.tagName.toLowerCase() === "sd-4-6-
|
|
78
|
+
return [...this.body.assignedElements()].filter((el) => el.tagName.toLowerCase() === "sd-4-6-14-tab-panel");
|
|
79
79
|
}
|
|
80
80
|
getActiveTab() {
|
|
81
81
|
return this.tabs.find((t) => t.matches(":focus"));
|
|
82
82
|
}
|
|
83
83
|
handleClick(event) {
|
|
84
84
|
const target = event.target;
|
|
85
|
-
const tab = target.closest("sd-4-6-
|
|
86
|
-
const tabGroup = tab == null ? void 0 : tab.closest("sd-4-6-
|
|
85
|
+
const tab = target.closest("sd-4-6-14-tab");
|
|
86
|
+
const tabGroup = tab == null ? void 0 : tab.closest("sd-4-6-14-tab-group");
|
|
87
87
|
if (tabGroup !== this) {
|
|
88
88
|
return;
|
|
89
89
|
}
|
|
@@ -93,8 +93,8 @@ var SdTabGroup = class extends SolidElement {
|
|
|
93
93
|
}
|
|
94
94
|
handleKeyDown(event) {
|
|
95
95
|
const target = event.target;
|
|
96
|
-
const tab = target.closest("sd-4-6-
|
|
97
|
-
const tabGroup = tab == null ? void 0 : tab.closest("sd-4-6-
|
|
96
|
+
const tab = target.closest("sd-4-6-14-tab");
|
|
97
|
+
const tabGroup = tab == null ? void 0 : tab.closest("sd-4-6-14-tab-group");
|
|
98
98
|
if (tabGroup !== this) {
|
|
99
99
|
return;
|
|
100
100
|
}
|
|
@@ -119,7 +119,7 @@ var SdTabGroup = class extends SolidElement {
|
|
|
119
119
|
if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) {
|
|
120
120
|
const activeEl = this.tabs.find((t) => t.matches(":focus"));
|
|
121
121
|
const isRtl = this.localize.dir() === "rtl";
|
|
122
|
-
if ((activeEl == null ? void 0 : activeEl.tagName.toLowerCase()) === "sd-4-6-
|
|
122
|
+
if ((activeEl == null ? void 0 : activeEl.tagName.toLowerCase()) === "sd-4-6-14-tab") {
|
|
123
123
|
let index = this.tabs.indexOf(activeEl);
|
|
124
124
|
if (event.key === "Home") {
|
|
125
125
|
index = 0;
|
|
@@ -215,15 +215,15 @@ var SdTabGroup = class extends SolidElement {
|
|
|
215
215
|
return html`<div part="base" class="${cx("flex flex-col rounded-none")}" @click="${this.handleClick}" @keydown="${this.handleKeyDown}"><div part="nav" class="${cx(this.hasScrollControls && "relative py-0 px-12")}">${this.hasScrollControls ? html`<button part="scroll-button--start" exportparts="base:scroll-button__base" tabindex="-1" aria-hidden="true" class="${cx(
|
|
216
216
|
"sd-interactive flex items-center justify-center absolute top-0 bottom-0 left-0 !outline-offset-0 border-b border-neutral-400 z-10",
|
|
217
217
|
this.localize.dir() === "rtl" && "left-auto right-0"
|
|
218
|
-
)}" @click="${this.handleScrollToStart}"><sd-4-6-
|
|
218
|
+
)}" @click="${this.handleScrollToStart}"><sd-4-6-14-icon library="system" name="${isRtl ? "chevron-up" : "chevron-down"}" label="previous" class="${cx("h-6 w-12 rotate-90 grid place-items-center")}"></sd-4-6-14-icon></button>` : ""}<div part="scroll-container" class="flex overflow-x-auto focus-visible:focus-outline !outline-offset-0"><div part="tabs" class="${cx("flex flex-auto relative flex-row")}" role="tablist"><div part="separation" class="w-full border-[0.25px] border-neutral-400 absolute bottom-0"></div><slot name="nav" @slotchange="${this.syncTabsAndPanels}"></slot></div></div>${this.hasScrollControls ? html`<button part="scroll-button--end" exportparts="base:scroll-button__base" tabindex="-1" aria-hidden="true" class="${cx(
|
|
219
219
|
"sd-interactive flex items-center justify-center absolute top-0 bottom-0 right-0 !outline-offset-0 border-b border-neutral-400 z-10",
|
|
220
220
|
this.localize.dir() === "rtl" && "right-auto left-0"
|
|
221
|
-
)}" @click="${this.handleScrollToEnd}"><sd-4-6-
|
|
221
|
+
)}" @click="${this.handleScrollToEnd}"><sd-4-6-14-icon library="system" name="${isRtl ? "chevron-down" : "chevron-up"}" label="next" class="${cx("h-6 w-12 rotate-90 grid place-items-center")}"></sd-4-6-14-icon></button>` : ""}</div><slot part="body" class="${cx("block auto py-8 px-6", this.variant === "container" && "border border-neutral-400 border-t-0")}" @slotchange="${this.syncTabsAndPanels}"></slot></div>`;
|
|
222
222
|
}
|
|
223
223
|
};
|
|
224
224
|
SdTabGroup.styles = [
|
|
225
225
|
...SolidElement.styles,
|
|
226
|
-
css`:host{box-sizing:border-box;display:block}[part=scroll-container]{scrollbar-width:none}[part=scroll-container]::-webkit-scrollbar{height:var(--sd-spacing-0,0);width:var(--sd-spacing-0,0)}:focus-within::slotted(sd-4-6-
|
|
226
|
+
css`:host{box-sizing:border-box;display:block}[part=scroll-container]{scrollbar-width:none}[part=scroll-container]::-webkit-scrollbar{height:var(--sd-spacing-0,0);width:var(--sd-spacing-0,0)}:focus-within::slotted(sd-4-6-14-tab-panel){outline-color:rgb(var(--sd-color-primary,0 53 142)/1);outline-offset:2px;outline-style:solid;outline-width:2px}::slotted(sd-4-6-14-tab-panel){--padding:1rem 0}`
|
|
227
227
|
];
|
|
228
228
|
__decorateClass([
|
|
229
229
|
query("[part=base]")
|
|
@@ -244,7 +244,7 @@ __decorateClass([
|
|
|
244
244
|
property({ type: String, reflect: true })
|
|
245
245
|
], SdTabGroup.prototype, "activation", 2);
|
|
246
246
|
SdTabGroup = __decorateClass([
|
|
247
|
-
customElement("sd-4-6-
|
|
247
|
+
customElement("sd-4-6-14-tab-group")
|
|
248
248
|
], SdTabGroup);
|
|
249
249
|
|
|
250
250
|
export {
|
|
@@ -288,10 +288,10 @@ var SdAudio = class extends SolidElement {
|
|
|
288
288
|
)}" part="audio-controls"><button class="${cx(
|
|
289
289
|
"playback-speed justify-self-start text-base font-bold hover:cursor-pointer sd-interactive",
|
|
290
290
|
this.inverted && "sd-interactive--inverted"
|
|
291
|
-
)}" aria-label="${this.localize.term("playbackSpeed")} (${this.speed}x)" @click="${this.togglePlaybackSpeed}" @keydown="${this.togglePlaybackSpeedKeydown}" part="playback-speed">${this.speed}x</button><sd-4-6-
|
|
291
|
+
)}" aria-label="${this.localize.term("playbackSpeed")} (${this.speed}x)" @click="${this.togglePlaybackSpeed}" @keydown="${this.togglePlaybackSpeedKeydown}" part="playback-speed">${this.speed}x</button><sd-4-6-14-button ?inverted="${this.inverted ? true : false}" part="play-button" size="lg" @click="${!this.isPlaying ? this.playAudio : this.pauseAudio}" aria-label="${this.isPlaying ? this.localize.term("pauseAudio") : this.localize.term("playAudio")}" title="${this.isPlaying ? this.localize.term("pauseAudio") : this.localize.term("playAudio")}" class="text-3xl">${this.isPlaying ? html`<slot name="pause-icon"><sd-4-6-14-icon class="text-3xl" name="pause" library="system"></sd-4-6-14-icon></slot>` : html`<slot name="play-icon"><sd-4-6-14-icon class="text-3xl" name="start" library="system"></sd-4-6-14-icon></slot>`}</sd-4-6-14-button><div class="flex items-center justify-self-end">${this.hasSlotController.test("transcript") ? html`<button class="${cx(
|
|
292
292
|
"mr-6 w-6 h-6 hover:cursor-pointer sd-interactive",
|
|
293
293
|
this.inverted && "sd-interactive--inverted"
|
|
294
|
-
)}" aria-label="${this.isTranscriptOpen ? this.localize.term("transcriptIsOpen") : this.localize.term("openTranscript")}" @click="${this.showTranscript}" @keydown="${this.showTranscriptKeydown}" part="transcript"><sd-4-6-
|
|
294
|
+
)}" aria-label="${this.isTranscriptOpen ? this.localize.term("transcriptIsOpen") : this.localize.term("openTranscript")}" @click="${this.showTranscript}" @keydown="${this.showTranscriptKeydown}" part="transcript"><sd-4-6-14-icon class="w-6 h-6" name="transcript" library="system"></sd-4-6-14-icon></button>` : null} <button class="${cx("w-6 h-6 hover:cursor-pointer sd-interactive", this.inverted && "sd-interactive--inverted")}" part="volume" aria-label="${!this.isMuted ? this.localize.term("mute") : this.localize.term("unmute")}" @click="${this.toggleMute}" @keydown="${this.toggleMuteKeydown}"><sd-4-6-14-icon class="w-6 h-6" name="${this.isMuted ? "mute" : "volume"}" library="system"></sd-4-6-14-icon></button></div></div>`;
|
|
295
295
|
const renderTimestamps = html`<div class="${cx(
|
|
296
296
|
"w-full flex justify-between",
|
|
297
297
|
this.reversedLayout ? "mb-2" : "mt-2",
|
|
@@ -301,12 +301,12 @@ var SdAudio = class extends SolidElement {
|
|
|
301
301
|
return html`<div class="${cx("w-full flex relative", this.reversedLayout ? "flex-col-reverse" : "flex-col")}" aria-label="${this.localize.term("audioPlayer")}" part="audio-player"><slot @slotchange="${this.updateAudioDuration}"></slot>${!this.animated || this.animated && this.reversedLayout ? renderAudioControls : null}<div class="relative">${this.animated && !this.reversedLayout ? html`${renderAudioControls}` : null} ${this.animated ? html`<canvas class="w-full h-16"></canvas>` : null} ${!this.hideTimestamps && this.animated && this.reversedLayout ? renderTimestamps : null} <input class="${cx(
|
|
302
302
|
"progress-slider bg-primary appearance-none w-full cursor-pointer outline-none h-1 flex items-center sd-interactive",
|
|
303
303
|
this.inverted && "sd-interactive--inverted"
|
|
304
|
-
)}" type="range" max="100" step="0.001" value="${this.progress}" @input="${this.handleAudioProgress}" @keydown="${this.handleAudioProgressKeydown}" aria-label="${this.localize.term("seekBar")}" part="progress-slider" style="background:linear-gradient(to right,${this.inverted ? "rgb(var(--sd-color-white, 255 255 255) / 1)" : "rgb(var(--sd-color-primary, 0 53 142) / 1)"} ${progressPercentage}%,${this.animated ? "transparent" : this.inverted ? "rgb(var(--sd-color-primary-400, 153 171 208) / 1)" : "rgb(var(--sd-color-grey-400, 195 195 195) / 1)"} ${progressPercentage}%)"></div>${this.hasSlotController.test("transcript") ? html`<sd-4-6-
|
|
304
|
+
)}" type="range" max="100" step="0.001" value="${this.progress}" @input="${this.handleAudioProgress}" @keydown="${this.handleAudioProgressKeydown}" aria-label="${this.localize.term("seekBar")}" part="progress-slider" style="background:linear-gradient(to right,${this.inverted ? "rgb(var(--sd-color-white, 255 255 255) / 1)" : "rgb(var(--sd-color-primary, 0 53 142) / 1)"} ${progressPercentage}%,${this.animated ? "transparent" : this.inverted ? "rgb(var(--sd-color-primary-400, 153 171 208) / 1)" : "rgb(var(--sd-color-grey-400, 195 195 195) / 1)"} ${progressPercentage}%)"></div>${this.hasSlotController.test("transcript") ? html`<sd-4-6-14-drawer><slot name="transcript"></slot></sd-4-6-14-drawer>` : null} ${!this.hideTimestamps && (!this.animated || !this.reversedLayout) ? renderTimestamps : null}</div>`;
|
|
305
305
|
}
|
|
306
306
|
};
|
|
307
307
|
SdAudio.styles = [
|
|
308
308
|
...SolidElement.styles,
|
|
309
|
-
css`.progress-slider:focus-visible{outline:2px solid transparent;outline-offset:2px}.progress-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:currentColor;border-radius:var(--sd-border-radius-full,9999px);border-style:none;height:var(--sd-spacing-4,1rem);transition-duration:.2s;-webkit-transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);width:var(--sd-spacing-4,1rem)}.progress-slider:focus-visible::-webkit-slider-thumb{outline-offset:2px;outline-style:solid}.progress-slider::-moz-range-thumb{-moz-appearance:none;appearance:none;background-color:currentColor;border-radius:var(--sd-border-radius-full,9999px);border-style:none;height:var(--sd-spacing-4,1rem);transition-duration:.2s;-moz-transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);width:var(--sd-spacing-4,1rem)}.progress-slider:focus-visible::-moz-range-thumb{outline-offset:2px;outline-style:solid}sd-4-6-
|
|
309
|
+
css`.progress-slider:focus-visible{outline:2px solid transparent;outline-offset:2px}.progress-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:currentColor;border-radius:var(--sd-border-radius-full,9999px);border-style:none;height:var(--sd-spacing-4,1rem);transition-duration:.2s;-webkit-transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);width:var(--sd-spacing-4,1rem)}.progress-slider:focus-visible::-webkit-slider-thumb{outline-offset:2px;outline-style:solid}.progress-slider::-moz-range-thumb{-moz-appearance:none;appearance:none;background-color:currentColor;border-radius:var(--sd-border-radius-full,9999px);border-style:none;height:var(--sd-spacing-4,1rem);transition-duration:.2s;-moz-transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);width:var(--sd-spacing-4,1rem)}.progress-slider:focus-visible::-moz-range-thumb{outline-offset:2px;outline-style:solid}sd-4-6-14-button::part(base){align-items:center;border-radius:var(--sd-border-radius-full,9999px);display:flex;height:var(--sd-spacing-16,4rem);justify-content:center;width:var(--sd-spacing-16,4rem)}sd-4-6-14-button::part(label){align-items:center;display:flex;flex-grow:0}`
|
|
310
310
|
];
|
|
311
311
|
__decorateClass([
|
|
312
312
|
property({ type: Boolean, reflect: true, attribute: "reversed-layout" })
|
|
@@ -348,13 +348,13 @@ __decorateClass([
|
|
|
348
348
|
query('[part="audio-player"]')
|
|
349
349
|
], SdAudio.prototype, "audioPlayerContainer", 2);
|
|
350
350
|
__decorateClass([
|
|
351
|
-
query("sd-4-6-
|
|
351
|
+
query("sd-4-6-14-drawer")
|
|
352
352
|
], SdAudio.prototype, "drawer", 2);
|
|
353
353
|
__decorateClass([
|
|
354
354
|
query("canvas")
|
|
355
355
|
], SdAudio.prototype, "canvas", 2);
|
|
356
356
|
SdAudio = __decorateClass([
|
|
357
|
-
customElement("sd-4-6-
|
|
357
|
+
customElement("sd-4-6-14-audio")
|
|
358
358
|
], SdAudio);
|
|
359
359
|
|
|
360
360
|
export {
|
|
@@ -103,7 +103,7 @@ var SdVideo = class extends SolidElement {
|
|
|
103
103
|
this.playing ? "opacity-0" : "opacity-100",
|
|
104
104
|
this.isBelowBreakpoint ? "w-[48px] h-[48px]" : "w-[96px] h-[96px]",
|
|
105
105
|
"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 p-4 bg-white bg-opacity-75 rounded-full play-pause-transition outline-2 outline-offset-2 group-focus-visible:outline"
|
|
106
|
-
)}"><slot name="play-icon" part="play-icon" class="${cx(this.isBelowBreakpoint ? "text-[2rem]" : "text-[4rem]")}"><sd-4-6-
|
|
106
|
+
)}"><slot name="play-icon" part="play-icon" class="${cx(this.isBelowBreakpoint ? "text-[2rem]" : "text-[4rem]")}"><sd-4-6-14-icon id="default-play-icon" library="system" name="start"></sd-4-6-14-icon></slot></div></button> ${this.hasSlotController.test("poster") ? html`<slot name="poster" role="presentation" @transitionend="${this.hidePoster}"></slot>` : null}<slot></slot></div>`;
|
|
107
107
|
}
|
|
108
108
|
};
|
|
109
109
|
SdVideo.styles = [
|
|
@@ -120,7 +120,7 @@ __decorateClass([
|
|
|
120
120
|
property({ type: Boolean })
|
|
121
121
|
], SdVideo.prototype, "isBelowBreakpoint", 2);
|
|
122
122
|
SdVideo = __decorateClass([
|
|
123
|
-
customElement("sd-4-6-
|
|
123
|
+
customElement("sd-4-6-14-video")
|
|
124
124
|
], SdVideo);
|
|
125
125
|
|
|
126
126
|
export {
|