dees-catalog/ts_web/elements/dees-chips.ts

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

import * as domtools from '@design.estate/dees-domtools';
import { demoFunc } from './dees-chips.demo.js';

declare global {
  interface HTMLElementTagNameMap {
    'dees-chips': DeesChips;
  }
}

type Tag = { key: string, value: string };

@customElement('dees-chips')
export class DeesChips extends DeesElement {
  public static demo = demoFunc;

  @property()
  public selectionMode: 'none' | 'single' | 'multiple' = 'single';

  @property({
    type: Array
  })
  public selectableChips: Tag[] = [];

  @property()
  public selectedChip: Tag = null;

  @property({
    type: Array
  })
  public selectedChips: Tag[] = [];
  

  constructor() {
    super();
  }

  public static styles = [
    cssManager.defaultStyles,
    css`

      :host {
        display: block;
        box-sizing: border-box;
      }

      .mainbox {
        user-select: none;
      }

      .chip {
        border-top: ${cssManager.bdTheme('1px solid #CCC', '1px solid #444')};
        background: #333333;
        display: inline-flex;
        height: 20px;
        line-height: 20px;
        padding: 0px 8px;
        font-size: 12px;
        color: #fff;
        border-radius: 40px;
        margin-right: 4px;
        margin-bottom: 8px;
        position: relative;
        overflow: hidden;
      }

      .chip:hover {
        background: #666666;
        cursor: pointer; 
      }

      .chip.selected {
        background: #00A3FF;
      }

      .chipKey {
        background: rgba(0,0,0,0.3);
        height: 100%;
        display: inline-block;
        margin-left: -8px;
        padding-left: 8px;
        padding-right: 8px;
        margin-right: 8px;
      }
      
    `,
  ];

  public render(): TemplateResult {
    return html`
      <div class="mainbox">
        ${this.selectableChips.map(chip => html`
          <div @click=${() => this.selectChip(chip)} class="chip ${this.isSelected(chip) ? 'selected' : ''}">
            ${chip.key ? html`<div class="chipKey">${chip.key}</div>` : html``}${chip.value}
          </div>
        `)}
      </div>
    `;
  }

  public async firstUpdated() {
    if (!this.textContent) {
      this.textContent = 'Button';
      this.performUpdate();
    }
  }

  private isSelected(chip: Tag): boolean {
    if (this.selectionMode === 'single') {
      return this.selectedChip?.key === chip.key;
    } else {
      return this.selectedChips.some(selected => selected.key === chip.key);
    }
  }

  public async selectChip(chip: Tag) {
    if (this.selectionMode === 'none') {
      return;
    }

    if (this.selectionMode === 'single') {
      if (this.isSelected(chip)) {
        this.selectedChip = null;
        this.selectedChips = [];
      } else {
        this.selectedChip = chip;
        this.selectedChips = [chip];
      }
    } else if(this.selectionMode === 'multiple') {
      if (this.isSelected(chip)) {
        this.selectedChips = this.selectedChips.filter(selected => selected.key !== chip.key);
      } else {
        this.selectedChips = [...this.selectedChips, chip];
      }
      this.requestUpdate();
    }
    console.log(this.selectedChips);
  }
}