@solid-design-system/components 4.0.9 → 4.0.10
Sign up to get free protection for your applications and to get access to all the features.
- package/cdn/chunks/{chunk.B6I2NZMP.js → chunk.DEX5DZMJ.js} +4 -4
- package/cdn/chunks/chunk.GBU4IOUX.js +10 -0
- package/cdn/chunks/chunk.NWGX5EVO.js +1 -0
- package/cdn/chunks/chunk.SRRF6RC4.js +1 -0
- package/cdn/chunks/chunk.V3VO4PD4.js +1 -0
- package/cdn/components/checkbox-group/checkbox-group.js +1 -1
- package/cdn/components/input/input.js +1 -1
- package/cdn/components/radio-group/radio-group.js +1 -1
- package/cdn/components/select/select.js +1 -1
- package/cdn/components/textarea/textarea.js +1 -1
- package/cdn/custom-elements.json +1 -1
- package/cdn/solid-components.bundle.js +20 -20
- package/cdn/solid-components.iife.js +20 -20
- package/cdn/solid-components.js +1 -1
- package/cdn/vscode.html-custom-data.json +96 -96
- package/cdn/web-types.json +231 -231
- 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.25ETUACJ.js +1 -1
- package/cdn-versioned/chunks/chunk.27EYM5XP.js +4 -4
- package/cdn-versioned/chunks/chunk.2H5XA4I4.js +1 -1
- package/cdn-versioned/chunks/chunk.3H546YPQ.js +1 -1
- package/cdn-versioned/chunks/chunk.4EXZ2RBI.js +1 -1
- package/cdn-versioned/chunks/chunk.4QUXWXQ7.js +1 -1
- package/cdn-versioned/chunks/chunk.5CIQRJCC.js +1 -1
- package/cdn-versioned/chunks/chunk.65NSSTJE.js +1 -1
- package/cdn-versioned/chunks/chunk.7ZYFSBMR.js +1 -1
- package/cdn-versioned/chunks/chunk.A772RQJV.js +1 -1
- package/cdn-versioned/chunks/chunk.ANH5V2SE.js +2 -2
- package/cdn-versioned/chunks/chunk.AS7L23H2.js +2 -2
- package/cdn-versioned/chunks/chunk.B3H3PR6Y.js +1 -1
- package/cdn-versioned/chunks/chunk.B5YKUN6P.js +1 -1
- package/cdn-versioned/chunks/chunk.BAO3UVTY.js +1 -1
- package/cdn-versioned/chunks/chunk.CEVVDV52.js +1 -1
- package/cdn-versioned/chunks/chunk.D4RLVVDK.js +1 -1
- package/cdn-versioned/chunks/chunk.DEX5DZMJ.js +11 -0
- package/cdn-versioned/chunks/chunk.DUM4IQT6.js +1 -1
- package/cdn-versioned/chunks/chunk.EDD4HHHP.js +1 -1
- package/cdn-versioned/chunks/chunk.EJKLI2Q4.js +1 -1
- package/cdn-versioned/chunks/chunk.EP7OA5FU.js +1 -1
- package/cdn-versioned/chunks/chunk.F4GGY7NW.js +1 -1
- package/cdn-versioned/chunks/chunk.GBU4IOUX.js +10 -0
- package/cdn-versioned/chunks/chunk.GNYJN5QM.js +3 -3
- package/cdn-versioned/chunks/chunk.GQU4LYQ6.js +1 -1
- package/cdn-versioned/chunks/chunk.GX6NOXTL.js +1 -1
- package/cdn-versioned/chunks/chunk.IR3YQSPY.js +1 -1
- package/cdn-versioned/chunks/chunk.JUGW2WJP.js +1 -1
- package/cdn-versioned/chunks/chunk.LPXG67S4.js +1 -1
- package/cdn-versioned/chunks/chunk.LQZOBUFT.js +1 -1
- package/cdn-versioned/chunks/chunk.MOQCXANY.js +2 -2
- package/cdn-versioned/chunks/chunk.N5OYRZY6.js +1 -1
- package/cdn-versioned/chunks/chunk.NWGX5EVO.js +1 -0
- package/cdn-versioned/chunks/chunk.OCT5SOOS.js +1 -1
- package/cdn-versioned/chunks/chunk.PPMFZ77L.js +1 -1
- package/cdn-versioned/chunks/chunk.QOQO2KP5.js +1 -1
- package/cdn-versioned/chunks/chunk.QV7OIYLT.js +1 -1
- package/cdn-versioned/chunks/chunk.QWPCVRMH.js +1 -1
- package/cdn-versioned/chunks/chunk.SJ2JO4KS.js +1 -1
- package/cdn-versioned/chunks/chunk.SRRF6RC4.js +1 -0
- package/cdn-versioned/chunks/chunk.SWUGEKNC.js +1 -1
- package/cdn-versioned/chunks/chunk.TR52VDPR.js +1 -1
- package/cdn-versioned/chunks/chunk.U5SOEJO4.js +1 -1
- package/cdn-versioned/chunks/chunk.V3VO4PD4.js +1 -0
- package/cdn-versioned/chunks/chunk.V3WIIJLB.js +1 -1
- package/cdn-versioned/chunks/chunk.VYV6SKST.js +1 -1
- package/cdn-versioned/chunks/chunk.W7A3TU2Z.js +1 -1
- package/cdn-versioned/chunks/chunk.WADGCWRK.js +1 -1
- package/cdn-versioned/chunks/chunk.WNV6OGRG.js +1 -1
- package/cdn-versioned/chunks/chunk.WVYVGVBF.js +1 -1
- package/cdn-versioned/chunks/chunk.Y67MAFTR.js +1 -1
- package/cdn-versioned/chunks/chunk.ZWWTEE7R.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/checkbox-group/checkbox-group.js +1 -1
- package/cdn-versioned/components/combobox/combobox.d.ts +4 -4
- 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/input/input.js +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/radio-group/radio-group.js +1 -1
- package/cdn-versioned/components/scrollable/scrollable.d.ts +1 -1
- package/cdn-versioned/components/select/select.d.ts +4 -4
- package/cdn-versioned/components/select/select.js +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/textarea/textarea.js +1 -1
- package/cdn-versioned/components/tooltip/tooltip.d.ts +1 -1
- package/cdn-versioned/components/video/video.d.ts +1 -1
- package/cdn-versioned/custom-elements.json +202 -202
- package/cdn-versioned/internal/form.js +3 -3
- package/cdn-versioned/solid-components.bundle.js +22 -22
- package/cdn-versioned/solid-components.css +2 -2
- package/cdn-versioned/solid-components.iife.js +22 -22
- package/cdn-versioned/solid-components.js +1 -1
- package/cdn-versioned/vscode.html-custom-data.json +173 -173
- package/cdn-versioned/web-types.json +364 -364
- package/dist/chunks/{chunk.BJIZPRT4.js → chunk.4SBQOWLU.js} +2 -1
- package/dist/chunks/{chunk.L32THKSR.js → chunk.5FOKRIWL.js} +4 -2
- package/dist/chunks/{chunk.UTSM3BM3.js → chunk.D3I3AZEX.js} +6 -1
- package/dist/chunks/{chunk.Y7254YJM.js → chunk.RSPK767T.js} +4 -2
- package/dist/chunks/{chunk.XQNY7RZD.js → chunk.USMGTQQG.js} +4 -2
- package/dist/components/checkbox-group/checkbox-group.js +1 -1
- package/dist/components/input/input.js +1 -1
- package/dist/components/radio-group/radio-group.js +1 -1
- package/dist/components/select/select.js +1 -1
- package/dist/components/textarea/textarea.js +1 -1
- package/dist/custom-elements.json +1 -1
- package/dist/solid-components.js +5 -5
- package/dist/vscode.html-custom-data.json +96 -96
- package/dist/web-types.json +231 -231
- 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.274HT4QS.js +3 -3
- package/dist-versioned/chunks/chunk.2FXKQI26.js +2 -2
- package/dist-versioned/chunks/chunk.4MHQ63NW.js +26 -26
- package/dist-versioned/chunks/chunk.4Q7KKH5Z.js +2 -2
- package/dist-versioned/chunks/{chunk.BJIZPRT4.js → chunk.4SBQOWLU.js} +7 -6
- package/dist-versioned/chunks/{chunk.L32THKSR.js → chunk.5FOKRIWL.js} +7 -5
- package/dist-versioned/chunks/chunk.674S2Z6M.js +1 -1
- package/dist-versioned/chunks/chunk.6DKXZWRN.js +4 -4
- package/dist-versioned/chunks/chunk.7E7C4YEQ.js +3 -3
- package/dist-versioned/chunks/chunk.A5S7GZJI.js +3 -3
- package/dist-versioned/chunks/chunk.A625ONY2.js +2 -2
- package/dist-versioned/chunks/chunk.ACST636J.js +1 -1
- package/dist-versioned/chunks/chunk.AJ7V76EG.js +1 -1
- package/dist-versioned/chunks/chunk.AKF4KQEW.js +2 -2
- package/dist-versioned/chunks/chunk.AQZSZKBJ.js +13 -13
- package/dist-versioned/chunks/chunk.CCQCEONR.js +2 -2
- package/dist-versioned/chunks/chunk.D26WCHLT.js +6 -6
- package/dist-versioned/chunks/{chunk.UTSM3BM3.js → chunk.D3I3AZEX.js} +19 -14
- package/dist-versioned/chunks/chunk.DPY2TYIS.js +9 -9
- package/dist-versioned/chunks/chunk.DU3O42BH.js +2 -2
- package/dist-versioned/chunks/chunk.EH2FHVPN.js +3 -3
- package/dist-versioned/chunks/chunk.F63YFNZS.js +5 -5
- package/dist-versioned/chunks/chunk.FFKZQXJ2.js +2 -2
- package/dist-versioned/chunks/chunk.FTXUZOXH.js +2 -2
- package/dist-versioned/chunks/chunk.H5ARRBLT.js +2 -2
- package/dist-versioned/chunks/chunk.H5BDO4H5.js +11 -11
- package/dist-versioned/chunks/chunk.HFHUY7YD.js +1 -1
- package/dist-versioned/chunks/chunk.I5ZJV32M.js +1 -1
- package/dist-versioned/chunks/chunk.IN7RNHBF.js +1 -1
- package/dist-versioned/chunks/chunk.JIWTAZZS.js +5 -5
- package/dist-versioned/chunks/chunk.JZB2D4IZ.js +1 -1
- package/dist-versioned/chunks/chunk.K3JCC7KV.js +5 -5
- package/dist-versioned/chunks/chunk.KH4M6HPE.js +2 -2
- package/dist-versioned/chunks/chunk.KPA6BEFU.js +5 -5
- package/dist-versioned/chunks/chunk.KVKRZJS7.js +3 -3
- package/dist-versioned/chunks/chunk.LZA2QYUU.js +1 -1
- package/dist-versioned/chunks/chunk.NUIZDE7R.js +1 -1
- package/dist-versioned/chunks/chunk.OBWOMZNU.js +2 -2
- package/dist-versioned/chunks/chunk.OMBVLHXJ.js +1 -1
- package/dist-versioned/chunks/chunk.OR7JTZLE.js +2 -2
- package/dist-versioned/chunks/chunk.OZU372TI.js +2 -2
- package/dist-versioned/chunks/chunk.PRXP5CUW.js +5 -5
- package/dist-versioned/chunks/chunk.PT7MDSWH.js +1 -1
- package/dist-versioned/chunks/chunk.QTFIZJGB.js +2 -2
- package/dist-versioned/chunks/chunk.QUYKT56M.js +1 -1
- package/dist-versioned/chunks/{chunk.Y7254YJM.js → chunk.RSPK767T.js} +6 -4
- package/dist-versioned/chunks/chunk.SNCHAQYL.js +4 -4
- package/dist-versioned/chunks/chunk.TGJ2SBPH.js +6 -6
- package/dist-versioned/chunks/chunk.UIQBHPD3.js +2 -2
- package/dist-versioned/chunks/{chunk.XQNY7RZD.js → chunk.USMGTQQG.js} +33 -31
- package/dist-versioned/chunks/chunk.VTUCPGYW.js +1 -1
- package/dist-versioned/chunks/chunk.X2PI2F35.js +1 -1
- package/dist-versioned/chunks/chunk.XL2PSGM5.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/checkbox-group/checkbox-group.js +1 -1
- package/dist-versioned/components/combobox/combobox.d.ts +4 -4
- 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/input/input.js +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/radio-group/radio-group.js +1 -1
- package/dist-versioned/components/scrollable/scrollable.d.ts +1 -1
- package/dist-versioned/components/select/select.d.ts +4 -4
- package/dist-versioned/components/select/select.js +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/textarea/textarea.js +1 -1
- package/dist-versioned/components/tooltip/tooltip.d.ts +1 -1
- package/dist-versioned/components/video/video.d.ts +1 -1
- package/dist-versioned/custom-elements.json +202 -202
- package/dist-versioned/internal/form.js +3 -3
- package/dist-versioned/solid-components.css +2 -2
- package/dist-versioned/solid-components.js +5 -5
- package/dist-versioned/vscode.html-custom-data.json +173 -173
- package/dist-versioned/web-types.json +364 -364
- package/package.json +2 -2
- package/cdn/chunks/chunk.A63P52TG.js +0 -1
- package/cdn/chunks/chunk.QA3NVZY4.js +0 -1
- package/cdn/chunks/chunk.UCTR6UM6.js +0 -1
- package/cdn/chunks/chunk.WG3IQMLL.js +0 -10
- package/cdn-versioned/chunks/chunk.A63P52TG.js +0 -1
- package/cdn-versioned/chunks/chunk.B6I2NZMP.js +0 -11
- package/cdn-versioned/chunks/chunk.QA3NVZY4.js +0 -1
- package/cdn-versioned/chunks/chunk.UCTR6UM6.js +0 -1
- package/cdn-versioned/chunks/chunk.WG3IQMLL.js +0 -10
@@ -54,7 +54,7 @@ var SdStepGroup = class extends SolidElement {
|
|
54
54
|
});
|
55
55
|
}
|
56
56
|
getAllSteps() {
|
57
|
-
return [...this.body.assignedElements()].filter((el) => el.tagName.toLowerCase() === "sd-4-0-
|
57
|
+
return [...this.body.assignedElements()].filter((el) => el.tagName.toLowerCase() === "sd-4-0-10-step");
|
58
58
|
}
|
59
59
|
/**
|
60
60
|
* Sets the active step.
|
@@ -116,7 +116,7 @@ __decorateClass([
|
|
116
116
|
watch("notInteractive")
|
117
117
|
], SdStepGroup.prototype, "handleInteractivityChange", 1);
|
118
118
|
SdStepGroup = __decorateClass([
|
119
|
-
customElement("sd-4-0-
|
119
|
+
customElement("sd-4-0-10-step-group")
|
120
120
|
], SdStepGroup);
|
121
121
|
|
122
122
|
export {
|
@@ -166,10 +166,12 @@ var SdTextarea = class extends SolidElement {
|
|
166
166
|
render() {
|
167
167
|
const slots = {
|
168
168
|
label: this.hasSlotController.test("label"),
|
169
|
-
helpText: this.hasSlotController.test("help-text")
|
169
|
+
helpText: this.hasSlotController.test("help-text"),
|
170
|
+
tooltip: this.hasSlotController.test("tooltip")
|
170
171
|
};
|
171
172
|
const hasLabel = this.label ? true : !!slots["label"];
|
172
173
|
const hasHelpText = this.helpText ? true : !!slots["helpText"];
|
174
|
+
const hasTooltip = !!slots["tooltip"];
|
173
175
|
const textareaState = this.disabled ? "disabled" : this.readonly ? "readonly" : this.hasFocus && this.showInvalidStyle ? "activeInvalid" : this.hasFocus && this.styleOnValid && this.showValidStyle ? "activeValid" : this.hasFocus ? "active" : this.showInvalidStyle ? "invalid" : this.styleOnValid && this.showValidStyle ? "valid" : "default";
|
174
176
|
const textSize = this.size === "sm" ? "text-sm" : "text-base";
|
175
177
|
const iconSizeMarginLeft = {
|
@@ -177,7 +179,7 @@ var SdTextarea = class extends SolidElement {
|
|
177
179
|
md: "text-lg ml-2",
|
178
180
|
lg: "text-xl ml-2"
|
179
181
|
}[this.size];
|
180
|
-
return html`<div part="form-control" class="flex flex-col h-full text-left"
|
182
|
+
return html`<div part="form-control" class="flex flex-col h-full text-left">${hasLabel || hasTooltip ? html`<div class="flex items-center gap-1 mb-2"><label part="form-control-label" id="label" class="${cx(hasLabel ? "inline-block" : "hidden", textSize)}" for="input" aria-hidden="${hasLabel ? "false" : "true"}"><slot name="label">${this.label}</slot></label> ${slots["tooltip"] ? html`<slot name="tooltip"></slot>` : ""}</div>` : null}<div part="form-control-input" class="${cx("relative h-full w-full", this.disabled && "cursor-not-allowed")}"><div part="border" class="${cx(
|
181
183
|
"absolute w-full h-full pointer-events-none border rounded-default",
|
182
184
|
{
|
183
185
|
disabled: "border-neutral-500",
|
@@ -203,7 +205,7 @@ var SdTextarea = class extends SolidElement {
|
|
203
205
|
"flex-grow focus:outline-none bg-transparent placeholder-neutral-700 resize-none",
|
204
206
|
this.disabled && "cursor-not-allowed",
|
205
207
|
textSize
|
206
|
-
)}" title="${this.title}" name="${ifDefined(this.name)}" .value="${live(this.value)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" placeholder="${ifDefined(this.placeholder)}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${ifDefined(this.rows)}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-invalid="${this.showInvalidStyle}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea> ${this.showInvalidStyle ? html`<sd-4-0-
|
208
|
+
)}" title="${this.title}" name="${ifDefined(this.name)}" .value="${live(this.value)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" placeholder="${ifDefined(this.placeholder)}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${ifDefined(this.rows)}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-invalid="${this.showInvalidStyle}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea> ${this.showInvalidStyle ? html`<sd-4-0-10-icon class="${cx("text-error absolute right-4 bg-white group-hover:bg-neutral-200", iconSizeMarginLeft)}" library="system" name="risk" part="invalid-icon"></sd-4-0-10-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-4-0-10-icon class="${cx("text-success absolute right-4 bg-white group-hover:bg-neutral-200", iconSizeMarginLeft)}" library="system" name="status-check" part="valid-icon"></sd-4-0-10-icon>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700", hasHelpText ? "block" : "hidden")}" aria-hidden="${hasHelpText ? "false" : "true"}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
|
207
209
|
}
|
208
210
|
};
|
209
211
|
/**
|
@@ -314,7 +316,7 @@ __decorateClass([
|
|
314
316
|
watch("value", { waitUntilFirstUpdate: true })
|
315
317
|
], SdTextarea.prototype, "handleValueChange", 1);
|
316
318
|
SdTextarea = __decorateClass([
|
317
|
-
customElement("sd-4-0-
|
319
|
+
customElement("sd-4-0-10-textarea")
|
318
320
|
], SdTextarea);
|
319
321
|
|
320
322
|
export {
|
@@ -214,7 +214,7 @@ var SdButton = class extends SolidElement {
|
|
214
214
|
md: "ml-2",
|
215
215
|
lg: "ml-2"
|
216
216
|
}[this.size]
|
217
|
-
)}"></slot>${this.loading ? html`<sd-4-0-
|
217
|
+
)}"></slot>${this.loading ? html`<sd-4-0-10-spinner class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-4-0-10-spinner>` : ""}</${tag}>`;
|
218
218
|
}
|
219
219
|
};
|
220
220
|
/**
|
@@ -222,13 +222,13 @@ var SdButton = class extends SolidElement {
|
|
222
222
|
*/
|
223
223
|
SdButton.styles = [
|
224
224
|
...SolidElement.styles,
|
225
|
-
css`:host{cursor:pointer;display:inline-block;position:relative;width:var(--sd-spacing-auto,auto)}sd-4-0-
|
225
|
+
css`:host{cursor:pointer;display:inline-block;position:relative;width:var(--sd-spacing-auto,auto)}sd-4-0-10-spinner{--indicator-color:currentColor;--track-color:var(--tw-varcolor-200)}::slotted(sd-4-0-10-badge){pointer-events:none;position:absolute;right:var(--sd-spacing-0,0);top:var(--sd-spacing-0,0);--tw-translate-x:50%!important;--tw-translate-y:-50%!important;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}::slotted(sd-4-0-10-icon),sd-4-0-10-spinner{font-size:calc(var(--tw-varspacing)/2)}`
|
226
226
|
];
|
227
227
|
__decorateClass([
|
228
228
|
query("a, button")
|
229
229
|
], SdButton.prototype, "button", 2);
|
230
230
|
__decorateClass([
|
231
|
-
queryAssignedElements({ selector: "sd-4-0-
|
231
|
+
queryAssignedElements({ selector: "sd-4-0-10-icon" })
|
232
232
|
], SdButton.prototype, "_iconsInDefaultSlot", 2);
|
233
233
|
__decorateClass([
|
234
234
|
state()
|
@@ -291,7 +291,7 @@ __decorateClass([
|
|
291
291
|
watch("disabled", { waitUntilFirstUpdate: true })
|
292
292
|
], SdButton.prototype, "handleDisabledChange", 1);
|
293
293
|
SdButton = __decorateClass([
|
294
|
-
customElement("sd-4-0-
|
294
|
+
customElement("sd-4-0-10-button")
|
295
295
|
], SdButton);
|
296
296
|
|
297
297
|
export {
|
@@ -284,10 +284,10 @@ var SdAudio = class extends SolidElement {
|
|
284
284
|
)}" part="audio-controls"><button class="${cx(
|
285
285
|
"playback-speed justify-self-start text-base font-bold hover:cursor-pointer sd-interactive",
|
286
286
|
this.inverted && "sd-interactive--inverted"
|
287
|
-
)}" aria-label="${this.localize.term("playbackSpeed")}" tabindex="0" @click="${this.togglePlaybackSpeed}" @keydown="${this.togglePlaybackSpeedKeydown}" part="playback-speed">${this.speed}x</button><sd-4-0-
|
287
|
+
)}" aria-label="${this.localize.term("playbackSpeed")}" tabindex="0" @click="${this.togglePlaybackSpeed}" @keydown="${this.togglePlaybackSpeedKeydown}" part="playback-speed">${this.speed}x</button><sd-4-0-10-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")}" class="text-3xl">${this.isPlaying ? html`<slot name="pause-icon"><sd-4-0-10-icon class="text-3xl" name="pause" library="system"></sd-4-0-10-icon></slot>` : html`<slot name="play-icon"><sd-4-0-10-icon class="text-3xl" name="start" library="system"></sd-4-0-10-icon></slot>`}</sd-4-0-10-button><div class="flex items-center justify-self-end">${this.hasSlotController.test("transcript") ? html`<button class="${cx(
|
288
288
|
"mr-6 w-6 h-6 hover:cursor-pointer sd-interactive",
|
289
289
|
this.inverted && "sd-interactive--inverted"
|
290
|
-
)}" @click="${this.showTranscript}" @keydown="${this.showTranscriptKeydown}" tab-index="0"><sd-4-0-
|
290
|
+
)}" @click="${this.showTranscript}" @keydown="${this.showTranscriptKeydown}" tab-index="0"><sd-4-0-10-icon class="w-6 h-6" name="transcript" library="system" label="${this.isMuted ? this.localize.term("unmute") : this.localize.term("mute")}"></sd-4-0-10-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.localize.term("mute")}" tabindex="0" @click="${this.toggleMute}" @keydown="${this.toggleMuteKeydown}"><sd-4-0-10-icon class="w-6 h-6" name="${this.isMuted ? "mute" : "volume"}" library="system"></sd-4-0-10-icon></button></div></div>`;
|
291
291
|
const renderTimestamps = html`<div class="${cx(
|
292
292
|
"w-full flex justify-between",
|
293
293
|
this.reversedLayout ? "mb-2" : "mt-2",
|
@@ -297,12 +297,12 @@ var SdAudio = class extends SolidElement {
|
|
297
297
|
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(
|
298
298
|
"progress-slider bg-primary appearance-none w-full cursor-pointer outline-none h-1 flex items-center sd-interactive",
|
299
299
|
this.inverted && "sd-interactive--inverted"
|
300
|
-
)}" type="range" max="100" step="0.001" value="${this.progress}" tabindex="0" @input="${this.handleAudioProgress}" @keydown="${this.handleAudioProgressKeydown}" 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-0-
|
300
|
+
)}" type="range" max="100" step="0.001" value="${this.progress}" tabindex="0" @input="${this.handleAudioProgress}" @keydown="${this.handleAudioProgressKeydown}" 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-0-10-drawer><slot name="transcript"></slot></sd-4-0-10-drawer>` : null} ${!this.hideTimestamps && (!this.animated || !this.reversedLayout) ? renderTimestamps : null}</div>`;
|
301
301
|
}
|
302
302
|
};
|
303
303
|
SdAudio.styles = [
|
304
304
|
...SolidElement.styles,
|
305
|
-
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-0-
|
305
|
+
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-0-10-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-0-10-button::part(label){align-items:center;display:flex;flex-grow:0}`
|
306
306
|
];
|
307
307
|
__decorateClass([
|
308
308
|
property({ type: Boolean, reflect: true, attribute: "reversed-layout" })
|
@@ -341,13 +341,13 @@ __decorateClass([
|
|
341
341
|
query('[part="audio-player"]')
|
342
342
|
], SdAudio.prototype, "audioPlayerContainer", 2);
|
343
343
|
__decorateClass([
|
344
|
-
query("sd-4-0-
|
344
|
+
query("sd-4-0-10-drawer")
|
345
345
|
], SdAudio.prototype, "drawer", 2);
|
346
346
|
__decorateClass([
|
347
347
|
query("canvas")
|
348
348
|
], SdAudio.prototype, "canvas", 2);
|
349
349
|
SdAudio = __decorateClass([
|
350
|
-
customElement("sd-4-0-
|
350
|
+
customElement("sd-4-0-10-audio")
|
351
351
|
], SdAudio);
|
352
352
|
|
353
353
|
export {
|
@@ -1,7 +1,7 @@
|
|
1
1
|
// src/components/combobox/utils.ts
|
2
2
|
var getAssignedElementsForSlot = (slot) => Array.from(slot.assignedElements({ flatten: true }));
|
3
|
-
var getOptionOrNestedOptions = (item) => item.tagName.toLocaleLowerCase() === "sd-4-0-
|
4
|
-
var isOptgroup = (item) => item.tagName.toLocaleLowerCase() === "sd-4-0-
|
3
|
+
var getOptionOrNestedOptions = (item) => item.tagName.toLocaleLowerCase() === "sd-4-0-10-option" ? item : Array.from(item.querySelectorAll(":scope > sd-4-0-10-option"));
|
4
|
+
var isOptgroup = (item) => item.tagName.toLocaleLowerCase() === "sd-4-0-10-optgroup";
|
5
5
|
var getAllOptions = (items) => items.map(getOptionOrNestedOptions);
|
6
6
|
var filterOnlyOptgroups = (items) => items.filter(isOptgroup);
|
7
7
|
var normalizeString = (str) => str.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
|
@@ -53,7 +53,7 @@ var SdSelect = class extends SolidElement {
|
|
53
53
|
constructor() {
|
54
54
|
super(...arguments);
|
55
55
|
this.formControlController = new FormControlController(this, {
|
56
|
-
assumeInteractionOn: ["sd-blur", "sd-4-0-
|
56
|
+
assumeInteractionOn: ["sd-blur", "sd-4-0-10-input"]
|
57
57
|
});
|
58
58
|
this.hasSlotController = new HasSlotController(this, "help-text", "label");
|
59
59
|
this.localize = new LocalizeController(this);
|
@@ -86,11 +86,11 @@ var SdSelect = class extends SolidElement {
|
|
86
86
|
this.styleOnValid = false;
|
87
87
|
this.hoist = false;
|
88
88
|
this.getTag = (option) => {
|
89
|
-
return html`<sd-4-0-
|
89
|
+
return html`<sd-4-0-10-tag ?disabled="${this.disabled}" part="tag" exportparts="
|
90
90
|
base:tag__base,
|
91
91
|
content:tag__content,
|
92
92
|
removable-indicator:tag__removable-indicator,
|
93
|
-
" size="${this.size === "sm" ? "sm" : "lg"}" removable @keydown="${(event) => this.handleTagKeyDown(event, option)}" @sd-remove="${(event) => this.handleTagRemove(event, option)}">${option.getTextLabel()}</sd-4-0-
|
93
|
+
" size="${this.size === "sm" ? "sm" : "lg"}" removable @keydown="${(event) => this.handleTagKeyDown(event, option)}" @sd-remove="${(event) => this.handleTagRemove(event, option)}">${option.getTextLabel()}</sd-4-0-10-tag>`;
|
94
94
|
};
|
95
95
|
this.handleDocumentFocusIn = (event) => {
|
96
96
|
const path = event.composedPath();
|
@@ -101,7 +101,7 @@ var SdSelect = class extends SolidElement {
|
|
101
101
|
this.handleDocumentKeyDown = (event) => {
|
102
102
|
const target = event.target;
|
103
103
|
const isClearButton = target.closest(".select__clear") !== null;
|
104
|
-
const isIconButton = target.closest("sd-4-0-
|
104
|
+
const isIconButton = target.closest("sd-4-0-10-icon-button") !== null;
|
105
105
|
if (isClearButton || isIconButton) {
|
106
106
|
return;
|
107
107
|
}
|
@@ -235,8 +235,8 @@ var SdSelect = class extends SolidElement {
|
|
235
235
|
event.preventDefault();
|
236
236
|
event.stopPropagation();
|
237
237
|
const tagParent = (_a = event.currentTarget) == null ? void 0 : _a.parentElement;
|
238
|
-
const previousTag = (_b = tagParent == null ? void 0 : tagParent.previousElementSibling) == null ? void 0 : _b.querySelector("sd-4-0-
|
239
|
-
const nextTag = (_c = tagParent == null ? void 0 : tagParent.nextElementSibling) == null ? void 0 : _c.querySelector("sd-4-0-
|
238
|
+
const previousTag = (_b = tagParent == null ? void 0 : tagParent.previousElementSibling) == null ? void 0 : _b.querySelector("sd-4-0-10-tag");
|
239
|
+
const nextTag = (_c = tagParent == null ? void 0 : tagParent.nextElementSibling) == null ? void 0 : _c.querySelector("sd-4-0-10-tag");
|
240
240
|
this.handleTagRemove(new CustomEvent("sd-remove"), option);
|
241
241
|
this.updateComplete.then(() => {
|
242
242
|
if (nextTag) {
|
@@ -256,7 +256,7 @@ var SdSelect = class extends SolidElement {
|
|
256
256
|
this.handleTagRemove(new CustomEvent("sd-remove"), this.selectedOptions[this.selectedOptions.length - 1]);
|
257
257
|
this.updateComplete.then(() => {
|
258
258
|
var _a;
|
259
|
-
const tags = (_a = this.shadowRoot) == null ? void 0 : _a.querySelectorAll("sd-4-0-
|
259
|
+
const tags = (_a = this.shadowRoot) == null ? void 0 : _a.querySelectorAll("sd-4-0-10-tag");
|
260
260
|
if (tags && tags.length > 0) {
|
261
261
|
tags == null ? void 0 : tags[(tags == null ? void 0 : tags.length) - 1].focus();
|
262
262
|
} else {
|
@@ -301,7 +301,7 @@ var SdSelect = class extends SolidElement {
|
|
301
301
|
}
|
302
302
|
handleOptionClick(event) {
|
303
303
|
const target = event.target;
|
304
|
-
const option = target.closest("sd-4-0-
|
304
|
+
const option = target.closest("sd-4-0-10-option");
|
305
305
|
const oldValue = this.value;
|
306
306
|
if (option && !option.disabled) {
|
307
307
|
if (this.multiple) {
|
@@ -326,7 +326,7 @@ var SdSelect = class extends SolidElement {
|
|
326
326
|
const allOptions = this.getAllOptions();
|
327
327
|
const value = Array.isArray(this.value) ? this.value : [this.value];
|
328
328
|
const values = [];
|
329
|
-
if (customElements.get("sd-4-0-
|
329
|
+
if (customElements.get("sd-4-0-10-option")) {
|
330
330
|
allOptions.forEach((option) => {
|
331
331
|
if (this.multiple) {
|
332
332
|
option.checkbox = true;
|
@@ -335,7 +335,7 @@ var SdSelect = class extends SolidElement {
|
|
335
335
|
});
|
336
336
|
this.setSelectedOptions(allOptions.filter((el) => value.includes(el.value)));
|
337
337
|
} else {
|
338
|
-
customElements.whenDefined("sd-4-0-
|
338
|
+
customElements.whenDefined("sd-4-0-10-option").then(() => this.handleDefaultSlotChange());
|
339
339
|
}
|
340
340
|
}
|
341
341
|
handleTagRemove(event, option) {
|
@@ -352,13 +352,13 @@ var SdSelect = class extends SolidElement {
|
|
352
352
|
});
|
353
353
|
}
|
354
354
|
}
|
355
|
-
// Gets an array of all <sd-4-0-
|
355
|
+
// Gets an array of all <sd-4-0-10-option> elements
|
356
356
|
getAllOptions() {
|
357
|
-
return [...this.querySelectorAll("sd-4-0-
|
357
|
+
return [...this.querySelectorAll("sd-4-0-10-option")];
|
358
358
|
}
|
359
|
-
// Gets the first <sd-4-0-
|
359
|
+
// Gets the first <sd-4-0-10-option> element
|
360
360
|
getFirstOption() {
|
361
|
-
return this.querySelector("sd-4-0-
|
361
|
+
return this.querySelector("sd-4-0-10-option");
|
362
362
|
}
|
363
363
|
// Sets the current option, which is the option the user is currently interacting with (e.g. via keyboard). Only one
|
364
364
|
// option may be "current" at a time.
|
@@ -441,11 +441,11 @@ var SdSelect = class extends SolidElement {
|
|
441
441
|
});
|
442
442
|
} else {
|
443
443
|
return [
|
444
|
-
html`<sd-4-0-
|
444
|
+
html`<sd-4-0-10-tag ?disabled="${this.disabled}" part="tag" exportparts="
|
445
445
|
base:tag__base,
|
446
446
|
content:tag__content,
|
447
447
|
removable-indicator:tag__removable-indicator,
|
448
|
-
" 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-0-
|
448
|
+
" 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-0-10-tag>`
|
449
449
|
];
|
450
450
|
}
|
451
451
|
}
|
@@ -460,7 +460,7 @@ var SdSelect = class extends SolidElement {
|
|
460
460
|
handleMouseLeave() {
|
461
461
|
this.hasHover = false;
|
462
462
|
}
|
463
|
-
/** Receives incoming event detail from sd-4-0-
|
463
|
+
/** Receives incoming event detail from sd-4-0-10-popup and updates local state for conditional styling. */
|
464
464
|
handleCurrentPlacement(e) {
|
465
465
|
const incomingPlacement = e.detail;
|
466
466
|
if (incomingPlacement) {
|
@@ -469,7 +469,7 @@ var SdSelect = class extends SolidElement {
|
|
469
469
|
}
|
470
470
|
handleUseTagsChange() {
|
471
471
|
const allOptions = this.getAllOptions();
|
472
|
-
if (customElements.get("sd-4-0-
|
472
|
+
if (customElements.get("sd-4-0-10-option")) {
|
473
473
|
allOptions.forEach((option) => {
|
474
474
|
option.checkbox = this.multiple;
|
475
475
|
});
|
@@ -571,11 +571,13 @@ var SdSelect = class extends SolidElement {
|
|
571
571
|
label: this.hasSlotController.test("label"),
|
572
572
|
clearIcon: this.hasSlotController.test("clear-icon"),
|
573
573
|
expandIcon: this.hasSlotController.test("expand-icon"),
|
574
|
-
helpText: this.hasSlotController.test("help-text")
|
574
|
+
helpText: this.hasSlotController.test("help-text"),
|
575
|
+
tooltip: this.hasSlotController.test("tooltip")
|
575
576
|
};
|
576
577
|
const hasLabel = this.label ? true : !!slots["label"];
|
577
578
|
const hasHelpText = this.helpText ? true : !!slots["helpText"];
|
578
579
|
const hasClearIcon = this.clearable && !this.disabled;
|
580
|
+
const hasTooltip = !!slots["tooltip"];
|
579
581
|
const selectState = this.disabled ? "disabled" : this.hasFocus && this.showInvalidStyle ? "activeInvalid" : this.hasFocus && this.styleOnValid && this.showValidStyle ? "activeValid" : this.hasFocus || this.open ? "active" : this.showInvalidStyle ? "invalid" : this.styleOnValid && this.showValidStyle ? "valid" : "default";
|
580
582
|
const cursorStyles = this.disabled ? "cursor-not-allowed" : "cursor-pointer";
|
581
583
|
const iconMarginLeft = { sm: "ml-1", md: "ml-2", lg: "ml-2" }[this.size];
|
@@ -589,7 +591,7 @@ var SdSelect = class extends SolidElement {
|
|
589
591
|
cursorStyles,
|
590
592
|
this.size === "sm" ? "text-sm" : "text-base",
|
591
593
|
this.open && "z-50"
|
592
|
-
)}"><span class="sr-only" role="alert" aria-live="assertive">${this.deletedTagLabel}</span
|
594
|
+
)}"><span class="sr-only" role="alert" aria-live="assertive">${this.deletedTagLabel}</span> ${hasLabel || hasTooltip ? html`<div class="flex items-center gap-1 mb-2"><label id="label" part="form-control-label" class="${hasLabel && "inline-block"}" aria-hidden="${hasLabel ? "false" : "true"}" @click="${this.handleLabelClick}"><slot name="label">${this.label}</slot></label> ${slots["tooltip"] ? html`<slot name="tooltip"></slot>` : ""}</div>` : null}<div part="form-control-input" class="${cx("relative w-full bg-white", selectState === "disabled" ? "text-neutral-500" : "text-black")}"><div part="border" class="${cx(
|
593
595
|
"absolute top-0 w-full h-full pointer-events-none border rounded-default",
|
594
596
|
this.hasHover && "bg-neutral-200",
|
595
597
|
{
|
@@ -603,7 +605,7 @@ var SdSelect = class extends SolidElement {
|
|
603
605
|
default: "border-neutral-800"
|
604
606
|
}[selectState],
|
605
607
|
this.open && (this.currentPlacement === "bottom" ? "rounded-bl-none rounded-br-none" : "rounded-tl-none rounded-tr-none")
|
606
|
-
)}"></div><sd-4-0-
|
608
|
+
)}"></div><sd-4-0-10-popup @sd-current-placement="${this.handleCurrentPlacement}" class="${cx(
|
607
609
|
"inline-flex relative w-full",
|
608
610
|
this.currentPlacement === "bottom" ? "origin-top" : "origin-bottom"
|
609
611
|
)}" placement="${this.placement}" strategy="${this.hoist ? "fixed" : "absolute"}" flip shift sync="width" auto-size="vertical" auto-size-padding="10" exportparts="
|
@@ -624,35 +626,35 @@ var SdSelect = class extends SolidElement {
|
|
624
626
|
"select__clear flex justify-center",
|
625
627
|
iconMarginLeft,
|
626
628
|
this.value.length > 0 ? "visible" : "invisible"
|
627
|
-
)}" type="button" aria-label="${this.localize.term("clearEntry")}" @mousedown="${this.handleClearMouseDown}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-4-0-
|
629
|
+
)}" type="button" aria-label="${this.localize.term("clearEntry")}" @mousedown="${this.handleClearMouseDown}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-4-0-10-icon class="${cx("text-icon-fill-neutral-800", iconSize)}" library="system" name="closing-round"></sd-4-0-10-icon></slot></button>` : ""} ${this.showInvalidStyle ? html`<sd-4-0-10-icon part="invalid-icon" class="${cx(iconMarginLeft, iconSize, "text-error")}" library="system" name="risk"></sd-4-0-10-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-4-0-10-icon part="valid-icon" class="${cx("flex-shrink-0 text-success", iconMarginLeft, iconSize)}" library="system" name="status-check"></sd-4-0-10-icon>` : ""}<slot name="expand-icon" part="expand-icon" class="${cx(
|
628
630
|
"inline-flex ml-2 transition-all",
|
629
631
|
this.open ? "rotate-180" : "rotate-0",
|
630
632
|
this.disabled ? "text-neutral-500" : "text-primary",
|
631
633
|
iconSize
|
632
|
-
)}"><sd-4-0-
|
634
|
+
)}"><sd-4-0-10-icon name="chevron-down" part="chevron" library="system" color="currentColor"></sd-4-0-10-icon></slot></div><div id="listbox" role="listbox" aria-expanded="${this.open ? "true" : "false"}" aria-multiselectable="${this.multiple ? "true" : "false"}" aria-labelledby="label" part="listbox" class="${cx(
|
633
635
|
"bg-white px-2 py-3 relative border-primary overflow-y-auto",
|
634
636
|
this.open && "shadow",
|
635
637
|
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"
|
636
|
-
)}" tabindex="-1" @mouseup="${this.handleOptionClick}" @slotchange="${this.handleDefaultSlotChange}"><slot></slot></div></sd-4-0-
|
638
|
+
)}" tabindex="-1" @mouseup="${this.handleOptionClick}" @slotchange="${this.handleDefaultSlotChange}"><slot></slot></div></sd-4-0-10-popup></div><div class="text-sm text-neutral-700" part="form-control-help-text" id="help-text" aria-hidden="${hasHelpText ? "false" : "true"}"><slot name="help-text">${this.helpText}</slot></div></div>${this.formControlController.renderInvalidMessage()}`;
|
637
639
|
}
|
638
640
|
};
|
639
641
|
SdSelect.dependencies = {
|
640
|
-
"sd-4-0-
|
641
|
-
"sd-4-0-
|
642
|
-
"sd-4-0-
|
642
|
+
"sd-4-0-10-icon": SdIcon,
|
643
|
+
"sd-4-0-10-popup": SdPopup,
|
644
|
+
"sd-4-0-10-tag": SdTag
|
643
645
|
};
|
644
646
|
/**
|
645
647
|
* Inherits global stylesheet including TailwindCSS
|
646
648
|
*/
|
647
649
|
SdSelect.styles = [
|
648
650
|
...SolidElement.styles,
|
649
|
-
css`:host{display:block;position:relative;width:100%}:host([required]) #label:after{content:" *"}[part=listbox]{max-height:var(--auto-size-available-height,auto)}sd-4-0-
|
651
|
+
css`:host{display:block;position:relative;width:100%}:host([required]) #label:after{content:" *"}[part=listbox]{max-height:var(--auto-size-available-height,auto)}sd-4-0-10-popup::part(popup){z-index:var(--sd-z-index-dropdown,900)}sd-4-0-10-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-0-10-tag::part(content){display:inline-block;max-width:var(--tag-max-width,15ch);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}sd-4-0-10-tag[size=lg]::part(base){padding-left:var(--sd-spacing-2,.5rem);padding-right:var(--sd-spacing-2,.5rem)}sd-4-0-10-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))}`
|
650
652
|
];
|
651
653
|
__decorateClass([
|
652
|
-
queryAssignedElements({ selector: "sd-4-0-
|
654
|
+
queryAssignedElements({ selector: "sd-4-0-10-option" })
|
653
655
|
], SdSelect.prototype, "_optionsInDefaultSlot", 2);
|
654
656
|
__decorateClass([
|
655
|
-
query("sd-4-0-
|
657
|
+
query("sd-4-0-10-popup")
|
656
658
|
], SdSelect.prototype, "popup", 2);
|
657
659
|
__decorateClass([
|
658
660
|
query('[part="combobox"]')
|
@@ -777,7 +779,7 @@ __decorateClass([
|
|
777
779
|
watch("value", { waitUntilFirstUpdate: true })
|
778
780
|
], SdSelect.prototype, "handleValueChange", 1);
|
779
781
|
SdSelect = __decorateClass([
|
780
|
-
customElement("sd-4-0-
|
782
|
+
customElement("sd-4-0-10-select")
|
781
783
|
], SdSelect);
|
782
784
|
setDefaultAnimation("select.show", {
|
783
785
|
keyframes: [
|
@@ -323,7 +323,7 @@ __decorateClass([
|
|
323
323
|
property({ attribute: "auto-size-padding", type: Number })
|
324
324
|
], SdPopup.prototype, "autoSizePadding", 2);
|
325
325
|
SdPopup = __decorateClass([
|
326
|
-
customElement("sd-4-0-
|
326
|
+
customElement("sd-4-0-10-popup")
|
327
327
|
], SdPopup);
|
328
328
|
|
329
329
|
export {
|
@@ -21,7 +21,7 @@ var SdTab = class extends SolidElement {
|
|
21
21
|
constructor() {
|
22
22
|
super(...arguments);
|
23
23
|
this.attrId = ++id;
|
24
|
-
this.componentId = `sd-4-0-
|
24
|
+
this.componentId = `sd-4-0-10-tab-${this.attrId}`;
|
25
25
|
this.hasSlotController = new HasSlotController(this, "left");
|
26
26
|
this.variant = "default";
|
27
27
|
this.active = false;
|
@@ -91,7 +91,7 @@ __decorateClass([
|
|
91
91
|
watch("disabled")
|
92
92
|
], SdTab.prototype, "handleDisabledChange", 1);
|
93
93
|
SdTab = __decorateClass([
|
94
|
-
customElement("sd-4-0-
|
94
|
+
customElement("sd-4-0-10-tab")
|
95
95
|
], SdTab);
|
96
96
|
|
97
97
|
export {
|
@@ -9,9 +9,9 @@ import type SdOptgroup from '../optgroup/optgroup.js';
|
|
9
9
|
import type SdOption from '../option/option';
|
10
10
|
export default class SdCombobox extends SolidElement implements SolidFormControl {
|
11
11
|
static dependencies: {
|
12
|
-
'sd-4-0-
|
13
|
-
'sd-4-0-
|
14
|
-
'sd-4-0-
|
12
|
+
'sd-4-0-10-icon': typeof SdIcon;
|
13
|
+
'sd-4-0-10-popup': typeof SdPopup;
|
14
|
+
'sd-4-0-10-tag': typeof SdTag;
|
15
15
|
};
|
16
16
|
private readonly formControlController;
|
17
17
|
private readonly hasSlotController;
|
@@ -125,6 +125,6 @@ export default class SdCombobox extends SolidElement implements SolidFormControl
|
|
125
125
|
}
|
126
126
|
declare global {
|
127
127
|
interface HTMLElementTagNameMap {
|
128
|
-
'sd-4-0-
|
128
|
+
'sd-4-0-10-combobox': SdCombobox;
|
129
129
|
}
|
130
130
|
}
|