@aquera/nile-elements 0.0.1-beta.1 → 0.0.1-beta.3

package/{dist/src/nile-select-2/nile-select-2.js → .rollup.cache/Users/ravisankar/aquera/nile/packages/nile-elements/dist/src/nile-select/nile-select.js}

@@ -5,18 +5,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { __decorate } from "tslib";
-import { html, property } from 'lit-element';
+import { html, property, } from 'lit-element';
 import { customElement } from 'lit/decorators.js';
-import { styles } from './nile-select-2.css';
+import { styles } from './nile-select.css';
 import '../nile-icon';
 import '../nile-popup/nile-popup';
-import '../nile-tag-2/nile-tag-2';
+import '../nile-tag/nile-tag';
 import { animateTo, stopAnimations } from '../internal/animate';
 import { classMap } from 'lit/directives/class-map.js';
 import { query, state } from 'lit/decorators.js';
 import { defaultValue } from '../internal/default-value';
 import { FormControlController } from '../internal/form';
-import { getAnimation, setDefaultAnimation } from '../utilities/animation-registry';
+import { getAnimation, setDefaultAnimation, } from '../utilities/animation-registry';
 import { HasSlotController } from '../internal/slot';
 import { scrollIntoView } from '../internal/scroll';
 import { waitForEvent } from '../internal/event';
@@ -25,7 +25,7 @@ import NileElement from '../internal/nile-element';
 /**
  * Nile icon component.
  *
- * @tag nile-select-2
+ * @tag nile-select
  *
  */
 /**
@@ -37,7 +37,7 @@ import NileElement from '../internal/nile-element';
  * @dependency nile-popup
  * @dependency nile-tag
  *
- * @slot - The listbox options. Must be `<nile-option-2>` elements. You can use `<nile-divider>` to group items visually.
+ * @slot - The listbox options. Must be `<nile-option>` elements. You can use `<nile-divider>` to group items visually.
  * @slot label - The input's label. Alternatively, you can use the `label` attribute.
  * @slot prefix - Used to prepend a presentational icon or similar element to the combobox.
  * @slot clear-icon - An icon to use in lieu of the default clear icon.
@@ -72,11 +72,11 @@ import NileElement from '../internal/nile-element';
  * @csspart clear-button - The clear button.
  * @csspart expand-icon - The container that wraps the expand icon.
  */
