@coderundebug/ui-web/ui-input-textarea.js

A collection of UI web components that can be used in any web project.

/* By Stephen Paul Hassall (web: https://coderundebug.com) */
import{UiTools as i}from"./ui-tools.js";export class UiInputTextarea extends HTMLElement{static get formAssociated(){return!0}constructor(){super(),this.attachShadow({mode:"open",delegatesFocus:!0}),this.shadowRoot.innerHTML=UiInputTextarea.uiHtml,this.shadowRoot.adoptedStyleSheets=[UiInputTextarea.uiCssStyleSheet],this.i=this.attachInternals(),this.o=this.shadowRoot.getElementById("base"),this.t=this.shadowRoot.querySelector("textarea"),this.l=this.shadowRoot.getElementById("default-value"),this.u=this.u.bind(this)}get value(){return this.t.value}set value(i){this.t.value=i||""}get defaultValue(){return this.t.defaultValue}get textareaElement(){return this.t}connectedCallback(){this.t.addEventListener("change",this.u);const i=this.textContent.trim();this.t.textContent=i}disconnectedCallback(){this.t.removeEventListener("change",this.u)}attributeChangedCallback(i,o,t){this.t.setAttribute(i,t)}static get observedAttributes(){return["autocapitalize","autocomplete","autocorrect","cols","dirname","enterkeyhint","readonly","rows","placeholder","spellcheck","step","wrap"]}u(){this.i.setFormValue(this.t.value);const i=new Event("change");this.dispatchEvent(i)}formDisabledCallback(i){this.o.tabIndex=!0===i?-1:0,!0===i?(this.t.setAttribute("disabled",""),this.o.setAttribute("disabled","")):(this.t.removeAttribute("disabled"),this.o.removeAttribute("disabled"))}formStateRestoreCallback(i){this.t.value=i,this.i.setFormValue(i)}formResetCallback(){this.t.value="",this.i.setFormValue(void 0)}}UiInputTextarea.uiCss=":host{display:block;box-shadow:var(--ui-input-box-shadow, var(--ui-border-box-shadow, none));}.base{border-radius:var(--ui-input-border-radius, var(--ui-border-radius-normal, 4px));border-style:var(--ui-input-border-style, var(--ui-border-style, solid));border-width:var(--ui-input-border-width, 2px);border-color:var(--ui-input-border-color, var(--ui-midground, hsl(0 0% 90% / 1)));box-shadow:none;background-color:var(--ui-input-background, field);color:var(--ui-input-foreground, fieldText);padding:var(--ui-input-padding, 8px 8px);box-sizing:border-box;transition:border-color var(--ui-animation-duration-default, 200ms) ease-in-out, box-shadow var(--ui-animation-duration-default, 200ms) ease-in-out;}:host([vertical-scroll]) textarea{overflow-y:scroll;}:host([horizontal-scroll]) textarea{overflow-x:scroll;}:host([vertical-resize]) textarea{resize:vertical;}:host(:not([disabled])[valid]) .base{border-color:var(--ui-input-border-valid-color, hsl(120 80% 50% / 1));}:host(:not([disabled])[invalid]) .base{border-color:var(--ui-input-border-invalid-color, hsl(0 80% 50% / 1));}textarea{width:100%;padding:0;resize:none;border:none;font-family:inherit;font-size:var(--ui-input-font-size, var(--ui-font-size-normal, 16px));font-weight:var(--ui-input-font-weight, var(--ui-font-weight-normal, normal));line-height:150%;background-color:transparent;outline-style:none;}.base:not([disabled]):focus, .base:not([disabled]):focus-visible, .base:not([disabled]):focus-within{outline-style:var(--ui-input-outline-style, none);outline-width:var(--ui-input-outline-width, 0);outline-offset:var(--ui-input-outline-offset, 0);outline-color:var(--ui-input-outline-color, transparent);border-width:var(--ui-input-focus-width, 2px);border-color:var(--ui-input-focus-color, var(--ui-selected-foreground, hsl(215 50% 30% / 1)));box-shadow:inset 0 0 0 var(--ui-input-focus-shadow-width, 4px) var(--ui-input-focus-shadow-color, var(--ui-selected-background, hsl(215 50% 90% / 1)));}:host([valid]) .base:not([disabled]):focus-within{outline-color:var(--ui-input-outline-valid-color, transparent);border-width:var(--ui-input-focus-width, 2px);border-color:var(--ui-input-focus-valid-color, hsl(120 80% 50% / 1));box-shadow:inset 0 0 0 var(--ui-input-focus-shadow-width, 4px) var(--ui-input-focus-valid-shadow-color, hsl(120 50% 80% / 1));}:host([invalid]) .base:not([disabled]):focus-within{outline-color:var(--ui-input-outline-invalid-color, transparent);border-width:var(--ui-input-focus-width, 2px);border-color:var(--ui-input-focus-invalid-color, hsl(0 80% 50% / 1));box-shadow:inset 0 0 0 var(--ui-input-focus-shadow-width, 4px) var(--ui-input-focus-invalid-shadow-color, hsl(0 50% 80% / 1));}textarea::placeholder{opacity:1;color:var( --ui-input-placeholder, color-mix( in hsl, var(--ui-input-background, field) 70%, var(--ui-input-foreground, fieldText) 30% ) );}.base[disabled], textarea:disabled{background-color:var( --ui-input-disabled-background, color-mix( in srgb-linear, var(--ui-foreground, hsl(0 0% 18% / 1)) 75%, var(--ui-background, hsl(0 0% 97% / 1)) 25% ) );color:var( --ui-input-disabled-foreground, color-mix( in srgb-linear, var(--ui-foreground, hsl(0 0% 18% / 1)) 25%, var(--ui-background, hsl(0 0% 97% / 1)) 75% ) );--ui-icon-primary-color:var( --ui-input-disabled-foreground, color-mix( in srgb-linear, var(--ui-foreground, hsl(0 0% 18% / 1)) 25%, var(--ui-background, hsl(0 0% 97% / 1)) 75% ) );cursor:not-allowed;}textarea:-webkit-autofill, .base:has(input:-webkit-autofill){color:fieldtext;background-color:light-dark(#e8f0fe, rgb(70, 90, 126));--ui-icon-primary-color:fieldtext;}@media (forced-colors:active) or (prefers-contrast:more){.base{border-style:solid;border-color:fieldtext;box-shadow:none;transition:none;}.base:focus-within, :host([valid]) .base:focus-within, :host([invalid]) .base:focus-within{box-shadow:none;outline:3px solid fieldtext;outline-offset:2px;}} @media (prefers-reduced-motion){.base{transition:none;}} ",UiInputTextarea.uiHtml='<div id="base" class="base"><textarea></textarea></div>',i.createUi(UiInputTextarea,"ui-input-textarea",import.meta.url);