UNPKG

@duetds/components

Version:

This package includes Duet Core Components and related tools.

1 lines 8.2 kB
import{r as t,d as s,h as e,H as i,c as a}from"./p-6403d5dc.js";import{a as h,c as r}from"./p-da8c2c96.js";const u=class{constructor(e){t(this,e),this.textareaId=h("DuetTextarea"),this.labelId=h("DuetLabel"),this.errorId=h("DuetError"),this.margin="auto",this.debounce=0,this.theme="",this.expand=!1,this.disabled=!1,this.required=!1,this.label="label",this.labelHidden=!1,this.error="",this.tooltip="",this.onInput=t=>{const s=t.target;s&&(this.value=s.value||""),this.duetInput.emit(t)},this.onBlur=()=>{this.duetBlur.emit()},this.onFocus=()=>{this.duetFocus.emit()},this.duetInput=s(this,"duetInput",7),this.duetChange=s(this,"duetChange",3),this.duetBlur=s(this,"duetBlur",7),this.duetFocus=s(this,"duetFocus",7)}debounceChanged(){this.duetChange=r(this.duetChange,this.debounce)}valueChanged(){this.duetChange.emit({value:this.value,component:"duet-textarea"})}componentWillLoad(){"default"!==this.theme&&document.documentElement.classList.contains("duet-theme-turva")&&(this.theme="turva")}componentDidLoad(){this.debounceChanged()}async setFocus(){const t=this.element.querySelector("textarea");t&&t.focus()}render(){this.expand&&this.element.classList.add("duet-expand");const t=this.identifier||this.textareaId;return e(i,{class:{"duet-m-0":"none"===this.margin}},e("div",{class:{"duet-textarea-container":!0,"duet-theme-turva":"turva"===this.theme,"duet-label-hidden":this.labelHidden,"has-error":""!==this.error}},e("duet-label",{theme:"turva"===this.theme?"turva":"default",id:this.labelId,for:t},this.label),""!==this.tooltip?e("duet-tooltip",null,this.tooltip):"",e("textarea",{onInput:this.onInput,onBlur:this.onBlur,onFocus:this.onFocus,class:{"duet-textarea":!0,disabled:this.disabled},value:this.value,disabled:this.disabled,"aria-labelledby":this.labelId+" "+this.errorId,"aria-controls":this.accessibleControls,"aria-autocomplete":this.accessibleAutocomplete,"aria-active-descendant":this.accessibleActiveDescendant,"aria-owns":this.accessibleOwns,placeholder:this.placeholder,spellcheck:"false",required:this.required,minlength:this.minlength,maxlength:this.maxlength,role:this.role,name:this.name,id:t}),e("span",{class:"duet-textarea-help",id:this.errorId,"aria-live":"assertive","aria-relevant":"additions removals"},""!==this.error?e("span",null,this.error):"")))}get element(){return a(this)}static get watchers(){return{debounce:["debounceChanged"],value:["valueChanged"]}}static get style(){return".sc-duet-textarea-h{-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;margin-right:16px!important;margin-bottom:12px!important;display:-ms-inline-flexbox;display:inline-flex;vertical-align:bottom;text-align:left;max-width:100%;width:100%}.sc-duet-textarea-h:last-child, .sc-duet-textarea-h:last-of-type{margin-right:0!important}\@media only screen and (min-width:36em){.sc-duet-textarea-h{width:calc(50% - 16px - 3px)}.duet-expand.sc-duet-textarea-h{width:100%!important}}.duet-m-0.sc-duet-textarea-h{margin:0!important}duet-tooltip.sc-duet-textarea{position:absolute;top:8px;right:0}\@media only screen and (min-width:48em){duet-tooltip.sc-duet-textarea{position:relative;top:4px;right:auto}}.duet-textarea.sc-duet-textarea{-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:15px!important;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-variant-numeric:tabular-nums;font-family:localtapiola-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;border:1px solid #909599;border-radius:4px;font-size:1rem;background:#fff;color:#00294d;font-weight:400;line-height:1.25;-webkit-transition:.15s ease;transition:.15s ease;z-index:100;min-width:8rem;min-height:160px;resize:vertical;width:100%;position:relative;display:block}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea{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:#757575;color:#111}.duet-textarea-container.sc-duet-textarea{-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%}.has-error.sc-duet-textarea .duet-textarea.sc-duet-textarea{border-color:#de2362!important}.duet-theme-turva.has-error.sc-duet-textarea .duet-textarea.sc-duet-textarea{border-color:#e02a0d!important}.duet-textarea-help.sc-duet-textarea{-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;font-family:localtapiola-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;border-radius:4px;font-size:.875rem;color:#657787;font-weight:400;line-height:1.25;display:block}.duet-textarea-help.sc-duet-textarea span.sc-duet-textarea{display:block;margin-top:8px}.duet-theme-turva.sc-duet-textarea .duet-textarea-help.sc-duet-textarea{color:#757575}.has-error.sc-duet-textarea .duet-textarea-help.sc-duet-textarea{color:#de2362}.duet-theme-turva.has-error.sc-duet-textarea .duet-textarea-help.sc-duet-textarea{color:#e02a0d}.duet-textarea.sc-duet-textarea::-webkit-input-placeholder{color:#cfd2d4}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea::-webkit-input-placeholder{color:#d1d1d1}.duet-textarea.sc-duet-textarea::-moz-placeholder{color:#cfd2d4;opacity:1!important}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea::-moz-placeholder{color:#d1d1d1}.duet-textarea.sc-duet-textarea:-ms-input-placeholder{color:#cfd2d4}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea:-ms-input-placeholder{color:#d1d1d1}.duet-textarea.disabled.sc-duet-textarea, .duet-textarea[disabled].sc-duet-textarea{cursor:not-allowed!important;border-color:#f5f8fa!important;background:#f5f8fa!important;color:#657787!important}.duet-theme-turva.sc-duet-textarea .duet-textarea.disabled.sc-duet-textarea, .duet-theme-turva.sc-duet-textarea .duet-textarea[disabled].sc-duet-textarea{border-color:#f7f7f7!important;background:#f7f7f7!important;color:#757575!important}.duet-textarea.sc-duet-textarea:hover{-webkit-box-shadow:0 0 0 1px #909599;box-shadow:0 0 0 1px #909599}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea:hover{-webkit-box-shadow:0 0 0 1px #757575;box-shadow:0 0 0 1px #757575}.has-error.sc-duet-textarea .duet-textarea.sc-duet-textarea:hover{-webkit-box-shadow:0 0 0 1px #de2362;box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error.sc-duet-textarea .duet-textarea.sc-duet-textarea:hover{-webkit-box-shadow:0 0 0 1px #e02a0d;box-shadow:0 0 0 1px #e02a0d}.duet-textarea.sc-duet-textarea:focus{-webkit-transition:none;transition:none;border-color:#0077b3;-webkit-box-shadow:0 0 0 1px #0077b3;box-shadow:0 0 0 1px #0077b3;outline:0}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea:focus{border-color:#111;-webkit-box-shadow:0 0 0 1px #111;box-shadow:0 0 0 1px #111}.has-error.sc-duet-textarea .duet-textarea.sc-duet-textarea:focus{-webkit-box-shadow:0 0 0 1px #de2362;box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error.sc-duet-textarea .duet-textarea.sc-duet-textarea:focus{-webkit-box-shadow:0 0 0 1px #e02a0d;box-shadow:0 0 0 1px #e02a0d}.duet-textarea.sc-duet-textarea:not(:placeholder-shown):focus:required:invalid{border-color:#de2362}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea:not(:placeholder-shown):focus:required:invalid{border-color:#e02a0d}.duet-textarea.sc-duet-textarea:focus:required:valid{border-color:#0077b3}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea:focus:required:valid{border-color:#111}.duet-label-hidden.sc-duet-textarea duet-label.sc-duet-textarea{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}"}};export{u as duet_textarea};