feat(dees-input-toggle): Add DeesInputToggle component (toggle switch) with demo and exports; integrate into inputs and DeesForm
This commit is contained in:
@@ -1,5 +1,13 @@
|
||||
# Changelog
|
||||
|
||||
## 2026-01-07 - 3.34.0 - feat(dees-input-toggle)
|
||||
Add DeesInputToggle component (toggle switch) with demo and exports; integrate into inputs and DeesForm
|
||||
|
||||
- New UI input component: ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.ts — toggle switch with pointer drag, keyboard support, value syncing and DeesInputBase integration.
|
||||
- Interactive demo added: ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.demo.ts demonstrating usage, batch operations and event handling.
|
||||
- Module exports updated: added ts_web/elements/00group-input/dees-input-toggle/index.ts and exported from ts_web/elements/00group-input/index.ts.
|
||||
- DeesForm integration: imported DeesInputToggle and added it to the form components array and input union types in ts_web/elements/00group-form/dees-form/dees-form.ts
|
||||
|
||||
## 2026-01-06 - 3.33.0 - feat(dees-statsgrid)
|
||||
add multiPercentage tile type to stats grid
|
||||
|
||||
|
||||
@@ -3,6 +3,6 @@
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@design.estate/dees-catalog',
|
||||
version: '3.33.0',
|
||||
version: '3.34.0',
|
||||
description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
|
||||
}
|
||||
|
||||
@@ -19,6 +19,7 @@ import { DeesInputFileupload } from '../../00group-input/dees-input-fileupload/i
|
||||
import { DeesInputIban } from '../../00group-input/dees-input-iban/dees-input-iban.js';
|
||||
import { DeesInputMultitoggle } from '../../00group-input/dees-input-multitoggle/dees-input-multitoggle.js';
|
||||
import { DeesInputPhone } from '../../00group-input/dees-input-phone/dees-input-phone.js';
|
||||
import { DeesInputToggle } from '../../00group-input/dees-input-toggle/dees-input-toggle.js';
|
||||
import { DeesInputTypelist } from '../../00group-input/dees-input-typelist/dees-input-typelist.js';
|
||||
import { DeesFormSubmit } from '../dees-form-submit/dees-form-submit.js';
|
||||
import { DeesTable } from '../../dees-table/index.js';
|
||||
@@ -37,6 +38,7 @@ const FORM_INPUT_TYPES = [
|
||||
DeesInputQuantitySelector,
|
||||
DeesInputRadiogroup,
|
||||
DeesInputText,
|
||||
DeesInputToggle,
|
||||
DeesInputTypelist,
|
||||
DeesTable,
|
||||
];
|
||||
@@ -53,6 +55,7 @@ export type TFormInputElement =
|
||||
| DeesInputQuantitySelector
|
||||
| DeesInputRadiogroup
|
||||
| DeesInputText
|
||||
| DeesInputToggle
|
||||
| DeesInputTypelist
|
||||
| DeesTable<any>;
|
||||
|
||||
|
||||
@@ -0,0 +1,310 @@
|
||||
import { html, css, cssManager } from '@design.estate/dees-element';
|
||||
import '@design.estate/dees-wcctools/demotools';
|
||||
import '../../dees-panel/dees-panel.js';
|
||||
import type { DeesInputToggle } from './dees-input-toggle.js';
|
||||
|
||||
export const demoFunc = () => html`
|
||||
<dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
|
||||
// Example of programmatic interaction
|
||||
const toggleAllOnBtn = elementArg.querySelector('#toggle-all-on');
|
||||
const toggleAllOffBtn = elementArg.querySelector('#toggle-all-off');
|
||||
const featureToggles = elementArg.querySelectorAll('.feature-toggles dees-input-toggle');
|
||||
|
||||
if (toggleAllOnBtn && toggleAllOffBtn) {
|
||||
toggleAllOnBtn.addEventListener('click', () => {
|
||||
featureToggles.forEach((toggle: DeesInputToggle) => {
|
||||
if (!toggle.disabled && !toggle.required) {
|
||||
toggle.value = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
toggleAllOffBtn.addEventListener('click', () => {
|
||||
featureToggles.forEach((toggle: DeesInputToggle) => {
|
||||
if (!toggle.disabled && !toggle.required) {
|
||||
toggle.value = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}}>
|
||||
<style>
|
||||
${css`
|
||||
.demo-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
padding: 24px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
dees-panel {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
dees-panel:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.toggle-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.horizontal-toggles {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.interactive-section {
|
||||
background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.output-text {
|
||||
font-family: monospace;
|
||||
font-size: 13px;
|
||||
color: ${cssManager.bdTheme('hsl(215.3 25% 26.7%)', 'hsl(210 40% 80%)')};
|
||||
padding: 8px;
|
||||
background: ${cssManager.bdTheme('hsl(210 40% 98%)', 'hsl(215 20.2% 11.8%)')};
|
||||
border-radius: 4px;
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
.settings-section {
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
|
||||
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.feature-toggles {
|
||||
background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 11.8%)')};
|
||||
border: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 16.8%)')};
|
||||
border-radius: 6px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
|
||||
}
|
||||
|
||||
.drag-hint {
|
||||
font-size: 12px;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
|
||||
margin-top: 8px;
|
||||
font-style: italic;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
|
||||
<div class="demo-container">
|
||||
<dees-panel .title=${'Basic Toggle'} .subtitle=${'Simple on/off toggle switch with drag support'}>
|
||||
<div class="toggle-group">
|
||||
<dees-input-toggle
|
||||
.label=${'Enable feature'}
|
||||
.value=${false}
|
||||
.key=${'basic'}
|
||||
></dees-input-toggle>
|
||||
|
||||
<dees-input-toggle
|
||||
.label=${'Active toggle'}
|
||||
.value=${true}
|
||||
.key=${'active'}
|
||||
></dees-input-toggle>
|
||||
|
||||
<dees-input-toggle
|
||||
.label=${'With description'}
|
||||
.value=${false}
|
||||
.description=${'This toggle has additional helper text explaining its purpose'}
|
||||
.key=${'withDesc'}
|
||||
></dees-input-toggle>
|
||||
</div>
|
||||
<p class="drag-hint">Tip: You can drag the toggle knob to switch states</p>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'Toggle States'} .subtitle=${'Different toggle states and configurations'}>
|
||||
<div class="toggle-group">
|
||||
<dees-input-toggle
|
||||
.label=${'Default (off)'}
|
||||
.value=${false}
|
||||
></dees-input-toggle>
|
||||
|
||||
<dees-input-toggle
|
||||
.label=${'Enabled (on)'}
|
||||
.value=${true}
|
||||
></dees-input-toggle>
|
||||
|
||||
<dees-input-toggle
|
||||
.label=${'Disabled (off)'}
|
||||
.value=${false}
|
||||
.disabled=${true}
|
||||
></dees-input-toggle>
|
||||
|
||||
<dees-input-toggle
|
||||
.label=${'Disabled (on)'}
|
||||
.value=${true}
|
||||
.disabled=${true}
|
||||
></dees-input-toggle>
|
||||
|
||||
<dees-input-toggle
|
||||
.label=${'Required (always on)'}
|
||||
.value=${true}
|
||||
.required=${true}
|
||||
.description=${'This toggle cannot be turned off'}
|
||||
></dees-input-toggle>
|
||||
</div>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'Horizontal Layout'} .subtitle=${'Toggles arranged horizontally for compact interfaces'}>
|
||||
<div class="horizontal-toggles">
|
||||
<dees-input-toggle
|
||||
.label=${'WiFi'}
|
||||
.value=${true}
|
||||
.layoutMode=${'horizontal'}
|
||||
></dees-input-toggle>
|
||||
|
||||
<dees-input-toggle
|
||||
.label=${'Bluetooth'}
|
||||
.value=${false}
|
||||
.layoutMode=${'horizontal'}
|
||||
></dees-input-toggle>
|
||||
|
||||
<dees-input-toggle
|
||||
.label=${'GPS'}
|
||||
.value=${true}
|
||||
.layoutMode=${'horizontal'}
|
||||
></dees-input-toggle>
|
||||
|
||||
<dees-input-toggle
|
||||
.label=${'NFC'}
|
||||
.value=${false}
|
||||
.layoutMode=${'horizontal'}
|
||||
></dees-input-toggle>
|
||||
</div>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'Settings Example'} .subtitle=${'Toggles in a typical settings context'}>
|
||||
<div class="settings-section">
|
||||
<h4 class="section-title">Notification Settings</h4>
|
||||
|
||||
<div class="toggle-group">
|
||||
<dees-input-toggle
|
||||
.label=${'Push notifications'}
|
||||
.value=${true}
|
||||
.description=${'Receive push notifications on your device'}
|
||||
.key=${'push'}
|
||||
></dees-input-toggle>
|
||||
|
||||
<dees-input-toggle
|
||||
.label=${'Email notifications'}
|
||||
.value=${true}
|
||||
.description=${'Get important updates via email'}
|
||||
.key=${'email'}
|
||||
></dees-input-toggle>
|
||||
|
||||
<dees-input-toggle
|
||||
.label=${'Sound'}
|
||||
.value=${false}
|
||||
.description=${'Play a sound for notifications'}
|
||||
.key=${'sound'}
|
||||
></dees-input-toggle>
|
||||
|
||||
<dees-input-toggle
|
||||
.label=${'Vibration'}
|
||||
.value=${true}
|
||||
.description=${'Vibrate for notifications'}
|
||||
.key=${'vibration'}
|
||||
></dees-input-toggle>
|
||||
</div>
|
||||
</div>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'Feature Toggles'} .subtitle=${'Batch operations on multiple toggles'}>
|
||||
<div class="button-group">
|
||||
<dees-button id="toggle-all-on" type="secondary">Enable All</dees-button>
|
||||
<dees-button id="toggle-all-off" type="secondary">Disable All</dees-button>
|
||||
</div>
|
||||
|
||||
<div class="feature-toggles">
|
||||
<div class="toggle-group">
|
||||
<dees-input-toggle
|
||||
.label=${'Dark Mode'}
|
||||
.value=${true}
|
||||
.key=${'darkMode'}
|
||||
></dees-input-toggle>
|
||||
|
||||
<dees-input-toggle
|
||||
.label=${'Auto-save'}
|
||||
.value=${true}
|
||||
.key=${'autoSave'}
|
||||
></dees-input-toggle>
|
||||
|
||||
<dees-input-toggle
|
||||
.label=${'Spell check'}
|
||||
.value=${false}
|
||||
.key=${'spellCheck'}
|
||||
></dees-input-toggle>
|
||||
|
||||
<dees-input-toggle
|
||||
.label=${'Developer mode'}
|
||||
.value=${false}
|
||||
.key=${'devMode'}
|
||||
></dees-input-toggle>
|
||||
|
||||
<dees-input-toggle
|
||||
.label=${'Beta features'}
|
||||
.value=${false}
|
||||
.key=${'beta'}
|
||||
></dees-input-toggle>
|
||||
</div>
|
||||
</div>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'Interactive Example'} .subtitle=${'Toggle to see value changes in real-time'}>
|
||||
<div class="toggle-group">
|
||||
<dees-input-toggle
|
||||
.label=${'Airplane mode'}
|
||||
.value=${false}
|
||||
@newValue=${(event: CustomEvent) => {
|
||||
const output = document.querySelector('#airplane-output');
|
||||
if (output) {
|
||||
output.textContent = `Airplane mode: ${event.detail ? 'ON' : 'OFF'}`;
|
||||
}
|
||||
}}
|
||||
></dees-input-toggle>
|
||||
|
||||
<dees-input-toggle
|
||||
.label=${'Do not disturb'}
|
||||
.value=${false}
|
||||
@newValue=${(event: CustomEvent) => {
|
||||
const output = document.querySelector('#dnd-output');
|
||||
if (output) {
|
||||
output.textContent = `Do not disturb: ${event.detail ? 'ENABLED' : 'DISABLED'}`;
|
||||
}
|
||||
}}
|
||||
></dees-input-toggle>
|
||||
</div>
|
||||
|
||||
<div class="interactive-section">
|
||||
<div id="airplane-output" class="output-text">Airplane mode: OFF</div>
|
||||
<div id="dnd-output" class="output-text" style="margin-top: 8px;">Do not disturb: DISABLED</div>
|
||||
</div>
|
||||
</dees-panel>
|
||||
</div>
|
||||
</dees-demowrapper>
|
||||
`;
|
||||
@@ -0,0 +1,372 @@
|
||||
import {
|
||||
customElement,
|
||||
type TemplateResult,
|
||||
property,
|
||||
html,
|
||||
css,
|
||||
cssManager,
|
||||
} from '@design.estate/dees-element';
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
|
||||
import { demoFunc } from './dees-input-toggle.demo.js';
|
||||
import { cssGeistFontFamily } from '../../00fonts.js';
|
||||
import { themeDefaultStyles } from '../../00theme.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-input-toggle': DeesInputToggle;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dees-input-toggle')
|
||||
export class DeesInputToggle extends DeesInputBase<DeesInputToggle> {
|
||||
// STATIC
|
||||
public static demo = demoFunc;
|
||||
public static demoGroup = 'Input';
|
||||
|
||||
// INSTANCE
|
||||
|
||||
@property({ type: Boolean, reflect: true })
|
||||
accessor value: boolean = false;
|
||||
|
||||
/**
|
||||
* Knob position tracking (0 = off, maxTravel = on)
|
||||
*/
|
||||
private currentX = 0;
|
||||
|
||||
/**
|
||||
* Drag state
|
||||
*/
|
||||
private isDragging = false;
|
||||
private hasDragged = false;
|
||||
private startX = 0;
|
||||
|
||||
// Toggle dimensions
|
||||
private readonly trackWidth = 36;
|
||||
private readonly trackHeight = 20;
|
||||
private readonly knobSize = 14;
|
||||
private readonly padding = 2;
|
||||
private readonly maxTravel = 16; // trackWidth - knobSize - (padding * 2) - border
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.labelPosition = 'right'; // Toggle defaults to label on the right
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
themeDefaultStyles,
|
||||
...DeesInputBase.baseStyles,
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:host {
|
||||
position: relative;
|
||||
cursor: default;
|
||||
font-family: ${cssGeistFontFamily};
|
||||
}
|
||||
|
||||
.maincontainer {
|
||||
display: inline-flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.toggle-track {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
height: 20px;
|
||||
width: 36px;
|
||||
border-radius: 10px;
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
|
||||
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
|
||||
overflow: hidden;
|
||||
transition: all 0.15s ease;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.maincontainer:hover .toggle-track {
|
||||
border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
|
||||
}
|
||||
|
||||
:host([value]) .toggle-track {
|
||||
background: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
|
||||
border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
|
||||
}
|
||||
|
||||
.toggle-track:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.1)', 'hsl(217.2 91.2% 59.8% / 0.1)')};
|
||||
}
|
||||
|
||||
.toggle-knob {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 7px;
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 63.9%)', 'hsl(0 0% 45.1%)')};
|
||||
transition: left 0.15s ease, background 0.15s ease;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.toggle-knob.dragging {
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
:host([value]) .toggle-knob {
|
||||
background: white;
|
||||
}
|
||||
|
||||
/* Disabled state */
|
||||
.maincontainer.disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.toggle-track.disabled {
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
|
||||
border-color: ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
|
||||
}
|
||||
|
||||
/* Required state (locked on) */
|
||||
:host([required][value]) .toggle-track {
|
||||
background: ${cssManager.bdTheme('hsl(222.2 47.4% 61.2%)', 'hsl(217.2 91.2% 49.8%)')};
|
||||
border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 61.2%)', 'hsl(217.2 91.2% 49.8%)')};
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
:host([required][value]) .toggle-knob {
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 70%)')};
|
||||
}
|
||||
|
||||
/* Label */
|
||||
.label-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.toggle-label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
|
||||
transition: color 0.15s ease;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.maincontainer:hover .toggle-label {
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
|
||||
}
|
||||
|
||||
.maincontainer.disabled:hover .toggle-label {
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
|
||||
}
|
||||
|
||||
/* Description */
|
||||
.description-text {
|
||||
font-size: 12px;
|
||||
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
|
||||
line-height: 1.5;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<div class="input-wrapper">
|
||||
<div class="maincontainer ${this.disabled ? 'disabled' : ''}" @click="${this.handleClick}">
|
||||
<div
|
||||
class="toggle-track ${this.disabled ? 'disabled' : ''}"
|
||||
tabindex="${this.disabled ? '-1' : '0'}"
|
||||
@keydown="${this.handleKeydown}"
|
||||
>
|
||||
<div
|
||||
class="toggle-knob"
|
||||
style="left: ${this.padding + this.currentX}px;"
|
||||
@pointerdown="${this.onPointerDown}"
|
||||
@pointermove="${this.onPointerMove}"
|
||||
@pointerup="${this.onPointerUp}"
|
||||
@pointercancel="${this.onPointerUp}"
|
||||
></div>
|
||||
</div>
|
||||
<div class="label-container">
|
||||
${this.label ? html`<div class="toggle-label">${this.label}</div>` : ''}
|
||||
${this.description ? html`<div class="description-text">${this.description}</div>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
public async firstUpdated(_changedProperties: Map<PropertyKey, unknown>) {
|
||||
await super.firstUpdated(_changedProperties);
|
||||
// Initialize knob position based on initial value
|
||||
if (this.required && !this.value) {
|
||||
this.value = true;
|
||||
}
|
||||
this.currentX = this.value ? this.maxTravel : 0;
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
/**
|
||||
* Click handler - toggles the value
|
||||
*/
|
||||
private async handleClick(event: MouseEvent) {
|
||||
if (this.isDragging || this.hasDragged) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.required) {
|
||||
// Bounce animation for required toggles
|
||||
this.currentX = this.maxTravel;
|
||||
this.requestUpdate();
|
||||
await new Promise((r) => setTimeout(r, 10));
|
||||
this.currentX = this.maxTravel - 3;
|
||||
this.requestUpdate();
|
||||
await domtools.plugins.smartdelay.delayFor(150);
|
||||
this.currentX = this.maxTravel;
|
||||
this.requestUpdate();
|
||||
return;
|
||||
}
|
||||
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
this.value = !this.value;
|
||||
this.currentX = this.value ? this.maxTravel : 0;
|
||||
this.requestUpdate();
|
||||
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('newValue', {
|
||||
detail: this.value,
|
||||
bubbles: true,
|
||||
})
|
||||
);
|
||||
this.changeSubject.next(this);
|
||||
|
||||
domtools.plugins.smartdelay.delayFor(0).then(() => {
|
||||
this.hasDragged = false;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Pointer down - start dragging
|
||||
*/
|
||||
private onPointerDown(event: PointerEvent) {
|
||||
if (this.required || this.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.isDragging = true;
|
||||
this.startX = event.clientX - this.currentX;
|
||||
(event.target as HTMLElement).setPointerCapture(event.pointerId);
|
||||
}
|
||||
|
||||
/**
|
||||
* Pointer move - track drag position
|
||||
*/
|
||||
private onPointerMove(event: PointerEvent) {
|
||||
if (!this.isDragging) return;
|
||||
const newX = event.clientX - this.startX;
|
||||
this.hasDragged = true;
|
||||
|
||||
const toggleKnob = this.shadowRoot?.querySelector('.toggle-knob') as HTMLDivElement;
|
||||
if (toggleKnob) {
|
||||
toggleKnob.classList.add('dragging');
|
||||
}
|
||||
|
||||
this.currentX = Math.max(0, Math.min(newX, this.maxTravel));
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
/**
|
||||
* Pointer up - complete drag and snap to nearest side
|
||||
*/
|
||||
private onPointerUp(event: PointerEvent) {
|
||||
if (!this.isDragging) return;
|
||||
(event.target as HTMLElement).releasePointerCapture(event.pointerId);
|
||||
this.isDragging = false;
|
||||
|
||||
if (!this.hasDragged) {
|
||||
return;
|
||||
}
|
||||
|
||||
const toggleKnob = this.shadowRoot?.querySelector('.toggle-knob') as HTMLDivElement;
|
||||
if (toggleKnob) {
|
||||
toggleKnob.classList.remove('dragging');
|
||||
}
|
||||
|
||||
// Snap to nearest side based on midpoint
|
||||
const midpoint = this.maxTravel / 2;
|
||||
this.value = this.currentX > midpoint;
|
||||
this.currentX = this.value ? this.maxTravel : 0;
|
||||
this.requestUpdate();
|
||||
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('newValue', {
|
||||
detail: this.value,
|
||||
bubbles: true,
|
||||
})
|
||||
);
|
||||
this.changeSubject.next(this);
|
||||
|
||||
domtools.plugins.smartdelay.delayFor(0).then(() => {
|
||||
this.hasDragged = false;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Sync knob position when value is changed externally
|
||||
*/
|
||||
updated(changedProperties: Map<string, any>): void {
|
||||
super.updated(changedProperties);
|
||||
if (
|
||||
changedProperties.has('value') &&
|
||||
!this.isDragging &&
|
||||
!this.hasDragged
|
||||
) {
|
||||
this.currentX = this.value ? this.maxTravel : 0;
|
||||
this.requestUpdate();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Keyboard support
|
||||
*/
|
||||
private handleKeydown(event: KeyboardEvent) {
|
||||
if (event.key === ' ' || event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
this.handleClick(event as unknown as MouseEvent);
|
||||
}
|
||||
}
|
||||
|
||||
// DeesInputBase interface implementation
|
||||
public getValue(): boolean {
|
||||
return this.value;
|
||||
}
|
||||
|
||||
public setValue(valueArg: boolean): void {
|
||||
this.value = valueArg;
|
||||
}
|
||||
|
||||
public focus(): void {
|
||||
const track = this.shadowRoot?.querySelector('.toggle-track');
|
||||
if (track) {
|
||||
(track as HTMLElement).focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
1
ts_web/elements/00group-input/dees-input-toggle/index.ts
Normal file
1
ts_web/elements/00group-input/dees-input-toggle/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from './dees-input-toggle.js';
|
||||
@@ -15,6 +15,7 @@ export * from './dees-input-richtext/index.js';
|
||||
export * from './dees-input-searchselect/index.js';
|
||||
export * from './dees-input-tags/index.js';
|
||||
export * from './dees-input-text/index.js';
|
||||
export * from './dees-input-toggle/index.js';
|
||||
export * from './dees-input-typelist/index.js';
|
||||
export * from './dees-input-wysiwyg.js';
|
||||
export * from './profilepicture/dees-input-profilepicture.js';
|
||||
|
||||
Reference in New Issue
Block a user