wj-elements 0.7.6 → 0.8.0

package/dist/wje-option.js

@@ -7,154 +7,28 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
 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 __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _Option_instances, isCheckbox_fn, setCheckbox_fn;
-import WJElement from "./wje-element.js";
-import { I as Icon } from "./icon-CReYMzAK.js";
-import Checkbox from "./wje-checkbox.js";
-import { event } from "./event.js";
-const styles = `/*
-[ WJ Option ]
-*/
-
-:host {
-    display: block;
-
-    .end-slot {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        justify-self: end;
-        align-self: center;
-        min-width: var(--wje-option-end-slot-min-width, 2rem);
-        margin-inline-start: 0.5rem;
-        pointer-events: auto;
-        z-index: 1;
-    }
-}
-
-::slotted(wje-icon[slot="check"]) {
-    visibility: hidden;
-    margin-inline: 0.5rem;
-}
-
-::slotted(wje-checkbox[slot="check"]) {
-    margin-inline: 0.5rem 0;
-    margin-block: 0;
-}
-
-slot[name='check'] {
-    flex: 0 0 auto;
-    display: inline-flex;
-    align-items: center;
-}
-
-slot[name='start'] {
-    display: inline-flex;
-    align-items: center;
-    min-width: 0;
-}
-
-slot:not([name]) {
-    display: block;
-    min-width: 0;
-    overflow-wrap: break-word;
-}
-
-::slotted([slot='check']) {
-    flex: 0 0 auto;
-    flex-shrink: 0;
-}
-
-:host([selected]) {
-    ::slotted([slot='check']) {
-        visibility: visible;
-    }
-    wje-checkbox {
-        visibility: visible;
-    }
-}
-
-:host([disabled]) {
-    background-color: lightgray;
-    opacity: 0.3;
-    pointer-events: none;
-    cursor: not-allowed;
-}
-
-.native-option {
-    display: grid;
-    grid-template-columns: auto auto minmax(0, 1fr) auto;
-    align-items: center;
-    padding-top: var(--wje-option-padding-top);
-    padding-bottom: var(--wje-option-padding-bottom);
-    position: relative;
-}
-
-.native-option:hover {
-    background-color: var(--wje-option-highlighted);
-}
-
-::slotted([slot='start']) {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    margin-inline-end: 0.5rem;
-}
-
-::slotted([slot='end']) {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    margin-inline: 0.5rem;
-}
-`;
-class Option extends WJElement {
-  /**
-   * Creates an instance of Option.
-   * @class
-   */
+var _n_instances, t_fn, e_fn;
+import e from "./wje-element.js";
+import { I as t } from "./icon-DmsqtDpL.js";
+import i from "./wje-checkbox.js";
+import { event as s } from "./event.js";
+class n extends e {
   constructor() {
     super();
-    __privateAdd(this, _Option_instances);
-    /**
-     * Dependencies of the Option component.
-     */
-    __publicField(this, "dependencies", {
-      "wje-icon": Icon,
-      "wje-checkbox": Checkbox
-    });
+    __privateAdd(this, _n_instances);
+    __publicField(this, "dependencies", { "wje-icon": t, "wje-checkbox": i });
     __publicField(this, "className", "Option");
   }
-  /**
-   * Sets the selected attribute of the option.
-   * @param {boolean} value The value to set.
-   */
-  set selected(value) {
-    if (value) {
-      this.setAttribute("selected", "");
-    } else {
-      this.removeAttribute("selected");
-    }
+  set selected(e2) {
+    e2 ? this.setAttribute("selected", "") : this.removeAttribute("selected");
   }
-  /**
-   * Retrieves the 'selected' attribute status of the element.
-   * @returns {boolean} Returns true if the 'selected' attribute is set on the element; otherwise, false.
-   */
   get selected() {
     return this.hasAttribute("selected");
   }
-  /**
-   * Retrieves the value indicating whether the closest 'wje-select' element has a 'checkbox' attribute.
-   * @returns {boolean} True if the closest 'wje-select' element has a 'checkbox' attribute; otherwise, false.
-   */
   get checkbox() {
     var _a;
     return (_a = this.ownerSelect) == null ? void 0 : _a.hasAttribute("checkbox");
   }
-  /**
-   * Determines whether the closest 'wje-select' element has the 'multiple' attribute.
-   * @returns {boolean} Returns true if the 'wje-select' element has the 'multiple' attribute, otherwise false.
-   */
   get multiple() {
     var _a;
     return ((_a = this.ownerSelect) == null ? void 0 : _a.hasAttribute("multiple")) || false;
@@ -162,176 +36,71 @@ class Option extends WJElement {
   get ownerSelect() {
     return this._ownerSelect || this.closest("wje-select");
   }
-  set ownerSelect(value) {
-    this._ownerSelect = value;
+  set ownerSelect(e2) {
+    this._ownerSelect = e2;
   }
-  /**
-   * Sets the value attribute of the option.
-   * @param {string} value The value to set.
-   */
-  set value(value) {
-    this.setAttribute("value", value);
+  set value(e2) {
+    this.setAttribute("value", e2);
   }
   get value() {
     return this.getAttribute("value");
   }
-  /**
-   * Sets the text content of the option.
-   * @param {string} value The text to set.
-   */
-  set text(value) {
-    this.innerText = value;
+  set text(e2) {
+    this.innerText = e2;
   }
-  /**
-   * Returns the CSS styles for the component.
-   * @static
-   * @returns {CSSStyleSheet}
-   */
   static get cssStyleSheet() {
-    return styles;
+    return ':host{display:block}:host .end-slot{display:inline-flex;align-items:center;justify-content:center;justify-self:end;align-self:center;min-width:var(--wje-option-end-slot-min-width, 2rem);margin-inline-start:.5rem;pointer-events:auto;z-index:1}::slotted(wje-icon[slot="check"]){visibility:hidden;margin-inline:.5rem}::slotted(wje-checkbox[slot="check"]){margin-inline:.5rem 0;margin-block:0}slot[name=check]{flex:0 0 auto;display:inline-flex;align-items:center}slot[name=start]{display:inline-flex;align-items:center;min-width:0}slot:not([name]){display:block;min-width:0;overflow-wrap:break-word}::slotted([slot="check"]){flex:0 0 auto;flex-shrink:0}:host([selected]) ::slotted([slot="check"]){visibility:visible}:host([selected]) wje-checkbox{visibility:visible}:host([disabled]){background-color:#d3d3d3;opacity:.3;pointer-events:none;cursor:not-allowed}.native-option{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;padding-top:var(--wje-option-padding-top);padding-bottom:var(--wje-option-padding-bottom);position:relative}.native-option:hover{background-color:var(--wje-option-highlighted)}::slotted([slot="start"]){flex:0 0 auto;display:flex;align-items:center;margin-inline-end:.5rem}::slotted([slot="end"]){flex:0 0 auto;display:flex;align-items:center;margin-inline:.5rem}';
   }
-  /**
-   * Returns the list of attributes to observe for changes.
-   * @static
-   * @returns {Array<string>}
-   */
   static get observedAttributes() {
     return ["selected"];
   }
-  /**
-   * This method is called whenever an observed attribute is added, removed, or changed.
-   * @param {string} name The name of the attribute that was changed.
-   * @param {*} old The previous value of the attribute before the change.
-   * @param {*} newName The new value of the attribute after the change.
-   * @returns {void} This method does not return a value.
-   */
-  attributeChangedCallback(name, old, newName) {
-    if (this.checkbox) {
-      if (name === "selected" && newName !== null) {
-        __privateMethod(this, _Option_instances, setCheckbox_fn).call(this, true);
-      } else {
-        __privateMethod(this, _Option_instances, setCheckbox_fn).call(this, false);
-      }
-    }
-    this.syncAria();
+  attributeChangedCallback(e2, t2, i2) {
+    this.checkbox && ("selected" === e2 && null !== i2 ? __privateMethod(this, _n_instances, e_fn).call(this, true) : __privateMethod(this, _n_instances, e_fn).call(this, false)), this.syncAria();
   }
-  /**
-   * Sets up the attributes for the component.
-   */
   setupAttributes() {
-    this.isShadowRoot = "open";
-    this.syncAria();
+    this.isShadowRoot = "open", this.syncAria();
   }
-  /**
-   * Draws the component for the option.
-   * @returns {DocumentFragment}
-   */
   draw() {
-    let fragment = document.createDocumentFragment();
-    let native = document.createElement("div");
-    native.classList.add("native-option");
-    native.setAttribute("part", "native");
-    let icon = document.createElement("wje-icon");
-    icon.setAttribute("name", "check");
-    icon.setAttribute("slot", "check");
-    let checkboxEl = document.createElement("wje-checkbox");
-    checkboxEl.setAttribute("slot", "check");
-    let check = document.createElement("slot");
-    check.setAttribute("name", "check");
-    check.setAttribute("part", "check");
-    let start = document.createElement("slot");
-    start.setAttribute("name", "start");
-    let slot = document.createElement("slot");
-    let endWrapper = document.createElement("span");
-    endWrapper.classList.add("end-slot");
-    let end = document.createElement("slot");
-    end.setAttribute("name", "end");
-    endWrapper.append(end);
-    const hasCheckSlot = this.querySelector('[slot="check"]') !== null;
-    if (!hasCheckSlot) {
-      if (this.checkbox && this.multiple) {
-        this.append(checkboxEl);
-      } else {
-        this.append(icon);
-      }
-    }
-    native.append(check);
-    native.append(start);
-    native.append(slot);
-    native.append(endWrapper);
-    fragment.append(native);
-    this.check = check;
-    return fragment;
+    let e2 = document.createDocumentFragment(), t2 = document.createElement("div");
+    t2.classList.add("native-option"), t2.setAttribute("part", "native");
+    let i2 = document.createElement("wje-icon");
+    i2.setAttribute("name", "check"), i2.setAttribute("slot", "check");
+    let s2 = document.createElement("wje-checkbox");
+    s2.setAttribute("slot", "check");
+    let n2 = document.createElement("slot");
+    n2.setAttribute("name", "check"), n2.setAttribute("part", "check");
+    let o = document.createElement("slot");
+    o.setAttribute("name", "start");
+    let l = document.createElement("slot"), c = document.createElement("span");
+    c.classList.add("end-slot");
+    let a = document.createElement("slot");
+    a.setAttribute("name", "end"), c.append(a);
+    return null !== this.querySelector('[slot="check"]') || (this.checkbox && this.multiple ? this.append(s2) : this.append(i2)), t2.append(n2), t2.append(o), t2.append(l), t2.append(c), e2.append(t2), this.check = n2, e2;
   }
-  /**
-   * Method executed after the drawing process is completed.
-   * Sets up an event listener for 'click' events, linking them to the specified callback function.
-   * @returns {void} Does not return a value.
-   */
   afterDraw() {
-    event.addListener(this, "click", null, this.optionClickCallback);
-    if (this.checkbox && this.multiple) {
-      __privateMethod(this, _Option_instances, setCheckbox_fn).call(this, this.selected);
-    }
-    this.syncAria();
+    s.addListener(this, "click", null, this.optionClickCallback), this.checkbox && this.multiple && __privateMethod(this, _n_instances, e_fn).call(this, this.selected), this.syncAria();
   }
-  /**
-   * Syncs ARIA attributes on the host element.
-   */
   syncAria() {
-    this.setAriaState({
-      role: "option",
-      selected: this.selected,
-      disabled: this.hasAttribute("disabled")
-    });
+    this.setAriaState({ role: "option", selected: this.selected, disabled: this.hasAttribute("disabled") });
   }
-  /**
-   * Handles operations or cleanup tasks that need to occur before disconnecting.
-   * Removes an event listener associated with the 'click' event and a specified callback function.
-   * @returns {void} This method does not return a value.
-   */
   beforeDisconnect() {
-    event.removeListener(this, "click", null, this.optionClickCallback);
+    s.removeListener(this, "click", null, this.optionClickCallback);
   }
-  /**
-   * Handles the click event on an option element and dispatches a custom event when triggered.
-   * @param {Event} e The click event object that triggered the callback.
-   * @returns {void} No return value.
-   */
-  optionClickCallback(e) {
-    e.preventDefault();
-    e.stopPropagation();
-    e.stopImmediatePropagation();
-    if (this.hasAttribute("disabled")) return;
-    event.dispatchCustomEvent(this, "wje-option:change", {
-      value: this.value,
-      text: this.textContent,
-      option: this
-    });
+  optionClickCallback(e2) {
+    e2.preventDefault(), e2.stopPropagation(), e2.stopImmediatePropagation(), this.hasAttribute("disabled") || s.dispatchCustomEvent(this, "wje-option:change", { value: this.value, text: this.textContent, option: this });
   }
 }
-_Option_instances = new WeakSet();
-/**
- * Checks if the given DOM node represents a checkbox element.
- * @param {Node} node The DOM node to be checked.
- * @returns {boolean} Returns true if the node is an element with a class name of 'Checkbox', otherwise false.
- */
-isCheckbox_fn = function(node) {
-  return node instanceof Element && node.className === "Checkbox";
+_n_instances = new WeakSet();
+t_fn = function(e2) {
+  return e2 instanceof Element && "Checkbox" === e2.className;
 };
-/**
- * Updates the checked status of the first checkbox element found within the assigned elements of the specified container.
- * @param {boolean} checked The desired checked state to be applied to the checkbox.
- * @returns {void}
- */
-setCheckbox_fn = function(checked) {
+e_fn = function(e2) {
   var _a;
-  const assigned = ((_a = this.check) == null ? void 0 : _a.assignedElements({ flatten: true })) ?? [];
-  const arr = assigned.filter((item) => __privateMethod(this, _Option_instances, isCheckbox_fn).call(this, item));
-  if (arr.length > 0) arr[0].checked = checked;
+  const t2 = (((_a = this.check) == null ? void 0 : _a.assignedElements({ flatten: true })) ?? []).filter((e3) => __privateMethod(this, _n_instances, t_fn).call(this, e3));
+  t2.length > 0 && (t2[0].checked = e2);
 };
-Option.define("wje-option", Option);
+n.define("wje-option", n);
 export {
-  Option as default
+  n as default
 };
 //# sourceMappingURL=wje-option.js.map

package/dist/wje-option.js.map

@@ -1 +1 @@
-{"version":3,"file":"wje-option.js","sources":["../packages/wje-option/option.element.js","../packages/wje-option/option.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport Icon from '../wje-icon/icon.js';\nimport Checkbox from '../wje-checkbox/checkbox.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Option` is a custom web component that represents an option.\n * @summary This element represents an option.\n * @documentation https://elements.webjet.sk/components/option\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part of the option.\n * @slot start - The slot for the start of the option.\n * @slot - The default slot for the option.\n * @slot end - The slot for the end of the option.\n * // @fires wje-option:change - Event fired when the option is clicked.\n * @tag wje-option\n */\nexport default class Option extends WJElement {\n\t/**\n\t * Creates an instance of Option.\n\t * @class\n\t */\n\tconstructor() {\n\t\tsuper();\n\t}\n\n\t/**\n\t * Dependencies of the Option component.\n\t */\n\tdependencies = {\n\t\t'wje-icon': Icon,\n\t\t'wje-checkbox': Checkbox,\n\t};\n\n\t/**\n\t * Sets the selected attribute of the option.\n\t * @param {boolean} value The value to set.\n\t */\n\tset selected(value) {\n\t\tif (value) {\n\t\t\tthis.setAttribute('selected', '');\n\t\t} else {\n\t\t\tthis.removeAttribute('selected');\n\t\t}\n\t}\n\n\t/**\n\t * Retrieves the 'selected' attribute status of the element.\n\t * @returns {boolean} Returns true if the 'selected' attribute is set on the element; otherwise, false.\n\t */\n\tget selected() {\n\t\treturn this.hasAttribute('selected');\n\t}\n\n\t/**\n\t * Retrieves the value indicating whether the closest 'wje-select' element has a 'checkbox' attribute.\n\t * @returns {boolean} True if the closest 'wje-select' element has a 'checkbox' attribute; otherwise, false.\n\t */\n\tget checkbox() {\n\t\treturn this.ownerSelect?.hasAttribute('checkbox');\n\t}\n\n\t/**\n\t * Determines whether the closest 'wje-select' element has the 'multiple' attribute.\n\t * @returns {boolean} Returns true if the 'wje-select' element has the 'multiple' attribute, otherwise false.\n\t */\n\tget multiple() {\n\t\treturn this.ownerSelect?.hasAttribute('multiple') || false;\n\t}\n\n\tget ownerSelect() {\n\t\treturn this._ownerSelect || this.closest('wje-select');\n\t}\n\n\tset ownerSelect(value) {\n\t\tthis._ownerSelect = value;\n\t}\n\n\t/**\n\t * Sets the value attribute of the option.\n\t * @param {string} value The value to set.\n\t */\n\tset value(value) {\n\t\tthis.setAttribute('value', value);\n\t}\n\n\tget value() {\n\t\treturn this.getAttribute('value');\n\t}\n\n\t/**\n\t * Sets the text content of the option.\n\t * @param {string} value The text to set.\n\t */\n\tset text(value) {\n\t\tthis.innerText = value;\n\t}\n\n\tclassName = 'Option';\n\n\t/**\n\t * Returns the CSS styles for the component.\n\t * @static\n\t * @returns {CSSStyleSheet}\n\t */\n\tstatic get cssStyleSheet() {\n\t\treturn styles;\n\t}\n\n\t/**\n\t * Returns the list of attributes to observe for changes.\n\t * @static\n\t * @returns {Array<string>}\n\t */\n\tstatic get observedAttributes() {\n\t\treturn ['selected'];\n\t}\n\n\t/**\n\t * This method is called whenever an observed attribute is added, removed, or changed.\n\t * @param {string} name The name of the attribute that was changed.\n\t * @param {*} old The previous value of the attribute before the change.\n\t * @param {*} newName The new value of the attribute after the change.\n\t * @returns {void} This method does not return a value.\n\t */\n\tattributeChangedCallback(name, old, newName) {\n\t\tif (this.checkbox) {\n\t\t\tif (name === 'selected' && newName !== null) {\n\t\t\t\tthis.#setCheckbox(true);\n\t\t\t} else {\n\t\t\t\tthis.#setCheckbox(false);\n\t\t\t}\n\t\t}\n\t\tthis.syncAria();\n\t}\n\n\t/**\n\t * Sets up the attributes for the component.\n\t */\n\tsetupAttributes() {\n\t\tthis.isShadowRoot = 'open';\n\t\tthis.syncAria();\n\t}\n\n\t/**\n\t * Draws the component for the option.\n\t * @returns {DocumentFragment}\n\t */\n\tdraw() {\n\t\tlet fragment = document.createDocumentFragment();\n\n\t\tlet native = document.createElement('div');\n\t\tnative.classList.add('native-option');\n\t\tnative.setAttribute('part', 'native');\n\n\t\tlet icon = document.createElement('wje-icon');\n\t\ticon.setAttribute('name', 'check');\n\t\ticon.setAttribute('slot', 'check');\n\n\t\tlet checkboxEl = document.createElement('wje-checkbox');\n\t\tcheckboxEl.setAttribute('slot', 'check');\n\n\t\tlet check = document.createElement('slot');\n\t\tcheck.setAttribute('name', 'check');\n\t\tcheck.setAttribute('part', 'check');\n\n\t\tlet start = document.createElement('slot');\n\t\tstart.setAttribute('name', 'start');\n\n\t\tlet slot = document.createElement('slot');\n\n\t\tlet endWrapper = document.createElement('span');\n\t\tendWrapper.classList.add('end-slot');\n\n\t\tlet end = document.createElement('slot');\n\t\tend.setAttribute('name', 'end');\n\n\t\tendWrapper.append(end);\n\n\t\tconst hasCheckSlot = this.querySelector('[slot=\"check\"]') !== null;\n\n\t\tif (!hasCheckSlot) {\n\t\t\tif (this.checkbox && this.multiple) {\n\t\t\t\tthis.append(checkboxEl);\n\t\t\t} else {\n\t\t\t\tthis.append(icon);\n\t\t\t}\n\t\t}\n\n\t\tnative.append(check);\n\t\tnative.append(start);\n\t\tnative.append(slot);\n\t\tnative.append(endWrapper);\n\n\t\tfragment.append(native);\n\n\t\tthis.check = check;\n\n\t\treturn fragment;\n\t}\n\n\t/**\n\t * Method executed after the drawing process is completed.\n\t * Sets up an event listener for 'click' events, linking them to the specified callback function.\n\t * @returns {void} Does not return a value.\n\t */\n\tafterDraw() {\n\t\tevent.addListener(this, 'click', null, this.optionClickCallback);\n\n\t\t// If `selected` was set before render, attributeChangedCallback may have run\n\t\t// before `this.check` existed. Sync the checkbox state once slots exist.\n\t\tif (this.checkbox && this.multiple) {\n\t\t\tthis.#setCheckbox(this.selected);\n\t\t}\n\t\tthis.syncAria();\n\t}\n\n\t/**\n\t * Syncs ARIA attributes on the host element.\n\t */\n\tsyncAria() {\n\t\tthis.setAriaState({\n\t\t\trole: 'option',\n\t\t\tselected: this.selected,\n\t\t\tdisabled: this.hasAttribute('disabled'),\n\t\t});\n\t}\n\n\t/**\n\t * Handles operations or cleanup tasks that need to occur before disconnecting.\n\t * Removes an event listener associated with the 'click' event and a specified callback function.\n\t * @returns {void} This method does not return a value.\n\t */\n\tbeforeDisconnect() {\n\t\tevent.removeListener(this, 'click', null, this.optionClickCallback);\n\t}\n\n\t/**\n\t * Handles the click event on an option element and dispatches a custom event when triggered.\n\t * @param {Event} e The click event object that triggered the callback.\n\t * @returns {void} No return value.\n\t */\n\toptionClickCallback(e) {\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t\te.stopImmediatePropagation();\n\n\t\tif (this.hasAttribute('disabled')) return;\n\n\t\tevent.dispatchCustomEvent(this, 'wje-option:change', {\n\t\t\tvalue: this.value,\n\t\t\ttext: this.textContent,\n\t\t\toption: this,\n\t\t});\n\t}\n\n\t/**\n\t * Checks if the given DOM node represents a checkbox element.\n\t * @param {Node} node The DOM node to be checked.\n\t * @returns {boolean} Returns true if the node is an element with a class name of 'Checkbox', otherwise false.\n\t */\n\t#isCheckbox(node) {\n\t\treturn node instanceof Element && node.className === 'Checkbox';\n\t}\n\n\t/**\n\t * Updates the checked status of the first checkbox element found within the assigned elements of the specified container.\n\t * @param {boolean} checked The desired checked state to be applied to the checkbox.\n\t * @returns {void}\n\t */\n\t#setCheckbox(checked) {\n\t\tconst assigned = this.check?.assignedElements({ flatten: true }) ?? [];\n\t\tconst arr = assigned.filter((item) => this.#isCheckbox(item));\n\t\tif (arr.length > 0) arr[0].checked = checked;\n\t}\n}\n","import Option from './option.element.js';\n\nexport default Option;\n\nOption.define('wje-option', Option);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"wje-option.js","sources":["../packages/wje-option/option.element.js","../packages/wje-option/option.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport Icon from '../wje-icon/icon.js';\nimport Checkbox from '../wje-checkbox/checkbox.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * `Option` is a custom web component that represents an option.\n * @summary This element represents an option.\n * @documentation https://elements.webjet.sk/components/option\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part of the option.\n * @slot start - The slot for the start of the option.\n * @slot - The default slot for the option.\n * @slot end - The slot for the end of the option.\n * // @fires wje-option:change - Event fired when the option is clicked.\n * @tag wje-option\n */\nexport default class Option extends WJElement {\n\t/**\n\t * Creates an instance of Option.\n\t * @class\n\t */\n\tconstructor() {\n\t\tsuper();\n\t}\n\n\t/**\n\t * Dependencies of the Option component.\n\t */\n\tdependencies = {\n\t\t'wje-icon': Icon,\n\t\t'wje-checkbox': Checkbox,\n\t};\n\n\t/**\n\t * Sets the selected attribute of the option.\n\t * @param {boolean} value The value to set.\n\t */\n\tset selected(value) {\n\t\tif (value) {\n\t\t\tthis.setAttribute('selected', '');\n\t\t} else {\n\t\t\tthis.removeAttribute('selected');\n\t\t}\n\t}\n\n\t/**\n\t * Retrieves the 'selected' attribute status of the element.\n\t * @returns {boolean} Returns true if the 'selected' attribute is set on the element; otherwise, false.\n\t */\n\tget selected() {\n\t\treturn this.hasAttribute('selected');\n\t}\n\n\t/**\n\t * Retrieves the value indicating whether the closest 'wje-select' element has a 'checkbox' attribute.\n\t * @returns {boolean} True if the closest 'wje-select' element has a 'checkbox' attribute; otherwise, false.\n\t */\n\tget checkbox() {\n\t\treturn this.ownerSelect?.hasAttribute('checkbox');\n\t}\n\n\t/**\n\t * Determines whether the closest 'wje-select' element has the 'multiple' attribute.\n\t * @returns {boolean} Returns true if the 'wje-select' element has the 'multiple' attribute, otherwise false.\n\t */\n\tget multiple() {\n\t\treturn this.ownerSelect?.hasAttribute('multiple') || false;\n\t}\n\n\tget ownerSelect() {\n\t\treturn this._ownerSelect || this.closest('wje-select');\n\t}\n\n\tset ownerSelect(value) {\n\t\tthis._ownerSelect = value;\n\t}\n\n\t/**\n\t * Sets the value attribute of the option.\n\t * @param {string} value The value to set.\n\t */\n\tset value(value) {\n\t\tthis.setAttribute('value', value);\n\t}\n\n\tget value() {\n\t\treturn this.getAttribute('value');\n\t}\n\n\t/**\n\t * Sets the text content of the option.\n\t * @param {string} value The text to set.\n\t */\n\tset text(value) {\n\t\tthis.innerText = value;\n\t}\n\n\tclassName = 'Option';\n\n\t/**\n\t * Returns the CSS styles for the component.\n\t * @static\n\t * @returns {CSSStyleSheet}\n\t */\n\tstatic get cssStyleSheet() {\n\t\treturn styles;\n\t}\n\n\t/**\n\t * Returns the list of attributes to observe for changes.\n\t * @static\n\t * @returns {Array<string>}\n\t */\n\tstatic get observedAttributes() {\n\t\treturn ['selected'];\n\t}\n\n\t/**\n\t * This method is called whenever an observed attribute is added, removed, or changed.\n\t * @param {string} name The name of the attribute that was changed.\n\t * @param {*} old The previous value of the attribute before the change.\n\t * @param {*} newName The new value of the attribute after the change.\n\t * @returns {void} This method does not return a value.\n\t */\n\tattributeChangedCallback(name, old, newName) {\n\t\tif (this.checkbox) {\n\t\t\tif (name === 'selected' && newName !== null) {\n\t\t\t\tthis.#setCheckbox(true);\n\t\t\t} else {\n\t\t\t\tthis.#setCheckbox(false);\n\t\t\t}\n\t\t}\n\t\tthis.syncAria();\n\t}\n\n\t/**\n\t * Sets up the attributes for the component.\n\t */\n\tsetupAttributes() {\n\t\tthis.isShadowRoot = 'open';\n\t\tthis.syncAria();\n\t}\n\n\t/**\n\t * Draws the component for the option.\n\t * @returns {DocumentFragment}\n\t */\n\tdraw() {\n\t\tlet fragment = document.createDocumentFragment();\n\n\t\tlet native = document.createElement('div');\n\t\tnative.classList.add('native-option');\n\t\tnative.setAttribute('part', 'native');\n\n\t\tlet icon = document.createElement('wje-icon');\n\t\ticon.setAttribute('name', 'check');\n\t\ticon.setAttribute('slot', 'check');\n\n\t\tlet checkboxEl = document.createElement('wje-checkbox');\n\t\tcheckboxEl.setAttribute('slot', 'check');\n\n\t\tlet check = document.createElement('slot');\n\t\tcheck.setAttribute('name', 'check');\n\t\tcheck.setAttribute('part', 'check');\n\n\t\tlet start = document.createElement('slot');\n\t\tstart.setAttribute('name', 'start');\n\n\t\tlet slot = document.createElement('slot');\n\n\t\tlet endWrapper = document.createElement('span');\n\t\tendWrapper.classList.add('end-slot');\n\n\t\tlet end = document.createElement('slot');\n\t\tend.setAttribute('name', 'end');\n\n\t\tendWrapper.append(end);\n\n\t\tconst hasCheckSlot = this.querySelector('[slot=\"check\"]') !== null;\n\n\t\tif (!hasCheckSlot) {\n\t\t\tif (this.checkbox && this.multiple) {\n\t\t\t\tthis.append(checkboxEl);\n\t\t\t} else {\n\t\t\t\tthis.append(icon);\n\t\t\t}\n\t\t}\n\n\t\tnative.append(check);\n\t\tnative.append(start);\n\t\tnative.append(slot);\n\t\tnative.append(endWrapper);\n\n\t\tfragment.append(native);\n\n\t\tthis.check = check;\n\n\t\treturn fragment;\n\t}\n\n\t/**\n\t * Method executed after the drawing process is completed.\n\t * Sets up an event listener for 'click' events, linking them to the specified callback function.\n\t * @returns {void} Does not return a value.\n\t */\n\tafterDraw() {\n\t\tevent.addListener(this, 'click', null, this.optionClickCallback);\n\n\t\t// If `selected` was set before render, attributeChangedCallback may have run\n\t\t// before `this.check` existed. Sync the checkbox state once slots exist.\n\t\tif (this.checkbox && this.multiple) {\n\t\t\tthis.#setCheckbox(this.selected);\n\t\t}\n\t\tthis.syncAria();\n\t}\n\n\t/**\n\t * Syncs ARIA attributes on the host element.\n\t */\n\tsyncAria() {\n\t\tthis.setAriaState({\n\t\t\trole: 'option',\n\t\t\tselected: this.selected,\n\t\t\tdisabled: this.hasAttribute('disabled'),\n\t\t});\n\t}\n\n\t/**\n\t * Handles operations or cleanup tasks that need to occur before disconnecting.\n\t * Removes an event listener associated with the 'click' event and a specified callback function.\n\t * @returns {void} This method does not return a value.\n\t */\n\tbeforeDisconnect() {\n\t\tevent.removeListener(this, 'click', null, this.optionClickCallback);\n\t}\n\n\t/**\n\t * Handles the click event on an option element and dispatches a custom event when triggered.\n\t * @param {Event} e The click event object that triggered the callback.\n\t * @returns {void} No return value.\n\t */\n\toptionClickCallback(e) {\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t\te.stopImmediatePropagation();\n\n\t\tif (this.hasAttribute('disabled')) return;\n\n\t\tevent.dispatchCustomEvent(this, 'wje-option:change', {\n\t\t\tvalue: this.value,\n\t\t\ttext: this.textContent,\n\t\t\toption: this,\n\t\t});\n\t}\n\n\t/**\n\t * Checks if the given DOM node represents a checkbox element.\n\t * @param {Node} node The DOM node to be checked.\n\t * @returns {boolean} Returns true if the node is an element with a class name of 'Checkbox', otherwise false.\n\t */\n\t#isCheckbox(node) {\n\t\treturn node instanceof Element && node.className === 'Checkbox';\n\t}\n\n\t/**\n\t * Updates the checked status of the first checkbox element found within the assigned elements of the specified container.\n\t * @param {boolean} checked The desired checked state to be applied to the checkbox.\n\t * @returns {void}\n\t */\n\t#setCheckbox(checked) {\n\t\tconst assigned = this.check?.assignedElements({ flatten: true }) ?? [];\n\t\tconst arr = assigned.filter((item) => this.#isCheckbox(item));\n\t\tif (arr.length > 0) arr[0].checked = checked;\n\t}\n}\n","import Option from './option.element.js';\n\nexport default Option;\n\nOption.define('wje-option', Option);\n"],"names":["Option","WJElement","constructor","super","dependencies","Icon","Checkbox","className","value","this","setAttribute","removeAttribute","selected","hasAttribute","checkbox","ownerSelect","multiple","_ownerSelect","closest","getAttribute","innerText","cssStyleSheet","observedAttributes","name","old","newName","setCheckbox","syncAria","setupAttributes","isShadowRoot","draw","fragment","document","createDocumentFragment","native","createElement","classList","add","icon","checkboxEl","check","start","slot","endWrapper","end","append","querySelector","afterDraw","event","addListener","optionClickCallback","setAriaState","role","disabled","beforeDisconnect","removeListener","e","preventDefault","stopPropagation","stopImmediatePropagation","dispatchCustomEvent","text","textContent","option","isCheckbox","node","Element","checked","arr","assignedElements","flatten","filter","item","length","define"],"mappings":"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"}