@aquera/nile-elements 0.0.1-beta.1

package/dist/src/nile-select/nile-select.js

@@ -0,0 +1,399 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import styles from './nile-select.css';
+import { HasSlotController } from '../slot';
+import { watch } from '../watch';
+let NileSelect = class NileSelect extends LitElement {
+    constructor() {
+        super();
+        this.dropDownOptionsArray = [];
+        // @property() value: string | number = '';
+        /**
+         * The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the
+         * value will be a space-delimited list of values based on the options selected.
+         */
+        this.value = '';
+        /** Allows more than one option to be selected. */
+        this.multiple = false;
+        /** Allows more than one option to be selected. */
+        this.placeholder = 'Select your option';
+        /** Allows to search on option */
+        this.searchEnabled = false;
+        /** Miximum tags to show*/
+        this.maxTags = 3;
+        this.isOpen = false;
+        this.hasFocus = false;
+        this.displayLabel = '';
+        this.selectedOptions = [];
+        this.searchString = '';
+        this.showSelected = false;
+        this.hasSlotController = new HasSlotController(this, 'help-text', 'label');
+    }
+    render() {
+        const hasIconSlot = this.hasSlotController.test('parent-icon');
+        const labelClass = `label ${hasIconSlot ? 'with-icon' : ''} ${this.multiple && this.value.length !== 0 ? 'hidden' : ''}`;
+        return html `
+      <div class="select-container" @click="${this.toggleOptions}">
+        <span class="parent-icon">
+          <slot name="parent-icon"></slot>
+        </span>
+        ${true ? html `
+          <span class="${labelClass}">
+            ${this.displayLabel.toString().length > 0 ? html `
+              <span class="selected">${this.displayLabel}</span>
+            ` : this.placeholder}
+          </span>
+        ` : ''}
+        ${this.multiple ? html `
+          <span class="label multi ${hasIconSlot ? 'with-icon' : ''}">
+            ${this.selectedOptions.slice(0, this.maxTags).map((option) => html `
+              <nile-tag removable="true" @nile-remove="${(event) => this.handleTagRemove(event, option)}">
+                <span name="content">${option.getTextLabel()}</span>
+              </nile-tag>
+            `)}
+            ${this.selectedOptions.length > this.maxTags ? html `
+              <nile-tag>
+                <span name="content">+${this.selectedOptions.length - this.maxTags}</span>
+              </nile-tag>
+            ` : ''}
+          </span>
+        ` : ''}
+        <span class="icon ${this.isOpen ? 'rotate-down' : ''}">
+          <nile-icon name="arrowdown" size="16"></nile-icon>
+        </span>
+        ${this.isOpen ? html `
+          <div class="options">
+            ${this.searchEnabled ? html `
+              <input class="select-search" type="text" autofocus @input="${this.onSearch}" value="${this.searchString}" @click="${this.handleSearchInputClick}" />
+            ` : ''}
+            <slot tabindex="-1" @click="${this.handleOptionClick}"></slot>
+            ${this.multiple ? html `
+              <div class="footer" @click="${this.handleFooterClick}">
+                <span @click="${this.toggleShowSelected}" style="cursor: pointer;">
+                  <input type="checkbox" style="pointer-events: none;" ?disabled="${this.selectedOptions.length === 0}" ?checked="${this.showSelected}" />
+                  Show Selected
+                </span>
+                <span class="clear" @click="${this.unSlectAll}">clear all</span>
+              </div>
+            ` : ''}
+          </div>
+        ` : ''}
+      </div>
+    `;
+    }
+    /**
+     * Connect the component and bind handleOutsideClick to the document click event.
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('click', this.handleOutsideClick.bind(this));
+    }
+    /**
+     * Disconnect the component and unbind handleOutsideClick from the document click event.
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('click', this.handleOutsideClick.bind(this));
+    }
+    /**
+     * Handles the click event outside the component, and closes the component if necessary.
+     * @param event - The click event.
+     */
+    handleOutsideClick(event) {
+        if (!this.contains(event.target)) {
+            this.isOpen = false;
+        }
+    }
+    /**
+     * Handles the click event on the footer.
+     * @param event - The click event.
+     */
+    handleFooterClick(event) {
+        event.stopPropagation();
+        event.preventDefault();
+    }
+    // onSearch(event: any) {
+    //   const allOptions = this.getAllOptions();
+    //   // const newSelectedOptions = Array.isArray(option) ? option : [option];
+    //   const newSelectedOptions = allOptions.filter(
+    //     el => !el.childNodes[1]?.textContent?.includes(event.target?.value)
+    //   );
+    //   // Clear existing selection
+    //   allOptions.forEach(el => (el.hidden = false));
+    //   // Set the new selection
+    //   if (newSelectedOptions.length) {
+    //     newSelectedOptions.forEach(el => (el.hidden = true));
+    //   }
+    // }
+    onSearch(event) {
+        const allOptions = this.getAllOptions();
+        const inputValue = event.target.value
+            .trim()
+            .toLowerCase();
+        const newSelectedOptions = allOptions.filter((option) => {
+            const textContent = option.childNodes[1]?.textContent
+                ?.trim()
+                .toLowerCase();
+            return textContent && !textContent.includes(inputValue);
+        });
+        // Reset all options to be visible
+        allOptions.forEach(option => {
+            option.hidden = false;
+        });
+        // Hide options that don't match the search query
+        newSelectedOptions.forEach(option => {
+            option.hidden = true;
+        });
+    }
+    toggleOptions() {
+        this.isOpen = !this.isOpen;
+    }
+    handleSearchInputClick(event) {
+        event.stopPropagation();
+        event.preventDefault();
+    }
+    handleTagRemove(event, option) {
+        event.stopPropagation();
+        this.toggleOptionSelection(option, false);
+        // this.emit('nile-change');
+    }
+    // selectOption(option: selectOption, event: Event) {
+    handleOptionClick(event) {
+        event.stopPropagation();
+        const target = event.target;
+        const option = target.closest('nile-option');
+        if (!option) {
+            return;
+        }
+        if (this.multiple) {
+            this.toggleOptionSelection(option);
+        }
+        else {
+            this.setSelectedOptions(option);
+            this.isOpen = false;
+        }
+    }
+    // Toggles an option's selected state
+    toggleOptionSelection(option, force) {
+        if (force === true || force === false) {
+            option.selected = force;
+        }
+        else {
+            option.selected = !option.selected;
+        }
+        this.selectionChanged();
+    }
+    /**
+     * Sets the selected option(s)
+     * @param option - the selected option(s)
+     */
+    setSelectedOptions(option) {
+        // get all <nile-option> elements
+        const allOptions = this.getAllOptions();
+        // convert option to array if not already an array
+        const newSelectedOptions = Array.isArray(option) ? option : [option];
+        // clear existing selection
+        allOptions.forEach(el => (el.selected = false));
+        // set the new selection
+        if (newSelectedOptions.length) {
+            newSelectedOptions.forEach(el => (el.selected = true));
+        }
+        // update selection, value, and display label
+        this.selectionChanged();
+    }
+    /**
+     * Gets an array of all <nile-option> elements
+     * @returns an array of <nile-option> elements
+     */
+    getAllOptions() {
+        return [...this.querySelectorAll('nile-option')];
+    }
+    /**
+     * Gets the text content of the element and trims it
+     * @returns the trimmed text content
+     */
+    getTextLabel() {
+        return (this.textContent ?? '').trim();
+    }
+    /**
+     * This method must be called whenever the selection changes. It will update the selected options cache, the current
+     * value, and the display value
+     */
+    selectionChanged(event) {
+        // Update selected options cache
+        this.selectedOptions = this.getAllOptions().filter(el => el.selected);
+        // Update the value and display label
+        if (this.multiple) {
+            // For multi-select mode, update value as an array of selected options' values
+            this.value = this.selectedOptions.map(el => el.value);
+            // Update display label as number of options selected
+            // if (this.placeholder && this.value.length === 0) {
+            //   // When no items are selected, keep the value empty so the placeholder shows
+            //   this.displayLabel = '';
+            // } else {
+            // this.displayLabel = this.localize.term('numOptionsSelected', this.selectedOptions.length);
+            // }
+        }
+        else {
+            // For single-select mode, update value and display label with the first selected option's value and text content
+            this.value = this.selectedOptions[0]?.value ?? '';
+            this.displayLabel = this.selectedOptions[0]?.getTextLabel() ?? '';
+        }
+        // Dispatch a custom event to notify changes
+        this.dispatchEvent(new CustomEvent('nile-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                srcEvent: event,
+                value: this.value,
+            },
+        }));
+        // Update validity
+        // this.updateComplete.then(() => {
+        //   this.formControlController.updateValidity();
+        // });
+    }
+    /**
+     * Sets the current option, which is the option the user is currently interacting with (e.g. via keyboard). Only one
+     * option may be "current" at a time.
+     * @param option - the target option to select
+     */
+    setCurrentOption(option) {
+        const allOptions = this.getAllOptions();
+        // Clear selection
+        allOptions.forEach(el => {
+            el.current = false;
+            el.tabIndex = -1;
+        });
+        // Select the target option
+        if (option) {
+            this.currentOption = option;
+            option.current = true;
+            option.tabIndex = 0;
+            option.focus();
+        }
+    }
+    /**
+     * Toggles the display of selected options in the dropdown
+     * @param event - the event object
+     */
+    toggleShowSelected(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        // Only toggle if there are selected options
+        if (this.selectedOptions?.length === 0) {
+            return;
+        }
+        // Toggle the showSelected property
+        this.showSelected = !this.showSelected;
+        // Hide unselected options if showSelected is true
+        const allOptions = this.getAllOptions();
+        allOptions.forEach(el => {
+            if (!el.selected) {
+                el.hidden = this.showSelected;
+            }
+        });
+    }
+    /**
+     * Handles the checkbox click event and toggles the display of selected options in the dropdown
+     * @param event - the event object
+     */
+    handleCheckBox(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        this.toggleShowSelected(event);
+    }
+    /**
+     * Deselects all options and updates the value, selectedOptions, and displayLabel properties accordingly
+     */
+    unSlectAll() {
+        this.showSelected = false;
+        const allOptions = this.getAllOptions();
+        allOptions.forEach(el => {
+            el.selected = false;
+            el.hidden = false;
+        });
+        this.value = '';
+        this.selectionChanged();
+    }
+    // get selectedOption(): selectOption {
+    //   const selectedOption = this.dropDownOptionsArray.filter(
+    //     option => option.value == this.value
+    //   );
+    //   return selectedOption[0];
+    // }
+    handleValueChange() {
+        const allOptions = this.getAllOptions();
+        const value = Array.isArray(this.value) ? this.value : [this.value];
+        // Select only the options that match the new value
+        this.setSelectedOptions(allOptions.filter(el => value.includes(el.value)));
+    }
+    handleOpenChange() {
+        const allOptions = this.getAllOptions();
+        allOptions.forEach(el => (el.hidden = false));
+        this.showSelected = false;
+    }
+};
+NileSelect.styles = styles;
+__decorate([
+    property()
+], NileSelect.prototype, "dropDownOptionsArray", void 0);
+__decorate([
+    property({
+        converter: {
+            fromAttribute: (value) => value.split(' '),
+            toAttribute: (value) => value.join(' '),
+        },
+    })
+], NileSelect.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileSelect.prototype, "multiple", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileSelect.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileSelect.prototype, "searchEnabled", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], NileSelect.prototype, "maxTags", void 0);
+__decorate([
+    state()
+], NileSelect.prototype, "isOpen", void 0);
+__decorate([
+    state()
+], NileSelect.prototype, "hasFocus", void 0);
+__decorate([
+    state()
+], NileSelect.prototype, "displayLabel", void 0);
+__decorate([
+    state()
+], NileSelect.prototype, "currentOption", void 0);
+__decorate([
+    state()
+], NileSelect.prototype, "selectedOptions", void 0);
+__decorate([
+    state()
+], NileSelect.prototype, "searchString", void 0);
+__decorate([
+    state()
+], NileSelect.prototype, "showSelected", void 0);
+__decorate([
+    watch('value', { waitUntilFirstUpdate: true })
+], NileSelect.prototype, "handleValueChange", null);
+__decorate([
+    watch('isOpen', { waitUntilFirstUpdate: true })
+], NileSelect.prototype, "handleOpenChange", null);
+NileSelect = __decorate([
+    customElement('nile-select')
+], NileSelect);
+export { NileSelect };
+//# sourceMappingURL=nile-select.js.map

