@aquera/nile-elements 1.3.3-beta-1.3 → 1.3.3-beta-1.4

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

@@ -0,0 +1,473 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __decorate } from "tslib";
+import { html, } from 'lit';
+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 NileElement from '../internal/nile-element';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { VisibilityManager } from '../utilities/visibility-manager.js';
+let NileChip = class NileChip extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.hasSlotController = new HasSlotController(this, 'help-text', 'label');
+        this.tags = [];
+        this.inputValue = '';
+        this.isDropdownOpen = false;
+        this.tooltips = [];
+        /** Sets the input to a warning state, changing its visual appearance. */
+        this.warning = false;
+        this.noAutoComplete = false;
+        /** Sets the input to an error state, changing its visual appearance. */
+        this.error = false;
+        /** Sets the input to a success state, changing its visual appearance. */
+        this.success = false;
+        /** Disables the duplicate entries. */
+        this.noDuplicates = false;
+        /** The input's label. If you need to display HTML, use the `label` slot instead. */
+        this.label = '';
+        this.tagVariant = ''; // can be '', 'normal', 'success', etc.
+        /** Adds a clear button when the input is not empty. */
+        this.acceptUserInput = false;
+        /** Adds a clear button when the input is not empty. */
+        this.clearable = false;
+        /** Placeholder text to show as a hint when the input is empty. */
+        this.placeholder = 'type here...';
+        /** Makes the input readonly. */
+        this.readonly = false;
+        /** Disables the input. */
+        this.disabled = false;
+        /**
+         * When true, the dropdown menu will be appended to the document body instead of the parent container.
+         * This is useful when the parent has overflow: hidden, clip-path, or transform applied.
+         */
+        this.portal = false;
+        // AUTO-COMPLETE-OPTIONS
+        /** Virtual scroll in  dropdown options. */
+        this.enableVirtualScroll = false;
+        this.autoCompleteOptions = [];
+        this.filteredAutoCompleteOptions = [];
+        this.value = [];
+        this.noWrap = false;
+        this.loading = false;
+        this.errorIndexes = [];
+        this.helpText = '';
+        this.errorMessage = '';
+        this.filterFunction = (item, searchedValue) => item.toLowerCase().includes(searchedValue.toLowerCase());
+        this.renderItemFunction = (item) => item;
+        this.enableVisibilityEffect = false;
+        this.enableTabClose = false;
+        this.showTooltip = false;
+        this.handleDocumentClick = (event) => {
+            const path = event.composedPath();
+            if (!path.includes(this)) {
+                this.isDropdownOpen = false;
+            }
+        };
+    }
+    static get styles() {
+        return [styles];
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('autoCompleteOptions')) {
+            let options = this.autoCompleteOptions;
+            if (typeof options === 'string') {
+                try {
+                    options = JSON.parse(options);
+                }
+                catch (e) {
+                    options = [];
+                }
+            }
+            this.filteredAutoCompleteOptions = Array.isArray(options) ? [...options] : [];
+            if (this.noDuplicates) {
+                this.filteredAutoCompleteOptions =
+                    this.filteredAutoCompleteOptions.filter(option => !this.value.includes(option));
+            }
+        }
+        if (changedProperties.has('value')) {
+            this.tags = [...this.value];
+            this.onTagsChanged();
+        }
+        if (changedProperties.has('tags')) {
+            this.onTagsChanged();
+        }
+    }
+    async firstUpdated(_changed) {
+        await this.updateComplete;
+        const inputTarget = this.noAutoComplete
+            ? this.renderRoot.querySelector('nile-input')?.input
+            : this.autoComplete?.inputElement?.input || this.autoComplete?.inputElement;
+        this.visibilityManager = new VisibilityManager({
+            host: this,
+            target: inputTarget,
+            enableVisibilityEffect: this.enableVisibilityEffect,
+            enableTabClose: this.enableTabClose,
+            isOpen: () => this.isDropdownOpen,
+            onAnchorOutOfView: () => {
+                this.isDropdownOpen = false;
+                if (this.autoComplete) {
+                    this.autoComplete.isDropdownOpen = false;
+                }
+                this.emit('nile-visibility-change', {
+                    visible: false,
+                    reason: 'anchor-out-of-view',
+                });
+            },
+            onDocumentHidden: () => {
+                this.isDropdownOpen = false;
+                if (this.autoComplete) {
+                    this.autoComplete.isDropdownOpen = false;
+                }
+                this.emit('nile-visibility-change', {
+                    visible: false,
+                    reason: 'document-hidden',
+                });
+            },
+            emit: (event, detail) => this.emit(`nile-${event}`, detail),
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('click', this.handleDocumentClick);
+        if (this.noDuplicates) {
+            this.filteredAutoCompleteOptions =
+                this.filteredAutoCompleteOptions.filter(option => !this.value.includes(option));
+        }
+        this.emit('nile-init');
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.visibilityManager?.cleanup();
+        document.removeEventListener('click', this.handleDocumentClick);
+        this.emit('nile-destroy');
+    }
+    render() {
+        // Check if slots are present
+        const hasLabelSlot = this.hasSlotController.test('label');
+        const hasHelpTextSlot = this.hasSlotController.test('help-text');
+        // Check if label and help text are present
+        const hasLabel = this.label ? true : !!hasLabelSlot;
+        const hasHelpText = this.helpText ? true : false;
+        const hasErrorMessage = this.errorMessage ? true : false;
+        return html `
+      <div
+        part="form-control"
+        class=${classMap({
+            'form-control': true,
+            'form-control--medium': true,
+            'form-control--has-label': hasLabel,
+            'form-control--has-help-text': hasHelpText,
+            'nile-chip--disabled': this.disabled,
+        })}
+      >
+        <label
+          part="form-control-label"
+          class="form-control__label"
+          for="input"
+          aria-hidden=${hasLabel ? 'false' : 'true'}
+        >
+          <slot name="label">${this.label}</slot>
+        </label>
+
+        <div
+          part='base' 
+          class=${classMap({
+            'nile-chip': true,
+            'nile-chip--warning': this.warning,
+            'nile-chip--error': this.error,
+            'nile-chip--success': this.success,
+            'nile-chip--no-wrap': this.noWrap,
+            'nile-chip--open': this.isDropdownOpen,
+        })}
+        >
+          ${this.tags.map((tag, index) => {
+            const tooltipContent = this.tooltips[index];
+            const tagTemplate = html `
+              <nile-tag
+                class=${classMap({
+                'nile-chip__tags': true,
+            })}
+                .variant=${this.errorIndexes.includes(index)
+                ? 'error'
+                : 'normal'}
+                @nile-remove=${() => this.handleRemove(tag)}
+                removable
+                ?pill=${this.tagVariant !== 'normal'}
+              >
+                ${unsafeHTML(tag)}
+              </nile-tag>
+            `;
+            if (this.showTooltip && tooltipContent) {
+                return html `
+                <nile-lite-tooltip allowHTML .content=${tooltipContent}>
+                  ${tagTemplate}
+                </nile-lite-tooltip>
+              `;
+            }
+            return tagTemplate;
+        })}
+
+          <div class="nile-chip__auto-complete">
+            ${this.noAutoComplete
+            ? html `
+                  <nile-input
+                    .value=${this.inputValue}
+                    .placeholder=${this.placeholder}
+                    .disabled=${this.disabled}
+                    ?no-border=${true}
+                    ?no-outline=${true}
+                    ?no-padding=${true}
+                    @nile-input=${this.handleInputChange}
+                    @keydown=${this.handleInputKeydown}
+                    @focus=${this.handleFocus}
+                    exportparts="input"
+                  ></nile-input>
+                `
+            : html `
+                  <nile-auto-complete
+                    .enableVirtualScroll=${this.enableVirtualScroll}
+                    .allMenuItems=${this.filteredAutoCompleteOptions}
+                    .filterFunction=${this.filterFunction}
+                    .renderItemFunction=${this.renderItemFunction}
+                    .showTooltips=${this.showTooltip}
+                    .loading="${this.loading}"
+                    .value=${this.inputValue}
+                    ?isDropdownOpen=${this.isDropdownOpen}
+                    .noBorder=${true}
+                    .noOutline=${true}
+                    .noPadding=${true}
+                    .disabled=${this.disabled}
+                    .portal=${this.portal}
+                    openOnFocus
+                    exportparts="options__wrapper, input, base"
+                    .placeholder=${this.placeholder}
+                    @nile-input=${this.handleInputChange}
+                    @keydown=${this.handleInputKeydown}
+                    @nile-focus=${this.handleFocus}
+                    @nile-complete=${this.handleSelect}
+                  ></nile-auto-complete>
+                `}
+          </div>
+        </div>
+        ${hasHelpText
+            ? html ` <nile-form-help-text>${this.helpText}</nile-form-help-text> `
+            : ``}
+        ${hasErrorMessage
+            ? html `
+              <nile-form-error-message
+                >${this.errorMessage}</nile-form-error-message
+              >
+            `
+            : ``}
+      </div>
+    `;
+    }
+    handleSelect(event) {
+        // Add the selected value to the tags array only if it doesn't already exist
+        const selectedValue = event.detail.value;
+        const selectedOption = this.autoCompleteOptions.find((opt) => opt.name === selectedValue || opt.id === selectedValue);
+        let tooltipContent = null;
+        if (this.showTooltip) {
+            if (selectedOption?.tooltip?.content) {
+                const { content, for: showFor } = selectedOption.tooltip;
+                if (!showFor || showFor === 'tag') {
+                    if (content instanceof Promise) {
+                        this.tooltips = [...this.tooltips, 'Loading...'];
+                        const currentIndex = this.tooltips.length - 1;
+                        content.then((resolved) => {
+                            this.tooltips[currentIndex] = resolved;
+                            this.requestUpdate();
+                        });
+                    }
+                    else {
+                        tooltipContent = content;
+                    }
+                }
+            }
+            else {
+                tooltipContent = selectedOption?.name || selectedValue;
+            }
+        }
+        if (!this.noDuplicates || !this.tags.includes(selectedValue)) {
+            this.tags = [...this.tags, selectedValue];
+            if (!(selectedOption?.tooltip?.content instanceof Promise)) {
+                this.tooltips = [...this.tooltips, tooltipContent];
+            }
+            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];
+            if (this.showTooltip) {
+                this.tooltips = [...this.tooltips, this.inputValue];
+            }
+            else {
+                this.tooltips = [...this.tooltips, null];
+            }
+            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() {
+        if (this.noAutoComplete) {
+            return;
+        }
+        this.visibilityManager?.setup();
+        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.visibilityManager?.cleanup();
+        if (!this.noAutoComplete && this.autoComplete) {
+            this.autoComplete.value = '';
+            this.autoComplete.handleFocus();
+        }
+    }
+};
+__decorate([
+    state()
+], NileChip.prototype, "tags", void 0);
+__decorate([
+    state()
+], NileChip.prototype, "inputValue", void 0);
+__decorate([
+    state()
+], NileChip.prototype, "isDropdownOpen", void 0);
+__decorate([
+    state()
+], NileChip.prototype, "tooltips", void 0);
+__decorate([
+    query('nile-auto-complete')
+], NileChip.prototype, "autoComplete", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileChip.prototype, "warning", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileChip.prototype, "noAutoComplete", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileChip.prototype, "error", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileChip.prototype, "success", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileChip.prototype, "noDuplicates", void 0);
+__decorate([
+    property()
+], NileChip.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], NileChip.prototype, "tagVariant", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileChip.prototype, "acceptUserInput", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileChip.prototype, "clearable", void 0);
+__decorate([
+    property()
+], NileChip.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileChip.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileChip.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileChip.prototype, "portal", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileChip.prototype, "enableVirtualScroll", void 0);
+__decorate([
+    property({ type: Array })
+], NileChip.prototype, "autoCompleteOptions", void 0);
+__decorate([
+    property({ type: Array })
+], NileChip.prototype, "filteredAutoCompleteOptions", void 0);
+__decorate([
+    property({ type: Array })
+], NileChip.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileChip.prototype, "noWrap", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileChip.prototype, "loading", void 0);
+__decorate([
+    property({ type: Array })
+], NileChip.prototype, "errorIndexes", void 0);
+__decorate([
+    property({ attribute: 'help-text', reflect: true })
+], NileChip.prototype, "helpText", void 0);
+__decorate([
+    property({ attribute: 'error-message', reflect: true })
+], NileChip.prototype, "errorMessage", void 0);
+__decorate([
+    property({ attribute: false })
+], NileChip.prototype, "filterFunction", void 0);
+__decorate([
+    property({ attribute: false })
+], NileChip.prototype, "renderItemFunction", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileChip.prototype, "enableVisibilityEffect", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileChip.prototype, "enableTabClose", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileChip.prototype, "showTooltip", void 0);
+NileChip = __decorate([
+    customElement('nile-chip')
+], NileChip);
+export { NileChip };
+export default NileChip;
+//# sourceMappingURL=nile-chip.js.map

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

@@ -0,0 +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';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { VisibilityManager } from '../utilities/visibility-manager.js';\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  @state() tooltips: (string | null)[] = [];\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@property({ type: Boolean }) noAutoComplete = false;\n\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  @property({ type: String }) tagVariant: string = ''; // can be '', 'normal', 'success', etc.\n\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  /** \n   * When true, the dropdown menu will be appended to the document body instead of the parent container.\n   * This is useful when the parent has overflow: hidden, clip-path, or transform applied.\n   */\n  @property({ type: Boolean, reflect: true }) portal = 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  private visibilityManager?: VisibilityManager;\n\n  @property({ type: Boolean, reflect: true }) enableVisibilityEffect = false;\n\n  @property({ type: Boolean, reflect: true }) enableTabClose = false;\n\n  @property({ type: Boolean }) showTooltip: boolean = false;\n\n  protected updated(changedProperties: PropertyValues): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('autoCompleteOptions')) {\n      let options = this.autoCompleteOptions;\n      if (typeof options === 'string') {\n        try {\n          options = JSON.parse(options);\n        } catch (e) {\n          options = [];\n        }\n      }\n      this.filteredAutoCompleteOptions = Array.isArray(options) ? [...options] : [];\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  protected async firstUpdated(_changed: PropertyValues) {\n    await this.updateComplete;\n  \n    const inputTarget =\n      this.noAutoComplete\n        ? this.renderRoot.querySelector('nile-input')?.input\n        : this.autoComplete?.inputElement?.input || this.autoComplete?.inputElement;\n  \n    this.visibilityManager = new VisibilityManager({\n      host: this,\n      target: inputTarget,\n      enableVisibilityEffect: this.enableVisibilityEffect,\n      enableTabClose: this.enableTabClose,\n      isOpen: () => this.isDropdownOpen,\n      onAnchorOutOfView: () => {\n        this.isDropdownOpen = false;\n        if (this.autoComplete) {\n          this.autoComplete.isDropdownOpen = false;\n        }        \n        this.emit('nile-visibility-change', {\n          visible: false,\n          reason: 'anchor-out-of-view',\n        });\n      },\n      onDocumentHidden: () => {\n        this.isDropdownOpen = false;\n        if (this.autoComplete) {\n          this.autoComplete.isDropdownOpen = false;\n        }\n        this.emit('nile-visibility-change', {\n          visible: false,\n          reason: 'document-hidden',\n        });\n      },\n      emit: (event, detail) => this.emit(`nile-${event}`, detail),\n    });\n  }\n\n  \n  private handleDocumentClick = (event: MouseEvent) => {\n    const path = event.composedPath();\n    if (!path.includes(this)) {\n      this.isDropdownOpen = false;  \n    }\n  };\n  \n  connectedCallback() {\n    super.connectedCallback();\n    document.addEventListener('click', this.handleDocumentClick);\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.visibilityManager?.cleanup();\n    document.removeEventListener('click', this.handleDocumentClick);\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          part='base' \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            'nile-chip--open': this.isDropdownOpen, \n          })}\n        >\n          ${this.tags.map((tag, index) => {\n            const tooltipContent = this.tooltips[index];\n            const tagTemplate = html`\n              <nile-tag\n                class=${classMap({\n                  'nile-chip__tags': true,\n                })}\n                .variant=${this.errorIndexes.includes(index)\n                  ? 'error'\n                  : 'normal'}\n                @nile-remove=${() => this.handleRemove(tag)}\n                removable\n                ?pill=${this.tagVariant !== 'normal'}\n              >\n                ${unsafeHTML(tag)}\n              </nile-tag>\n            `;\n\n            if (this.showTooltip && tooltipContent) {\n              return html`\n                <nile-lite-tooltip allowHTML .content=${tooltipContent}>\n                  ${tagTemplate}\n                </nile-lite-tooltip>\n              `;\n            }\n\n            return tagTemplate;\n          })}\n\n          <div class=\"nile-chip__auto-complete\">\n            ${this.noAutoComplete\n              ? html`\n                  <nile-input\n                    .value=${this.inputValue}\n                    .placeholder=${this.placeholder}\n                    .disabled=${this.disabled}\n                    ?no-border=${true}\n                    ?no-outline=${true}\n                    ?no-padding=${true}\n                    @nile-input=${this.handleInputChange}\n                    @keydown=${this.handleInputKeydown}\n                    @focus=${this.handleFocus}\n                    exportparts=\"input\"\n                  ></nile-input>\n                `\n              : html`\n                  <nile-auto-complete\n                    .enableVirtualScroll=${this.enableVirtualScroll}\n                    .allMenuItems=${this.filteredAutoCompleteOptions}\n                    .filterFunction=${this.filterFunction}\n                    .renderItemFunction=${this.renderItemFunction}\n                    .showTooltips=${this.showTooltip}\n                    .loading=\"${this.loading}\"\n                    .value=${this.inputValue}\n                    ?isDropdownOpen=${this.isDropdownOpen}\n                    .noBorder=${true}\n                    .noOutline=${true}\n                    .noPadding=${true}\n                    .disabled=${this.disabled}\n                    .portal=${this.portal}\n                    openOnFocus\n                    exportparts=\"options__wrapper, input, base\"\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                `}\n          </div>\n        </div>\n        ${hasHelpText\n          ? html` <nile-form-help-text>${this.helpText}</nile-form-help-text> `\n          : ``}\n        ${hasErrorMessage\n          ? html`\n              <nile-form-error-message\n                >${this.errorMessage}</nile-form-error-message\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    const selectedValue = event.detail.value;\n    const selectedOption = this.autoCompleteOptions.find(\n      (opt) => opt.name === selectedValue || opt.id === selectedValue\n    );\n\n    let tooltipContent: string | null = null;\n  \n    if (this.showTooltip) {\n      if (selectedOption?.tooltip?.content) {\n        const { content, for: showFor } = selectedOption.tooltip;\n        if (!showFor || showFor === 'tag') {\n          if (content instanceof Promise) {\n            this.tooltips = [...this.tooltips, 'Loading...'];\n  \n            const currentIndex = this.tooltips.length - 1;\n            content.then((resolved) => {\n              this.tooltips[currentIndex] = resolved;\n              this.requestUpdate();\n            });\n          } else {\n            tooltipContent = content;\n          }\n        }\n      } else {\n        tooltipContent = selectedOption?.name || selectedValue;\n      }\n    }\n\n    if (!this.noDuplicates || !this.tags.includes(selectedValue)) {\n      this.tags = [...this.tags, selectedValue];\n  \n\n      if (!(selectedOption?.tooltip?.content instanceof Promise)) {\n        this.tooltips = [...this.tooltips, tooltipContent];\n      }\n  \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      if (this.showTooltip) {\n        this.tooltips = [...this.tooltips, this.inputValue];\n      } else {\n        this.tooltips = [...this.tooltips, null];\n      }\n    \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    if (this.noAutoComplete) {\n      return;\n    }\n    this.visibilityManager?.setup();\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.visibilityManager?.cleanup();\n    if (!this.noAutoComplete && this.autoComplete) {\n      this.autoComplete.value = '';\n      this.autoComplete.handleFocus();\n    }\n  }  \n}\n\nexport default NileChip;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-chip': NileChip;\n  }\n}\n"]}

