jebamo 0.0.1 → 0.0.2

package/dist/collection/components/radio/je-radio-group/je-radio-group.js

@@ -0,0 +1,172 @@
+import { Host, h } from "@stencil/core";
+export class JeRadioGroup {
+    constructor() {
+        this.label = undefined;
+        this.value = undefined;
+        this.readonly = false;
+        this.disabled = false;
+    }
+    componentWillLoad() {
+        if (this.label) {
+            this.el.setAttribute('name', this.label);
+        }
+    }
+    componentDidLoad() {
+        this.originalValue = this.value;
+        if (this.value) {
+            const radios = this.getRadios();
+            for (let item of radios) {
+                if (item.value === this.value) {
+                    item.selected = true;
+                }
+            }
+        }
+    }
+    formResetCallback() {
+        if (this.value !== this.originalValue) {
+            this.value = this.originalValue;
+        }
+    }
+    getRadios() {
+        const elements = this.el.querySelectorAll('je-radio');
+        return Array.from(elements);
+    }
+    handleValueChange() {
+        this.valueChange.emit(this.value);
+        const radios = this.getRadios();
+        for (let radio of radios) {
+            if (radio.value !== this.value && radio.selected !== false)
+                radio.selected = false;
+            else if (radio.value === this.value && radio.selected !== true)
+                radio.selected = true;
+        }
+    }
+    handleNewValue(ev) {
+        this.value = ev.detail;
+    }
+    render() {
+        return (h(Host, { key: '70e9947ae0ea7b3747ef0470b0ce0e9491f43129' }, this.label && h("label", { key: 'db3fec8de716f25e8a8cf6dcbcd0d272417940f2' }, this.label), h("slot", { key: 'c2a03fa6a99928087f2815e51e47ab1eb61dcaa8' })));
+    }
+    static get is() { return "je-radio-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["je-radio-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["je-radio-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label that shows above the controls"
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "value": {
+                "type": "any",
+                "mutable": true,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The currently selected value"
+                },
+                "attribute": "value",
+                "reflect": false
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows readonly state for all the controls and prevents changes"
+                },
+                "attribute": "readonly",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows disabled state for all the controls and prevents changes"
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits the selected value whenever it changes"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "radioSelect",
+                "method": "handleNewValue",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=je-radio-group.js.map

package/dist/collection/components/radio/je-radio-group/je-radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"je-radio-group.js","sourceRoot":"","sources":["../../../../src/components/radio/je-radio-group/je-radio-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAgB,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAQtG,MAAM,OAAO,YAAY;;;;wBAiBJ,KAAK;wBAKL,KAAK;;IAOxB,iBAAiB;QACf,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,CAAA;QAC1C,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;QAChC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;YAChC,KAAK,IAAI,IAAI,IAAI,MAAM,EAAE,CAAC;gBACxB,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;oBAC9B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;gBACvB,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,aAAa,EAAE,CAAC;YACtC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC;QAClC,CAAC;IACH,CAAC;IAEO,SAAS;QACf,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC;QACtD,OAAO,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC9B,CAAC;IAGD,iBAAiB;QACf,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAClC,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;QAChC,KAAK,IAAI,KAAK,IAAI,MAAM,EAAE,CAAC;YACzB,IAAI,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,QAAQ,KAAK,KAAK;gBACxD,KAAK,CAAC,QAAQ,GAAG,KAAK,CAAC;iBACpB,IAAI,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,QAAQ,KAAK,IAAI;gBAC5D,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC;QAC1B,CAAC;IACH,CAAC;IAGD,cAAc,CAAC,EAAoB;QACjC,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,MAAM,CAAC;IACzB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACF,IAAI,CAAC,KAAK,IAAI,gEAAQ,IAAI,CAAC,KAAK,CAAS;YAC1C,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Element, EventEmitter, Prop, Event, Watch, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'je-radio-group',\n  styleUrl: 'je-radio-group.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class JeRadioGroup {\n  @Element() el!: HTMLJeRadioGroupElement;\n  private originalValue?: any;\n\n  /**\n   * Label that shows above the controls\n   */\n  @Prop() label?: string;\n\n  /**\n   * The currently selected value\n   */\n  @Prop({ mutable: true }) value?: any;\n\n  /**\n   * Shows readonly state for all the controls and prevents changes\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Shows disabled state for all the controls and prevents changes\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Emits the selected value whenever it changes\n   */\n  @Event({ bubbles: false }) valueChange: EventEmitter<any>;\n\n  componentWillLoad() {\n    if (this.label) {\n      this.el.setAttribute('name', this.label)\n    }\n  }\n\n  componentDidLoad() {\n    this.originalValue = this.value;\n    if (this.value) {\n      const radios = this.getRadios();\n      for (let item of radios) {\n        if (item.value === this.value) {\n          item.selected = true;\n        }\n      }\n    }\n  }\n\n  formResetCallback() {\n    if (this.value !== this.originalValue) {\n      this.value = this.originalValue;\n    }\n  }\n\n  private getRadios() {\n    const elements = this.el.querySelectorAll('je-radio');\n    return Array.from(elements);\n  }\n\n  @Watch('value')\n  handleValueChange() {\n    this.valueChange.emit(this.value);\n    const radios = this.getRadios();\n    for (let radio of radios) {\n      if (radio.value !== this.value && radio.selected !== false)\n        radio.selected = false;\n      else if (radio.value === this.value && radio.selected !== true)\n        radio.selected = true;\n    }\n  }\n\n  @Listen('radioSelect')\n  handleNewValue(ev: CustomEvent<any>) {\n    this.value = ev.detail;\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.label && <label>{this.label}</label>}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/select/je-select/je-select.css

@@ -0,0 +1,20 @@
+:host {
+  display: block;
+  width: fit-content;
+}
+
+je-input::part(native-input) {
+  cursor: pointer;
+}
+
+:host([expand]) {
+  width: 100%;
+}
+
+je-icon {
+  transition: transform 250ms ease;
+}
+
+je-icon.open {
+  transform: rotate(180deg);
+}

package/dist/collection/components/select/je-select/je-select.js

@@ -0,0 +1,289 @@
+import { Host, h } from "@stencil/core";
+export class JeSelect {
+    constructor() {
+        this.open = false;
+        this.label = undefined;
+        this.placeholder = undefined;
+        this.value = undefined;
+        this.expand = undefined;
+        this.required = undefined;
+    }
+    componentDidLoad() {
+        this.originalValue = this.value;
+    }
+    componentWillLoad() {
+        if (!this.el.getAttribute('name') && this.label) {
+            this.el.setAttribute('name', this.label);
+        }
+    }
+    formResetCallback() {
+        this.value = this.originalValue;
+        const options = Array.from(this.el.querySelectorAll('je-select-option'));
+        if (!options.some(t => t.value === this.value)) {
+            this.inputEl.value = '';
+        }
+    }
+    handlePopoverPresent() {
+        this.open = true;
+    }
+    handlePopoverDismiss() {
+        this.open = false;
+        const options = this.el.querySelectorAll('je-select-option');
+        options.forEach(option => option.classList.remove('focus'));
+    }
+    handleOptionSelected(event) {
+        this.value = event.detail;
+    }
+    handleValueChange() {
+        const options = this.el.querySelectorAll('je-select-option');
+        options.forEach(option => {
+            if (option.value === this.value) {
+                option.selected = true;
+                this.inputEl.value = option.textContent || option.value;
+            }
+            else {
+                option.selected = false;
+            }
+        });
+    }
+    focusOption(option) {
+        option.classList.add('focus');
+    }
+    blurOption(option) {
+        option.classList.remove('focus');
+    }
+    hasFocus(option) {
+        return option.classList.contains('focus');
+    }
+    handleKeyDown(event) {
+        var _a;
+        if (this.open || (event.key !== 'Tab' && event.key !== 'Enter')) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        const options = Array.from(this.el.querySelectorAll('je-select-option'));
+        if (event.key == 'Enter' && this.open) {
+            options.forEach(option => {
+                if (this.hasFocus(option)) {
+                    this.value = option.value;
+                }
+            });
+            this.inputEl.dismissDropdown();
+        }
+        else if (event.key == 'Escape') {
+            this.inputEl.dismissDropdown();
+        }
+        else if ((event.key == 'ArrowDown' || event.key == 'ArrowUp') && !this.open) {
+            this.inputEl.shadowRoot.querySelector("[part='outer-container']").click();
+        }
+        else if ((event.key == 'ArrowDown' || event.key == 'ArrowUp') && this.open) {
+            if (!options.some(t => this.hasFocus(t))) {
+                const indexToFocus = options.findIndex(t => t.selected);
+                if (indexToFocus > -1) {
+                    this.focusOption(options[indexToFocus]);
+                }
+                else {
+                    this.focusOption(options[0]);
+                }
+            }
+            else {
+                if (event.key == 'ArrowUp') {
+                    options.forEach(option => {
+                        if (this.hasFocus(option)) {
+                            const prevOption = option.previousElementSibling;
+                            if (prevOption) {
+                                this.blurOption(option);
+                                this.focusOption(prevOption);
+                            }
+                        }
+                    });
+                }
+                else {
+                    const optionToFocus = (_a = options.find(t => this.hasFocus(t))) === null || _a === void 0 ? void 0 : _a.nextElementSibling;
+                    if (optionToFocus) {
+                        this.blurOption(options.find(t => this.hasFocus(t)));
+                        this.focusOption(optionToFocus);
+                    }
+                }
+            }
+        }
+        else if (event.key.length == 1) {
+            const currentFocusedOption = options.find(t => this.hasFocus(t));
+            const optionsWithKey = options.filter(t => t.textContent.toLowerCase().startsWith(event.key.toLowerCase()));
+            if (optionsWithKey.length) {
+                const currentFocuedIndex = optionsWithKey.findIndex(t => this.hasFocus(t));
+                if (currentFocuedIndex > -1) {
+                    if (currentFocuedIndex < optionsWithKey.length - 1) {
+                        this.blurOption(optionsWithKey[currentFocuedIndex]);
+                        this.focusOption(optionsWithKey[currentFocuedIndex + 1]);
+                    }
+                    else {
+                        this.blurOption(optionsWithKey[currentFocuedIndex]);
+                        this.focusOption(optionsWithKey[0]);
+                    }
+                }
+                else {
+                    if (currentFocusedOption)
+                        this.blurOption(currentFocusedOption);
+                    this.focusOption(optionsWithKey[0]);
+                }
+                if (!this.open) {
+                    options.forEach(option => {
+                        if (this.hasFocus(option)) {
+                            this.value = option.value;
+                        }
+                    });
+                }
+            }
+            else if (currentFocusedOption) {
+                this.blurOption(currentFocusedOption);
+            }
+        }
+    }
+    render() {
+        return (h(Host, { key: '66d25d96c778ac0183742b03ba55b104fb542191' }, h("je-input", { key: '01768d4f45c8431cbaee327edba4c97e727df9a9', ref: el => this.inputEl = el, exportparts: 'outer-container, start-container, end-container, native-input, content', dropdown: true, label: this.label, placeholder: this.placeholder, noTyping: true, expand: this.expand, dismissOnClick: true, required: this.required }, h("slot", { key: 'e31cfa87c8148c8ecda310b99ffd668c510a2149', onSlotchange: () => this.handleValueChange(), slot: 'dropdown' }), h("je-icon", { key: 'c3336499f1c8d8ba5150b5c91bb994ece0140c74', slot: 'end', icon: 'expand_more', class: { open: this.open } }))));
+    }
+    static get is() { return "je-select"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["je-select.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["je-select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "placeholder",
+                "reflect": false
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "value",
+                "reflect": false
+            },
+            "expand": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "expand",
+                "reflect": false
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "required",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "open": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "didPresent",
+                "method": "handlePopoverPresent",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "didDismiss",
+                "method": "handlePopoverDismiss",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "optionSelected",
+                "method": "handleOptionSelected",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": true,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=je-select.js.map

package/dist/collection/components/select/je-select/je-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"je-select.js","sourceRoot":"","sources":["../../../../src/components/select/je-select/je-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Element, State, Listen, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'je-select',\n  styleUrl: 'je-select.scss',\n  shadow: {\n    delegatesFocus: true\n  },\n  formAssociated: true\n})\nexport class JeSelect {\n  @Element() el: HTMLElement;\n  private inputEl!: HTMLJeInputElement;\n  private originalValue?: string;\n  @State() open = false;\n  @Prop() label?: string;\n  @Prop() placeholder?: string;\n  @Prop({ mutable: true }) value?: string;\n  @Prop() expand?: boolean;\n  @Prop() required?: boolean;\n\n  componentDidLoad() {\n    this.originalValue = this.value;\n  }\n\n  componentWillLoad() {\n    if (!this.el.getAttribute('name') && this.label) {\n      this.el.setAttribute('name', this.label);\n    }\n  }\n\n  formResetCallback() {\n    this.value = this.originalValue;\n    const options = Array.from(this.el.querySelectorAll('je-select-option'));\n    if (!options.some(t => t.value === this.value)) {\n      this.inputEl.value = '';\n    }\n  }\n\n  @Listen('didPresent')\n  handlePopoverPresent() {\n    this.open = true;\n  }\n\n  @Listen('didDismiss')\n  handlePopoverDismiss() {\n    this.open = false;\n    const options = this.el.querySelectorAll('je-select-option');\n    options.forEach(option => option.classList.remove('focus'));\n  }\n\n  @Listen('optionSelected')\n  handleOptionSelected(event: CustomEvent<string>) {\n    this.value = event.detail;\n  }\n\n  @Watch('value')\n  handleValueChange() {\n    const options = this.el.querySelectorAll('je-select-option');\n    options.forEach(option => {\n      if (option.value === this.value) {\n        option.selected = true;\n        this.inputEl.value = option.textContent || option.value;\n      } else {\n        option.selected = false;\n      }\n    });\n  }\n\n  private focusOption(option: HTMLJeSelectOptionElement) {\n    option.classList.add('focus')\n  }\n\n  private blurOption(option: HTMLJeSelectOptionElement) {\n    option.classList.remove('focus')\n  }\n\n  private hasFocus(option: HTMLJeSelectOptionElement) {\n    return option.classList.contains('focus');\n  }\n\n  @Listen('keydown', { capture: true })\n  handleKeyDown(event: KeyboardEvent) {\n    if (this.open || (event.key !== 'Tab' && event.key !== 'Enter')) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n    const options = Array.from(this.el.querySelectorAll('je-select-option'));\n    if (event.key == 'Enter' && this.open) {\n      options.forEach(option => {\n        if (this.hasFocus(option)) {\n          this.value = option.value;\n        }\n      });\n      this.inputEl.dismissDropdown();\n    } else if (event.key == 'Escape') {\n      this.inputEl.dismissDropdown()\n    } else if ((event.key == 'ArrowDown' || event.key == 'ArrowUp') && !this.open) {\n      (this.inputEl.shadowRoot.querySelector(\"[part='outer-container']\") as HTMLElement).click();\n    } else if ((event.key == 'ArrowDown' || event.key == 'ArrowUp') && this.open) {\n      if (!options.some(t => this.hasFocus(t))) {\n        const indexToFocus = options.findIndex(t => t.selected)\n        if (indexToFocus > -1) {\n          this.focusOption(options[indexToFocus]);\n        } else {\n          this.focusOption(options[0]);\n        }\n      } else {\n        if (event.key == 'ArrowUp') {\n          options.forEach(option => {\n            if (this.hasFocus(option)) {\n              const prevOption = option.previousElementSibling as HTMLJeSelectOptionElement;\n              if (prevOption) {\n                this.blurOption(option);\n                this.focusOption(prevOption);\n              }\n            }\n          });\n        } else {\n          const optionToFocus = options.find(t => this.hasFocus(t))?.nextElementSibling;\n          if (optionToFocus) {\n            this.blurOption(options.find(t => this.hasFocus(t)));\n            this.focusOption(optionToFocus as HTMLJeSelectOptionElement);\n          }\n        }\n      }\n    } else if (event.key.length == 1) {\n      const currentFocusedOption = options.find(t => this.hasFocus(t));\n      const optionsWithKey = options.filter(t => t.textContent.toLowerCase().startsWith(event.key.toLowerCase()))\n      if (optionsWithKey.length) {\n        const currentFocuedIndex = optionsWithKey.findIndex(t => this.hasFocus(t));\n        if (currentFocuedIndex > -1) {\n          if (currentFocuedIndex < optionsWithKey.length - 1) {\n            this.blurOption(optionsWithKey[currentFocuedIndex]);\n            this.focusOption(optionsWithKey[currentFocuedIndex + 1]);\n          } else {\n            this.blurOption(optionsWithKey[currentFocuedIndex]);\n            this.focusOption(optionsWithKey[0]);\n          }\n        } else {\n          if (currentFocusedOption) this.blurOption(currentFocusedOption);\n          this.focusOption(optionsWithKey[0]);\n        }\n        if (!this.open) {\n          options.forEach(option => {\n            if (this.hasFocus(option)) {\n              this.value = option.value;\n            }\n          });\n        }\n      } else if (currentFocusedOption) {\n        this.blurOption(currentFocusedOption);\n      }\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <je-input ref={el => this.inputEl = el}\n          exportparts='outer-container, start-container, end-container, native-input, content'\n          dropdown={true}\n          label={this.label}\n          placeholder={this.placeholder}\n          noTyping={true}\n          expand={this.expand}\n          dismissOnClick={true}\n          required={this.required}\n        >\n          <slot onSlotchange={() => this.handleValueChange()} slot='dropdown' />\n          <je-icon slot='end' icon='expand_more' class={{ open: this.open }} />\n        </je-input>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/select/je-select-option/je-select-option.css

@@ -0,0 +1,31 @@
+:host {
+  display: block;
+  width: 100%;
+  --je-option-hover-color: var(--je-primary-100);
+}
+
+:host([darkmode]) {
+  --je-option-hover-color: var(--je-medium-850);
+}
+
+:host(:hover) span[part=container], :host(.focus) span[part=container] {
+  background-color: var(--je-option-hover-color);
+}
+
+span[part=container] {
+  display: flex;
+  align-items: center;
+  gap: var(--je-spacing-2xs);
+  user-select: none;
+  -webkit-user-select: none;
+  cursor: pointer;
+  width: 100%;
+  padding: var(--je-spacing-xs, 10px);
+  background-color: transparent;
+  color: inherit;
+  transition: background-color 75ms ease-in;
+}
+
+je-icon {
+  cursor: pointer;
+}

package/dist/collection/components/select/je-select-option/je-select-option.js

@@ -0,0 +1,102 @@
+import { h } from "@stencil/core";
+export class JeSelectOption {
+    constructor() {
+        this.value = undefined;
+        this.selected = false;
+    }
+    handleClick() {
+        this.optionSelected.emit(this.value);
+    }
+    handleThemeChange(e) {
+        this.hostEl.toggleAttribute('darkmode', e.detail == 'dark');
+    }
+    render() {
+        return (h("span", { key: '2aea5751eefe77f3ad5f1aadd76e5582f1481121', part: 'container' }, h("je-icon", { key: 'e03092f2bb061d9954df0503ca924bf287b683e9', icon: this.selected ? 'radio_button_checked' : 'radio_button_unchecked' }), h("slot", { key: '485755645a3bfa06eb79f4d6fc42501541da1712' })));
+    }
+    static get is() { return "je-select-option"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["je-select-option.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["je-select-option.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "value",
+                "reflect": false
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "selected",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "optionSelected",
+                "name": "optionSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "hostEl"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "themeChange",
+                "method": "handleThemeChange",
+                "target": "body",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=je-select-option.js.map

package/dist/collection/components/select/je-select-option/je-select-option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"je-select-option.js","sourceRoot":"","sources":["../../../../src/components/select/je-select-option/je-select-option.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzF,MAAM,OAAO,cAAc;;;wBAGW,KAAK;;IAIzC,WAAW;QACT,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACvC,CAAC;IAGD,iBAAiB,CAAC,CAAgC;QAChD,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,UAAU,EAAE,CAAC,CAAC,MAAM,IAAI,MAAM,CAAC,CAAA;IAC7D,CAAC;IAED,MAAM;QACJ,OAAO,CACL,6DAAM,IAAI,EAAC,WAAW;YACpB,gEAAS,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,wBAAwB,GAAG;YACnF,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'je-select-option',\n  styleUrl: 'je-select-option.scss',\n  shadow: true,\n})\nexport class JeSelectOption {\n  @Element() hostEl!: HTMLElement;\n  @Prop() value: string;\n  @Prop({ reflect: true }) selected = false;\n  @Event() optionSelected: EventEmitter<string>;\n\n  @Listen('click')\n  handleClick() {\n    this.optionSelected.emit(this.value);\n  }\n\n  @Listen('themeChange', { target: 'body' })\n  handleThemeChange(e: CustomEvent<'light' | 'dark'>) {\n    this.hostEl.toggleAttribute('darkmode', e.detail == 'dark')\n  }\n\n  render() {\n    return (\n      <span part='container'>\n        <je-icon icon={this.selected ? 'radio_button_checked' : 'radio_button_unchecked'}/>\n        <slot></slot>\n      </span>\n    );\n  }\n}\n"]}

package/dist/collection/components/tabs/je-tab/je-tab.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}