dees-catalog/ts_web/elements/dees-input-radio.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-radio.demo.js';

declare global {
  interface HTMLElementTagNameMap {
    'dees-input-radio': DeesInputRadio;
  }
}

@customElement('dees-input-radio')
export class DeesInputRadio extends DeesInputBase<DeesInputRadio> {
  public static demo = demoFunc;

  // INSTANCE

  @property()
  public value: boolean = false;

  @property({ type: String })
  public name: string = '';

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

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

        :host {
          position: relative;
        }

        .maincontainer {
          transition: all 0.3s;
          padding: 5px 0px;
          color: #ccc;
        }

        .maincontainer:hover {
          color: #fff;
        }

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

        .checkbox {
          transition: all 0.3s;
          box-sizing: border-box;
          border-radius: 20px;
          border: 1px solid #999;
          height: 24px;
          width: 24px;
          display: inline-block;
          background: #222;
        }

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

        .maincontainer:hover .checkbox.selected {
          background: #03A9F4;
        }

        .innercircle {
          transition: all 0.3s;
          margin: 6px 0px 0px 6px;
          background: #222;
          width: 10px;
          height: 10px;
          border-radius: 10px;
        }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <div class="input-wrapper">
        <div class="maincontainer" @click="${this.toggleSelected}">
          <div class="checkbox ${this.value ? 'selected' : ''}">
          ${this.value ? html`<div class="innercircle"></div>`: html``}
          </div>
        </div>
        <dees-label .label=${this.label}></dees-label>
      </div>
    `;
  }

  public async toggleSelected () {
    // Radio buttons can only be selected, not deselected by clicking
    if (this.value) {
      return;
    }
    
    // If this radio has a name, find and deselect other radios in the same group
    if (this.name) {
      // Try to find a form container first, then fall back to document
      const container = this.closest('dees-form') || 
                       this.closest('dees-demowrapper') || 
                       this.closest('.radio-group')?.parentElement ||
                       document;
      const allRadios = container.querySelectorAll(`dees-input-radio[name="${this.name}"]`);
      allRadios.forEach((radio: DeesInputRadio) => {
        if (radio !== this && radio.value) {
          radio.value = false;
        }
      });
    }
    
    this.value = true;
    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;
  }
}