wj-elements 0.1.184 → 0.1.185

package/dist/wje-checkbox.js

@@ -10,269 +10,10 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
 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 WJElement from "./wje-element.js";
+import { F as FormAssociatedElement } from "./form-associated-element-CaIxmEod.js";
 import { event } from "./event.js";
-const styles = `/*
-[ Checkbox ]
-*/
-
-:host {
-    display: block;
-    margin-top: var(--wje-checkbox-margin-top);
-    margin-bottom: var(--wje-checkbox-margin-bottom);
-    margin-inline: var(--wje-checkbox-margin-inline);
-    line-height: 100%;
-    padding-left: 0;
-
-    label {
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-        position: relative;
-        padding-left: calc(var(--wje-checkbox-size) + 0.5rem);
-        /*min-width: var(--wje-checkbox-size);*/
-        min-height: var(--wje-checkbox-size);
-        margin-bottom: 0;
-        &:before {
-            content: '';
-            position: absolute;
-            width: var(--wje-checkbox-size);
-            height: var(--wje-checkbox-size);
-            left: 0;
-            -webkit-box-sizing: inherit;
-            box-sizing: border-box;
-            background-color: var(--wje-color-contrast-0);
-            border-width: 1px;
-            border-style: solid;
-            border-color: var(--wje-color-contrast-3);
-        }
-    }
-}
-
-.native-checkbox {
-    label {
-        &:hover {
-            color: var(--wje-color-contrast-11);
-        }
-
-        &:before {
-            border-radius: var(--wje-checkbox-border-radius);
-        }
-    }
-
-    input[type='checkbox'] {
-        position: absolute;
-        margin: 0;
-        z-index: -1;
-        width: 16px;
-        height: 16px;
-        opacity: 0;
-        display: none;
-        & + label {
-            &::after {
-                content: '';
-                position: absolute;
-                left: 0;
-                border-right: 0 solid transparent;
-                border-bottom: 0 solid transparent;
-                width: var(--wje-checkbox-size);
-                height: var(--wje-checkbox-size);
-                overflow: hidden;
-            }
-        }
-    }
-
-    input[type='checkbox']:checked + label::after {
-        content: '';
-        mask-image: var(--wje-checkbox-checkmark);
-        mask-size: var(--wje-checkbox-size);
-        background-color: var(--wje-color-primary-9);
-    }
-
-    /* Disabled */
-    input[type='checkbox'][disabled] {
-        & + label {
-            cursor: not-allowed !important;
-            color: var(--wje-color-contrast-8);
-            opacity: 0.58;
-
-            &:before {
-                background: var(--wje-color-contrast-2);
-            }
-            &:after {
-                background: transparent;
-            }
-        }
-    }
-
-    input[type='checkbox']:checked[disabled] {
-        & + label {
-            cursor: not-allowed !important;
-            color: var(--wje-color-contrast-8);
-            opacity: 0.58;
-
-            &:before {
-                background: var(--wje-color-contrast-2);
-            }
-            &:after {
-                background: var(--wje-color-contrast-5);
-            }
-        }
-    }
-
-    /* Indeterminate */
-    input[type='checkbox']:not(:checked):indeterminate {
-        & + label {
-            &:after {
-                content: '';
-                mask-image: var(--wje-checkbox-interminate);
-                mask-size: var(--wje-checkbox-size);
-                background-color: var(--wje-color-primary-9);
-            }
-        }
-    }
-}
-
-:host([variant='circle']) {
-    label {
-        &:after {
-            border-radius: 99px;
-        }
-
-        &:before {
-            border-radius: 99px;
-        }
-    }
-}
-
-:host([placement='end']) {
-    label {
-        padding-left: 0;
-        padding-right: 26px;
-
-        &:before {
-            right: 0;
-            left: auto;
-        }
-    }
-
-    input[type='checkbox']:checked {
-        & + label {
-            position: relative;
-
-            &::after {
-                position: absolute;
-                right: 0;
-                left: auto;
-            }
-        }
-    }
-}
-
-/*Colors*/
-
-:host([color='primary']) {
-    input[type='checkbox']:checked + label::after,
-    input[type='checkbox']:indeterminate + label:after {
-        background-color: var(--wje-color-contrast-0);
-    }
-    :is(input[type='checkbox']:checked + label)::before,
-    :is(input[type='checkbox']:indeterminate + label)::before {
-        border-color: var(--wje-color-primary-9);
-        background-color: var(--wje-color-primary-9);
-    }
-}
-
-:host([color='complete']) {
-    input[type='checkbox']:checked + label::after,
-    input[type='checkbox']:indeterminate + label:after {
-        background-color: var(--wje-color-contrast-0);
-    }
-    :is(input[type='checkbox']:checked + label)::before,
-    :is(input[type='checkbox']:indeterminate + label)::before {
-        border-color: var(--wje-color-complete-9);
-        background-color: var(--wje-color-complete-9);
-    }
-}
-
-:host([color='success']) {
-    input[type='checkbox']:checked + label::after,
-    input[type='checkbox']:indeterminate + label:after {
-        background-color: var(--wje-color-contrast-0);
-    }
-    :is(input[type='checkbox']:checked + label)::before,
-    :is(input[type='checkbox']:indeterminate + label)::before {
-        border-color: var(--wje-color-success-9);
-        background-color: var(--wje-color-success-9);
-    }
-}
-
-:host([color='warning']) {
-    input[type='checkbox']:checked + label::after,
-    input[type='checkbox']:indeterminate + label:after {
-        background-color: var(--wje-color-contrast-0);
-    }
-    :is(input[type='checkbox']:checked + label)::before,
-    :is(input[type='checkbox']:indeterminate + label)::before {
-        border-color: var(--wje-color-warning-9);
-        background-color: var(--wje-color-warning-9);
-    }
-}
-
-:host([color='danger']) {
-    input[type='checkbox']:checked + label::after,
-    input[type='checkbox']:indeterminate + label:after {
-        background-color: var(--wje-color-contrast-0);
-    }
-    :is(input[type='checkbox']:checked + label)::before,
-    :is(input[type='checkbox']:indeterminate + label)::before {
-        border-color: var(--wje-color-danger-9);
-        background-color: var(--wje-color-danger-9);
-    }
-}
-
-:host([color='info']) {
-    input[type='checkbox']:checked + label::after,
-    input[type='checkbox']:indeterminate + label:after {
-        background-color: var(--wje-color-contrast-0);
-    }
-    :is(input[type='checkbox']:checked + label)::before,
-    :is(input[type='checkbox']:indeterminate + label)::before {
-        border-color: var(--wje-color-info-9);
-        background-color: var(--wje-color-info-9);
-    }
-}
-
-/*input[type="checkbox"]:checked + label {*/
-/*  .info > *::after,*/
-/*  .danger > *::after,*/
-/*  .complete > *::after,*/
-/*  .primary > *::after,*/
-/*  .success > *::after {*/
-/*    background: var(--wje-white-check-icon);*/
-/*  }*/
-/*}*/
-
-/*input[type="checkbox"]:indeterminate + label {*/
-/*  .info > *::after,*/
-/*  .danger > *::after,*/
-/*  .complete > *::after,*/
-/*  .primary > *::after,*/
-/*  .success > *::after {*/
-/*    background-color: var(--wje-color-contrast-0);*/
-/*  }*/
-/*}*/
-
-/* hide focus style if not from keyboard navigation */
-/*.js-focus-visible .native-checkbox input[type="checkbox"]:focus:not(.focus-visible) + label:before {*/
-/*  box-shadow: none;*/
-/*}*/
-
-/*input[type="checkbox"] {*/
-/*  accent-color: var(--wje-color-primary) !important;*/
-/*  font-size: 50px;*/
-/*}*/
-`;
-class Checkbox extends WJElement {
+const styles = "/*\n[ Checkbox ]\n*/\n\n:host {\n    display: block;\n    margin-top: var(--wje-checkbox-margin-top);\n    margin-bottom: var(--wje-checkbox-margin-bottom);\n    margin-inline: var(--wje-checkbox-margin-inline);\n    line-height: 100%;\n    padding-left: 0;\n\n    label {\n        display: flex;\n        align-items: center;\n        cursor: pointer;\n        position: relative;\n        padding-left: calc(var(--wje-checkbox-size) + 0.5rem);\n        min-height: var(--wje-checkbox-size);\n        margin-bottom: 0;\n        &:before {\n            content: '';\n            position: absolute;\n            width: var(--wje-checkbox-size);\n            height: var(--wje-checkbox-size);\n            left: 0;\n            -webkit-box-sizing: inherit;\n            box-sizing: border-box;\n            background-color: var(--wje-color-contrast-0);\n            border-width: 1px;\n            border-style: solid;\n            border-color: var(--wje-color-contrast-3);\n        }\n    }\n}\n\n.native-checkbox {\n    label {\n        &:hover {\n            color: var(--wje-color-contrast-11);\n        }\n\n        &:before {\n            border-radius: var(--wje-checkbox-border-radius);\n        }\n    }\n\n    input[type='checkbox'] {\n        position: absolute;\n        margin: 0;\n        z-index: -1;\n        width: 16px;\n        height: 16px;\n        opacity: 0;\n        display: none;\n        & + label {\n            &::after {\n                content: '';\n                position: absolute;\n                left: 0;\n                border-right: 0 solid transparent;\n                border-bottom: 0 solid transparent;\n                width: var(--wje-checkbox-size);\n                height: var(--wje-checkbox-size);\n                overflow: hidden;\n            }\n        }\n    }\n\n    input[type='checkbox']:checked + label::after {\n        content: '';\n        mask-image: var(--wje-checkbox-checkmark);\n        mask-size: var(--wje-checkbox-size);\n        background-color: var(--wje-color-primary-9);\n    }\n\n    /* Disabled */\n    input[type='checkbox'][disabled] {\n        & + label {\n            cursor: not-allowed !important;\n            color: var(--wje-color-contrast-8);\n            opacity: 0.58;\n\n            &:before {\n                background: var(--wje-color-contrast-2);\n            }\n            &:after {\n                background: transparent;\n            }\n        }\n    }\n\n    input[type='checkbox']:checked[disabled] {\n        & + label {\n            cursor: not-allowed !important;\n            color: var(--wje-color-contrast-8);\n            opacity: 0.58;\n\n            &:before {\n                background: var(--wje-color-contrast-2);\n            }\n            &:after {\n                background: var(--wje-color-contrast-5);\n            }\n        }\n    }\n\n    /* Indeterminate */\n    input[type='checkbox']:not(:checked):indeterminate {\n        & + label {\n            &:after {\n                content: '';\n                mask-image: var(--wje-checkbox-interminate);\n                mask-size: var(--wje-checkbox-size);\n                background-color: var(--wje-color-primary-9);\n            }\n        }\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\n:host([variant='circle']) {\n    label {\n        &:after {\n            border-radius: 99px;\n        }\n\n        &:before {\n            border-radius: 99px;\n        }\n    }\n}\n\n:host([placement='end']) {\n    label {\n        padding-left: 0;\n        padding-right: 26px;\n\n        &:before {\n            right: 0;\n            left: auto;\n        }\n    }\n\n    input[type='checkbox']:checked {\n        & + label {\n            position: relative;\n\n            &::after {\n                position: absolute;\n                right: 0;\n                left: auto;\n            }\n        }\n    }\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\n/*Colors*/\n\n:host([color='primary']) {\n    input[type='checkbox']:checked + label::after,\n    input[type='checkbox']:indeterminate + label:after {\n        background-color: var(--wje-color-contrast-0);\n    }\n    :is(input[type='checkbox']:checked + label)::before,\n    :is(input[type='checkbox']:indeterminate + label)::before {\n        border-color: var(--wje-color-primary-9);\n        background-color: var(--wje-color-primary-9);\n    }\n}\n\n:host([color='complete']) {\n    input[type='checkbox']:checked + label::after,\n    input[type='checkbox']:indeterminate + label:after {\n        background-color: var(--wje-color-contrast-0);\n    }\n    :is(input[type='checkbox']:checked + label)::before,\n    :is(input[type='checkbox']:indeterminate + label)::before {\n        border-color: var(--wje-color-complete-9);\n        background-color: var(--wje-color-complete-9);\n    }\n}\n\n:host([color='success']) {\n    input[type='checkbox']:checked + label::after,\n    input[type='checkbox']:indeterminate + label:after {\n        background-color: var(--wje-color-contrast-0);\n    }\n    :is(input[type='checkbox']:checked + label)::before,\n    :is(input[type='checkbox']:indeterminate + label)::before {\n        border-color: var(--wje-color-success-9);\n        background-color: var(--wje-color-success-9);\n    }\n}\n\n:host([color='warning']) {\n    input[type='checkbox']:checked + label::after,\n    input[type='checkbox']:indeterminate + label:after {\n        background-color: var(--wje-color-contrast-0);\n    }\n    :is(input[type='checkbox']:checked + label)::before,\n    :is(input[type='checkbox']:indeterminate + label)::before {\n        border-color: var(--wje-color-warning-9);\n        background-color: var(--wje-color-warning-9);\n    }\n}\n\n:host([color='danger']) {\n    input[type='checkbox']:checked + label::after,\n    input[type='checkbox']:indeterminate + label:after {\n        background-color: var(--wje-color-contrast-0);\n    }\n    :is(input[type='checkbox']:checked + label)::before,\n    :is(input[type='checkbox']:indeterminate + label)::before {\n        border-color: var(--wje-color-danger-9);\n        background-color: var(--wje-color-danger-9);\n    }\n}\n\n:host([color='info']) {\n    input[type='checkbox']:checked + label::after,\n    input[type='checkbox']:indeterminate + label:after {\n        background-color: var(--wje-color-contrast-0);\n    }\n    :is(input[type='checkbox']:checked + label)::before,\n    :is(input[type='checkbox']:indeterminate + label)::before {\n        border-color: var(--wje-color-info-9);\n        background-color: var(--wje-color-info-9);\n    }\n}\n";
+class Checkbox extends FormAssociatedElement {
   /**
    * Checkbox constructor method.
    */
@@ -283,7 +24,8 @@ class Checkbox extends WJElement {
      * The class name for the Checkbox.
      */
     __publicField(this, "className", "Checkbox");
-    this.internals = this.attachInternals();
+    this.invalid = false;
+    this.pristine = true;
   }
   /**
    * Setter for the value attribute.
@@ -295,6 +37,7 @@ class Checkbox extends WJElement {
     if (this.input) {
       this.input.value = value;
       this.input.checked = value;
+      this.pristine = false;
     }
   }
   /**
@@ -319,61 +62,13 @@ class Checkbox extends WJElement {
     return this.hasAttribute("validate-on-change");
   }
   /**
-   * Setter for the invalid attribute.
-   * @param {boolean} isInvalid Whether the input is invalid.
-   */
-  set invalid(isInvalid) {
-    if (isInvalid) this.setAttribute("invalid", "");
-    else this.removeAttribute("invalid");
-  }
-  /**
-   * Getter for the invalid attribute.
-   * @returns {boolean} Whether the attribute is present.
-   */
-  get invalid() {
-    return this.hasAttribute("invalid");
-  }
-  /**
-   * Getter for the form attribute.
-   * @returns {HTMLFormElement} The form the input is associated with.
-   */
-  get form() {
-    return this.internals.form;
-  }
-  /**
-   * Getter for the name attribute.
-   * @returns {string} The name of the input.
-   */
-  get name() {
-    return this.getAttribute("name");
-  }
-  /**
-   * Getter for the type attribute.
-   * @returns {string} The type of the input.
-   */
-  get type() {
-    return this.localName;
-  }
-  /**
-   * Getter for the validity attribute.
-   * @returns {ValidityState} The validity state of the input.
-   */
-  get validity() {
-    return this.internals.validity;
-  }
-  /**
-   * Getter for the validationMessage attribute.
-   * @returns {string} The validation message of the input.
-   */
-  get validationMessage() {
-    return this.internals.validationMessage;
-  }
-  /**
-   * Getter for the willValidate attribute.
-   * @returns {boolean} Whether the input will be validated.
+   * 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.
    */
-  get willValidate() {
-    return this.internals.willValidate;
+  set defaultValue(value) {
+    this.setAttribute("value", value);
   }
   /**
    * Getter for the defaultValue attribute.
@@ -386,28 +81,29 @@ class Checkbox extends WJElement {
     return this.getAttribute("value") ?? "";
   }
   /**
-   * 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);
-  }
-  /**
-   * Set checked attribute.
-   * @param {boolean} value true if the toggle is checked, false otherwise
+   * Sets or removes the 'indeterminate' attribute for the object.
+   * This property typically reflects the visual or functional state where
+   * the component is neither fully active nor inactive.
+   * @param {boolean} value A boolean where `true` indicates the 'indeterminate'
+   * state should be set, and `false` removes it.
    */
-  set disabled(value) {
-    if (value) this.setAttribute("disabled", "");
-    else this.removeAttribute("disabled");
+  set indeterminate(value) {
+    if (value) {
+      this.setAttribute("indeterminate", "");
+    } else {
+      this.removeAttribute("indeterminate");
+    }
   }
   /**
-   * Get disabled attribute value.
-   * @returns {boolean} true if the toggle is disabled, false otherwise
+   * Retrieves the current state of the 'indeterminate' attribute.
+   *
+   * The 'indeterminate' attribute is typically used to signify a state
+   * where a checkbox is neither checked nor unchecked, such as a partially
+   * selected state.
+   * @returns {boolean} Returns true if the 'indeterminate' attribute is present; otherwise, false.
    */
-  get disabled() {
-    return this.hasAttribute("disabled");
+  get indeterminate() {
+    return this.hasAttribute("indeterminate");
   }
   /**
    * Set checked attribute.
@@ -416,10 +112,8 @@ class Checkbox extends WJElement {
   set checked(value) {
     if (value) {
       this.setAttribute("checked", "");
-      this.value = true;
     } else {
       this.removeAttribute("checked");
-      this.value = false;
     }
   }
   /**
@@ -444,6 +138,10 @@ class Checkbox extends WJElement {
    */
   setupAttributes() {
     this.isShadowRoot = "open";
+    if (this.pristine) {
+      this.value = __privateGet(this, _internalValue);
+      this.pristine = false;
+    }
   }
   /**
    * Draws the checkbox element.
@@ -458,14 +156,21 @@ class Checkbox extends WJElement {
     input.type = "checkbox";
     input.id = "checkbox";
     input.name = this.name || "checkbox";
-    input.checked = this.hasAttribute("checked");
-    input.disabled = this.hasAttribute("disabled");
-    input.indeterminate = this.hasAttribute("indeterminate");
+    input.checked = this.checked;
+    input.disabled = this.disabled;
+    input.indeterminate = this.indeterminate;
+    input.required = this.required;
     let label = document.createElement("label");
     label.htmlFor = "checkbox";
     label.innerHTML = "<slot></slot>";
-    native.appendChild(input);
-    native.appendChild(label);
+    let errorSlot = document.createElement("slot");
+    errorSlot.setAttribute("name", "error");
+    let error = document.createElement("div");
+    error.setAttribute("slot", "error");
+    native.append(input);
+    native.append(label);
+    native.append(errorSlot);
+    this.append(error);
     this.input = input;
     fragment.appendChild(native);
     return fragment;
@@ -476,15 +181,24 @@ class Checkbox extends WJElement {
   afterDraw() {
     if (!this.disabled) {
       this.input.addEventListener("input", (e) => {
+        this.validate();
+        this.pristine = false;
+        this.propagateValidation();
         this.value = e.target.checked;
-        this.checked = e.target.checked;
         event.dispatchCustomEvent(this, "wje-toggle:input");
       });
       this.input.addEventListener("change", (e) => {
-        this.value = e.target.checked;
-        this.checked = e.target.checked;
         event.dispatchCustomEvent(this, "wje-toggle:change");
       });
+      this.addEventListener("wje-checkbox:invalid", (e) => {
+        this.invalid = true;
+        this.pristine = false;
+        this.showInvalidMessage();
+      });
+      this.validate();
+      if (this.invalid) {
+        this.showInvalidMessage();
+      }
     }
   }
   /**
@@ -493,66 +207,8 @@ class Checkbox extends WJElement {
   beforeDisconnect() {
     event.removeElement(this.input);
   }
-  /**
-   * @summary Callback function that is called when the custom element is associated with a form.
-   * This function adds an event listener to the form's submit event, which validates the input and propagates the validation.
-   * @param {HTMLFormElement} form The form the custom element is associated with.
-   */
-  formAssociatedCallback(form) {
-    if (form) {
-      this.internals.setFormValue(this.value);
-    }
-  }
-  /**
-   * The formResetCallback method is a built-in lifecycle callback that gets called when a form gets reset.
-   * This method is responsible for resetting the value of the custom input element to its default value.
-   * It also resets the form value and validity state in the form internals.
-   * @function
-   */
-  formResetCallback() {
-    this.value = this.defaultValue;
-    this.internals.setFormValue(this.defaultValue);
-    this.internals.setValidity({});
-  }
-  /**
-   * The formStateRestoreCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is restored.
-   * This method is responsible for restoring the value of the custom input element to its saved state.
-   * It also restores the form value and validity state in the form internals to their saved states.
-   * @param {object} state The saved state of the custom input element.
-   * @function
-   */
-  formStateRestoreCallback(state) {
-    this.value = state.value;
-    this.internals.setFormValue(state.value);
-    this.internals.setValidity({});
-  }
-  /**
-   * The formStateSaveCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is saved.
-   * This method is responsible for saving the value of the custom input element.
-   * @returns {object} The saved state of the custom input element.
-   * @function
-   */
-  formStateSaveCallback() {
-    return {
-      value: this.value
-    };
-  }
-  /**
-   * The formDisabledCallback method is a built-in lifecycle callback that gets called when the disabled state of a form-associated custom element changes.
-   * This method is not implemented yet.
-   * @param {boolean} disabled The new disabled state of the custom input element.
-   * @function
-   */
-  formDisabledCallback(disabled) {
-    console.warn("formDisabledCallback not implemented yet");
-  }
 }
 _internalValue = new WeakMap();
-/**
- * Whether the input is associated with a form.
- * @type {boolean}
- */
-__publicField(Checkbox, "formAssociated", true);
 WJElement.define("wje-checkbox", Checkbox);
 export {
   Checkbox as default

package/dist/wje-checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-checkbox.js","sources":["../packages/wje-checkbox/checkbox.element.js","../packages/wje-checkbox/checkbox.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This method dispatches a custom event named \"wje-checkbox:change\".\n * It is triggered when the input event is fired, which happens when the state of the checkbox changes.\n * The event is dispatched on the current instance of the Checkbox class.\n * @documentation https://elements.webjet.sk/components/checkbox\n * @status stable\n * @augments WJElement\n * @slot - The checkbox main content.\n * @csspart native - The component's native wrapper.\n * @cssproperty [--wje-checkbox-border-radius=--wje-border-radius-medium] - Border radius of the component;\n * @cssproperty [--wje-checkbox-border-width=1px] - Border width of the component;\n * @cssproperty [--wje-checkbox-border-style=solid] - Border style of the component;\n * @cssproperty [--wje-checkbox-border-color=--wje-color-contrast-1] - Border color of the component;\n * @cssproperty [--wje-checkbox-margin-inline=0] - Margin inline of the component;\n * //@fires wje-checkbox:change - Dispatched when the checkbox state changes;\n */\nexport default class Checkbox extends WJElement {\n\t#internalValue = false;\n\t/**\n\t * Checkbox constructor method.\n\t */\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t}\n\n\t/**\n\t * Setter for the value attribute.\n\t * @param {string} value The value to set.\n\t */\n\tset value(value) {\n\t\tthis.internals.setFormValue(value);\n\t\tthis.#internalValue = value;\n\n\t\tif (this.input) {\n\t\t\tthis.input.value = value;\n\t\t\tthis.input.checked = value;\n\t\t}\n\t}\n\n\t/**\n\t * Getter for the value attribute.\n\t * @returns {string} The value of the attribute.\n\t */\n\tget value() {\n\t\treturn this.#internalValue;\n\t}\n\n\t/**\n\t * Getter for the customErrorDisplay attribute.\n\t * @returns {boolean} Whether the attribute is present.\n\t */\n\tget customErrorDisplay() {\n\t\treturn this.hasAttribute('custom-error-display');\n\t}\n\n\t/**\n\t * Getter for the validateOnChange attribute.\n\t * @returns {boolean} Whether the attribute is present.\n\t */\n\tget validateOnChange() {\n\t\treturn this.hasAttribute('validate-on-change');\n\t}\n\n\t/**\n\t * Setter for the invalid attribute.\n\t * @param {boolean} isInvalid Whether the input is invalid.\n\t */\n\tset invalid(isInvalid) {\n\t\tif (isInvalid) this.setAttribute('invalid', '');\n\t\telse this.removeAttribute('invalid');\n\t}\n\n\t/**\n\t * Getter for the invalid attribute.\n\t * @returns {boolean} Whether the attribute is present.\n\t */\n\tget invalid() {\n\t\treturn this.hasAttribute('invalid');\n\t}\n\n\t/**\n\t * Getter for the form attribute.\n\t * @returns {HTMLFormElement} The form the input is associated with.\n\t */\n\tget form() {\n\t\treturn this.internals.form;\n\t}\n\n\t/**\n\t * Getter for the name attribute.\n\t * @returns {string} The name of the input.\n\t */\n\tget name() {\n\t\treturn this.getAttribute('name');\n\t}\n\n\t/**\n\t * Getter for the type attribute.\n\t * @returns {string} The type of the input.\n\t */\n\tget type() {\n\t\treturn this.localName;\n\t}\n\n\t/**\n\t * Getter for the validity attribute.\n\t * @returns {ValidityState} The validity state of the input.\n\t */\n\tget validity() {\n\t\treturn this.internals.validity;\n\t}\n\n\t/**\n\t * Getter for the validationMessage attribute.\n\t * @returns {string} The validation message of the input.\n\t */\n\tget validationMessage() {\n\t\treturn this.internals.validationMessage;\n\t}\n\n\t/**\n\t * Getter for the willValidate attribute.\n\t * @returns {boolean} Whether the input will be validated.\n\t */\n\tget willValidate() {\n\t\treturn this.internals.willValidate;\n\t}\n\n\t/**\n\t * Getter for the defaultValue attribute.\n\t * This method retrieves the 'value' attribute of the custom input element.\n\t * The 'value' attribute represents the default value of the input element.\n\t * If the 'value' attribute is not set, it returns an empty string.\n\t * @returns {string} The default value of the input element.\n\t */\n\tget defaultValue() {\n\t\treturn this.getAttribute('value') ?? '';\n\t}\n\n\t/**\n\t * Setter for the defaultValue attribute.\n\t * This method sets the 'value' attribute of the custom input element to the provided value.\n\t * The 'value' attribute represents the default value of the input element.\n\t * @param {string} value The value to set as the default value.\n\t */\n\tset defaultValue(value) {\n\t\tthis.setAttribute('value', value);\n\t}\n\n\t/**\n\t * Set checked attribute.\n\t * @param {boolean} value true if the toggle is checked, false otherwise\n\t */\n\tset disabled(value) {\n\t\tif (value) this.setAttribute('disabled', '');\n\t\telse this.removeAttribute('disabled');\n\t}\n\n\t/**\n\t * Get disabled attribute value.\n\t * @returns {boolean} true if the toggle is disabled, false otherwise\n\t */\n\tget disabled() {\n\t\treturn this.hasAttribute('disabled');\n\t}\n\n\t/**\n\t * Set checked attribute.\n\t * @param {boolean} value true if the toggle is checked, false otherwise\n\t */\n\tset checked(value) {\n\t\tif (value) {\n\t\t\tthis.setAttribute('checked', '');\n\t\t\tthis.value = true;\n\t\t}\n\t\telse {\n\t\t\tthis.removeAttribute('checked');\n\t\t\tthis.value = false;\n\t\t}\n\t}\n\n\t/**\n\t * Get checked attribute.\n\t * @returns {boolean} true if the toggle is checked, false otherwise\n\t */\n\tget checked() {\n\t\treturn this.hasAttribute('checked');\n\t}\n\n\t/**\n\t * The class name for the Checkbox.\n\t */\n\tclassName = 'Checkbox';\n\n\t/**\n\t * Getter for the CSS stylesheet.\n\t * @returns {string} The CSS stylesheet.\n\t */\n\tstatic get cssStyleSheet() {\n\t\treturn styles;\n\t}\n\n\tstatic get observedAttributes() {\n\t\treturn ['checked', 'disabled', 'value', 'indeterminate'];\n\t}\n\n\t/**\n\t * Whether the input is associated with a form.\n\t * @type {boolean}\n\t */\n\tstatic formAssociated = true;\n\n\t/**\n\t * Sets up the attributes for the checkbox.\n\t */\n\tsetupAttributes() {\n\t\tthis.isShadowRoot = 'open';\n\t}\n\n\t/**\n\t * Draws the checkbox element.\n\t * @returns {DocumentFragment} The created fragment.\n\t */\n\tdraw() {\n\t\tlet fragment = document.createDocumentFragment();\n\n\t\tlet native = document.createElement('div');\n\t\tnative.setAttribute('part', 'native');\n\t\tnative.classList.add('native-checkbox');\n\n\t\tlet input = document.createElement('input');\n\t\tinput.type = 'checkbox';\n\t\tinput.id = 'checkbox';\n\t\tinput.name = this.name || 'checkbox';\n\t\tinput.checked = this.hasAttribute('checked');\n\t\tinput.disabled = this.hasAttribute('disabled');\n\t\tinput.indeterminate = this.hasAttribute('indeterminate');\n\n\t\tlet label = document.createElement('label');\n\t\tlabel.htmlFor = 'checkbox';\n\t\tlabel.innerHTML = '<slot></slot>';\n\n\t\tnative.appendChild(input);\n\t\tnative.appendChild(label);\n\n\t\tthis.input = input;\n\n\t\tfragment.appendChild(native);\n\n\t\treturn fragment;\n\t}\n\n\t/**\n\t * Adds an event listener after drawing the checkbox.\n\t */\n\tafterDraw() {\n\t\tif (!this.disabled) {\n\t\t\tthis.input.addEventListener('input', (e) => {\n\t\t\t\tthis.value = e.target.checked;\n\t\t\t\tthis.checked = e.target.checked;\n\t\t\t\tevent.dispatchCustomEvent(this, 'wje-toggle:input');\n\t\t\t});\n\n\t\t\tthis.input.addEventListener('change', (e) => {\n\t\t\t\tthis.value = e.target.checked;\n\t\t\t\tthis.checked = e.target.checked;\n\t\t\t\tevent.dispatchCustomEvent(this, 'wje-toggle:change');\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Removes the event listener when the checkbox is disconnected.\n\t */\n\tbeforeDisconnect() {\n\t\tevent.removeElement(this.input);\n\t}\n\n\t/**\n\t * @summary Callback function that is called when the custom element is associated with a form.\n\t * This function adds an event listener to the form's submit event, which validates the input and propagates the validation.\n\t * @param {HTMLFormElement} form The form the custom element is associated with.\n\t */\n\tformAssociatedCallback(form) {\n\t\tif (form) {\n\t\t\tthis.internals.setFormValue(this.value);\n\t\t}\n\t}\n\n\t/**\n\t * The formResetCallback method is a built-in lifecycle callback that gets called when a form gets reset.\n\t * This method is responsible for resetting the value of the custom input element to its default value.\n\t * It also resets the form value and validity state in the form internals.\n\t * @function\n\t */\n\tformResetCallback() {\n\t\t// Set the value of the custom input element to its default value\n\t\tthis.value = this.defaultValue;\n\t\t// Reset the form value in the form internals to the default value\n\t\tthis.internals.setFormValue(this.defaultValue);\n\t\t// Reset the validity state in the form internals\n\t\tthis.internals.setValidity({});\n\t}\n\n\t/**\n\t * The formStateRestoreCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is restored.\n\t * This method is responsible for restoring the value of the custom input element to its saved state.\n\t * It also restores the form value and validity state in the form internals to their saved states.\n\t * @param {object} state The saved state of the custom input element.\n\t * @function\n\t */\n\tformStateRestoreCallback(state) {\n\t\t// Set the value of the custom input element to its saved value\n\t\tthis.value = state.value;\n\t\t// Restore the form value in the form internals to the saved value\n\t\tthis.internals.setFormValue(state.value);\n\t\t// Restore the validity state in the form internals to the saved state\n\t\tthis.internals.setValidity({});\n\t}\n\n\t/**\n\t * The formStateSaveCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is saved.\n\t * This method is responsible for saving the value of the custom input element.\n\t * @returns {object} The saved state of the custom input element.\n\t * @function\n\t */\n\tformStateSaveCallback() {\n\t\treturn {\n\t\t\tvalue: this.value,\n\t\t};\n\t}\n\n\t/**\n\t * The formDisabledCallback method is a built-in lifecycle callback that gets called when the disabled state of a form-associated custom element changes.\n\t * This method is not implemented yet.\n\t * @param {boolean} disabled The new disabled state of the custom input element.\n\t * @function\n\t */\n\tformDisabledCallback(disabled) {\n\t\tconsole.warn('formDisabledCallback not implemented yet');\n\t}\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport Checkbox from './checkbox.element.js';\n\n// export * from \"./checkbox.element.js\";\nexport default Checkbox;\n\nWJElement.define('wje-checkbox', Checkbox);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-checkbox.js","sources":["../packages/wje-checkbox/checkbox.element.js","../packages/wje-checkbox/checkbox.js"],"sourcesContent":["import { FormAssociatedElement } from '../internals/form-associated-element.js';\nimport { event } from '../utils/event.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This method dispatches a custom event named \"wje-checkbox:change\".\n * It is triggered when the input event is fired, which happens when the state of the checkbox changes.\n * The event is dispatched on the current instance of the Checkbox class.\n * @documentation https://elements.webjet.sk/components/checkbox\n * @status stable\n * @augments {FormAssociatedElement}\n * @slot - The checkbox main content.\n * @csspart native - The component's native wrapper.\n * @cssproperty [--wje-checkbox-border-radius=--wje-border-radius-medium] - Border radius of the component;\n * @cssproperty [--wje-checkbox-border-width=1px] - Border width of the component;\n * @cssproperty [--wje-checkbox-border-style=solid] - Border style of the component;\n * @cssproperty [--wje-checkbox-border-color=--wje-color-contrast-1] - Border color of the component;\n * @cssproperty [--wje-checkbox-margin-inline=0] - Margin inline of the component;\n * //@fires wje-checkbox:change - Dispatched when the checkbox state changes;\n */\nexport default class Checkbox extends FormAssociatedElement {\n\t#internalValue = false;\n\t/**\n\t * Checkbox constructor method.\n\t */\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis.invalid = false;\n\t\tthis.pristine = true;\n\t}\n\n\t/**\n\t * Setter for the value attribute.\n\t * @param {string} value The value to set.\n\t */\n\tset value(value) {\n\t\tthis.internals.setFormValue(value);\n\t\tthis.#internalValue = value;\n\n\t\tif (this.input) {\n\t\t\tthis.input.value = value;\n\t\t\tthis.input.checked = value;\n\t\t\tthis.pristine = false;\n\t\t}\n\t}\n\n\t/**\n\t * Getter for the value attribute.\n\t * @returns {string} The value of the attribute.\n\t */\n\tget value() {\n\t\treturn this.#internalValue;\n\t}\n\n\t/**\n\t * Getter for the customErrorDisplay attribute.\n\t * @returns {boolean} Whether the attribute is present.\n\t */\n\tget customErrorDisplay() {\n\t\treturn this.hasAttribute('custom-error-display');\n\t}\n\n\t/**\n\t * Getter for the validateOnChange attribute.\n\t * @returns {boolean} Whether the attribute is present.\n\t */\n\tget validateOnChange() {\n\t\treturn this.hasAttribute('validate-on-change');\n\t}\n\n\t/**\n\t * Setter for the defaultValue attribute.\n\t * This method sets the 'value' attribute of the custom input element to the provided value.\n\t * The 'value' attribute represents the default value of the input element.\n\t * @param {string} value The value to set as the default value.\n\t */\n\tset defaultValue(value) {\n\t\tthis.setAttribute('value', value);\n\t}\n\n\t/**\n\t * Getter for the defaultValue attribute.\n\t * This method retrieves the 'value' attribute of the custom input element.\n\t * The 'value' attribute represents the default value of the input element.\n\t * If the 'value' attribute is not set, it returns an empty string.\n\t * @returns {string} The default value of the input element.\n\t */\n\tget defaultValue() {\n\t\treturn this.getAttribute('value') ?? '';\n\t}\n\n\t/**\n\t * Sets or removes the 'indeterminate' attribute for the object.\n\t * This property typically reflects the visual or functional state where\n\t * the component is neither fully active nor inactive.\n\t * @param {boolean} value A boolean where `true` indicates the 'indeterminate'\n\t * state should be set, and `false` removes it.\n\t */\n\tset indeterminate(value) {\n\t\tif (value) {\n\t\t\tthis.setAttribute('indeterminate', '');\n\t\t} else {\n\t\t\tthis.removeAttribute('indeterminate');\n\t\t}\n\t}\n\n\t/**\n\t * Retrieves the current state of the 'indeterminate' attribute.\n\t *\n\t * The 'indeterminate' attribute is typically used to signify a state\n\t * where a checkbox is neither checked nor unchecked, such as a partially\n\t * selected state.\n\t * @returns {boolean} Returns true if the 'indeterminate' attribute is present; otherwise, false.\n\t */\n\tget indeterminate() {\n\t\treturn this.hasAttribute('indeterminate');\n\t}\n\n\t/**\n\t * Set checked attribute.\n\t * @param {boolean} value true if the toggle is checked, false otherwise\n\t */\n\tset checked(value) {\n\t\tif (value) {\n\t\t\tthis.setAttribute('checked', '');\n\t\t} else {\n\t\t\tthis.removeAttribute('checked');\n\t\t}\n\t}\n\n\t/**\n\t * Get checked attribute.\n\t * @returns {boolean} true if the toggle is checked, false otherwise\n\t */\n\tget checked() {\n\t\treturn this.hasAttribute('checked');\n\t}\n\n\t/**\n\t * The class name for the Checkbox.\n\t */\n\tclassName = 'Checkbox';\n\n\t/**\n\t * Getter for the CSS stylesheet.\n\t * @returns {string} The CSS stylesheet.\n\t */\n\tstatic get cssStyleSheet() {\n\t\treturn styles;\n\t}\n\n\tstatic get observedAttributes() {\n\t\treturn ['checked', 'disabled', 'value', 'indeterminate'];\n\t}\n\n\t/**\n\t * Sets up the attributes for the checkbox.\n\t */\n\tsetupAttributes() {\n\t\tthis.isShadowRoot = 'open';\n\t\t// if some value was set via value setter then dont use default value\n\t\tif (this.pristine) {\n\t\t\tthis.value = this.#internalValue;\n\t\t\tthis.pristine = false;\n\t\t}\n\t}\n\n\t/**\n\t * Draws the checkbox element.\n\t * @returns {DocumentFragment} The created fragment.\n\t */\n\tdraw() {\n\t\tlet fragment = document.createDocumentFragment();\n\n\t\tlet native = document.createElement('div');\n\t\tnative.setAttribute('part', 'native');\n\t\tnative.classList.add('native-checkbox');\n\n\t\tlet input = document.createElement('input');\n\t\tinput.type = 'checkbox';\n\t\tinput.id = 'checkbox';\n\t\tinput.name = this.name || 'checkbox';\n\t\tinput.checked = this.checked;\n\t\tinput.disabled = this.disabled;\n\t\tinput.indeterminate = this.indeterminate;\n\t\tinput.required = this.required;\n\n\t\tlet label = document.createElement('label');\n\t\tlabel.htmlFor = 'checkbox';\n\t\tlabel.innerHTML = '<slot></slot>';\n\n\t\t// Error\n\t\tlet errorSlot = document.createElement('slot');\n\t\terrorSlot.setAttribute('name', 'error');\n\n\t\tlet error = document.createElement('div');\n\t\terror.setAttribute('slot', 'error');\n\n\t\tnative.append(input);\n\t\tnative.append(label);\n\t\tnative.append(errorSlot);\n\n\t\tthis.append(error);\n\n\t\tthis.input = input;\n\n\t\tfragment.appendChild(native);\n\n\t\treturn fragment;\n\t}\n\n\t/**\n\t * Adds an event listener after drawing the checkbox.\n\t */\n\tafterDraw() {\n\t\tif (!this.disabled) {\n\t\t\tthis.input.addEventListener('input', (e) => {\n\t\t\t\tthis.validate();\n\n\t\t\t\tthis.pristine = false;\n\t\t\t\tthis.propagateValidation();\n\n\t\t\t\tthis.value = e.target.checked;\n\n\t\t\t\tevent.dispatchCustomEvent(this, 'wje-toggle:input');\n\t\t\t});\n\n\t\t\tthis.input.addEventListener('change', (e) => {\n\t\t\t\tevent.dispatchCustomEvent(this, 'wje-toggle:change');\n\t\t\t});\n\n\t\t\tthis.addEventListener('wje-checkbox:invalid', (e) => {\n\t\t\t\tthis.invalid = true;\n\t\t\t\tthis.pristine = false;\n\n\t\t\t\tthis.showInvalidMessage();\n\t\t\t});\n\n\t\t\tthis.validate();\n\n\t\t\tif (this.invalid) {\n\t\t\t\tthis.showInvalidMessage();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Removes the event listener when the checkbox is disconnected.\n\t */\n\tbeforeDisconnect() {\n\t\tevent.removeElement(this.input);\n\t}\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport Checkbox from './checkbox.element.js';\n\n// export * from \"./checkbox.element.js\";\nexport default Checkbox;\n\nWJElement.define('wje-checkbox', Checkbox);\n"],"names":[],"mappings":"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"}

package/dist/wje-dropdown.js

@@ -2,7 +2,7 @@ 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";
-import { P as Popup } from "./popup.element-Di4nHYij.js";
+import { P as Popup } from "./popup.element-CVbbnTWI.js";
 import { event } from "./event.js";
 class Dropdown extends WJElement {
   /**

package/dist/wje-icon-picker.js

@@ -7,7 +7,7 @@ import InfiniteScroll from "./wje-infinite-scroll.js";
 import Input from "./wje-input.js";
 import "./wje-popup.js";
 import Tooltip from "./wje-tooltip.js";
-import { P as Popup } from "./popup.element-Di4nHYij.js";
+import { P as Popup } from "./popup.element-CVbbnTWI.js";
 import { event } from "./event.js";
 const styles = "/*\n[ Wj Icon Picker ]\n*/\n\n:host {\n    padding: 0 1rem;\n}\n\n.anchor {\n    width: var(--wje-icon-picker-icon-size);\n    height: var(--wje-icon-picker-icon-size);\n    padding: var(--wje-icon-picker-padding);\n    border-width: var(--wje-icon-picker-border-width);\n    border-style: var(--wje-icon-picker-border-style);\n    border-color: var(--wje-icon-picker-border-color);\n    box-sizing: border-box;\n    border-radius: var(--wje-icon-picker-radius);\n}\n\n.picker {\n    width: 320px;\n    height: 271px;\n    box-shadow:\n        0 0 5px rgba(0, 0, 0, 0.05),\n        0 5px 20px rgba(0, 0, 0, 0.1);\n    border-radius: var(--wje-icon-picker-radius);\n    border-width: var(--wje-icon-picker-border-width);\n    border-style: var(--wje-icon-picker-border-style);\n    border-color: var(--wje-icon-picker-border-color);\n    overflow: auto;\n    padding: 1rem;\n    background: var(--wje-background);\n}\n\n.icon-items {\n    --icon-min-width: 2rem;\n    display: grid;\n    grid-gap: 0.5rem;\n    grid-template-columns: repeat(auto-fit, minmax(var(--icon-min-width), 1fr));\n}\n\n.icon-item {\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    color: inherit;\n    padding: 0.25rem;\n    min-height: var(--wje-icon-picker-icon-size);\n    min-width: var(--wje-icon-picker-icon-size);\n    text-decoration: none;\n\n    &:hover {\n        border-radius: 0.25rem;\n        background: var(--wje-border-color);\n    }\n}\n\n.wje-size {\n    --wje-icon-size: 24px !important;\n}\n\nicon-item svg {\n    width: var(--wje-icon-picker-icon-size);\n    height: var(--wje-icon-picker-icon-size);\n}\n\nwje-input {\n    --wje-input-border-radius: 4px;\n    --wje-input-margin-bottom: 0;\n}\n\nwje-infinite-scroll {\n    margin-top: 1rem;\n}\n\nwje-select {\n    --wje-select-border-width: 0 0 1px 0 !important;\n    --wje-select-border-radius: 0 !important;\n    margin-bottom: 1rem;\n}\n\n.anchor wje-icon {\n    --wje-icon-size: 100% !important;\n}\n";
 class IconPicker extends WJElement {