154 lines
3.5 KiB
TypeScript
154 lines
3.5 KiB
TypeScript
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: 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`
|
|
<dees-label .label=${this.label} .description=${this.description}></dees-label>
|
|
<div class="mainbox">
|
|
<div class="selections">
|
|
<div class="indicator"></div>
|
|
${this.options.map(
|
|
(option) =>
|
|
html`<div class="option ${option === this.selectedOption ? 'selected': ''}" @click=${() => this.handleSelection(option)}>
|
|
${option}
|
|
</div> `
|
|
)}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
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);
|
|
}
|
|
}
|