@plusui/library 0.1.0

package/cdn/components/toggle/toggle.js

@@ -0,0 +1,509 @@
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { r } from '../../state-D1d5Sfj8.js';
+import { e } from '../../query-CHb9Ft_d.js';
+import { i, x } from '../../lit-element-ByzbtpGk.js';
+import { l } from '../../live-BOAtKRUN.js';
+import Tailwind from '../base/tailwind-base.js';
+import { captionStyle } from '../caption/caption.style.js';
+import { labelStyle } from '../label/label.style.js';
+import { toggleStyle } from './toggle.style.js';
+import '../svg-icon/index.js';
+import { o } from '../../if-defined-D-m3dgRf.js';
+import { o as o$1 } from '../../style-map-DC_vNus2.js';
+import '../../base-Cl6v8-BZ.js';
+import '../../directive-DZCF8pFJ.js';
+import '../../global-Dh9axYQH.js';
+import '../../index-B9iart53.js';
+import '../svg-icon/svg-icon.js';
+import '../../unsafe-html-BhmP6ONc.js';
+import '../svg-icon/icons.js';
+
+/**
+ * @tag plus-toggle
+ * @summary Toggle component that provides a switch with various styles and states.
+ *
+ * @slot - The default slot for toggle text content when no text property is specified
+ *
+ * @csspart base - The component's base wrapper
+ * @csspart label - The label element
+ * @csspart control - The control element containing the toggle and text
+ * @csspart switch - The switch element
+ * @csspart dot - The dot element inside the switch
+ * @csspart text - The text element
+ * @csspart icon - The icon element when an icon is used
+ * @csspart caption - The caption element
+ *
+ * @cssproperty --text-color - Controls the text color
+ * @cssproperty --border-color - Controls the border color of the toggle
+ * @cssproperty --switch-bg - Controls the background color of the switch
+ * @cssproperty --switch-bg-hover - Controls the background color when hovered
+ * @cssproperty --switch-bg-active - Controls the background color when pressed
+ * @cssproperty --dot-bg - Controls the background color of the dot
+ * @cssproperty --dot-text - Controls the text color of the icon in the dot
+ *
+ * @event plus-change - Emitted when the toggle state changes
+ * @event plus-input - Emitted when the toggle state changes (for input event compatibility)
+ * @event plus-focus - Emitted when the toggle gains focus
+ * @event plus-blur - Emitted when the toggle loses focus
+ * @event plus-invalid - Emitted when the toggle validation fails
+ *
+ * @example
+ * ```html
+ * <plus-toggle label="Dark Mode" size="md">Enable dark mode</plus-toggle>
+ * ```
+ */
+class PlusToggle extends Tailwind {
+    constructor() {
+        super();
+        this.hasFocus = false;
+        this.validationMessage = '';
+        this.name = '';
+        this.value = 'on';
+        this.checked = false;
+        this.size = 'md';
+        this.textPosition = 'right';
+        this.error = false;
+        this.errorMessage = '';
+        this.disabled = false;
+        this.readonly = false;
+        this.required = false;
+        this.fullWidth = false;
+        this.animation = 'default';
+        if (this.attachInternals) {
+            this.internals = this.attachInternals();
+        }
+        else {
+            console.warn('ElementInternals not supported in this browser for plus-toggle.');
+        }
+        this.addEventListener('click', (event) => {
+            if (event.target === this) {
+                event.stopPropagation();
+            }
+        });
+    }
+    /**
+     * Checks the validity of the toggle input
+     * @returns True if the toggle is valid, false otherwise
+     */
+    checkValidity() {
+        if (!this.input)
+            return true;
+        const valid = this.input.checkValidity();
+        return valid;
+    }
+    /**
+     * Reports the validity of the toggle input
+     * @returns True if the toggle is valid, false otherwise
+     */
+    reportValidity() {
+        if (!this.input)
+            return true;
+        const valid = this.input.reportValidity();
+        if (!valid) {
+            this.error = true;
+            this.validationMessage =
+                this.input.validationMessage || this.errorMessage;
+            this.emit('plus-invalid', {
+                detail: { message: this.validationMessage },
+            });
+        }
+        else {
+            this.error = false;
+            this.validationMessage = '';
+        }
+        return valid;
+    }
+    /**
+     * Sets a custom validity message for the toggle
+     * @param message The custom validity message
+     */
+    setCustomValidity(message) {
+        if (this.input) {
+            this.input.setCustomValidity(message);
+            this.validationMessage = message;
+        }
+    }
+    setFormValue() {
+        if (this.internals) {
+            this.internals.setFormValue(this.checked ? this.value : null, this.checked ? 'checked' : undefined);
+        }
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('value') || changedProperties.has('checked')) {
+            this.setFormValue();
+        }
+        if (this.input) {
+            if (changedProperties.has('disabled') ||
+                changedProperties.has('readonly')) {
+                this.input.disabled = this.disabled || this.readonly;
+            }
+            if (changedProperties.has('required')) {
+                this.input.required = this.required;
+            }
+        }
+    }
+    formResetCallback() {
+        const initialChecked = this.hasAttribute('checked');
+        this.checked = initialChecked;
+        this.setFormValue();
+    }
+    formDisabledCallback(disabled) {
+        this.disabled = disabled;
+    }
+    handleBlur() {
+        this.hasFocus = false;
+        this.emit('plus-blur');
+    }
+    handleFocus() {
+        this.hasFocus = true;
+        this.emit('plus-focus');
+    }
+    /**
+     * Gets the validation message for the toggle
+     * @returns {string} The validation message
+     * @private
+     */
+    getValidationMessage() {
+        const validity = this.input.validity;
+        if (validity.valueMissing) {
+            return 'This field is required';
+        }
+        return (this.input.validationMessage ||
+            this.errorMessage ||
+            'Please correct the error');
+    }
+    // /**
+    //  * Update the animation class name based on the animation type
+    //  * @private
+    //  */
+    // private getAnimationClass(): string {
+    //   switch (this.animation) {
+    //     case 'bounce':
+    //       return 'transition-all duration-400 ease-bounce';
+    //     case 'smooth':
+    //       return 'transition-all duration-500 ease-in-out';
+    //     case 'default':
+    //     default:
+    //       return 'transition-all duration-300 ease-in-out';
+    //   }
+    // }
+    /**
+     * Validates the toggle input
+     * @private
+     */
+    validate() {
+        const isValid = this.input.checkValidity();
+        const validationMessage = this.getValidationMessage();
+        this.validationMessage = validationMessage;
+        this.error = !isValid;
+    }
+    /**
+     * Called when the input is invalid
+     * @param {Event} event The event object
+     * @private
+     */
+    handleInvalid(event) {
+        // Prevent the browser's default validation UI
+        event.preventDefault();
+        // Get validity state and message directly from the native input
+        const isValid = this.input.validity.valid;
+        const validationMessage = this.getValidationMessage();
+        // Update component state
+        this.validationMessage = validationMessage;
+        this.error = !isValid;
+        // Emit the custom invalid event if the input is truly invalid
+        if (!isValid) {
+            this.emit('plus-invalid', { detail: { validationMessage } });
+        }
+    }
+    handleChange(event) {
+        const target = event.target;
+        if (this.disabled || this.readonly) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            return;
+        }
+        this.checked = target.checked;
+        this.setFormValue();
+        this.emit('plus-change');
+        this.emit('plus-input');
+        // Validate after change if required
+        if (this.required) {
+            this.validate();
+        }
+    }
+    handleControlClick(event) {
+        // Don't handle events on the input element, as input is already handled by @change
+        if (event.target.id === 'input')
+            return;
+        if (this.disabled || this.readonly)
+            return;
+        // Forward the click event to the input
+        this.input?.click();
+    }
+    click() {
+        if (!this.disabled && !this.readonly) {
+            this.input?.click();
+        }
+    }
+    focus(options) {
+        this.input?.focus(options);
+    }
+    blur() {
+        this.input?.blur();
+    }
+    getToggleIcon() {
+        const { checked, toggleIcon, toggleActiveIcon, toggleInActiveIcon, iconSize, } = this;
+        const { icon: iconCls } = toggleStyle({ checked });
+        let iconName = '';
+        if (checked && toggleActiveIcon) {
+            iconName = toggleActiveIcon;
+        }
+        else if (!checked && toggleInActiveIcon) {
+            iconName = toggleInActiveIcon;
+        }
+        else if (toggleIcon) {
+            iconName = toggleIcon;
+        }
+        return iconName
+            ? x `<plus-icon
+          part="icon"
+          class=${iconCls()}
+          iconName=${iconName}
+          size=${o(iconSize)}
+        ></plus-icon>`
+            : '';
+    }
+    render() {
+        const { label, hasFocus, error, disabled, caption, value, checked, name, required, textPosition, text, readonly, size, fullWidth, customAriaLabel, validationMessage, animation, } = this;
+        // Default colors based on state
+        const defaultStyles = {
+            '--i-text-color': 'var(--plus-color-text-default)',
+            '--i-border-color': 'transparent',
+            '--i-switch-bg': 'var(--plus-color-background-default-invert-default)',
+            '--i-switch-bg-hover': 'var(--plus-color-background-default-invert-hovered)',
+            '--i-switch-bg-active': 'var(--plus-color-background-default-invert-pressed)',
+            '--i-dot-bg': 'var(--plus-color-background-default-default)',
+            '--i-dot-text': 'var(--plus-color-text-caption)',
+        };
+        // Checked state styles
+        const checkedStyles = {
+            '--i-switch-bg': 'var(--plus-color-background-primary-default)',
+            '--i-switch-bg-hover': 'var(--plus-color-background-primary-hovered)',
+            '--i-switch-bg-active': 'var(--plus-color-background-primary-pressed)',
+            '--i-dot-text': 'var(--plus-color-text-primary)',
+        };
+        // Error state styles
+        const errorStyles = {
+            // '--i-border-color': 'var(--plus-color-border-danger)',
+            '--i-switch-bg': 'var(--plus-color-background-danger-default)',
+            '--i-switch-bg-hover': 'var(--plus-color-background-danger-hovered)',
+            '--i-switch-bg-active': 'var(--plus-color-background-danger-pressed)',
+            // '--i-dot-text': 'var(--plus-color-text-danger)',
+        };
+        // Readonly state styles
+        const readonlyStyles = {
+            '--i-border-color': 'var(--plus-color-border-default)',
+            '--i-switch-bg': 'var(--plus-color-background-default-default)',
+            '--i-dot-bg': 'var(--plus-color-background-default-invert-default)',
+        };
+        // Disabled state styles
+        const disabledStyles = {
+            '--i-text-color': 'var(--plus-color-text-disabled)',
+            '--i-switch-bg': 'var(--plus-color-background-disabled)',
+            '--i-border-color': 'var(--plus-color-border-disabled)',
+            '--i-dot-bg': 'var(--plus-color-background-disabled)',
+        };
+        // Set the appropriate styles based on component state
+        let stateStyles = defaultStyles;
+        if (disabled) {
+            stateStyles = { ...stateStyles, ...disabledStyles };
+            if (checked) {
+                stateStyles = {
+                    ...stateStyles,
+                    '--i-switch-bg': 'var(--plus-color-background-primary-default)',
+                    '--i-dot-bg': 'var(--plus-color-background-default-default)',
+                };
+            }
+        }
+        else if (readonly) {
+            stateStyles = { ...stateStyles, ...readonlyStyles };
+        }
+        else if (error) {
+            stateStyles = { ...stateStyles, ...errorStyles };
+        }
+        else if (checked) {
+            stateStyles = { ...stateStyles, ...checkedStyles };
+        }
+        // Dynamic styles to allow custom CSS variable overrides
+        const dynamicStyles = {
+            '--d-text': 'var(--text-color, var(--i-text-color))',
+            '--d-border': 'var(--border-color, var(--i-border-color))',
+            '--d-switch-bg': 'var(--switch-bg, var(--i-switch-bg))',
+            '--d-switch-bg-hover': 'var(--switch-bg-hover, var(--i-switch-bg-hover))',
+            '--d-switch-bg-active': 'var(--switch-bg-active, var(--i-switch-bg-active))',
+            '--d-dot-bg': 'var(--dot-bg, var(--i-dot-bg))',
+            '--d-dot-text': 'var(--dot-text, var(--i-dot-text))',
+        };
+        const { base, control, inputElement, switch: switchCls, text: textCls, dot, } = toggleStyle({
+            focus: hasFocus,
+            error,
+            disabled,
+            checked,
+            readonly,
+            size,
+            fullWidth,
+            animation,
+        });
+        const LabelTemplate = () => label
+            ? x `<label
+            part="label"
+            for="input"
+            class=${labelStyle({ required, size })}
+            @click=${this.focus}
+            >${label}</label
+          >`
+            : null;
+        const CaptionTemplate = () => caption || (error && validationMessage)
+            ? x `<div part="caption" class=${captionStyle({ error, size })}>
+            ${error && validationMessage ? validationMessage : caption}
+          </div>`
+            : null;
+        const switchContent = x `
+      <div part="switch" class=${switchCls()} aria-hidden="true">
+        <div part="dot" class=${dot()}>${this.getToggleIcon()}</div>
+      </div>
+    `;
+        const textContent = x `
+      <span part="text" class=${textCls()}>${text ?? x `<slot></slot>`}</span>
+    `;
+        return x `<div
+      class=${base()}
+      part="base"
+      style=${o$1({ ...stateStyles, ...dynamicStyles })}
+    >
+      ${LabelTemplate()}
+      <div class=${control()} part="control" @click=${this.handleControlClick}>
+        <input
+          id="input"
+          class=${inputElement()}
+          type="checkbox"
+          role="switch"
+          name=${o(name)}
+          value=${o(value)}
+          .checked=${l(checked)}
+          ?disabled=${disabled || readonly}
+          ?required=${required}
+          aria-checked=${checked ? 'true' : 'false'}
+          aria-disabled=${disabled || readonly ? 'true' : 'false'}
+          aria-invalid=${error ? 'true' : 'false'}
+          aria-label=${label
+            ? undefined
+            : customAriaLabel || (text ? text : 'Toggle')}
+          aria-labelledby=${label ? 'label' : undefined}
+          aria-describedby=${caption || validationMessage
+            ? 'caption'
+            : undefined}
+          @change=${this.handleChange}
+          @invalid=${this.handleInvalid}
+          @blur=${this.handleBlur}
+          @focus=${this.handleFocus}
+          @click=${(e) => e.stopPropagation()}
+        />
+        ${textPosition === 'left' ? textContent : switchContent}
+        ${textPosition === 'left' ? switchContent : textContent}
+      </div>
+      ${CaptionTemplate()}
+    </div>`;
+    }
+}
+PlusToggle.formAssociated = true;
+PlusToggle.styles = [
+    ...Tailwind.styles,
+    i `
+      :host {
+        display: block;
+        width: 100%;
+        max-width: 256px;
+      }
+
+      :host([full-width]) {
+        max-width: none;
+      }
+    `,
+];
+__decorate([
+    r()
+], PlusToggle.prototype, "internals", void 0);
+__decorate([
+    e('#input')
+], PlusToggle.prototype, "input", void 0);
+__decorate([
+    r()
+], PlusToggle.prototype, "hasFocus", void 0);
+__decorate([
+    r()
+], PlusToggle.prototype, "validationMessage", void 0);
+__decorate([
+    n({ type: String })
+], PlusToggle.prototype, "name", void 0);
+__decorate([
+    n({ type: String })
+], PlusToggle.prototype, "value", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], PlusToggle.prototype, "checked", void 0);
+__decorate([
+    n({ reflect: true })
+], PlusToggle.prototype, "size", void 0);
+__decorate([
+    n({ type: String })
+], PlusToggle.prototype, "label", void 0);
+__decorate([
+    n({ type: String })
+], PlusToggle.prototype, "caption", void 0);
+__decorate([
+    n({ type: String })
+], PlusToggle.prototype, "text", void 0);
+__decorate([
+    n({ type: String, reflect: true, attribute: 'text-position' })
+], PlusToggle.prototype, "textPosition", void 0);
+__decorate([
+    n({ type: String, attribute: 'toggle-icon' })
+], PlusToggle.prototype, "toggleIcon", void 0);
+__decorate([
+    n({ type: String, attribute: 'toggle-active-icon' })
+], PlusToggle.prototype, "toggleActiveIcon", void 0);
+__decorate([
+    n({ type: String, attribute: 'toggle-inactive-icon' })
+], PlusToggle.prototype, "toggleInActiveIcon", void 0);
+__decorate([
+    n({ type: Number, attribute: 'icon-size' })
+], PlusToggle.prototype, "iconSize", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], PlusToggle.prototype, "error", void 0);
+__decorate([
+    n({ type: String, attribute: 'error-message' })
+], PlusToggle.prototype, "errorMessage", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], PlusToggle.prototype, "disabled", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], PlusToggle.prototype, "readonly", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], PlusToggle.prototype, "required", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true, attribute: 'full-width' })
+], PlusToggle.prototype, "fullWidth", void 0);
+__decorate([
+    n({ type: String, attribute: 'animation' })
+], PlusToggle.prototype, "animation", void 0);
+__decorate([
+    n({ type: String, attribute: 'custom-aria-label' })
+], PlusToggle.prototype, "customAriaLabel", void 0);
+
+export { PlusToggle };