@solid-design-system/components 3.13.0 → 3.14.1
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/dist/components/es/carousel.js +3 -3
- package/dist/components/es/navigation-item.js +1 -1
- package/dist/components/umd/solid-components.js +13 -13
- package/dist/custom-elements.json +1 -1
- package/dist/package/components/carousel/carousel.d.ts +4 -2
- package/dist/package/components/carousel/carousel.js +53 -14
- package/dist/package/components/navigation-item/navigation-item.d.ts +6 -4
- package/dist/package/components/navigation-item/navigation-item.js +50 -19
- package/dist/versioned-components/es/accordion-group.js +1 -1
- package/dist/versioned-components/es/accordion.js +1 -1
- package/dist/versioned-components/es/badge.js +1 -1
- package/dist/versioned-components/es/brandshape.js +1 -1
- package/dist/versioned-components/es/button.js +1 -1
- package/dist/versioned-components/es/carousel-item.js +1 -1
- package/dist/versioned-components/es/carousel.js +3 -3
- package/dist/versioned-components/es/checkbox-group.js +1 -1
- package/dist/versioned-components/es/checkbox.js +1 -1
- package/dist/versioned-components/es/dialog.js +1 -1
- package/dist/versioned-components/es/divider.js +1 -1
- package/dist/versioned-components/es/drawer.js +1 -1
- package/dist/versioned-components/es/dropdown.js +1 -1
- package/dist/versioned-components/es/expandable.js +1 -1
- package/dist/versioned-components/es/flipcard.js +1 -1
- package/dist/versioned-components/es/form.js +1 -1
- package/dist/versioned-components/es/header.js +1 -1
- package/dist/versioned-components/es/icon.js +1 -1
- package/dist/versioned-components/es/include.js +1 -1
- package/dist/versioned-components/es/input.js +1 -1
- package/dist/versioned-components/es/link.js +1 -1
- package/dist/versioned-components/es/map-marker.js +1 -1
- package/dist/versioned-components/es/navigation-item.js +1 -1
- package/dist/versioned-components/es/notification.js +1 -1
- package/dist/versioned-components/es/option.js +1 -1
- package/dist/versioned-components/es/quickfact.js +1 -1
- package/dist/versioned-components/es/radio-button.js +1 -1
- package/dist/versioned-components/es/radio-group.js +1 -1
- package/dist/versioned-components/es/radio.js +1 -1
- package/dist/versioned-components/es/scrollable.js +1 -1
- package/dist/versioned-components/es/select.js +3 -3
- package/dist/versioned-components/es/solid-components2.js +1 -1
- package/dist/versioned-components/es/spinner.js +1 -1
- package/dist/versioned-components/es/step-group.js +1 -1
- package/dist/versioned-components/es/step.js +1 -1
- package/dist/versioned-components/es/switch.js +1 -1
- package/dist/versioned-components/es/tab-group.js +1 -1
- package/dist/versioned-components/es/tab-panel.js +1 -1
- package/dist/versioned-components/es/tab.js +1 -1
- package/dist/versioned-components/es/tag.js +1 -1
- package/dist/versioned-components/es/teaser-media.js +1 -1
- package/dist/versioned-components/es/teaser.js +1 -1
- package/dist/versioned-components/es/textarea.js +1 -1
- package/dist/versioned-components/es/tooltip.js +2 -2
- package/dist/versioned-components/es/video.js +1 -1
- package/dist/versioned-package/_components/button-group/button-group.d.ts +1 -1
- package/dist/versioned-package/_components/button-group/button-group.js +11 -11
- package/dist/versioned-package/components/accordion/accordion.d.ts +1 -1
- package/dist/versioned-package/components/accordion/accordion.js +2 -2
- package/dist/versioned-package/components/accordion-group/accordion-group.d.ts +1 -1
- package/dist/versioned-package/components/accordion-group/accordion-group.js +3 -3
- package/dist/versioned-package/components/badge/badge.d.ts +1 -1
- package/dist/versioned-package/components/badge/badge.js +1 -1
- package/dist/versioned-package/components/brandshape/brandshape.d.ts +1 -1
- package/dist/versioned-package/components/brandshape/brandshape.js +1 -1
- package/dist/versioned-package/components/button/button.d.ts +1 -1
- package/dist/versioned-package/components/button/button.js +4 -4
- package/dist/versioned-package/components/carousel/carousel.d.ts +5 -3
- package/dist/versioned-package/components/carousel/carousel.js +59 -20
- package/dist/versioned-package/components/carousel-item/carousel-item.d.ts +1 -1
- package/dist/versioned-package/components/carousel-item/carousel-item.js +1 -1
- package/dist/versioned-package/components/checkbox/checkbox.d.ts +1 -1
- package/dist/versioned-package/components/checkbox/checkbox.js +3 -3
- package/dist/versioned-package/components/checkbox-group/checkbox-group.d.ts +1 -1
- package/dist/versioned-package/components/checkbox-group/checkbox-group.js +5 -5
- package/dist/versioned-package/components/dialog/dialog.d.ts +1 -1
- package/dist/versioned-package/components/dialog/dialog.js +2 -2
- package/dist/versioned-package/components/divider/divider.d.ts +1 -1
- package/dist/versioned-package/components/divider/divider.js +2 -2
- package/dist/versioned-package/components/drawer/drawer.d.ts +1 -1
- package/dist/versioned-package/components/drawer/drawer.js +2 -2
- package/dist/versioned-package/components/dropdown/dropdown.d.ts +1 -1
- package/dist/versioned-package/components/dropdown/dropdown.js +8 -8
- package/dist/versioned-package/components/expandable/expandable.d.ts +1 -1
- package/dist/versioned-package/components/expandable/expandable.js +2 -2
- package/dist/versioned-package/components/flipcard/flipcard.d.ts +1 -1
- package/dist/versioned-package/components/flipcard/flipcard.js +1 -1
- package/dist/versioned-package/components/header/header.d.ts +1 -1
- package/dist/versioned-package/components/header/header.js +4 -4
- package/dist/versioned-package/components/icon/icon.d.ts +1 -1
- package/dist/versioned-package/components/icon/icon.js +1 -1
- package/dist/versioned-package/components/include/include.d.ts +1 -1
- package/dist/versioned-package/components/include/include.js +1 -1
- package/dist/versioned-package/components/input/input.d.ts +1 -1
- package/dist/versioned-package/components/input/input.js +2 -2
- package/dist/versioned-package/components/link/link.d.ts +1 -1
- package/dist/versioned-package/components/link/link.js +2 -2
- package/dist/versioned-package/components/map-marker/map-marker.d.ts +1 -1
- package/dist/versioned-package/components/map-marker/map-marker.js +1 -1
- package/dist/versioned-package/components/navigation-item/navigation-item.d.ts +7 -5
- package/dist/versioned-package/components/navigation-item/navigation-item.js +52 -21
- package/dist/versioned-package/components/notification/notification.d.ts +1 -1
- package/dist/versioned-package/components/notification/notification.js +5 -5
- package/dist/versioned-package/components/option/option.d.ts +1 -1
- package/dist/versioned-package/components/option/option.js +2 -2
- package/dist/versioned-package/components/popup/popup.d.ts +1 -1
- package/dist/versioned-package/components/popup/popup.js +1 -1
- package/dist/versioned-package/components/quickfact/quickfact.d.ts +1 -1
- package/dist/versioned-package/components/quickfact/quickfact.js +2 -2
- package/dist/versioned-package/components/radio/radio.d.ts +1 -1
- package/dist/versioned-package/components/radio/radio.js +2 -2
- package/dist/versioned-package/components/radio-button/radio-button.d.ts +1 -1
- package/dist/versioned-package/components/radio-button/radio-button.js +2 -2
- package/dist/versioned-package/components/radio-group/radio-group.d.ts +2 -2
- package/dist/versioned-package/components/radio-group/radio-group.js +13 -13
- package/dist/versioned-package/components/scrollable/scrollable.d.ts +1 -1
- package/dist/versioned-package/components/scrollable/scrollable.js +3 -3
- package/dist/versioned-package/components/select/select.d.ts +4 -4
- package/dist/versioned-package/components/select/select.js +25 -25
- package/dist/versioned-package/components/spinner/spinner.d.ts +1 -1
- package/dist/versioned-package/components/spinner/spinner.js +1 -1
- package/dist/versioned-package/components/step/step.d.ts +1 -1
- package/dist/versioned-package/components/step/step.js +5 -5
- package/dist/versioned-package/components/step-group/step-group.d.ts +1 -1
- package/dist/versioned-package/components/step-group/step-group.js +2 -2
- package/dist/versioned-package/components/switch/switch.d.ts +1 -1
- package/dist/versioned-package/components/switch/switch.js +1 -1
- package/dist/versioned-package/components/tab/tab.d.ts +1 -1
- package/dist/versioned-package/components/tab/tab.js +2 -2
- package/dist/versioned-package/components/tab-group/tab-group.d.ts +1 -1
- package/dist/versioned-package/components/tab-group/tab-group.js +13 -13
- package/dist/versioned-package/components/tab-panel/tab-panel.d.ts +1 -1
- package/dist/versioned-package/components/tab-panel/tab-panel.js +2 -2
- package/dist/versioned-package/components/tag/tag.d.ts +1 -1
- package/dist/versioned-package/components/tag/tag.js +2 -2
- package/dist/versioned-package/components/teaser/teaser.js +1 -1
- package/dist/versioned-package/components/teaser-media/teaser-media.js +1 -1
- package/dist/versioned-package/components/textarea/textarea.d.ts +1 -1
- package/dist/versioned-package/components/textarea/textarea.js +2 -2
- package/dist/versioned-package/components/tooltip/tooltip.d.ts +1 -1
- package/dist/versioned-package/components/tooltip/tooltip.js +5 -5
- package/dist/versioned-package/components/video/video.d.ts +1 -1
- package/dist/versioned-package/components/video/video.js +2 -2
- package/dist/versioned-package/internal/form.js +3 -3
- package/dist/versioned-package/styles/headline/headline.css.js +1 -1
- package/dist/versioned-package/utilities/autocomplete-config.js +4 -4
- package/dist/versioned-styles/solid-styles.css +1 -1
- package/dist/vscode.html-custom-data.json +52 -44
- package/dist/web-types.json +107 -51
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
import{S as t,x as e,t as a,c as l,i as s,e as r,n as i,a as o}from"./solid-components2.js";import{d as n}from"./default-value.js";import{F as h}from"./form.js";import{H as d}from"./slot.js";import{o as p}from"./if-defined.js";import{l as u}from"./live.js";import{r as c}from"./state.js";import{w as y}from"./watch.js";var m=Object.defineProperty,b=Object.getOwnPropertyDescriptor,v=(t,e,a,l)=>{for(var s,r=l>1?void 0:l?b(e,a):e,i=t.length-1;i>=0;i--)(s=t[i])&&(r=(l?s(e,a,r):s(r))||r);return l&&r&&m(e,a,r),r};let x=class extends t{constructor(){super(...arguments),this.formControlController=new h(this),this.hasSlotController=new d(this,"help-text","label"),this.hasFocus=!1,this.showValidStyle=!1,this.showInvalidStyle=!1,this.title="",this.name="",this.value="",this.size="lg",this.label="",this.helpText="",this.placeholder="",this.rows=4,this.disabled=!1,this.readonly=!1,this.form="",this.required=!1,this.styleOnValid=!1,this.spellcheck=!0,this.defaultValue=""}get validity(){return this.textarea.validity}get validationMessage(){return this.textarea.validationMessage}connectedCallback(){super.connectedCallback(),this.updateComplete.then((()=>{this.setTextareaHeight()}))}firstUpdated(){this.formControlController.updateValidity()}disconnectedCallback(){super.disconnectedCallback()}handleBlur(){this.hasFocus=!1,this.emit("sd-blur")}handleChange(){this.value=this.textarea.value,this.setTextareaHeight(),this.emit("sd-change")}handleFocus(){this.hasFocus=!0,this.emit("sd-focus")}handleInput(){this.value=this.textarea.value,this.formControlController.updateValidity(),this.emit("sd-input")}handleInvalid(t){this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(t),this.invalidMessage.textContent=t.target.validationMessage}setTextareaHeight(){this.textarea.style.height=void 0}handleDisabledChange(){this.formControlController.setValidity(this.disabled)}handleRowsChange(){this.setTextareaHeight()}async handleValueChange(){await this.updateComplete,this.formControlController.updateValidity(),this.setTextareaHeight()}focus(t){this.textarea.focus(t)}blur(){this.textarea.blur()}select(){this.textarea.select()}scrollPosition(t){return t?("number"==typeof t.top&&(this.textarea.scrollTop=t.top),void("number"==typeof t.left&&(this.textarea.scrollLeft=t.left))):{top:this.textarea.scrollTop,left:this.textarea.scrollTop}}setSelectionRange(t,e,a="none"){this.textarea.setSelectionRange(t,e,a)}setRangeText(t,e,a,l){this.textarea.setRangeText(t,e,a,l),this.value!==this.textarea.value&&(this.value=this.textarea.value),this.value!==this.textarea.value&&(this.value=this.textarea.value,this.setTextareaHeight())}checkValidity(){var t;return null==(t=this.textarea)?void 0:t.checkValidity()}getForm(){return this.formControlController.getForm()}reportValidity(){return this.formControlController.fakeUserInteraction(),this.textarea.reportValidity()}setCustomValidity(t){this.textarea.setCustomValidity(t),this.formControlController.updateValidity()}render(){const t=this.hasSlotController.test("label"),l=this.hasSlotController.test("help-text"),s=!!this.label||!!t,r=!!this.helpText||!!l,i=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",o="sm"===this.size?"text-sm":"text-base",n={sm:"text-base ml-1",md:"text-lg ml-2",lg:"text-xl ml-2"}[this.size];return e`<div part="form-control" class="text-left"><label part="form-control-label" id="label" class="${a("mb-2",s?"inline-block":"hidden",o)}" for="input" aria-hidden="${s?"false":"true"}"><slot name="label">${this.label}</slot></label><div part="form-control-input" class="${a("relative w-full",this.disabled&&"cursor-not-allowed")}"><div part="border" class="${a("absolute w-full h-full pointer-events-none border rounded-default",{disabled:"border-neutral-500",readonly:"border-neutral-800",activeInvalid:"border-error border-2",activeValid:"border-success border-2",active:"border-primary border-2",invalid:"border-error",valid:"border-success",default:"border-neutral-800"}[i])}"></div><div part="base" class="${a("textarea px-4 flex items-top rounded-default bg-white group",{sm:"textarea-sm py-1",md:"textarea-md py-1",lg:"textarea-lg py-2"}[this.size],{disabled:"text-neutral-500",readonly:"text-black",activeInvalid:"text-error",activeValid:"text-success",active:"text-black",invalid:"text-error",valid:"text-success",default:"text-black"}[i],this.disabled||this.readonly?"":"hover:bg-neutral-200",this.readonly&&"bg-neutral-100")}"><textarea part="textarea" id="input" class="${a("flex-grow focus:outline-none bg-transparent placeholder-neutral-700 resize-none",this.disabled&&"cursor-not-allowed",o)}" title="${this.title}" name="${p(this.name)}" .value="${u(this.value)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" placeholder="${p(this.placeholder)}" minlength="${p(this.minlength)}" maxlength="${p(this.maxlength)}" rows="${p(this.rows)}" autocapitalize="${p(this.autocapitalize)}" autocorrect="${p(this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${p(this.spellcheck)}" enterkeyhint="${p(this.enterkeyhint)}" inputmode="${p(this.inputmode)}" aria-describedby="help-text" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea> ${this.showInvalidStyle?e`<sd-3-
|
|
1
|
+
import{S as t,x as e,t as a,c as l,i as s,e as r,n as i,a as o}from"./solid-components2.js";import{d as n}from"./default-value.js";import{F as h}from"./form.js";import{H as d}from"./slot.js";import{o as p}from"./if-defined.js";import{l as u}from"./live.js";import{r as c}from"./state.js";import{w as y}from"./watch.js";var m=Object.defineProperty,b=Object.getOwnPropertyDescriptor,v=(t,e,a,l)=>{for(var s,r=l>1?void 0:l?b(e,a):e,i=t.length-1;i>=0;i--)(s=t[i])&&(r=(l?s(e,a,r):s(r))||r);return l&&r&&m(e,a,r),r};let x=class extends t{constructor(){super(...arguments),this.formControlController=new h(this),this.hasSlotController=new d(this,"help-text","label"),this.hasFocus=!1,this.showValidStyle=!1,this.showInvalidStyle=!1,this.title="",this.name="",this.value="",this.size="lg",this.label="",this.helpText="",this.placeholder="",this.rows=4,this.disabled=!1,this.readonly=!1,this.form="",this.required=!1,this.styleOnValid=!1,this.spellcheck=!0,this.defaultValue=""}get validity(){return this.textarea.validity}get validationMessage(){return this.textarea.validationMessage}connectedCallback(){super.connectedCallback(),this.updateComplete.then((()=>{this.setTextareaHeight()}))}firstUpdated(){this.formControlController.updateValidity()}disconnectedCallback(){super.disconnectedCallback()}handleBlur(){this.hasFocus=!1,this.emit("sd-blur")}handleChange(){this.value=this.textarea.value,this.setTextareaHeight(),this.emit("sd-change")}handleFocus(){this.hasFocus=!0,this.emit("sd-focus")}handleInput(){this.value=this.textarea.value,this.formControlController.updateValidity(),this.emit("sd-input")}handleInvalid(t){this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(t),this.invalidMessage.textContent=t.target.validationMessage}setTextareaHeight(){this.textarea.style.height=void 0}handleDisabledChange(){this.formControlController.setValidity(this.disabled)}handleRowsChange(){this.setTextareaHeight()}async handleValueChange(){await this.updateComplete,this.formControlController.updateValidity(),this.setTextareaHeight()}focus(t){this.textarea.focus(t)}blur(){this.textarea.blur()}select(){this.textarea.select()}scrollPosition(t){return t?("number"==typeof t.top&&(this.textarea.scrollTop=t.top),void("number"==typeof t.left&&(this.textarea.scrollLeft=t.left))):{top:this.textarea.scrollTop,left:this.textarea.scrollTop}}setSelectionRange(t,e,a="none"){this.textarea.setSelectionRange(t,e,a)}setRangeText(t,e,a,l){this.textarea.setRangeText(t,e,a,l),this.value!==this.textarea.value&&(this.value=this.textarea.value),this.value!==this.textarea.value&&(this.value=this.textarea.value,this.setTextareaHeight())}checkValidity(){var t;return null==(t=this.textarea)?void 0:t.checkValidity()}getForm(){return this.formControlController.getForm()}reportValidity(){return this.formControlController.fakeUserInteraction(),this.textarea.reportValidity()}setCustomValidity(t){this.textarea.setCustomValidity(t),this.formControlController.updateValidity()}render(){const t=this.hasSlotController.test("label"),l=this.hasSlotController.test("help-text"),s=!!this.label||!!t,r=!!this.helpText||!!l,i=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",o="sm"===this.size?"text-sm":"text-base",n={sm:"text-base ml-1",md:"text-lg ml-2",lg:"text-xl ml-2"}[this.size];return e`<div part="form-control" class="text-left"><label part="form-control-label" id="label" class="${a("mb-2",s?"inline-block":"hidden",o)}" for="input" aria-hidden="${s?"false":"true"}"><slot name="label">${this.label}</slot></label><div part="form-control-input" class="${a("relative w-full",this.disabled&&"cursor-not-allowed")}"><div part="border" class="${a("absolute w-full h-full pointer-events-none border rounded-default",{disabled:"border-neutral-500",readonly:"border-neutral-800",activeInvalid:"border-error border-2",activeValid:"border-success border-2",active:"border-primary border-2",invalid:"border-error",valid:"border-success",default:"border-neutral-800"}[i])}"></div><div part="base" class="${a("textarea px-4 flex items-top rounded-default bg-white group",{sm:"textarea-sm py-1",md:"textarea-md py-1",lg:"textarea-lg py-2"}[this.size],{disabled:"text-neutral-500",readonly:"text-black",activeInvalid:"text-error",activeValid:"text-success",active:"text-black",invalid:"text-error",valid:"text-success",default:"text-black"}[i],this.disabled||this.readonly?"":"hover:bg-neutral-200",this.readonly&&"bg-neutral-100")}"><textarea part="textarea" id="input" class="${a("flex-grow focus:outline-none bg-transparent placeholder-neutral-700 resize-none",this.disabled&&"cursor-not-allowed",o)}" title="${this.title}" name="${p(this.name)}" .value="${u(this.value)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" placeholder="${p(this.placeholder)}" minlength="${p(this.minlength)}" maxlength="${p(this.maxlength)}" rows="${p(this.rows)}" autocapitalize="${p(this.autocapitalize)}" autocorrect="${p(this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${p(this.spellcheck)}" enterkeyhint="${p(this.enterkeyhint)}" inputmode="${p(this.inputmode)}" aria-describedby="help-text" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea> ${this.showInvalidStyle?e`<sd-3-14-1-icon class="${a("text-error absolute right-4 bg-white group-hover:bg-neutral-200",n)}" library="system" name="risk" part="invalid-icon"></sd-3-14-1-icon>`:""} ${this.styleOnValid&&this.showValidStyle?e`<sd-3-14-1-icon class="${a("text-success absolute right-4 bg-white group-hover:bg-neutral-200",n)}" library="system" name="status-check" part="valid-icon"></sd-3-14-1-icon>`:""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${a("text-sm text-neutral-700",r?"block":"hidden")}" aria-hidden="${r?"false":"true"}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`}};x.styles=[l,t.styles,s`:host{display:block}:host([required]) #label::after{content:' *'}.no-scrollbar::-webkit-scrollbar{display:none}`],v([r("#input")],x.prototype,"textarea",2),v([r("#invalid-message")],x.prototype,"invalidMessage",2),v([c()],x.prototype,"hasFocus",2),v([c()],x.prototype,"showValidStyle",2),v([c()],x.prototype,"showInvalidStyle",2),v([i()],x.prototype,"title",2),v([i()],x.prototype,"name",2),v([i()],x.prototype,"value",2),v([i({reflect:!0})],x.prototype,"size",2),v([i()],x.prototype,"label",2),v([i({attribute:"help-text"})],x.prototype,"helpText",2),v([i()],x.prototype,"placeholder",2),v([i({type:Number})],x.prototype,"rows",2),v([i({type:Boolean,reflect:!0})],x.prototype,"disabled",2),v([i({type:Boolean,reflect:!0})],x.prototype,"readonly",2),v([i({reflect:!0})],x.prototype,"form",2),v([i({type:Boolean,reflect:!0})],x.prototype,"required",2),v([i({type:Number})],x.prototype,"minlength",2),v([i({type:Number})],x.prototype,"maxlength",2),v([i()],x.prototype,"autocapitalize",2),v([i()],x.prototype,"autocorrect",2),v([i()],x.prototype,"autocomplete",2),v([i({type:Boolean})],x.prototype,"autofocus",2),v([i()],x.prototype,"enterkeyhint",2),v([i({type:Boolean,reflect:!0,attribute:"style-on-valid"})],x.prototype,"styleOnValid",2),v([i({type:Boolean,converter:{fromAttribute:t=>!(!t||"false"===t),toAttribute:t=>t?"true":"false"}})],x.prototype,"spellcheck",2),v([i()],x.prototype,"inputmode",2),v([n()],x.prototype,"defaultValue",2),v([y("disabled",{waitUntilFirstUpdate:!0})],x.prototype,"handleDisabledChange",1),v([y("rows",{waitUntilFirstUpdate:!0})],x.prototype,"handleRowsChange",1),v([y("value",{waitUntilFirstUpdate:!0})],x.prototype,"handleValueChange",1),x=v([o("sd-3-14-1-textarea")],x);export{x as default};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{S as t,L as e,x as s,t as i,r as o,i as a,e as h,n as r,a as n}from"./solid-components2.js";import{c as p,s as d,a as l}from"./animate.js";import{g as c,s as u}from"./animation-registry.js";import{w as m}from"./event.js";import{w}from"./watch.js";import{I as y}from"./interactive.js";var v=Object.defineProperty,g=Object.getOwnPropertyDescriptor,f=(t,e,s,i)=>{for(var o,a=i>1?void 0:i?g(e,s):e,h=t.length-1;h>=0;h--)(o=t[h])&&(a=(i?o(e,s,a):o(a))||a);return i&&a&&v(e,s,a),a};let b=class extends t{constructor(){super(...arguments),this.isFocusTriggered=!1,this.localize=new e(this),this.content="",this.placement="top",this.size="lg",this.disabled=!1,this.open=!1,this.trigger="click focus",this.hoist=!1}connectedCallback(){super.connectedCallback(),this.handleBlur=this.handleBlur.bind(this),this.handleClick=this.handleClick.bind(this),this.handleFocus=this.handleFocus.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleMouseOver=this.handleMouseOver.bind(this),this.handleMouseOut=this.handleMouseOut.bind(this),this.updateComplete.then((()=>{this.addEventListener("blur",this.handleBlur,!0),this.addEventListener("focus",this.handleFocus,!0),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("mouseover",this.handleMouseOver),this.addEventListener("mouseout",this.handleMouseOut)}))}firstUpdated(){this.body.hidden=!this.open,this.open&&(this.popup.active=!0,this.popup.reposition())}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("blur",this.handleBlur,!0),this.removeEventListener("focus",this.handleFocus,!0),this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("mouseover",this.handleMouseOver),this.removeEventListener("mouseout",this.handleMouseOut)}handleBlur(){this.hasTrigger("focus")&&this.hide()}handleClick(){if(this.hasTrigger("click")){if(this.isFocusTriggered)return void(this.isFocusTriggered=!1);this.open?this.hide():this.show()}}handleFocus(){this.hasTrigger("focus")&&(this.isFocusTriggered=!0,this.show())}handleKeyDown(t){this.open&&"Escape"===t.key&&(t.stopPropagation(),this.hide())}handleMouseOver(){if(this.hasTrigger("hover")){const t=p(getComputedStyle(this).getPropertyValue("--show-delay"));clearTimeout(this.hoverTimeout),this.hoverTimeout=window.setTimeout((()=>this.show()),t)}}handleMouseOut(){if(this.hasTrigger("hover")){const t=p(getComputedStyle(this).getPropertyValue("--hide-delay"));clearTimeout(this.hoverTimeout),this.hoverTimeout=window.setTimeout((()=>this.hide()),t)}}hasTrigger(t){return this.trigger.split(" ").includes(t)}async handleOpenChange(){if(this.open){if(this.disabled)return;this.emit("sd-show"),await d(this.body),this.body.hidden=!1,this.popup.active=!0;const{keyframes:t,options:e}=c(this,"tooltip.show",{dir:this.localize.dir()});await l(this.popup.popup,t,e),this.emit("sd-after-show")}else{this.emit("sd-hide"),await d(this.body);const{keyframes:t,options:e}=c(this,"tooltip.hide",{dir:this.localize.dir()});await l(this.popup.popup,t,e),this.popup.active=!1,this.body.hidden=!0,this.emit("sd-after-hide")}}async handleOptionsChange(){this.hasUpdated&&(await this.updateComplete,this.popup.reposition())}handleDisabledChange(){this.disabled&&this.open&&this.hide()}async show(){if(!this.open)return this.open=!0,m(this,"sd-after-show")}async hide(){if(this.open)return this.open=!1,m(this,"sd-after-hide")}render(){const t=this.placement.endsWith("-start"),e=this.placement.endsWith("-end");return s`<sd-3-
|
|
1
|
+
import{S as t,L as e,x as s,t as i,r as o,i as a,e as h,n as r,a as n}from"./solid-components2.js";import{c as p,s as d,a as l}from"./animate.js";import{g as c,s as u}from"./animation-registry.js";import{w as m}from"./event.js";import{w}from"./watch.js";import{I as y}from"./interactive.js";var v=Object.defineProperty,g=Object.getOwnPropertyDescriptor,f=(t,e,s,i)=>{for(var o,a=i>1?void 0:i?g(e,s):e,h=t.length-1;h>=0;h--)(o=t[h])&&(a=(i?o(e,s,a):o(a))||a);return i&&a&&v(e,s,a),a};let b=class extends t{constructor(){super(...arguments),this.isFocusTriggered=!1,this.localize=new e(this),this.content="",this.placement="top",this.size="lg",this.disabled=!1,this.open=!1,this.trigger="click focus",this.hoist=!1}connectedCallback(){super.connectedCallback(),this.handleBlur=this.handleBlur.bind(this),this.handleClick=this.handleClick.bind(this),this.handleFocus=this.handleFocus.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleMouseOver=this.handleMouseOver.bind(this),this.handleMouseOut=this.handleMouseOut.bind(this),this.updateComplete.then((()=>{this.addEventListener("blur",this.handleBlur,!0),this.addEventListener("focus",this.handleFocus,!0),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("mouseover",this.handleMouseOver),this.addEventListener("mouseout",this.handleMouseOut)}))}firstUpdated(){this.body.hidden=!this.open,this.open&&(this.popup.active=!0,this.popup.reposition())}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("blur",this.handleBlur,!0),this.removeEventListener("focus",this.handleFocus,!0),this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("mouseover",this.handleMouseOver),this.removeEventListener("mouseout",this.handleMouseOut)}handleBlur(){this.hasTrigger("focus")&&this.hide()}handleClick(){if(this.hasTrigger("click")){if(this.isFocusTriggered)return void(this.isFocusTriggered=!1);this.open?this.hide():this.show()}}handleFocus(){this.hasTrigger("focus")&&(this.isFocusTriggered=!0,this.show())}handleKeyDown(t){this.open&&"Escape"===t.key&&(t.stopPropagation(),this.hide())}handleMouseOver(){if(this.hasTrigger("hover")){const t=p(getComputedStyle(this).getPropertyValue("--show-delay"));clearTimeout(this.hoverTimeout),this.hoverTimeout=window.setTimeout((()=>this.show()),t)}}handleMouseOut(){if(this.hasTrigger("hover")){const t=p(getComputedStyle(this).getPropertyValue("--hide-delay"));clearTimeout(this.hoverTimeout),this.hoverTimeout=window.setTimeout((()=>this.hide()),t)}}hasTrigger(t){return this.trigger.split(" ").includes(t)}async handleOpenChange(){if(this.open){if(this.disabled)return;this.emit("sd-show"),await d(this.body),this.body.hidden=!1,this.popup.active=!0;const{keyframes:t,options:e}=c(this,"tooltip.show",{dir:this.localize.dir()});await l(this.popup.popup,t,e),this.emit("sd-after-show")}else{this.emit("sd-hide"),await d(this.body);const{keyframes:t,options:e}=c(this,"tooltip.hide",{dir:this.localize.dir()});await l(this.popup.popup,t,e),this.popup.active=!1,this.body.hidden=!0,this.emit("sd-after-hide")}}async handleOptionsChange(){this.hasUpdated&&(await this.updateComplete,this.popup.reposition())}handleDisabledChange(){this.disabled&&this.open&&this.hide()}async show(){if(!this.open)return this.open=!0,m(this,"sd-after-show")}async hide(){if(this.open)return this.open=!1,m(this,"sd-after-hide")}render(){const t=this.placement.endsWith("-start"),e=this.placement.endsWith("-end");return s`<sd-3-14-1-popup part="base" exportparts="
|
|
2
2
|
popup:base__popup,
|
|
3
3
|
arrow:base__arrow
|
|
4
|
-
" class="${i(this.open&&"tooltip--open")}" placement="${this.placement}" distance="10" skidding="${{start:2,end:-2,default:0}[t?"start":e?"end":"default"]*("sm"===this.size?-1:1)}" strategy="${this.hoist?"fixed":"absolute"}" flip shift arrow auto-size="vertical" arrow-padding="0"><slot slot="anchor" aria-describedby="tooltip" class="${i("lg"===this.size?"text-xl":"text-base")}"><button class="flex sd-interactive rounded-full"><sd-3-
|
|
4
|
+
" class="${i(this.open&&"tooltip--open")}" placement="${this.placement}" distance="10" skidding="${{start:2,end:-2,default:0}[t?"start":e?"end":"default"]*("sm"===this.size?-1:1)}" strategy="${this.hoist?"fixed":"absolute"}" flip shift arrow auto-size="vertical" arrow-padding="0"><slot slot="anchor" aria-describedby="tooltip" class="${i("lg"===this.size?"text-xl":"text-base")}"><button class="flex sd-interactive rounded-full"><sd-3-14-1-icon library="system" name="info-circle" class="${i(this.disabled&&"sd-interactive--disabled")}"></sd-3-14-1-icon></button></slot><slot name="content" part="body" id="tooltip" class="bg-primary text-white py-3 px-4 block rounded-none text-sm text-left" role="tooltip" aria-label="Tooltip" aria-live="${this.open?"polite":"off"}">${this.content}</slot></sd-3-14-1-popup>`}};b.styles=[t.styles,o(y),a`:host{--hide-delay:0ms;--show-delay:150ms;display:contents}sd-3-14-1-popup{--arrow-color:rgb(var(--sd-color-primary, 0 53 142) / 1);--arrow-size:10px}sd-3-14-1-popup::part(popup){pointer-events:none;z-index:10;--tw-shadow:var(--sd-shadow, 0px 1px 3px 0px rgb(81 81 81 / 75%));--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}sd-3-14-1-popup::part(arrow){--tw-shadow:var(--sd-shadow, 0px 1px 3px 0px rgb(81 81 81 / 75%));--tw-shadow-colored:0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}sd-3-14-1-popup[placement^=top]::part(popup){transform-origin:bottom}sd-3-14-1-popup[placement^=bottom]::part(popup){transform-origin:top}#tooltip{max-width:var(--max-width)}::slotted([slot=content]){overflow:auto;max-width:var(--auto-size-available-width)!important;max-height:var(--auto-size-available-height)!important}`],f([h("slot:not([name])")],b.prototype,"defaultSlot",2),f([h("#tooltip")],b.prototype,"body",2),f([h("sd-3-14-1-popup")],b.prototype,"popup",2),f([r()],b.prototype,"content",2),f([r({reflect:!0})],b.prototype,"placement",2),f([r()],b.prototype,"size",2),f([r({type:Boolean,reflect:!0})],b.prototype,"disabled",2),f([r({type:Boolean,reflect:!0})],b.prototype,"open",2),f([r()],b.prototype,"trigger",2),f([r({type:Boolean})],b.prototype,"hoist",2),f([w("open",{waitUntilFirstUpdate:!0})],b.prototype,"handleOpenChange",1),f([w(["content","hoist","placement"])],b.prototype,"handleOptionsChange",1),f([w("disabled")],b.prototype,"handleDisabledChange",1),b=f([n("sd-3-14-1-tooltip")],b),u("tooltip.show",{keyframes:[{opacity:0,scale:.8},{opacity:1,scale:1}],options:{duration:150,easing:"ease"}}),u("tooltip.hide",{keyframes:[{opacity:1,scale:1},{opacity:0,scale:.8}],options:{duration:150,easing:"ease"}});export{b as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{S as t,x as e,t as s,i as o,e as a,n as i,a as l}from"./solid-components2.js";import{H as r}from"./slot.js";var n=Object.defineProperty,p=Object.getOwnPropertyDescriptor,d=(t,e,s,o)=>{for(var a,i=o>1?void 0:o?p(e,s):e,l=t.length-1;l>=0;l--)(a=t[l])&&(i=(o?a(e,s,i):a(i))||i);return o&&i&&n(e,s,i),i};let y=class extends t{constructor(){super(...arguments),this.playing=!1,this.overlay=!1,this.isBelowBreakpoint=!1,this.hasSlotController=new r(this,"[default]","play-icon","poster")}get poster(){const t=this.shadowRoot.querySelector("slot[name=poster]");return(null==t?void 0:t.assignedElements().length)>0?t.assignedElements()[0]:null}fadeoutPoster(){this.poster instanceof HTMLImageElement&&(this.poster.style.opacity="0")}hidePoster(){this.poster instanceof HTMLImageElement&&(this.poster.style.display="none")}play(){this.emit("sd-play"),this.playing=!0,this.fadeoutPoster()}handleKeydown(t){t instanceof KeyboardEvent&&("Enter"===t.key||" "===t.key)&&(this.play(),setTimeout((()=>{var t;null==(t=this.querySelector("video"))||t.focus()})))}handleButtonResize(){this.hostEl.clientWidth<=414&&!this.isBelowBreakpoint&&(this.isBelowBreakpoint=!0),this.hostEl.clientWidth>414&&this.isBelowBreakpoint&&(this.isBelowBreakpoint=!1)}connectedCallback(){super.connectedCallback(),this.resizeObserver=new ResizeObserver((()=>this.handleButtonResize())),this.updateComplete.then((()=>{this.resizeObserver.observe(this.hostEl)}))}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver.unobserve(this.hostEl)}render(){return e`<div part="base" aria-label="Video Player" class="cursor-pointer"><button part="play-button" aria-label="Play video" tabindex="0" @click="${this.play}" @keydown="${this.handleKeydown}" class="${s(this.playing&&"pointer-events-none","w-full h-full absolute top-0 left-0 z-30 text-primary hover:text-primary-500 sd-interactive sd-interactive--reset focus-visible:focus-outline")}"><div part="play-button-bg" class="${s(this.playing?"opacity-0":"opacity-100",this.isBelowBreakpoint?"w-[48px] h-[48px]":"w-[96px] h-[96px]","absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 p-4 bg-white bg-opacity-75 rounded-full play-pause-transition")}"><slot name="play-icon" part="play-icon" class="${s(this.isBelowBreakpoint?"text-[2rem]":"text-[4rem]")}"><sd-3-
|
|
1
|
+
import{S as t,x as e,t as s,i as o,e as a,n as i,a as l}from"./solid-components2.js";import{H as r}from"./slot.js";var n=Object.defineProperty,p=Object.getOwnPropertyDescriptor,d=(t,e,s,o)=>{for(var a,i=o>1?void 0:o?p(e,s):e,l=t.length-1;l>=0;l--)(a=t[l])&&(i=(o?a(e,s,i):a(i))||i);return o&&i&&n(e,s,i),i};let y=class extends t{constructor(){super(...arguments),this.playing=!1,this.overlay=!1,this.isBelowBreakpoint=!1,this.hasSlotController=new r(this,"[default]","play-icon","poster")}get poster(){const t=this.shadowRoot.querySelector("slot[name=poster]");return(null==t?void 0:t.assignedElements().length)>0?t.assignedElements()[0]:null}fadeoutPoster(){this.poster instanceof HTMLImageElement&&(this.poster.style.opacity="0")}hidePoster(){this.poster instanceof HTMLImageElement&&(this.poster.style.display="none")}play(){this.emit("sd-play"),this.playing=!0,this.fadeoutPoster()}handleKeydown(t){t instanceof KeyboardEvent&&("Enter"===t.key||" "===t.key)&&(this.play(),setTimeout((()=>{var t;null==(t=this.querySelector("video"))||t.focus()})))}handleButtonResize(){this.hostEl.clientWidth<=414&&!this.isBelowBreakpoint&&(this.isBelowBreakpoint=!0),this.hostEl.clientWidth>414&&this.isBelowBreakpoint&&(this.isBelowBreakpoint=!1)}connectedCallback(){super.connectedCallback(),this.resizeObserver=new ResizeObserver((()=>this.handleButtonResize())),this.updateComplete.then((()=>{this.resizeObserver.observe(this.hostEl)}))}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver.unobserve(this.hostEl)}render(){return e`<div part="base" aria-label="Video Player" class="cursor-pointer"><button part="play-button" aria-label="Play video" tabindex="0" @click="${this.play}" @keydown="${this.handleKeydown}" class="${s(this.playing&&"pointer-events-none","w-full h-full absolute top-0 left-0 z-30 text-primary hover:text-primary-500 sd-interactive sd-interactive--reset focus-visible:focus-outline")}"><div part="play-button-bg" class="${s(this.playing?"opacity-0":"opacity-100",this.isBelowBreakpoint?"w-[48px] h-[48px]":"w-[96px] h-[96px]","absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 p-4 bg-white bg-opacity-75 rounded-full play-pause-transition")}"><slot name="play-icon" part="play-icon" class="${s(this.isBelowBreakpoint?"text-[2rem]":"text-[4rem]")}"><sd-3-14-1-icon id="default-play-icon" library="system" name="start"></sd-3-14-1-icon></slot></div></button> ${this.hasSlotController.test("poster")?e`<slot name="poster" role="presentation" @transitionend="${this.hidePoster}"></slot>`:null}<div part="overlay" id="overlay" role="presentation" class="${s(this.overlay&&!this.playing?"opacity-100":"opacity-0","bg-[rgba(0,0,0,0.65)] w-full h-full absolute top-0 left-0 pointer-events-none z-20 play-pause-transition")}"></div><slot></slot></div>`}};y.styles=[t.styles,o`:host{position:relative;display:inline-block;overflow:hidden}.play-pause-transition,::slotted([slot=poster]){transition-property:opacity;transition-duration:.3s;transition-timing-function:cubic-bezier(.4,0,.2,1)}::slotted([slot=poster]){position:absolute;left:var(--sd-spacing-0,0);top:var(--sd-spacing-0,0);z-index:10;width:100%}#default-play-icon,::slotted([slot=play-icon]){position:absolute;left:50%;top:50%;--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))}`],d([a("[part=base]")],y.prototype,"hostEl",2),d([i({type:Boolean,reflect:!0})],y.prototype,"playing",2),d([i({type:Boolean,reflect:!0})],y.prototype,"overlay",2),d([i({type:Boolean})],y.prototype,"isBelowBreakpoint",2),y=d([l("sd-3-14-1-video")],y);export{y as default};
|
|
@@ -21,19 +21,19 @@ let SdButtonGroup = class extends SolidElement {
|
|
|
21
21
|
}
|
|
22
22
|
handleFocus(event) {
|
|
23
23
|
const button = findButton(event.target);
|
|
24
|
-
button == null ? void 0 : button.classList.add("sd-3-
|
|
24
|
+
button == null ? void 0 : button.classList.add("sd-3-14-1-button-group__button--focus");
|
|
25
25
|
}
|
|
26
26
|
handleBlur(event) {
|
|
27
27
|
const button = findButton(event.target);
|
|
28
|
-
button == null ? void 0 : button.classList.remove("sd-3-
|
|
28
|
+
button == null ? void 0 : button.classList.remove("sd-3-14-1-button-group__button--focus");
|
|
29
29
|
}
|
|
30
30
|
handleMouseOver(event) {
|
|
31
31
|
const button = findButton(event.target);
|
|
32
|
-
button == null ? void 0 : button.classList.add("sd-3-
|
|
32
|
+
button == null ? void 0 : button.classList.add("sd-3-14-1-button-group__button--hover");
|
|
33
33
|
}
|
|
34
34
|
handleMouseOut(event) {
|
|
35
35
|
const button = findButton(event.target);
|
|
36
|
-
button == null ? void 0 : button.classList.remove("sd-3-
|
|
36
|
+
button == null ? void 0 : button.classList.remove("sd-3-14-1-button-group__button--hover");
|
|
37
37
|
}
|
|
38
38
|
handleSlotChange() {
|
|
39
39
|
const slottedElements = [...this.defaultSlot.assignedElements({ flatten: true })];
|
|
@@ -41,11 +41,11 @@ let SdButtonGroup = class extends SolidElement {
|
|
|
41
41
|
const index = slottedElements.indexOf(el);
|
|
42
42
|
const button = findButton(el);
|
|
43
43
|
if (button !== null) {
|
|
44
|
-
button.classList.add("sd-3-
|
|
45
|
-
button.classList.toggle("sd-3-
|
|
46
|
-
button.classList.toggle("sd-3-
|
|
47
|
-
button.classList.toggle("sd-3-
|
|
48
|
-
button.classList.toggle("sd-3-
|
|
44
|
+
button.classList.add("sd-3-14-1-button-group__button");
|
|
45
|
+
button.classList.toggle("sd-3-14-1-button-group__button--first", index === 0);
|
|
46
|
+
button.classList.toggle("sd-3-14-1-button-group__button--inner", index > 0 && index < slottedElements.length - 1);
|
|
47
|
+
button.classList.toggle("sd-3-14-1-button-group__button--last", index === slottedElements.length - 1);
|
|
48
|
+
button.classList.toggle("sd-3-14-1-button-group__button--radio", button.tagName.toLowerCase() === "sd-3-14-1-radio-button");
|
|
49
49
|
}
|
|
50
50
|
});
|
|
51
51
|
}
|
|
@@ -64,10 +64,10 @@ __decorateClass([
|
|
|
64
64
|
property()
|
|
65
65
|
], SdButtonGroup.prototype, "label", 2);
|
|
66
66
|
SdButtonGroup = __decorateClass([
|
|
67
|
-
customElement("sd-3-
|
|
67
|
+
customElement("sd-3-14-1-button-group")
|
|
68
68
|
], SdButtonGroup);
|
|
69
69
|
function findButton(el) {
|
|
70
|
-
const selector = "sd-3-
|
|
70
|
+
const selector = "sd-3-14-1-button, sd-3-14-1-radio-button";
|
|
71
71
|
return el.closest(selector) ?? el.querySelector(selector);
|
|
72
72
|
}
|
|
73
73
|
export {
|
|
@@ -106,7 +106,7 @@ let SdAccordion = class extends SolidElement {
|
|
|
106
106
|
)}"></div><slot name="summary" part="summary" class="flex flex-auto items-center text-left">${this.summary}</slot><span part="summary-icon" class="${cx(
|
|
107
107
|
"flex flex-grow-0 flex-shrink-0 flex-auto items-center transition-all ease-in-out duration-300 text-xl",
|
|
108
108
|
this.open && "rotate-180"
|
|
109
|
-
)}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-3-
|
|
109
|
+
)}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-3-14-1-icon library="system" name="chevron-down"></sd-3-14-1-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-3-14-1-icon library="system" name="chevron-down"></sd-3-14-1-icon></slot></span></header><div part="content" id="content" class="overflow-hidden"><slot part="content__slot" class="block px-4 py-6" role="region" aria-labelledby="header"></slot></div></div>`;
|
|
110
110
|
}
|
|
111
111
|
};
|
|
112
112
|
SdAccordion.styles = [
|
|
@@ -132,7 +132,7 @@ __decorateClass([
|
|
|
132
132
|
watch("open", { waitUntilFirstUpdate: true })
|
|
133
133
|
], SdAccordion.prototype, "handleOpenChange", 1);
|
|
134
134
|
SdAccordion = __decorateClass([
|
|
135
|
-
customElement("sd-3-
|
|
135
|
+
customElement("sd-3-14-1-accordion")
|
|
136
136
|
], SdAccordion);
|
|
137
137
|
setDefaultAnimation("accordion.show", {
|
|
138
138
|
keyframes: [
|
|
@@ -47,16 +47,16 @@ let SdAccordionGroup = class extends SolidElement {
|
|
|
47
47
|
SdAccordionGroup.styles = [
|
|
48
48
|
componentStyles,
|
|
49
49
|
SolidElement.styles,
|
|
50
|
-
css`:host{display:block}::slotted(sd-3-
|
|
50
|
+
css`:host{display:block}::slotted(sd-3-14-1-accordion:not(:first-of-type)){margin-top:-1px}`
|
|
51
51
|
];
|
|
52
52
|
__decorateClass([
|
|
53
|
-
queryAssignedElements({ selector: "sd-3-
|
|
53
|
+
queryAssignedElements({ selector: "sd-3-14-1-accordion" })
|
|
54
54
|
], SdAccordionGroup.prototype, "_accordionsInDefaultSlot", 2);
|
|
55
55
|
__decorateClass([
|
|
56
56
|
property({ attribute: "close-others", type: Boolean })
|
|
57
57
|
], SdAccordionGroup.prototype, "closeOthers", 2);
|
|
58
58
|
SdAccordionGroup = __decorateClass([
|
|
59
|
-
customElement("sd-3-
|
|
59
|
+
customElement("sd-3-14-1-accordion-group")
|
|
60
60
|
], SdAccordionGroup);
|
|
61
61
|
export {
|
|
62
62
|
SdAccordionGroup as default
|
|
@@ -146,7 +146,7 @@ __decorateClass([
|
|
|
146
146
|
state()
|
|
147
147
|
], SdBrandshape.prototype, "componentBreakpoint", 2);
|
|
148
148
|
SdBrandshape = __decorateClass([
|
|
149
|
-
customElement("sd-3-
|
|
149
|
+
customElement("sd-3-14-1-brandshape")
|
|
150
150
|
], SdBrandshape);
|
|
151
151
|
export {
|
|
152
152
|
SdBrandshape as default
|
|
@@ -212,19 +212,19 @@ let SdButton = class extends SolidElement {
|
|
|
212
212
|
md: "ml-2",
|
|
213
213
|
lg: "ml-2"
|
|
214
214
|
}[this.size]
|
|
215
|
-
)}"></slot>${this.loading ? html`<sd-3-
|
|
215
|
+
)}"></slot>${this.loading ? html`<sd-3-14-1-spinner class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-3-14-1-spinner>` : ""}</${tag}>`;
|
|
216
216
|
}
|
|
217
217
|
};
|
|
218
218
|
SdButton.styles = [
|
|
219
219
|
componentStyles,
|
|
220
220
|
SolidElement.styles,
|
|
221
|
-
css`:host{position:relative;display:inline-block;width:var(--sd-spacing-auto,auto);cursor:pointer}sd-3-
|
|
221
|
+
css`:host{position:relative;display:inline-block;width:var(--sd-spacing-auto,auto);cursor:pointer}sd-3-14-1-spinner{--indicator-color:currentColor;--track-color:var(--tw-varcolor-200)}::slotted(sd-3-14-1-badge){pointer-events:none;position:absolute;top:var(--sd-spacing-0,0);right: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-3-14-1-icon),sd-3-14-1-spinner{font-size:calc(var(--tw-varspacing)/ 2)}`
|
|
222
222
|
];
|
|
223
223
|
__decorateClass([
|
|
224
224
|
query("a, button")
|
|
225
225
|
], SdButton.prototype, "button", 2);
|
|
226
226
|
__decorateClass([
|
|
227
|
-
queryAssignedElements({ selector: "sd-3-
|
|
227
|
+
queryAssignedElements({ selector: "sd-3-14-1-icon" })
|
|
228
228
|
], SdButton.prototype, "_iconsInDefaultSlot", 2);
|
|
229
229
|
__decorateClass([
|
|
230
230
|
state()
|
|
@@ -287,7 +287,7 @@ __decorateClass([
|
|
|
287
287
|
watch("disabled", { waitUntilFirstUpdate: true })
|
|
288
288
|
], SdButton.prototype, "handleDisabledChange", 1);
|
|
289
289
|
SdButton = __decorateClass([
|
|
290
|
-
customElement("sd-3-
|
|
290
|
+
customElement("sd-3-14-1-button")
|
|
291
291
|
], SdButton);
|
|
292
292
|
export {
|
|
293
293
|
SdButton as default
|
|
@@ -12,6 +12,7 @@ export default class SdCarousel extends SolidElement {
|
|
|
12
12
|
scrollContainer: HTMLElement;
|
|
13
13
|
paginationContainer: HTMLElement;
|
|
14
14
|
activeSlide: number;
|
|
15
|
+
currentPage: number;
|
|
15
16
|
pausedAutoplay: boolean;
|
|
16
17
|
private autoplayController;
|
|
17
18
|
private scrollController;
|
|
@@ -23,8 +24,8 @@ export default class SdCarousel extends SolidElement {
|
|
|
23
24
|
connectedCallback(): void;
|
|
24
25
|
disconnectedCallback(): void;
|
|
25
26
|
protected firstUpdated(): void;
|
|
26
|
-
|
|
27
|
-
|
|
27
|
+
static getPageCount(totalSlides: number, slidesPerPage: number, slidesPerMove: number): number;
|
|
28
|
+
static getCurrentPage(totalSlides: number, activeSlide: number, slidesPerPage: number, slidesPerMove: number): number;
|
|
28
29
|
private getSlides;
|
|
29
30
|
private handleKeyDown;
|
|
30
31
|
private handleScrollEnd;
|
|
@@ -36,12 +37,13 @@ export default class SdCarousel extends SolidElement {
|
|
|
36
37
|
handleAutoplayChange(): void;
|
|
37
38
|
previous(behavior?: ScrollBehavior): void;
|
|
38
39
|
next(behavior?: ScrollBehavior): void;
|
|
40
|
+
nextTillFirst(behavior?: ScrollBehavior): void;
|
|
39
41
|
goToSlide(index: number, behavior?: ScrollBehavior): void;
|
|
40
42
|
render(): import("lit-html").TemplateResult<1>;
|
|
41
43
|
static styles: import("lit").CSSResultGroup[];
|
|
42
44
|
}
|
|
43
45
|
declare global {
|
|
44
46
|
interface HTMLElementTagNameMap {
|
|
45
|
-
'sd-3-
|
|
47
|
+
'sd-3-14-1-carousel': SdCarousel;
|
|
46
48
|
}
|
|
47
49
|
}
|
|
@@ -35,10 +35,11 @@ let SdCarousel = class extends SolidElement {
|
|
|
35
35
|
this.slidesPerPage = 1;
|
|
36
36
|
this.slidesPerMove = 1;
|
|
37
37
|
this.activeSlide = 0;
|
|
38
|
+
this.currentPage = 1;
|
|
38
39
|
this.pausedAutoplay = false;
|
|
39
40
|
this.autoplayController = new AutoplayController(this, () => this.next());
|
|
40
41
|
this.scrollController = new ScrollController(this);
|
|
41
|
-
this.slides = this.getElementsByTagName("sd-3-
|
|
42
|
+
this.slides = this.getElementsByTagName("sd-3-14-1-carousel-item");
|
|
42
43
|
this.intersectionObserverEntries = /* @__PURE__ */ new Map();
|
|
43
44
|
this.localize = new LocalizeController(this);
|
|
44
45
|
this.handleSlotChange = (mutations) => {
|
|
@@ -87,11 +88,14 @@ let SdCarousel = class extends SolidElement {
|
|
|
87
88
|
this.mutationObserver = new MutationObserver(this.handleSlotChange);
|
|
88
89
|
this.mutationObserver.observe(this, { childList: true, subtree: false });
|
|
89
90
|
}
|
|
90
|
-
getPageCount() {
|
|
91
|
-
return Math.ceil(
|
|
91
|
+
static getPageCount(totalSlides, slidesPerPage, slidesPerMove) {
|
|
92
|
+
return Math.ceil((totalSlides - slidesPerPage) / slidesPerMove) + 1 > 0 ? Math.ceil((totalSlides - slidesPerPage) / slidesPerMove) + 1 : (
|
|
93
|
+
// Returns 1 if the total number of slides is less than the number of slides per page
|
|
94
|
+
1
|
|
95
|
+
);
|
|
92
96
|
}
|
|
93
|
-
getCurrentPage() {
|
|
94
|
-
return Math.ceil(
|
|
97
|
+
static getCurrentPage(totalSlides, activeSlide, slidesPerPage, slidesPerMove) {
|
|
98
|
+
return Math.ceil((totalSlides - slidesPerPage) / slidesPerMove) - Math.ceil((totalSlides - slidesPerPage - activeSlide) / slidesPerMove) + 1;
|
|
95
99
|
}
|
|
96
100
|
getSlides({ excludeClones = true } = {}) {
|
|
97
101
|
return [...this.slides].filter((slide) => !excludeClones || !slide.hasAttribute("data-clone"));
|
|
@@ -183,6 +187,12 @@ let SdCarousel = class extends SolidElement {
|
|
|
183
187
|
this.goToSlide(this.activeSlide, "auto");
|
|
184
188
|
}
|
|
185
189
|
handelSlideChange() {
|
|
190
|
+
this.currentPage = SdCarousel.getCurrentPage(
|
|
191
|
+
this.getSlides().length,
|
|
192
|
+
this.activeSlide,
|
|
193
|
+
this.slidesPerPage,
|
|
194
|
+
this.slidesPerMove
|
|
195
|
+
);
|
|
186
196
|
const slides = this.getSlides();
|
|
187
197
|
slides.forEach((slide, i) => {
|
|
188
198
|
slide.classList.toggle("--is-active", i === this.activeSlide);
|
|
@@ -195,6 +205,9 @@ let SdCarousel = class extends SolidElement {
|
|
|
195
205
|
}
|
|
196
206
|
});
|
|
197
207
|
}
|
|
208
|
+
if (this.currentPage > SdCarousel.getPageCount(this.getSlides().length, this.slidesPerPage, this.slidesPerMove)) {
|
|
209
|
+
this.nextTillFirst();
|
|
210
|
+
}
|
|
198
211
|
}
|
|
199
212
|
handleSlidesPerMoveChange() {
|
|
200
213
|
const slides = this.getSlides({ excludeClones: false });
|
|
@@ -226,7 +239,11 @@ let SdCarousel = class extends SolidElement {
|
|
|
226
239
|
previousIndex -= 1;
|
|
227
240
|
canSnap = Math.abs(previousIndex - this.slidesPerMove) % this.slidesPerMove === 0;
|
|
228
241
|
}
|
|
229
|
-
this.
|
|
242
|
+
if (this.currentPage - 1 === 0 && this.loop) {
|
|
243
|
+
this.goToSlide(this.activeSlide - this.slidesPerPage, behavior);
|
|
244
|
+
} else {
|
|
245
|
+
this.goToSlide(previousIndex, behavior);
|
|
246
|
+
}
|
|
230
247
|
}
|
|
231
248
|
/**
|
|
232
249
|
* Move the carousel forward by `slides-per-move` slides.
|
|
@@ -234,7 +251,22 @@ let SdCarousel = class extends SolidElement {
|
|
|
234
251
|
* @param behavior - The behavior used for scrolling.
|
|
235
252
|
*/
|
|
236
253
|
next(behavior = "smooth") {
|
|
237
|
-
this.
|
|
254
|
+
if (this.currentPage + 1 > SdCarousel.getPageCount(this.getSlides().length, this.slidesPerPage, this.slidesPerMove) && this.loop) {
|
|
255
|
+
this.nextTillFirst(behavior);
|
|
256
|
+
} else {
|
|
257
|
+
this.goToSlide(this.activeSlide + this.slidesPerMove, behavior);
|
|
258
|
+
}
|
|
259
|
+
}
|
|
260
|
+
nextTillFirst(behavior = "smooth") {
|
|
261
|
+
while (this.activeSlide !== 0) {
|
|
262
|
+
this.goToSlide(this.activeSlide + 1, behavior);
|
|
263
|
+
}
|
|
264
|
+
this.currentPage = SdCarousel.getCurrentPage(
|
|
265
|
+
this.getSlides().length,
|
|
266
|
+
this.activeSlide,
|
|
267
|
+
this.slidesPerPage,
|
|
268
|
+
this.slidesPerMove
|
|
269
|
+
);
|
|
238
270
|
}
|
|
239
271
|
/**
|
|
240
272
|
* Scrolls the carousel to the slide specified by `index`.
|
|
@@ -248,7 +280,7 @@ let SdCarousel = class extends SolidElement {
|
|
|
248
280
|
const slidesWithClones = this.getSlides({ excludeClones: false });
|
|
249
281
|
const newActiveSlide = (index + slides.length) % slides.length;
|
|
250
282
|
this.activeSlide = newActiveSlide;
|
|
251
|
-
const nextSlideIndex = clamp(index + (loop ? slidesPerPage : 0), 0, slidesWithClones.length
|
|
283
|
+
const nextSlideIndex = clamp(index + (loop ? slidesPerPage : 0), 0, slidesWithClones.length + 1);
|
|
252
284
|
const nextSlide = slidesWithClones[nextSlideIndex];
|
|
253
285
|
const scrollContainerRect = scrollContainer.getBoundingClientRect();
|
|
254
286
|
const nextSlideRect = nextSlide.getBoundingClientRect();
|
|
@@ -260,10 +292,15 @@ let SdCarousel = class extends SolidElement {
|
|
|
260
292
|
}
|
|
261
293
|
render() {
|
|
262
294
|
const { scrollController, slidesPerPage } = this;
|
|
263
|
-
const pagesCount =
|
|
264
|
-
const currentPage =
|
|
265
|
-
|
|
266
|
-
|
|
295
|
+
const pagesCount = SdCarousel.getPageCount(this.getSlides().length, this.slidesPerPage, this.slidesPerMove);
|
|
296
|
+
const currentPage = SdCarousel.getCurrentPage(
|
|
297
|
+
this.getSlides().length,
|
|
298
|
+
this.activeSlide,
|
|
299
|
+
this.slidesPerPage,
|
|
300
|
+
this.slidesPerMove
|
|
301
|
+
);
|
|
302
|
+
const prevEnabled = this.loop || currentPage > 1;
|
|
303
|
+
const nextEnabled = this.loop || currentPage < pagesCount;
|
|
267
304
|
const isLtr = this.localize.dir() === "ltr";
|
|
268
305
|
return html`<div part="base" class="${cx(`carousel h-full w-full`)}"><div id="scroll-container" part="scroll-container" class="${cx(
|
|
269
306
|
`carousel__slides mb-6
|
|
@@ -275,8 +312,8 @@ let SdCarousel = class extends SolidElement {
|
|
|
275
312
|
"!mr-6 !rounded-sm sd-interactive",
|
|
276
313
|
!prevEnabled && "sd-interactive--disabled",
|
|
277
314
|
this.inverted ? "sd-interactive--inverted" : "sd-interactive--reset"
|
|
278
|
-
)}" aria-label="${this.localize.term("previousSlide")}" aria-controls="scroll-container" aria-disabled="${prevEnabled ? "false" : "true"}" @click="${prevEnabled ? () => this.previous() : null}"><slot name="previous-icon"><sd-3-
|
|
279
|
-
const isActive = index === currentPage;
|
|
315
|
+
)}" aria-label="${this.localize.term("previousSlide")}" aria-controls="scroll-container" aria-disabled="${prevEnabled ? "false" : "true"}" @click="${prevEnabled ? () => this.previous() : null}"><slot name="previous-icon"><sd-3-14-1-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="system" name="${isLtr ? "chevron-down" : "chevron-up"}"></sd-3-14-1-icon></slot></button> ${this.variant === "dot" ? html`<div part="pagination-dot" role="tablist" class="${cx("carousel__pagination dot flex wrap items-center gap-2")}" aria-controls="scroll-container">${map(range(pagesCount), (index) => {
|
|
316
|
+
const isActive = index + 1 === currentPage;
|
|
280
317
|
return html`<button part="pagination-item ${isActive ? "pagination-item--active" : ""}" class="${cx(
|
|
281
318
|
"carousel__pagination-item",
|
|
282
319
|
"block cursor-pointer bg-none border-0 rounded-full",
|
|
@@ -288,26 +325,25 @@ let SdCarousel = class extends SolidElement {
|
|
|
288
325
|
isActive && "bg-accent border-none",
|
|
289
326
|
isActive ? this.inverted ? "hover:bg-accent-300" : "hover:bg-accent-550" : ""
|
|
290
327
|
)}"></span></button>`;
|
|
291
|
-
})}</div>` : html`<span part="pagination-number" class="carousel__pagination number flex gap-0.5 cursor-default select-none" aria-controls="scroll-container"><span part="pagination-item" class="${cx("w-5 text-center border-b-2 border-accent", this.inverted ? "text-white" : "text-black")}">${currentPage
|
|
328
|
+
})}</div>` : html`<span part="pagination-number" class="carousel__pagination number flex gap-0.5 cursor-default select-none" aria-controls="scroll-container"><span part="pagination-item" class="${cx("w-5 text-center border-b-2 border-accent", this.inverted ? "text-white" : "text-black")}">${currentPage}</span> <span part="pagination-divider" class="${cx("scale-y-[1.5]", "text-center", this.inverted ? "text-white" : "text-black")}">/</span> <span part="pagination-item" class="${cx("w-5 text-center", this.inverted ? "text-white" : "text-black")}">${pagesCount}</span></span>`} <button part="navigation-button navigation-button--next" id="carousel__navigation-button--next" ?disabled="${!nextEnabled ? true : false}" class="${cx(
|
|
292
329
|
"!ml-6 !rounded-sm sd-interactive ",
|
|
293
330
|
!nextEnabled && "sd-interactive--disabled",
|
|
294
331
|
this.inverted ? "sd-interactive--inverted" : "sd-interactive--reset"
|
|
295
332
|
)}" aria-label="${this.localize.term("nextSlide")}" aria-controls="scroll-container" aria-disabled="${nextEnabled ? "false" : "true"}" @click="${nextEnabled ? () => {
|
|
296
|
-
console.log("click-next");
|
|
297
333
|
this.next();
|
|
298
|
-
} : null}"><slot name="next-icon"><sd-3-
|
|
334
|
+
} : null}"><slot name="next-icon"><sd-3-14-1-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="system" name="${isLtr ? "chevron-up" : "chevron-down"}"></sd-3-14-1-icon></slot></button></div><button class="${cx(
|
|
299
335
|
"ml-6 !rounded-sm",
|
|
300
336
|
"!absolute !right-0 sd-interactive",
|
|
301
337
|
this.inverted ? "sd-interactive--inverted" : "sd-interactive--reset",
|
|
302
338
|
!this.autoplay && "!hidden"
|
|
303
|
-
)}" part="autoplay-controls" @click="${() => this.pausedAutoplay = !this.pausedAutoplay}"><slot name="autoplay-start" class="${cx(!this.pausedAutoplay ? "hidden" : "")}"><sd-3-
|
|
339
|
+
)}" part="autoplay-controls" @click="${() => this.pausedAutoplay = !this.pausedAutoplay}"><slot name="autoplay-start" class="${cx(!this.pausedAutoplay ? "hidden" : "")}"><sd-3-14-1-icon class="h-6 w-6 grid place-items-center" library="system" name="start"></sd-3-14-1-icon></slot><slot name="autoplay-pause" class="${cx(this.pausedAutoplay ? "hidden" : "")}"><sd-3-14-1-icon class="h-6 w-6 grid place-items-center" library="system" name="pause"></sd-3-14-1-icon></slot></button></div></div>`;
|
|
304
340
|
}
|
|
305
341
|
};
|
|
306
342
|
SdCarousel.styles = [
|
|
307
343
|
SolidElement.styles,
|
|
308
344
|
unsafeCSS(InteractiveStyles),
|
|
309
345
|
componentStyles,
|
|
310
|
-
css`:host{--slide-gap:var(--sl-spacing-medium, 1rem);--scroll-hint:0px;display:flex}.carousel{grid-template-areas:'. slides .' '. pagination .'}.carousel__pagination{grid-area:pagination}.carousel__slides{grid-area:slides;scrollbar-width:none;--slide-size:calc((100% - (var(--slides-per-page) - 1) * var(--slide-gap)) / var(--slides-per-page));grid-auto-columns:var(--slide-size);-moz-column-gap:var(--slide-gap);column-gap:var(--slide-gap);scroll-padding-inline:var(--scroll-hint);padding-inline:var(--scroll-hint)}.carousel__slides::-webkit-scrollbar{display:none}@media (prefers-reduced-motion){:where(.carousel__slides){scroll-behavior:auto}}.carousel__navigation{grid-area:navigation}sd-3-
|
|
346
|
+
css`:host{--slide-gap:var(--sl-spacing-medium, 1rem);--scroll-hint:0px;display:flex}.carousel{grid-template-areas:'. slides .' '. pagination .'}.carousel__pagination{grid-area:pagination}.carousel__slides{grid-area:slides;scrollbar-width:none;--slide-size:calc((100% - (var(--slides-per-page) - 1) * var(--slide-gap)) / var(--slides-per-page));grid-auto-columns:var(--slide-size);-moz-column-gap:var(--slide-gap);column-gap:var(--slide-gap);scroll-padding-inline:var(--scroll-hint);padding-inline:var(--scroll-hint)}.carousel__slides::-webkit-scrollbar{display:none}@media (prefers-reduced-motion){:where(.carousel__slides){scroll-behavior:auto}}.carousel__navigation{grid-area:navigation}sd-3-14-1-button::part(label){pointer-events:none;display:flex;flex:1 1 auto;align-items:center}`
|
|
311
347
|
];
|
|
312
348
|
__decorateClass([
|
|
313
349
|
property({ type: String, reflect: true })
|
|
@@ -339,6 +375,9 @@ __decorateClass([
|
|
|
339
375
|
__decorateClass([
|
|
340
376
|
state()
|
|
341
377
|
], SdCarousel.prototype, "activeSlide", 2);
|
|
378
|
+
__decorateClass([
|
|
379
|
+
state()
|
|
380
|
+
], SdCarousel.prototype, "currentPage", 2);
|
|
342
381
|
__decorateClass([
|
|
343
382
|
state()
|
|
344
383
|
], SdCarousel.prototype, "pausedAutoplay", 2);
|
|
@@ -359,7 +398,7 @@ __decorateClass([
|
|
|
359
398
|
watch("autoplay")
|
|
360
399
|
], SdCarousel.prototype, "handleAutoplayChange", 1);
|
|
361
400
|
SdCarousel = __decorateClass([
|
|
362
|
-
customElement("sd-3-
|
|
401
|
+
customElement("sd-3-14-1-carousel")
|
|
363
402
|
], SdCarousel);
|
|
364
403
|
export {
|
|
365
404
|
SdCarousel as default
|
|
@@ -30,7 +30,7 @@ SdCarouselItem.styles = [
|
|
|
30
30
|
css`:host{aspect-ratio:var(--aspect-ratio);scroll-snap-align:start;scroll-snap-stop:always;display:flex;height:100%;width:100%;flex-direction:column;align-items:center;justify-content:center}::slotted(img){height:100%;width:100%;-o-object-fit:cover;object-fit:cover}`
|
|
31
31
|
];
|
|
32
32
|
SdCarouselItem = __decorateClass([
|
|
33
|
-
customElement("sd-3-
|
|
33
|
+
customElement("sd-3-14-1-carousel-item")
|
|
34
34
|
], SdCarouselItem);
|
|
35
35
|
export {
|
|
36
36
|
SdCarouselItem as default
|
|
@@ -109,7 +109,7 @@ let SdCheckbox = class extends SolidElement {
|
|
|
109
109
|
render() {
|
|
110
110
|
const checkboxState = this.disabled && this.indeterminate ? "disabledIndeterminate" : this.disabled && this.checked ? "disabledChecked" : this.disabled ? "disabled" : this.showInvalidStyle && this.indeterminate ? "invalidIndeterminate" : this.showInvalidStyle ? "invalid" : this.checked || this.indeterminate ? "filled" : "default";
|
|
111
111
|
return html`<label part="base" class="${cx(
|
|
112
|
-
"sd-3-
|
|
112
|
+
"sd-3-14-1-checkbox group flex items-start text-base leading-normal text-black cursor-pointer",
|
|
113
113
|
this.disabled && "hover:cursor-not-allowed",
|
|
114
114
|
{
|
|
115
115
|
/* sizes, fonts */
|
|
@@ -133,7 +133,7 @@ let SdCheckbox = class extends SolidElement {
|
|
|
133
133
|
filled: "border-accent hover:border-accent-550 group-hover:border-accent-550 bg-accent group-hover:bg-accent-550",
|
|
134
134
|
default: "border-neutral-800 hover:bg-neutral-200 group-hover:bg-neutral-200 bg-white"
|
|
135
135
|
}[checkboxState]
|
|
136
|
-
)}">${this.checked ? html`<sd-3-
|
|
136
|
+
)}">${this.checked ? html`<sd-3-14-1-icon part="checked-icon" class="text-white w-3 h-3" library="system" name="status-check"></sd-3-14-1-icon>` : ""} ${!this.checked && this.indeterminate ? html`<sd-3-14-1-icon part="indeterminate-icon" class="text-white w-3 h-3" library="system" name="status-minus"></sd-3-14-1-icon>` : ""} </span><span part="label" id="label" class="${cx(
|
|
137
137
|
"select-none inline-block ml-2",
|
|
138
138
|
this.disabled ? "text-neutral-500" : this.showInvalidStyle ? "text-error" : "text-black"
|
|
139
139
|
)}"><slot></slot></span></label> ${this.formControlController.renderInvalidMessage()}`;
|
|
@@ -189,7 +189,7 @@ __decorateClass([
|
|
|
189
189
|
watch(["checked", "indeterminate"], { waitUntilFirstUpdate: true })
|
|
190
190
|
], SdCheckbox.prototype, "handleStateChange", 1);
|
|
191
191
|
SdCheckbox = __decorateClass([
|
|
192
|
-
customElement("sd-3-
|
|
192
|
+
customElement("sd-3-14-1-checkbox")
|
|
193
193
|
], SdCheckbox);
|
|
194
194
|
export {
|
|
195
195
|
SdCheckbox as default
|