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: Boolean,
  })
  public chipsAreRemovable: boolean = false;

  @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: 4px;
        position: relative;
        overflow: hidden;
        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
      }

      .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;
      }

      dees-icon {
        padding: 0px 6px 0px 4px;
        margin-left: 4px;
        margin-right: -8px;
        background: rgba(0, 0, 0, 0.3);
      }

      dees-icon:hover {
        background: #e4002b;
      }
    `,
  ];

  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}
              ${this.chipsAreRemovable
                ? html`
                    <dees-icon
                      @click=${(event: Event) => {
                        event.stopPropagation(); // prevent the selectChip event from being triggered
                        this.removeChip(chip);
                      }}
                      .iconFA=${'xmark'}
                    ></dees-icon>
                  `
                : html``}
            </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);
  }

  public removeChip(chipToRemove: Tag): void {
    // Remove the chip from selectableChips
    this.selectableChips = this.selectableChips.filter((chip) => chip.key !== chipToRemove.key);

    // Remove the chip from selectedChips if present
    this.selectedChips = this.selectedChips.filter((chip) => chip.key !== chipToRemove.key);

    // If the removed chip was the selectedChip, set selectedChip to null
    if (this.selectedChip && this.selectedChip.key === chipToRemove.key) {
      this.selectedChip = null;
    }

    // Trigger an update to re-render the component
    this.requestUpdate();
  }
}