78 lines
1.9 KiB
TypeScript
78 lines
1.9 KiB
TypeScript
|
import { DeesElement, html, property, customElement, css, type TemplateResult } from '@design.estate/dees-element';
|
||
|
|
import { idpElementStyles } from './tokens.js';
|
||
|
|
|
||
|
|
declare global {
|
||
|
|
interface HTMLElementTagNameMap {
|
||
|
|
'idp-toggle': IdpToggle;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@customElement('idp-toggle')
|
||
|
|
export class IdpToggle extends DeesElement {
|
||
|
|
public static demo = () => html`<idp-toggle checked></idp-toggle>`;
|
||
|
|
public static demoGroups = ['idp.global v3 primitives'];
|
||
|
|
|
||
|
|
@property({ type: Boolean, reflect: true })
|
||
|
|
public accessor checked = false;
|
||
|
|
|
||
|
|
@property({ type: Boolean, reflect: true })
|
||
|
|
public accessor disabled = false;
|
||
|
|
|
||
|
|
public static styles = [
|
||
|
|
...idpElementStyles,
|
||
|
|
css`
|
||
|
|
:host {
|
||
|
|
display: inline-flex;
|
||
|
|
}
|
||
|
|
button {
|
||
|
|
width: 36px;
|
||
|
|
height: 20px;
|
||
|
|
border: none;
|
||
|
|
border-radius: 999px;
|
||
|
|
padding: 2px;
|
||
|
|
background: var(--idp-border);
|
||
|
|
cursor: pointer;
|
||
|
|
transition: background 150ms ease;
|
||
|
|
}
|
||
|
|
:host([checked]) button {
|
||
|
|
background: var(--idp-accent);
|
||
|
|
}
|
||
|
|
:host([disabled]) button {
|
||
|
|
opacity: 0.5;
|
||
|
|
cursor: not-allowed;
|
||
|
|
}
|
||
|
|
.knob {
|
||
|
|
width: 16px;
|
||
|
|
height: 16px;
|
||
|
|
border-radius: 999px;
|
||
|
|
background: #fff;
|
||
|
|
box-shadow: 0 1px 3px rgb(0 0 0 / 0.22);
|
||
|
|
transition: transform 150ms ease;
|
||
|
|
}
|
||
|
|
:host([checked]) .knob {
|
||
|
|
transform: translateX(16px);
|
||
|
|
}
|
||
|
|
`,
|
||
|
|
];
|
||
|
|
|
||
|
|
private toggle() {
|
||
|
|
if (this.disabled) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.checked = !this.checked;
|
||
|
|
this.dispatchEvent(new CustomEvent('idp-toggle-change', {
|
||
|
|
detail: { checked: this.checked },
|
||
|
|
bubbles: true,
|
||
|
|
composed: true,
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
|
||
|
|
public render(): TemplateResult {
|
||
|
|
return html`
|
||
|
|
<button role="switch" aria-checked=${this.checked} ?disabled=${this.disabled} @click=${this.toggle}>
|
||
|
|
<div class="knob"></div>
|
||
|
|
</button>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
}
|