wj-elements 0.1.229 → 0.1.231

package/dist/wje-toggle.js

@@ -1,124 +1,203 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import WJElement from "./wje-element.js";
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var _internalValue;
+import { F as FormAssociatedElement } from "./form-associated-element-o0UjvdUp.js";
 import { event } from "./event.js";
-const styles = "/*\n[ WJ Toggle ]\n*/\n\n:host {\n    --wje-toggle-color-base: var(--wje-color-contrast-3);\n    --wje-toggle-width: 30px;\n    --wje-toggle-height: 18px;\n    --wje-toggle-border-radius: 50px;\n    --wje-toggle-handle-width: 13px;\n    --wje-toggle-handle-height: 13px;\n    --wje-toggle-handle-border-radius: 9px;\n    --wje-toggle-handle-color: #fff;\n    --wje-toggle-handle-shadow: 1px 0 1px 0.5px rgba(0, 0, 0, 0.12), 2px 4px 6px rgba(0, 0, 0, 0.2);\n    --wje-toggle-handle-shadow-checked: 1px 1px 0 rgba(0, 0, 0, 0.08), -3px 3px 6px rgba(0, 0, 0, 0.3);\n    --wje-toggle-duration: 250ms;\n    --wje-toggle-curve: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n:host([color='primary']) input:checked + label > .label-wrapper {\n    --wje-toggle-color-base: var(--wje-color-primary-9) !important;\n}\n\n:host([color='complete']) input:checked + label > .label-wrapper {\n    --wje-toggle-color-base: var(--wje-color-complete-9);\n}\n\n:host([color='success']) input:checked + label > .label-wrapper {\n    --wje-toggle-color-base: var(--wje-color-success-9) !important;\n}\n\n:host([color='warning']) input:checked + label > .label-wrapper {\n    --wje-toggle-color-base: var(--wje-color-warning-9);\n}\n\n:host([color='danger']) input:checked + label > .label-wrapper {\n    --wje-toggle-color-base: var(--wje-color-danger-9);\n}\n\n:host([color='info']) input:checked + label > .label-wrapper {\n    --wje-toggle-color-base: var(--wje-color-info-9);\n}\n\n.native-toggle {\n    display: flex;\n}\n\nlabel {\n    display: flex;\n    cursor: pointer;\n    align-items: center;\n    user-select: none;\n    .label-wrapper {\n        width: var(--wje-toggle-width) !important;\n        min-width: var(--wje-toggle-width);\n        height: var(--wje-toggle-height);\n        position: relative;\n        display: flex;\n        align-items: center;\n        &:before {\n            content: '';\n            position: absolute;\n            cursor: pointer;\n            width: 100%;\n            height: 100%;\n            top: auto;\n            left: 0;\n            background: var(--wje-toggle-color-base);\n            background-size: 300%;\n            background-position: right;\n            border-radius: var(--wje-toggle-border-radius);\n            border: none;\n            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);\n            transition:\n                background calc(var(--wje-toggle-duration) + (var(--wje-toggle-duration) * 0.24)),\n                box-shadow var(--wje-toggle-duration);\n            transition-timing-function: var(--wje-toggle-curve);\n        }\n        &:after {\n            content: '';\n            position: absolute;\n            transform: translateX(0%);\n            background: var(--wje-toggle-handle-color);\n            width: var(--wje-toggle-handle-width);\n            height: var(--wje-toggle-handle-height);\n            border-radius: var(--wje-toggle-handle-border-radius);\n            top: auto;\n            left: 2px;\n            box-shadow: var(--wje-toggle-handle-shadow);\n            transition: transform, box-shadow;\n            transition-duration: var(--wje-toggle-duration);\n            transition-timing-function: var(--wje-toggle-curve);\n        }\n    }\n}\ninput[type='checkbox'][disabled] {\n    & + label {\n        cursor: not-allowed !important;\n        color: var(--wje-color-contrast-9);\n        opacity: 0.58;\n\n        &:before {\n            cursor: not-allowed !important;\n        }\n    }\n}\n\ninput[type='checkbox'] {\n    position: absolute;\n    z-index: -1;\n    opacity: 0;\n    &:checked {\n        & + label {\n            .label-wrapper:before {\n                background-position: left;\n                box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);\n            }\n            .label-wrapper:after {\n                transform: translateX(calc(var(--wje-toggle-width) - var(--wje-toggle-handle-width) - 4px));\n                box-shadow: var(--wje-toggle-handle-shadow-checked);\n            }\n        }\n    }\n    &:focus {\n        & + label {\n            .label-wrapper:before {\n                outline: none !important;\n                box-shadow:\n                    inset 0 0 0 1px rgba(0, 0, 0, 0.12),\n                    0 0 0 0 #78c8fe;\n            }\n        }\n    }\n    &[disabled]:active {\n        & + label {\n            .label-wrapper:after {\n                transform: scaleX(1.1);\n                transform-origin: center left;\n                transition: transform step-start;\n            }\n        }\n    }\n    &:checked {\n        &[disabled]:active {\n            & + label {\n                .label-wrapper:after {\n                    transform: translateX(calc(100% - 6px)) scaleX(1.1);\n                    transform-origin: center right;\n                }\n            }\n        }\n    }\n    &:hover {\n        &:active {\n            & + label {\n                .label-wrapper:before {\n                    background-color: transparent;\n                }\n            }\n        }\n    }\n}\n\n:host .text {\n    margin-inline: 0.5rem 0;\n}\n\n/*Placememt*/\n:host([placement='end']) {\n    label {\n        width: 100%;\n    }\n    .text {\n        margin-inline: 0 0.5rem;\n        width: 100%;\n    }\n}\n\nslot {\n    display: flex;\n    align-items: center;\n    width: 100%;\n}\n";
-class Toggle extends WJElement {
-  /**
-   * Creates an instance of Toggle.
-   */
+const styles = "/*\n[ WJ Toggle ]\n*/\n\n:host {\n    --wje-toggle-color-base: var(--wje-color-contrast-3);\n    --wje-toggle-width: 30px;\n    --wje-toggle-height: 18px;\n    --wje-toggle-border-radius: 50px;\n    --wje-toggle-handle-width: 13px;\n    --wje-toggle-handle-height: 13px;\n    --wje-toggle-handle-border-radius: 9px;\n    --wje-toggle-handle-color: #fff;\n    --wje-toggle-handle-shadow: 1px 0 1px 0.5px rgba(0, 0, 0, 0.12), 2px 4px 6px rgba(0, 0, 0, 0.2);\n    --wje-toggle-handle-shadow-checked: 1px 1px 0 rgba(0, 0, 0, 0.08), -3px 3px 6px rgba(0, 0, 0, 0.3);\n    --wje-toggle-duration: 250ms;\n    --wje-toggle-curve: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n:host([color='primary']) input:checked + label > .label-wrapper {\n    --wje-toggle-color-base: var(--wje-color-primary-9) !important;\n}\n\n:host([color='complete']) input:checked + label > .label-wrapper {\n    --wje-toggle-color-base: var(--wje-color-complete-9);\n}\n\n:host([color='success']) input:checked + label > .label-wrapper {\n    --wje-toggle-color-base: var(--wje-color-success-9) !important;\n}\n\n:host([color='warning']) input:checked + label > .label-wrapper {\n    --wje-toggle-color-base: var(--wje-color-warning-9);\n}\n\n:host([color='danger']) input:checked + label > .label-wrapper {\n    --wje-toggle-color-base: var(--wje-color-danger-9);\n}\n\n:host([color='info']) input:checked + label > .label-wrapper {\n    --wje-toggle-color-base: var(--wje-color-info-9);\n}\n\n.native-toggle {\n\n    label {\n        display: flex;\n        cursor: pointer;\n        align-items: center;\n        user-select: none;\n\n        .label-wrapper {\n            width: var(--wje-toggle-width) !important;\n            min-width: var(--wje-toggle-width);\n            height: var(--wje-toggle-height);\n            position: relative;\n            display: flex;\n            align-items: center;\n\n            &:before {\n                content: '';\n                position: absolute;\n                cursor: pointer;\n                width: 100%;\n                height: 100%;\n                top: auto;\n                left: 0;\n                background: var(--wje-toggle-color-base);\n                background-size: 300%;\n                background-position: right;\n                border-radius: var(--wje-toggle-border-radius);\n                border: none;\n                box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);\n                transition: background calc(var(--wje-toggle-duration) + (var(--wje-toggle-duration) * 0.24)),\n                box-shadow var(--wje-toggle-duration);\n                transition-timing-function: var(--wje-toggle-curve);\n            }\n\n            &:after {\n                content: '';\n                position: absolute;\n                transform: translateX(0%);\n                background: var(--wje-toggle-handle-color);\n                width: var(--wje-toggle-handle-width);\n                height: var(--wje-toggle-handle-height);\n                border-radius: var(--wje-toggle-handle-border-radius);\n                top: auto;\n                left: 2px;\n                box-shadow: var(--wje-toggle-handle-shadow);\n                transition: transform, box-shadow;\n                transition-duration: var(--wje-toggle-duration);\n                transition-timing-function: var(--wje-toggle-curve);\n            }\n        }\n    }\n\n    input[type='checkbox'][disabled] {\n        & + label {\n            cursor: not-allowed !important;\n            color: var(--wje-color-contrast-9);\n            opacity: 0.58;\n\n            &:before {\n                cursor: not-allowed !important;\n            }\n        }\n    }\n\n    input[type='checkbox'] {\n        position: absolute;\n        z-index: -1;\n        opacity: 0;\n\n        &:checked {\n            & + label {\n                .label-wrapper:before {\n                    background-position: left;\n                    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);\n                }\n\n                .label-wrapper:after {\n                    transform: translateX(calc(var(--wje-toggle-width) - var(--wje-toggle-handle-width) - 4px));\n                    box-shadow: var(--wje-toggle-handle-shadow-checked);\n                }\n            }\n        }\n\n        &:focus {\n            & + label {\n                .label-wrapper:before {\n                    outline: none !important;\n                    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12),\n                    0 0 0 0 #78c8fe;\n                }\n            }\n        }\n\n        &[disabled]:active {\n            & + label {\n                .label-wrapper:after {\n                    transform: scaleX(1.1);\n                    transform-origin: center left;\n                    transition: transform step-start;\n                }\n            }\n        }\n\n        &:checked {\n            &[disabled]:active {\n                & + label {\n                    .label-wrapper:after {\n                        transform: translateX(calc(100% - 6px)) scaleX(1.1);\n                        transform-origin: center right;\n                    }\n                }\n            }\n        }\n\n        &:hover {\n            &:active {\n                & + label {\n                    .label-wrapper:before {\n                        background-color: transparent;\n                    }\n                }\n            }\n        }\n    }\n}\n\n:host .text {\n    margin-inline: 0.5rem 0;\n}\n\n/*Placememt*/\n:host([placement='end']) {\n    label {\n        width: 100%;\n    }\n    .text {\n        margin-inline: 0 0.5rem;\n        width: 100%;\n    }\n}\n\n:host([invalid]) {\n    label{\n        color: var(--wje-input-color-invalid);\n    }\n}\n\nslot[name='error'] {\n    display: none;\n}\n\n:host([invalid]) slot[name='error'] {\n    display: block;\n}\n\nslot[name='error'] {\n    display: none;\n    max-width: 100%;\n    min-width: auto;\n    border-radius: 50px;\n    top: 0;\n    width: max-content;\n    line-height: normal;\n    position: static;\n    background: transparent;\n    padding: 0.25rem 0;\n    left: auto;\n    transform: none;\n    color: var(--wje-input-color-invalid);\n    font-size: 12px;\n}\n";
+class Toggle extends FormAssociatedElement {
   constructor() {
     super();
-    /**
-     * Set color attribute for the toggle element.
-     * @type {string}
-     */
-    __publicField(this, "className", "Toggle");
+    __privateAdd(this, _internalValue);
+    this.invalid = false;
+    this.pristine = true;
+  }
+  /**
+   * Setter for the value attribute.
+   * @param {string} value The value to set.
+   */
+  set value(value) {
+    __privateSet(this, _internalValue, value);
+    if (this.input) {
+      this.input.value = value;
+    }
+  }
+  /**
+   * Getter for the value attribute.
+   * @returns {string} The value of the attribute.
+   */
+  get value() {
+    return __privateGet(this, _internalValue) ?? this.getAttribute("value") ?? "on";
   }
   /**
-   * Set checked attribute for the toggle element.
+   * Getter for the customErrorDisplay attribute.
+   * @returns {boolean} Whether the attribute is present.
    */
-  set disabled(value) {
-    if (value) this.setAttribute("disabled", "");
-    else this.removeAttribute("disabled");
+  get customErrorDisplay() {
+    return this.hasAttribute("custom-error-display");
   }
   /**
-   * Get checked attribute for the toggle element.
-   * @returns {boolean} true if the toggle is disabled, false otherwise
+   * Getter for the validateOnChange attribute.
+   * @returns {boolean} Whether the attribute is present.
    */
-  get disabled() {
-    return this.hasAttribute("disabled");
+  get validateOnChange() {
+    return this.hasAttribute("validate-on-change");
   }
   /**
-   * Set checked attribute for the toggle element.
+   * Setter for the defaultValue attribute.
+   * This method sets the 'value' attribute of the custom input element to the provided value.
+   * The 'value' attribute represents the default value of the input element.
+   * @param {string} value The value to set as the default value.
+   */
+  set defaultValue(value) {
+    this.setAttribute("value", value);
+  }
+  /**
+   * Getter for the defaultValue attribute.
+   * This method retrieves the 'value' attribute of the custom input element.
+   * The 'value' attribute represents the default value of the input element.
+   * If the 'value' attribute is not set, it returns an empty string.
+   * @returns {string} The default value of the input element.
+   */
+  get defaultValue() {
+    return this.getAttribute("value") ?? "";
+  }
+  /**
+   * Set checked attribute.
+   * @param {boolean} value true if the toggle is checked, false otherwise
    */
   set checked(value) {
-    if (value) this.setAttribute("checked", "");
-    else this.removeAttribute("checked");
+    if (value) {
+      this.setAttribute("checked", "");
+      this.internals.setFormValue(this.value);
+    } else {
+      this.removeAttribute("checked");
+      this.internals.setFormValue(null);
+    }
+    if (this.input) {
+      this.input.checked = value;
+    }
   }
   /**
-   * Get checked attribute for the toggle element.
+   * Get checked attribute.
    * @returns {boolean} true if the toggle is checked, false otherwise
    */
   get checked() {
     return this.hasAttribute("checked");
   }
-  /**
-   * Get CSS stylesheet for the Button element.
-   * @static
-   * @returns {CSSStyleSheet} styles - The CSS stylesheet for the Button element.
-   */
   static get cssStyleSheet() {
     return styles;
   }
-  /**
-   * Get observed attributes for the toggle element.
-   * @returns {string[]}
-   */
   static get observedAttributes() {
-    return ["checked", "disabled"];
+    return ["checked", "disabled", "required"];
   }
-  /**
-   * Set up the attributes for the toggle element.
-   */
   setupAttributes() {
     this.isShadowRoot = "open";
+    if (this.pristine) {
+      this.value = __privateGet(this, _internalValue);
+      this.pristine = false;
+    }
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (!this.input) return;
+    if (name === "checked") {
+      const isChecked = this.hasAttribute("checked");
+      this.input.checked = isChecked;
+      if (isChecked) {
+        this.internals.setFormValue(this.value);
+      } else {
+        this.internals.setFormValue(null);
+      }
+    } else if (name === "disabled") {
+      this.input.disabled = this.hasAttribute("disabled");
+    } else if (name === "indeterminate") {
+      this.input.indeterminate = this.hasAttribute("indeterminate");
+    } else if (name === "value") {
+      __privateSet(this, _internalValue, newValue ?? void 0);
+      this.input.value = this.value;
+      if (this.input.checked) {
+        this.internals.setFormValue(this.value);
+      }
+    }
   }
-  /**
-   * Draw the toggle element for the component.
-   */
   draw() {
-    let fragment = document.createDocumentFragment();
-    let element = document.createElement("div");
-    element.setAttribute("part", "native");
-    element.classList.add("native-toggle");
-    let input = document.createElement("input");
+    const fragment = document.createDocumentFragment();
+    const native = document.createElement("div");
+    native.setAttribute("part", "native");
+    native.classList.add("native-toggle");
+    const input = document.createElement("input");
     input.setAttribute("part", "input");
-    input.setAttribute("type", "checkbox");
-    input.setAttribute("name", this.name);
-    input.setAttribute("id", "input");
+    input.type = "checkbox";
+    input.name = this.name;
+    input.id = "input";
     input.checked = this.hasAttribute("checked");
     input.disabled = this.hasAttribute("disabled");
-    let label = document.createElement("label");
+    if (this.hasAttribute("required")) input.required = true;
+    const label = document.createElement("label");
     label.setAttribute("for", "input");
-    let labelWrapper = document.createElement("div");
-    labelWrapper.setAttribute("part", "toggle");
-    labelWrapper.classList.add("label-wrapper");
-    let text = document.createElement("div");
+    const toggle = document.createElement("div");
+    toggle.setAttribute("part", "toggle");
+    toggle.classList.add("label-wrapper");
+    const text = document.createElement("div");
     text.classList.add("text");
     text.innerHTML = "<slot></slot>";
-    if (this.color) this.classList.add("wje-color-" + this.color, "wje-color");
-    element.appendChild(input);
-    element.appendChild(label);
+    let errorSlot = document.createElement("slot");
+    errorSlot.setAttribute("name", "error");
+    let error = document.createElement("div");
+    error.setAttribute("slot", "error");
     if (this.placement === "end") {
-      element.classList.add("end");
+      native.classList.add("end");
       label.appendChild(text);
-      label.appendChild(labelWrapper);
+      label.appendChild(toggle);
     } else {
-      label.appendChild(labelWrapper);
+      label.appendChild(toggle);
       label.appendChild(text);
     }
-    fragment.appendChild(element);
+    native.appendChild(input);
+    native.appendChild(label);
+    native.append(errorSlot);
+    this.append(error);
+    fragment.appendChild(native);
     this.input = input;
     return fragment;
   }
-  /**
-   * After draw method for the toggle element to add event listeners for the input element after the element is drawn.
-   */
   afterDraw() {
+    this.internals.setFormValue(this.checked ? this.value : null);
     if (!this.disabled) {
       this.input.addEventListener("input", (e) => {
+        this.validate();
+        this.pristine = false;
+        this.propagateValidation();
+        this.indeterminate = false;
         this.checked = e.target.checked;
         event.dispatchCustomEvent(this, "wje-toggle:input");
       });
       this.input.addEventListener("change", (e) => {
-        this.checked = e.target.checked;
         event.dispatchCustomEvent(this, "wje-toggle:change");
       });
+      this.addEventListener("invalid", (e) => {
+        this.invalid = true;
+        this.pristine = false;
+        this.showInvalidMessage();
+      });
+      this.validate();
+      if (this.invalid) {
+        this.showInvalidMessage();
+      }
     }
   }
+  /**
+   * Removes the event listener when the checkbox is disconnected.
+   */
+  beforeDisconnect() {
+    event.removeElement(this.input);
+  }
 }
+_internalValue = new WeakMap();
 Toggle.define("wje-toggle", Toggle);
 export {
   Toggle as default

package/dist/wje-toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-toggle.js","sources":["../packages/wje-toggle/toggle.element.js","../packages/wje-toggle/toggle.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Toggle` is a custom web component that represents a toggle input.\n * @summary This element represents a toggle input.\n * @documentation https://elements.webjet.sk/components/toggle\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native toggle wrapper.\n * @csspart input - The toggle input.\n * @csspart toggle - The toggle part.\n * @slot - The default slot for the toggle.\n * @cssproperty [--wje-toggle-color-base=var(--wje-color-contrast-3)] - The base background color of the toggle. Defines the default background color when the toggle is in an unselected state.\n * @cssproperty [--wje-toggle-width=30px] - The overall width of the toggle switch. Determines how wide the toggle component appears.\n * @cssproperty [--wje-toggle-height=18px] - The overall height of the toggle switch. Specifies how tall the toggle component appears.\n * @cssproperty [--wje-toggle-border-radius=50px] - The border radius of the toggle. Controls how rounded the corners of the toggle are.\n * @cssproperty [--wje-toggle-handle-width=14px] - The width of the toggle handle (knob). Determines the size of the handle for user interaction.\n * @cssproperty [--wje-toggle-handle-height=14px] - The height of the toggle handle (knob). Specifies the vertical size of the handle.\n * @cssproperty [--wje-toggle-handle-border-radius=9px] - The border radius of the toggle handle. Controls how rounded the handle is.\n * @cssproperty [--wje-toggle-handle-color=#fff] - The color of the toggle handle. Accepts any valid CSS color, such as `hex`, `rgb`, or `css variable`.\n * @cssproperty [--wje-toggle-handle-shadow=1px 0 1px 0.5px rgba(0,0,0,0.12), 2px 4px 6px rgba(0,0,0,0.2)] - The shadow applied to the toggle handle. Adds a subtle shadow effect for better visual clarity.\n * @cssproperty [--wje-toggle-handle-shadow-checked=1px 1px 0 rgba(0,0,0,0.08), -3px 3px 6px rgba(0,0,0,0.3)] - The shadow applied to the toggle handle when it is in the checked (on) state. Provides visual feedback to indicate the toggle state.\n * @cssproperty [--wje-toggle-duration=250ms] - The duration of the toggle animation in milliseconds. Controls how long the toggle animation lasts during state changes.\n * @cssproperty [--wje-toggle-curve=cubic-bezier(.4,0,.2,1)] - The easing curve used for the toggle animation. Defines the speed curve for the animation, enhancing the user experience with smooth transitions.\n * @tag wje-toggle\n */\n\nexport default class Toggle extends WJElement {\n    /**\n     * Creates an instance of Toggle.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Set checked attribute for the toggle element.\n     */\n    set disabled(value) {\n        if (value) this.setAttribute('disabled', '');\n        else this.removeAttribute('disabled');\n    }\n\n    /**\n     * Get checked attribute for the toggle element.\n     * @returns {boolean} true if the toggle is disabled, false otherwise\n     */\n    get disabled() {\n        return this.hasAttribute('disabled');\n    }\n\n    /**\n     * Set checked attribute for the toggle element.\n     */\n    set checked(value) {\n        if (value) this.setAttribute('checked', '');\n        else this.removeAttribute('checked');\n    }\n\n    /**\n     * Get checked attribute for the toggle element.\n     * @returns {boolean} true if the toggle is checked, false otherwise\n     */\n    get checked() {\n        return this.hasAttribute('checked');\n    }\n\n    /**\n     * Set color attribute for the toggle element.\n     * @type {string}\n     */\n    className = 'Toggle';\n\n    /**\n     * Get CSS stylesheet for the Button element.\n     * @static\n     * @returns {CSSStyleSheet} styles - The CSS stylesheet for the Button element.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Get observed attributes for the toggle element.\n     * @returns {string[]}\n     */\n    static get observedAttributes() {\n        return ['checked', 'disabled'];\n    }\n\n    /**\n     * Set up the attributes for the toggle element.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draw the toggle element for the component.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let element = document.createElement('div');\n        element.setAttribute('part', 'native');\n        element.classList.add('native-toggle');\n\n        let input = document.createElement('input');\n        input.setAttribute('part', 'input');\n        input.setAttribute('type', 'checkbox');\n        input.setAttribute('name', this.name);\n        input.setAttribute('id', 'input');\n        input.checked = this.hasAttribute('checked');\n        input.disabled = this.hasAttribute('disabled');\n\n        let label = document.createElement('label');\n        label.setAttribute('for', 'input');\n\n        let labelWrapper = document.createElement('div');\n        labelWrapper.setAttribute('part', 'toggle');\n        labelWrapper.classList.add('label-wrapper');\n\n        let text = document.createElement('div');\n        text.classList.add('text');\n        text.innerHTML = '<slot></slot>';\n\n        if (this.color) this.classList.add('wje-color-' + this.color, 'wje-color');\n\n        element.appendChild(input);\n        element.appendChild(label);\n\n        if (this.placement === 'end') {\n            element.classList.add('end');\n            label.appendChild(text);\n            label.appendChild(labelWrapper);\n        } else {\n            label.appendChild(labelWrapper);\n            label.appendChild(text);\n        }\n\n        fragment.appendChild(element);\n\n        this.input = input;\n\n        return fragment;\n    }\n\n    /**\n     * After draw method for the toggle element to add event listeners for the input element after the element is drawn.\n     */\n    afterDraw() {\n        if (!this.disabled) {\n            this.input.addEventListener('input', (e) => {\n                this.checked = e.target.checked;\n                event.dispatchCustomEvent(this, 'wje-toggle:input');\n            });\n\n            this.input.addEventListener('change', (e) => {\n                this.checked = e.target.checked;\n                event.dispatchCustomEvent(this, 'wje-toggle:change');\n            });\n        }\n    }\n}\n","import Toggle from './toggle.element.js';\n\nexport default Toggle;\n\nToggle.define('wje-toggle', Toggle);\n"],"names":[],"mappings":";;;;;;AA4Be,MAAM,eAAe,UAAU;AAAA;AAAA;AAAA;AAAA,EAI1C,cAAc;AACV,UAAO;AAuCX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EAtChB;AAAA;AAAA;AAAA;AAAA,EAKI,IAAI,SAAS,OAAO;AAChB,QAAI,MAAO,MAAK,aAAa,YAAY,EAAE;AAAA,QACtC,MAAK,gBAAgB,UAAU;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,WAAW;AACX,WAAO,KAAK,aAAa,UAAU;AAAA,EAC3C;AAAA;AAAA;AAAA;AAAA,EAKI,IAAI,QAAQ,OAAO;AACf,QAAI,MAAO,MAAK,aAAa,WAAW,EAAE;AAAA,QACrC,MAAK,gBAAgB,SAAS;AAAA,EAC3C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,UAAU;AACV,WAAO,KAAK,aAAa,SAAS;AAAA,EAC1C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,WAAW,qBAAqB;AAC5B,WAAO,CAAC,WAAW,UAAU;AAAA,EACrC;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA,EAKI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,UAAU,SAAS,cAAc,KAAK;AAC1C,YAAQ,aAAa,QAAQ,QAAQ;AACrC,YAAQ,UAAU,IAAI,eAAe;AAErC,QAAI,QAAQ,SAAS,cAAc,OAAO;AAC1C,UAAM,aAAa,QAAQ,OAAO;AAClC,UAAM,aAAa,QAAQ,UAAU;AACrC,UAAM,aAAa,QAAQ,KAAK,IAAI;AACpC,UAAM,aAAa,MAAM,OAAO;AAChC,UAAM,UAAU,KAAK,aAAa,SAAS;AAC3C,UAAM,WAAW,KAAK,aAAa,UAAU;AAE7C,QAAI,QAAQ,SAAS,cAAc,OAAO;AAC1C,UAAM,aAAa,OAAO,OAAO;AAEjC,QAAI,eAAe,SAAS,cAAc,KAAK;AAC/C,iBAAa,aAAa,QAAQ,QAAQ;AAC1C,iBAAa,UAAU,IAAI,eAAe;AAE1C,QAAI,OAAO,SAAS,cAAc,KAAK;AACvC,SAAK,UAAU,IAAI,MAAM;AACzB,SAAK,YAAY;AAEjB,QAAI,KAAK,MAAO,MAAK,UAAU,IAAI,eAAe,KAAK,OAAO,WAAW;AAEzE,YAAQ,YAAY,KAAK;AACzB,YAAQ,YAAY,KAAK;AAEzB,QAAI,KAAK,cAAc,OAAO;AAC1B,cAAQ,UAAU,IAAI,KAAK;AAC3B,YAAM,YAAY,IAAI;AACtB,YAAM,YAAY,YAAY;AAAA,IAC1C,OAAe;AACH,YAAM,YAAY,YAAY;AAC9B,YAAM,YAAY,IAAI;AAAA,IAClC;AAEQ,aAAS,YAAY,OAAO;AAE5B,SAAK,QAAQ;AAEb,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,QAAI,CAAC,KAAK,UAAU;AAChB,WAAK,MAAM,iBAAiB,SAAS,CAAC,MAAM;AACxC,aAAK,UAAU,EAAE,OAAO;AACxB,cAAM,oBAAoB,MAAM,kBAAkB;AAAA,MAClE,CAAa;AAED,WAAK,MAAM,iBAAiB,UAAU,CAAC,MAAM;AACzC,aAAK,UAAU,EAAE,OAAO;AACxB,cAAM,oBAAoB,MAAM,mBAAmB;AAAA,MACnE,CAAa;AAAA,IACb;AAAA,EACA;AACA;AChKA,OAAO,OAAO,cAAc,MAAM;"}
+{"version":3,"file":"wje-toggle.js","sources":["../packages/wje-toggle/toggle.element.js","../packages/wje-toggle/toggle.js"],"sourcesContent":["import { FormAssociatedElement } from '../internals/form-associated-element.js';\nimport { event } from '../utils/event.js';\n\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Toggle` is a custom web component that represents a toggle input.\n * @summary This element represents a toggle input.\n * @documentation https://elements.webjet.sk/components/toggle\n * @status stable\n * @augments {FormAssociatedElement}\n * @csspart native - The native toggle wrapper.\n * @csspart input - The toggle input.\n * @csspart toggle - The toggle part.\n * @slot - The default slot for the toggle.\n * @cssproperty [--wje-toggle-color-base=var(--wje-color-contrast-3)] - The base background color of the toggle. Defines the default background color when the toggle is in an unselected state.\n * @cssproperty [--wje-toggle-width=30px] - The overall width of the toggle switch. Determines how wide the toggle component appears.\n * @cssproperty [--wje-toggle-height=18px] - The overall height of the toggle switch. Specifies how tall the toggle component appears.\n * @cssproperty [--wje-toggle-border-radius=50px] - The border radius of the toggle. Controls how rounded the corners of the toggle are.\n * @cssproperty [--wje-toggle-handle-width=14px] - The width of the toggle handle (knob). Determines the size of the handle for user interaction.\n * @cssproperty [--wje-toggle-handle-height=14px] - The height of the toggle handle (knob). Specifies the vertical size of the handle.\n * @cssproperty [--wje-toggle-handle-border-radius=9px] - The border radius of the toggle handle. Controls how rounded the handle is.\n * @cssproperty [--wje-toggle-handle-color=#fff] - The color of the toggle handle. Accepts any valid CSS color, such as `hex`, `rgb`, or `css variable`.\n * @cssproperty [--wje-toggle-handle-shadow=1px 0 1px 0.5px rgba(0,0,0,0.12), 2px 4px 6px rgba(0,0,0,0.2)] - The shadow applied to the toggle handle. Adds a subtle shadow effect for better visual clarity.\n * @cssproperty [--wje-toggle-handle-shadow-checked=1px 1px 0 rgba(0,0,0,0.08), -3px 3px 6px rgba(0,0,0,0.3)] - The shadow applied to the toggle handle when it is in the checked (on) state. Provides visual feedback to indicate the toggle state.\n * @cssproperty [--wje-toggle-duration=250ms] - The duration of the toggle animation in milliseconds. Controls how long the toggle animation lasts during state changes.\n * @cssproperty [--wje-toggle-curve=cubic-bezier(.4,0,.2,1)] - The easing curve used for the toggle animation. Defines the speed curve for the animation, enhancing the user experience with smooth transitions.\n * @tag wje-toggle\n */\n\nexport default class Toggle extends FormAssociatedElement {\n    #internalValue;\n\n    constructor() {\n        super();\n\n        this.invalid = false;\n        this.pristine = true;\n    }\n\n    /**\n     * Setter for the value attribute.\n     * @param {string} value The value to set.\n     */\n    set value(value) {\n        this.#internalValue = value;\n        if (this.input) {\n            this.input.value = value;\n        }\n    }\n\n    /**\n     * Getter for the value attribute.\n     * @returns {string} The value of the attribute.\n     */\n    get value() {\n        return this.#internalValue ?? this.getAttribute('value') ?? 'on';\n    }\n\n    /**\n     * Getter for the customErrorDisplay attribute.\n     * @returns {boolean} Whether the attribute is present.\n     */\n    get customErrorDisplay() {\n        return this.hasAttribute('custom-error-display');\n    }\n\n    /**\n     * Getter for the validateOnChange attribute.\n     * @returns {boolean} Whether the attribute is present.\n     */\n    get validateOnChange() {\n        return this.hasAttribute('validate-on-change');\n    }\n\n    /**\n     * Setter for the defaultValue attribute.\n     * This method sets the 'value' attribute of the custom input element to the provided value.\n     * The 'value' attribute represents the default value of the input element.\n     * @param {string} value The value to set as the default value.\n     */\n    set defaultValue(value) {\n        this.setAttribute('value', value);\n    }\n\n    /**\n     * Getter for the defaultValue attribute.\n     * This method retrieves the 'value' attribute of the custom input element.\n     * The 'value' attribute represents the default value of the input element.\n     * If the 'value' attribute is not set, it returns an empty string.\n     * @returns {string} The default value of the input element.\n     */\n    get defaultValue() {\n        return this.getAttribute('value') ?? '';\n    }\n\n    /**\n     * Set checked attribute.\n     * @param {boolean} value true if the toggle is checked, false otherwise\n     */\n    set checked(value) {\n        if (value) {\n            this.setAttribute('checked', '');\n            this.internals.setFormValue(this.value); // len ak je checked\n        } else {\n            this.removeAttribute('checked');\n            this.internals.setFormValue(null); // ak nie je checked, nič sa neposiela\n        }\n        if (this.input) {\n            this.input.checked = value;\n        }\n    }\n\n    /**\n     * Get checked attribute.\n     * @returns {boolean} true if the toggle is checked, false otherwise\n     */\n    get checked() {\n        return this.hasAttribute('checked');\n    }\n\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    static get observedAttributes() {\n        return ['checked', 'disabled', 'required'];\n    }\n\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n        // if some value was set via value setter then dont use default value\n        if (this.pristine) {\n            this.value = this.#internalValue;\n            this.pristine = false;\n        }\n    }\n\n    attributeChangedCallback(name, oldValue, newValue) {\n        if (!this.input) return;\n        if (name === 'checked') {\n            const isChecked = this.hasAttribute('checked');\n            this.input.checked = isChecked;\n            // Reflect into form value\n            if (isChecked) {\n                this.internals.setFormValue(this.value);\n            } else {\n                this.internals.setFormValue(null);\n            }\n        } else if (name === 'disabled') {\n            this.input.disabled = this.hasAttribute('disabled');\n        } else if (name === 'indeterminate') {\n            this.input.indeterminate = this.hasAttribute('indeterminate');\n        } else if (name === 'value') {\n            // keep payload in sync; do not toggle checked here\n            this.#internalValue = newValue ?? undefined;\n            this.input.value = this.value;\n            // If currently checked, update the submitted payload\n            if (this.input.checked) {\n                this.internals.setFormValue(this.value);\n            }\n        }\n    }\n\n    draw() {\n        const fragment = document.createDocumentFragment();\n\n        const native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-toggle');\n\n        const input = document.createElement('input');\n        input.setAttribute('part', 'input');\n        input.type = 'checkbox';\n        input.name = this.name;\n        input.id = 'input';\n        input.checked = this.hasAttribute('checked');\n        input.disabled = this.hasAttribute('disabled');\n        if (this.hasAttribute('required')) input.required = true;\n\n        const label = document.createElement('label');\n        label.setAttribute('for', 'input');\n\n        const toggle = document.createElement('div');\n        toggle.setAttribute('part', 'toggle');\n        toggle.classList.add('label-wrapper');\n\n        const text = document.createElement('div');\n        text.classList.add('text');\n        text.innerHTML = '<slot></slot>';\n\n        // Error\n        let errorSlot = document.createElement('slot');\n        errorSlot.setAttribute('name', 'error');\n\n        let error = document.createElement('div');\n        error.setAttribute('slot', 'error');\n\n        // APPEND\n        if (this.placement === 'end') {\n            native.classList.add('end');\n            label.appendChild(text);\n            label.appendChild(toggle);\n        } else {\n            label.appendChild(toggle);\n            label.appendChild(text);\n        }\n\n        native.appendChild(input);\n        native.appendChild(label);\n        native.append(errorSlot);\n\n        this.append(error);\n\n        fragment.appendChild(native);\n\n        this.input = input;\n\n        return fragment;\n    }\n\n    afterDraw() {\n        this.internals.setFormValue(this.checked ? this.value : null); // Set initial form value based on checked state\n\n        if (!this.disabled) {\n            this.input.addEventListener('input', (e) => {\n                this.validate();\n\n                this.pristine = false;\n                this.propagateValidation();\n\n                this.indeterminate = false;\n                this.checked = e.target.checked;\n\n                event.dispatchCustomEvent(this, 'wje-toggle:input');\n            });\n\n            this.input.addEventListener('change', (e) => {\n                event.dispatchCustomEvent(this, 'wje-toggle:change');\n            });\n\n            this.addEventListener('invalid', (e) => {\n                this.invalid = true;\n                this.pristine = false;\n\n                this.showInvalidMessage();\n            });\n\n            this.validate();\n\n            if (this.invalid) {\n                this.showInvalidMessage();\n            }\n        }\n    }\n\n    /**\n     * Removes the event listener when the checkbox is disconnected.\n     */\n    beforeDisconnect() {\n        event.removeElement(this.input);\n    }\n}\n","import Toggle from './toggle.element.js';\n\nexport default Toggle;\n\nToggle.define('wje-toggle', Toggle);\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wj-elements",
   "description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
-  "version": "0.1.229",
+  "version": "0.1.231",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",