package/dist/src/nile-chip/nile-chip.test.js

@@ -0,0 +1,106 @@
+import { fixture, html, expect, oneEvent, elementUpdated } from '@open-wc/testing';
+import './nile-chip';
+import { NileChip } from './nile-chip';
+import '../nile-auto-complete/nile-auto-complete';
+import '../nile-tag/nile-tag';
+const wait = (ms = 50000) => new Promise(resolve => setTimeout(resolve, ms));
+describe('NileChip', () => {
+    it('should render correctly', async () => {
+        const el = await fixture(html `<nile-chip></nile-chip>`);
+        expect(el).to.be.instanceOf(NileChip);
+        expect(el.shadowRoot).not.to.be.null;
+    });
+    it('should render the label if provided', async () => {
+        const el = await fixture(html `<nile-chip label="Tags"></nile-chip>`);
+        const label = el.shadowRoot?.querySelector('label');
+        expect(label?.textContent?.trim()).to.equal('Tags');
+    });
+    it('should emit "nile-chip-change" event when a tag is added', async () => {
+        const el = await fixture(html `<nile-chip acceptUserInput></nile-chip>`);
+        el.inputValue = 'test-tag';
+        const input = el.shadowRoot?.querySelector('nile-auto-complete');
+        // Simulate pressing "Enter" key to add tag
+        setTimeout(() => {
+            const event = new KeyboardEvent('keydown', { key: 'Enter' });
+            input?.dispatchEvent(event);
+        });
+        const changeEventPromise = await oneEvent(el, 'nile-chip-change');
+        const { detail } = await changeEventPromise;
+        expect(detail.value).to.deep.equal(['test-tag']);
+    });
+    it('should not add duplicate tags if "noDuplicates" is true', async () => {
+        const el = await fixture(html `<nile-chip noDuplicates acceptUserInput></nile-chip>`);
+        el.tags = ['existing-tag'];
+        el.inputValue = 'existing-tag';
+        const input = el.shadowRoot?.querySelector('nile-auto-complete');
+        const blockedEventPromise = oneEvent(el, 'nile-duplicates-blocked');
+        // Simulate pressing "Enter" key to add duplicate tag
+        const event = new KeyboardEvent('keydown', { key: 'Enter' });
+        input?.dispatchEvent(event);
+        await blockedEventPromise;
+        // Ensure the tag wasn't added
+        expect(el.tags).to.deep.equal(['existing-tag']);
+    });
+    it('should remove a tag when the remove button is clicked', async () => {
+        const el = await fixture(html `<nile-chip></nile-chip>`);
+        el.tags = ['removable-tag'];
+        await elementUpdated(el);
+        const tagRemoveButton = el.shadowRoot?.querySelector("div > div > nile-tag")?.shadowRoot?.querySelector("span > nile-icon-button");
+        console.log(tagRemoveButton);
+        // await wait()
+        // Simulate clicking the remove button
+        setTimeout(() => tagRemoveButton?.click());
+        const removeEventPromise = await oneEvent(el, 'nile-chip-change');
+        const { detail } = await removeEventPromise;
+        expect(detail.value).to.deep.equal([]);
+    });
+    it('should apply success, warning, and error states', async () => {
+        const el = await fixture(html `<nile-chip></nile-chip>`);
+        el.success = true;
+        await elementUpdated(el);
+        expect(el.shadowRoot?.querySelector('.nile-chip')?.classList.contains('nile-chip--success')).to.be.true;
+        el.warning = true;
+        await elementUpdated(el);
+        expect(el.shadowRoot?.querySelector('.nile-chip')?.classList.contains('nile-chip--warning')).to.be.true;
+        el.error = true;
+        await elementUpdated(el);
+        expect(el.shadowRoot?.querySelector('.nile-chip')?.classList.contains('nile-chip--error')).to.be.true;
+    });
+    it('should accept user input if "acceptUserInput" is true', async () => {
+        const el = await fixture(html `<nile-chip acceptUserInput></nile-chip>`);
+        el.inputValue = 'user-input';
+        const input = el.shadowRoot?.querySelector('nile-auto-complete');
+        const changeEventPromise = oneEvent(el, 'nile-chip-change');
+        // Simulate pressing "Enter" key to add tag
+        const event = new KeyboardEvent('keydown', { key: 'Enter' });
+        input?.dispatchEvent(event);
+        const { detail } = await changeEventPromise;
+        expect(detail.value).to.deep.equal(['user-input']);
+    });
+    it('should not accept user input if "acceptUserInput" is false', async () => {
+        const el = await fixture(html `<nile-chip></nile-chip>`);
+        el.inputValue = 'user-input';
+        const input = el.shadowRoot?.querySelector('nile-auto-complete');
+        // Simulate pressing "Enter" key
+        const event = new KeyboardEvent('keydown', { key: 'Enter' });
+        input?.dispatchEvent(event);
+        // Ensure no tag is added
+        expect(el.tags).to.deep.equal([]);
+    });
+    it('should disable input when "disabled" is set to true', async () => {
+        const el = await fixture(html `<nile-chip disabled></nile-chip>`);
+        const disabledDiv = el.shadowRoot?.querySelector("div");
+        expect(disabledDiv?.className).to.include('nile-chip--disabled');
+    });
+    it('should render a help text slot if provided', async () => {
+        const el = await fixture(html `<nile-chip help-text="Help text here"></nile-chip>`);
+        const helpText = el.shadowRoot?.querySelector('nile-form-help-text');
+        expect(helpText?.textContent?.trim()).to.equal('Help text here');
+    });
+    it('should render an error message if provided', async () => {
+        const el = await fixture(html `<nile-chip error-message="This is an error"></nile-chip>`);
+        const errorMessage = el.shadowRoot?.querySelector('nile-form-error-message');
+        expect(errorMessage?.textContent?.trim()).to.equal('This is an error');
+    });
+});
+//# sourceMappingURL=nile-chip.test.js.map