@solid-design-system/components 1.36.0 → 1.37.1

package/dist/components/es/teaser.js

@@ -1 +1 @@
-import{S as t,x as e,i,n as r}from"./solid-element.js";import{c as a}from"./register-custom-element.js";import{H as s}from"./slot.js";import{r as o}from"./state.js";import{e as n}from"./query.js";import{t as l}from"./classix.js";var h=Object.defineProperty,d=Object.getOwnPropertyDescriptor,p=(t,e,i,r)=>{for(var a,s=r>1?void 0:r?d(e,i):e,o=t.length-1;o>=0;o--)(a=t[o])&&(s=(r?a(e,i,s):a(s))||s);return r&&s&&h(e,i,s),s};let c=class extends t{constructor(){super(...arguments),this.variant="white",this.breakpoint=448,this.inset=!1,this.hasSlotController=new s(this,"[default]","media","meta","headline")}connectedCallback(){super.connectedCallback(),0===this.breakpoint?this._orientation="horizontal":9999===this.breakpoint?this._orientation="vertical":window.ResizeObserver&&(this.resizeObserver=new ResizeObserver((()=>this.updateOrientation())),this.resizeObserver.observe(this))}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver&&this.resizeObserver.disconnect()}updated(t){super.updated(t),t.has("breakpoint")&&this.updateOrientation()}updateOrientation(){this._orientation=this.offsetWidth>=this.breakpoint?"horizontal":"vertical"}render(){const t="white border-neutral-400"===this.variant||this.inset,i=this.hasSlotController.test("[default]"),r=this.hasSlotController.test("media"),a=this.hasSlotController.test("meta");return this.hasSlotController.test("headline"),e`<div class="${l("flex",{white:"bg-white","white border-neutral-400":"bg-white border border-neutral-400","neutral-100":"bg-neutral-100",primary:"bg-primary text-white","primary-100":"bg-primary-100"}[this.variant],"vertical"===this._orientation&&"flex-col","horizontal"===this._orientation&&"flex-row gap-8","horizontal"===this._orientation&&t&&"py-8 px-10")}" part="base"><div style="${"horizontal"===this._orientation?"width: var(--distribution-media, 100%);":""}" class="${l(!t&&"vertical"===this._orientation&&"mb-4",!r&&"hidden")}" part="media"><slot name="media"></slot></div><div style="${"horizontal"===this._orientation?"width: var(--distribution-content, 100%); "+(t?"width: var(--distribution-content, calc(100% - 2rem));":""):""}" class="${l("flex flex-col text-left","horizontal"===this._orientation&&"flex flex-col","vertical"===this._orientation&&t&&"m-4")}" part="content"><div part="meta" class="${l("gap-2 mb-4",!a&&"hidden")}"><slot name="meta"></slot></div><div part="headline" class="${l("text-lg font-bold m-0","primary"===this.variant?"text-white":"text-black")}"><slot name="headline">Always insert one semantically correct heading element here (e. g. &lt;h2>)</slot></div><div part="main" class="${l(!i&&"hidden")}"><slot></slot></div></div></div>`}};c.styles=[t.styles,i`:host{display:block}::slotted(*){margin:var(--sd-spacing-0,0)}::slotted([slot=headline]){margin:var(--sd-spacing-0,0)!important;font-size:var(--sd-font-size-lg,1.25rem)!important;font-weight:700}`],p([r({reflect:!0})],c.prototype,"variant",2),p([r({reflect:!0,type:Number})],c.prototype,"breakpoint",2),p([r({type:Boolean,reflect:!0})],c.prototype,"inset",2),p([n('[part="base"]')],c.prototype,"teaser",2),p([o()],c.prototype,"_orientation",2),c=p([a("sd-teaser")],c);export{c as default};
+import{S as t,x as e,i,n as r}from"./solid-element.js";import{c as a}from"./register-custom-element.js";import{H as s}from"./slot.js";import{r as o}from"./state.js";import{e as n}from"./query.js";import{t as l}from"./classix.js";var h=Object.defineProperty,d=Object.getOwnPropertyDescriptor,p=(t,e,i,r)=>{for(var a,s=r>1?void 0:r?d(e,i):e,o=t.length-1;o>=0;o--)(a=t[o])&&(s=(r?a(e,i,s):a(s))||s);return r&&s&&h(e,i,s),s};let c=class extends t{constructor(){super(...arguments),this.variant="white",this.breakpoint=448,this.inset=!1,this.hasSlotController=new s(this,"[default]","media","meta","headline")}connectedCallback(){super.connectedCallback(),0===this.breakpoint?this._orientation="horizontal":9999===this.breakpoint?this._orientation="vertical":window.ResizeObserver&&(this.resizeObserver=new ResizeObserver((()=>this.updateOrientation())),this.resizeObserver.observe(this))}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver&&this.resizeObserver.disconnect()}updated(t){super.updated(t),t.has("breakpoint")&&this.updateOrientation()}updateOrientation(){this._orientation=this.offsetWidth>=this.breakpoint?"horizontal":"vertical"}render(){const t="white border-neutral-400"===this.variant||this.inset,i=this.hasSlotController.test("[default]"),r=this.hasSlotController.test("media"),a=this.hasSlotController.test("meta");return this.hasSlotController.test("headline"),e`<div class="${l("flex",{white:"bg-white","white border-neutral-400":"bg-white border border-neutral-400","neutral-100":"bg-neutral-100",primary:"bg-primary text-white","primary-100":"bg-primary-100"}[this.variant],"vertical"===this._orientation&&"flex-col","horizontal"===this._orientation&&"flex-row gap-8","horizontal"===this._orientation&&t&&"py-8 px-10")}" part="base"><div style="${"horizontal"===this._orientation?"width: var(--distribution-media, 100%);":""}" class="${l(!t&&"vertical"===this._orientation&&"mb-4",!r&&"hidden","white border-neutral-400"===this.variant&&"vertical"===this._orientation&&"mx-[-1px] mt-[-1px]")}" part="media"><slot name="media"></slot></div><div style="${"horizontal"===this._orientation?"width: var(--distribution-content, 100%); "+(t?"width: var(--distribution-content, calc(100% - 2rem));":""):""}" class="${l("flex flex-col text-left","horizontal"===this._orientation&&"flex flex-col","vertical"===this._orientation&&t&&"m-4")}" part="content"><div part="meta" class="${l("gap-2 mb-4",!a&&"hidden")}"><slot name="meta"></slot></div><div part="headline" class="${l("text-lg font-bold m-0","primary"===this.variant?"text-white":"text-black")}"><slot name="headline">Always insert one semantically correct heading element here (e. g. &lt;h2>)</slot></div><div part="main" class="${l(!i&&"hidden")}"><slot></slot></div></div></div>`}};c.styles=[t.styles,i`:host{display:block}::slotted(*){margin:var(--sd-spacing-0,0)}::slotted([slot=headline]){margin:var(--sd-spacing-0,0)!important;font-size:var(--sd-font-size-lg,1.25rem)!important;font-weight:700}`],p([r({reflect:!0})],c.prototype,"variant",2),p([r({reflect:!0,type:Number})],c.prototype,"breakpoint",2),p([r({type:Boolean,reflect:!0})],c.prototype,"inset",2),p([n('[part="base"]')],c.prototype,"teaser",2),p([o()],c.prototype,"_orientation",2),c=p([a("sd-teaser")],c);export{c as default};

