import { customElement, DeesElement, type TemplateResult, state, html, domtools, property, css, cssManager, } from '@design.estate/dees-element'; const { demoFunc } = await import('./dees-input-multitoggle.demo.js'); declare global { interface HTMLElementTagNameMap { 'dees-input-multitoggle': DeesInputMultitoggle; } } @customElement('dees-input-multitoggle') export class DeesInputMultitoggle extends DeesElement { public static demo = demoFunc; @property({ type: String, }) public label: string; @property({ type: String, }) public description: string; @property() type: 'boolean' | 'multi' | 'single' = 'multi'; @property() booleanTrueName: string = 'true'; @property() booleanFalseName: string = 'false'; @property({ type: Array, }) options: string[] = []; @property() selectedOption: string = ''; @property() boolValue: boolean = false; public static styles = [ cssManager.defaultStyles, css` :host { display: block; color: ${cssManager.bdTheme('#333', '#ccc')}; user-select: none; margin: 8px 0px 24px 0px; } .label { font-size: 14px; margin-bottom: 8px; } .selections { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; background: ${cssManager.bdTheme('#fff', '#222')}; width: min-content; border-radius: 20px; height: 32px; border-top: 1px solid #ffffff10; } .option { color: #ccc; position: relative; padding: 0px 16px; line-height: 32px; cursor: default; width: min-content; /* Make the width as per the content */ white-space: nowrap; /* Prevent text wrapping */ transition: all 0.1s; font-size: 14px; transform: translateY(-1px); } .option:hover { color: #fff; } .option.selected { color: #fff; } .indicator { opacity: 0; position: absolute; height: 24px; left: 4px; top: 3px; border-radius: 16px; background: #0050b9; min-width: 36px; } `, ]; public render(): TemplateResult { return html`
${this.options.map( (option) => html`
this.handleSelection(option)}> ${option}
` )}
`; } public async firstUpdated() { if (this.type === 'boolean') { this.options = [this.booleanTrueName || 'true', this.booleanFalseName || 'false']; } this.setIndicator(); } public async handleSelection(optionArg: string) { this.selectedOption = optionArg; this.setIndicator(); } public async setIndicator() { const indicator: HTMLDivElement = this.shadowRoot.querySelector('.indicator'); const option: HTMLDivElement = this.shadowRoot.querySelector( `.option:nth-child(${this.options.indexOf(this.selectedOption) + 2})` ); if (indicator && option) { indicator.style.width = `${option.clientWidth - 8}px`; indicator.style.left = `${option.offsetLeft + 4}px`; indicator.style.opacity = '1'; } setTimeout(() => { indicator.style.transition = 'all 0.1s'; }, 100); } }