@krumio/trailhand-ui 1.5.0 → 1.7.0

package/dist/toggle-switch.js

@@ -1,175 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { LitElement, html, css } from 'lit';
-import { property } from 'lit/decorators.js';
-/**
- * A reusable toggle switch component for boolean values.
- * Can be used for any on/off, enabled/disabled, or true/false functionality.
- */
-export class ToggleSwitch extends LitElement {
-    constructor() {
-        super();
-        this.checked = false;
-        this.onLabel = 'On';
-        this.offLabel = 'Off';
-        this.storageKey = null;
-        this.name = '';
-        // Listen for changes from other instances with the same name
-        this.boundHandleExternalChange = this.handleExternalChange.bind(this);
-        window.addEventListener('toggle-changed', this.boundHandleExternalChange);
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        // Initialize from localStorage if storageKey is provided
-        if (this.storageKey) {
-            const savedValue = localStorage.getItem(this.storageKey);
-            if (savedValue !== null) {
-                this.checked = savedValue === 'true';
-            }
-        }
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        window.removeEventListener('toggle-changed', this.boundHandleExternalChange);
-    }
-    /**
-     * Handle changes from other toggle instances with the same name
-     * @param e - The toggle-changed event
-     */
-    handleExternalChange(e) {
-        const customEvent = e;
-        if (this.name && customEvent.detail.name === this.name) {
-            this.checked = customEvent.detail.checked;
-        }
-    }
-    /**
-     * Dispatch a change event
-     * @param checked - The new checked state
-     */
-    dispatchChangeEvent(checked) {
-        const event = new CustomEvent('toggle-change', {
-            bubbles: true,
-            composed: true,
-            detail: { checked, name: this.name }
-        });
-        this.dispatchEvent(event);
-        // Dispatch on window if name is provided (for syncing multiple instances)
-        if (this.name) {
-            window.dispatchEvent(new CustomEvent('toggle-changed', {
-                detail: { checked, name: this.name }
-            }));
-        }
-    }
-    /**
-     * Handle toggle switch change
-     * @param e - The change event
-     */
-    handleToggleChange(e) {
-        const target = e.target;
-        this.checked = target.checked;
-        // Save to localStorage if storageKey is provided
-        if (this.storageKey) {
-            localStorage.setItem(this.storageKey, this.checked.toString());
-        }
-        // Dispatch change event
-        this.dispatchChangeEvent(this.checked);
-    }
-    /**
-     * Render the component
-     * @returns TemplateResult
-     */
-    render() {
-        return html `
-      <span class="label">${this.offLabel}</span>
-      <label class="toggle-switch">
-        <input
-          type="checkbox"
-          .checked=${this.checked}
-          @change=${this.handleToggleChange}
-        >
-        <span class="slider"></span>
-      </label>
-      <span class="label">${this.onLabel}</span>
-    `;
-    }
-}
-ToggleSwitch.styles = css `
-    :host {
-      display: flex;
-      align-items: center;
-      margin-right: 10px;
-    }
-
-    .toggle-switch {
-      position: relative;
-      display: inline-block;
-      width: 44px;
-      height: 24px;
-      margin: 0 8px;
-    }
-
-    .toggle-switch input {
-      opacity: 0;
-      width: 0;
-      height: 0;
-    }
-
-    .slider {
-      position: absolute;
-      cursor: pointer;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background-color: #4a5568;
-      transition: .3s;
-      border-radius: 24px;
-    }
-
-    .slider:before {
-      position: absolute;
-      content: "";
-      height: 18px;
-      width: 18px;
-      left: 3px;
-      bottom: 3px;
-      background-color: white;
-      transition: .3s;
-      border-radius: 50%;
-    }
-
-    input:checked + .slider {
-      background-color: #3b82f6;
-    }
-
-    input:checked + .slider:before {
-      transform: translateX(20px);
-    }
-
-    .label {
-      font-size: 14px;
-      user-select: none;
-    }
-  `;
-__decorate([
-    property({ type: Boolean })
-], ToggleSwitch.prototype, "checked", void 0);
-__decorate([
-    property({ type: String, attribute: 'on-label' })
-], ToggleSwitch.prototype, "onLabel", void 0);
-__decorate([
-    property({ type: String, attribute: 'off-label' })
-], ToggleSwitch.prototype, "offLabel", void 0);
-__decorate([
-    property({ type: String, attribute: 'storage-key' })
-], ToggleSwitch.prototype, "storageKey", void 0);
-__decorate([
-    property({ type: String })
-], ToggleSwitch.prototype, "name", void 0);
-// Register the element
-customElements.define('toggle-switch', ToggleSwitch);
-//# sourceMappingURL=toggle-switch.js.map

package/dist/toggle-switch.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"toggle-switch.js","sourceRoot":"","sources":["../Components/toggle-switch.ts"],"names":[],"mappings":"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"}