@solid-design-system/components 3.8.1 → 3.10.0

package/dist/components/es/brandshape.js

@@ -1 +1 @@
-import{S as t,x as e,t as s,c as r,i,e as a,n as o,a as n}from"./solid-components2.js";import{r as p}from"./state.js";var l=Object.defineProperty,h=Object.getOwnPropertyDescriptor,v=(t,e,s,r)=>{for(var i,a=r>1?void 0:r?h(e,s):e,o=t.length-1;o>=0;o--)(i=t[o])&&(a=(r?i(e,s,a):i(a))||a);return r&&a&&l(e,s,a),a};let d=class extends t{constructor(){super(...arguments),this.variant="primary",this.shapes=["top","middle","bottom"],this.componentBreakpoint=0}getSvg(t,e){return{0:this.smallSvg(e),414:this.mediumSvg(e),640:this.largeSvg(e)}[t]}largeSvg(t){return"top"===t?e`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 121"><path d="M610.777 1.393.001 120.146 0 123h700.001V74.79c0-4.797-.462-9.585-1.381-14.294-7.909-40.537-47.237-66.998-87.843-59.103Z"/></svg>`:e`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 123"><path d="M89.224 121.607 700 2.854 700.001 0h-700L0 48.21c0 4.797.463 9.584 1.381 14.294 7.909 40.537 47.237 66.998 87.843 59.103Z"/></svg>`}mediumSvg(t){return"top"===t?e`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 119"><path d="M597.75 1.6 0 118.046V121h700V85.872c0-5.509-.53-11.006-1.583-16.413-9.063-46.543-54.133-76.924-100.667-67.86Z"/></svg>`:e`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 121"><path d="M102.25 119.4 700 2.954V0H0v35.128c0 5.509.53 11.006 1.583 16.413 9.063 46.543 54.134 76.924 100.667 67.859Z"/></svg>`}smallSvg(t){return"top"===t?e`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 113"><path d="M566.951 2.08 0 112.466v2.934h700v-3.672c0-7.166-.689-14.314-2.059-21.348-11.789-60.557-70.436-100.09-130.99-88.3Z"/></svg>`:e`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 116"><path d="M133.049 113.32 700 2.934V0H0v3.672c0 7.165.69 14.314 2.059 21.348 11.79 60.557 70.436 100.09 130.99 88.3Z"/></svg>`}setBreakpoint(){switch(!0){case this.containerElem.clientWidth<=414:this.componentBreakpoint=0;break;case this.containerElem.clientWidth<640:this.componentBreakpoint=414;break;default:this.componentBreakpoint=640}}connectedCallback(){super.connectedCallback(),this.resizeObserver=new ResizeObserver((()=>this.setBreakpoint())),this.updateComplete.then((()=>{this.setBreakpoint(),this.resizeObserver.observe(this.containerElem)}))}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver.unobserve(this.containerElem)}renderTopBrandshape(){return e`<div class="relative" part="shape-top">${1===this.shapes.length?e`<div class="relative">${this.getSvg(this.componentBreakpoint,"top")}<div part="content" class="absolute bottom-0 right-0 flex items-end w-2/5 h-2/3 px-6 py-4"><slot></slot></div></div>`:this.getSvg(this.componentBreakpoint,"top")} ${this.renderWhitespaceFix("top")}</div>`}renderMiddleBrandshape(){return e`<div class="${s({0:"px-6 py-4",414:"px-10 py-8",640:"px-10 py-8"}[this.componentBreakpoint],"w-full block relative")}"><div part="shape-middle" class="${s({"neutral-100":"bg-neutral-100",primary:"bg-primary",white:"bg-white"}[this.variant],"w-full block absolute h-full top-0 left-0 z-0")}"></div><div class="z-10 relative" part="content"><slot></slot></div></div>`}renderBottomBrandshape(){return e`<div class="relative" part="shape-bottom">${this.getSvg(this.componentBreakpoint,"bottom")}${this.renderWhitespaceFix("bottom")}</div>`}renderWhitespaceFix(t){return e`<div class="${s({"neutral-100":"bg-neutral-100",primary:"bg-primary",white:"bg-white"}[this.variant],{top:"bottom-0",bottom:"top-0"}[t],"block absolute left-0 w-full h-[1px]")}"></div>`}render(){return e`<div class="${s({"neutral-100":"fill-neutral-100",primary:"fill-primary",white:"fill-white"}[this.variant])}" part="base">${this.shapes.includes("top")?this.renderTopBrandshape():null} ${this.shapes.includes("middle")?this.renderMiddleBrandshape():null} ${this.shapes.includes("bottom")?this.renderBottomBrandshape():null}</div>`}};d.styles=[r,t.styles,i`:host{display:block}`],v([a("[part=base]")],d.prototype,"containerElem",2),v([o({type:String})],d.prototype,"variant",2),v([o({type:Array})],d.prototype,"shapes",2),v([p()],d.prototype,"componentBreakpoint",2),d=v([n("sd-brandshape")],d);export{d as default};
+import{S as e,x as t,t as r,c as i,i as a,e as s,n as o,a as n}from"./solid-components2.js";import{r as p}from"./state.js";var d=Object.defineProperty,l=Object.getOwnPropertyDescriptor,h=(e,t,r,i)=>{for(var a,s=i>1?void 0:i?l(t,r):t,o=e.length-1;o>=0;o--)(a=e[o])&&(s=(i?a(t,r,s):a(s))||s);return i&&s&&d(t,r,s),s};let c=class extends e{constructor(){super(...arguments),this.variant="primary",this.shapes=["top","middle","bottom"],this.componentBreakpoint=0}getSvg(e,t){return{0:this.smallSvg(t),414:this.mediumSvg(t),640:this.largeSvg(t)}[e]}largeSvg(e){return"top"===e?t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 121"><path d="M610.777 1.393.001 120.146 0 123h700.001V74.79c0-4.797-.462-9.585-1.381-14.294-7.909-40.537-47.237-66.998-87.843-59.103Z"/></svg>`:t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 123"><path d="M89.224 121.607 700 2.854 700.001 0h-700L0 48.21c0 4.797.463 9.584 1.381 14.294 7.909 40.537 47.237 66.998 87.843 59.103Z"/></svg>`}mediumSvg(e){return"top"===e?t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 119"><path d="M597.75 1.6 0 118.046V121h700V85.872c0-5.509-.53-11.006-1.583-16.413-9.063-46.543-54.133-76.924-100.667-67.86Z"/></svg>`:t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 121"><path d="M102.25 119.4 700 2.954V0H0v35.128c0 5.509.53 11.006 1.583 16.413 9.063 46.543 54.134 76.924 100.667 67.859Z"/></svg>`}smallSvg(e){return"top"===e?t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 113"><path d="M566.951 2.08 0 112.466v2.934h700v-3.672c0-7.166-.689-14.314-2.059-21.348-11.789-60.557-70.436-100.09-130.99-88.3Z"/></svg>`:t`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 116"><path d="M133.049 113.32 700 2.934V0H0v3.672c0 7.165.69 14.314 2.059 21.348 11.79 60.557 70.436 100.09 130.99 88.3Z"/></svg>`}setBreakpoint(){switch(!0){case this.containerElem.clientWidth<=414:this.componentBreakpoint=0;break;case this.containerElem.clientWidth<640:this.componentBreakpoint=414;break;default:this.componentBreakpoint=640}}connectedCallback(){super.connectedCallback(),this.resizeObserver=new ResizeObserver((()=>this.setBreakpoint())),this.updateComplete.then((()=>{this.setBreakpoint(),this.resizeObserver.observe(this.containerElem)}))}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver.unobserve(this.containerElem)}renderTopBrandshape(){return t`<div class="relative" part="shape-top">${1===this.shapes.length?t`<div class="relative">${this.getSvg(this.componentBreakpoint,"top")}<div part="content" class="absolute bottom-0 right-0 flex items-end w-2/5 h-2/3 px-6 py-4"><slot></slot></div></div>`:this.getSvg(this.componentBreakpoint,"top")} ${this.renderWhitespaceFix("top")}</div>`}renderMiddleBrandshape(){return t`<div class="${r({0:"px-6 py-4",414:"px-10 py-8",640:"px-10 py-8"}[this.componentBreakpoint],"w-full block relative")}"><div part="shape-middle" class="${r({"neutral-100":"bg-neutral-100",primary:"bg-primary",white:"bg-white","border-white":"bg-transparent","border-primary":"bg-transparent",image:"bg-transparent"}[this.variant],"w-full block absolute h-full top-0 left-0 z-0")}"></div><div class="z-10 relative" part="content"><slot></slot></div></div>`}renderBottomBrandshape(){return t`<div class="relative" part="shape-bottom">${this.getSvg(this.componentBreakpoint,"bottom")}${this.renderWhitespaceFix("bottom")}</div>`}renderWhitespaceFix(e){return t`<div class="${r({"neutral-100":"bg-neutral-100",primary:"bg-primary",white:"bg-white","border-white":"bg-transparent","border-primary":"bg-transparent",image:"bg-transparent"}[this.variant],{top:"bottom-0",bottom:"top-0"}[e],"block absolute left-0 w-full h-[1px]")}"></div>`}renderSkewedBorder(){return t`<div class="${r("border-primary"===this.variant?"container--outline-primary":"","border-white"===this.variant?"container--outline-white":"","container--stylized bg-transparent py-10 relative z-10 border-0;")}">${this.renderTopBrandshape()} ${this.renderMiddleBrandshape()} ${this.renderBottomBrandshape()}</div>`}renderSkewedImage(){return t`<div class="container--stylized bg-transparent py-10 relative z-10 border-0;"><div class="image-wrapper"><slot name="image"></slot></div>${this.renderTopBrandshape()} ${this.renderMiddleBrandshape()} ${this.renderBottomBrandshape()}</div>`}renderShapes(){return t`${this.shapes.includes("top")?this.renderTopBrandshape():""} ${this.shapes.includes("middle")?this.renderMiddleBrandshape():""} ${this.shapes.includes("bottom")?this.renderBottomBrandshape():""}`}render(){const e=this.variant.startsWith("border-"),i="image"===this.variant;return t`<div class="${r({"neutral-100":"fill-neutral-100",primary:"fill-primary",white:"fill-white","border-white":"fill-transparent","border-primary":"fill-transparent",image:"fill-transparent"}[this.variant])}" part="base">${e?this.renderSkewedBorder():""} ${i?this.renderSkewedImage():""} ${e||i?"":this.renderShapes()}<slot></slot></div>`}};c.styles=[i,e.styles,a`:host{display:block}.container--outline-primary::before{--internal-border-color:rgb(var(--sd-color-primary, 0 53 142));--internal-border-width:2px}.container--outline-white::before{--internal-border-color:var(--sd-color-white, white);--internal-border-width:2px}.container--stylized::before{position:absolute;inset:var(--sd-spacing-0,0);top:var(--sd-spacing-0,0);bottom:var(--sd-spacing-0,0);right:var(--sd-spacing-0,0);left:var(--sd-spacing-0,0);z-index:-1;border-style:solid;content:'';color:var(--internal-color,#000);border-color:var(--internal-border-color,#000);border-width:var(--internal-border-width,0);border-radius:0 60px;margin-bottom:calc(21.256% / 2);margin-top:calc(21.256% / 2);transform:skewY(-11deg)}.image-wrapper{position:absolute;top:var(--sd-spacing-0,0);left:var(--sd-spacing-0,0);z-index:10;width:100%;overflow:hidden;height:-webkit-fill-available;margin-bottom:calc(21.256% / 2);margin-top:calc(21.256% / 2);border-radius:0 60px;transform:skewY(-11deg)}slot[name=image]::slotted(img){height:100%;width:100%;transform-origin:top left;-o-object-fit:cover;object-fit:cover;transform:skewY(11deg)}@media (min-width:414px){.container--stylized::before,.image-wrapper{border-radius:0 72px}}@media (min-width:640px){.container--stylized::before,.image-wrapper{border-radius:0 84px}}`],h([s("[part=base]")],c.prototype,"containerElem",2),h([o({type:String})],c.prototype,"variant",2),h([o({type:Array})],c.prototype,"shapes",2),h([p()],c.prototype,"componentBreakpoint",2),c=h([n("sd-brandshape")],c);export{c as default};

package/dist/components/es/input.js

@@ -1 +1 @@
-import"./icon.js";import{S as t,L as e,x as s,t as i,c as l,i as a,e as o,n as r,a as n}from"./solid-components2.js";import{d as p}from"./default-value.js";import{F as h}from"./form.js";import{H as d}from"./slot.js";import{o as u}from"./if-defined.js";import{l as c}from"./live.js";import{r as y}from"./state.js";import{w as m}from"./watch.js";var b,v=Object.defineProperty,f=Object.getOwnPropertyDescriptor,g=(t,e,s,i)=>{for(var l,a=i>1?void 0:i?f(e,s):e,o=t.length-1;o>=0;o--)(l=t[o])&&(a=(i?l(e,s,a):l(a))||a);return i&&a&&v(e,s,a),a};const w=!(null==(b=navigator.userAgentData)?void 0:b.brands.some((t=>t.brand.includes("Chromium"))))&&navigator.userAgent.includes("Firefox");let x=class extends t{constructor(){super(...arguments),this.formControlController=new h(this),this.hasSlotController=new d(this,"help-text","label","left","right","message","placeholder"),this.localize=new e(this),this.hasFocus=!1,this.showValidStyle=!1,this.showInvalidStyle=!1,this.type="text",this.size="lg",this.value="",this.defaultValue="",this.placeholder="",this.label="",this.helpText="",this.clearable=!1,this.disabled=!1,this.readonly=!1,this.passwordToggle=!1,this.passwordVisible=!1,this.noSpinButtons=!1,this.form="",this.name="",this.title="",this.required=!1,this.styleOnValid=!1,this.spellcheck=!0}get valueAsDate(){var t;return(null==(t=this.input)?void 0:t.valueAsDate)??null}set valueAsDate(t){const e=document.createElement("input");e.type="date",e.valueAsDate=t,this.value=e.value}get valueAsNumber(){var t;return(null==(t=this.input)?void 0:t.valueAsNumber)??parseFloat(this.value)}set valueAsNumber(t){const e=document.createElement("input");e.type="number",e.valueAsNumber=t,this.value=e.value}get validity(){return this.input.validity}firstUpdated(){this.formControlController.updateValidity()}handleBlur(){this.hasFocus=!1,this.emit("sd-blur")}handleChange(){this.value=this.input.value,this.emit("sd-change")}handleClearClick(t){this.value="",this.emit("sd-clear"),this.emit("sd-input"),this.emit("sd-change"),this.input.focus(),t.stopPropagation()}handleFocus(){this.hasFocus=!0,this.emit("sd-focus")}handleInput(){this.value=this.input.value,this.formControlController.updateValidity(),this.emit("sd-input")}handleInvalid(t){this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(t),this.invalidMessage.textContent=t.target.validationMessage}handleKeyDown(t){const e=t.metaKey||t.ctrlKey||t.shiftKey||t.altKey;"Enter"===t.key&&!e&&setTimeout((()=>{!t.defaultPrevented&&!t.isComposing&&this.formControlController.submit()}))}handlePasswordToggle(){this.passwordVisible=!this.passwordVisible}handleDisabledChange(){this.formControlController.setValidity(this.disabled)}handleStepChange(){this.input.step=String(this.step),this.formControlController.updateValidity()}async handleValueChange(){await this.updateComplete,this.formControlController.updateValidity()}focus(t){this.input.focus(t)}blur(){this.input.blur()}select(){this.input.select()}setSelectionRange(t,e,s="none"){this.input.setSelectionRange(t,e,s)}setRangeText(t,e,s,i){this.input.setRangeText(t,e,s,i),this.value!==this.input.value&&(this.value=this.input.value)}showPicker(){"showPicker"in HTMLInputElement.prototype&&this.input.showPicker()}stepUp(){this.input.stepUp(),this.value!==this.input.value&&(this.value=this.input.value)}stepDown(){this.input.stepDown(),this.value!==this.input.value&&(this.value=this.input.value)}checkValidity(){var t;return null==(t=this.input)?void 0:t.checkValidity()}reportValidity(){return this.formControlController.fakeUserInteraction(),this.input.reportValidity()}setCustomValidity(t){this.input.setCustomValidity(t),this.formControlController.updateValidity()}render(){const t=this.hasSlotController.test("label"),e=this.hasSlotController.test("help-text"),l=(this.hasSlotController.test("description"),this.hasSlotController.test("left")),a=this.hasSlotController.test("right"),o=!!this.label||!!t,r=!!this.helpText||!!e,n=this.clearable&&!this.readonly&&("number"==typeof this.value||this.value.length>0),p=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",h="sm"===this.size?"text-sm":"text-base",d={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"}[p],y={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"}[p],m=this.disabled?"text-neutral-500":"text-primary",b={sm:"ml-1",md:"ml-2",lg:"ml-2"}[this.size],v={sm:"text-base",md:"text-lg",lg:"text-xl"}[this.size];return s`<div part="form-control" class="${i(this.disabled&&"pointer-events-none")}"><label part="form-control-label" id="label" class="${i("mb-2",o?"inline-block":"hidden",h)}" for="input" aria-hidden="${o?"false":"true"}"><slot name="label">${this.label}</slot></label><div part="form-control-input" class="relative w-full"><div part="border" class="${i("absolute w-full h-full pointer-events-none border rounded-default",y)}"></div><div part="base" class="${i("px-4 flex flex-row items-center rounded-default transition-all bg-white","lg"===this.size?"py-2":"py-1",this.disabled||this.readonly?"":"hover:bg-neutral-200",this.readonly&&"bg-neutral-100",d)}">${l?s`<slot name="left" part="left" class="${i("inline-flex","sm"===this.size?"mr-1":"mr-2",m,v)}"></slot>`:""} <input part="input" id="input" class="${i("min-w-0 flex-grow focus:outline-none bg-transparent placeholder-neutral-700","sm"===this.size?"h-6":"h-8",h)}" type="${"password"===this.type&&this.passwordVisible?"text":this.type}" title="${this.title}" name="${u(this.name)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" placeholder="${u(this.placeholder)}" minlength="${u(this.minlength)}" maxlength="${u(this.maxlength)}" min="${u(this.min)}" max="${u(this.max)}" step="${u(this.step)}" .value="${c(this.value)}" autocapitalize="${u("password"===this.type?"off":this.autocapitalize)}" autocomplete="${u("password"===this.type?"off":this.autocomplete)}" autocorrect="${u("password"===this.type?"off":this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${this.spellcheck}" pattern="${u(this.pattern)}" enterkeyhint="${u(this.enterkeyhint)}" inputmode="${u(this.inputmode)}" aria-describedby="help-text" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"> ${n?s`<button part="clear-button" class="${i("flex justify-center ",b)}" type="button" aria-label="${this.localize.term("clearEntry")}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-icon class="${i("text-neutral-500",v)}" library="system" name="closing-round"></sd-icon></slot></button>`:""} ${this.passwordToggle&&"password"===this.type?s`<button aria-label="${this.localize.term(this.passwordVisible?"hidePassword":"showPassword")}" part="password-toggle-button" class="flex items-center" type="button" @click="${this.handlePasswordToggle}" tabindex="-1">${this.passwordVisible?s`<slot name="show-password-icon"><sd-icon class="${i(m,b,v)}" library="system" name="eye"></sd-icon></slot>`:s`<slot name="hide-password-icon"><sd-icon class="${i(m,b,v)}" library="system" name="eye-crossed-out"></sd-icon></slot>`}</button>`:""} ${"date"!==this.type&&"datetime-local"!==this.type||w?"":s`<sd-icon class="${i(m,b,v)}" library="system" name="calendar"></sd-icon>`} ${"time"===this.type?s`<sd-icon class="${i(m,b,v)}" library="system" name="clock"></sd-icon>`:""} ${"search"===this.type?s`<button class="flex items-center" type="button" tabindex="-1"><sd-icon class="${i(m,b,v)}" library="system" name="magnifying-glass"></sd-icon></button>`:""} ${this.showInvalidStyle?s`<sd-icon part="invalid-icon" class="${i("text-error",b,v)}" library="system" name="risk"></sd-icon>`:""} ${this.showValidStyle&&this.styleOnValid?s`<sd-icon class="${i("text-success flex-shrink-0",b,v)}" library="system" name="status-check" part="valid-icon"></sd-icon>`:""} ${a?s`<slot name="right" part="right" class="${i("inline-flex",m,b,v)}"></slot>`:""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${i("text-sm text-neutral-700",r?"block":"hidden")}" aria-hidden="${!r}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`}};x.styles=[l,t.styles,a`:host{position:relative;box-sizing:border-box;display:inline-block;width:100%;text-align:left}:host([vertical]){display:block}:host([required]) #label::after{content:' *'}details summary::-webkit-details-marker{display:none}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[type=time]::-webkit-calendar-picker-indicator{background:0 0}details summary::-webkit-details-marker,input[type=date]::-webkit-calendar-picker-indicator,input[type=datetime-local]::-webkit-calendar-picker-indicator,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}`],g([o("#input")],x.prototype,"input",2),g([o("#invalid-message")],x.prototype,"invalidMessage",2),g([y()],x.prototype,"hasFocus",2),g([y()],x.prototype,"showValidStyle",2),g([y()],x.prototype,"showInvalidStyle",2),g([r({reflect:!0})],x.prototype,"type",2),g([r({reflect:!0})],x.prototype,"size",2),g([r()],x.prototype,"inputmode",2),g([r()],x.prototype,"value",2),g([p()],x.prototype,"defaultValue",2),g([r()],x.prototype,"placeholder",2),g([r()],x.prototype,"label",2),g([r({attribute:"help-text"})],x.prototype,"helpText",2),g([r({type:Boolean})],x.prototype,"clearable",2),g([r({type:Boolean,reflect:!0})],x.prototype,"disabled",2),g([r({type:Boolean,reflect:!0})],x.prototype,"readonly",2),g([r({attribute:"password-toggle",type:Boolean})],x.prototype,"passwordToggle",2),g([r({attribute:"password-visible",type:Boolean})],x.prototype,"passwordVisible",2),g([r({attribute:"no-spin-buttons",type:Boolean})],x.prototype,"noSpinButtons",2),g([r({type:Number})],x.prototype,"minlength",2),g([r({type:Number})],x.prototype,"maxlength",2),g([r({type:Number})],x.prototype,"min",2),g([r({type:Number})],x.prototype,"max",2),g([r({reflect:!0})],x.prototype,"form",2),g([r()],x.prototype,"name",2),g([r()],x.prototype,"title",2),g([r({type:Boolean,reflect:!0})],x.prototype,"required",2),g([r()],x.prototype,"pattern",2),g([r()],x.prototype,"step",2),g([r()],x.prototype,"autocapitalize",2),g([r()],x.prototype,"autocorrect",2),g([r()],x.prototype,"autocomplete",2),g([r({type:Boolean})],x.prototype,"autofocus",2),g([r()],x.prototype,"enterkeyhint",2),g([r({type:Boolean,reflect:!0,attribute:"style-on-valid"})],x.prototype,"styleOnValid",2),g([r({type:Boolean,converter:{fromAttribute:t=>!(!t||"false"===t),toAttribute:t=>t?"true":"false"}})],x.prototype,"spellcheck",2),g([m("disabled",{waitUntilFirstUpdate:!0})],x.prototype,"handleDisabledChange",1),g([m("step",{waitUntilFirstUpdate:!0})],x.prototype,"handleStepChange",1),g([m("value",{waitUntilFirstUpdate:!0})],x.prototype,"handleValueChange",1),x=g([n("sd-input")],x);export{x as default};
+import"./icon.js";import{S as t,L as e,x as s,t as i,c as l,i as a,e as o,n as r,a as n}from"./solid-components2.js";import{d as p}from"./default-value.js";import{F as h}from"./form.js";import{H as d}from"./slot.js";import{o as u}from"./if-defined.js";import{l as c}from"./live.js";import{r as y}from"./state.js";import{w as m}from"./watch.js";var b,v=Object.defineProperty,f=Object.getOwnPropertyDescriptor,g=(t,e,s,i)=>{for(var l,a=i>1?void 0:i?f(e,s):e,o=t.length-1;o>=0;o--)(l=t[o])&&(a=(i?l(e,s,a):l(a))||a);return i&&a&&v(e,s,a),a};const w=!(null==(b=navigator.userAgentData)?void 0:b.brands.some((t=>t.brand.includes("Chromium"))))&&navigator.userAgent.includes("Firefox");let x=class extends t{constructor(){super(...arguments),this.formControlController=new h(this),this.hasSlotController=new d(this,"help-text","label","left","right","message","placeholder"),this.localize=new e(this),this.hasFocus=!1,this.showValidStyle=!1,this.showInvalidStyle=!1,this.type="text",this.size="lg",this.value="",this.defaultValue="",this.placeholder="",this.label="",this.helpText="",this.clearable=!1,this.disabled=!1,this.readonly=!1,this.passwordToggle=!1,this.passwordVisible=!1,this.noSpinButtons=!1,this.form="",this.name="",this.title="",this.required=!1,this.styleOnValid=!1,this.spellcheck=!0}get valueAsDate(){var t;return(null==(t=this.input)?void 0:t.valueAsDate)??null}set valueAsDate(t){const e=document.createElement("input");e.type="date",e.valueAsDate=t,this.value=e.value}get valueAsNumber(){var t;return(null==(t=this.input)?void 0:t.valueAsNumber)??parseFloat(this.value)}set valueAsNumber(t){const e=document.createElement("input");e.type="number",e.valueAsNumber=t,this.value=e.value}get validity(){return this.input.validity}firstUpdated(){this.formControlController.updateValidity()}handleBlur(){this.hasFocus=!1,this.emit("sd-blur")}handleChange(){this.value=this.input.value,this.emit("sd-change")}handleClearClick(t){this.value="",this.emit("sd-clear"),this.emit("sd-input"),this.emit("sd-change"),this.input.focus(),t.stopPropagation()}handleFocus(){this.hasFocus=!0,this.emit("sd-focus")}handleInput(){this.value=this.input.value,this.formControlController.updateValidity(),this.emit("sd-input")}handleInvalid(t){this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(t),this.invalidMessage.textContent=t.target.validationMessage}handleKeyDown(t){const e=t.metaKey||t.ctrlKey||t.shiftKey||t.altKey;"Enter"===t.key&&!e&&setTimeout((()=>{!t.defaultPrevented&&!t.isComposing&&this.formControlController.submit()}))}handlePasswordToggle(){this.passwordVisible=!this.passwordVisible}handleDisabledChange(){this.formControlController.setValidity(this.disabled)}handleStepChange(){this.input.step=String(this.step),this.formControlController.updateValidity()}async handleValueChange(){await this.updateComplete,this.formControlController.updateValidity()}focus(t){this.input.focus(t)}blur(){this.input.blur()}select(){this.input.select()}setSelectionRange(t,e,s="none"){this.input.setSelectionRange(t,e,s)}setRangeText(t,e,s,i){this.input.setRangeText(t,e,s,i),this.value!==this.input.value&&(this.value=this.input.value)}showPicker(){"showPicker"in HTMLInputElement.prototype&&this.input.showPicker()}stepUp(){this.input.stepUp(),this.value!==this.input.value&&(this.value=this.input.value)}stepDown(){this.input.stepDown(),this.value!==this.input.value&&(this.value=this.input.value)}checkValidity(){var t;return null==(t=this.input)?void 0:t.checkValidity()}reportValidity(){return this.formControlController.fakeUserInteraction(),this.input.reportValidity()}setCustomValidity(t){this.input.setCustomValidity(t),this.formControlController.updateValidity()}render(){const t=this.hasSlotController.test("label"),e=this.hasSlotController.test("help-text"),l=(this.hasSlotController.test("description"),this.hasSlotController.test("left")),a=this.hasSlotController.test("right"),o=!!this.label||!!t,r=!!this.helpText||!!e,n=this.clearable&&!this.readonly&&("number"==typeof this.value||this.value.length>0),p=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",h="sm"===this.size?"text-sm":"text-base",d={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"}[p],y={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"}[p],m=this.disabled?"text-neutral-500":"text-primary",b={sm:"ml-1",md:"ml-2",lg:"ml-2"}[this.size],v={sm:"text-base",md:"text-lg",lg:"text-xl"}[this.size];return s`<div part="form-control" class="${i(this.disabled&&"pointer-events-none")}"><label part="form-control-label" id="label" class="${i("mb-2",o?"inline-block":"hidden",h)}" for="input" aria-hidden="${o?"false":"true"}"><slot name="label">${this.label}</slot></label><div part="form-control-input" class="relative w-full"><div part="border" class="${i("absolute w-full h-full pointer-events-none border rounded-default",y)}"></div><div part="base" class="${i("px-4 flex flex-row items-center rounded-default transition-all bg-white","lg"===this.size?"py-2":"py-1",this.disabled||this.readonly?"":"hover:bg-neutral-200",this.readonly&&"bg-neutral-100",d)}">${l?s`<slot name="left" part="left" class="${i("inline-flex","sm"===this.size?"mr-1":"mr-2",m,v)}"></slot>`:""} <input part="input" id="input" class="${i("min-w-0 flex-grow focus:outline-none bg-transparent placeholder-neutral-700","sm"===this.size?"h-6":"h-8",h)}" type="${"password"===this.type&&this.passwordVisible?"text":this.type}" title="${this.title}" name="${u(this.name)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" placeholder="${u(this.placeholder)}" minlength="${u(this.minlength)}" maxlength="${u(this.maxlength)}" min="${u(this.min)}" max="${u(this.max)}" step="${u(this.step)}" .value="${c(this.value)}" autocapitalize="${u("password"===this.type?"off":this.autocapitalize)}" autocomplete="${u("password"===this.type?"off":this.autocomplete)}" autocorrect="${u("password"===this.type?"off":this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${this.spellcheck}" pattern="${u(this.pattern)}" enterkeyhint="${u(this.enterkeyhint)}" inputmode="${u(this.inputmode)}" aria-describedby="help-text" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"> ${n?s`<button part="clear-button" class="${i("flex justify-center ",b)}" type="button" aria-label="${this.localize.term("clearEntry")}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-icon class="${i("text-neutral-500",v)}" library="system" name="closing-round"></sd-icon></slot></button>`:""} ${this.passwordToggle&&"password"===this.type?s`<button aria-label="${this.localize.term(this.passwordVisible?"hidePassword":"showPassword")}" part="password-toggle-button" class="flex items-center" type="button" @click="${this.handlePasswordToggle}" tabindex="-1">${this.passwordVisible?s`<slot name="show-password-icon"><sd-icon class="${i(m,b,v)}" library="system" name="eye"></sd-icon></slot>`:s`<slot name="hide-password-icon"><sd-icon class="${i(m,b,v)}" library="system" name="eye-crossed-out"></sd-icon></slot>`}</button>`:""} ${"date"!==this.type&&"datetime-local"!==this.type||w?"":s`<sd-icon class="${i(m,b,v)}" library="system" name="calendar"></sd-icon>`} ${"time"===this.type?s`<sd-icon class="${i(m,b,v)}" library="system" name="clock"></sd-icon>`:""} ${"search"===this.type?s`<button class="flex items-center" type="button" tabindex="-1"><sd-icon class="${i(m,b,v)}" library="system" name="magnifying-glass"></sd-icon></button>`:""} ${this.showInvalidStyle?s`<sd-icon part="invalid-icon" class="${i("text-error",b,v)}" library="system" name="risk"></sd-icon>`:""} ${this.showValidStyle&&this.styleOnValid?s`<sd-icon class="${i("text-success flex-shrink-0",b,v)}" library="system" name="status-check" part="valid-icon"></sd-icon>`:""} ${a?s`<slot name="right" part="right" class="${i("inline-flex",m,b,v)}"></slot>`:""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${i("text-sm text-neutral-700",r?"block":"hidden")}" aria-hidden="${!r}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`}};x.styles=[l,t.styles,a`:host{position:relative;box-sizing:border-box;display:inline-block;width:100%;text-align:left}:host([vertical]){display:block}:host([required]) #label::after{content:' *'}details summary::-webkit-details-marker{display:none}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[type=time]::-webkit-calendar-picker-indicator{background:0 0}details summary::-webkit-details-marker,input[type=date]::-webkit-calendar-picker-indicator,input[type=datetime-local]::-webkit-calendar-picker-indicator,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}`],g([o("#input")],x.prototype,"input",2),g([o("#invalid-message")],x.prototype,"invalidMessage",2),g([y()],x.prototype,"hasFocus",2),g([y()],x.prototype,"showValidStyle",2),g([y()],x.prototype,"showInvalidStyle",2),g([r({reflect:!0})],x.prototype,"type",2),g([r({reflect:!0})],x.prototype,"size",2),g([r()],x.prototype,"inputmode",2),g([r()],x.prototype,"value",2),g([p()],x.prototype,"defaultValue",2),g([r()],x.prototype,"placeholder",2),g([r()],x.prototype,"label",2),g([r({attribute:"help-text"})],x.prototype,"helpText",2),g([r({type:Boolean})],x.prototype,"clearable",2),g([r({type:Boolean,reflect:!0})],x.prototype,"disabled",2),g([r({type:Boolean,reflect:!0})],x.prototype,"readonly",2),g([r({attribute:"password-toggle",type:Boolean})],x.prototype,"passwordToggle",2),g([r({attribute:"password-visible",type:Boolean})],x.prototype,"passwordVisible",2),g([r({attribute:"no-spin-buttons",type:Boolean})],x.prototype,"noSpinButtons",2),g([r({type:Number})],x.prototype,"minlength",2),g([r({type:Number})],x.prototype,"maxlength",2),g([r()],x.prototype,"min",2),g([r()],x.prototype,"max",2),g([r({reflect:!0})],x.prototype,"form",2),g([r()],x.prototype,"name",2),g([r()],x.prototype,"title",2),g([r({type:Boolean,reflect:!0})],x.prototype,"required",2),g([r()],x.prototype,"pattern",2),g([r()],x.prototype,"step",2),g([r()],x.prototype,"autocapitalize",2),g([r()],x.prototype,"autocorrect",2),g([r()],x.prototype,"autocomplete",2),g([r({type:Boolean})],x.prototype,"autofocus",2),g([r()],x.prototype,"enterkeyhint",2),g([r({type:Boolean,reflect:!0,attribute:"style-on-valid"})],x.prototype,"styleOnValid",2),g([r({type:Boolean,converter:{fromAttribute:t=>!(!t||"false"===t),toAttribute:t=>t?"true":"false"}})],x.prototype,"spellcheck",2),g([m("disabled",{waitUntilFirstUpdate:!0})],x.prototype,"handleDisabledChange",1),g([m("step",{waitUntilFirstUpdate:!0})],x.prototype,"handleStepChange",1),g([m("value",{waitUntilFirstUpdate:!0})],x.prototype,"handleValueChange",1),x=g([n("sd-input")],x);export{x as default};