@coderundebug/ui-web/ui-input-text.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 UiInputText extends HTMLElement{static get formAssociated(){return!0}constructor(i){super(),this.attachShadow({mode:"open",delegatesFocus:!0}),this.shadowRoot.innerHTML=UiInputText.uiHtml,this.shadowRoot.adoptedStyleSheets=[UiInputText.uiCssStyleSheet],this.i=this.attachInternals(),this.o=this.shadowRoot.getElementById("base"),this.t=this.shadowRoot.getElementById("input"),this.u=this.u.bind(this),i&&this.t.setAttribute("type",i)}get value(){return this.t.value}set value(i){this.t.value=null!=i&&""!==i?i:""}get inputElement(){return this.t}connectedCallback(){this.t.addEventListener("change",this.u)}disconnectedCallback(){this.t.removeEventListener("change",this.u)}attributeChangedCallback(i,o,t){this.t.setAttribute(i,t)}static get observedAttributes(){return["autocapitalize","autocomplete","autocorrect","enterkeyhint","readonly","placeholder","spellcheck","step","min","max","value"]}u(){this.i.setFormValue(this.t.value);const i=new Event("change",{bubbles:!0,composed:!0});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)}}UiInputText.uiCss=':host{display:block;box-shadow:var(--ui-input-box-shadow, var(--ui-border-box-shadow, none));}.base{display:flex;align-items:center;gap:var(--ui-input-gap, 8px);width:100%;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;--ui-icon-primary-color:var(--ui-input-foreground, fieldText);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([valid]) .base:not([disabled]){border-color:var(--ui-input-border-valid-color, hsl(120 80% 50% / 1));--ui-icon-primary-color:var(--ui-input-icon-valid-color, hsl(120 80% 50% / 1));}:host([invalid]) .base:not([disabled]){border-color:var(--ui-input-border-invalid-color, hsl(0 80% 50% / 1));--ui-icon-primary-color:var(--ui-input-icon-invalid-color, hsl(0 80% 50% / 1));}input{flex-grow:1;padding:0;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;appearance: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));}input::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], input: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;}input:-webkit-autofill, .base:has(input:-webkit-autofill){color:fieldtext;background-color:light-dark(#e8f0fe, rgb(70, 90, 126));--ui-icon-primary-color:fieldtext;}slot[name="start"]::slotted(*:not(ui-lozenge):not(ui-button):not(ui-icon-button)), slot[name="end"]::slotted(*:not(ui-lozenge):not(ui-button):not(ui-icon-button)){padding:var(--ui-input-icon-padding, 0);min-height:var(--ui-input-icon-size, 16px);min-width:var(--ui-input-icon-size, 16px);}::slotted(*){align-self:center;}@media (forced-colors:active) or (prefers-contrast:more){.base{border-style:solid;border-color:fieldtext;box-shadow:none;transition:none;}:host(:not([disabled])) .base:focus, :host(:not([disabled])) .base:focus-visible, :host(:not([disabled])) .base:focus-within, :host([open]) .base{box-shadow:none;outline:3px solid fieldtext;outline-offset:2px;}} @media (prefers-reduced-motion){.base{transition:none;}} ',UiInputText.uiHtml='<div id="base" class="base"><slot name="start"></slot><input type="text" id="input"><slot name="end"></slot></div>',i.createUi(UiInputText,"ui-input-text",import.meta.url);