npm - @aquera/nile-elements - Versions diffs - 0.1.23 → 0.1.25 - Mend

@aquera/nile-elements 0.1.23 → 0.1.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (53) hide show

package/dist/nile-tab-group/nile-tab-group.css.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-tab-group.css.cjs.js","sources":["../../../src/nile-tab-group/nile-tab-group.css.ts"],"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 { css } from 'lit';\n\n/\n TabGroup CSS\n /\nexport const styles = css`\n [hidden] {\n display: none !important;\n }\n\n :host {\n --indicator-color: var(--nile-colors-primary-600);\n --track-color: var(--nile-colors-neutral-400);\n --track-width: 2px;\n --tab-gap: 12px;\n\n display: block;\n }\n\n .tab-group {\n display: flex;\n border-radius: 0;\n }\n\n .tab-group__tabs {\n display: flex;\n position: relative;\n gap: var(--tab-gap);\n }\n\n .hide__track {\n --track-width: 0px;\n --tab-gap: 3px;\n }\n\n .tab-group__indicator {\n position: absolute;\n transition: 0.3s translate ease, 0.3s width ease;\n }\n\n .tab-group--has-scroll-controls .tab-group__nav-container {\n position: relative;\n padding: 0 10px;\n }\n\n .tab-group__body {\n display: block;\n overflow: auto;\n }\n\n .tab-group__scroll-button {\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n top: 0;\n bottom: 0;\n width: 20px;\n }\n\n .tab-group__scroll-button--start {\n left: 0;\n }\n\n .tab-group__scroll-button--end {\n right: 0;\n }\n\n .tab-group--rtl .tab-group__scroll-button--start {\n left: auto;\n right: 0;\n }\n\n .tab-group--rtl .tab-group__scroll-button--end {\n left: 0;\n right: auto;\n }\n\n /\n * Top\n /\n\n .tab-group--top {\n flex-direction: column;\n }\n\n .tab-group--top .tab-group__nav-container {\n order: 1;\n }\n\n .tab-group--top .tab-group__nav {\n display: flex;\n overflow-x: auto;\n\n / Hide scrollbar in Firefox /\n scrollbar-width: none;\n }\n\n / Hide scrollbar in Chrome/Safari /\n .tab-group--top .tab-group__nav::-webkit-scrollbar {\n width: 0;\n height: 0;\n }\n\n .tab-group--top .tab-group__tabs {\n flex: 1 1 auto;\n position: relative;\n flex-direction: row;\n ~~border-bottom: solid var(--track-width)\n var(--nile-colors-gray-light-mode-200);\n~~ }\n\n .tab-group--top .tab-group__indicator {\n bottom: ~~-2px~~;\n border-bottom: 2px solid var(--nile-colors-primary-600);\n }\n\n .tab-group--top .tab-group__body {\n order: 2;\n }\n\n .tab-group--top ::slotted(nile-tab-panel) {\n --padding: 10px 0;\n }\n\n /\n * Bottom\n /\n\n .tab-group--bottom {\n flex-direction: column;\n }\n\n .tab-group--bottom .tab-group__nav-container {\n order: 2;\n }\n\n .tab-group--bottom .tab-group__nav {\n display: flex;\n overflow-x: auto;\n\n / Hide scrollbar in Firefox /\n scrollbar-width: none;\n }\n\n / Hide scrollbar in Chrome/Safari /\n .tab-group--bottom .tab-group__nav::-webkit-scrollbar {\n width: 0;\n height: 0;\n }\n\n .tab-group--bottom .tab-group__tabs {\n flex: 1 1 auto;\n position: relative;\n flex-direction: row;\n border-top: solid var(--track-width) var(--track-color);\n }\n\n .tab-group--bottom .tab-group__indicator {\n top: calc(-1 var(--track-width));\n border-top: solid var(--track-width) var(--indicator-color);\n }\n\n .tab-group--bottom .tab-group__body {\n order: 1;\n }\n\n .tab-group--bottom ::slotted(nile-tab-panel) {\n --padding: 10px 0;\n }\n\n /\n Start\n /\n\n .tab-group--start {\n flex-direction: row;\n }\n\n .tab-group--start .tab-group__nav-container {\n order: 1;\n }\n\n .tab-group--start .tab-group__tabs {\n flex: 0 0 auto;\n flex-direction: column;\n border-inline-end: solid var(--track-width) var(--track-color);\n }\n\n .tab-group--start .tab-group__indicator {\n right: calc(-1 var(--track-width));\n border-right: solid var(--track-width) var(--indicator-color);\n }\n\n .tab-group--start.tab-group--rtl .tab-group__indicator {\n right: auto;\n left: calc(-1 * var(--track-width));\n }\n\n .tab-group--start .tab-group__body {\n flex: 1 1 auto;\n order: 2;\n }\n\n .tab-group--start ::slotted(nile-tab-panel) {\n --padding: 0 10px;\n }\n\n /\n End\n /\n\n .tab-group--end {\n flex-direction: row;\n }\n\n .tab-group--end .tab-group__nav-container {\n order: 2;\n }\n\n .tab-group--end .tab-group__tabs {\n flex: 0 0 auto;\n flex-direction: column;\n border-left: solid var(--track-width) var(--track-color);\n }\n\n .tab-group--end .tab-group__indicator {\n left: calc(-1 var(--track-width));\n border-inline-start: solid var(--track-width) var(--indicator-color);\n }\n\n .tab-group--end.tab-group--rtl .tab-group__indicator {\n right: calc(-1 * var(--track-width));\n left: auto;\n }\n\n .tab-group--end .tab-group__body {\n flex: 1 1 auto;\n order: 1;\n }\n\n .tab-group--end ::slotted(nile-tab-panel) {\n --padding: 0 10px;\n }\n\n .hide__track slot::slotted(nile-tab) {\n --tab-border-radius: 4px;\n --tab-padding:8px 12px;\n --tab-hover-background-color: var(--nile-colors-neutral-100);\n --tab-active-background-color: var(--nile-colors-brand-50);\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
1	+ {"version":3,"file":"nile-tab-group.css.cjs.js","sources":["../../../src/nile-tab-group/nile-tab-group.css.ts"],"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 { css } from 'lit';\n\n/\n TabGroup CSS\n /\nexport const styles = css`\n [hidden] {\n display: none !important;\n }\n\n :host {\n --indicator-color: var(--nile-colors-primary-600);\n --track-color: var(--nile-colors-neutral-400);\n --track-width: 2px;\n --tab-gap: 12px;\n\n display: block;\n }\n\n .tab-group {\n display: flex;\n border-radius: 0;\n }\n\n .tab-group__tabs {\n display: flex;\n position: relative;\n gap: var(--tab-gap);\n }\n\n .hide__track {\n --track-width: 0px;\n --tab-gap: 3px;\n }\n\n .tab-group__indicator {\n position: absolute;\n transition: 0.3s translate ease, 0.3s width ease;\n }\n\n .tab-group__indicator__path{\n position: absolute;\n height: var(--track-width);\n width: 100%;\n background: var(--nile-colors-neutral-400);\n bottom:0px;\n z-index:-1;\n }\n\n .tab-group--has-scroll-controls .tab-group__nav-container {\n position: relative;\n padding: 0 10px;\n }\n\n .tab-group__body {\n display: block;\n overflow: auto;\n }\n\n .tab-group__scroll-button {\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n top: 0;\n bottom: 0;\n width: 20px;\n }\n\n .tab-group__scroll-button--start {\n left: 0;\n }\n\n .tab-group__scroll-button--end {\n right: 0;\n }\n\n .tab-group--rtl .tab-group__scroll-button--start {\n left: auto;\n right: 0;\n }\n\n .tab-group--rtl .tab-group__scroll-button--end {\n left: 0;\n right: auto;\n }\n\n /\n * Top\n /\n\n .tab-group--top {\n flex-direction: column;\n }\n\n .tab-group--top .tab-group__nav-container {\n order: 1;\n }\n\n .tab-group--top .tab-group__nav {\n display: flex;\n overflow-x: auto;\n\n / Hide scrollbar in Firefox /\n scrollbar-width: none;\n }\n\n / Hide scrollbar in Chrome/Safari /\n .tab-group--top .tab-group__nav::-webkit-scrollbar {\n width: 0;\n height: 0;\n }\n\n .tab-group--top .tab-group__tabs {\n flex: 1 1 auto;\n position: relative;\n flex-direction: row;\n }\n\n .tab-group--top .tab-group__indicator {\n bottom: 0px;\n border-bottom: 2px solid var(--nile-colors-primary-600);\n z-index:-1;\n }\n\n .tab-group--top .tab-group__body {\n order: 2;\n }\n\n .tab-group--top ::slotted(nile-tab-panel) {\n --padding: 10px 0;\n }\n\n /\n * Bottom\n /\n\n .tab-group--bottom {\n flex-direction: column;\n }\n\n .tab-group--bottom .tab-group__nav-container {\n order: 2;\n }\n\n .tab-group--bottom .tab-group__nav {\n display: flex;\n overflow-x: auto;\n\n / Hide scrollbar in Firefox /\n scrollbar-width: none;\n }\n\n / Hide scrollbar in Chrome/Safari /\n .tab-group--bottom .tab-group__nav::-webkit-scrollbar {\n width: 0;\n height: 0;\n }\n\n .tab-group--bottom .tab-group__tabs {\n flex: 1 1 auto;\n position: relative;\n flex-direction: row;\n border-top: solid var(--track-width) var(--track-color);\n }\n\n .tab-group--bottom .tab-group__indicator {\n top: calc(-1 var(--track-width));\n border-top: solid var(--track-width) var(--indicator-color);\n }\n\n .tab-group--bottom .tab-group__body {\n order: 1;\n }\n\n .tab-group--bottom ::slotted(nile-tab-panel) {\n --padding: 10px 0;\n }\n\n /\n Start\n /\n\n .tab-group--start {\n flex-direction: row;\n }\n\n .tab-group--start .tab-group__nav-container {\n order: 1;\n }\n\n .tab-group--start .tab-group__tabs {\n flex: 0 0 auto;\n flex-direction: column;\n border-inline-end: solid var(--track-width) var(--track-color);\n }\n\n .tab-group--start .tab-group__indicator {\n right: calc(-1 var(--track-width));\n border-right: solid var(--track-width) var(--indicator-color);\n }\n\n .tab-group--start.tab-group--rtl .tab-group__indicator {\n right: auto;\n left: calc(-1 * var(--track-width));\n }\n\n .tab-group--start .tab-group__body {\n flex: 1 1 auto;\n order: 2;\n }\n\n .tab-group--start ::slotted(nile-tab-panel) {\n --padding: 0 10px;\n }\n\n /\n End\n /\n\n .tab-group--end {\n flex-direction: row;\n }\n\n .tab-group--end .tab-group__nav-container {\n order: 2;\n }\n\n .tab-group--end .tab-group__tabs {\n flex: 0 0 auto;\n flex-direction: column;\n border-left: solid var(--track-width) var(--track-color);\n }\n\n .tab-group--end .tab-group__indicator {\n left: calc(-1 var(--track-width));\n border-inline-start: solid var(--track-width) var(--indicator-color);\n }\n\n .tab-group--end.tab-group--rtl .tab-group__indicator {\n right: calc(-1 * var(--track-width));\n left: auto;\n }\n\n .tab-group--end .tab-group__body {\n flex: 1 1 auto;\n order: 1;\n }\n\n .tab-group--end ::slotted(nile-tab-panel) {\n --padding: 0 10px;\n }\n\n .hide__track slot::slotted(nile-tab) {\n --tab-border-radius: 4px;\n --tab-padding:8px 12px;\n --tab-hover-background-color: var(--nile-colors-neutral-100);\n --tab-active-background-color: var(--nile-colors-brand-50);\n }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