package/dist/src/nile-select/nile-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-select.js","sourceRoot":"","sources":["../../../src/nile-select/nile-select.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html, css, CSSResultGroup } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { NileOption } from '../nile-option';\nimport styles from './nile-select.css';\nimport { HasSlotController } from '../slot';\nimport { watch } from '../watch';\n\n/**\n * @summary Selects allow you to choose items from a menu of predefined options.\n *\n * @event nile-change - Emitted when the control's value changes.\n */\n\ntype selectOption = {\n  name: string;\n  value: string | number;\n};\n\n@customElement('nile-select')\nexport class NileSelect extends LitElement {\n  static override styles: CSSResultGroup = styles;\n\n  @property() dropDownOptionsArray: selectOption[] = [];\n\n  // @property() value: string | number = '';\n\n  /**\n   * The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\n   * value will be a space-delimited list of values based on the options selected.\n   */\n  @property({\n    converter: {\n      fromAttribute: (value: string) => value.split(' '),\n      toAttribute: (value: string[]) => value.join(' '),\n    },\n  })\n  value: string | string[] = '';\n\n  /** Allows more than one option to be selected. */\n  @property({ type: Boolean, reflect: true }) multiple = false;\n\n  /** Allows more than one option to be selected. */\n  @property({ type: Boolean, reflect: true }) placeholder =\n    'Select your option';\n\n  /** Allows to search on option */\n  @property({ type: Boolean, reflect: true }) searchEnabled = false;\n\n  /** Miximum tags to show*/\n  @property({ type: Number, reflect: true }) maxTags = 3;\n\n  @state() isOpen: boolean = false;\n  @state() private hasFocus = false;\n  @state() displayLabel = '';\n  @state() currentOption: NileOption | undefined;\n  @state() selectedOptions: NileOption[] = [];\n  @state() searchString: string = '';\n  @state() showSelected: boolean = false;\n\n  private readonly hasSlotController = new HasSlotController(\n    this,\n    'help-text',\n    'label'\n  );\n\n  constructor() {\n    super();\n  }\n\n  render() {\n    const hasIconSlot = this.hasSlotController.test('parent-icon');\n    const labelClass = `label ${hasIconSlot ? 'with-icon' : ''} ${this.multiple && this.value.length !== 0 ? 'hidden' : ''}`;\n\n    return html`\n      <div class=\"select-container\" @click=\"${this.toggleOptions}\">\n        <span class=\"parent-icon\">\n          <slot name=\"parent-icon\"></slot>\n        </span>\n        ${true ? html`\n          <span class=\"${labelClass}\">\n            ${this.displayLabel.toString().length > 0 ? html`\n              <span class=\"selected\">${this.displayLabel}</span>\n            ` : this.placeholder}\n          </span>\n        ` : ''}\n        ${this.multiple ? html`\n          <span class=\"label multi ${hasIconSlot ? 'with-icon' : ''}\">\n            ${this.selectedOptions.slice(0, this.maxTags).map((option) => html`\n              <nile-tag removable=\"true\" @nile-remove=\"${(event: CustomEvent<any>) => this.handleTagRemove(event, option)}\">\n                <span name=\"content\">${option.getTextLabel()}</span>\n              </nile-tag>\n            `)}\n            ${this.selectedOptions.length > this.maxTags ? html`\n              <nile-tag>\n                <span name=\"content\">+${this.selectedOptions.length - this.maxTags}</span>\n              </nile-tag>\n            ` : ''}\n          </span>\n        ` : ''}\n        <span class=\"icon ${this.isOpen ? 'rotate-down' : ''}\">\n          <nile-icon name=\"arrowdown\" size=\"16\"></nile-icon>\n        </span>\n        ${this.isOpen ? html`\n          <div class=\"options\">\n            ${this.searchEnabled ? html`\n              <input class=\"select-search\" type=\"text\" autofocus @input=\"${this.onSearch}\" value=\"${this.searchString}\" @click=\"${this.handleSearchInputClick}\" />\n            ` : ''}\n            <slot tabindex=\"-1\" @click=\"${this.handleOptionClick}\"></slot>\n            ${this.multiple ? html`\n              <div class=\"footer\" @click=\"${this.handleFooterClick}\">\n                <span @click=\"${this.toggleShowSelected}\" style=\"cursor: pointer;\">\n                  <input type=\"checkbox\" style=\"pointer-events: none;\" ?disabled=\"${this.selectedOptions.length === 0}\" ?checked=\"${this.showSelected}\" />\n                  Show Selected\n                </span>\n                <span class=\"clear\" @click=\"${this.unSlectAll}\">clear all</span>\n              </div>\n            ` : ''}\n          </div>\n        ` : ''}\n      </div>\n    `;\n  }\n\n\n  /**\n   * Connect the component and bind handleOutsideClick to the document click event.\n   */\n  connectedCallback(): void {\n    super.connectedCallback();\n    document.addEventListener('click', this.handleOutsideClick.bind(this));\n  }\n\n  /**\n   * Disconnect the component and unbind handleOutsideClick from the document click event.\n   */\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this.handleOutsideClick.bind(this));\n  }\n\n  /**\n   * Handles the click event outside the component, and closes the component if necessary.\n   * @param event - The click event.\n   */\n  handleOutsideClick(event: MouseEvent): void {\n    if (!this.contains(event.target as Node)) {\n      this.isOpen = false;\n    }\n  }\n\n  /**\n   * Handles the click event on the footer.\n   * @param event - The click event.\n   */\n  handleFooterClick(event: MouseEvent): void {\n    event.stopPropagation();\n    event.preventDefault();\n  }\n\n  // onSearch(event: any) {\n  //   const allOptions = this.getAllOptions();\n  //   // const newSelectedOptions = Array.isArray(option) ? option : [option];\n  //   const newSelectedOptions = allOptions.filter(\n  //     el => !el.childNodes[1]?.textContent?.includes(event.target?.value)\n  //   );\n\n  //   // Clear existing selection\n  //   allOptions.forEach(el => (el.hidden = false));\n\n  //   // Set the new selection\n  //   if (newSelectedOptions.length) {\n  //     newSelectedOptions.forEach(el => (el.hidden = true));\n  //   }\n  // }\n\n  onSearch(event: Event): void {\n    const allOptions = this.getAllOptions();\n    const inputValue = (event.target as HTMLInputElement).value\n      .trim()\n      .toLowerCase();\n    const newSelectedOptions = allOptions.filter((option: HTMLElement) => {\n      const textContent = option.childNodes[1]?.textContent\n        ?.trim()\n        .toLowerCase();\n      return textContent && !textContent.includes(inputValue);\n    });\n\n    // Reset all options to be visible\n    allOptions.forEach(option => {\n      option.hidden = false;\n    });\n\n    // Hide options that don't match the search query\n    newSelectedOptions.forEach(option => {\n      option.hidden = true;\n    });\n  }\n\n  toggleOptions(): void {\n    this.isOpen = !this.isOpen;\n  }\n\n  handleSearchInputClick(event: Event) {\n    event.stopPropagation();\n    event.preventDefault();\n  }\n\n  private handleTagRemove(event: CustomEvent, option: NileOption) {\n    event.stopPropagation();\n    this.toggleOptionSelection(option, false);\n    // this.emit('nile-change');\n  }\n\n  // selectOption(option: selectOption, event: Event) {\n  handleOptionClick(event: MouseEvent): void {\n    event.stopPropagation();\n\n    const target = event.target as HTMLElement;\n    const option = target.closest<NileOption>('nile-option');\n\n    if (!option) {\n      return;\n    }\n\n    if (this.multiple) {\n      this.toggleOptionSelection(option);\n    } else {\n      this.setSelectedOptions(option);\n      this.isOpen = false;\n    }\n  }\n\n  // Toggles an option's selected state\n  private toggleOptionSelection(option: NileOption, force?: boolean): void {\n    if (force === true || force === false) {\n      option.selected = force;\n    } else {\n      option.selected = !option.selected;\n    }\n\n    this.selectionChanged();\n  }\n\n  /**\n   * Sets the selected option(s)\n   * @param option - the selected option(s)\n   */\n  private setSelectedOptions(option: NileOption | NileOption[]): void {\n    // get all <nile-option> elements\n    const allOptions = this.getAllOptions();\n    // convert option to array if not already an array\n    const newSelectedOptions = Array.isArray(option) ? option : [option];\n\n    // clear existing selection\n    allOptions.forEach(el => (el.selected = false));\n\n    // set the new selection\n    if (newSelectedOptions.length) {\n      newSelectedOptions.forEach(el => (el.selected = true));\n    }\n\n    // update selection, value, and display label\n    this.selectionChanged();\n  }\n\n  /**\n   * Gets an array of all <nile-option> elements\n   * @returns an array of <nile-option> elements\n   */\n  private getAllOptions(): NileOption[] {\n    return [...this.querySelectorAll<NileOption>('nile-option')];\n  }\n\n  /**\n   * Gets the text content of the element and trims it\n   * @returns the trimmed text content\n   */\n  getTextLabel(): string {\n    return (this.textContent ?? '').trim();\n  }\n\n  /**\n   * This method must be called whenever the selection changes. It will update the selected options cache, the current\n   * value, and the display value\n   */\n  private selectionChanged(event?: Event): void {\n    // Update selected options cache\n    this.selectedOptions = this.getAllOptions().filter(el => el.selected);\n\n    // Update the value and display label\n    if (this.multiple) {\n      // For multi-select mode, update value as an array of selected options' values\n      this.value = this.selectedOptions.map(el => el.value);\n      // Update display label as number of options selected\n      // if (this.placeholder && this.value.length === 0) {\n      //   // When no items are selected, keep the value empty so the placeholder shows\n      //   this.displayLabel = '';\n      // } else {\n      // this.displayLabel = this.localize.term('numOptionsSelected', this.selectedOptions.length);\n      // }\n    } else {\n      // For single-select mode, update value and display label with the first selected option's value and text content\n      this.value = this.selectedOptions[0]?.value ?? '';\n      this.displayLabel = this.selectedOptions[0]?.getTextLabel() ?? '';\n    }\n\n    // Dispatch a custom event to notify changes\n    this.dispatchEvent(\n      new CustomEvent('nile-change', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          srcEvent: event,\n          value: this.value,\n        },\n      })\n    );\n\n    // Update validity\n    // this.updateComplete.then(() => {\n    //   this.formControlController.updateValidity();\n    // });\n  }\n\n  /**\n   * Sets the current option, which is the option the user is currently interacting with (e.g. via keyboard). Only one\n   * option may be \"current\" at a time.\n   * @param option - the target option to select\n   */\n  private setCurrentOption(option: NileOption | null): void {\n    const allOptions = this.getAllOptions();\n\n    // Clear selection\n    allOptions.forEach(el => {\n      el.current = false;\n      el.tabIndex = -1;\n    });\n\n    // Select the target option\n    if (option) {\n      this.currentOption = option;\n      option.current = true;\n      option.tabIndex = 0;\n      option.focus();\n    }\n  }\n\n  /**\n   * Toggles the display of selected options in the dropdown\n   * @param event - the event object\n   */\n  private toggleShowSelected(event: Event): void {\n    event.stopPropagation();\n    event.preventDefault();\n    // Only toggle if there are selected options\n    if (this.selectedOptions?.length === 0) {\n      return;\n    }\n    // Toggle the showSelected property\n    this.showSelected = !this.showSelected;\n\n    // Hide unselected options if showSelected is true\n    const allOptions = this.getAllOptions();\n    allOptions.forEach(el => {\n      if (!el.selected) {\n        el.hidden = this.showSelected;\n      }\n    });\n  }\n\n  /**\n   * Handles the checkbox click event and toggles the display of selected options in the dropdown\n   * @param event - the event object\n   */\n  private handleCheckBox(event: Event): void {\n    event.stopPropagation();\n    event.preventDefault();\n    this.toggleShowSelected(event);\n  }\n\n  /**\n   * Deselects all options and updates the value, selectedOptions, and displayLabel properties accordingly\n   */\n  private unSlectAll(): void {\n    this.showSelected = false;\n    const allOptions = this.getAllOptions();\n    allOptions.forEach(el => {\n      el.selected = false;\n      el.hidden = false;\n    });\n    this.value = '';\n    this.selectionChanged();\n  }\n\n  // get selectedOption(): selectOption {\n  //   const selectedOption = this.dropDownOptionsArray.filter(\n  //     option => option.value == this.value\n  //   );\n  //   return selectedOption[0];\n  // }\n\n  @watch('value', { waitUntilFirstUpdate: true })\n  handleValueChange() {\n    const allOptions = this.getAllOptions();\n    const value = Array.isArray(this.value) ? this.value : [this.value];\n\n    // Select only the options that match the new value\n    this.setSelectedOptions(allOptions.filter(el => value.includes(el.value)));\n  }\n\n  @watch('isOpen', { waitUntilFirstUpdate: true })\n  handleOpenChange() {\n    const allOptions = this.getAllOptions();\n    allOptions.forEach(el => (el.hidden = false));\n    this.showSelected = false;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-select': NileSelect;\n  }\n}\n"]}

package/dist/src/nile-select-2/index.d.ts

@@ -0,0 +1 @@
+export { NileSelect_2 } from './nile-select-2';

package/dist/src/nile-select-2/index.js

@@ -0,0 +1,2 @@
+export { NileSelect_2 } from './nile-select-2';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-select-2/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-select-2/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { NileSelect_2 } from './nile-select-2';\n"]}

package/dist/src/nile-select-2/nile-select-2.css.d.ts

@@ -0,0 +1,12 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+/**
+ * Select_2 CSS
+ */
+export declare const styles: import("lit-element").CSSResult;
+declare const _default: import("lit-element").CSSResult[];
+export default _default;