@solid-design-system/components 6.0.0-next.13 → 6.0.0-next.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.SOZMBJQS.js → chunk.PNNFETDE.js} +2 -2
- package/cdn/components/step/step.js +1 -1
- package/cdn/custom-elements.json +1 -1
- package/cdn/solid-components.bundle.js +1 -1
- package/cdn/solid-components.iife.js +1 -1
- package/cdn/solid-components.js +1 -1
- package/cdn/web-types.json +1 -1
- package/cdn-versioned/chunks/chunk.2YVFFSZ2.js +2 -2
- package/cdn-versioned/chunks/chunk.44VVOUNS.js +2 -2
- package/cdn-versioned/chunks/chunk.47MRK77Q.js +2 -2
- package/cdn-versioned/chunks/chunk.4B2UGI4Q.js +2 -2
- package/cdn-versioned/chunks/chunk.4BA5ZOGJ.js +2 -2
- package/cdn-versioned/chunks/chunk.4XOGRPML.js +2 -2
- package/cdn-versioned/chunks/chunk.4YIPRD2R.js +2 -2
- package/cdn-versioned/chunks/chunk.56CEBIDO.js +2 -2
- package/cdn-versioned/chunks/chunk.6K6UAUJB.js +2 -2
- package/cdn-versioned/chunks/chunk.6NT553UW.js +3 -3
- package/cdn-versioned/chunks/chunk.6YG52QHB.js +2 -2
- package/cdn-versioned/chunks/chunk.7CPADVOB.js +8 -8
- package/cdn-versioned/chunks/chunk.7FOCBEJX.js +2 -2
- package/cdn-versioned/chunks/chunk.AJWY5KT4.js +1 -1
- package/cdn-versioned/chunks/chunk.AQPYT3YS.js +2 -2
- package/cdn-versioned/chunks/chunk.BM3H7EWP.js +1 -1
- package/cdn-versioned/chunks/chunk.BNUZ66HV.js +2 -2
- package/cdn-versioned/chunks/chunk.CCBHAIEN.js +2 -2
- package/cdn-versioned/chunks/chunk.CDP46OS4.js +1 -1
- package/cdn-versioned/chunks/chunk.CMUYA4JA.js +2 -2
- package/cdn-versioned/chunks/chunk.CUX2GVLG.js +2 -2
- package/cdn-versioned/chunks/chunk.E2IHOEZ2.js +2 -2
- package/cdn-versioned/chunks/chunk.EPZHTJOD.js +2 -2
- package/cdn-versioned/chunks/chunk.FDIETORH.js +1 -1
- package/cdn-versioned/chunks/chunk.FGIDTNRY.js +2 -2
- package/cdn-versioned/chunks/chunk.FUFYA576.js +2 -2
- package/cdn-versioned/chunks/chunk.FZDWRR4M.js +2 -2
- package/cdn-versioned/chunks/chunk.H5OTIIDM.js +1 -1
- package/cdn-versioned/chunks/chunk.HW2XROMU.js +1 -1
- package/cdn-versioned/chunks/chunk.HXH2R7SD.js +2 -2
- package/cdn-versioned/chunks/chunk.JLPSMSYV.js +2 -2
- package/cdn-versioned/chunks/chunk.JS2HQ2N4.js +1 -1
- package/cdn-versioned/chunks/chunk.JV3CZSIV.js +2 -2
- package/cdn-versioned/chunks/chunk.K4PQBCFA.js +2 -2
- package/cdn-versioned/chunks/chunk.K5JMQ4UD.js +2 -2
- package/cdn-versioned/chunks/chunk.K647VAIN.js +2 -2
- package/cdn-versioned/chunks/chunk.KMYA4EDE.js +1 -1
- package/cdn-versioned/chunks/chunk.KOCOMSSL.js +2 -2
- package/cdn-versioned/chunks/chunk.N2D2FFWH.js +2 -2
- package/cdn-versioned/chunks/{chunk.SOZMBJQS.js → chunk.PNNFETDE.js} +2 -2
- package/cdn-versioned/chunks/chunk.PQLUBSLH.js +2 -2
- package/cdn-versioned/chunks/chunk.RY2KL7E3.js +1 -1
- package/cdn-versioned/chunks/chunk.SPW5M7X6.js +2 -2
- package/cdn-versioned/chunks/chunk.SQ7Q6ATD.js +2 -2
- package/cdn-versioned/chunks/chunk.T527FME4.js +2 -2
- package/cdn-versioned/chunks/chunk.TNXNTP3E.js +1 -1
- package/cdn-versioned/chunks/chunk.TQKGKW36.js +2 -2
- package/cdn-versioned/chunks/chunk.UHDNXYVU.js +1 -1
- package/cdn-versioned/chunks/chunk.V2RD6VHQ.js +3 -3
- package/cdn-versioned/chunks/chunk.V6OZYBBZ.js +2 -2
- package/cdn-versioned/chunks/chunk.VRBKTE6L.js +2 -2
- package/cdn-versioned/chunks/chunk.VVX7QSXX.js +2 -2
- package/cdn-versioned/chunks/chunk.W7A3TU2Z.js +1 -1
- package/cdn-versioned/chunks/chunk.WDWBQF3Q.js +1 -1
- package/cdn-versioned/chunks/chunk.XM7DA5LT.js +5 -5
- package/cdn-versioned/chunks/chunk.XUSHLNK2.js +2 -2
- package/cdn-versioned/chunks/chunk.XVIS3URC.js +5 -5
- package/cdn-versioned/chunks/chunk.YFRDMK6W.js +2 -2
- package/cdn-versioned/chunks/chunk.YH3VRHVM.js +2 -2
- package/cdn-versioned/chunks/chunk.YYVAO5XU.js +2 -2
- package/cdn-versioned/chunks/chunk.ZRYG64PN.js +2 -2
- package/cdn-versioned/chunks/chunk.ZSTABGTZ.js +2 -2
- package/cdn-versioned/chunks/chunk.ZT3DQGPM.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/breadcrumb/breadcrumb.d.ts +1 -1
- package/cdn-versioned/components/breadcrumb-item/breadcrumb-item.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/datepicker/datepicker.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/loader/loader.d.ts +1 -1
- package/cdn-versioned/components/map-marker/map-marker.d.ts +1 -1
- package/cdn-versioned/components/menu/menu.d.ts +1 -1
- package/cdn-versioned/components/menu-item/menu-item.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 +1 -1
- 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 +1 -1
- package/cdn-versioned/components/range/range.d.ts +1 -1
- package/cdn-versioned/components/range-tick/range-tick.d.ts +1 -1
- 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/step.js +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/theme-listener/theme-listener.d.ts +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 +248 -248
- package/cdn-versioned/internal/form.js +3 -3
- package/cdn-versioned/solid-components.bundle.js +78 -78
- package/cdn-versioned/solid-components.css +2 -2
- package/cdn-versioned/solid-components.iife.js +78 -78
- package/cdn-versioned/solid-components.js +1 -1
- package/cdn-versioned/vscode.html-custom-data.json +94 -94
- package/cdn-versioned/web-types.json +163 -163
- package/dist/chunks/{chunk.264U7CMA.js → chunk.TQFVQIUF.js} +1 -1
- package/dist/components/step/step.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/chunks/chunk.2NCOG3MU.js +2 -2
- package/dist-versioned/chunks/chunk.342A5SCB.js +1 -1
- package/dist-versioned/chunks/chunk.36MFTGER.js +3 -3
- package/dist-versioned/chunks/chunk.3FNTXOOI.js +4 -4
- package/dist-versioned/chunks/chunk.52VGL2RV.js +2 -2
- package/dist-versioned/chunks/chunk.6AAIPQYI.js +3 -3
- package/dist-versioned/chunks/chunk.6E6VJJCZ.js +4 -4
- package/dist-versioned/chunks/chunk.723WXRZK.js +12 -12
- package/dist-versioned/chunks/chunk.7PCENRTO.js +12 -12
- package/dist-versioned/chunks/chunk.A7UPZVBX.js +4 -4
- package/dist-versioned/chunks/chunk.BPFUHSE6.js +4 -4
- package/dist-versioned/chunks/chunk.CCVS6SCT.js +4 -4
- package/dist-versioned/chunks/chunk.CREFZXWR.js +5 -5
- package/dist-versioned/chunks/chunk.CSMEO2UQ.js +8 -8
- package/dist-versioned/chunks/chunk.CSQ6UNT7.js +2 -2
- package/dist-versioned/chunks/chunk.DXTBP2P6.js +2 -2
- package/dist-versioned/chunks/chunk.DZS26LXZ.js +3 -3
- package/dist-versioned/chunks/chunk.ECSSDS7T.js +14 -14
- package/dist-versioned/chunks/chunk.EERHCK7O.js +6 -6
- package/dist-versioned/chunks/chunk.EMU4ZNFB.js +5 -5
- package/dist-versioned/chunks/chunk.GDO3P6PZ.js +1 -1
- package/dist-versioned/chunks/chunk.GP6R4ZF6.js +1 -1
- package/dist-versioned/chunks/chunk.HEU4LDJX.js +3 -3
- package/dist-versioned/chunks/chunk.HHTYBBNM.js +2 -2
- package/dist-versioned/chunks/chunk.HSMUS45Y.js +24 -24
- package/dist-versioned/chunks/chunk.HYD6CWKB.js +3 -3
- package/dist-versioned/chunks/chunk.ISASQGOE.js +11 -11
- package/dist-versioned/chunks/chunk.IUD4JFEG.js +24 -24
- package/dist-versioned/chunks/chunk.IXLKTULT.js +3 -3
- package/dist-versioned/chunks/chunk.KEJFWGZI.js +4 -4
- package/dist-versioned/chunks/chunk.KR3X7M5B.js +5 -5
- package/dist-versioned/chunks/chunk.KS4PRECL.js +4 -4
- package/dist-versioned/chunks/chunk.LGBFWOCJ.js +4 -4
- package/dist-versioned/chunks/chunk.LJIVAP6V.js +1 -1
- package/dist-versioned/chunks/chunk.LOVLLOYE.js +7 -7
- package/dist-versioned/chunks/chunk.MASJX3XP.js +1 -1
- package/dist-versioned/chunks/chunk.OC76JBYD.js +2 -2
- package/dist-versioned/chunks/chunk.OILA72IM.js +1 -1
- package/dist-versioned/chunks/chunk.Q57H4HOI.js +7 -7
- package/dist-versioned/chunks/chunk.QH2KLXTB.js +3 -3
- package/dist-versioned/chunks/chunk.QQX5RCHL.js +8 -8
- package/dist-versioned/chunks/chunk.QYZE4ARE.js +3 -3
- package/dist-versioned/chunks/chunk.SF447PE7.js +2 -2
- package/dist-versioned/chunks/chunk.SGCOHQSI.js +26 -26
- package/dist-versioned/chunks/chunk.SWXSBRRQ.js +2 -2
- package/dist-versioned/chunks/chunk.SYXN6E4T.js +1 -1
- package/dist-versioned/chunks/chunk.SZ7IRQY4.js +3 -3
- package/dist-versioned/chunks/{chunk.264U7CMA.js → chunk.TQFVQIUF.js} +4 -4
- package/dist-versioned/chunks/chunk.U2RRRJY3.js +4 -4
- package/dist-versioned/chunks/chunk.UIQBHPD3.js +2 -2
- package/dist-versioned/chunks/chunk.VBJNVPBU.js +1 -1
- package/dist-versioned/chunks/chunk.VLIPMAVX.js +6 -6
- package/dist-versioned/chunks/chunk.WLZ64OXQ.js +6 -6
- package/dist-versioned/chunks/chunk.WN5EV4N3.js +4 -4
- package/dist-versioned/chunks/chunk.WTA5BTJL.js +5 -5
- package/dist-versioned/chunks/chunk.XCQC3F3H.js +3 -3
- package/dist-versioned/chunks/chunk.XTHUPXCS.js +8 -8
- package/dist-versioned/chunks/chunk.XTNHNEFI.js +2 -2
- package/dist-versioned/chunks/chunk.YHJOW7S3.js +2 -2
- package/dist-versioned/chunks/chunk.YIIMAPVO.js +2 -2
- package/dist-versioned/chunks/chunk.YSE5ZECP.js +1 -1
- package/dist-versioned/chunks/chunk.Z32LVC6A.js +5 -5
- package/dist-versioned/chunks/chunk.ZHEFFMES.js +3 -3
- 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/breadcrumb/breadcrumb.d.ts +1 -1
- package/dist-versioned/components/breadcrumb-item/breadcrumb-item.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/datepicker/datepicker.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/loader/loader.d.ts +1 -1
- package/dist-versioned/components/map-marker/map-marker.d.ts +1 -1
- package/dist-versioned/components/menu/menu.d.ts +1 -1
- package/dist-versioned/components/menu-item/menu-item.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 +1 -1
- 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 +1 -1
- package/dist-versioned/components/range/range.d.ts +1 -1
- package/dist-versioned/components/range-tick/range-tick.d.ts +1 -1
- 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/step.js +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/theme-listener/theme-listener.d.ts +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 +248 -248
- 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 +94 -94
- package/dist-versioned/web-types.json +163 -163
- package/package.json +1 -1
|
@@ -129,7 +129,7 @@ var SdScrollable = class extends SolidElement {
|
|
|
129
129
|
down: this.upButton
|
|
130
130
|
}[direction];
|
|
131
131
|
const label = reachedStart ? `${this.localize.term("scrolled")}. ${this.localize.term("scrollToEnd")}` : `${this.localize.term("scrolled")}. ${this.localize.term("scrollToStart")}`;
|
|
132
|
-
(_c = oppositeButton == null ? void 0 : oppositeButton.querySelector("sd-6-0-0-next-
|
|
132
|
+
(_c = oppositeButton == null ? void 0 : oppositeButton.querySelector("sd-6-0-0-next-14-icon")) == null ? void 0 : _c.setAttribute("label", label);
|
|
133
133
|
if (isKeyboardTriggered) {
|
|
134
134
|
oppositeButton == null ? void 0 : oppositeButton.focus();
|
|
135
135
|
} else {
|
|
@@ -141,7 +141,7 @@ var SdScrollable = class extends SolidElement {
|
|
|
141
141
|
const scrollTo = ["left", "up"].includes(direction) ? "start" : "end";
|
|
142
142
|
const label = scrollTo === "start" ? this.localize.term("scrollToStart") : this.localize.term("scrollToEnd");
|
|
143
143
|
const button = e.target;
|
|
144
|
-
(_a = button.querySelector("sd-6-0-0-next-
|
|
144
|
+
(_a = button.querySelector("sd-6-0-0-next-14-icon")) == null ? void 0 : _a.setAttribute("label", label);
|
|
145
145
|
}
|
|
146
146
|
render() {
|
|
147
147
|
const scrollButtonClasses = "relative p-0 border-0 bg-transparent cursor-pointer w-5 h-5 flex items-center justify-center sd-interactive rounded-md flex text-lg";
|
|
@@ -158,16 +158,16 @@ var SdScrollable = class extends SolidElement {
|
|
|
158
158
|
)}" @scroll="${this.handleContainerScroll}" tabindex="0"><div id="announcement-container" role="status" class="sr-only"></div><div part="scroll-content" class="flex-1"><slot></slot></div></div>${this.buttons ? html`${this.isScrollHorizontalEnabled ? html`<div part="button-left" class="${cx(
|
|
159
159
|
"absolute z-10 flex items-center justify-center top-0 left-0 h-full w-8 transition-opacity duration-medium ease-in-out",
|
|
160
160
|
!this.canScroll.left && "opacity-0 pointer-events-none"
|
|
161
|
-
)}"><button part="button-start" class="${cx(scrollButtonClasses)}" aria-hidden="${ifDefined(!this.canScroll.left || void 0)}" tabindex="${ifDefined(!this.canScroll.left ? -1 : void 0)}" @click="${(e) => this.handleScroll("left", e)}" @blur="${(e) => this.handleButtonBlur("left", e)}"><slot name="icon-start"><sd-6-0-0-next-
|
|
161
|
+
)}"><button part="button-start" class="${cx(scrollButtonClasses)}" aria-hidden="${ifDefined(!this.canScroll.left || void 0)}" tabindex="${ifDefined(!this.canScroll.left ? -1 : void 0)}" @click="${(e) => this.handleScroll("left", e)}" @blur="${(e) => this.handleButtonBlur("left", e)}"><slot name="icon-start"><sd-6-0-0-next-14-icon library="_internal" name="chevron-up" class="rotate-[-90deg]" label="${this.localize.term("scrollToStart")}"></sd-6-0-0-next-14-icon></slot></button></div><div part="button-right" class="${cx(
|
|
162
162
|
"absolute z-10 flex items-center justify-center top-0 right-0 h-full w-8 transition-opacity duration-medium ease-in-out",
|
|
163
163
|
!this.canScroll.right && "opacity-0 pointer-events-none"
|
|
164
|
-
)}"><button part="button-end" class="${cx(scrollButtonClasses)}" aria-hidden="${ifDefined(!this.canScroll.right || void 0)}" tabindex="${ifDefined(!this.canScroll.right ? -1 : void 0)}" @click="${(e) => this.handleScroll("right", e)}" @blur="${(e) => this.handleButtonBlur("right", e)}"><slot name="icon-end"><sd-6-0-0-next-
|
|
164
|
+
)}"><button part="button-end" class="${cx(scrollButtonClasses)}" aria-hidden="${ifDefined(!this.canScroll.right || void 0)}" tabindex="${ifDefined(!this.canScroll.right ? -1 : void 0)}" @click="${(e) => this.handleScroll("right", e)}" @blur="${(e) => this.handleButtonBlur("right", e)}"><slot name="icon-end"><sd-6-0-0-next-14-icon library="_internal" name="chevron-down" class="rotate-[-90deg]" label="${this.localize.term("scrollToEnd")}"></sd-6-0-0-next-14-icon></slot></button></div>` : null} ${this.isScrollVerticalEnabled ? html`<div part="button-top" class="${cx(
|
|
165
165
|
"absolute z-10 flex items-center justify-center top-0 left-0 w-full h-8 transition-opacity duration-medium ease-in-out",
|
|
166
166
|
!this.canScroll.up && "opacity-0 pointer-events-none"
|
|
167
|
-
)}"><button part="button-start" class="${cx(scrollButtonClasses)}" aria-hidden="${ifDefined(!this.canScroll.up || void 0)}" tabindex="${ifDefined(!this.canScroll.up ? -1 : void 0)}" @click="${(e) => this.handleScroll("up", e)}" @blur="${(e) => this.handleButtonBlur("up", e)}"><slot name="icon-start"><sd-6-0-0-next-
|
|
167
|
+
)}"><button part="button-start" class="${cx(scrollButtonClasses)}" aria-hidden="${ifDefined(!this.canScroll.up || void 0)}" tabindex="${ifDefined(!this.canScroll.up ? -1 : void 0)}" @click="${(e) => this.handleScroll("up", e)}" @blur="${(e) => this.handleButtonBlur("up", e)}"><slot name="icon-start"><sd-6-0-0-next-14-icon library="_internal" name="chevron-up" label="${this.localize.term("scrollToStart")}"></sd-6-0-0-next-14-icon></slot></button></div><div part="button-bottom" class="${cx(
|
|
168
168
|
"absolute z-10 flex items-center justify-center bottom-0 left-0 w-full h-8 transition-opacity duration-medium ease-in-out",
|
|
169
169
|
!this.canScroll.down && "opacity-0 pointer-events-none"
|
|
170
|
-
)}"><button part="button-end" class="${cx(scrollButtonClasses)}" aria-hidden="${ifDefined(!this.canScroll.down || void 0)}" tabindex="${ifDefined(!this.canScroll.down ? -1 : void 0)}" @click="${(e) => this.handleScroll("down", e)}" @blur="${(e) => this.handleButtonBlur("down", e)}"><slot name="icon-end"><sd-6-0-0-next-
|
|
170
|
+
)}"><button part="button-end" class="${cx(scrollButtonClasses)}" aria-hidden="${ifDefined(!this.canScroll.down || void 0)}" tabindex="${ifDefined(!this.canScroll.down ? -1 : void 0)}" @click="${(e) => this.handleScroll("down", e)}" @blur="${(e) => this.handleButtonBlur("down", e)}"><slot name="icon-end"><sd-6-0-0-next-14-icon library="_internal" name="chevron-down" label="${this.localize.term("scrollToEnd")}"></sd-6-0-0-next-14-icon></slot></button></div>` : null}` : null} ${this.shadows ? html`${this.isScrollHorizontalEnabled ? html`<div part="shadow-left" class="${cx(
|
|
171
171
|
"left top-0 left-0 w-[6px] h-full",
|
|
172
172
|
scrollShadowClasses,
|
|
173
173
|
this.canScroll.left ? "opacity-100" : "opacity-0"
|
|
@@ -189,7 +189,7 @@ var SdScrollable = class extends SolidElement {
|
|
|
189
189
|
SdScrollable.styles = [
|
|
190
190
|
...SolidElement.styles,
|
|
191
191
|
css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
|
|
192
|
-
:host{--gradient-color:transparent;--gradient:var(--gradient-color) 0%,rgba(var(--sd-color-background-white, rgba(var(--sd-color-white)))) 80%,rgba(var(--sd-color-background-white, rgba(var(--sd-color-white)))) 100%;position:relative;display:flex;overflow:hidden}.hide-scrollbars{scrollbar-width:none;-ms-overflow-style:none}.hide-scrollbars::-webkit-scrollbar{display:none}.scroll-container::-webkit-scrollbar-thumb{background-color:transparent}.scroll-container:hover::-webkit-scrollbar-thumb{background:var(--background-neutral-400,#c3c3c3);border-radius:var(--sd-radius-sm)}.scroll-container::-webkit-scrollbar{height:var(--sd-spacing-1);width:var(--sd-spacing-1)}.scroll-auto{overflow:auto}[part=button-left]{background:linear-gradient(270deg,var(--gradient))}[part=button-right]{background:linear-gradient(90deg,var(--gradient))}[part=button-top]{background:linear-gradient(0deg,var(--gradient))}[part=button-bottom]{background:linear-gradient(180deg,var(--gradient))}[part=shadow-left]{background:linear-gradient(270deg,transparent 50%,rgba(24,24,24,.4) 100%)}[part=shadow-right]{background:linear-gradient(90deg,transparent 50%,rgba(24,24,24,.4) 100%)}[part=shadow-top]{background:linear-gradient(0deg,transparent 50%,rgba(24,24,24,.4) 100%)}[part=shadow-bottom]{background:linear-gradient(180deg,transparent 50%,rgba(24,24,24,.4) 100%)}.sd-6-0-0-next-
|
|
192
|
+
:host{--gradient-color:transparent;--gradient:var(--gradient-color) 0%,rgba(var(--sd-color-background-white, rgba(var(--sd-color-white)))) 80%,rgba(var(--sd-color-background-white, rgba(var(--sd-color-white)))) 100%;position:relative;display:flex;overflow:hidden}.hide-scrollbars{scrollbar-width:none;-ms-overflow-style:none}.hide-scrollbars::-webkit-scrollbar{display:none}.scroll-container::-webkit-scrollbar-thumb{background-color:transparent}.scroll-container:hover::-webkit-scrollbar-thumb{background:var(--background-neutral-400,#c3c3c3);border-radius:var(--sd-radius-sm)}.scroll-container::-webkit-scrollbar{height:var(--sd-spacing-1);width:var(--sd-spacing-1)}.scroll-auto{overflow:auto}[part=button-left]{background:linear-gradient(270deg,var(--gradient))}[part=button-right]{background:linear-gradient(90deg,var(--gradient))}[part=button-top]{background:linear-gradient(0deg,var(--gradient))}[part=button-bottom]{background:linear-gradient(180deg,var(--gradient))}[part=shadow-left]{background:linear-gradient(270deg,transparent 50%,rgba(24,24,24,.4) 100%)}[part=shadow-right]{background:linear-gradient(90deg,transparent 50%,rgba(24,24,24,.4) 100%)}[part=shadow-top]{background:linear-gradient(0deg,transparent 50%,rgba(24,24,24,.4) 100%)}[part=shadow-bottom]{background:linear-gradient(180deg,transparent 50%,rgba(24,24,24,.4) 100%)}.sd-6-0-0-next-14-icon--top{align-self:flex-start}.sd-6-0-0-next-14-icon--down{align-self:flex-end}`
|
|
193
193
|
];
|
|
194
194
|
__decorateClass([
|
|
195
195
|
query('[part="button-right"] button')
|
|
@@ -237,7 +237,7 @@ __decorateClass([
|
|
|
237
237
|
state()
|
|
238
238
|
], SdScrollable.prototype, "isScrollVerticalEnabled", 2);
|
|
239
239
|
SdScrollable = __decorateClass([
|
|
240
|
-
customElement("sd-6-0-0-next-
|
|
240
|
+
customElement("sd-6-0-0-next-14-scrollable")
|
|
241
241
|
], SdScrollable);
|
|
242
242
|
|
|
243
243
|
export {
|
|
@@ -24,7 +24,7 @@ var SdTab = class extends SolidElement {
|
|
|
24
24
|
constructor() {
|
|
25
25
|
super(...arguments);
|
|
26
26
|
this.attrId = ++id;
|
|
27
|
-
this.componentId = `sd-6-0-0-next-
|
|
27
|
+
this.componentId = `sd-6-0-0-next-14-tab-${this.attrId}`;
|
|
28
28
|
this.hasSlotController = new HasSlotController(this, "left");
|
|
29
29
|
this.localize = new LocalizeController(this);
|
|
30
30
|
this.variant = "default";
|
|
@@ -73,7 +73,7 @@ var SdTab = class extends SolidElement {
|
|
|
73
73
|
)}"></slot><slot class="${cx(this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-primary")}"></slot>${this.variant === "container" ? html`<div part="active-tab-indicator" class="${cx(
|
|
74
74
|
"absolute bottom-0 h-1 bg-accent w-3/4 bottom-0 group-hover:w-[calc(100%-2px)] navigable__current-indicator-height navigable__current-indicator-border-radius"
|
|
75
75
|
)}"></div>` : ""}<div part="hover-bottom-border" class="${cx(
|
|
76
|
-
!this.active && !this.disabled && "absolute bottom-0 left-0 w-full h-0.25 border-b sd-6-0-0-next-
|
|
76
|
+
!this.active && !this.disabled && "absolute bottom-0 left-0 w-full h-0.25 border-b sd-6-0-0-next-14-tab-color-border"
|
|
77
77
|
)}"></div></div></div>`;
|
|
78
78
|
}
|
|
79
79
|
};
|
|
@@ -110,7 +110,7 @@ __decorateClass([
|
|
|
110
110
|
watch(["disabled", "visually-disabled"])
|
|
111
111
|
], SdTab.prototype, "handleDisabledChange", 1);
|
|
112
112
|
SdTab = __decorateClass([
|
|
113
|
-
customElement("sd-6-0-0-next-
|
|
113
|
+
customElement("sd-6-0-0-next-14-tab")
|
|
114
114
|
], SdTab);
|
|
115
115
|
|
|
116
116
|
export {
|
|
@@ -93,7 +93,7 @@ var SdOption = class extends SolidElement {
|
|
|
93
93
|
)}"></span> ${this.checkbox ? html`<span id="control" part="control ${this.selected ? " control--checked" : "control--unchecked"}" class="${cx(
|
|
94
94
|
"relative flex flex-shrink-0 items-center justify-center border rounded-sm h-4 w-4 mr-2",
|
|
95
95
|
this.disabled ? "border-neutral-500" : this.selected ? "bg-accent border-accent" : "bg-white form-control-color-border"
|
|
96
|
-
)}">${this.selected ? html`<sd-6-0-0-next-
|
|
96
|
+
)}">${this.selected ? html`<sd-6-0-0-next-14-icon part="checked-icon" class="text-white w-3 h-3" library="_internal" name="status-check"></sd-6-0-0-next-14-icon>` : ""}</span>` : ""} ${slots["left"] ? html`<slot name="left" part="left" class="inline-flex mr-2"></slot>` : ""}<slot part="label" class="inline-block flex-grow" @slotchange="${this.handleDefaultSlotChange}"></slot>${slots["right"] ? html`<slot name="right" part="right" class="inline-flex ml-2"></slot>` : ""}</div>`;
|
|
97
97
|
}
|
|
98
98
|
};
|
|
99
99
|
/**
|
|
@@ -141,7 +141,7 @@ __decorateClass([
|
|
|
141
141
|
watch("value")
|
|
142
142
|
], SdOption.prototype, "handleValueChange", 1);
|
|
143
143
|
SdOption = __decorateClass([
|
|
144
|
-
customElement("sd-6-0-0-next-
|
|
144
|
+
customElement("sd-6-0-0-next-14-option")
|
|
145
145
|
], SdOption);
|
|
146
146
|
|
|
147
147
|
export {
|
|
@@ -44,7 +44,7 @@ var SdSelect = class extends SolidElement {
|
|
|
44
44
|
constructor() {
|
|
45
45
|
super(...arguments);
|
|
46
46
|
this.formControlController = new FormControlController(this, {
|
|
47
|
-
assumeInteractionOn: ["sd-blur", "sd-6-0-0-next-
|
|
47
|
+
assumeInteractionOn: ["sd-blur", "sd-6-0-0-next-14-input"]
|
|
48
48
|
});
|
|
49
49
|
this.hasSlotController = new HasSlotController(this, "help-text", "label");
|
|
50
50
|
this.localize = new LocalizeController(this);
|
|
@@ -76,11 +76,11 @@ var SdSelect = class extends SolidElement {
|
|
|
76
76
|
this.styleOnValid = false;
|
|
77
77
|
this.hoist = false;
|
|
78
78
|
this.getTag = (option) => {
|
|
79
|
-
return html`<sd-6-0-0-next-
|
|
79
|
+
return html`<sd-6-0-0-next-14-tag class="relative z-10" ?disabled="${this.disabled}" part="tag" exportparts="
|
|
80
80
|
base:tag__base,
|
|
81
81
|
content:tag__content,
|
|
82
82
|
removable-indicator:tag__removable-indicator,
|
|
83
|
-
" size="${this.size === "sm" ? "sm" : "lg"}" removable @keydown="${(event) => this.handleTagKeyDown(event, option)}" @sd-remove="${(event) => this.handleTagRemove(event, option)}">${option.getTextLabel()}</sd-6-0-0-next-
|
|
83
|
+
" size="${this.size === "sm" ? "sm" : "lg"}" removable @keydown="${(event) => this.handleTagKeyDown(event, option)}" @sd-remove="${(event) => this.handleTagRemove(event, option)}">${option.getTextLabel()}</sd-6-0-0-next-14-tag>`;
|
|
84
84
|
};
|
|
85
85
|
this.handleDocumentFocusIn = (event) => {
|
|
86
86
|
const path = event.composedPath();
|
|
@@ -91,7 +91,7 @@ var SdSelect = class extends SolidElement {
|
|
|
91
91
|
this.handleDocumentKeyDown = (event) => {
|
|
92
92
|
const target = event.target;
|
|
93
93
|
const isClearButton = target.closest(".select__clear") !== null;
|
|
94
|
-
const isIconButton = target.closest("sd-6-0-0-next-
|
|
94
|
+
const isIconButton = target.closest("sd-6-0-0-next-14-icon-button") !== null;
|
|
95
95
|
if (isClearButton || isIconButton) {
|
|
96
96
|
return;
|
|
97
97
|
}
|
|
@@ -226,8 +226,8 @@ var SdSelect = class extends SolidElement {
|
|
|
226
226
|
event.preventDefault();
|
|
227
227
|
event.stopPropagation();
|
|
228
228
|
const tagParent = (_a = event.currentTarget) == null ? void 0 : _a.parentElement;
|
|
229
|
-
const previousTag = (_b = tagParent == null ? void 0 : tagParent.previousElementSibling) == null ? void 0 : _b.querySelector("sd-6-0-0-next-
|
|
230
|
-
const nextTag = (_c = tagParent == null ? void 0 : tagParent.nextElementSibling) == null ? void 0 : _c.querySelector("sd-6-0-0-next-
|
|
229
|
+
const previousTag = (_b = tagParent == null ? void 0 : tagParent.previousElementSibling) == null ? void 0 : _b.querySelector("sd-6-0-0-next-14-tag");
|
|
230
|
+
const nextTag = (_c = tagParent == null ? void 0 : tagParent.nextElementSibling) == null ? void 0 : _c.querySelector("sd-6-0-0-next-14-tag");
|
|
231
231
|
this.handleTagRemove(new CustomEvent("sd-remove"), option);
|
|
232
232
|
this.updateComplete.then(() => {
|
|
233
233
|
if (nextTag) {
|
|
@@ -247,7 +247,7 @@ var SdSelect = class extends SolidElement {
|
|
|
247
247
|
this.handleTagRemove(new CustomEvent("sd-remove"), this.selectedOptions[this.selectedOptions.length - 1]);
|
|
248
248
|
this.updateComplete.then(() => {
|
|
249
249
|
var _a;
|
|
250
|
-
const tags = (_a = this.shadowRoot) == null ? void 0 : _a.querySelectorAll("sd-6-0-0-next-
|
|
250
|
+
const tags = (_a = this.shadowRoot) == null ? void 0 : _a.querySelectorAll("sd-6-0-0-next-14-tag");
|
|
251
251
|
if (tags && tags.length > 0) {
|
|
252
252
|
tags == null ? void 0 : tags[(tags == null ? void 0 : tags.length) - 1].focus();
|
|
253
253
|
} else {
|
|
@@ -293,7 +293,7 @@ var SdSelect = class extends SolidElement {
|
|
|
293
293
|
}
|
|
294
294
|
handleOptionClick(event) {
|
|
295
295
|
const target = event.target;
|
|
296
|
-
const option = target.closest("sd-6-0-0-next-
|
|
296
|
+
const option = target.closest("sd-6-0-0-next-14-option");
|
|
297
297
|
const oldValue = this.value;
|
|
298
298
|
if (option && !option.disabled) {
|
|
299
299
|
if (this.multiple) {
|
|
@@ -318,7 +318,7 @@ var SdSelect = class extends SolidElement {
|
|
|
318
318
|
const allOptions = this.getAllOptions();
|
|
319
319
|
const value = Array.isArray(this.value) ? this.value : [this.value];
|
|
320
320
|
const values = [];
|
|
321
|
-
if (customElements.get("sd-6-0-0-next-
|
|
321
|
+
if (customElements.get("sd-6-0-0-next-14-option")) {
|
|
322
322
|
allOptions.forEach((option) => {
|
|
323
323
|
if (this.multiple) {
|
|
324
324
|
option.checkbox = true;
|
|
@@ -327,7 +327,7 @@ var SdSelect = class extends SolidElement {
|
|
|
327
327
|
});
|
|
328
328
|
this.setSelectedOptions(allOptions.filter((el) => value.includes(el.value)));
|
|
329
329
|
} else {
|
|
330
|
-
customElements.whenDefined("sd-6-0-0-next-
|
|
330
|
+
customElements.whenDefined("sd-6-0-0-next-14-option").then(() => this.handleDefaultSlotChange());
|
|
331
331
|
}
|
|
332
332
|
}
|
|
333
333
|
handleTagRemove(event, option) {
|
|
@@ -344,13 +344,13 @@ var SdSelect = class extends SolidElement {
|
|
|
344
344
|
});
|
|
345
345
|
}
|
|
346
346
|
}
|
|
347
|
-
// Gets an array of all <sd-6-0-0-next-
|
|
347
|
+
// Gets an array of all <sd-6-0-0-next-14-option> elements
|
|
348
348
|
getAllOptions() {
|
|
349
|
-
return [...this.querySelectorAll("sd-6-0-0-next-
|
|
349
|
+
return [...this.querySelectorAll("sd-6-0-0-next-14-option")];
|
|
350
350
|
}
|
|
351
|
-
// Gets the first <sd-6-0-0-next-
|
|
351
|
+
// Gets the first <sd-6-0-0-next-14-option> element
|
|
352
352
|
getFirstOption() {
|
|
353
|
-
return this.querySelector("sd-6-0-0-next-
|
|
353
|
+
return this.querySelector("sd-6-0-0-next-14-option");
|
|
354
354
|
}
|
|
355
355
|
// Sets the current option, which is the option the user is currently interacting with (e.g. via keyboard). Only one
|
|
356
356
|
// option may be "current" at a time.
|
|
@@ -449,11 +449,11 @@ var SdSelect = class extends SolidElement {
|
|
|
449
449
|
});
|
|
450
450
|
} else {
|
|
451
451
|
return [
|
|
452
|
-
html`<sd-6-0-0-next-
|
|
452
|
+
html`<sd-6-0-0-next-14-tag class="z-10" ?disabled="${this.disabled}" part="tag" exportparts="
|
|
453
453
|
base:tag__base,
|
|
454
454
|
content:tag__content,
|
|
455
455
|
removable-indicator:tag__removable-indicator,
|
|
456
|
-
" 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-6-0-0-next-
|
|
456
|
+
" 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-6-0-0-next-14-tag>`
|
|
457
457
|
];
|
|
458
458
|
}
|
|
459
459
|
}
|
|
@@ -462,7 +462,7 @@ var SdSelect = class extends SolidElement {
|
|
|
462
462
|
this.formControlController.emitInvalidEvent(event);
|
|
463
463
|
this.invalidMessage.textContent = event.target.validationMessage;
|
|
464
464
|
}
|
|
465
|
-
/** Receives incoming event detail from sd-6-0-0-next-
|
|
465
|
+
/** Receives incoming event detail from sd-6-0-0-next-14-popup and updates local state for conditional styling. */
|
|
466
466
|
handleCurrentPlacement(e) {
|
|
467
467
|
const incomingPlacement = e.detail;
|
|
468
468
|
if (incomingPlacement) {
|
|
@@ -471,7 +471,7 @@ var SdSelect = class extends SolidElement {
|
|
|
471
471
|
}
|
|
472
472
|
handleUseTagsChange() {
|
|
473
473
|
const allOptions = this.getAllOptions();
|
|
474
|
-
if (customElements.get("sd-6-0-0-next-
|
|
474
|
+
if (customElements.get("sd-6-0-0-next-14-option")) {
|
|
475
475
|
allOptions.forEach((option) => {
|
|
476
476
|
option.checkbox = this.multiple;
|
|
477
477
|
});
|
|
@@ -610,7 +610,7 @@ var SdSelect = class extends SolidElement {
|
|
|
610
610
|
default: "form-control-color-border"
|
|
611
611
|
}[selectState],
|
|
612
612
|
this.open && (this.currentPlacement === "bottom" ? "rounded-bl-none rounded-br-none" : "rounded-tl-none rounded-tr-none")
|
|
613
|
-
)}"></div><sd-6-0-0-next-
|
|
613
|
+
)}"></div><sd-6-0-0-next-14-popup @sd-current-placement="${this.handleCurrentPlacement}" class="${cx(
|
|
614
614
|
"inline-flex relative w-full",
|
|
615
615
|
this.currentPlacement === "bottom" ? "origin-top" : "origin-bottom"
|
|
616
616
|
)}" placement="${this.placement}" strategy="${this.hoist ? "fixed" : "absolute"}" flip sync="width" auto-size="vertical" auto-size-padding="10" exportparts="
|
|
@@ -634,12 +634,12 @@ var SdSelect = class extends SolidElement {
|
|
|
634
634
|
"select__clear flex justify-center",
|
|
635
635
|
iconMarginLeft,
|
|
636
636
|
this.value.length > 0 ? "visible" : "invisible"
|
|
637
|
-
)}" type="button" aria-label="${this.localize.term("clearEntry")}" @mousedown="${this.handleClearMouseDown}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-6-0-0-next-
|
|
637
|
+
)}" type="button" aria-label="${this.localize.term("clearEntry")}" @mousedown="${this.handleClearMouseDown}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-6-0-0-next-14-icon class="${cx("text-neutral-700 z-10", iconSize)}" library="_internal" name="closing-round"></sd-6-0-0-next-14-icon></slot></button>` : ""} ${this.showInvalidStyle ? html`<sd-6-0-0-next-14-icon part="invalid-icon" class="${cx(iconMarginLeft, iconSize, "text-error")}" library="_internal" name="risk"></sd-6-0-0-next-14-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-6-0-0-next-14-icon part="valid-icon" class="${cx("flex-shrink-0 text-success", iconMarginLeft, iconSize)}" library="_internal" name="confirm-circle"></sd-6-0-0-next-14-icon>` : ""}<slot name="expand-icon" part="expand-icon" class="${cx(
|
|
638
638
|
"inline-flex ml-2 items-center transition-transform duration-medium ease-in-out",
|
|
639
639
|
this.open ? "rotate-180" : "rotate-0",
|
|
640
640
|
this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-primary",
|
|
641
641
|
iconSize
|
|
642
|
-
)}"><sd-6-0-0-next-
|
|
642
|
+
)}"><sd-6-0-0-next-14-icon name="chevron-down" part="chevron" library="_internal" color="currentColor"></sd-6-0-0-next-14-icon></slot></div><button part="combobox" class="${cx(
|
|
643
643
|
"relative w-full px-4 flex flex-row items-center rounded-default focus-visible:outline-none",
|
|
644
644
|
cursorStyles,
|
|
645
645
|
this.open && "shadow transition-shadow duration-medium ease-in-out",
|
|
@@ -652,7 +652,7 @@ var SdSelect = class extends SolidElement {
|
|
|
652
652
|
"bg-white px-2 py-3 relative border-primary overflow-y-auto",
|
|
653
653
|
this.open && "shadow transition-shadow duration-medium ease-in-out",
|
|
654
654
|
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"
|
|
655
|
-
)}" tabindex="-1" @mouseup="${this.handleOptionClick}" @slotchange="${this.handleDefaultSlotChange}"><slot></slot></div></sd-6-0-0-next-
|
|
655
|
+
)}" tabindex="-1" @mouseup="${this.handleOptionClick}" @slotchange="${this.handleDefaultSlotChange}"><slot></slot></div></sd-6-0-0-next-14-popup></div><div class="text-sm text-neutral-700 mt-1" 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()}`;
|
|
656
656
|
}
|
|
657
657
|
};
|
|
658
658
|
/**
|
|
@@ -661,13 +661,13 @@ var SdSelect = class extends SolidElement {
|
|
|
661
661
|
SdSelect.styles = [
|
|
662
662
|
...SolidElement.styles,
|
|
663
663
|
css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
|
|
664
|
-
:host{position:relative;display:block;width:auto}:host([required]) #label::after{content:' *'}:host([disabled]) ::-moz-placeholder,:host([visually-disabled]) ::-moz-placeholder{color:rgba(var(--sd-color-text-neutral-500))}:host([disabled]) ::placeholder,:host([visually-disabled]) ::placeholder{color:rgba(var(--sd-color-text-neutral-500))}[part=listbox]{max-height:var(--auto-size-available-height,auto)}.input-container,[part=combobox]{grid-column:1/1;grid-row:1/1}sd-6-0-0-next-
|
|
664
|
+
:host{position:relative;display:block;width:auto}:host([required]) #label::after{content:' *'}:host([disabled]) ::-moz-placeholder,:host([visually-disabled]) ::-moz-placeholder{color:rgba(var(--sd-color-text-neutral-500))}:host([disabled]) ::placeholder,:host([visually-disabled]) ::placeholder{color:rgba(var(--sd-color-text-neutral-500))}[part=listbox]{max-height:var(--auto-size-available-height,auto)}.input-container,[part=combobox]{grid-column:1/1;grid-row:1/1}sd-6-0-0-next-14-popup::part(popup){z-index:var(--sd-z-index-dropdown,900)}sd-6-0-0-next-14-tag::part(base){border-radius:var(--sd-radius);padding-inline:var(--sd-spacing-1)}sd-6-0-0-next-14-tag::part(content){display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:var(--tag-max-width,15ch)}sd-6-0-0-next-14-tag[size=lg]::part(base){padding-inline:var(--sd-spacing-2)}sd-6-0-0-next-14-tag[disabled=false]::part(base):hover{background-color:rgba(var(--sd-color-background-primary-100))}`
|
|
665
665
|
];
|
|
666
666
|
__decorateClass([
|
|
667
|
-
queryAssignedElements({ selector: "sd-6-0-0-next-
|
|
667
|
+
queryAssignedElements({ selector: "sd-6-0-0-next-14-option" })
|
|
668
668
|
], SdSelect.prototype, "_optionsInDefaultSlot", 2);
|
|
669
669
|
__decorateClass([
|
|
670
|
-
query("sd-6-0-0-next-
|
|
670
|
+
query("sd-6-0-0-next-14-popup")
|
|
671
671
|
], SdSelect.prototype, "popup", 2);
|
|
672
672
|
__decorateClass([
|
|
673
673
|
query('[part="combobox"]')
|
|
@@ -789,7 +789,7 @@ __decorateClass([
|
|
|
789
789
|
watch("value", { waitUntilFirstUpdate: true })
|
|
790
790
|
], SdSelect.prototype, "handleValueChange", 1);
|
|
791
791
|
SdSelect = __decorateClass([
|
|
792
|
-
customElement("sd-6-0-0-next-
|
|
792
|
+
customElement("sd-6-0-0-next-14-select")
|
|
793
793
|
], SdSelect);
|
|
794
794
|
setDefaultAnimation("select.show", {
|
|
795
795
|
keyframes: [{ opacity: 0 }, { opacity: 1 }],
|
|
@@ -18,7 +18,7 @@ var SdTabPanel = class extends SolidElement {
|
|
|
18
18
|
constructor() {
|
|
19
19
|
super(...arguments);
|
|
20
20
|
this.attrId = ++id;
|
|
21
|
-
this.componentId = `sd-6-0-0-next-
|
|
21
|
+
this.componentId = `sd-6-0-0-next-14-tab-panel-${this.attrId}`;
|
|
22
22
|
this.name = "";
|
|
23
23
|
this.active = false;
|
|
24
24
|
}
|
|
@@ -49,7 +49,7 @@ __decorateClass([
|
|
|
49
49
|
watch("active")
|
|
50
50
|
], SdTabPanel.prototype, "handleActiveChange", 1);
|
|
51
51
|
SdTabPanel = __decorateClass([
|
|
52
|
-
customElement("sd-6-0-0-next-
|
|
52
|
+
customElement("sd-6-0-0-next-14-tab-panel")
|
|
53
53
|
], SdTabPanel);
|
|
54
54
|
|
|
55
55
|
export {
|
|
@@ -53,7 +53,7 @@ SdThemeListener.styles = [
|
|
|
53
53
|
:host{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}`
|
|
54
54
|
];
|
|
55
55
|
SdThemeListener = __decorateClass([
|
|
56
|
-
customElement("sd-6-0-0-next-
|
|
56
|
+
customElement("sd-6-0-0-next-14-theme-listener")
|
|
57
57
|
], SdThemeListener);
|
|
58
58
|
|
|
59
59
|
export {
|
|
@@ -42,16 +42,16 @@ var SdAccordionGroup = class extends SolidElement {
|
|
|
42
42
|
SdAccordionGroup.styles = [
|
|
43
43
|
...SolidElement.styles,
|
|
44
44
|
css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
|
|
45
|
-
:host{display:block}::slotted(sd-6-0-0-next-
|
|
45
|
+
:host{display:block}::slotted(sd-6-0-0-next-14-accordion:not(:first-of-type)){margin-top:calc(-1 * var(--sd-accordion-border-width))!important}`
|
|
46
46
|
];
|
|
47
47
|
__decorateClass([
|
|
48
|
-
queryAssignedElements({ selector: "sd-6-0-0-next-
|
|
48
|
+
queryAssignedElements({ selector: "sd-6-0-0-next-14-accordion" })
|
|
49
49
|
], SdAccordionGroup.prototype, "_accordionsInDefaultSlot", 2);
|
|
50
50
|
__decorateClass([
|
|
51
51
|
property({ attribute: "close-others", type: Boolean, reflect: true })
|
|
52
52
|
], SdAccordionGroup.prototype, "closeOthers", 2);
|
|
53
53
|
SdAccordionGroup = __decorateClass([
|
|
54
|
-
customElement("sd-6-0-0-next-
|
|
54
|
+
customElement("sd-6-0-0-next-14-accordion-group")
|
|
55
55
|
], SdAccordionGroup);
|
|
56
56
|
|
|
57
57
|
export {
|
|
@@ -88,7 +88,7 @@ var SdStep = class extends SolidElement {
|
|
|
88
88
|
this.orientation === "horizontal" && !this.horizontalInline ? this.size === "lg" ? "translateLg" : "translateSm" : this.size === "lg" ? "mt-1" : "mt-3"
|
|
89
89
|
);
|
|
90
90
|
const circleButtonClasses = cx(
|
|
91
|
-
"border sd-6-0-0-next-
|
|
91
|
+
"border sd-6-0-0-next-14-step__circle-border-width rounded-full aspect-square circle flex items-center justify-center shrink-0 font-bold select-none",
|
|
92
92
|
this.disabled ? "focus-visible:outline-none cursor-not-allowed" : !this.notInteractive && !this.waiting ? "focus-visible:focus-outline hover:cursor-pointer" : "",
|
|
93
93
|
this.notInteractive ? this.size === "lg" ? "not-interactive-lg" : "w-12" : this.size === "lg" ? "w-12" : "w-8",
|
|
94
94
|
this.disabled && "border-neutral-500 text-neutral-500",
|
|
@@ -105,7 +105,7 @@ var SdStep = class extends SolidElement {
|
|
|
105
105
|
"text-lg",
|
|
106
106
|
!this.disabled && !this.current && !this.notInteractive && !this.waiting && "text-primary hover:text-primary-500 hover:fill-primary-500",
|
|
107
107
|
this.notInteractive && "text-primary"
|
|
108
|
-
)}">${!this.disabled && !this.current && !this.notInteractive && !this.waiting ? html`<sd-6-0-0-next-
|
|
108
|
+
)}">${!this.disabled && !this.current && !this.notInteractive && !this.waiting ? html`<sd-6-0-0-next-14-icon name="status-check" library="_internal" class="${cx(this.size === "sm" && "text-sm")}"></sd-6-0-0-next-14-icon>` : html`${this.index}`}</slot></${tag}>${isHorizontalInline ? html`<div class="${cx(!this.noTail && "flex-1", "flex flex-col gap-1")}"><div class="${cx(
|
|
109
109
|
"flex w-full",
|
|
110
110
|
hasLabel && "gap-2",
|
|
111
111
|
this.size === "sm" && !hasDescription ? "mt-1" : "mt-3"
|
|
@@ -145,7 +145,7 @@ var SdStep = class extends SolidElement {
|
|
|
145
145
|
SdStep.styles = [
|
|
146
146
|
...SolidElement.styles,
|
|
147
147
|
css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
|
|
148
|
-
:host{flex:1}:host([orientation=horizontal]) [part=tail]{border-top-width:var(--sd-step__tail-border-width)}:host([orientation=vertical]) [part=tail]{border-left-width:var(--sd-step__tail-border-width)}:host([no-tail]){flex-grow:0}:host [name=circle-content]
|
|
148
|
+
:host{flex:1}:host([orientation=horizontal]) [part=tail]{border-top-width:var(--sd-step__tail-border-width)}:host([orientation=vertical]) [part=tail]{border-left-width:var(--sd-step__tail-border-width)}:host([no-tail]){flex-grow:0}:host(:not([current])) slot[name=circle-content]{color:rgba(var(--sd-color-text-neutral-700))}slot[name=circle-content] sd-6-0-0-next-14-icon,slot[name=circle-content]::slotted(sd-6-0-0-next-14-icon){color:rgba(var(--sd-color-icon-fill-primary))}:host([horizontal-inline]):has([part=description]){min-width:calc(var(--sd-spacing-1) * 0);flex:1}.translateLg{transform:translateX(3.438rem)}.translateSm{transform:translateX(4rem)}.not-interactive-lg{width:4.5rem}`
|
|
149
149
|
];
|
|
150
150
|
__decorateClass([
|
|
151
151
|
property({ type: String, reflect: true })
|
|
@@ -196,7 +196,7 @@ __decorateClass([
|
|
|
196
196
|
watch("notInteractive")
|
|
197
197
|
], SdStep.prototype, "handleInteractivityChange", 1);
|
|
198
198
|
SdStep = __decorateClass([
|
|
199
|
-
customElement("sd-6-0-0-next-
|
|
199
|
+
customElement("sd-6-0-0-next-14-step")
|
|
200
200
|
], SdStep);
|
|
201
201
|
|
|
202
202
|
export {
|
|
@@ -118,7 +118,7 @@ var SdCheckbox = class extends SolidElement {
|
|
|
118
118
|
render() {
|
|
119
119
|
const checkboxState = this.disabled && this.indeterminate ? "disabledIndeterminate" : this.disabled && this.checked ? "disabledChecked" : this.disabled ? "disabled" : this.visuallyDisabled ? "visuallyDisabled" : this.showInvalidStyle && this.indeterminate ? "invalidIndeterminate" : this.showInvalidStyle ? "invalid" : this.checked || this.indeterminate ? "filled" : "default";
|
|
120
120
|
return html`<label part="base" class="${cx(
|
|
121
|
-
"sd-6-0-0-next-
|
|
121
|
+
"sd-6-0-0-next-14-checkbox group flex items-start text-base leading-normal text-black cursor-pointer",
|
|
122
122
|
(this.disabled || this.visuallyDisabled) && "hover:cursor-not-allowed",
|
|
123
123
|
{
|
|
124
124
|
/* sizes, fonts */
|
|
@@ -127,7 +127,7 @@ var SdCheckbox = class extends SolidElement {
|
|
|
127
127
|
lg: "text-base"
|
|
128
128
|
}[this.size]
|
|
129
129
|
)}"><input class="peer absolute opacity-0 p-0 m-0 pointer-events-none" type="checkbox" title="${this.title}" name="${this.name}" value="${ifDefined(this.value)}" .indeterminate="${live(this.indeterminate)}" .checked="${live(this.checked)}" .disabled="${this.disabled}" .required="${this.required}" aria-checked="${this.indeterminate ? "mixed" : this.checked}" aria-describedby="invalid-message" aria-invalid="${this.showInvalidStyle}" aria-disabled="${this.disabled || this.visuallyDisabled ? "true" : "false"}" @click="${this.handleClick}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @blur="${this.handleBlur}" @focus="${this.handleFocus}"> <span id="control" part="control ${this.checked ? " control--checked" : "control--unchecked"} ${this.indeterminate ? " control--indeterminate" : ""}" class="${cx(
|
|
130
|
-
"relative flex flex-shrink-0 items-center justify-center border sd-6-0-0-next-
|
|
130
|
+
"relative flex flex-shrink-0 items-center justify-center border sd-6-0-0-next-14-checkbox-border-width rounded-sm h-4 w-4",
|
|
131
131
|
"transition-colors ease-in-out duration-medium group-hover:duration-fast",
|
|
132
132
|
"peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-primary",
|
|
133
133
|
{
|
|
@@ -160,7 +160,7 @@ var SdCheckbox = class extends SolidElement {
|
|
|
160
160
|
filled: "bg-accent group-hover:bg-accent-550",
|
|
161
161
|
default: "hover:bg-neutral-200 group-hover:bg-neutral-200 bg-white"
|
|
162
162
|
}[checkboxState]
|
|
163
|
-
)}"></div></div>${this.checked ? html`<sd-6-0-0-next-
|
|
163
|
+
)}"></div></div>${this.checked ? html`<sd-6-0-0-next-14-icon part="checked-icon" class="text-white w-3 h-3" library="_internal" name="status-check"></sd-6-0-0-next-14-icon>` : ""} ${!this.checked && this.indeterminate ? html`<sd-6-0-0-next-14-icon part="indeterminate-icon" class="text-white w-3 h-3" library="_internal" name="status-minus"></sd-6-0-0-next-14-icon>` : ""} </span><span part="label" id="label" class="${cx(
|
|
164
164
|
"select-none inline-block ml-2",
|
|
165
165
|
this.disabled || this.visuallyDisabled ? "text-neutral-500" : this.showInvalidStyle ? "text-error" : "text-black"
|
|
166
166
|
)}"><slot></slot></span></label> ${this.formControlController.renderInvalidMessage()}`;
|
|
@@ -223,7 +223,7 @@ __decorateClass([
|
|
|
223
223
|
watch(["checked", "indeterminate"], { waitUntilFirstUpdate: true })
|
|
224
224
|
], SdCheckbox.prototype, "handleStateChange", 1);
|
|
225
225
|
SdCheckbox = __decorateClass([
|
|
226
|
-
customElement("sd-6-0-0-next-
|
|
226
|
+
customElement("sd-6-0-0-next-14-checkbox")
|
|
227
227
|
], SdCheckbox);
|
|
228
228
|
|
|
229
229
|
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-6-0-0-next-
|
|
4
|
-
var isOptgroup = (item) => item.tagName.toLocaleLowerCase() === "sd-6-0-0-next-
|
|
3
|
+
var getOptionOrNestedOptions = (item) => item.tagName.toLocaleLowerCase() === "sd-6-0-0-next-14-option" ? item : Array.from(item.querySelectorAll(":scope > sd-6-0-0-next-14-option"));
|
|
4
|
+
var isOptgroup = (item) => item.tagName.toLocaleLowerCase() === "sd-6-0-0-next-14-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();
|
|
@@ -209,7 +209,7 @@ __decorateClass([
|
|
|
209
209
|
watch("playbackRate")
|
|
210
210
|
], SdAnimation.prototype, "handlePlaybackRateChange", 1);
|
|
211
211
|
SdAnimation = __decorateClass([
|
|
212
|
-
customElement("sd-6-0-0-next-
|
|
212
|
+
customElement("sd-6-0-0-next-14-animation")
|
|
213
213
|
], SdAnimation);
|
|
214
214
|
|
|
215
215
|
export {
|
|
@@ -22,7 +22,7 @@ var SdBreadcrumb = class extends SolidElement {
|
|
|
22
22
|
this.isTruncated = false;
|
|
23
23
|
}
|
|
24
24
|
get items() {
|
|
25
|
-
return this.querySelectorAll("sd-6-0-0-next-
|
|
25
|
+
return this.querySelectorAll("sd-6-0-0-next-14-breadcrumb-item");
|
|
26
26
|
}
|
|
27
27
|
cacheItemPositions() {
|
|
28
28
|
this.items.forEach((item) => {
|
|
@@ -67,12 +67,12 @@ var SdBreadcrumb = class extends SolidElement {
|
|
|
67
67
|
}
|
|
68
68
|
handleMobileChevron() {
|
|
69
69
|
var _a, _b, _c;
|
|
70
|
-
const icon = document.createElement("sd-6-0-0-next-
|
|
70
|
+
const icon = document.createElement("sd-6-0-0-next-14-icon");
|
|
71
71
|
icon.setAttribute("slot", "icon-left");
|
|
72
72
|
icon.setAttribute("library", "_internal");
|
|
73
73
|
icon.setAttribute("name", "chevron-left");
|
|
74
74
|
icon.setAttribute("class", "text-base me-1 lg:hidden");
|
|
75
|
-
(_c = (_b = (_a = Array.from(this.items).at(-2)) == null ? void 0 : _a.shadowRoot) == null ? void 0 : _b.querySelector("sd-6-0-0-next-
|
|
75
|
+
(_c = (_b = (_a = Array.from(this.items).at(-2)) == null ? void 0 : _a.shadowRoot) == null ? void 0 : _b.querySelector("sd-6-0-0-next-14-link")) == null ? void 0 : _c.appendChild(icon);
|
|
76
76
|
}
|
|
77
77
|
handleSlotChange() {
|
|
78
78
|
this.handleMobileChevron();
|
|
@@ -87,13 +87,13 @@ var SdBreadcrumb = class extends SolidElement {
|
|
|
87
87
|
this.resizeObserver.unobserve(this);
|
|
88
88
|
}
|
|
89
89
|
render() {
|
|
90
|
-
return html`<nav part="base" class="flex items-center pb-1" aria-label="${this.label}"><sd-6-0-0-next-
|
|
90
|
+
return html`<nav part="base" class="flex items-center pb-1" aria-label="${this.label}"><sd-6-0-0-next-14-dropdown part="truncated" class="${cx(!this.isTruncated && "absolute opacity-0 pointer-events-none")}"><button slot="trigger" tabindex="${this.isTruncated ? "0" : "-1"}" aria-label="${this.localize.term("truncatedBreadcrumbs")}" aria-expanded="false" aria-haspopup="true" class="flex sd-interactive">[...]</button><ol part="truncated-dropdown" class="flex flex-col gap-4 px-2 py-3 min-w-40"></ol></sd-6-0-0-next-14-dropdown><ol part="list" class="flex items-center"><slot @slotchange="${this.handleSlotChange}"></slot></ol></nav>`;
|
|
91
91
|
}
|
|
92
92
|
};
|
|
93
93
|
SdBreadcrumb.styles = [
|
|
94
94
|
...SolidElement.styles,
|
|
95
95
|
css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
|
|
96
|
-
:host{position:relative;display:block}::slotted(sd-6-0-0-next-
|
|
96
|
+
:host{position:relative;display:block}::slotted(sd-6-0-0-next-14-breadcrumb-item:not(:last-of-type))::after,sd-6-0-0-next-14-dropdown::after{margin-inline:var(--sd-spacing-2);display:none;height:var(--sd-spacing-1);width:var(--sd-spacing-1);border-radius:var(--sd-radius-full);background-color:rgba(var(--sd-breadcrumb__separator-color,rgba(var(--sd-color-neutral-400))));--tw-content:'';content:var(--tw-content)}@media (width >= 64rem){::slotted(sd-6-0-0-next-14-breadcrumb-item:not(:last-of-type))::after,sd-6-0-0-next-14-dropdown::after{display:inline-block}}::slotted(sd-6-0-0-next-14-breadcrumb-item:nth-last-child(2)){display:flex}@media (width >= 64rem){::slotted(sd-6-0-0-next-14-breadcrumb-item:nth-last-child(2))::after{background-color:rgba(var(--sd-color-background-accent))}}::slotted(sd-6-0-0-next-14-breadcrumb-item),sd-6-0-0-next-14-dropdown{display:none;align-items:center;font-size:var(--sd-text-sm);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)))}@media (width >= 64rem){::slotted(sd-6-0-0-next-14-breadcrumb-item),sd-6-0-0-next-14-dropdown{display:flex}}@property --tw-content{syntax:"*";inherits:false;initial-value:""}`
|
|
97
97
|
];
|
|
98
98
|
__decorateClass([
|
|
99
99
|
query('[part="base"]')
|
|
@@ -117,7 +117,7 @@ __decorateClass([
|
|
|
117
117
|
state()
|
|
118
118
|
], SdBreadcrumb.prototype, "isTruncated", 2);
|
|
119
119
|
SdBreadcrumb = __decorateClass([
|
|
120
|
-
customElement("sd-6-0-0-next-
|
|
120
|
+
customElement("sd-6-0-0-next-14-breadcrumb")
|
|
121
121
|
], SdBreadcrumb);
|
|
122
122
|
|
|
123
123
|
export {
|
|
@@ -300,19 +300,19 @@ var SdAudio = class extends SolidElement {
|
|
|
300
300
|
)}" part="audio-controls"><button class="${cx(
|
|
301
301
|
"playback-speed justify-self-start text-base font-bold hover:cursor-pointer sd-interactive",
|
|
302
302
|
this.inverted && "sd-interactive--inverted"
|
|
303
|
-
)}" aria-label="${this.localize.term("playbackSpeed")} (${this.speed}x)" @click="${this.togglePlaybackSpeed}" @keydown="${this.togglePlaybackSpeedKeydown}" part="playback-speed">${this.speed}x</button><sd-6-0-0-next-
|
|
303
|
+
)}" aria-label="${this.localize.term("playbackSpeed")} (${this.speed}x)" @click="${this.togglePlaybackSpeed}" @keydown="${this.togglePlaybackSpeedKeydown}" part="playback-speed">${this.speed}x</button><sd-6-0-0-next-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="mb-4">${this.isPlaying ? html`<slot name="pause-icon"><sd-6-0-0-next-14-icon class="text-xl" name="pause" library="_internal"></sd-6-0-0-next-14-icon></slot>` : html`<slot name="play-icon"><sd-6-0-0-next-14-icon class="text-xl" name="start" library="_internal"></sd-6-0-0-next-14-icon></slot>`}</sd-6-0-0-next-14-button><div class="flex items-center gap-6 justify-self-end">${this.hasSlotController.test("transcript") ? html`<button class="${cx("w-6 h-6 hover:cursor-pointer sd-interactive", this.inverted && "sd-interactive--inverted")}" aria-label="${this.isTranscriptOpen ? this.localize.term("transcriptIsOpen") : this.localize.term("openTranscript")}" @click="${this.showTranscript}" @keydown="${this.showTranscriptKeydown}" part="transcript"><sd-6-0-0-next-14-icon class="w-6 h-6" name="transcript" library="_internal"></sd-6-0-0-next-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-6-0-0-next-14-icon class="w-6 h-6" name="${this.isMuted ? "mute" : "volume"}" library="_internal"></sd-6-0-0-next-14-icon></button></div></div>`;
|
|
304
304
|
const renderTimestamps = html`<div class="${cx(
|
|
305
305
|
"w-full flex justify-between",
|
|
306
306
|
this.reversedLayout ? "mb-0.5" : "mt-0.5",
|
|
307
307
|
this.animated && this.reversedLayout && "absolute bottom-0 left-0 !mb-4"
|
|
308
|
-
)}" part="timestamps"><div class="${cx("current-time text-sm", this.inverted ? "text-primary-400" : "sd-6-0-0-next-
|
|
309
|
-
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 -mb-2"></canvas>` : null} ${!this.hideTimestamps && this.animated && this.reversedLayout ? renderTimestamps : null}<sd-6-0-0-next-
|
|
308
|
+
)}" part="timestamps"><div class="${cx("current-time text-sm", this.inverted ? "text-primary-400" : "sd-6-0-0-next-14-audio__timestamp-color-text")}">${this.currentTime}</div><div class="${cx("current-time text-sm", this.inverted ? "text-primary-400" : "sd-6-0-0-next-14-audio__timestamp-color-text")}">${this.duration}</div></div>`;
|
|
309
|
+
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 -mb-2"></canvas>` : null} ${!this.hideTimestamps && this.animated && this.reversedLayout ? renderTimestamps : null}<sd-6-0-0-next-14-range part="progress-slider" tooltip="hidden" min="0" max="100" step="0.001" label="${this.localize.term("seekBar")}" @mousedown="${this.handleThumbGrab}" @touchstart="${this.handleThumbGrab}" @mouseup="${this.handleThumbRelease}" @touchend="${this.handleThumbRelease}" @sd-6-0-0-next-14-input="${this.handleAudioProgress}" @keydown="${this.handleAudioProgressKeydown}"></sd-6-0-0-next-14-range></div>${this.hasSlotController.test("transcript") ? html`<sd-6-0-0-next-14-drawer><slot name="transcript"></slot></sd-6-0-0-next-14-drawer>` : null} ${!this.hideTimestamps && (!this.animated || !this.reversedLayout) ? renderTimestamps : null}</div><sd-6-0-0-next-14-theme-listener></sd-6-0-0-next-14-theme-listener>`;
|
|
310
310
|
}
|
|
311
311
|
};
|
|
312
312
|
SdAudio.styles = [
|
|
313
313
|
...SolidElement.styles,
|
|
314
314
|
css`/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
|
|
315
|
-
sd-6-0-0-next-
|
|
315
|
+
sd-6-0-0-next-14-button::part(base){display:flex;height:var(--sd-spacing-12);width:var(--sd-spacing-12);align-items:center;justify-content:center;border-radius:var(--sd-radius-full)}sd-6-0-0-next-14-button::part(motion-wrapper){border-radius:var(--sd-radius-full)}sd-6-0-0-next-14-button::part(label){display:flex;flex-grow:0;align-items:center}sd-6-0-0-next-14-range::part(form-control-label){display:none}:host([inverted]) sd-6-0-0-next-14-range::part(thumb){outline-color:var(--color-white,#fff);background-color:rgba(var(--sd-color-border-white,rgba(var(--sd-color-white))))}:host([animated]) sd-6-0-0-next-14-range::part(track){background-color:transparent}:host([inverted]:not([animated])) sd-6-0-0-next-14-range::part(track){background-color:rgba(var(--sd-color-border-primary-400,rgba(var(--sd-color-primary-400))))}:host([inverted]:not([animated])) sd-6-0-0-next-14-range::part(active-track){background-color:rgba(var(--sd-color-border-white,rgba(var(--sd-color-white))))}`
|
|
316
316
|
];
|
|
317
317
|
__decorateClass([
|
|
318
318
|
property({ type: Boolean, reflect: true, attribute: "reversed-layout" })
|
|
@@ -354,13 +354,13 @@ __decorateClass([
|
|
|
354
354
|
query('[part="audio-player"]')
|
|
355
355
|
], SdAudio.prototype, "audioPlayerContainer", 2);
|
|
356
356
|
__decorateClass([
|
|
357
|
-
query("sd-6-0-0-next-
|
|
357
|
+
query("sd-6-0-0-next-14-drawer")
|
|
358
358
|
], SdAudio.prototype, "drawer", 2);
|
|
359
359
|
__decorateClass([
|
|
360
360
|
query("canvas")
|
|
361
361
|
], SdAudio.prototype, "canvas", 2);
|
|
362
362
|
SdAudio = __decorateClass([
|
|
363
|
-
customElement("sd-6-0-0-next-
|
|
363
|
+
customElement("sd-6-0-0-next-14-audio")
|
|
364
364
|
], SdAudio);
|
|
365
365
|
|
|
366
366
|
export {
|