@solid-design-system/components 3.22.1 → 3.22.2

package/dist/components/es/form.js

@@ -1 +1 @@
-import{x as t}from"./solid-components2.js";const e=new WeakMap,i=new WeakMap,s=new WeakMap,o=new WeakMap;class a{constructor(t,i){this.handleFormData=t=>{const e=this.options.disabled(this.host),i=this.options.name(this.host),s=this.options.value(this.host),o="sd-button"===this.host.tagName.toLowerCase();!e&&!o&&"string"==typeof i&&i.length>0&&typeof s<"u"&&(Array.isArray(s)?s.forEach((e=>{t.formData.append(i,e.toString())})):t.formData.append(i,s.toString()))},this.handleFormSubmit=t=>{var i,s;const o=this.options.disabled(this.host),a=this.options.reportValidity;if(this.form&&!this.form.noValidate&&(null==(i=e.get(this.form))||i.forEach((t=>{this.setUserInteracted(t,!0)}))),this.form&&!this.form.noValidate&&!o&&!a(this.host)){t.preventDefault(),t.stopImmediatePropagation();const e=null==(s=this.form)?void 0:s.querySelectorAll("[data-invalid]");Array.from(e).filter((t=>"sd-radio-group"===t.tagName.toLowerCase())).forEach((t=>{var e,i;null==(i=null==(e=t.shadowRoot)?void 0:e.querySelector("input"))||i.dispatchEvent(new Event("invalid"))})),null!=e&&e.length&&e[0].focus()}},this.handleFormReset=()=>{this.options.setValue(this.host,this.options.defaultValue(this.host)),this.setUserInteracted(this.host,!1),o.set(this.host,[])},this.handleInteraction=t=>{const e=o.get(this.host);e.includes(t.type)||e.push(t.type),e.length===this.options.assumeInteractionOn.length&&this.setUserInteracted(this.host,!0)},this.fakeUserInteraction=()=>{this.setUserInteracted(this.host,!0)},(this.host=t).addController(this),this.options={form:t=>{if(t.hasAttribute("form")&&""!==t.getAttribute("form")){const e=t.getRootNode(),i=t.getAttribute("form");if(i)return e.getElementById(i)}return t.closest("form")},name:t=>t.name,value:t=>t.value,defaultValue:t=>t.defaultValue,disabled:t=>t.disabled??!1,reportValidity:t=>"function"!=typeof t.reportValidity||t.reportValidity(),setValue:(t,e)=>t.value=e,assumeInteractionOn:["sd-input"],...i}}hostConnected(){const t=this.options.form(this.host);t&&this.attachForm(t),o.set(this.host,[]),this.options.assumeInteractionOn.forEach((t=>{this.host.addEventListener(t,this.handleInteraction)}))}hostDisconnected(){this.detachForm(),o.delete(this.host),this.options.assumeInteractionOn.forEach((t=>{this.host.removeEventListener(t,this.handleInteraction)}))}hostUpdated(){var t;const e=this.options.form(this.host);e||this.detachForm(),e&&this.form!==e&&(this.detachForm(),this.attachForm(e)),this.host.hasUpdated&&(this.setValidity(null==(t=this.host)?void 0:t.validity.valid),this.updateValidityStyle())}attachForm(t){t?(this.form=t,e.has(this.form)?e.get(this.form).add(this.host):e.set(this.form,new Set([this.host])),this.form.addEventListener("formdata",this.handleFormData),this.form.addEventListener("submit",this.handleFormSubmit),this.form.addEventListener("reset",this.handleFormReset),i.has(this.form)||(i.set(this.form,this.form.reportValidity),this.form.reportValidity=()=>this.reportFormValidity())):this.form=void 0}detachForm(){var t;this.form&&(null==(t=e.get(this.form))||t.delete(this.host),this.form.removeEventListener("formdata",this.handleFormData),this.form.removeEventListener("submit",this.handleFormSubmit),this.form.removeEventListener("reset",this.handleFormReset),i.has(this.form)&&(this.form.reportValidity=i.get(this.form),i.delete(this.form))),this.form=void 0}reportFormValidity(){if(this.form&&!this.form.noValidate){const t=this.form.querySelectorAll("*");for(const e of t)if("function"==typeof e.reportValidity&&!e.reportValidity())return!1}return!0}setUserInteracted(t,e){s.set(t,e),t.requestUpdate()}doAction(t,e){if(this.form){const i=document.createElement("button");i.type=t,i.style.position="absolute",i.style.width="0",i.style.height="0",i.style.clipPath="inset(50%)",i.style.overflow="hidden",i.style.whiteSpace="nowrap",e&&(i.name=e.name,i.value=e.value,["formaction","formenctype","formmethod","formnovalidate","formtarget"].forEach((t=>{e.hasAttribute(t)&&i.setAttribute(t,e.getAttribute(t))}))),this.form.append(i),i.click(),i.remove()}}updateValidityStyle(){this.host.hasAttribute("data-user-valid")&&this.host.checkValidity()?(void 0!==this.host.showValidStyle&&(this.host.showValidStyle=!0),this.host.showInvalidStyle=!1):this.host.hasAttribute("data-user-invalid")&&!this.host.checkValidity()?(void 0!==this.host.showValidStyle&&(this.host.showValidStyle=!1),this.host.showInvalidStyle=!0):(void 0!==this.host.showValidStyle&&(this.host.showValidStyle=!1),this.host.showInvalidStyle=!1)}getForm(){return this.form??null}renderInvalidMessage(){return t`<div id="invalid-message" class="text-error text-sm mt-2 text-left" part="invalid-message" aria-live="polite" ?hidden="${!this.host.showInvalidStyle}"></div>`}reset(t){this.doAction("reset",t)}submit(t){this.doAction("submit",t)}setValidity(t){var e;const i=this.host,o=!!s.get(i),a=!!i.required;null!=(e=this.form)&&e.noValidate?(i.removeAttribute("data-required"),i.removeAttribute("data-optional"),i.removeAttribute("data-invalid"),i.removeAttribute("data-valid"),i.removeAttribute("data-user-invalid"),i.removeAttribute("data-user-valid")):(i.toggleAttribute("data-required",a),i.toggleAttribute("data-optional",!a),i.toggleAttribute("data-invalid",!t),i.toggleAttribute("data-valid",t),i.toggleAttribute("data-user-invalid",!t&&o),i.toggleAttribute("data-user-valid",t&&o))}updateValidity(){const t=this.host;this.setValidity(null==t?void 0:t.validity.valid)}emitInvalidEvent(t){null==t||t.preventDefault();const e=new CustomEvent("sd-invalid",{bubbles:!1,composed:!1,cancelable:!0,detail:{}});t||e.preventDefault()}}const r=Object.freeze({badInput:!1,customError:!1,patternMismatch:!1,rangeOverflow:!1,rangeUnderflow:!1,stepMismatch:!1,tooLong:!1,tooShort:!1,typeMismatch:!1,valid:!0,valueMissing:!1}),h=Object.freeze({...r,valid:!1,valueMissing:!0}),n=Object.freeze({...r,valid:!1,customError:!0});export{a as F,h as a,n as c,r as v};
+import{x as t}from"./solid-components2.js";const e=new WeakMap,i=new WeakMap,s=new WeakMap,o=new WeakMap;class a{constructor(t,i){this.handleFormData=t=>{const e=this.options.disabled(this.host),i=this.options.name(this.host),s=this.options.value(this.host),o="sd-button"===this.host.tagName.toLowerCase();!e&&!o&&"string"==typeof i&&i.length>0&&typeof s<"u"&&(Array.isArray(s)?s.forEach((e=>{t.formData.append(i,e.toString())})):t.formData.append(i,s.toString()))},this.handleFormSubmit=t=>{var i,s;const o=this.options.disabled(this.host),a=this.options.reportValidity;if(this.form&&!this.form.noValidate&&(null==(i=e.get(this.form))||i.forEach((t=>{this.setUserInteracted(t,!0)}))),this.form&&!this.form.noValidate&&!o&&!a(this.host)){t.preventDefault(),t.stopImmediatePropagation();const e=null==(s=this.form)?void 0:s.querySelectorAll("[data-invalid]");Array.from(e).filter((t=>"sd-radio-group"===t.tagName.toLowerCase())).forEach((t=>{var e,i;null==(i=null==(e=t.shadowRoot)?void 0:e.querySelector("input"))||i.dispatchEvent(new Event("invalid"))})),null!=e&&e.length&&e[0].focus()}},this.handleFormReset=()=>{this.options.setValue(this.host,this.options.defaultValue(this.host)),this.setUserInteracted(this.host,!1),o.set(this.host,[])},this.handleInteraction=t=>{const e=o.get(this.host);e.includes(t.type)||e.push(t.type),e.length===this.options.assumeInteractionOn.length&&this.setUserInteracted(this.host,!0)},this.fakeUserInteraction=()=>{this.setUserInteracted(this.host,!0)},(this.host=t).addController(this),this.options={form:t=>{if(t.hasAttribute("form")&&""!==t.getAttribute("form")){const e=t.getRootNode(),i=t.getAttribute("form");if(i)return e.getElementById(i)}return t.closest("form")},name:t=>t.name,value:t=>t.value,defaultValue:t=>t.defaultValue,disabled:t=>t.disabled??!1,reportValidity:t=>"function"!=typeof t.reportValidity||t.reportValidity(),setValue:(t,e)=>t.value=e,assumeInteractionOn:["sd-input"],...i}}hostConnected(){const t=this.options.form(this.host);t&&this.attachForm(t),o.set(this.host,[]),this.options.assumeInteractionOn.forEach((t=>{this.host.addEventListener(t,this.handleInteraction)}))}hostDisconnected(){this.detachForm(),o.delete(this.host),this.options.assumeInteractionOn.forEach((t=>{this.host.removeEventListener(t,this.handleInteraction)}))}hostUpdated(){var t;const e=this.options.form(this.host);e||this.detachForm(),e&&this.form!==e&&(this.detachForm(),this.attachForm(e)),this.host.hasUpdated&&(this.setValidity(null==(t=this.host)?void 0:t.validity.valid),this.updateValidityStyle())}attachForm(t){t?(this.form=t,e.has(this.form)?e.get(this.form).add(this.host):e.set(this.form,new Set([this.host])),this.form.addEventListener("formdata",this.handleFormData),this.form.addEventListener("submit",this.handleFormSubmit),this.form.addEventListener("reset",this.handleFormReset),i.has(this.form)||(i.set(this.form,this.form.reportValidity),this.form.reportValidity=()=>this.reportFormValidity())):this.form=void 0}detachForm(){var t;this.form&&(null==(t=e.get(this.form))||t.delete(this.host),this.form.removeEventListener("formdata",this.handleFormData),this.form.removeEventListener("submit",this.handleFormSubmit),this.form.removeEventListener("reset",this.handleFormReset),i.has(this.form)&&(this.form.reportValidity=i.get(this.form),i.delete(this.form))),this.form=void 0}reportFormValidity(){if(this.form&&!this.form.noValidate){const t=this.form.querySelectorAll("*");for(const e of t)if("function"==typeof e.reportValidity&&!e.reportValidity())return!1}return!0}setUserInteracted(t,e){s.set(t,e),t.requestUpdate()}doAction(t,e){if(this.form){const i=document.createElement("button");i.type=t,i.style.position="absolute",i.style.width="0",i.style.height="0",i.style.clipPath="inset(50%)",i.style.overflow="hidden",i.style.whiteSpace="nowrap",e&&(i.name=e.name,i.value=e.value,["formaction","formenctype","formmethod","formnovalidate","formtarget"].forEach((t=>{e.hasAttribute(t)&&i.setAttribute(t,e.getAttribute(t))}))),this.form.append(i),i.click(),i.remove()}}updateValidityStyle(){this.host.hasAttribute("data-user-valid")&&this.host.checkValidity()?(void 0!==this.host.showValidStyle&&(this.host.showValidStyle=!0),this.host.showInvalidStyle=!1):this.host.hasAttribute("data-user-invalid")&&!this.host.checkValidity()?(void 0!==this.host.showValidStyle&&(this.host.showValidStyle=!1),this.host.showInvalidStyle=!0):(void 0!==this.host.showValidStyle&&(this.host.showValidStyle=!1),this.host.showInvalidStyle=!1)}getForm(){return this.form??null}renderInvalidMessage(){return t`<div id="invalid-message" class="text-error text-sm mt-2 text-left" part="invalid-message" aria-live="polite" ?hidden="${!this.host.showInvalidStyle}"></div>`}reset(t){this.doAction("reset",t)}submit(t){this.doAction("submit",t)}setValidity(t){var e;const i=this.host,o=!!s.get(i),a=!!i.required;null!=(e=this.form)&&e.noValidate?(i.removeAttribute("data-required"),i.removeAttribute("data-optional"),i.removeAttribute("data-invalid"),i.removeAttribute("data-valid"),i.removeAttribute("data-user-invalid"),i.removeAttribute("data-user-valid"),i.removeAttribute("aria-invalid")):(i.toggleAttribute("data-required",a),i.toggleAttribute("data-optional",!a),i.toggleAttribute("data-invalid",!t),i.toggleAttribute("data-valid",t),i.toggleAttribute("data-user-invalid",!t&&o),i.toggleAttribute("data-user-valid",t&&o),i.setAttribute("aria-invalid",(!t).toString()))}updateValidity(){const t=this.host;this.setValidity(null==t?void 0:t.validity.valid)}emitInvalidEvent(t){null==t||t.preventDefault();const e=new CustomEvent("sd-invalid",{bubbles:!1,composed:!1,cancelable:!0,detail:{}});t||e.preventDefault()}}const r=Object.freeze({badInput:!1,customError:!1,patternMismatch:!1,rangeOverflow:!1,rangeUnderflow:!1,stepMismatch:!1,tooLong:!1,tooShort:!1,typeMismatch:!1,valid:!0,valueMissing:!1}),h=Object.freeze({...r,valid:!1,valueMissing:!0}),n=Object.freeze({...r,valid:!1,customError:!0});export{a as F,h as a,n as c,r as v};