-let NileSelect_2 = class NileSelect_2 extends NileElement {
+let NileSelect = class NileSelect extends NileElement {
     constructor() {
         super(...arguments);
         this.formControlController = new FormControlController(this, {
-            assumeInteractionOn: ['nile-blur', 'nile-input']
+            assumeInteractionOn: ['nile-blur', 'nile-input'],
         });
         this.hasSlotController = new HasSlotController(this, 'help-text', 'label');
         this.typeToSelectString = '';
@@ -96,6 +96,10 @@ let NileSelect_2 = class NileSelect_2 extends NileElement {
         this.size = 'medium';
         /** Placeholder text to show as a hint when the select is empty. */
         this.placeholder = '';
+        /** Placeholder text to show as a hint when the select is empty. */
+        this.searchValue = '';
+        /** Allows more than one option to be selected. */
+        this.searchEnabled = false;
         /** Allows more than one option to be selected. */
         this.multiple = false;
         /**
@@ -138,6 +142,7 @@ let NileSelect_2 = class NileSelect_2 extends NileElement {
         this.form = '';
         /** The select's required attribute. */
         this.required = false;
+        this.showSelected = false;
     }
     /** Gets the validity state object */
     get validity() {
@@ -154,7 +159,6 @@ let NileSelect_2 = class NileSelect_2 extends NileElement {
         this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
         // Because this is a form control, it shouldn't be opened initially
         this.open = false;
-        console.log(this.maxOptionsVisible);
     }
     addOpenListeners() {
         document.addEventListener('focusin', this.handleDocumentFocusIn);
@@ -182,6 +186,49 @@ let NileSelect_2 = class NileSelect_2 extends NileElement {
             this.hide();
         }
     }
+    /**
+     * Handles the click event on the footer.
+     * @param event - The click event.
+     */
+    handleFooterClick(event) {
+        event.stopPropagation();
+        event.preventDefault();
+    }
+    /**
+     * 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;
+            }
+        });
+        this.requestUpdate();
+    }
+    /**
+     * 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();
+    }
     handleDocumentKeyDown(event) {
         const target = event.target;
         const isClearButton = target.closest('.select__clear') !== null;
@@ -199,7 +246,8 @@ let NileSelect_2 = class NileSelect_2 extends NileElement {
         }
         // Handle enter and space. When pressing space, we allow for type to select behaviors so if there's anything in the
         // buffer we _don't_ close it.
-        if (event.key === 'Enter' || (event.key === ' ' && this.typeToSelectString === '')) {
+        if (event.key === 'Enter' ||
+            (event.key === ' ' && this.typeToSelectString === '')) {
             event.preventDefault();
             event.stopImmediatePropagation();
             // If it's not open, open it
@@ -339,7 +387,7 @@ let NileSelect_2 = class NileSelect_2 extends NileElement {
     }
     handleOptionClick(event) {
         const target = event.target;
-        const option = target.closest('nile-option-2');
+        const option = target.closest('nile-option');
         const oldValue = this.value;
         if (option && !option.disabled) {
             if (this.multiple) {
@@ -368,18 +416,19 @@ let NileSelect_2 = class NileSelect_2 extends NileElement {
         const value = Array.isArray(this.value) ? this.value : [this.value];
         const values = [];
         // Check for duplicate values in menu items
-        if (customElements.get('nile-option-2')) {
+        if (customElements.get('nile-option')) {
             allOptions.forEach(option => values.push(option.value));
             // Select only the options that match the new value
             this.setSelectedOptions(allOptions.filter(el => value.includes(el.value)));
         }
         else {
-            // Rerun this handler when <nile-option-2> is registered
-            customElements.whenDefined('nile-option-2').then(() => this.handleDefaultSlotChange());
+            // Rerun this handler when <nile-option> is registered
+            customElements
+                .whenDefined('nile-option')
+                .then(() => this.handleDefaultSlotChange());
         }
     }
     handleTagRemove(event, option) {
-        console.log(event);
         event.stopPropagation();
         if (!this.disabled) {
             this.toggleOptionSelection(option, false);
@@ -390,13 +439,13 @@ let NileSelect_2 = class NileSelect_2 extends NileElement {
             });
         }
     }
-    // Gets an array of all <nile-option-2> elements
+    // Gets an array of all <nile-option> elements
     getAllOptions() {
-        return [...this.querySelectorAll('nile-option-2')];
+        return [...this.querySelectorAll('nile-option')];
     }
-    // Gets the first <nile-option-2> element
+    // Gets the first <nile-option> element
     getFirstOption() {
-        return this.querySelector('nile-option-2');
+        return this.querySelector('nile-option');
     }
     // 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.
@@ -451,7 +500,7 @@ let NileSelect_2 = class NileSelect_2 extends NileElement {
                 this.displayLabel = '';
             }
             else {
-                this.displayLabel = this.selectedOptions.length + " selected";
+                this.displayLabel = this.selectedOptions.length + ' selected';
             }
         }
         else {
@@ -463,6 +512,27 @@ let NileSelect_2 = class NileSelect_2 extends NileElement {
             this.formControlController.updateValidity();
         });
     }
+    handleSearchFocus() {
+        document.removeEventListener('keydown', this.handleDocumentKeyDown);
+    }
+    handleSearchBlur() {
+        document.addEventListener('keydown', this.handleDocumentKeyDown);
+    }
+    handleSearchChange(e) {
+        this.searchValue = e.detail.value;
+        this.filterOptions(this.searchValue);
+    }
+    filterOptions(searchValue) {
+        const allOptions = this.getAllOptions();
+        const lowerCaseSearchValue = searchValue.toLowerCase();
+        allOptions.forEach(el => {
+            // Hide the option if its text and value do not include the search value.
+            const lowerCaseLabel = el.getTextLabel().toLowerCase();
+            const lowerCaseValue = (el.value || '').toLowerCase();
+            el.hidden = !(lowerCaseLabel.includes(lowerCaseSearchValue) ||
+                lowerCaseValue.includes(lowerCaseSearchValue));
+        });
+    }
     handleInvalid(event) {
         this.formControlController.setValidity(false);
         this.formControlController.emitInvalidEvent(event);
@@ -494,7 +564,9 @@ let NileSelect_2 = class NileSelect_2 extends NileElement {
             requestAnimationFrame(() => {
                 this.setCurrentOption(this.currentOption);
             });
-            const { keyframes, options } = getAnimation(this, 'select.show', { dir: "ltr" });
+            const { keyframes, options } = getAnimation(this, 'select.show', {
+                dir: 'ltr',
+            });
             await animateTo(this.popup.popup, keyframes, options);
             // Make sure the current option is scrolled into view (required for Safari)
             if (this.currentOption) {
@@ -507,7 +579,9 @@ let NileSelect_2 = class NileSelect_2 extends NileElement {
             this.emit('nile-hide');
             this.removeOpenListeners();
             await stopAnimations(this);
-            const { keyframes, options } = getAnimation(this, 'select.hide', { dir: "ltr" });
+            const { keyframes, options } = getAnimation(this, 'select.hide', {
+                dir: 'ltr',
+            });
             await animateTo(this.popup.popup, keyframes, options);
             this.listbox.hidden = true;
             this.popup.active = false;
@@ -564,6 +638,7 @@ let NileSelect_2 = class NileSelect_2 extends NileElement {
         const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
         const hasClearIcon = this.clearable && !this.disabled && this.value.length > 0;
         const isPlaceholderVisible = this.placeholder && this.value.length === 0;
+        const searchValue = this.searchValue || '';
         return html `
       <div
         part="form-control"
@@ -573,7 +648,7 @@ let NileSelect_2 = class NileSelect_2 extends NileElement {
             'form-control--medium': this.size === 'medium',
             'form-control--large': this.size === 'large',
             'form-control--has-label': hasLabel,
-            'form-control--has-help-text': hasHelpText
+            'form-control--has-help-text': hasHelpText,
         })}
       >
         <label
@@ -602,7 +677,7 @@ let NileSelect_2 = class NileSelect_2 extends NileElement {
             'select--bottom': this.placement === 'bottom',
             'select--small': this.size === 'small',
             'select--medium': this.size === 'medium',
-            'select--large': this.size === 'large'
+            'select--large': this.size === 'large',
         })}
             placement=${this.placement}
             strategy=${this.hoist ? 'fixed' : 'absolute'}
@@ -648,9 +723,10 @@ let NileSelect_2 = class NileSelect_2 extends NileElement {
             ? html `
                     <div part="tags" class="select__tags">
                       ${this.selectedOptions.map((option, index) => {
-                if (index < this.maxOptionsVisible || this.maxOptionsVisible <= 0) {
+                if (index < this.maxOptionsVisible ||
+                    this.maxOptionsVisible <= 0) {
                     return html `
-                            <nile-tag-2
+                            <nile-tag
                               part="tag"
                               exportparts="
                                 base:tag__base,
@@ -664,11 +740,20 @@ let NileSelect_2 = class NileSelect_2 extends NileElement {
                               @nile-remove=${(event) => this.handleTagRemove(event, option)}
                             >
                               ${option.getTextLabel()}
-                            </nile-tag-2>
+                            </nile-tag>
                           `;
                 }
                 else if (index === this.maxOptionsVisible) {
-                    return html ` <nile-tag-2 size=${this.size}> +${this.selectedOptions.length - index} </nile-tag-2> `;
+                    return html `
+                            <nile-tag
+                              class="select__tags-count ${hasClearIcon
+                        ? `select__tags-count-clearable`
+                        : ``} "
+                              size=${this.size}
+                            >
+                              +${this.selectedOptions.length - index}
+                            </nile-tag>
+                          `;
                 }
                 else {
                     return null;
@@ -683,7 +768,9 @@ let NileSelect_2 = class NileSelect_2 extends NileElement {
                 type="text"
                 ?disabled=${this.disabled}
                 ?required=${this.required}
-                .value=${Array.isArray(this.value) ? this.value.join(', ') : this.value}
+                .value=${Array.isArray(this.value)
+            ? this.value.join(', ')
+            : this.value}
                 tabindex="-1"
                 aria-hidden="true"
                 @focus=${() => this.focus()}
@@ -708,7 +795,11 @@ let NileSelect_2 = class NileSelect_2 extends NileElement {
                   `
             : ''}
 
-              <slot name="expand-icon" part="expand-icon" class="select__expand-icon">
+              <slot
+                name="expand-icon"
+                part="expand-icon"
+                class="select__expand-icon"
+              >
                 <nile-icon library="system" name="arrowdown"></nile-icon>
               </slot>
             </div>
@@ -720,12 +811,51 @@ let NileSelect_2 = class NileSelect_2 extends NileElement {
               aria-multiselectable=${this.multiple ? 'true' : 'false'}
               aria-labelledby="label"
               part="listbox"
-              class="select__listbox"
+              class="select__listbox ${this.searchEnabled
+            ? 'select__search-enabled '
+            : ''}"
               tabindex="-1"
               @mouseup=${this.handleOptionClick}
               @slotchange=${this.handleDefaultSlotChange}
             >
               <slot></slot>
+
+              ${this.searchEnabled
+            ? html ` <div class="select__search">
+                    <nile-input
+                      size="small"
+                      clearable
+                      .value=${searchValue}
+                      placeholder="Search..."
+                      @nile-input=${this.handleSearchChange}
+                      @nile-focus=${this.handleSearchFocus}
+                      @nile-blur=${this.handleSearchBlur}
+                    >
+                      <nile-icon name="search" slot="suffix"> </nile-icon>
+                    </nile-input>
+                  </div>`
+            : ``}
+              ${this.multiple
+            ? html ` <div
+                    class="select__footer"
+                    @click="${this.handleFooterClick}"
+                  >
+                    <span
+                      @click="${this.toggleShowSelected}"
+                      style="cursor: pointer;"
+                    >
+                      <nile-checkbox
+                        ?disabled="${this.selectedOptions.length === 0}"
+                        ?checked="${this.showSelected}"
+                      >
+                        Show Selected</nile-checkbox
+                      >
+                    </span>
+                    <span class="select__clear" @click="${this.unSlectAll}"
+                      >clear all</span
+                    >
+                  </div>`
+            : ``}
             </div>
           </nile-popup>
         </div>
@@ -743,119 +873,128 @@ let NileSelect_2 = class NileSelect_2 extends NileElement {
     `;
     }
 };
-NileSelect_2.styles = styles;
+NileSelect.styles = styles;
 __decorate([
     query('.select')
-], NileSelect_2.prototype, "popup", void 0);
+], NileSelect.prototype, "popup", void 0);
 __decorate([
     query('.select__combobox')
-], NileSelect_2.prototype, "combobox", void 0);
+], NileSelect.prototype, "combobox", void 0);
 __decorate([
     query('.select__display-input')
-], NileSelect_2.prototype, "displayInput", void 0);
+], NileSelect.prototype, "displayInput", void 0);
 __decorate([
     query('.select__value-input')
-], NileSelect_2.prototype, "valueInput", void 0);
+], NileSelect.prototype, "valueInput", void 0);
 __decorate([
     query('.select__listbox')
-], NileSelect_2.prototype, "listbox", void 0);
+], NileSelect.prototype, "listbox", void 0);
 __decorate([
     state()
-], NileSelect_2.prototype, "hasFocus", void 0);
+], NileSelect.prototype, "hasFocus", void 0);
 __decorate([
     state()
-], NileSelect_2.prototype, "displayLabel", void 0);
+], NileSelect.prototype, "displayLabel", void 0);
 __decorate([
     state()
-], NileSelect_2.prototype, "currentOption", void 0);
+], NileSelect.prototype, "currentOption", void 0);
 __decorate([
     state()
-], NileSelect_2.prototype, "selectedOptions", void 0);
+], NileSelect.prototype, "selectedOptions", void 0);
 __decorate([
     property()
-], NileSelect_2.prototype, "name", void 0);
+], NileSelect.prototype, "name", void 0);
 __decorate([
     property({
         converter: {
             fromAttribute: (value) => value.split(' '),
-            toAttribute: (value) => value.join(' ')
-        }
+            toAttribute: (value) => value.join(' '),
+        },
     })
-], NileSelect_2.prototype, "value", void 0);
+], NileSelect.prototype, "value", void 0);
 __decorate([
     defaultValue()
-], NileSelect_2.prototype, "defaultValue", void 0);
+], NileSelect.prototype, "defaultValue", void 0);
 __decorate([
     property()
-], NileSelect_2.prototype, "size", void 0);
+], NileSelect.prototype, "size", void 0);
 __decorate([
     property()
-], NileSelect_2.prototype, "placeholder", void 0);
+], NileSelect.prototype, "placeholder", void 0);
+__decorate([
+    state()
+], NileSelect.prototype, "searchValue", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], NileSelect_2.prototype, "multiple", void 0);
+], NileSelect.prototype, "searchEnabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileSelect.prototype, "multiple", void 0);
 __decorate([
     property({ attribute: 'max-options-visible', type: Number })
-], NileSelect_2.prototype, "maxOptionsVisible", void 0);
+], NileSelect.prototype, "maxOptionsVisible", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], NileSelect_2.prototype, "disabled", void 0);
+], NileSelect.prototype, "disabled", void 0);
 __decorate([
     property({ type: Boolean })
-], NileSelect_2.prototype, "clearable", void 0);
+], NileSelect.prototype, "clearable", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], NileSelect_2.prototype, "open", void 0);
+], NileSelect.prototype, "open", void 0);
 __decorate([
     property({ type: Boolean })
-], NileSelect_2.prototype, "hoist", void 0);
+], NileSelect.prototype, "hoist", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], NileSelect_2.prototype, "filled", void 0);
+], NileSelect.prototype, "filled", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], NileSelect_2.prototype, "pill", void 0);
+], NileSelect.prototype, "pill", void 0);
 __decorate([
     property()
-], NileSelect_2.prototype, "label", void 0);
+], NileSelect.prototype, "label", void 0);
 __decorate([
     property({ reflect: true })
-], NileSelect_2.prototype, "placement", void 0);
+], NileSelect.prototype, "placement", void 0);
 __decorate([
     property({ attribute: 'help-text' })
-], NileSelect_2.prototype, "helpText", void 0);
+], NileSelect.prototype, "helpText", void 0);
 __decorate([
     property({ reflect: true })
-], NileSelect_2.prototype, "form", void 0);
+], NileSelect.prototype, "form", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], NileSelect_2.prototype, "required", void 0);
+], NileSelect.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileSelect.prototype, "showSelected", void 0);
 __decorate([
     watch('disabled', { waitUntilFirstUpdate: true })
-], NileSelect_2.prototype, "handleDisabledChange", null);
+], NileSelect.prototype, "handleDisabledChange", null);
 __decorate([
     watch('value', { waitUntilFirstUpdate: true })
-], NileSelect_2.prototype, "handleValueChange", null);
+], NileSelect.prototype, "handleValueChange", null);
 __decorate([
     watch('open', { waitUntilFirstUpdate: true })
-], NileSelect_2.prototype, "handleOpenChange", null);
-NileSelect_2 = __decorate([
-    customElement('nile-select-2')
-], NileSelect_2);
-export { NileSelect_2 };
+], NileSelect.prototype, "handleOpenChange", null);
+NileSelect = __decorate([
+    customElement('nile-select')
+], NileSelect);
+export { NileSelect };
 setDefaultAnimation('select.show', {
     keyframes: [
         { opacity: 0, scale: 0.9 },
-        { opacity: 1, scale: 1 }
+        { opacity: 1, scale: 1 },
     ],
-    options: { duration: 100, easing: 'ease' }
+    options: { duration: 100, easing: 'ease' },
 });
 setDefaultAnimation('select.hide', {
     keyframes: [
         { opacity: 1, scale: 1 },
-        { opacity: 0, scale: 0.9 }
+        { opacity: 0, scale: 0.9 },
     ],
-    options: { duration: 100, easing: 'ease' }
+    options: { duration: 100, easing: 'ease' },
 });
-export default NileSelect_2;
-//# sourceMappingURL=nile-select-2.js.map
+export default NileSelect;
+//# sourceMappingURL=nile-select.js.map