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';

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;
        }
        :host(:hover) {
          filter: ${cssManager.bdTheme('brightness(0.95)', 'brightness(1.1)')};
        }

        .maincontainer {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 8px 0px;
          color: ${cssManager.bdTheme('#333', '#ccc')};
          cursor: pointer;
          user-select: none;
          transition: all 0.2s;
        }

        .maincontainer:hover {
          color: ${cssManager.bdTheme('#000', '#fff')};
        }

        .maincontainer:hover .checkbox {
          border-color: ${cssManager.bdTheme('#999', '#888')};
        }

        input:focus {
          outline: none;
          border-bottom: 1px solid #e4002b;
        }

        .checkbox {
          transition: all 0.1s;
          box-sizing: border-box;
          border: 1px solid ${cssManager.bdTheme('#CCC', '#999')};
          border-radius: 2px;
          height: 24px;
          width: 24px;
          display: inline-block;
          background: ${cssManager.bdTheme('#fafafa', '#222')};
          flex-shrink: 0;
        }

        .checkbox.selected {
          background: #0050b9;
          border: 1px solid #0050b9;
        }

        .checkbox.disabled {
          background: none;
          border: 1px dashed ${cssManager.bdTheme('#666666', '#666666')};
        }

        .checkbox .checkmark {
          display: inline-block;
          width: 22px;
          height: 22px;
          -ms-transform: rotate(45deg); /* IE 9 */
          -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
          transform: rotate(45deg);
        }

        .checkbox .checkmark_stem {
          position: absolute;
          width: 3px;
          height: 9px;
          background-color: #fff;
          left: 11px;
          top: 6px;
        }

        .checkbox .checkmark_kick {
          position: absolute;
          width: 3px;
          height: 3px;
          background-color: #fff;
          left: 8px;
          top: 12px;
        }

        .checkbox.disabled .checkmark_stem, .checkbox.disabled .checkmark_kick {
          background-color: ${cssManager.bdTheme('#333', '#fff')};
        }

        img {
          padding: 4px;
        }

        .checkbox-label {
          font-size: 14px;
          transition: color 0.2s ease;
        }

        .maincontainer:hover .checkbox-label {
          color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
        }

        .maincontainer.disabled {
          cursor: not-allowed;
          opacity: 0.5;
        }

        .maincontainer.disabled:hover {
          color: ${cssManager.bdTheme('#333', '#ccc')};
        }

        .maincontainer.disabled:hover .checkbox {
          border-color: ${cssManager.bdTheme('#ccc', '#333')};
        }

        .description-text {
          font-size: 12px;
          color: ${cssManager.bdTheme('#666', '#999')};
          margin-top: 4px;
          line-height: 1.4;
          padding-left: 36px;
        }
    `,
  ];

  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="0">
            ${this.value
              ? html`
                  <span class="checkmark">
                    <div class="checkmark_stem"></div>
                    <div class="checkmark_kick"></div>
                  </span>
                `
              : html``}
          </div>
          ${this.label ? html`<div class="checkbox-label">${this.label}</div>` : ''}
        </div>
        ${this.description ? html`
          <div class="description-text">${this.description}</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();
    }
  }
}