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

@aquera/nile-elements 0.1.21 → 0.1.23

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 (54) hide show

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

@@ -4,7 +4,7 @@
  * 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 { CSSResultArray, TemplateResult } from 'lit';
+import { CSSResultArray, TemplateResult, PropertyValues } from 'lit';
 import NileElement from '../internal/nile-element';
 export declare class NileChip extends NileElement {
     static get styles(): CSSResultArray;
@@ -33,6 +33,8 @@ export declare class NileChip extends NileElement {
     readonly: boolean;
     /** Disables the input. */
     disabled: boolean;
+    /** Virtual scroll in  dropdown options. */
+    enableVirtualScroll: boolean;
     autoCompleteOptions: any[];
     filteredAutoCompleteOptions: any[];
     value: any[];
@@ -42,18 +44,18 @@ export declare class NileChip extends NileElement {
     helpText: string;
     errorMessage: string;
     filterFunction: any;
-    onAutoCompleteOptionsChanged(): void;
-    onValueChanged(): void;
-    onTagsChanged(): void;
+    renderItemFunction: any;
+    protected updated(changedProperties: PropertyValues): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    render(): TemplateResult<1>;
     private handleSelect;
     private handleRemove;
     private handleInputChange;
     private handleInputKeydown;
     private handleFocus;
+    onTagsChanged(): void;
     private resetInput;
-    render(): TemplateResult<1>;
 }
 export default NileChip;
 declare global {

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

@@ -10,7 +10,6 @@ import { customElement, query, state, property } from 'lit/decorators.js';
 import { styles } from './nile-chip.css';
 import { classMap } from 'lit/directives/class-map.js';
 import { HasSlotController } from '../internal/slot';
-import { watch } from '../internal/watch';
 import NileElement from '../internal/nile-element';
 let NileChip = class NileChip extends NileElement {
     constructor() {
@@ -39,7 +38,9 @@ let NileChip = class NileChip extends NileElement {
         this.readonly = false;
         /** Disables the input. */
         this.disabled = false;
-        // Auto-complete options
+        // AUTO-COMPLETE-OPTIONS
+        /** Virtual scroll in  dropdown options. */
+        this.enableVirtualScroll = false;
         this.autoCompleteOptions = [];
         this.filteredAutoCompleteOptions = [];
         this.value = [];
@@ -49,25 +50,26 @@ let NileChip = class NileChip extends NileElement {
         this.helpText = '';
         this.errorMessage = '';
         this.filterFunction = (item, searchedValue) => item.toLowerCase().includes(searchedValue.toLowerCase());
+        this.renderItemFunction = (item) => item;
     }
     static get styles() {
         return [styles];
     }
-    onAutoCompleteOptionsChanged() {
-        this.filteredAutoCompleteOptions = [...this.autoCompleteOptions];
-        if (this.noDuplicates) {
-            this.filteredAutoCompleteOptions =
-                this.filteredAutoCompleteOptions.filter(option => !this.value.includes(option));
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('autoCompleteOptions')) {
+            this.filteredAutoCompleteOptions = [...this.autoCompleteOptions];
+            if (this.noDuplicates) {
+                this.filteredAutoCompleteOptions =
+                    this.filteredAutoCompleteOptions.filter(option => !this.value.includes(option));
+            }
         }
-    }
-    onValueChanged() {
-        this.tags = [...this.value];
-        this.onTagsChanged();
-    }
-    onTagsChanged() {
-        if (this.noDuplicates) {
-            this.filteredAutoCompleteOptions =
-                this.filteredAutoCompleteOptions.filter(option => !this.tags.includes(option));
+        if (changedProperties.has('value')) {
+            this.tags = [...this.value];
+            this.onTagsChanged();
+        }
+        if (changedProperties.has('tags')) {
+            this.onTagsChanged();
         }
     }
     connectedCallback() {
@@ -82,60 +84,6 @@ let NileChip = class NileChip extends NileElement {
         super.disconnectedCallback();
         this.emit('nile-destroy');
     }
-    handleSelect(event) {
-        // Add the selected value to the tags array only if it doesn't already exist
-        if (!this.noDuplicates || !this.tags.includes(event.detail.value)) {
-            this.tags = [...this.tags, event.detail.value];
-            this.emit('nile-chip-change', { value: this.tags });
-            this.resetInput();
-        }
-    }
-    handleRemove(value) {
-        // Remove the tag from the tags array
-        this.tags = this.tags.filter(tag => tag !== value);
-        if (this.noDuplicates && this.autoCompleteOptions.includes(value)) {
-            this.filteredAutoCompleteOptions = [
-                ...this.filteredAutoCompleteOptions,
-                value,
-            ];
-        }
-        this.emit('nile-chip-change', { value: this.tags });
-    }
-    handleInputChange(event) {
-        // Update the input value
-        this.inputValue = event.detail.value;
-    }
-    handleInputKeydown(event) {
-        if (!this.acceptUserInput) {
-            return;
-        }
-        if (event.key === 'Tab') {
-            event.preventDefault();
-        }
-        if ((event.key === 'Enter' || event.key === 'Tab')
-            && this.inputValue
-            && (!this.noDuplicates || !this.tags.includes(this.inputValue))) {
-            event.preventDefault();
-            this.tags = [...this.tags, this.inputValue];
-            this.resetInput();
-            this.emit('nile-chip-change', { value: this.tags });
-        }
-        if ((event.key === 'Enter' || event.key === 'Tab')
-            && this.inputValue
-            && (this.noDuplicates || this.tags.includes(this.inputValue))) {
-            this.emit('nile-duplicates-blocked');
-        }
-    }
-    handleFocus() {
-        this.isDropdownOpen = true;
-    }
-    resetInput() {
-        // Reset the input-related properties
-        this.inputValue = '';
-        this.isDropdownOpen = false;
-        this.autoComplete.value = '';
-        this.autoComplete.handleFocus();
-    }
     render() {
         // Check if slots are present
         const hasLabelSlot = this.hasSlotController.test('label');
@@ -188,8 +136,10 @@ let NileChip = class NileChip extends NileElement {
             `)}
           <div class="nile-chip__auto-complete">
             <nile-auto-complete
+              .enableVirtualScroll=${this.enableVirtualScroll}
               .allMenuItems=${this.filteredAutoCompleteOptions}
               .filterFunction=${this.filterFunction}
+              .renderItemFunction=${this.renderItemFunction}
               .loading="${this.loading}"
               .value=${this.inputValue}
               ?isDropdownOpen=${this.isDropdownOpen}
@@ -229,6 +179,64 @@ let NileChip = class NileChip extends NileElement {
       </div>
     `;
     }
+    handleSelect(event) {
+        // Add the selected value to the tags array only if it doesn't already exist
+        if (!this.noDuplicates || !this.tags.includes(event.detail.value)) {
+            this.tags = [...this.tags, event.detail.value];
+            this.emit('nile-chip-change', { value: this.tags });
+            this.resetInput();
+        }
+    }
+    handleRemove(value) {
+        // Remove the tag from the tags array
+        this.tags = this.tags.filter(tag => tag !== value);
+        if (this.noDuplicates && this.autoCompleteOptions.includes(value)) {
+            this.filteredAutoCompleteOptions = [
+                ...this.filteredAutoCompleteOptions,
+                value,
+            ];
+        }
+        this.emit('nile-chip-change', { value: this.tags });
+    }
+    handleInputChange(event) {
+        // Update the input value
+        this.inputValue = event.detail.value;
+    }
+    handleInputKeydown(event) {
+        if (!this.acceptUserInput) {
+            return;
+        }
+        if (event.key === 'Tab') {
+            event.preventDefault();
+        }
+        if ((event.key === 'Enter' || event.key === 'Tab')
+            && this.inputValue
+            && (!this.noDuplicates || !this.tags.includes(this.inputValue))) {
+            event.preventDefault();
+            this.tags = [...this.tags, this.inputValue];
+            this.resetInput();
+            this.emit('nile-chip-change', { value: this.tags });
+        }
+        if ((event.key === 'Enter' || event.key === 'Tab')
+            && this.inputValue
+            && (this.noDuplicates || this.tags.includes(this.inputValue))) {
+            this.emit('nile-duplicates-blocked');
+        }
+    }
+    handleFocus() {
+        this.isDropdownOpen = true;
+    }
+    onTagsChanged() {
+        if (this.noDuplicates)
+            this.filteredAutoCompleteOptions = this.filteredAutoCompleteOptions.filter(option => !this.tags.includes(option));
+    }
+    resetInput() {
+        // Reset the input-related properties
+        this.inputValue = '';
+        this.isDropdownOpen = false;
+        this.autoComplete.value = '';
+        this.autoComplete.handleFocus();
+    }
 };
 __decorate([
     state()
@@ -272,6 +280,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NileChip.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileChip.prototype, "enableVirtualScroll", void 0);
 __decorate([
     property({ type: Array })
 ], NileChip.prototype, "autoCompleteOptions", void 0);
@@ -300,14 +311,8 @@ __decorate([
     property({ attribute: false })
 ], NileChip.prototype, "filterFunction", void 0);
 __decorate([
-    watch('autoCompleteOptions')
-], NileChip.prototype, "onAutoCompleteOptionsChanged", null);
-__decorate([
-    watch('value')
-], NileChip.prototype, "onValueChanged", null);
-__decorate([
-    watch('tags')
-], NileChip.prototype, "onTagsChanged", null);
+    property({ attribute: false })
+], NileChip.prototype, "renderItemFunction", void 0);
 NileChip = __decorate([
     customElement('nile-chip')
 ], NileChip);

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} 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 { watch } from '../internal/watch';\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 @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 @watch('autoCompleteOptions')\n onAutoCompleteOptionsChanged() {\n this.filteredAutoCompleteOptions = [...this.autoCompleteOptions];\n\n if (this.noDuplicates) {\n this.filteredAutoCompleteOptions =\n this.filteredAutoCompleteOptions.filter(\n option => !this.value.includes(option)\n );\n }\n }\n\n @watch('value')\n onValueChanged() {\n this.tags = [...this.value];\n this.onTagsChanged();\n }\n\n @watch('tags')\n onTagsChanged() {\n if (this.noDuplicates) {\n this.filteredAutoCompleteOptions =\n this.filteredAutoCompleteOptions.filter(\n option => !this.tags.includes(option)\n );\n }\n }\n\n connectedCallback() {\n super.connectedCallback();\n\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 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 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 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 .allMenuItems=${this.filteredAutoCompleteOptions}\n .filterFunction=${this.filterFunction}\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\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: 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"]}

package/dist/src/nile-radio-group/nile-radio-group.css.js CHANGED Viewed

@@ -7,7 +7,7 @@ export default css `
   .form-control--inline-radio ::slotted(nile-radio) {
     display: inline-block;
-    margin-right: 24px !important;
+    margin-right: 24px;
   }
   .form-control {

package/dist/src/nile-radio-group/nile-radio-group.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-radio-group.css.js","sourceRoot":"","sources":["../../../src/nile-radio-group/nile-radio-group.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CjB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport default css`\n\n :host {\n display: block;\n }\n\n .form-control--inline-radio ::slotted(nile-radio) {\n display: inline-block;\n margin-right: 24px ~~!important~~;\n }\n\n .form-control {\n border: none;\n padding: 0;\n margin: 0;\n }\n\n .form-control__label {\n padding: 0;\n font-size: 14px;\n color: var(--nile-colors-dark-900);\n font-family: var(--nile-font-family-serif);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n .radio-group--required .radio-group__label::after {\n content: '*';\n margin-inline-start: -2px;\n }\n\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n`;\n"]}
1	+ {"version":3,"file":"nile-radio-group.css.js","sourceRoot":"","sources":["../../../src/nile-radio-group/nile-radio-group.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CjB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport default css`\n\n :host {\n display: block;\n }\n\n .form-control--inline-radio ::slotted(nile-radio) {\n display: inline-block;\n margin-right: 24px;\n }\n\n .form-control {\n border: none;\n padding: 0;\n margin: 0;\n }\n\n .form-control__label {\n padding: 0;\n font-size: 14px;\n color: var(--nile-colors-dark-900);\n font-family: var(--nile-font-family-serif);\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n .radio-group--required .radio-group__label::after {\n content: '*';\n margin-inline-start: -2px;\n }\n\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n`;\n"]}

package/dist/src/nile-slide-toggle/nile-slide-toggle.css.js CHANGED Viewed

@@ -57,6 +57,11 @@ export default css `
     line-height: 18px;
   }
+  .nile-slide--disabled .nile-slide-toggle__label,
+  .nile-slide--disabled .nile-slide-toggle__sublabel{
+    color: var(--nile-colors-dark-500);
+  }
   .nile-slide-toggle__switch input {
     opacity: 0;
     width: 0;

package/dist/src/nile-slide-toggle/nile-slide-toggle.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-slide-toggle.css.js","sourceRoot":"","sources":["../../../src/nile-slide-toggle/nile-slide-toggle.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmIjB~~,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport default css`\n :host{\n --slide-toggle-width:auto;\n display:inline-block;\n width:var(--slide-toggle-width);\n }\n\n .nile-slide-toggle {\n display: inline-flex;\n align-items: baseline;\n justify-content:space-between;\n width:100%;\n }\n\n .nile-slide-toggle--reverse{\n flex-direction:row-reverse;\n }\n\n .nile-slide-toggle__switch {\n flex: 0 0 auto;\n position: relative;\n display: inline-block;\n width: 36px;\n height: 20px;\n line-height: 22px;\n }\n\n .nile-slide-toggle__switch--left{\n margin-right: 8px;\n }\n\n .nile-slide-toggle__switch--right{\n margin-left: 8px;\n }\n\n .nile-slide-toggle__label {\n display: flex;\n flex-direction: column;\n gap: 2px;\n font-family: var(--nile-font-family-serif);\n letter-spacing: 0.2px;\n font-style: normal;\n color: var(--nile-colors-dark-900);\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n }\n\n .nile-slide-toggle__sublabel {\n font-family: var(--nile-font-family-serif);\n letter-spacing: 0.2px;\n font-style: normal;\n color: var(--nile-colors-gray-light-mode-600);\n font-size: 12px;\n font-weight: 400;\n line-height: 18px;\n }\n\n .nile-slide-toggle__switch input {\n opacity: 0;\n width: 0;\n height: 0;\n }\n\n .nile-slide-toggle__slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: var(--nile-slide-toggle-color-background-inactive);\n transition: 0.4s;\n border-radius: 34px;\n }\n\n .nile-slide-toggle__slider:active {\n box-shadow: 0px 0px 0px 1px rgba(133, 170, 209, 0.54);\n }\n\n .nile-slide-toggle__slider:focus {\n box-shadow: 0px 0px 0px 1px rgba(133, 170, 209, 0.54);\n }\n\n .nile-slide-toggle__slider:before {\n position: absolute;\n content: '';\n height: 16px;\n width: 16px;\n bottom: 2px;\n left: 2px;\n background-color: var(--nile-slide-toggle-color-indicator);\n transition: 0.4s;\n border-radius: 50%;\n }\n\n .nile-slide-toggle__switch input:checked + .nile-slide-toggle__slider {\n background-color: var(--nile-slide-toggle-color-background-active);\n }\n\n .nile-slide-toggle__switch input:focus + .nile-slide-toggle__slider {\n box-shadow: 0 0 1px var(--nile-slide-toggle-color-background-active);\n }\n\n .nile-slide-toggle__switch input:checked + .nile-slide-toggle__slider:before {\n transform: translateX(16px);\n }\n\n .nile-slide-toggle__slider.round {\n border-radius: 20px;\n }\n\n .nile-slide-toggle__slider.round:before {\n border-radius: 50%;\n }\n\n .nile-slide--disabled .nile-slide-toggle__slider {\n background-color: var(--nile-colors-dark-200);\n }\n\n .nile-slide--disabled .nile-slide-toggle__switch {\n pointer-events: none;\n cursor: not-allowed;\n }\n\n .nile-slide--disabled\n .nile-slide-toggle__switch\n input:checked\n + .nile-slide-toggle__slider {\n background-color: var(--nile-colors-dark-200);\n }\n`;\n"]}
1	+ {"version":3,"file":"nile-slide-toggle.css.js","sourceRoot":"","sources":["../../../src/nile-slide-toggle/nile-slide-toggle.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwIjB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport default css`\n :host{\n --slide-toggle-width:auto;\n display:inline-block;\n width:var(--slide-toggle-width);\n }\n\n .nile-slide-toggle {\n display: inline-flex;\n align-items: baseline;\n justify-content:space-between;\n width:100%;\n }\n\n .nile-slide-toggle--reverse{\n flex-direction:row-reverse;\n }\n\n .nile-slide-toggle__switch {\n flex: 0 0 auto;\n position: relative;\n display: inline-block;\n width: 36px;\n height: 20px;\n line-height: 22px;\n }\n\n .nile-slide-toggle__switch--left{\n margin-right: 8px;\n }\n\n .nile-slide-toggle__switch--right{\n margin-left: 8px;\n }\n\n .nile-slide-toggle__label {\n display: flex;\n flex-direction: column;\n gap: 2px;\n font-family: var(--nile-font-family-serif);\n letter-spacing: 0.2px;\n font-style: normal;\n color: var(--nile-colors-dark-900);\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n }\n\n .nile-slide-toggle__sublabel {\n font-family: var(--nile-font-family-serif);\n letter-spacing: 0.2px;\n font-style: normal;\n color: var(--nile-colors-gray-light-mode-600);\n font-size: 12px;\n font-weight: 400;\n line-height: 18px;\n }\n\n .nile-slide--disabled .nile-slide-toggle__label,\n .nile-slide--disabled .nile-slide-toggle__sublabel{\n color: var(--nile-colors-dark-500);\n }\n\n .nile-slide-toggle__switch input {\n opacity: 0;\n width: 0;\n height: 0;\n }\n\n .nile-slide-toggle__slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: var(--nile-slide-toggle-color-background-inactive);\n transition: 0.4s;\n border-radius: 34px;\n }\n\n .nile-slide-toggle__slider:active {\n box-shadow: 0px 0px 0px 1px rgba(133, 170, 209, 0.54);\n }\n\n .nile-slide-toggle__slider:focus {\n box-shadow: 0px 0px 0px 1px rgba(133, 170, 209, 0.54);\n }\n\n .nile-slide-toggle__slider:before {\n position: absolute;\n content: '';\n height: 16px;\n width: 16px;\n bottom: 2px;\n left: 2px;\n background-color: var(--nile-slide-toggle-color-indicator);\n transition: 0.4s;\n border-radius: 50%;\n }\n\n .nile-slide-toggle__switch input:checked + .nile-slide-toggle__slider {\n background-color: var(--nile-slide-toggle-color-background-active);\n }\n\n .nile-slide-toggle__switch input:focus + .nile-slide-toggle__slider {\n box-shadow: 0 0 1px var(--nile-slide-toggle-color-background-active);\n }\n\n .nile-slide-toggle__switch input:checked + .nile-slide-toggle__slider:before {\n transform: translateX(16px);\n }\n\n .nile-slide-toggle__slider.round {\n border-radius: 20px;\n }\n\n .nile-slide-toggle__slider.round:before {\n border-radius: 50%;\n }\n\n .nile-slide--disabled .nile-slide-toggle__slider {\n background-color: var(--nile-colors-dark-200);\n }\n\n .nile-slide--disabled .nile-slide-toggle__switch {\n pointer-events: none;\n cursor: not-allowed;\n }\n\n .nile-slide--disabled\n .nile-slide-toggle__switch\n input:checked\n + .nile-slide-toggle__slider {\n background-color: var(--nile-colors-dark-200);\n }\n`;\n"]}