wj-elements 0.1.136 → 0.1.137

package/dist/wje-checkbox.js

@@ -0,0 +1,540 @@
+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, { event } from "./wje-element.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 {
+  /**
+   * Checkbox constructor method.
+   */
+  constructor() {
+    super();
+    /**
+     * The class name for the Checkbox.
+     */
+    __publicField(this, "className", "Checkbox");
+    this.internals = this.attachInternals();
+  }
+  /**
+   * Setter for the value attribute.
+   * @param {string} value The value to set.
+   */
+  set value(value) {
+    this.internals.setFormValue(value);
+    if (this.input) this.input.value = value;
+  }
+  /**
+   * Getter for the value attribute.
+   * @returns {string} The value of the attribute.
+   */
+  get value() {
+    var _a;
+    return ((_a = this.input) == null ? void 0 : _a.value) || "";
+  }
+  /**
+   * Getter for the customErrorDisplay attribute.
+   * @returns {boolean} Whether the attribute is present.
+   */
+  get customErrorDisplay() {
+    return this.hasAttribute("custom-error-display");
+  }
+  /**
+   * Getter for the validateOnChange attribute.
+   * @returns {boolean} Whether the attribute is present.
+   */
+  get validateOnChange() {
+    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.
+   */
+  get willValidate() {
+    return this.internals.willValidate;
+  }
+  /**
+   * 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") ?? "";
+  }
+  /**
+   * 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
+   */
+  set disabled(value) {
+    if (value) this.setAttribute("disabled", "");
+    else this.removeAttribute("disabled");
+  }
+  /**
+   * Get disabled attribute value.
+   * @returns {boolean} true if the toggle is disabled, false otherwise
+   */
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  /**
+   * 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");
+  }
+  /**
+   * Get checked attribute.
+   * @returns {boolean} true if the toggle is checked, false otherwise
+   */
+  get checked() {
+    return this.hasAttribute("checked");
+  }
+  /**
+   * Getter for the CSS stylesheet.
+   * @returns {string} The CSS stylesheet.
+   */
+  static get cssStyleSheet() {
+    return styles;
+  }
+  static get observedAttributes() {
+    return ["checked", "disabled", "value"];
+  }
+  /**
+   * Sets up the attributes for the checkbox.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Draws the checkbox element.
+   * @returns {DocumentFragment} The created fragment.
+   */
+  draw() {
+    let fragment = document.createDocumentFragment();
+    let native = document.createElement("div");
+    native.setAttribute("part", "native");
+    native.classList.add("native-checkbox");
+    let input = document.createElement("input");
+    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");
+    let label = document.createElement("label");
+    label.htmlFor = "checkbox";
+    label.innerHTML = "<slot></slot>";
+    native.appendChild(input);
+    native.appendChild(label);
+    this.input = input;
+    fragment.appendChild(native);
+    return fragment;
+  }
+  /**
+   * Adds an event listener after drawing the checkbox.
+   */
+  afterDraw() {
+    if (!this.disabled) {
+      this.input.addEventListener("input", (e) => {
+        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");
+      });
+    }
+  }
+  /**
+   * Removes the event listener when the checkbox is disconnected.
+   */
+  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) {
+    form == null ? void 0 : form.addEventListener("submit", () => {
+    });
+  }
+  /**
+   * 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");
+  }
+}
+/**
+ * Whether the input is associated with a form.
+ * @type {boolean}
+ */
+__publicField(Checkbox, "formAssociated", true);
+WJElement.define("wje-checkbox", Checkbox);
+export {
+  Checkbox as default
+};
+//# sourceMappingURL=wje-checkbox.js.map

package/dist/wje-checkbox.js.map

