69 lines
1.5 KiB
TypeScript
69 lines
1.5 KiB
TypeScript
|
import {
|
||
|
|
DeesElement,
|
||
|
|
customElement,
|
||
|
|
html,
|
||
|
|
property,
|
||
|
|
css,
|
||
|
|
} from '@design.estate/dees-element';
|
||
|
|
|
||
|
|
@customElement('test-input-checkbox')
|
||
|
|
export class TestInputCheckbox extends DeesElement {
|
||
|
|
// Same group as test-input-text
|
||
|
|
public static demoGroup = 'Inputs';
|
||
|
|
|
||
|
|
public static demo = () => html`
|
||
|
|
<test-input-checkbox label="Accept terms and conditions"></test-input-checkbox>
|
||
|
|
`;
|
||
|
|
|
||
|
|
@property({ type: String })
|
||
|
|
accessor label: string = 'Checkbox';
|
||
|
|
|
||
|
|
@property({ type: Boolean })
|
||
|
|
accessor checked: boolean = false;
|
||
|
|
|
||
|
|
public static styles = [
|
||
|
|
css`
|
||
|
|
:host {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 8px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.checkbox {
|
||
|
|
width: 18px;
|
||
|
|
height: 18px;
|
||
|
|
border: 1px solid #333;
|
||
|
|
border-radius: 4px;
|
||
|
|
background: #1a1a1a;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
transition: all 0.2s;
|
||
|
|
}
|
||
|
|
.checkbox.checked {
|
||
|
|
background: #3b82f6;
|
||
|
|
border-color: #3b82f6;
|
||
|
|
}
|
||
|
|
.checkbox.checked::after {
|
||
|
|
content: '✓';
|
||
|
|
color: white;
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
.label {
|
||
|
|
color: #e5e5e5;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
`,
|
||
|
|
];
|
||
|
|
|
||
|
|
public render() {
|
||
|
|
return html`
|
||
|
|
<div
|
||
|
|
class="checkbox ${this.checked ? 'checked' : ''}"
|
||
|
|
@click=${() => this.checked = !this.checked}
|
||
|
|
></div>
|
||
|
|
<span class="label">${this.label}</span>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
}
|