UNPKG

@duetds/components

Version:

This package includes Duet Components and related tools.

1 lines 5.64 kB
import{r as t,h as e,g as s}from"./p-e7cbb506.js";import{c as i}from"./p-ea56b96b.js";import{d as a}from"./p-94f81923.js";import{c as l}from"./p-ec399bf6.js";class h{constructor(e){t(this,e),this.theme="",this.expand=!1,this.disabled=!1,this.autofocus=!1,this.required=!1,this.type="text",this.label="label",this.labelHidden=!1,this.spellCheck=!1,this.autoComplete="on"}componentWillLoad(){"default"!==this.theme&&document.documentElement.classList.contains("duet-theme-turva")&&(this.theme="turva")}render(){this.expand&&this.element.classList.add("duet-expand");const t=i("duet-input-container",{"duet-theme-turva":"turva"===this.theme,"duet-label-hidden":this.labelHidden,"has-icon":"text"!==this.type&&"number"!==this.type&&"password"!==this.type}),s=i("duet-input",{disabled:this.disabled}),h=this.identifier||l("DuetCheckbox");let n=!1;"tel"===this.type&&(n="[0-9+ ]+");const d=this.pattern?this.pattern:n;return e("div",{class:t},e("label",{class:"duet-label",htmlFor:h},this.label),e("input",{type:this.type,class:s,value:this.value,autofocus:this.autofocus,disabled:this.disabled,"label-hidden":this.labelHidden,"aria-controls":this.accessibleControls,"aria-autocomplete":this.accessibleAutocomplete,"aria-active-descendant":this.accessibleActiveDescendant,"aria-owns":this.accessibleOwns,maxlength:this.maxLength,minlength:this.minLength,pattern:d,placeholder:this.placeholder,spellcheck:this.spellCheck,autocomplete:this.autoComplete,required:this.required,role:this.role,name:this.name,id:h}),"text"!==this.type&&"number"!==this.type&&"password"!==this.type?e("div",{class:"duet-input-icon",innerHTML:a["form-"+this.type].svg}):"",e("span",{class:"duet-input-help"},this.helpText))}get element(){return s(this)}static get style(){return":host{background:transparent;margin:0;margin-right:8px;margin-bottom:12px;display:-ms-inline-flexbox;display:inline-flex;vertical-align:bottom;max-width:100%}.duet-label,:host{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;border:0;padding:0}.duet-label{background:transparent;margin:0;margin-bottom:8px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:localtapiola-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:1rem;background:#fff;color:#00294d;font-weight:600;line-height:1.25;-webkit-transition:.3s ease;transition:.3s ease;z-index:100;width:100%;cursor:pointer;position:relative;display:block}.duet-theme-turva .duet-label{color:#111;font-family:turva-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}.duet-label-hidden .duet-label{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.duet-input-icon{pointer-events:none;z-index:200;width:20px;height:20px;color:#00294d;position:absolute;bottom:16px;right:16px}.duet-theme-turva .duet-input-icon{color:#c60c30}.duet-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;padding:13.5px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:localtapiola-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;border:2px solid #cfd2d4;border-radius:4px;font-size:1rem;background:#fff;color:#00294d;font-weight:400;line-height:1.25;-webkit-transition:.3s ease;transition:.3s ease;z-index:100;min-width:13.75rem;width:100%;position:relative;display:block}.has-icon .duet-input{padding-right:48px}.duet-theme-turva .duet-input{font-family:turva-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;border-color:#d1d1d1;color:#111}.duet-input-container{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;position:relative;width:100%;height:100%}.duet-input::-webkit-input-placeholder{color:#cfd2d4}.duet-theme-turva .duet-input::-webkit-input-placeholder{color:#d1d1d1}.duet-input::-moz-placeholder{color:#cfd2d4;opacity:1!important}.duet-theme-turva .duet-input::-moz-placeholder{color:#d1d1d1}.duet-input:-ms-input-placeholder{color:#cfd2d4}.duet-theme-turva .duet-input:-ms-input-placeholder{color:#d1d1d1}.duet-input.disabled,.duet-input[disabled]{cursor:not-allowed!important;border-color:#f5f8fa!important;background:#f5f8fa!important;color:#657787!important}.duet-theme-turva .duet-input.disabled,.duet-theme-turva .duet-input[disabled]{border-color:#f9f9f9!important;background:#f9f9f9!important;color:#757575!important}.duet-input:hover{border-color:#657787}.duet-theme-turva .duet-input:hover{border-color:#757575}.duet-input:focus{border-color:#0077b3;outline:0}.duet-theme-turva .duet-input:focus{border-color:#111}.duet-input:not(:placeholder-shown):focus:required:invalid{border-color:#de2362}.duet-theme-turva .duet-input:not(:placeholder-shown):focus:required:invalid{border-color:#e02a0d}.duet-input:focus:required:valid{border-color:#0077b3}.duet-theme-turva .duet-input:focus:required:valid{border-color:#111}.duet-input[type=number]::-webkit-inner-spin-button,.duet-input[type=number]::-webkit-outer-spin-button,.duet-input[type=time]::-webkit-inner-spin-button,.duet-input[type=time]::-webkit-outer-spin-button{-webkit-appearance:none;display:none;margin:0}"}}export{h as duet_input};