@@ -0,0 +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    /**\n     * Checkbox constructor method.\n     */\n    constructor() {\n        super();\n        this.internals = this.attachInternals();\n    }\n\n    /**\n     * Setter for the value attribute.\n     * @param {string} value The value to set.\n     */\n    set value(value) {\n        this.internals.setFormValue(value);\n\n        if (this.input) this.input.value = value;\n    }\n\n    /**\n     * Getter for the value attribute.\n     * @returns {string} The value of the attribute.\n     */\n    get value() {\n        return this.input?.value || '';\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 invalid attribute.\n     * @param {boolean} isInvalid Whether the input is invalid.\n     */\n    set invalid(isInvalid) {\n        if (isInvalid) this.setAttribute('invalid', '');\n        else this.removeAttribute('invalid');\n    }\n\n    /**\n     * Getter for the invalid attribute.\n     * @returns {boolean} Whether the attribute is present.\n     */\n    get invalid() {\n        return this.hasAttribute('invalid');\n    }\n\n    /**\n     * Getter for the form attribute.\n     * @returns {HTMLFormElement} The form the input is associated with.\n     */\n    get form() {\n        return this.internals.form;\n    }\n\n    /**\n     * Getter for the name attribute.\n     * @returns {string} The name of the input.\n     */\n    get name() {\n        return this.getAttribute('name');\n    }\n\n    /**\n     * Getter for the type attribute.\n     * @returns {string} The type of the input.\n     */\n    get type() {\n        return this.localName;\n    }\n\n    /**\n     * Getter for the validity attribute.\n     * @returns {ValidityState} The validity state of the input.\n     */\n    get validity() {\n        return this.internals.validity;\n    }\n\n    /**\n     * Getter for the validationMessage attribute.\n     * @returns {string} The validation message of the input.\n     */\n    get validationMessage() {\n        return this.internals.validationMessage;\n    }\n\n    /**\n     * Getter for the willValidate attribute.\n     * @returns {boolean} Whether the input will be validated.\n     */\n    get willValidate() {\n        return this.internals.willValidate;\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     * 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     * Set checked attribute.\n     * @param {boolean} value true if the toggle is checked, false otherwise\n     */\n    set disabled(value) {\n        if (value) this.setAttribute('disabled', '');\n        else this.removeAttribute('disabled');\n    }\n\n    /**\n     * Get disabled attribute value.\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.\n     * @param {boolean} value true if the toggle is checked, false otherwise\n     */\n    set checked(value) {\n        if (value) this.setAttribute('checked', '');\n        else this.removeAttribute('checked');\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    /**\n     * The class name for the Checkbox.\n     */\n    className = 'Checkbox';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {string} The CSS stylesheet.\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    static get observedAttributes() {\n        return ['checked', 'disabled', 'value'];\n    }\n\n    /**\n     * Whether the input is associated with a form.\n     * @type {boolean}\n     */\n    static formAssociated = true;\n\n    /**\n     * Sets up the attributes for the checkbox.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the checkbox element.\n     * @returns {DocumentFragment} The created fragment.\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-checkbox');\n\n        let input = document.createElement('input');\n        input.type = 'checkbox';\n        input.id = 'checkbox';\n        input.name = this.name || 'checkbox';\n        input.checked = this.hasAttribute('checked');\n        input.disabled = this.hasAttribute('disabled');\n        input.indeterminate = this.hasAttribute('indeterminate');\n\n        let label = document.createElement('label');\n        label.htmlFor = 'checkbox';\n        label.innerHTML = '<slot></slot>';\n\n        native.appendChild(input);\n        native.appendChild(label);\n\n        this.input = input;\n\n        fragment.appendChild(native);\n\n        return fragment;\n    }\n\n    /**\n     * Adds an event listener after drawing the checkbox.\n     */\n    afterDraw() {\n        if (!this.disabled) {\n            this.input.addEventListener('input', (e) => {\n                this.value = e.target.checked;\n                this.checked = e.target.checked;\n                event.dispatchCustomEvent(this, 'wje-toggle:input');\n            });\n\n            this.input.addEventListener('change', (e) => {\n                this.value = e.target.checked;\n                this.checked = e.target.checked;\n                event.dispatchCustomEvent(this, 'wje-toggle:change');\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    /**\n     * @summary Callback function that is called when the custom element is associated with a form.\n     * This function adds an event listener to the form's submit event, which validates the input and propagates the validation.\n     * @param {HTMLFormElement} form The form the custom element is associated with.\n     */\n    formAssociatedCallback(form) {\n        form?.addEventListener('submit', () => {\n            // this.validateInput();\n            // this.propagateValidation();\n        });\n    }\n\n    /**\n     * The formResetCallback method is a built-in lifecycle callback that gets called when a form gets reset.\n     * This method is responsible for resetting the value of the custom input element to its default value.\n     * It also resets the form value and validity state in the form internals.\n     * @function\n     */\n    formResetCallback() {\n        // Set the value of the custom input element to its default value\n        this.value = this.defaultValue;\n        // Reset the form value in the form internals to the default value\n        this.internals.setFormValue(this.defaultValue);\n        // Reset the validity state in the form internals\n        this.internals.setValidity({});\n    }\n\n    /**\n     * The formStateRestoreCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is restored.\n     * This method is responsible for restoring the value of the custom input element to its saved state.\n     * It also restores the form value and validity state in the form internals to their saved states.\n     * @param {object} state The saved state of the custom input element.\n     * @function\n     */\n    formStateRestoreCallback(state) {\n        // Set the value of the custom input element to its saved value\n        this.value = state.value;\n        // Restore the form value in the form internals to the saved value\n        this.internals.setFormValue(state.value);\n        // Restore the validity state in the form internals to the saved state\n        this.internals.setValidity({});\n    }\n\n    /**\n     * The formStateSaveCallback method is a built-in lifecycle callback that gets called when the state of a form-associated custom element is saved.\n     * This method is responsible for saving the value of the custom input element.\n     * @returns {object} The saved state of the custom input element.\n     * @function\n     */\n    formStateSaveCallback() {\n        return {\n            value: this.value,\n        };\n    }\n\n    /**\n     * The formDisabledCallback method is a built-in lifecycle callback that gets called when the disabled state of a form-associated custom element changes.\n     * This method is not implemented yet.\n     * @param {boolean} disabled The new disabled state of the custom input element.\n     * @function\n     */\n    formDisabledCallback(disabled) {\n        console.warn('formDisabledCallback not implemented yet');\n    }\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBe,MAAM,iBAAiB,UAAU;AAAA;AAAA;AAAA;AAAA,EAI5C,cAAc;AACV,UAAO;AAiKX;AAAA;AAAA;AAAA,qCAAY;AAhKR,SAAK,YAAY,KAAK,gBAAiB;AAAA,EAC/C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,MAAM,OAAO;AACb,SAAK,UAAU,aAAa,KAAK;AAEjC,QAAI,KAAK,MAAO,MAAK,MAAM,QAAQ;AAAA,EAC3C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,QAAQ;;AACR,aAAO,UAAK,UAAL,mBAAY,UAAS;AAAA,EACpC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,qBAAqB;AACrB,WAAO,KAAK,aAAa,sBAAsB;AAAA,EACvD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,mBAAmB;AACnB,WAAO,KAAK,aAAa,oBAAoB;AAAA,EACrD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,QAAQ,WAAW;AACnB,QAAI,UAAW,MAAK,aAAa,WAAW,EAAE;AAAA,QACzC,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,EAMI,IAAI,OAAO;AACP,WAAO,KAAK,UAAU;AAAA,EAC9B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,OAAO;AACP,WAAO,KAAK,aAAa,MAAM;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,OAAO;AACP,WAAO,KAAK;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,WAAW;AACX,WAAO,KAAK,UAAU;AAAA,EAC9B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,oBAAoB;AACpB,WAAO,KAAK,UAAU;AAAA,EAC9B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,IAAI,eAAe;AACf,WAAO,KAAK,UAAU;AAAA,EAC9B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,IAAI,eAAe;AACf,WAAO,KAAK,aAAa,OAAO,KAAK;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,IAAI,aAAa,OAAO;AACpB,SAAK,aAAa,SAAS,KAAK;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,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;AAAA,EAMI,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,EAWI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA,EAEI,WAAW,qBAAqB;AAC5B,WAAO,CAAC,WAAW,YAAY,OAAO;AAAA,EAC9C;AAAA;AAAA;AAAA;AAAA,EAWI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,iBAAiB;AAEtC,QAAI,QAAQ,SAAS,cAAc,OAAO;AAC1C,UAAM,OAAO;AACb,UAAM,KAAK;AACX,UAAM,OAAO,KAAK,QAAQ;AAC1B,UAAM,UAAU,KAAK,aAAa,SAAS;AAC3C,UAAM,WAAW,KAAK,aAAa,UAAU;AAC7C,UAAM,gBAAgB,KAAK,aAAa,eAAe;AAEvD,QAAI,QAAQ,SAAS,cAAc,OAAO;AAC1C,UAAM,UAAU;AAChB,UAAM,YAAY;AAElB,WAAO,YAAY,KAAK;AACxB,WAAO,YAAY,KAAK;AAExB,SAAK,QAAQ;AAEb,aAAS,YAAY,MAAM;AAE3B,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,QAAI,CAAC,KAAK,UAAU;AAChB,WAAK,MAAM,iBAAiB,SAAS,CAAC,MAAM;AACxC,aAAK,QAAQ,EAAE,OAAO;AACtB,aAAK,UAAU,EAAE,OAAO;AACxB,cAAM,oBAAoB,MAAM,kBAAkB;AAAA,MAClE,CAAa;AAED,WAAK,MAAM,iBAAiB,UAAU,CAAC,MAAM;AACzC,aAAK,QAAQ,EAAE,OAAO;AACtB,aAAK,UAAU,EAAE,OAAO;AACxB,cAAM,oBAAoB,MAAM,mBAAmB;AAAA,MACnE,CAAa;AAAA,IACb;AAAA,EACA;AAAA;AAAA;AAAA;AAAA,EAKI,mBAAmB;AACf,UAAM,cAAc,KAAK,KAAK;AAAA,EACtC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,uBAAuB,MAAM;AACzB,iCAAM,iBAAiB,UAAU,MAAM;AAAA,IAG/C;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,oBAAoB;AAEhB,SAAK,QAAQ,KAAK;AAElB,SAAK,UAAU,aAAa,KAAK,YAAY;AAE7C,SAAK,UAAU,YAAY,EAAE;AAAA,EACrC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,yBAAyB,OAAO;AAE5B,SAAK,QAAQ,MAAM;AAEnB,SAAK,UAAU,aAAa,MAAM,KAAK;AAEvC,SAAK,UAAU,YAAY,EAAE;AAAA,EACrC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,wBAAwB;AACpB,WAAO;AAAA,MACH,OAAO,KAAK;AAAA,IACf;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQI,qBAAqB,UAAU;AAC3B,YAAQ,KAAK,0CAA0C;AAAA,EAC/D;AACA;AAAA;AAAA;AAAA;AAAA;AApII,cAxLiB,UAwLV,kBAAiB;ACrM5B,UAAU,OAAO,gBAAgB,QAAQ;"}

package/dist/wje-chip.js

@@ -0,0 +1,76 @@
+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, { event } from "./wje-element.js";
+const styles = "/*\n[ WJ Chip ]\n*/\n\n.native-chip {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    font-size: 14px;\n    letter-spacing: -0.006em;\n    margin: 0;\n    padding: 0.5rem 0.75rem;\n    text-align: center;\n    cursor: pointer;\n    white-space: nowrap;\n    text-shadow: none;\n    box-shadow: none;\n    border: 0 none;\n    line-height: 14px;\n    min-height: 28px;\n    height: 28px;\n    width: 100%;\n    max-width: fit-content;\n    min-width: 28px;\n    position: relative;\n    transition: width 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n    border-radius: var(--wje-border-radius-pill);\n    overflow: hidden;\n    vertical-align: middle;\n    box-sizing: border-box;\n}\n\n:host(.focus) {\n    box-shadow: none;\n}\n\n:host(.wje-active) .native-chip {\n    border: 1px solid var(--wje-color-primary-11);\n    background-color: var(--wje-color-contrast-3);\n    color: var(--wje-color);\n}\n\n:host(:focus, :active:focus, .wje-active:focus) {\n    outline: none !important;\n}\n\n.check {\n    display: none;\n}\n\n:host([active]) {\n    .check {\n        display: block;\n        margin-inline: 4px 0;\n    }\n}\n\n:host([disabled]) {\n    opacity: 0.5;\n    border: 0;\n    pointer-events: none;\n    cursor: not-allowed;\n}\n\n::slotted(wje-avatar) {\n    width: 22px;\n    height: 22px;\n}\n\n::slotted(wje-avatar:first-child) {\n    margin-inline: -8px 8px;\n    margin-top: -4px;\n    margin-bottom: -4px;\n}\n\n::slotted(wje-icon:first-child) {\n    margin: -4px 8px -4px -4px;\n}\n\n::slotted(wje-icon:last-child) {\n    margin: -4px -4px -4px 8px;\n}\n\nwje-button {\n    --wje-button-border-radius: 50%;\n    --wje-button-margin-inline: 0.25rem -0.5rem;\n    --wje-padding-top: 0.15rem;\n    --wje-padding-start: 0.15rem;\n    --wje-padding-end: 0.15rem;\n    --wje-padding-bottom: 0.15rem;\n}\n\n/*BG - TEXT*/\n.native-chip.wje-color-primary {\n    background-color: var(--wje-color-primary-1);\n    color: var(--wje-color-primary-9);\n}\n\n.native-chip.wje-color-complete {\n    background-color: var(--wje-color-complete-1);\n    color: var(--wje-color-complete-9);\n}\n\n.native-chip.wje-color-success {\n    background-color: var(--wje-color-success-1);\n    color: var(--wje-color-success-9);\n}\n\n.native-chip.wje-color-warning {\n    background-color: var(--wje-color-warning-2);\n    color: var(--wje-color-warning-11);\n}\n\n.native-chip.wje-color-danger {\n    background-color: var(--wje-color-danger-1);\n    color: var(--wje-color-danger-9);\n}\n\n.native-chip.wje-color-info {\n    background-color: var(--wje-color-info-1);\n    color: var(--wje-color-info-9);\n}\n\n.native-chip.wje-color-default {\n    background-color: var(--wje-color-contrast-3);\n    color: var(--wje-color-contrast-11);\n}\n\n/*HOVER*/\n@media (any-hover: hover) {\n    .native-chip.wje-color-primary:hover {\n        background-color: var(--wje-color-primary-4);\n        color: var(--wje-color-primary-10);\n    }\n\n    .native-chip.wje-color-complete:hover {\n        background-color: var(--wje-color-complete-4);\n        color: var(--wje-color-complete-10);\n    }\n\n    .native-chip.wje-color-success:hover {\n        background-color: var(--wje-color-success-4);\n        color: var(--wje-color-success-10);\n    }\n\n    .native-chip.wje-color-warning:hover {\n        background-color: var(--wje-color-warning-4);\n        color: var(--wje-color-warning-11);\n    }\n\n    .native-chip.wje-color-danger:hover {\n        background-color: var(--wje-color-danger-4);\n        color: var(--wje-color-danger-10);\n    }\n\n    .native-chip.wje-color-info:hover {\n        background-color: var(--wje-color-info-4);\n        color: var(--wje-color-info-10);\n    }\n\n    .native-chip.wje-color-default:hover {\n        background-color: var(--wje-color-contrast-4);\n        color: var(--wje-color-contrast-11);\n    }\n}\n";
+class Chip extends WJElement {
+  /**
+   * Chip constructor method.
+   */
+  constructor() {
+    super();
+    /**
+     * Class name for the Chip element.
+     * @type {string}
+     */
+    __publicField(this, "className", "Chip");
+  }
+  /**
+   * Getter for the CSS stylesheet.
+   * @returns {*}
+   */
+  static get cssStyleSheet() {
+    return styles;
+  }
+  /**
+   * Getter for the observed attributes.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Draws the Chip element.
+   * @returns {DocumentFragment}
+   */
+  draw() {
+    let fragment = document.createDocumentFragment();
+    let native = document.createElement("div");
+    native.classList.add("native-chip");
+    let slot = document.createElement("slot");
+    let remove = document.createElement("wje-button");
+    remove.setAttribute("part", "remove");
+    remove.setAttribute("fill", "link");
+    remove.setAttribute("color", this.color || "default");
+    remove.innerHTML = `<wje-icon name="x"></wje-icon>`;
+    let active = document.createElement("wje-icon");
+    active.setAttribute("name", "check");
+    active.classList.add("check");
+    if (this.hasAttribute("color")) native.classList.add("wje-color-" + this.color, "wje-color");
+    else native.classList.add("wje-color-default", "wje-color");
+    if (this.disabled) this.classList.add("wje-disabled");
+    if (this.outline) this.classList.add("wje-outline");
+    native.appendChild(slot);
+    native.appendChild(active);
+    if (this.hasAttribute("removable")) native.appendChild(remove);
+    fragment.appendChild(native);
+    this.removeElement = remove;
+    return fragment;
+  }
+  /**
+   * Getter for the observed attributes.
+   */
+  afterDraw() {
+    event.addListener(this.removeElement, "click", "wje:chip-remove", null, { stopPropagation: true });
+  }
+  /**
+   * Before disconnect event for the Chip element.
+   */
+  beforeDisconnect() {
+    event.removeListener(this.removeElement, "click", "wje:chip-remove");
+  }
+}
+WJElement.define("wje-chip", Chip);
+export {
+  Chip as default
+};
+//# sourceMappingURL=wje-chip.js.map

package/dist/wje-chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-chip.js","sources":["../packages/wje-chip/chip.element.js","../packages/wje-chip/chip.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-chip:remove\".\n * It is triggered when the remove button is clicked, which happens when the chip is removed.\n * The event is dispatched on the current instance of the Chip class.\n * @documentation https://elements.webjet.sk/components/chip\n * @status stable\n * @augments WJElement\n * @slot - The chip main content.\n * @csspart native - The component's native wrapper.\n * //@fires wje-chip:remove - Dispatched when the chip is removed;\n */\nexport default class Chip extends WJElement {\n    /**\n     * Chip constructor method.\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Class name for the Chip element.\n     * @type {string}\n     */\n    className = 'Chip';\n\n    /**\n     * Getter for the CSS stylesheet.\n     * @returns {*}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the Chip element.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.classList.add('native-chip');\n\n        let slot = document.createElement('slot');\n\n        let remove = document.createElement('wje-button');\n        remove.setAttribute('part', 'remove');\n        remove.setAttribute('fill', 'link');\n        remove.setAttribute('color', this.color || 'default');\n        remove.innerHTML = `<wje-icon name=\"x\"></wje-icon>`;\n\n        let active = document.createElement('wje-icon');\n        active.setAttribute('name', 'check');\n        active.classList.add('check');\n\n        // Add color\n        if (this.hasAttribute('color')) native.classList.add('wje-color-' + this.color, 'wje-color');\n        else native.classList.add('wje-color-default', 'wje-color');\n\n        if (this.disabled) this.classList.add('wje-disabled');\n\n        if (this.outline) this.classList.add('wje-outline');\n\n        native.appendChild(slot);\n        native.appendChild(active);\n\n        if (this.hasAttribute('removable')) native.appendChild(remove);\n\n        fragment.appendChild(native);\n\n        this.removeElement = remove;\n        return fragment;\n    }\n\n    /**\n     * Getter for the observed attributes.\n     */\n    afterDraw() {\n        event.addListener(this.removeElement, 'click', 'wje:chip-remove', null, { stopPropagation: true });\n    }\n\n    /**\n     * Before disconnect event for the Chip element.\n     */\n    beforeDisconnect() {\n        event.removeListener(this.removeElement, 'click', 'wje:chip-remove');\n    }\n}\n","import { default as WJElement } from '../wje-element/element.js';\nimport Chip from './chip.element.js';\n\n// export * from \"./chip.element.js\";\nexport default Chip;\n\nWJElement.define('wje-chip', Chip);\n"],"names":[],"mappings":";;;;;AAce,MAAM,aAAa,UAAU;AAAA;AAAA;AAAA;AAAA,EAIxC,cAAc;AACV,UAAO;AAOX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANhB;AAAA;AAAA;AAAA;AAAA;AAAA,EAYI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,UAAU,IAAI,aAAa;AAElC,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,QAAI,SAAS,SAAS,cAAc,YAAY;AAChD,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,aAAa,QAAQ,MAAM;AAClC,WAAO,aAAa,SAAS,KAAK,SAAS,SAAS;AACpD,WAAO,YAAY;AAEnB,QAAI,SAAS,SAAS,cAAc,UAAU;AAC9C,WAAO,aAAa,QAAQ,OAAO;AACnC,WAAO,UAAU,IAAI,OAAO;AAG5B,QAAI,KAAK,aAAa,OAAO,EAAG,QAAO,UAAU,IAAI,eAAe,KAAK,OAAO,WAAW;AAAA,QACtF,QAAO,UAAU,IAAI,qBAAqB,WAAW;AAE1D,QAAI,KAAK,SAAU,MAAK,UAAU,IAAI,cAAc;AAEpD,QAAI,KAAK,QAAS,MAAK,UAAU,IAAI,aAAa;AAElD,WAAO,YAAY,IAAI;AACvB,WAAO,YAAY,MAAM;AAEzB,QAAI,KAAK,aAAa,WAAW,EAAG,QAAO,YAAY,MAAM;AAE7D,aAAS,YAAY,MAAM;AAE3B,SAAK,gBAAgB;AACrB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,UAAM,YAAY,KAAK,eAAe,SAAS,mBAAmB,MAAM,EAAE,iBAAiB,MAAM;AAAA,EACzG;AAAA;AAAA;AAAA;AAAA,EAKI,mBAAmB;AACf,UAAM,eAAe,KAAK,eAAe,SAAS,iBAAiB;AAAA,EAC3E;AACA;AC3FA,UAAU,OAAO,YAAY,IAAI;"}