package/dist/components/es/input.js

@@ -1 +1,6 @@
-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 $=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:"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],y=this.disabled?"text-neutral-500":"text-primary",m={sm:"ml-1",md:"ml-2",lg:"ml-2"}[this.size],b={sm:"text-base",md:"text-lg",lg:"text-xl"}[this.size];return s`<div part="form-control" class="${i(this.disabled&&"pointer-events-none")}"><div class="flex items-center gap-1 mb-2"><label part="form-control-label" id="label" class="${i(o?"inline-block":"hidden",h)}" for="input" aria-hidden="${o?"false":"true"}"><slot name="label">${this.label}</slot></label><slot name="tooltip"></slot></div><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",d)}"></div><div part="base" class="${i("px-4 flex flex-row items-center rounded-default transition-all","lg"===this.size?"py-2":"py-1",this.disabled||this.readonly?"":"hover:bg-neutral-200",this.readonly?"bg-neutral-100":"bg-white","disabled"===p?"text-neutral-500":"text-black")}">${l?s`<slot name="left" part="left" class="${i("inline-flex","sm"===this.size?"mr-1":"mr-2",y,b)}"></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 ",m)}" type="button" aria-label="${this.localize.term("clearEntry")}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-icon class="${i("icon-fill-neutral-800",b)}" 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(y,m,b)}" library="system" name="eye"></sd-icon></slot>`:s`<slot name="hide-password-icon"><sd-icon class="${i(y,m,b)}" library="system" name="eye-crossed-out"></sd-icon></slot>`}</button>`:""} ${"date"!==this.type&&"datetime-local"!==this.type||w?"":s`<sd-icon class="${i(y,m,b)}" library="system" name="calendar"></sd-icon>`} ${"time"===this.type?s`<sd-icon class="${i(y,m,b)}" library="system" name="clock"></sd-icon>`:""} ${"search"===this.type?s`<button class="flex items-center" type="button" tabindex="-1"><sd-icon class="${i(y,m,b)}" library="system" name="magnifying-glass"></sd-icon></button>`:""} ${this.showInvalidStyle?s`<sd-icon part="invalid-icon" class="${i("text-error",m,b)}" library="system" name="risk"></sd-icon>`:""} ${this.showValidStyle&&this.styleOnValid?s`<sd-icon class="${i("text-success flex-shrink-0",m,b)}" library="system" name="status-check" part="valid-icon"></sd-icon>`:""} ${a?s`<slot name="right" part="right" class="${i("inline-flex",y,m,b)}"></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()}`}};$.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")],$.prototype,"input",2),g([o("#invalid-message")],$.prototype,"invalidMessage",2),g([y()],$.prototype,"hasFocus",2),g([y()],$.prototype,"showValidStyle",2),g([y()],$.prototype,"showInvalidStyle",2),g([r({reflect:!0})],$.prototype,"type",2),g([r({reflect:!0})],$.prototype,"size",2),g([r()],$.prototype,"inputmode",2),g([r()],$.prototype,"value",2),g([p()],$.prototype,"defaultValue",2),g([r()],$.prototype,"placeholder",2),g([r()],$.prototype,"label",2),g([r({attribute:"help-text"})],$.prototype,"helpText",2),g([r({type:Boolean})],$.prototype,"clearable",2),g([r({type:Boolean,reflect:!0})],$.prototype,"disabled",2),g([r({type:Boolean,reflect:!0})],$.prototype,"readonly",2),g([r({attribute:"password-toggle",type:Boolean})],$.prototype,"passwordToggle",2),g([r({attribute:"password-visible",type:Boolean})],$.prototype,"passwordVisible",2),g([r({attribute:"no-spin-buttons",type:Boolean})],$.prototype,"noSpinButtons",2),g([r({type:Number})],$.prototype,"minlength",2),g([r({type:Number})],$.prototype,"maxlength",2),g([r()],$.prototype,"min",2),g([r()],$.prototype,"max",2),g([r({reflect:!0})],$.prototype,"form",2),g([r()],$.prototype,"name",2),g([r()],$.prototype,"title",2),g([r({type:Boolean,reflect:!0})],$.prototype,"required",2),g([r()],$.prototype,"pattern",2),g([r()],$.prototype,"step",2),g([r()],$.prototype,"autocapitalize",2),g([r()],$.prototype,"autocorrect",2),g([r()],$.prototype,"autocomplete",2),g([r({type:Boolean})],$.prototype,"autofocus",2),g([r()],$.prototype,"enterkeyhint",2),g([r({type:Boolean,reflect:!0,attribute:"style-on-valid"})],$.prototype,"styleOnValid",2),g([r({type:Boolean,converter:{fromAttribute:t=>!(!t||"false"===t),toAttribute:t=>t?"true":"false"}})],$.prototype,"spellcheck",2),g([m("disabled",{waitUntilFirstUpdate:!0})],$.prototype,"handleDisabledChange",1),g([m("step",{waitUntilFirstUpdate:!0})],$.prototype,"handleStepChange",1),g([m("value",{waitUntilFirstUpdate:!0})],$.prototype,"handleValueChange",1),$=g([n("sd-input")],$);export{$ as default};
+import"./icon.js";import{T as t,w as e,S as s,L as i,x as l,t as a,c as o,i as n,e as r,n as h,a as d}from"./solid-components2.js";import{d as p}from"./default-value.js";import{F as u}from"./form.js";import{H as c}from"./slot.js";import{o as m}from"./if-defined.js";import{f as b,l as y}from"./live.js";import{i as v,t as f,e as $}from"./directive.js";import{r as g}from"./state.js";import{w}from"./watch.js";
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const x=(t,e)=>{var s;const i=t._$AN;if(void 0===i)return!1;for(const t of i)null==(s=t._$AO)||s.call(t,e,!1),x(t,e);return!0},C=t=>{let e,s;do{if(void 0===(e=t._$AM))break;s=e._$AN,s.delete(t),t=e}while(0===(null==s?void 0:s.size))},k=t=>{for(let e;e=t._$AM;t=e){let s=e._$AN;if(void 0===s)e._$AN=s=new Set;else if(s.has(t))break;s.add(t),S(e)}};function A(t){void 0!==this._$AN?(C(this),this._$AM=t,k(this)):this._$AM=t}function V(t,e=!1,s=0){const i=this._$AH,l=this._$AN;if(void 0!==l&&0!==l.size)if(e)if(Array.isArray(i))for(let t=s;t<i.length;t++)x(i[t],!1),C(i[t]);else null!=i&&(x(i,!1),C(i));else x(this,t)}const S=t=>{t.type==f.CHILD&&(t._$AP??(t._$AP=V),t._$AQ??(t._$AQ=A))};class D extends v{constructor(){super(...arguments),this._$AN=void 0}_$AT(t,e,s){super._$AT(t,e,s),k(this),this.isConnected=t._$AU}_$AO(t,e=!0){var s,i;t!==this.isConnected&&(this.isConnected=t,t?null==(s=this.reconnected)||s.call(this):null==(i=this.disconnected)||i.call(this)),e&&(x(this,t),C(this))}setValue(t){if(b(this._$Ct))this._$Ct._$AI(t,this);else{const e=[...this._$Ct._$AH];e[this._$Ci]=t,this._$Ct._$AI(e,this,0)}}disconnected(){}reconnected(){}}const _=$(class extends D{constructor(t){if(super(t),this.handlePointerDown=t=>{0!==t.button||this.host.disabled||this.spinOnLongPressCallback(t)},this.handlePointerUp=t=>{null==t||t.preventDefault(),null==t||t.stopPropagation(),this.timeout&&this.callbacks.start(),this.stopSpinningAndCleanUp(),this.callbacks.end(),document.removeEventListener("pointerup",this.handlePointerUp)},t.type!==f.ELEMENT||!(t.element instanceof HTMLButtonElement))throw new Error("The `longPress` directive must be used on an HTMLButtonElement.")}render(e){return t}update(t,[s]){return void 0===this.callbacks&&void 0===this.host&&(this.host=t.element,this.callbacks={...s},this.host.addEventListener("pointerdown",this.handlePointerDown)),e}disconnected(){this.stopSpinningAndCleanUp(),this.host.removeEventListener("pointerdown",this.handlePointerDown),document.removeEventListener("pointerup",this.handlePointerUp)}spinOnLongPressCallback(t){var e;t.preventDefault(),t.stopPropagation(),this.timeout=setTimeout((()=>{this.timeout=void 0,this.interval=setInterval((()=>{this.callbacks.start()}),50)}),500),document.addEventListener("pointerup",this.handlePointerUp),null==(e=this.observer)||e.disconnect(),this.observer=new MutationObserver((t=>{t.forEach((t=>{"disabled"===t.attributeName&&this.stopSpinningAndCleanUp()}))})),this.observer.observe(this.host,{attributes:!0})}stopSpinningAndCleanUp(){var t;clearInterval(this.interval),clearTimeout(this.timeout),null==(t=this.observer)||t.disconnect()}});var P,I=Object.defineProperty,T=Object.getOwnPropertyDescriptor,U=(t,e,s,i)=>{for(var l,a=i>1?void 0:i?T(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&&I(e,s,a),a};const z=!(null==(P=navigator.userAgentData)?void 0:P.brands.some((t=>t.brand.includes("Chromium"))))&&navigator.userAgent.includes("Firefox");let E=class extends s{constructor(){super(...arguments),this.formControlController=new u(this),this.hasSlotController=new c(this,"help-text","label","left","right","message","placeholder"),this.localize=new i(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.spinButtons=!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}isDecrementDisabled(){if(this.disabled||this.readonly)return!0;if(void 0===this.min||null===this.min)return!1;const t="string"==typeof this.min?parseFloat(this.min):this.min;return this.valueAsNumber<=t}isIncrementDisabled(){if(this.disabled||this.readonly)return!0;if(void 0===this.max||null===this.max)return!1;const t="string"==typeof this.max?parseFloat(this.max):this.max;return this.valueAsNumber>=t}handleStep(){this.handleInput(),this.input.focus()}handleStepUp(){this.stepUp(),this.handleStep()}handleStepDown(){this.stepDown(),this.handleStep()}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"),s=(this.hasSlotController.test("description"),this.hasSlotController.test("left")),i=this.hasSlotController.test("right"),o=!!this.label||!!t,n=!!this.helpText||!!e,r=this.clearable&&!this.readonly&&("number"==typeof this.value||this.value.length>0),h=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",d="sm"===this.size?"text-sm":"text-base",p={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"}[h],u=this.disabled?"text-neutral-500":"text-primary",c={sm:"ml-1",md:"ml-2",lg:"ml-2"}[this.size],b={sm:"text-base",md:"text-lg",lg:"text-xl"}[this.size];return l`<div part="form-control" class="${a(this.disabled&&"pointer-events-none")}"><div class="flex items-center gap-1 mb-2"><label part="form-control-label" id="label" class="${a(o?"inline-block":"hidden",d)}" for="input" aria-hidden="${o?"false":"true"}"><slot name="label">${this.label}</slot></label><slot name="tooltip"></slot></div><div part="form-control-input" class="relative w-full"><div part="border" class="${a("absolute w-full h-full pointer-events-none border rounded-default",p)}"></div><div part="base" class="${a("px-4 flex flex-row items-center rounded-default transition-all","lg"===this.size?"py-2":"py-1",this.disabled||this.readonly?"":"hover:bg-neutral-200",this.readonly?"bg-neutral-100":"bg-white","disabled"===h?"text-neutral-500":"text-black")}">${s?l`<slot name="left" part="left" class="${a("inline-flex","sm"===this.size?"mr-1":"mr-2",u,b)}"></slot>`:""} <input part="input" id="input" class="${a("min-w-0 flex-grow focus:outline-none bg-transparent placeholder-neutral-700","sm"===this.size?"h-6":"h-8",d)}" type="${"password"===this.type&&this.passwordVisible?"text":this.type}" title="${this.title}" name="${m(this.name)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" placeholder="${m(this.placeholder)}" minlength="${m(this.minlength)}" maxlength="${m(this.maxlength)}" min="${m(this.min)}" max="${m(this.max)}" step="${m(this.step)}" .value="${y(this.value)}" autocapitalize="${m("password"===this.type?"off":this.autocapitalize)}" autocomplete="${m("password"===this.type?"off":this.autocomplete)}" autocorrect="${m("password"===this.type?"off":this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${this.spellcheck}" pattern="${m(this.pattern)}" enterkeyhint="${m(this.enterkeyhint)}" inputmode="${m(this.inputmode)}" aria-describedby="help-text invalid-message" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"> ${r?l`<button part="clear-button" class="${a("flex justify-center ",c)}" type="button" aria-label="${this.localize.term("clearEntry")}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-icon class="${a("icon-fill-neutral-800",b)}" library="system" name="closing-round"></sd-icon></slot></button>`:""} ${this.passwordToggle&&"password"===this.type?l`<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?l`<slot name="show-password-icon"><sd-icon class="${a(u,c,b)}" library="system" name="eye"></sd-icon></slot>`:l`<slot name="hide-password-icon"><sd-icon class="${a(u,c,b)}" library="system" name="eye-crossed-out"></sd-icon></slot>`}</button>`:""} ${"date"!==this.type&&"datetime-local"!==this.type||z?"":l`<sd-icon class="${a(u,c,b)}" library="system" name="calendar"></sd-icon>`} ${"time"===this.type?l`<sd-icon class="${a(u,c,b)}" library="system" name="clock"></sd-icon>`:""} ${"search"===this.type?l`<button class="flex items-center" type="button" tabindex="-1"><sd-icon class="${a(u,c,b)}" library="system" name="magnifying-glass"></sd-icon></button>`:""} ${this.showInvalidStyle?l`<sd-icon part="invalid-icon" class="${a("text-error",c,b)}" library="system" name="risk"></sd-icon>`:""} ${this.showValidStyle&&this.styleOnValid?l`<sd-icon class="${a("text-success flex-shrink-0",c,b)}" library="system" name="status-check" part="valid-icon"></sd-icon>`:""} ${i?l`<slot name="right" part="right" class="${a("inline-flex",u,c,b)}"></slot>`:""} ${"number"===this.type&&this.spinButtons?l`<div part="stepper" class="flex items-center"><button part="decrement-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isDecrementDisabled()}" aria-hidden="true" ${_({start:()=>this.handleStepDown(),end:()=>this.handleChange()})} tabindex="-1"><slot name="decrement-number-stepper"><sd-icon library="global-resources" name="system/minus-round" label="Decrease value" class="${a(u,c,b)}"></sd-icon></slot></button> <button part="increment-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isIncrementDisabled()}" aria-hidden="true" ${_({start:()=>this.handleStepUp(),end:()=>this.handleChange()})} tabindex="-1"><slot name="increment-number-stepper"><sd-icon library="global-resources" name="system/plus-round" label="Decrease value" class="${a(u,c,b)}"></sd-icon></slot></button></div>`:""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${a("text-sm text-neutral-700",n?"block":"hidden")}" aria-hidden="${!n}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`}};E.styles=[o,s.styles,n`: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}.stepper-button[disabled] sd-icon{--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-500,174 174 174) / var(--tw-text-opacity))}`],U([r("#input")],E.prototype,"input",2),U([r("#invalid-message")],E.prototype,"invalidMessage",2),U([g()],E.prototype,"hasFocus",2),U([g()],E.prototype,"showValidStyle",2),U([g()],E.prototype,"showInvalidStyle",2),U([h({reflect:!0})],E.prototype,"type",2),U([h({reflect:!0})],E.prototype,"size",2),U([h()],E.prototype,"inputmode",2),U([h()],E.prototype,"value",2),U([p()],E.prototype,"defaultValue",2),U([h()],E.prototype,"placeholder",2),U([h()],E.prototype,"label",2),U([h({attribute:"help-text"})],E.prototype,"helpText",2),U([h({type:Boolean})],E.prototype,"clearable",2),U([h({type:Boolean,reflect:!0})],E.prototype,"disabled",2),U([h({type:Boolean,reflect:!0})],E.prototype,"readonly",2),U([h({attribute:"password-toggle",type:Boolean})],E.prototype,"passwordToggle",2),U([h({attribute:"password-visible",type:Boolean})],E.prototype,"passwordVisible",2),U([h({attribute:"spin-buttons",type:Boolean})],E.prototype,"spinButtons",2),U([h({type:Number})],E.prototype,"minlength",2),U([h({type:Number})],E.prototype,"maxlength",2),U([h()],E.prototype,"min",2),U([h()],E.prototype,"max",2),U([h({reflect:!0})],E.prototype,"form",2),U([h()],E.prototype,"name",2),U([h()],E.prototype,"title",2),U([h({type:Boolean,reflect:!0})],E.prototype,"required",2),U([h()],E.prototype,"pattern",2),U([h()],E.prototype,"step",2),U([h()],E.prototype,"autocapitalize",2),U([h()],E.prototype,"autocorrect",2),U([h()],E.prototype,"autocomplete",2),U([h({type:Boolean})],E.prototype,"autofocus",2),U([h()],E.prototype,"enterkeyhint",2),U([h({type:Boolean,reflect:!0,attribute:"style-on-valid"})],E.prototype,"styleOnValid",2),U([h({type:Boolean,converter:{fromAttribute:t=>!(!t||"false"===t),toAttribute:t=>t?"true":"false"}})],E.prototype,"spellcheck",2),U([w("disabled",{waitUntilFirstUpdate:!0})],E.prototype,"handleDisabledChange",1),U([w("step",{waitUntilFirstUpdate:!0})],E.prototype,"handleStepChange",1),U([w("value",{waitUntilFirstUpdate:!0})],E.prototype,"handleValueChange",1),E=U([d("sd-input")],E);export{E as default};

package/dist/components/es/live.js

@@ -3,9 +3,9 @@ import{w as e,T as t}from"./solid-components2.js";import{e as r,i,t as n}from"./
  * @license
  * Copyright 2020 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const s={},o=r(class extends i{constructor(e){if(super(e),e.type!==n.PROPERTY&&e.type!==n.ATTRIBUTE&&e.type!==n.BOOLEAN_ATTRIBUTE)throw Error("The `live` directive is not allowed on child or event bindings");if(!(e=>void 0===e.strings)(e))throw Error("`live` bindings can only contain a single expression")}render(e){return e}update(r,[i]){if(i===e||i===t)return i;const o=r.element,T=r.name;if(r.type===n.PROPERTY){if(i===o[T])return e}else if(r.type===n.BOOLEAN_ATTRIBUTE){if(!!i===o.hasAttribute(T))return e}else if(r.type===n.ATTRIBUTE&&o.getAttribute(T)===i+"")return e;return((e,t=s)=>{e._$AH=t;
+ */const s=e=>void 0===e.strings,o={},T=r(class extends i{constructor(e){if(super(e),e.type!==n.PROPERTY&&e.type!==n.ATTRIBUTE&&e.type!==n.BOOLEAN_ATTRIBUTE)throw Error("The `live` directive is not allowed on child or event bindings");if(!s(e))throw Error("`live` bindings can only contain a single expression")}render(e){return e}update(r,[i]){if(i===e||i===t)return i;const s=r.element,T=r.name;if(r.type===n.PROPERTY){if(i===s[T])return e}else if(r.type===n.BOOLEAN_ATTRIBUTE){if(!!i===s.hasAttribute(T))return e}else if(r.type===n.ATTRIBUTE&&s.getAttribute(T)===i+"")return e;return((e,t=o)=>{e._$AH=t;
 /**
  * @license
  * Copyright 2020 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */})(r),i}});export{o as l};
+ */})(r),i}});export{s as f,T as l};