dees-catalog/ts_web/elements/dees-input-text.ts

import * as colors from './00colors.js';
import { DeesInputBase } from './dees-input-base.js';
import { demoFunc } from './dees-input-text.demo.js';
import { cssGeistFontFamily, cssMonoFontFamily } from './00fonts.js';

import {
  customElement,
  type TemplateResult,
  property,
  html,
  cssManager,
  css,
} from '@design.estate/dees-element';

declare global {
  interface HTMLElementTagNameMap {
    'dees-input-text': DeesInputText;
  }
}

@customElement('dees-input-text')
export class DeesInputText extends DeesInputBase {
  public static demo = demoFunc;

  // INSTANCE
  @property({
    type: String,
    reflect: true,
  })
  public value: string = '';

  @property({
    type: Boolean,
    reflect: true,
  })
  public isPasswordBool = false;

  @property({
    type: Boolean,
    reflect: true,
  })
  public showPasswordBool = false;

  @property({
    type: Boolean,
    reflect: true,
  })
  public validationState: 'valid' | 'warn' | 'invalid';

  @property({
    reflect: true,
  })
  public validationText: string = '';

  @property({})
  validationFunction: (value: string) => boolean;

  public static styles = [
    ...DeesInputBase.baseStyles,
    cssManager.defaultStyles,
    css`
      * {
        box-sizing: border-box;
      }

      :host {
        position: relative;
        z-index: auto;
        font-family: ${cssGeistFontFamily};
      }

      .maincontainer {
        position: relative;
        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
      }

      input {
        display: flex;
        height: 40px;
        width: 100%;
        padding: 0 12px;
        font-size: 14px;
        line-height: 40px;
        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
        border-radius: 6px;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        outline: none;
        cursor: text;
        font-family: inherit;
        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
      }

      input::placeholder {
        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
      }

      input:hover:not(:disabled):not(:focus) {
        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
      }

      input:focus {
        outline: none;
        border-color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
        box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(0 0% 9% / 0.05)', 'hsl(0 0% 98% / 0.05)')};
      }

      input:disabled {
        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
        border-color: ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
        cursor: not-allowed;
        opacity: 0.5;
      }

      /* Password toggle button */
      .showPassword {
        position: absolute;
        right: 1px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        cursor: pointer;
        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
        transition: all 0.15s ease;
        border-radius: 0 5px 5px 0;
      }

      .showPassword:hover {
        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
      }

      /* Validation styles */
      .validationContainer {
        margin-top: 4px;
        padding: 4px 8px;
        font-size: 12px;
        font-weight: 500;
        border-radius: 4px;
        transition: all 0.2s ease;
        overflow: hidden;
      }

      .validationContainer.error {
        background: ${cssManager.bdTheme('hsl(0 84.2% 60.2% / 0.1)', 'hsl(0 72.2% 50.6% / 0.1)')};
        color: ${cssManager.bdTheme('hsl(0 84.2% 60.2%)', 'hsl(0 72.2% 50.6%)')};
      }

      .validationContainer.warn {
        background: ${cssManager.bdTheme('hsl(25 95% 53% / 0.1)', 'hsl(25 95% 63% / 0.1)')};
        color: ${cssManager.bdTheme('hsl(25 95% 53%)', 'hsl(25 95% 63%)')};
      }

      .validationContainer.valid {
        background: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3% / 0.1)', 'hsl(142.1 70.6% 45.3% / 0.1)')};
        color: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3%)', 'hsl(142.1 70.6% 45.3%)')};
      }

      /* Error state for input */
      :host([validation-state="invalid"]) input {
        border-color: ${cssManager.bdTheme('hsl(0 84.2% 60.2%)', 'hsl(0 72.2% 50.6%)')};
      }

      :host([validation-state="invalid"]) input:focus {
        border-color: ${cssManager.bdTheme('hsl(0 84.2% 60.2%)', 'hsl(0 72.2% 50.6%)')};
        box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(0 84.2% 60.2% / 0.05)', 'hsl(0 72.2% 50.6% / 0.05)')};
      }

      /* Warning state for input */
      :host([validation-state="warn"]) input {
        border-color: ${cssManager.bdTheme('hsl(25 95% 53%)', 'hsl(25 95% 63%)')};
      }

      :host([validation-state="warn"]) input:focus {
        border-color: ${cssManager.bdTheme('hsl(25 95% 53%)', 'hsl(25 95% 63%)')};
        box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(25 95% 53% / 0.05)', 'hsl(25 95% 63% / 0.05)')};
      }

      /* Valid state for input */
      :host([validation-state="valid"]) input {
        border-color: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3%)', 'hsl(142.1 70.6% 45.3%)')};
      }

      :host([validation-state="valid"]) input:focus {
        border-color: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3%)', 'hsl(142.1 70.6% 45.3%)')};
        box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(142.1 76.2% 36.3% / 0.05)', 'hsl(142.1 70.6% 45.3% / 0.05)')};
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <style>
        input {
          font-family: ${this.isPasswordBool ? cssMonoFontFamily : 'inherit'};
          letter-spacing: ${this.isPasswordBool ? '0.5px' : 'normal'};
          padding-right: ${this.isPasswordBool ? '48px' : '12px'};
        }
        ${this.validationText
          ? css`
              .validationContainer {
                height: auto;
                opacity: 1;
                transform: translateY(0);
              }
            `
          : css`
              .validationContainer {
                height: 0;
                padding: 0 !important;
                opacity: 0;
                transform: translateY(-4px);
              }
            `}
      </style>
      <div class="input-wrapper">
        <dees-label .label=${this.label} .description=${this.description} .required=${this.required}></dees-label>
        <div class="maincontainer">
          <input
            type="${this.isPasswordBool && !this.showPasswordBool ? 'password' : 'text'}"
            .value=${this.value}
            @input="${this.updateValue}"
            .disabled=${this.disabled}
            placeholder="${this.label ? '' : 'Enter text...'}"
          />
          ${this.isPasswordBool
            ? html`
                <div class="showPassword" @click=${this.togglePasswordView}>
                  <dees-icon .iconName=${this.showPasswordBool ? 'lucideEye' : 'lucideEyeOff'}></dees-icon>
                </div>
              `
            : html``}
          ${this.validationText
            ? html`
                <div class="validationContainer ${this.validationState || 'error'}">
                  ${this.validationText}
                </div>
              `
            : html`<div class="validationContainer"></div>`}
        </div>
      </div>
    `;
  }

  firstUpdated() {
    // Input event handling is already done in updateValue method
  }

  public async updateValue(eventArg: Event) {
    const target: any = eventArg.target;
    this.value = target.value;
    this.changeSubject.next(this);
  }

  public getValue(): string {
    return this.value;
  }

  public setValue(value: string): void {
    this.value = value;
  }

  public async togglePasswordView() {
    this.showPasswordBool = !this.showPasswordBool;
  }

  public async focus() {
    const textInput = this.shadowRoot.querySelector('input');
    textInput.focus();
  }

  public async blur() {
    const textInput = this.shadowRoot.querySelector('input');
    textInput.blur();
  }
}