@design.estate/dees-catalog 3.33.0 → 3.34.1

package/dist_ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.js

@@ -0,0 +1,381 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { customElement, 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';
+let DeesInputToggle = (() => {
+    let _classDecorators = [customElement('dees-input-toggle')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesInputBase;
+    let _value_decorators;
+    let _value_initializers = [];
+    let _value_extraInitializers = [];
+    var DeesInputToggle = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _value_decorators = [property({ type: Boolean, reflect: true })];
+            __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            DeesInputToggle = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        // STATIC
+        static demo = demoFunc;
+        static demoGroup = 'Input';
+        #value_accessor_storage = __runInitializers(this, _value_initializers, false);
+        // INSTANCE
+        get value() { return this.#value_accessor_storage; }
+        set value(value) { this.#value_accessor_storage = value; }
+        /**
+         * Knob position tracking (0 = off, maxTravel = on)
+         */
+        currentX = (__runInitializers(this, _value_extraInitializers), 0);
+        /**
+         * Drag state
+         */
+        isDragging = false;
+        hasDragged = false;
+        startX = 0;
+        // Toggle dimensions
+        trackWidth = 36;
+        trackHeight = 20;
+        knobSize = 14;
+        padding = 2;
+        maxTravel = 16; // trackWidth - knobSize - (padding * 2) - border
+        constructor() {
+            super();
+            this.labelPosition = 'right'; // Toggle defaults to label on the right
+        }
+        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;
+      }
+    `,
+        ];
+        render() {
+            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>
+    `;
+        }
+        async firstUpdated(_changedProperties) {
+            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
+         */
+        async handleClick(event) {
+            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
+         */
+        onPointerDown(event) {
+            if (this.required || this.disabled) {
+                return;
+            }
+            this.isDragging = true;
+            this.startX = event.clientX - this.currentX;
+            event.target.setPointerCapture(event.pointerId);
+        }
+        /**
+         * Pointer move - track drag position
+         */
+        onPointerMove(event) {
+            if (!this.isDragging)
+                return;
+            const newX = event.clientX - this.startX;
+            this.hasDragged = true;
+            const toggleKnob = this.shadowRoot?.querySelector('.toggle-knob');
+            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
+         */
+        onPointerUp(event) {
+            if (!this.isDragging)
+                return;
+            event.target.releasePointerCapture(event.pointerId);
+            this.isDragging = false;
+            if (!this.hasDragged) {
+                return;
+            }
+            const toggleKnob = this.shadowRoot?.querySelector('.toggle-knob');
+            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) {
+            super.updated(changedProperties);
+            if (changedProperties.has('value') &&
+                !this.isDragging &&
+                !this.hasDragged) {
+                this.currentX = this.value ? this.maxTravel : 0;
+                this.requestUpdate();
+            }
+        }
+        /**
+         * Keyboard support
+         */
+        handleKeydown(event) {
+            if (event.key === ' ' || event.key === 'Enter') {
+                event.preventDefault();
+                this.handleClick(event);
+            }
+        }
+        // DeesInputBase interface implementation
+        getValue() {
+            return this.value;
+        }
+        setValue(valueArg) {
+            this.value = valueArg;
+        }
+        focus() {
+            const track = this.shadowRoot?.querySelector('.toggle-track');
+            if (track) {
+                track.focus();
+            }
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return DeesInputToggle = _classThis;
+})();
+export { DeesInputToggle };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1pbnB1dC10b2dnbGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi90c193ZWIvZWxlbWVudHMvMDBncm91cC1pbnB1dC9kZWVzLWlucHV0LXRvZ2dsZS9kZWVzLWlucHV0LXRvZ2dsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxFQUNMLGFBQWEsRUFFYixRQUFRLEVBQ1IsSUFBSSxFQUNKLEdBQUcsRUFDSCxVQUFVLEdBQ1gsTUFBTSw2QkFBNkIsQ0FBQztBQUNyQyxPQUFPLEtBQUssUUFBUSxNQUFNLDhCQUE4QixDQUFDO0FBQ3pELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx1Q0FBdUMsQ0FBQztBQUN0RSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFDdkQsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFDdEQsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sa0JBQWtCLENBQUM7SUFTekMsZUFBZTs0QkFEM0IsYUFBYSxDQUFDLG1CQUFtQixDQUFDOzs7O3NCQUNFLGFBQWE7Ozs7K0JBQXJCLFNBQVEsV0FBOEI7Ozs7aUNBT2hFLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxPQUFPLEVBQUUsT0FBTyxFQUFFLElBQUksRUFBRSxDQUFDO1lBQzNDLG9LQUFTLEtBQUssNkJBQUwsS0FBSyxxRkFBa0I7WUFSbEMsNktBOFZDOzs7O1FBN1ZDLFNBQVM7UUFDRixNQUFNLENBQUMsSUFBSSxHQUFHLFFBQVEsQ0FBQztRQUN2QixNQUFNLENBQUMsU0FBUyxHQUFHLE9BQU8sQ0FBQztRQUtsQyx1RUFBMEIsS0FBSyxFQUFDO1FBSGhDLFdBQVc7UUFHWCxJQUFTLEtBQUssMkNBQWtCO1FBQWhDLElBQVMsS0FBSyxpREFBa0I7UUFFaEM7O1dBRUc7UUFDSyxRQUFRLHVEQUFHLENBQUMsRUFB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

package/dist_ts_web/elements/00group-input/dees-input-toggle/index.d.ts

@@ -0,0 +1 @@
+export * from './dees-input-toggle.js';

package/dist_ts_web/elements/00group-input/dees-input-toggle/index.js

@@ -0,0 +1,2 @@
+export * from './dees-input-toggle.js';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi90c193ZWIvZWxlbWVudHMvMDBncm91cC1pbnB1dC9kZWVzLWlucHV0LXRvZ2dsZS9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxjQUFjLHdCQUF3QixDQUFDIn0=

package/dist_ts_web/elements/00group-input/index.d.ts

@@ -14,6 +14,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';

package/dist_ts_web/elements/00group-input/index.js

@@ -15,7 +15,8 @@ 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';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi90c193ZWIvZWxlbWVudHMvMDBncm91cC1pbnB1dC9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxtQkFBbUI7QUFDbkIsY0FBYyw0QkFBNEIsQ0FBQztBQUMzQyxjQUFjLGdDQUFnQyxDQUFDO0FBQy9DLGNBQWMsNEJBQTRCLENBQUM7QUFDM0MsY0FBYyxrQ0FBa0MsQ0FBQztBQUNqRCxjQUFjLGdDQUFnQyxDQUFDO0FBQy9DLGNBQWMsa0NBQWtDLENBQUM7QUFDakQsY0FBYyw0QkFBNEIsQ0FBQztBQUMzQyxjQUFjLDRCQUE0QixDQUFDO0FBQzNDLGNBQWMsbUNBQW1DLENBQUM7QUFDbEQsY0FBYyw2QkFBNkIsQ0FBQztBQUM1QyxjQUFjLHdDQUF3QyxDQUFDO0FBQ3ZELGNBQWMsa0NBQWtDLENBQUM7QUFDakQsY0FBYyxnQ0FBZ0MsQ0FBQztBQUMvQyxjQUFjLG9DQUFvQyxDQUFDO0FBQ25ELGNBQWMsNEJBQTRCLENBQUM7QUFDM0MsY0FBYyw0QkFBNEIsQ0FBQztBQUMzQyxjQUFjLGdDQUFnQyxDQUFDO0FBQy9DLGNBQWMseUJBQXlCLENBQUM7QUFDeEMsY0FBYywrQ0FBK0MsQ0FBQyJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi90c193ZWIvZWxlbWVudHMvMDBncm91cC1pbnB1dC9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxtQkFBbUI7QUFDbkIsY0FBYyw0QkFBNEIsQ0FBQztBQUMzQyxjQUFjLGdDQUFnQyxDQUFDO0FBQy9DLGNBQWMsNEJBQTRCLENBQUM7QUFDM0MsY0FBYyxrQ0FBa0MsQ0FBQztBQUNqRCxjQUFjLGdDQUFnQyxDQUFDO0FBQy9DLGNBQWMsa0NBQWtDLENBQUM7QUFDakQsY0FBYyw0QkFBNEIsQ0FBQztBQUMzQyxjQUFjLDRCQUE0QixDQUFDO0FBQzNDLGNBQWMsbUNBQW1DLENBQUM7QUFDbEQsY0FBYyw2QkFBNkIsQ0FBQztBQUM1QyxjQUFjLHdDQUF3QyxDQUFDO0FBQ3ZELGNBQWMsa0NBQWtDLENBQUM7QUFDakQsY0FBYyxnQ0FBZ0MsQ0FBQztBQUMvQyxjQUFjLG9DQUFvQyxDQUFDO0FBQ25ELGNBQWMsNEJBQTRCLENBQUM7QUFDM0MsY0FBYyw0QkFBNEIsQ0FBQztBQUMzQyxjQUFjLDhCQUE4QixDQUFDO0FBQzdDLGNBQWMsZ0NBQWdDLENBQUM7QUFDL0MsY0FBYyx5QkFBeUIsQ0FBQztBQUN4QyxjQUFjLCtDQUErQyxDQUFDIn0=

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.33.0",
+  "version": "3.34.1",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",
@@ -18,6 +18,7 @@
   "dependencies": {
     "@design.estate/dees-domtools": "^2.3.7",
     "@design.estate/dees-element": "^2.1.5",
+    "@design.estate/dees-wcctools": "^3.7.1",
     "@fortawesome/fontawesome-svg-core": "^7.1.0",
     "@fortawesome/free-brands-svg-icons": "^7.1.0",
     "@fortawesome/free-regular-svg-icons": "^7.1.0",
@@ -43,7 +44,6 @@
     "xterm-addon-fit": "^0.8.0"
   },
   "devDependencies": {
-    "@design.estate/dees-wcctools": "^3.7.1",
     "@git.zone/tsbuild": "^4.0.2",
     "@git.zone/tsbundle": "^2.6.3",
     "@git.zone/tstest": "^3.1.4",

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.33.0',
+  version: '3.34.1',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

package/ts_web/elements/00group-form/dees-form/dees-form.ts

@@ -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>;