package/dist/components/es/textarea.js

@@ -1 +1 @@
-import{S as t,x as e,i as a,n as r}from"./solid-element.js";import{c as l}from"./register-custom-element.js";import{d as o}from"./default-value.js";import{F as s}from"./form.js";import{H as i}from"./slot.js";import{o as h}from"./if-defined.js";import{l as n}from"./live.js";import{r as d}from"./state.js";import{e as p}from"./query.js";import{w as c}from"./watch.js";import{t as u}from"./classix.js";import{f as m}from"./form-control.styles.js";import"./directive.js";var f=Object.defineProperty,y=Object.getOwnPropertyDescriptor,b=(t,e,a,r)=>{for(var l,o=r>1?void 0:r?y(e,a):e,s=t.length-1;s>=0;s--)(l=t[s])&&(o=(r?l(e,a,o):l(o))||o);return r&&o&&f(e,a,o),o};let x=class extends t{constructor(){super(...arguments),this.formControlController=new s(this),this.hasSlotController=new i(this,"help-text","label"),this.hasFocus=!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.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)}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,r){this.textarea.setRangeText(t,e,a,r),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.textarea.reportValidity()}setCustomValidity(t){this.textarea.setCustomValidity(t),this.formControlController.updateValidity()}render(){const t=this.hasSlotController.test("label"),a=this.hasSlotController.test("help-text"),r=!!this.label||!!t,l=!!this.helpText||!!a,o=this.required||!!this.minlength||!!this.maxlength,s=o&&!this.checkValidity(),i=o&&this.checkValidity(),d=this.disabled?"disabled":this.readonly?"readonly":this.hasFocus&&s?"activeInvalid":this.hasFocus&&i?"activeValid":this.hasFocus?"active":s?"invalid":i?"valid":"default",p="sm"===this.size?"text-sm":"text-base";return e`<div part="form-control" class="${u("form-control text-left",r&&"form-control--has-label",l&&"form-control--has-help-text",this.disabled&&"cursor-not-allowed")}"><label part="form-control-label" id="label" class="${u("form-control-label mb-2",r?"has-label inline-block":"hidden",p)}" for="input" aria-hidden="${r?"false":"true"}"><slot name="label">${this.label}</slot></label><div part="form-control-input" class="form-control-input relative w-full"><div part="border" class="${u("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"}[d])}"></div><div part="base" class="${u("textarea px-4 flex flex-row items-center rounded-default",{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"}[d],this.disabled||this.readonly?"":"hover:bg-neutral-200",this.readonly&&"bg-neutral-100",s&&"form-control-input--invalid",!this.value&&"textarea--empty")}"><textarea part="textarea" id="input" class="${u("flex-grow focus:outline-none bg-transparent placeholder-neutral-700 resize-none",p,this.disabled&&"cursor-not-allowed")}" title="${this.title}" name="${h(this.name)}" .value="${n(this.value)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" placeholder="${h(this.placeholder)}" minlength="${h(this.minlength)}" maxlength="${h(this.maxlength)}" rows="${h(this.rows)}" autocapitalize="${h(this.autocapitalize)}" autocorrect="${h(this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${h(this.spellcheck)}" enterkeyhint="${h(this.enterkeyhint)}" inputmode="${h(this.inputmode)}" aria-describedby="help-text" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea></div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${u("text-sm text-neutral-700",l?"block":"hidden")}" aria-hidden="${l?"false":"true"}">${this.helpText}</slot></div>`}};x.styles=[m,t.styles,a`:host{display:block}:host([required]) #label.has-label::after{content:'*';margin-left:var(--sd-spacing-0-5,.125rem)}.no-scrollbar::-webkit-scrollbar{display:none}`],b([p("[part=textarea]")],x.prototype,"textarea",2),b([d()],x.prototype,"hasFocus",2),b([r()],x.prototype,"title",2),b([r()],x.prototype,"name",2),b([r()],x.prototype,"value",2),b([r({reflect:!0})],x.prototype,"size",2),b([r()],x.prototype,"label",2),b([r({attribute:"help-text"})],x.prototype,"helpText",2),b([r()],x.prototype,"placeholder",2),b([r({type:Number})],x.prototype,"rows",2),b([r({type:Boolean,reflect:!0})],x.prototype,"disabled",2),b([r({type:Boolean,reflect:!0})],x.prototype,"readonly",2),b([r({reflect:!0})],x.prototype,"form",2),b([r({type:Boolean,reflect:!0})],x.prototype,"required",2),b([r({type:Number})],x.prototype,"minlength",2),b([r({type:Number})],x.prototype,"maxlength",2),b([r()],x.prototype,"autocapitalize",2),b([r()],x.prototype,"autocorrect",2),b([r()],x.prototype,"autocomplete",2),b([r({type:Boolean})],x.prototype,"autofocus",2),b([r()],x.prototype,"enterkeyhint",2),b([r({type:Boolean,converter:{fromAttribute:t=>!(!t||"false"===t),toAttribute:t=>t?"true":"false"}})],x.prototype,"spellcheck",2),b([r()],x.prototype,"inputmode",2),b([o()],x.prototype,"defaultValue",2),b([c("disabled",{waitUntilFirstUpdate:!0})],x.prototype,"handleDisabledChange",1),b([c("rows",{waitUntilFirstUpdate:!0})],x.prototype,"handleRowsChange",1),b([c("value",{waitUntilFirstUpdate:!0})],x.prototype,"handleValueChange",1),x=b([l("sd-textarea")],x);export{x as default};
+import{S as t,x as e,i as a,n as l}from"./solid-element.js";import{c as r}from"./register-custom-element.js";import{d as s}from"./default-value.js";import{F as o}from"./form.js";import{H as i}from"./slot.js";import{o as h}from"./if-defined.js";import{l as n}from"./live.js";import{r as d}from"./state.js";import{e as p}from"./query.js";import{w as u}from"./watch.js";import{c}from"./component.styles.js";import{t as m}from"./classix.js";import"./directive.js";var y=Object.defineProperty,b=Object.getOwnPropertyDescriptor,x=(t,e,a,l)=>{for(var r,s=l>1?void 0:l?b(e,a):e,o=t.length-1;o>=0;o--)(r=t[o])&&(s=(l?r(e,a,s):r(s))||s);return l&&s&&y(e,a,s),s};let v=class extends t{constructor(){super(...arguments),this.formControlController=new o(this),this.hasSlotController=new i(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.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.textarea.reportValidity()}setCustomValidity(t){this.textarea.setCustomValidity(t),this.formControlController.updateValidity()}render(){const t=this.hasSlotController.test("label"),a=this.hasSlotController.test("help-text"),l=!!this.label||!!t,r=!!this.helpText||!!a,s=this.disabled?"disabled":this.readonly?"readonly":this.hasFocus&&this.showInvalidStyle?"activeInvalid":this.hasFocus&&this.showValidStyle?"activeValid":this.hasFocus?"active":this.showInvalidStyle?"invalid":this.showValidStyle?"valid":"default",o="sm"===this.size?"text-sm":"text-base",i={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="${m("mb-2",l?"inline-block":"hidden",o)}" for="input" aria-hidden="${l?"false":"true"}"><slot name="label">${this.label}</slot></label><div part="form-control-input" class="${m("relative w-full",this.disabled&&"cursor-not-allowed")}"><div part="border" class="${m("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"}[s])}"></div><div part="base" class="${m("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"}[s],this.disabled||this.readonly?"":"hover:bg-neutral-200",this.readonly&&"bg-neutral-100")}"><textarea part="textarea" id="input" class="${m("flex-grow focus:outline-none bg-transparent placeholder-neutral-700 resize-none",this.disabled&&"cursor-not-allowed",o)}" title="${this.title}" name="${h(this.name)}" .value="${n(this.value)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" placeholder="${h(this.placeholder)}" minlength="${h(this.minlength)}" maxlength="${h(this.maxlength)}" rows="${h(this.rows)}" autocapitalize="${h(this.autocapitalize)}" autocorrect="${h(this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${h(this.spellcheck)}" enterkeyhint="${h(this.enterkeyhint)}" inputmode="${h(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-icon class="${m("text-error absolute right-4 bg-white group-hover:bg-neutral-200",i)}" library="system" name="risk"></sd-icon>`:""} ${this.showValidStyle?e`<sd-icon class="${m("text-success absolute right-4 bg-white group-hover:bg-neutral-200",i)}" library="system" name="confirm"></sd-icon>`:""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${m("text-sm text-neutral-700",r?"block":"hidden")}" aria-hidden="${r?"false":"true"}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`}};v.styles=[c,t.styles,a`:host{display:block}:host([required]) #label::after{content:' *'}.no-scrollbar::-webkit-scrollbar{display:none}`],x([p("#input")],v.prototype,"textarea",2),x([p("#invalid-message")],v.prototype,"invalidMessage",2),x([d()],v.prototype,"hasFocus",2),x([d()],v.prototype,"showValidStyle",2),x([d()],v.prototype,"showInvalidStyle",2),x([l()],v.prototype,"title",2),x([l()],v.prototype,"name",2),x([l()],v.prototype,"value",2),x([l({reflect:!0})],v.prototype,"size",2),x([l()],v.prototype,"label",2),x([l({attribute:"help-text"})],v.prototype,"helpText",2),x([l()],v.prototype,"placeholder",2),x([l({type:Number})],v.prototype,"rows",2),x([l({type:Boolean,reflect:!0})],v.prototype,"disabled",2),x([l({type:Boolean,reflect:!0})],v.prototype,"readonly",2),x([l({reflect:!0})],v.prototype,"form",2),x([l({type:Boolean,reflect:!0})],v.prototype,"required",2),x([l({type:Number})],v.prototype,"minlength",2),x([l({type:Number})],v.prototype,"maxlength",2),x([l()],v.prototype,"autocapitalize",2),x([l()],v.prototype,"autocorrect",2),x([l()],v.prototype,"autocomplete",2),x([l({type:Boolean})],v.prototype,"autofocus",2),x([l()],v.prototype,"enterkeyhint",2),x([l({type:Boolean,converter:{fromAttribute:t=>!(!t||"false"===t),toAttribute:t=>t?"true":"false"}})],v.prototype,"spellcheck",2),x([l()],v.prototype,"inputmode",2),x([s()],v.prototype,"defaultValue",2),x([u("disabled",{waitUntilFirstUpdate:!0})],v.prototype,"handleDisabledChange",1),x([u("rows",{waitUntilFirstUpdate:!0})],v.prototype,"handleRowsChange",1),x([u("value",{waitUntilFirstUpdate:!0})],v.prototype,"handleValueChange",1),v=x([r("sd-textarea")],v);export{v as default};