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`
${this.selectableChips.map( (chip) => html`
this.selectChip(chip)} class="chip ${this.isSelected(chip) ? 'selected' : ''}" > ${chip.key ? html`
${chip.key}
` : html``} ${chip.value} ${this.chipsAreRemovable ? html` { event.stopPropagation(); // prevent the selectChip event from being triggered this.removeChip(chip); }} .iconFA=${'xmark'} > ` : html``}
` )}
`; } 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(); } }