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'); @customElement('dees-input-multitoggle') export class DeesInputMultitoggle extends DeesElement { public static demo = demoFunc; @property({ type: String, }) public label: 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.label ? html`