@scania/tegel
Version:
Tegel Design System
1 lines • 11.2 kB
JavaScript
import{r as t,c as e,h as a}from"./p-2049fab2.js";import{g as r}from"./p-11648030.js";const s=class{constructor(a){t(this,a),this.tdsChange=e(this,"tdsChange",6),this.tdsBlur=e(this,"tdsBlur",6),this.tdsInput=e(this,"tdsInput",6),this.tdsFocus=e(this,"tdsFocus",6),this.uuid=r(),this.label="",this.name="",this.helper=void 0,this.cols=void 0,this.rows=void 0,this.labelPosition="no-label",this.placeholder="",this.value="",this.disabled=!1,this.readOnly=!1,this.hideReadOnlyIcon=!1,this.state="default",this.maxLength=void 0,this.modeVariant=null,this.autofocus=!1,this.noMinWidth=!1,this.tdsAriaLabel=void 0,this.focusInput=void 0}handleChange(t){this.tdsChange.emit(t)}handleBlur(t){this.tdsBlur.emit(t),this.focusInput=!1}handleInput(t){t.target instanceof HTMLTextAreaElement&&(this.value=t.target.value,this.tdsInput.emit(t))}handleFocus(t){this.textEl.focus(),this.focusInput=!0,this.tdsFocus.emit(t)}async focusElement(){this.textEl&&(this.textEl.focus(),this.focusInput=!0)}setModeVariant(t){return this.readOnly&&"primary"===t?"secondary":this.readOnly&&"secondary"===t?"primary":t}connectedCallback(){this.tdsAriaLabel||this.label||console.warn("Tegel Textarea component: specify label or tdsAriaLabel prop for accessibility")}render(){var t;return a("div",{key:"06fd8ce87614410858a7d9253fac73a6f1cf20ec",class:{"textarea-container":!0,"textarea-label-inside":"inside"===this.labelPosition,"textarea-focus":this.focusInput,"textarea-disabled":this.disabled,"textarea-readonly":!this.disabled&&this.readOnly,[`tds-mode-variant-${this.setModeVariant(this.modeVariant)}`]:!0,"textarea-data":""!==this.value,[`textarea-${this.state}`]:"error"===this.state||"success"===this.state,"no-min-width":this.noMinWidth}},"no-label"!==this.labelPosition&&a("label",{key:"1a02a333e4164b39fd223c68cc3d27d7c53487fb",htmlFor:`textarea-element-${this.uuid}`,class:"textarea-label"},this.label),a("div",{key:"6d45e8c8427770accc82c7ad9e10fbed016437a4",class:"textarea-wrapper"},a("textarea",{key:"614c30a5b5077060b1568744cf0800580e746819",id:`textarea-element-${this.uuid}`,class:"textarea-input",ref:t=>{this.textEl=t},disabled:this.disabled,readonly:!this.disabled&&this.readOnly,placeholder:this.placeholder,value:this.value,name:this.name,autofocus:this.autofocus,maxlength:this.maxLength,cols:this.cols,rows:this.rows,onFocus:t=>{this.readOnly||this.handleFocus(t)},onBlur:t=>{this.readOnly||this.handleBlur(t)},onInput:t=>this.handleInput(t),onChange:t=>this.handleChange(t),"aria-invalid":"error"===this.state?"true":"false","aria-readonly":this.readOnly?"true":"false","aria-label":this.tdsAriaLabel?this.tdsAriaLabel:this.label,"aria-describedby":`textarea-helper-element-${this.uuid}`}),a("span",{key:"e0574ae32d1ce9c69156dc2aa52d8d1881b6ff9b",class:"textarea-resizer-icon"},a("svg",{key:"23e79729cc099b7e4f07192c05aa4a304b91788a",width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a("path",{key:"54891720aa51af768f467be5bd8a72fc7adc8d47","fill-rule":"evenodd","clip-rule":"evenodd",d:"M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z",fill:"currentColor"}))),!this.disabled&&!this.hideReadOnlyIcon&&this.readOnly&&a("span",{key:"72e3586f1be99460ced66d640392b4596e5b8c2f",class:"textarea-icon__readonly"},a("tds-tooltip",{key:"9f84391a75b5ae428c71d3b713a9d281c4475a09",placement:"top-end",text:"This field is non-editable",selector:"#readonly-tooltip"}),a("tds-icon",{key:"55e195bb50d8b707ec3a403c8c62cad74d738919",id:"readonly-tooltip",name:"edit_inactive",svgTitle:"inactive"}))),a("span",{key:"ff2043a19ebb129178ecfd36126b0d23eacde4d1",class:"textarea-helper","aria-live":"assertive",id:`textarea-helper-element-${this.uuid}`},"error"===this.state&&this.helper&&!this.readOnly&&a("tds-icon",{key:"84b0991ef5ddab7f960ba75db22c65762b0b5d20",name:"error",size:"16px"}),this.helper),this.maxLength>0&&a("div",{key:"963b3a3bdafeabec6ad2bd3663c07ed0d4a5b3fd",class:"textarea-textcounter"},null===this.value?0:null===(t=this.value)||void 0===t?void 0:t.length,a("span",{key:"8496a0ae44721cdcd9443e09ff6a709b6d3c704f",class:"textfield-textcounter-divider"}," / ")," ",this.maxLength))}};s.style=".textarea-container.sc-tds-textarea{border-radius:4px 4px 0 0;position:relative;box-sizing:border-box;height:auto;width:100%;min-width:208px;display:inline-flex;background-color:transparent;flex-flow:row wrap;border-bottom:0}.textarea-container.no-min-width.sc-tds-textarea{min-width:unset}.textarea-container.sc-tds-textarea .textarea-wrapper.sc-tds-textarea{position:relative;width:unset;min-width:100%}.textarea-input.sc-tds-textarea{border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-textarea-color);background-color:var(--tds-textarea-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-20) var(--tds-spacing-element-16);display:block;resize:vertical;border-bottom:1px solid var(--tds-textarea-border-bottom);transition:border-bottom-color 200ms ease}.textarea-input.sc-tds-textarea:read-only{background-color:var(--tds-textarea-read-only-background)}.textarea-input.sc-tds-textarea::placeholder{opacity:1;color:var(--tds-textarea-placeholder);transition:color 200ms ease}.textarea-input.sc-tds-textarea:disabled{background-color:var(--tds-textarea-disabled-background);color:var(--tds-textarea-disabled-color);cursor:not-allowed}.textarea-input.sc-tds-textarea:disabled::placeholder{color:var(--tds-textarea-disabled-placeholder)}.textarea-input.sc-tds-textarea::-webkit-resizer{display:none}.textarea-input.sc-tds-textarea:hover{border-bottom-color:var(--tds-textarea-border-bottom-hover)}.textarea-input.sc-tds-textarea:hover::placeholder{color:var(--tds-textarea-placeholder-hover)}.textarea-input.sc-tds-textarea:focus{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1;border-radius:0;border-bottom:1px solid transparent}.textarea-resizer-icon.sc-tds-textarea{color:var(--tds-textarea-resize-icon);position:absolute;display:block;bottom:2px;right:1px;padding-bottom:2px;padding-right:2px;pointer-events:none;background-color:var(--tds-textarea-background)}.textarea-resizer-icon.sc-tds-textarea svg.sc-tds-textarea{display:block}.textarea-label.sc-tds-textarea{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:block;z-index:1;margin-bottom:var(--tds-spacing-element-8);color:var(--tds-textarea-label-color)}.textarea-container.textarea-label-inside.sc-tds-textarea .textarea-label.sc-tds-textarea{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);transition:0.1s ease all;color:var(--tds-textarea-label-inside-color);position:absolute;top:var(--tds-spacing-element-20);left:var(--tds-spacing-element-16)}.textarea-container.textarea-label-inside.textarea-disabled.sc-tds-textarea .textarea-label.sc-tds-textarea{color:var(--tds-textarea-disabled-label)}.textarea-container.textarea-label-inside.sc-tds-textarea .textarea-input.sc-tds-textarea::placeholder{color:transparent}.textarea-container.textarea-label-inside.sc-tds-textarea .textarea-input.sc-tds-textarea .sc-tds-textarea::placeholder{color:transparent}.textarea-container.textarea-label-inside.sc-tds-textarea .textarea-input.sc-tds-textarea:focus::placeholder{transition:color 0.35s ease;color:var(--tds-textarea-placeholder)}.textarea-container.textarea-focus.textarea-label-inside.sc-tds-textarea .textarea-label.sc-tds-textarea{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);top:var(--tds-spacing-element-8)}.textarea-container.textarea-data.textarea-label-inside.sc-tds-textarea .textarea-label.sc-tds-textarea{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);top:var(--tds-spacing-element-8)}.textarea-textcounter.sc-tds-textarea{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-textarea-textcounter);float:right;flex-basis:100%;text-align:right;padding-top:var(--tds-spacing-element-4)}.textarea-textcounter.sc-tds-textarea .textfield-textcounter-divider.sc-tds-textarea{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-textarea-textcounter-divider)}.textarea-helper.sc-tds-textarea{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;gap:8px;align-items:center;padding-top:var(--tds-spacing-element-4);color:var(--tds-textarea-helper);flex-grow:2;flex-basis:auto}.textarea-helper.sc-tds-textarea~.textarea-textcounter.sc-tds-textarea{flex-basis:auto}.textarea-success.sc-tds-textarea .textarea-input.sc-tds-textarea{border-bottom-color:var(--tds-textarea-border-bottom-success)}.textarea-error.sc-tds-textarea .textarea-input.sc-tds-textarea{border-bottom-color:var(--tds-textarea-border-bottom-error)}.textarea-error.sc-tds-textarea .textarea-helper.sc-tds-textarea{color:var(--tds-textarea-helper-error)}.textarea-disabled.sc-tds-textarea{cursor:not-allowed}.textarea-disabled.sc-tds-textarea .textarea-input.sc-tds-textarea{border-bottom-color:transparent;pointer-events:none;user-select:none}.textarea-disabled.sc-tds-textarea .textarea-label.sc-tds-textarea{color:var(--tds-textarea-disabled-label)}.textarea-disabled.sc-tds-textarea .textarea-helper.sc-tds-textarea{color:var(--tds-textarea-helper-disabled)}.textarea-disabled.sc-tds-textarea .textarea-textcounter.sc-tds-textarea{color:var(--tds-textarea-textcounter-disabled)}.textarea-disabled.sc-tds-textarea .textarea-textcounter.sc-tds-textarea .textfield-textcounter-divider.sc-tds-textarea{color:var(--tds-textarea-textcounter-disabled)}.textarea-icon__readonly.sc-tds-textarea{display:none;position:absolute;right:18px;top:18px;color:var(--tds-textarea-icon-read-only-color)}.textarea-icon__readonly-label.sc-tds-textarea{display:none;position:absolute;right:18px;top:48px;font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);padding:8px;color:var(--tds-textarea-icon-read-only-label-color);background-color:var(--tds-textarea-icon-read-only-label-background);white-space:nowrap;border-radius:4px 0 4px 4px}.textarea-readonly.sc-tds-textarea .textarea-icon__readonly.sc-tds-textarea{display:block}.textarea-readonly.sc-tds-textarea .textarea-input.sc-tds-textarea{border-bottom-color:var(--tds-textarea-border-bottom-read-only-color)}.textarea-readonly.sc-tds-textarea .textfield-container.sc-tds-textarea{background-color:transparent}.textarea-readonly.sc-tds-textarea:has(.textarea-icon__readonly) .textarea-input.sc-tds-textarea{padding-right:54px}";export{s as tds_textarea}