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

import {
  customElement,
  type TemplateResult,
  property,
  html,
  css,
  cssManager,
} from '@design.estate/dees-element';
import { DeesInputBase } from './dees-input-base.js';
import { demoFunc } from './dees-input-checkbox.demo.js';
import { cssGeistFontFamily } from './00fonts.js';

declare global {
  interface HTMLElementTagNameMap {
    'dees-input-checkbox': DeesInputCheckbox;
  }
}

@customElement('dees-input-checkbox')
export class DeesInputCheckbox extends DeesInputBase<DeesInputCheckbox> {
  // STATIC
  public static demo = demoFunc;

  // INSTANCE

  @property({
    type: Boolean,
  })
  public value: boolean = false;


  constructor() {
    super();
    this.labelPosition = 'right'; // Checkboxes default to label on the right
  }

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

        :host {
          position: relative;
          cursor: default;
          font-family: ${cssGeistFontFamily};
        }

        .maincontainer {
          display: inline-flex;
          align-items: flex-start;
          gap: 8px;
          cursor: pointer;
          user-select: none;
          transition: all 0.15s ease;
        }

        .checkbox {
          position: relative;
          height: 18px;
          width: 18px;
          flex-shrink: 0;
          border-radius: 4px;
          border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
          background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
          transition: all 0.15s ease;
          margin-top: 1px;
        }

        .maincontainer:hover .checkbox {
          border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
        }

        .checkbox.selected {
          background: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
          border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
        }

        .checkbox:focus-visible {
          outline: none;
          box-shadow: 0 0 0 3px ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.1)', 'hsl(217.2 91.2% 59.8% / 0.1)')};
        }

        /* Checkmark using Lucide icon style */
        .checkbox .checkmark {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          opacity: 0;
          transition: opacity 0.15s ease;
        }

        .checkbox.selected .checkmark {
          opacity: 1;
        }

        .checkbox .checkmark svg {
          width: 12px;
          height: 12px;
          stroke: white;
          stroke-width: 3;
        }

        /* Disabled state */
        .maincontainer.disabled {
          cursor: not-allowed;
          opacity: 0.5;
        }

        .checkbox.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%)')};
        }

        /* Label */
        .label-container {
          display: flex;
          flex-direction: column;
          gap: 2px;
          flex: 1;
        }

        .checkbox-label {
          font-size: 14px;
          font-weight: 500;
          line-height: 20px;
          color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
          transition: color 0.15s ease;
          letter-spacing: -0.01em;
        }

        .maincontainer:hover .checkbox-label {
          color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
        }

        .maincontainer.disabled:hover .checkbox-label {
          color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
        }

        /* Description */
        .description-text {
          font-size: 12px;
          color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
          line-height: 1.5;
        }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <div class="input-wrapper">
        <div class="maincontainer ${this.disabled ? 'disabled' : ''}" @click="${this.toggleSelected}">
          <div 
            class="checkbox ${this.value ? 'selected' : ''} ${this.disabled ? 'disabled' : ''}" 
            tabindex="${this.disabled ? '-1' : '0'}"
            @keydown="${this.handleKeydown}"
          >
            ${this.value
              ? html`
                  <span class="checkmark">
                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                  </span>
                `
              : html``}
          </div>
          <div class="label-container">
            ${this.label ? html`<div class="checkbox-label">${this.label}</div>` : ''}
            ${this.description ? html`<div class="description-text">${this.description}</div>` : ''}
          </div>
        </div>
      </div>
    `;
  }

  public async toggleSelected() {
    if (this.disabled) {
      return;
    }
    this.value = !this.value;
    this.dispatchEvent(
      new CustomEvent('newValue', {
        detail: this.value,
        bubbles: true,
      })
    );
    this.changeSubject.next(this);
  }

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

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

  public focus(): void {
    const checkboxDiv = this.shadowRoot.querySelector('.checkbox');
    if (checkboxDiv) {
      (checkboxDiv as any).focus();
    }
  }

  private handleKeydown(event: KeyboardEvent) {
    if (event.key === ' ' || event.key === 'Enter') {
      event.preventDefault();
      this.toggleSelected();
    }
  }
}