package/dist/nile-tab-group/nile-tab-group.css.esm.js CHANGED Viewed

@@ -33,6 +33,15 @@ import{css as t}from"lit";const o=t`
     transition: 0.3s translate ease, 0.3s width ease;
   }
+  .tab-group__indicator__path{
+    position: absolute;
+    height: var(--track-width);
+    width: 100%;
+    background: var(--nile-colors-neutral-400);
+    bottom:0px;
+    z-index:-1;
+  }
   .tab-group--has-scroll-controls .tab-group__nav-container {
     position: relative;
     padding: 0 10px;
@@ -101,13 +110,12 @@ import{css as t}from"lit";const o=t`
     flex: 1 1 auto;
     position: relative;
     flex-direction: row;
-    border-bottom: solid var(--track-width)
-      var(--nile-colors-gray-light-mode-200);
   }
   .tab-group--top .tab-group__indicator {
-    bottom: -2px;
+    bottom: 0px;
     border-bottom: 2px solid var(--nile-colors-primary-600);
+    z-index:-1;
   }
   .tab-group--top .tab-group__body {

package/dist/nile-tab-group/nile-tab-group.esm.js CHANGED Viewed

@@ -20,10 +20,12 @@ import{__decorate as i}from"tslib";import{html as s}from"lit";import{query as o,
           <div class="tab-group__nav">
             <div part="tabs" class="tab-group__tabs" role="tablist">
+              <div part="active-tab-indicator-path" class="tab-group__indicator__path"></div>
               <div
                 part="active-tab-indicator"
                 class=${m({"tab-group__indicator":!this.noTrack})}
               ></div>
               <slot name="nav"  @slotchange=${this.syncTabsAndPanels}></slot>
             </div>
           </div>

package/dist/src/nile-auto-complete/nile-auto-complete.css.js CHANGED Viewed

@@ -10,18 +10,20 @@ import { css } from 'lit';
  */
 export const styles = css `
   :host {
-    --virtual-scroll-container-width:100px;
+    --virtual-scroll-container-width:110px;
+    --virtual-scroll-container-height:200px;
   }
   .nile-dropdown--input {
     width: 100%;
   }
-  .nile-dropdown--input lit-virtualizer{
-    min-width: var(--virtual-scroll-container-width)!important;
+  .virtualized__menu{
+    min-width: var(--virtual-scroll-container-width);
+    min-height: var(--virtual-scroll-container-height) !important;
   }
-  .nile-dropdown--input nile-menu-item{
+  .virtualized__menu nile-menu-item{
     width:100%;
   }

package/dist/src/nile-auto-complete/nile-auto-complete.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-auto-complete.css.js","sourceRoot":"","sources":["../../../src/nile-auto-complete/nile-auto-complete.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;CAoBxB~~,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","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 { css } from 'lit';\n\n/\n AutoComplete CSS\n */\nexport const styles = css`\n :host {\n --virtual-scroll-container-width:~~100px~~;\n }\n\n .nile-dropdown--input {\n width: 100%;\n }\n\n .~~nile-dropdown--input lit-virtualizer~~{\n min-width: var(--virtual-scroll-container-width)!important;\n }\n\n .~~nile-dropdown--input~~ nile-menu-item{\n width:100%;\n }\n\n .nile-auto-complete--input {\n width: 100%;\n }\n`;\n\nexport default [styles];\n"]}
1	+ {"version":3,"file":"nile-auto-complete.css.js","sourceRoot":"","sources":["../../../src/nile-auto-complete/nile-auto-complete.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;CAsBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","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 { css } from 'lit';\n\n/\n AutoComplete CSS\n */\nexport const styles = css`\n :host {\n --virtual-scroll-container-width:110px;\n --virtual-scroll-container-height:200px;\n }\n\n .nile-dropdown--input {\n width: 100%;\n }\n\n .virtualized__menu{\n min-width: var(--virtual-scroll-container-width);\n min-height: var(--virtual-scroll-container-height) !important;\n }\n\n .virtualized__menu nile-menu-item{\n width:100%;\n }\n\n .nile-auto-complete--input {\n width: 100%;\n }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-auto-complete/nile-auto-complete.d.ts CHANGED Viewed

@@ -2,10 +2,10 @@ import { TemplateResult } from 'lit';
 import NileElement from '../internal/nile-element';
 import type { CSSResultGroup, PropertyValues } from 'lit';
 import { NileDropdown } from '../nile-dropdown';
-import '@lit-labs/virtualizer';
 export declare class NileAutoComplete extends NileElement {
     static styles: CSSResultGroup;
     dropdownElement: NileDropdown;
+    disabled: boolean;
     isDropdownOpen: boolean;
     enableVirtualScroll: boolean;
     openOnFocus: boolean;
@@ -13,8 +13,8 @@ export declare class NileAutoComplete extends NileElement {
     placeholder: string;
     noBorder: boolean;
     loading: boolean;
-    filterFunction: any;
-    renderItemFunction: any;
+    filterFunction: (item: string, searchedValue: string) => boolean;
+    renderItemFunction: (item: any) => string;
     allMenuItems: any;
     menuItems: any;
     connectedCallback(): void;
@@ -24,6 +24,7 @@ export declare class NileAutoComplete extends NileElement {
     getContent(): TemplateResult;
     getItemRenderFunction(item: any): TemplateResult;
     private handleSelect;
+    private setVirtualMenuWidth;
     private handleSearch;
     handleFocus(): void;
     private handleClick;

package/dist/src/nile-auto-complete/nile-auto-complete.js CHANGED Viewed

@@ -3,12 +3,13 @@ import { html, nothing, } from 'lit';
 import { customElement, query, state, property } from 'lit/decorators.js';
 import { styles } from './nile-auto-complete.css';
 import NileElement from '../internal/nile-element';
-import '@lit-labs/virtualizer';
+import { virtualize } from '@lit-labs/virtualizer/virtualize.js';
 // Define the custom element 'nile-auto-complete'
 let NileAutoComplete = class NileAutoComplete extends NileElement {
     constructor() {
         super(...arguments);
         // Define component properties
+        this.disabled = false;
         this.isDropdownOpen = false;
         this.enableVirtualScroll = false;
         this.openOnFocus = false;
@@ -23,14 +24,19 @@ let NileAutoComplete = class NileAutoComplete extends NileElement {
     }
     connectedCallback() {
         super.connectedCallback();
-        this.menuItems = [...this.allMenuItems];
+        this.renderItemFunction = (item) => item;
     }
     updated(changedProperties) {
         super.updated(changedProperties);
-        if (changedProperties.has('allMenuItems'))
-            this.menuItems = [...this.allMenuItems];
+        if (changedProperties.has('allMenuItems')) {
+            this.menuItems = this.applyFilter(this.allMenuItems, this.filterFunction);
+            this.setVirtualMenuWidth();
+        }
         if (changedProperties.has('isDropdownOpen'))
             this.menuItems = this.applyFilter(this.allMenuItems, this.filterFunction);
+        if (changedProperties.has('value')) {
+            this.menuItems = this.applyFilter(this.allMenuItems, this.filterFunction);
+        }
     }
     render() {
         const content = this.enableVirtualScroll ? this.getVirtualizedContent() : this.getContent();
@@ -38,6 +44,7 @@ let NileAutoComplete = class NileAutoComplete extends NileElement {
       <nile-dropdown class="nile-dropdown--input" ?open=${this.isDropdownOpen} noOpenOnCLick>
         <nile-input class="nile-auto-complete--input"
           ?no-border=${this.noBorder}
+          .disabled=${this.disabled}
           .value=${this.value}
           @nile-input=${this.handleSearch}
           @focus=${this.handleFocus}
@@ -55,11 +62,12 @@ let NileAutoComplete = class NileAutoComplete extends NileElement {
     }
     getVirtualizedContent() {
         return html `
-      <nile-menu @nile-select=${this.handleSelect} id="content-menu" exportparts="menu__items-wrapper:options__wrapper">
-        <lit-virtualizer
-          .items=${this.menuItems}
-          .renderItem=${(item) => this.getItemRenderFunction(item)}
-        ></lit-virtualizer>
+      <nile-menu class="virtualized__menu" @nile-select=${this.handleSelect} id="content-menu" exportparts="menu__items-wrapper:options__wrapper">
+        ${virtualize({
+            items: this.menuItems,
+            renderItem: (item) => this.getItemRenderFunction(item),
+            scroller: true
+        })}
       </nile-menu>
     `;
     }
@@ -80,12 +88,23 @@ let NileAutoComplete = class NileAutoComplete extends NileElement {
     handleSelect(event) {
         this.value = event.detail.value;
         this.emit('nile-complete', { value: event.detail.value });
+        this.emit('nile-input', { value: event.detail.value });
         this.isDropdownOpen = false;
         this.dropdownElement?.hide();
     }
+    setVirtualMenuWidth() {
+        const maxLengthOption = this.menuItems
+            .reduce((acc, curr) => {
+            const currLength = this.renderItemFunction(curr).length;
+            return acc > currLength ? acc : currLength;
+        }, 0);
+        const defaultWith = 110;
+        const pixelMultiplier = 9.5;
+        const menuWidth = maxLengthOption * pixelMultiplier < defaultWith ? defaultWith : maxLengthOption * pixelMultiplier;
+        this.style.setProperty("--virtual-scroll-container-width", menuWidth + "px");
+    }
     handleSearch(event) {
-        const searchValue = event.detail.value.toLowerCase();
-        this.value = searchValue;
+        this.value = event.detail.value.toLowerCase();
         // Filter menu items based on the search value
         this.menuItems = this.applyFilter(this.allMenuItems, this.filterFunction);
         this.isDropdownOpen = this.menuItems.length > 0;
@@ -107,6 +126,8 @@ let NileAutoComplete = class NileAutoComplete extends NileElement {
         this.dropdownElement?.show();
     }
     applyFilter(list, filterFn) {
+        if (typeof (list) !== 'object')
+            return [];
         const res = [];
         list.forEach(el => filterFn(el, this.value) && res.push(el));
         return res;
@@ -116,6 +137,9 @@ NileAutoComplete.styles = styles;
 __decorate([
     query('nile-dropdown')
 ], NileAutoComplete.prototype, "dropdownElement", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileAutoComplete.prototype, "disabled", void 0);
 __decorate([
     property({ type: Boolean })
 ], NileAutoComplete.prototype, "isDropdownOpen", void 0);

package/dist/src/nile-auto-complete/nile-auto-complete.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-auto-complete.js","sourceRoot":"","sources":["../../../src/nile-auto-complete/nile-auto-complete.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n LitElement,\n html,\n CSSResultArray,\n TemplateResult,\n nothing,\n} from 'lit';\nimport { customElement, query, state, property } from 'lit/decorators.js';\nimport { styles } from './nile-auto-complete.css';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup, PropertyValues } from 'lit';\nimport { NileDropdown } from '../nile-dropdown';\nimport '@lit-labs/virtualizer';\n\n// Define the custom element 'nile-auto-complete'\n@customElement('nile-auto-complete')\nexport class NileAutoComplete extends NileElement {\n\n static styles: CSSResultGroup = styles;\n\n @query('nile-dropdown') dropdownElement: NileDropdown;\n\n // Define component properties\n\n @property({ type: Boolean }) isDropdownOpen: boolean = false;\n\n @property({ type: Boolean }) enableVirtualScroll: boolean = false;\n\n @property({ type: Boolean }) openOnFocus: boolean = false;\n\n @property({ type: String }) value: string = '';\n\n @property({ type: String }) placeholder: string = 'Type here ..';\n\n @property({ type: Boolean }) noBorder: boolean = false;\n\n @property({ type: Boolean }) loading: boolean = false;\n\n @property({ attribute:false}) filterFunction: any = (item:string,searchedValue:string)=>item.toLowerCase().includes(searchedValue.toLowerCase());\n\n @property({ attribute:false}) renderItemFunction: any = (item:any)=>item;\n\n @property({ type: Array }) allMenuItems: any = [];\n\n @state() menuItems: any = [];\n\n connectedCallback() {\n super.connectedCallback();\n this.menuItems = [...this.allMenuItems];\n }\n\n protected updated(changedProperties: PropertyValues): void {\n super.updated(changedProperties);\n if (changedProperties.has('allMenuItems')) this.menuItems = [...this.allMenuItems];\n if (changedProperties.has('isDropdownOpen')) this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n }\n\n public render(): TemplateResult {\n const content=this.enableVirtualScroll?this.getVirtualizedContent():this.getContent();\n return html`\n <nile-dropdown class=\"nile-dropdown--input\" ?open=${this.isDropdownOpen} noOpenOnCLick>\n <nile-input class=\"nile-auto-complete--input\"\n ?no-border=${this.noBorder}\n .value=${this.value}\n @nile-input=${this.handleSearch}\n @focus=${this.handleFocus}\n @click=${this.handleClick}\n slot=\"trigger\"\n placeholder=${this.placeholder}\n >\n ${this.loading?html`<nile-icon slot=\"suffix\" color=\"var(--nile-colors-primary-600)\" name=\"button-loading-blue-animated\"></nile-icon>`:nothing}\n </nile-input>\n ${this.menuItems.length > 0 && !this.loading\n ? content\n : nothing}\n </nile-dropdown>\n `;\n } \n \n getVirtualizedContent():TemplateResult{\n return html`\n <nile-menu @nile-select=${this.handleSelect} id=\"content-menu\" exportparts=\"menu__items-wrapper:options__wrapper\">\n <lit-virtualizer\n .items=${this.menuItems}\n .renderItem=${(item:any):TemplateResult=>this.getItemRenderFunction(item)}\n ></lit-virtualizer>\n </nile-menu>\n `\n }\n\n getContent():TemplateResult{\n return html`\n <nile-menu id=\"content-menu\" @nile-select=${this.handleSelect} exportparts=\"menu__items-wrapper:options__wrapper\">\n ${this.menuItems.map((item: any) => this.getItemRenderFunction(item))}\n </nile-menu>`\n }\n\n getItemRenderFunction(item:any):TemplateResult{\n const value=this.renderItemFunction(item)\n return html`\n <nile-menu-item value=${value}>\n ${value}\n </nile-menu-item>\n `;\n }\n\n private handleSelect(event: CustomEvent) {\n this.value = event.detail.value;\n this.emit('nile-complete', { value: event.detail.value });\n this.isDropdownOpen = false;\n this.dropdownElement?.hide();\n }\n\n private handleSearch(event: CustomEvent) {\n const searchValue = event.detail.value.toLowerCase();\n this.value = searchValue;\n\n // Filter menu items based on the search value\n this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n\n this.isDropdownOpen = this.menuItems.length > 0;\n if (this.isDropdownOpen) this.dropdownElement?.show();\n }\n\n public handleFocus() {\n if (!this.openOnFocus) {\n return;\n }\n\n // Delay opening the dropdown to allow focus to take effect\n setTimeout(() => {\n this.isDropdownOpen = true;\n this.dropdownElement?.show();\n }, 300);\n }\n\n private handleClick() {\n this.isDropdownOpen = true;\n this.dropdownElement?.show();\n }\n\n applyFilter<T>(list: T[], filterFn: (item: T,searchValue?:string) => boolean): T[] {\n const res:T[]=[]\n list.forEach( el=> filterFn(el,this.value) && res.push(el) )\n return res\n }\n\n}\n\nexport default NileAutoComplete;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-auto-complete': NileAutoComplete;\n }\n}\n"]}
1	+ {"version":3,"file":"nile-auto-complete.js","sourceRoot":"","sources":["../../../src/nile-auto-complete/nile-auto-complete.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n LitElement,\n html,\n CSSResultArray,\n TemplateResult,\n nothing,\n} from 'lit';\nimport { customElement, query, state, property } from 'lit/decorators.js';\nimport { styles } from './nile-auto-complete.css';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup, PropertyValues } from 'lit';\nimport { NileDropdown } from '../nile-dropdown';\n\nimport { virtualize } from '@lit-labs/virtualizer/virtualize.js';\n\n// Define the custom element 'nile-auto-complete'\n@customElement('nile-auto-complete')\nexport class NileAutoComplete extends NileElement {\n\n static styles: CSSResultGroup = styles;\n\n @query('nile-dropdown') dropdownElement: NileDropdown;\n\n // Define component properties\n\n @property({ type: Boolean }) disabled: boolean = false;\n\n @property({ type: Boolean }) isDropdownOpen: boolean = false;\n\n @property({ type: Boolean }) enableVirtualScroll: boolean = false;\n\n @property({ type: Boolean }) openOnFocus: boolean = false;\n\n @property({ type: String }) value: string = '';\n\n @property({ type: String }) placeholder: string = 'Type here ..';\n\n @property({ type: Boolean }) noBorder: boolean = false;\n\n @property({ type: Boolean }) loading: boolean = false;\n\n @property({ attribute:false}) filterFunction: (item:string,searchedValue:string)=>boolean=(item:string,searchedValue:string)=>item.toLowerCase().includes(searchedValue.toLowerCase());\n\n @property({ attribute:false}) renderItemFunction: (item:any)=>string = (item:any)=>item;\n\n @property({ type: Array }) allMenuItems: any = [];\n\n @state() menuItems: any = [];\n\n connectedCallback() {\n super.connectedCallback();\n this.renderItemFunction=(item:any)=>item;\n }\n\n protected updated(changedProperties: PropertyValues): void {\n super.updated(changedProperties);\n if (changedProperties.has('allMenuItems')){\n this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n this.setVirtualMenuWidth();\n }\n if (changedProperties.has('isDropdownOpen')) this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n if (changedProperties.has('value')){\n this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n }\n }\n\n public render(): TemplateResult {\n const content=this.enableVirtualScroll?this.getVirtualizedContent():this.getContent();\n return html`\n <nile-dropdown class=\"nile-dropdown--input\" ?open=${this.isDropdownOpen} noOpenOnCLick>\n <nile-input class=\"nile-auto-complete--input\"\n ?no-border=${this.noBorder}\n .disabled=${this.disabled}\n .value=${this.value}\n @nile-input=${this.handleSearch}\n @focus=${this.handleFocus}\n @click=${this.handleClick}\n slot=\"trigger\"\n placeholder=${this.placeholder}\n >\n ${this.loading?html`<nile-icon slot=\"suffix\" color=\"var(--nile-colors-primary-600)\" name=\"button-loading-blue-animated\"></nile-icon>`:nothing}\n </nile-input>\n ${this.menuItems.length > 0 && !this.loading\n ? content\n : nothing}\n </nile-dropdown>\n `;\n } \n \n getVirtualizedContent():TemplateResult{\n return html`\n <nile-menu class=\"virtualized__menu\" @nile-select=${this.handleSelect} id=\"content-menu\" exportparts=\"menu__items-wrapper:options__wrapper\">\n ${virtualize({\n items: this.menuItems,\n renderItem: (item:any):TemplateResult=>this.getItemRenderFunction(item),\n\t\t\t\t\tscroller:true\n })}\n </nile-menu>\n `\n }\n\n getContent():TemplateResult{\n return html`\n <nile-menu id=\"content-menu\" @nile-select=${this.handleSelect} exportparts=\"menu__items-wrapper:options__wrapper\">\n ${this.menuItems.map((item: any) => this.getItemRenderFunction(item))}\n </nile-menu>`\n }\n\n getItemRenderFunction(item:any):TemplateResult{\n const value=this.renderItemFunction(item)\n return html`\n <nile-menu-item value=${value}>\n ${value}\n </nile-menu-item>\n `;\n }\n\n private handleSelect(event: CustomEvent) {\n this.value = event.detail.value;\n this.emit('nile-complete', { value: event.detail.value });\n this.emit('nile-input', { value: event.detail.value });\n this.isDropdownOpen = false;\n this.dropdownElement?.hide();\n }\n\n private setVirtualMenuWidth() {\n const maxLengthOption = this.menuItems\n .reduce((acc: number, curr: any) => {\n const currLength = this.renderItemFunction(curr).length\n return acc > currLength ? acc : currLength\n }, 0)\n const defaultWith = 110;\n const pixelMultiplier = 9.5;\n const menuWidth = maxLengthOption * pixelMultiplier < defaultWith ? defaultWith : maxLengthOption * pixelMultiplier;\n this.style.setProperty(\"--virtual-scroll-container-width\", menuWidth + \"px\");\n }\n\n private handleSearch(event: CustomEvent) {\n this.value = event.detail.value.toLowerCase();\n\n // Filter menu items based on the search value\n this.menuItems = this.applyFilter(this.allMenuItems,this.filterFunction);\n\n this.isDropdownOpen = this.menuItems.length > 0;\n if (this.isDropdownOpen) this.dropdownElement?.show();\n }\n\n public handleFocus() {\n if (!this.openOnFocus) {\n return;\n }\n\n // Delay opening the dropdown to allow focus to take effect\n setTimeout(() => {\n this.isDropdownOpen = true;\n this.dropdownElement?.show();\n }, 300);\n }\n\n private handleClick() {\n this.isDropdownOpen = true;\n this.dropdownElement?.show();\n }\n\n applyFilter<T>(list: T[], filterFn: (item: T,searchValue?:string) => boolean): T[] {\n if(typeof(list)!=='object') return []\n const res:T[]=[]\n list.forEach( el=> filterFn(el,this.value) && res.push(el) )\n return res\n }\n\n}\n\nexport default NileAutoComplete;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-auto-complete': NileAutoComplete;\n }\n}"]}

package/dist/src/nile-chip/nile-chip.d.ts CHANGED Viewed

@@ -43,8 +43,8 @@ export declare class NileChip extends NileElement {
     errorIndexes: number[];
     helpText: string;
     errorMessage: string;
-    filterFunction: any;
-    renderItemFunction: any;
+    filterFunction: (item: string, searchedValue: string) => boolean;
+    renderItemFunction: (item: any) => string;
     protected updated(changedProperties: PropertyValues): void;
     connectedCallback(): void;
     disconnectedCallback(): void;

package/dist/src/nile-chip/nile-chip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-chip.js","sourceRoot":"","sources":["../../../src/nile-chip/nile-chip.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 {\n LitElement,\n html,\n CSSResultArray,\n TemplateResult,\n PropertyValues,\n} from 'lit';\nimport { customElement, query, state, property } from 'lit/decorators.js';\nimport { styles } from './nile-chip.css';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HasSlotController } from '../internal/slot';\nimport NileElement, { NileFormControl } from '../internal/nile-element';\n\ninterface CustomEventDetail {\n value: string;\n}\n\n@customElement('nile-chip')\nexport class NileChip extends NileElement {\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n private readonly hasSlotController = new HasSlotController(\n this,\n 'help-text',\n 'label'\n );\n\n @state() tags: string[] = [];\n\n @state() inputValue: string = '';\n\n @state() isDropdownOpen: boolean = false;\n\n @query('nile-auto-complete') autoComplete!: any;\n\n /* Sets the input to a warning state, changing its visual appearance. /\n @property({ type: Boolean }) warning = false;\n\n /* Sets the input to an error state, changing its visual appearance. /\n @property({ type: Boolean }) error = false;\n\n /* Sets the input to a success state, changing its visual appearance. /\n @property({ type: Boolean }) success = false;\n\n /* Disables the duplicate entries. /\n @property({ type: Boolean }) noDuplicates = false;\n\n /* The input's label. If you need to display HTML, use the `label` slot instead. /\n @property() label = '';\n\n /* Adds a clear button when the input is not empty. /\n @property({ type: Boolean }) acceptUserInput = false;\n\n /* Adds a clear button when the input is not empty. /\n @property({ type: Boolean }) clearable = false;\n\n /* Placeholder text to show as a hint when the input is empty. /\n @property() placeholder = 'type here...';\n\n /* Makes the input readonly. /\n @property({ type: Boolean, reflect: true }) readonly = false;\n\n /* Disables the input. /\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n // AUTO-COMPLETE-OPTIONS\n\n /* Virtual scroll in dropdown options. */\n @property({ type: Boolean }) enableVirtualScroll = false;\n\n @property({ type: Array }) autoCompleteOptions: any[] = [];\n\n @property({ type: Array }) filteredAutoCompleteOptions: any[] = [];\n\n @property({ type: Array }) value: any[] = [];\n\n @property({ type: Boolean }) noWrap: boolean = false;\n\n @property({ type: Boolean }) loading: boolean = false;\n\n @property({ type: Array }) errorIndexes: number[] = [];\n\n @property({ attribute: 'help-text', reflect: true }) helpText = '';\n\n @property({ attribute: 'error-message', reflect: true }) errorMessage = '';\n\n @property({ attribute:false}) filterFunction: any = (item:string,searchedValue:string)=>item.toLowerCase().includes(searchedValue.toLowerCase());\n\n @property({ attribute:false}) renderItemFunction: any = (item:any)=>item;\n\n protected updated(changedProperties: PropertyValues): void {\n super.updated(changedProperties);\n if (changedProperties.has('autoCompleteOptions')) {\n this.filteredAutoCompleteOptions = [...this.autoCompleteOptions];\n if (this.noDuplicates) {\n this.filteredAutoCompleteOptions =\n this.filteredAutoCompleteOptions.filter(\n option => !this.value.includes(option)\n );\n }\n }\n if (changedProperties.has('value')){\n this.tags = [...this.value];\n this.onTagsChanged();\n }\n if (changedProperties.has('tags')){\n this.onTagsChanged();\n }\n }\n\n connectedCallback() {\n super.connectedCallback();\n if (this.noDuplicates) {\n this.filteredAutoCompleteOptions =\n this.filteredAutoCompleteOptions.filter(\n option => !this.value.includes(option)\n );\n }\n this.emit('nile-init');\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.emit('nile-destroy');\n }\n\n render() {\n // Check if slots are present\n const hasLabelSlot = this.hasSlotController.test('label');\n const hasHelpTextSlot = this.hasSlotController.test('help-text');\n\n // Check if label and help text are present\n const hasLabel = this.label ? true : !!hasLabelSlot;\n\n const hasHelpText = this.helpText ? true : false;\n const hasErrorMessage = this.errorMessage ? true : false;\n\n return html`\n <div\n part=\"form-control\"\n class=${classMap({\n 'form-control': true,\n 'form-control--medium': true,\n 'form-control--has-label': hasLabel,\n 'form-control--has-help-text': hasHelpText,\n 'nile-chip--disabled': this.disabled,\n })}\n >\n <label\n part=\"form-control-label\"\n class=\"form-control__label\"\n for=\"input\"\n aria-hidden=${hasLabel ? 'false' : 'true'}\n >\n <slot name=\"label\">${this.label}</slot>\n </label>\n\n <div\n class=${classMap({\n 'nile-chip': true,\n 'nile-chip--warning': this.warning,\n 'nile-chip--error': this.error,\n 'nile-chip--success': this.success,\n 'nile-chip--no-wrap': this.noWrap,\n })}\n >\n ${this.tags.map(\n (tag, index) => html`\n <nile-tag\n class=${classMap({\n 'nile-chip__tags': true,\n })}\n .variant=${this.errorIndexes.includes(index) ? 'error' : 'normal'}\n @nile-remove=${() => this.handleRemove(tag)}\n removable\n pill\n >\n ${tag}\n </nile-tag>\n `\n )}\n <div class=\"nile-chip__auto-complete\">\n <nile-auto-complete\n .enableVirtualScroll=${this.enableVirtualScroll}\n .allMenuItems=${this.filteredAutoCompleteOptions}\n .filterFunction=${this.filterFunction}\n .renderItemFunction=${this.renderItemFunction}\n .loading=\"${this.loading}\"\n .value=${this.inputValue}\n ?isDropdownOpen=${this.isDropdownOpen}\n .noBorder=${true}\n openOnFocus\n exportparts=\"options__wrapper\"\n .placeholder=${this.placeholder}\n @nile-input=${this.handleInputChange}\n @keydown=${this.handleInputKeydown}\n @nile-focus=${this.handleFocus}\n @nile-complete=${this.handleSelect}\n ></nile-auto-complete>\n </div>\n <slot\n name=\"help-text\"\n part=\"form-control-help-text\"\n id=\"help-text\"\n class=\"form-control__help-text\"\n aria-hidden=${hasHelpText ? 'false' : 'true'}\n >\n ${this.helpText}\n </slot>\n </div>\n ${\n hasHelpText\n ? html`\n <nile-form-help-text>${this.helpText}</nile-form-help-text>\n `\n : ``\n }\n\n ${\n hasErrorMessage\n ? html`\n <nile-form-error-message\n >${this.errorMessage}</nile-form-error-message\n >\n `\n : ``\n }\n </div>\n `;\n }\n\n private handleSelect(event: CustomEvent<CustomEventDetail>) {\n // Add the selected value to the tags array only if it doesn't already exist\n if (!this.noDuplicates \|\| !this.tags.includes(event.detail.value)) {\n this.tags = [...this.tags, event.detail.value];\n this.emit('nile-chip-change', { value: this.tags });\n this.resetInput();\n }\n }\n\n private handleRemove(value: string) {\n // Remove the tag from the tags array\n this.tags = this.tags.filter(tag => tag !== value);\n\n if (this.noDuplicates && this.autoCompleteOptions.includes(value)) {\n this.filteredAutoCompleteOptions = [\n ...this.filteredAutoCompleteOptions,\n value,\n ];\n }\n this.emit('nile-chip-change', { value: this.tags });\n }\n\n private handleInputChange(event: CustomEvent<CustomEventDetail>) {\n // Update the input value\n this.inputValue = event.detail.value;\n }\n\n private handleInputKeydown(event: KeyboardEvent) {\n if (!this.acceptUserInput) {\n return;\n }\n\n if(event.key === 'Tab'){\n event.preventDefault()\n }\n \n if (\n (event.key === 'Enter' \|\| event.key === 'Tab' ) \n && this.inputValue \n && (!this.noDuplicates \|\| !this.tags.includes(this.inputValue))\n ) {\n event.preventDefault()\n this.tags = [...this.tags, this.inputValue];\n this.resetInput();\n this.emit('nile-chip-change', { value: this.tags });\n }\n\n if(\n (event.key === 'Enter'\|\| event.key === 'Tab' ) \n && this.inputValue \n && (this.noDuplicates \|\| this.tags.includes(this.inputValue))\n ){\n this.emit('nile-duplicates-blocked');\n }\n }\n\n private handleFocus() {\n this.isDropdownOpen = true;\n }\n\n onTagsChanged() {\n if (this.noDuplicates)\n this.filteredAutoCompleteOptions = this.filteredAutoCompleteOptions.filter(option => !this.tags.includes(option));\n }\n\n\n private resetInput() {\n // Reset the input-related properties\n this.inputValue = '';\n this.isDropdownOpen = false;\n this.autoComplete.value = '';\n this.autoComplete.handleFocus();\n }\n}\n\nexport default NileChip;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-chip': NileChip;\n }\n}\n"]}
1	+ {"version":3,"file":"nile-chip.js","sourceRoot":"","sources":["../../../src/nile-chip/nile-chip.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 {\n LitElement,\n html,\n CSSResultArray,\n TemplateResult,\n PropertyValues,\n} from 'lit';\nimport { customElement, query, state, property } from 'lit/decorators.js';\nimport { styles } from './nile-chip.css';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HasSlotController } from '../internal/slot';\nimport NileElement, { NileFormControl } from '../internal/nile-element';\n\ninterface CustomEventDetail {\n value: string;\n}\n\n@customElement('nile-chip')\nexport class NileChip extends NileElement {\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n private readonly hasSlotController = new HasSlotController(\n this,\n 'help-text',\n 'label'\n );\n\n @state() tags: string[] = [];\n\n @state() inputValue: string = '';\n\n @state() isDropdownOpen: boolean = false;\n\n @query('nile-auto-complete') autoComplete!: any;\n\n /* Sets the input to a warning state, changing its visual appearance. /\n @property({ type: Boolean }) warning = false;\n\n /* Sets the input to an error state, changing its visual appearance. /\n @property({ type: Boolean }) error = false;\n\n /* Sets the input to a success state, changing its visual appearance. /\n @property({ type: Boolean }) success = false;\n\n /* Disables the duplicate entries. /\n @property({ type: Boolean }) noDuplicates = false;\n\n /* The input's label. If you need to display HTML, use the `label` slot instead. /\n @property() label = '';\n\n /* Adds a clear button when the input is not empty. /\n @property({ type: Boolean }) acceptUserInput = false;\n\n /* Adds a clear button when the input is not empty. /\n @property({ type: Boolean }) clearable = false;\n\n /* Placeholder text to show as a hint when the input is empty. /\n @property() placeholder = 'type here...';\n\n /* Makes the input readonly. /\n @property({ type: Boolean, reflect: true }) readonly = false;\n\n /* Disables the input. /\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n // AUTO-COMPLETE-OPTIONS\n\n /* Virtual scroll in dropdown options. */\n @property({ type: Boolean }) enableVirtualScroll = false;\n\n @property({ type: Array }) autoCompleteOptions: any[] = [];\n\n @property({ type: Array }) filteredAutoCompleteOptions: any[] = [];\n\n @property({ type: Array }) value: any[] = [];\n\n @property({ type: Boolean }) noWrap: boolean = false;\n\n @property({ type: Boolean }) loading: boolean = false;\n\n @property({ type: Array }) errorIndexes: number[] = [];\n\n @property({ attribute: 'help-text', reflect: true }) helpText = '';\n\n @property({ attribute: 'error-message', reflect: true }) errorMessage = '';\n\n @property({ attribute:false}) filterFunction: (item:string,searchedValue:string)=>boolean = (item:string,searchedValue:string)=>item.toLowerCase().includes(searchedValue.toLowerCase());\n\n @property({ attribute:false}) renderItemFunction: (item:any)=>string = (item:any)=>item;\n\n protected updated(changedProperties: PropertyValues): void {\n super.updated(changedProperties);\n if (changedProperties.has('autoCompleteOptions')) {\n this.filteredAutoCompleteOptions = [...this.autoCompleteOptions];\n if (this.noDuplicates) {\n this.filteredAutoCompleteOptions =\n this.filteredAutoCompleteOptions.filter(\n option => !this.value.includes(option)\n );\n }\n }\n if (changedProperties.has('value')){\n this.tags = [...this.value];\n this.onTagsChanged();\n }\n if (changedProperties.has('tags')){\n this.onTagsChanged();\n }\n }\n\n connectedCallback() {\n super.connectedCallback();\n if (this.noDuplicates) {\n this.filteredAutoCompleteOptions =\n this.filteredAutoCompleteOptions.filter(\n option => !this.value.includes(option)\n );\n }\n this.emit('nile-init');\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.emit('nile-destroy');\n }\n\n render() {\n // Check if slots are present\n const hasLabelSlot = this.hasSlotController.test('label');\n const hasHelpTextSlot = this.hasSlotController.test('help-text');\n\n // Check if label and help text are present\n const hasLabel = this.label ? true : !!hasLabelSlot;\n\n const hasHelpText = this.helpText ? true : false;\n const hasErrorMessage = this.errorMessage ? true : false;\n\n return html`\n <div\n part=\"form-control\"\n class=${classMap({\n 'form-control': true,\n 'form-control--medium': true,\n 'form-control--has-label': hasLabel,\n 'form-control--has-help-text': hasHelpText,\n 'nile-chip--disabled': this.disabled,\n })}\n >\n <label\n part=\"form-control-label\"\n class=\"form-control__label\"\n for=\"input\"\n aria-hidden=${hasLabel ? 'false' : 'true'}\n >\n <slot name=\"label\">${this.label}</slot>\n </label>\n\n <div\n class=${classMap({\n 'nile-chip': true,\n 'nile-chip--warning': this.warning,\n 'nile-chip--error': this.error,\n 'nile-chip--success': this.success,\n 'nile-chip--no-wrap': this.noWrap,\n })}\n >\n ${this.tags.map(\n (tag, index) => html`\n <nile-tag\n class=${classMap({\n 'nile-chip__tags': true,\n })}\n .variant=${this.errorIndexes.includes(index) ? 'error' : 'normal'}\n @nile-remove=${() => this.handleRemove(tag)}\n removable\n pill\n >\n ${tag}\n </nile-tag>\n `\n )}\n <div class=\"nile-chip__auto-complete\">\n <nile-auto-complete\n .enableVirtualScroll=${this.enableVirtualScroll}\n .allMenuItems=${this.filteredAutoCompleteOptions}\n .filterFunction=${this.filterFunction}\n .renderItemFunction=${this.renderItemFunction}\n .loading=\"${this.loading}\"\n .value=${this.inputValue}\n ?isDropdownOpen=${this.isDropdownOpen}\n .noBorder=${true}\n openOnFocus\n exportparts=\"options__wrapper\"\n .placeholder=${this.placeholder}\n @nile-input=${this.handleInputChange}\n @keydown=${this.handleInputKeydown}\n @nile-focus=${this.handleFocus}\n @nile-complete=${this.handleSelect}\n ></nile-auto-complete>\n </div>\n <slot\n name=\"help-text\"\n part=\"form-control-help-text\"\n id=\"help-text\"\n class=\"form-control__help-text\"\n aria-hidden=${hasHelpText ? 'false' : 'true'}\n >\n ${this.helpText}\n </slot>\n </div>\n ${\n hasHelpText\n ? html`\n <nile-form-help-text>${this.helpText}</nile-form-help-text>\n `\n : ``\n }\n\n ${\n hasErrorMessage\n ? html`\n <nile-form-error-message\n >${this.errorMessage}</nile-form-error-message\n >\n `\n : ``\n }\n </div>\n `;\n }\n\n private handleSelect(event: CustomEvent<CustomEventDetail>) {\n // Add the selected value to the tags array only if it doesn't already exist\n if (!this.noDuplicates \|\| !this.tags.includes(event.detail.value)) {\n this.tags = [...this.tags, event.detail.value];\n this.emit('nile-chip-change', { value: this.tags });\n this.resetInput();\n }\n }\n\n private handleRemove(value: string) {\n // Remove the tag from the tags array\n this.tags = this.tags.filter(tag => tag !== value);\n\n if (this.noDuplicates && this.autoCompleteOptions.includes(value)) {\n this.filteredAutoCompleteOptions = [\n ...this.filteredAutoCompleteOptions,\n value,\n ];\n }\n this.emit('nile-chip-change', { value: this.tags });\n }\n\n private handleInputChange(event: CustomEvent<CustomEventDetail>) {\n // Update the input value\n this.inputValue = event.detail.value;\n }\n\n private handleInputKeydown(event: KeyboardEvent) {\n if (!this.acceptUserInput) {\n return;\n }\n\n if(event.key === 'Tab'){\n event.preventDefault()\n }\n \n if (\n (event.key === 'Enter' \|\| event.key === 'Tab' ) \n && this.inputValue \n && (!this.noDuplicates \|\| !this.tags.includes(this.inputValue))\n ) {\n event.preventDefault()\n this.tags = [...this.tags, this.inputValue];\n this.resetInput();\n this.emit('nile-chip-change', { value: this.tags });\n }\n\n if(\n (event.key === 'Enter'\|\| event.key === 'Tab' ) \n && this.inputValue \n && (this.noDuplicates \|\| this.tags.includes(this.inputValue))\n ){\n this.emit('nile-duplicates-blocked');\n }\n }\n\n private handleFocus() {\n this.isDropdownOpen = true;\n }\n\n onTagsChanged() {\n if (this.noDuplicates)\n this.filteredAutoCompleteOptions = this.filteredAutoCompleteOptions.filter(option => !this.tags.includes(option));\n }\n\n\n private resetInput() {\n // Reset the input-related properties\n this.inputValue = '';\n this.isDropdownOpen = false;\n this.autoComplete.value = '';\n this.autoComplete.handleFocus();\n }\n}\n\nexport default NileChip;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-chip': NileChip;\n }\n}\n"]}

package/dist/src/nile-code-editor/nile-code-editor.d.ts CHANGED Viewed

@@ -27,6 +27,7 @@ export declare class NileCodeEditor extends NileElement {
     error: boolean;
     noborder: boolean;
     multiline: boolean;
+    enableFoldGutters: boolean;
     allowVariableInCustomSuggestion: boolean;
     lineNumbers: boolean;
     disableSyntaxHighlighting: boolean;

package/dist/src/nile-code-editor/nile-code-editor.js CHANGED Viewed

@@ -42,6 +42,7 @@ let NileCodeEditor = class NileCodeEditor extends NileElement {
         this.error = false;
         this.noborder = false;
         this.multiline = false;
+        this.enableFoldGutters = false;
         this.allowVariableInCustomSuggestion = false;
         this.lineNumbers = false;
         this.disableSyntaxHighlighting = false;
@@ -228,7 +229,7 @@ let NileCodeEditor = class NileCodeEditor extends NileElement {
             extensions: [
                 basicSetup({
                     highlightActiveLine: false,
-                    foldGutter: true,
+                    foldGutter: this.enableFoldGutters,
                 }),
                 lineNumbersExtension,
                 readOnlyExtension,
@@ -423,6 +424,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true, attribute: true })
 ], NileCodeEditor.prototype, "multiline", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: true })
+], NileCodeEditor.prototype, "enableFoldGutters", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: true })
 ], NileCodeEditor.prototype, "allowVariableInCustomSuggestion", void 0);