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();
}
}