@ifsworld/granite-components 6.1.0 → 6.1.2

package/fesm2020/ifsworld-granite-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input, HostBinding, ContentChildren, NgModule, InjectionToken, Attribute, Inject, Optional, EventEmitter, QueryList, TemplateRef, Directive, ViewChild, Output, Self, HostListener, Pipe } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, HostBinding, ContentChildren, NgModule, InjectionToken, Attribute, Inject, Optional, EventEmitter, QueryList, TemplateRef, Directive, ViewChild, Output, Self, HostListener, ViewEncapsulation, Pipe } from '@angular/core';
 import * as i3 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
@@ -12,10 +12,13 @@ import { TemplatePortal, PortalModule } from '@angular/cdk/portal';
 import { trigger, state, style, transition, group, query, animate, sequence } from '@angular/animations';
 import * as i1 from '@angular/cdk/a11y';
 import { FocusKeyManager, isFakeMousedownFromScreenReader } from '@angular/cdk/a11y';
-import { hasModifierKey } from '@angular/cdk/keycodes';
+import { hasModifierKey, SPACE, BACKSPACE, DELETE, ENTER, TAB } from '@angular/cdk/keycodes';
 import * as i3$1 from '@angular/cdk/bidi';
 import { normalizePassiveListenerOptions } from '@angular/cdk/platform';
 import * as i2 from '@angular/cdk/collections';
+import { SelectionModel } from '@angular/cdk/collections';
+import * as i2$1 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 class GraniteArrangeGridItemComponent {
     constructor(element) {
@@ -2805,6 +2808,1053 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 }]
         }] });
 
+/** Event object emitted by GraniteChip when selected or deselected. */
+class GraniteChipSelectionChangeEvent {
+    constructor() {
+        /** Whether the selection change was a result of a user interaction. */
+        this.isUserInput = false;
+    }
+}
+class GraniteChipComponent {
+    constructor(_elementRef, _ngZone, _changeDetectorRef, tabIndex) {
+        this._elementRef = _elementRef;
+        this._ngZone = _ngZone;
+        this._changeDetectorRef = _changeDetectorRef;
+        /** Whether the chip has focus. */
+        this._hasFocus = false;
+        /** Whether the chip list is selectable */
+        this._chipListSelectable = true;
+        /** Whether the chip list is in multi-selection mode. */
+        this._chipListMultiple = false;
+        /** Whether the chip list as a whole is disabled. */
+        this._chipListDisabled = false;
+        /** ARIA role that should be applied to the chip. */
+        this.role = 'option';
+        this._selected = false;
+        this._selectable = true;
+        this._disabled = false;
+        this._removable = false;
+        this._invalid = false;
+        this.ariaLabel = null;
+        this.ariaLabelledby = null;
+        /** Emitted when the chip is selected or deselected. */
+        this.selectionChange = new EventEmitter();
+        /** Emitted when a chip is to be removed. */
+        this.removed = new EventEmitter();
+        /** Emitted when the chip is destroyed. */
+        this.destroyed = new EventEmitter();
+        this.tabIndex = -1;
+        this.inputChip = false;
+        /** Emits when the chip is focused. */
+        this.chipFocus = new EventEmitter();
+        /** Emits when the chip is blurred. */
+        this.chipBlur = new EventEmitter();
+        const inputChipAttrName = 'granite-input-chip';
+        const element = this._elementRef.nativeElement;
+        if (element.hasAttribute(inputChipAttrName) ||
+            element.tagName.toLowerCase() === inputChipAttrName) {
+            this.inputChip = true;
+        }
+        this.tabIndex = tabIndex != null ? parseInt(tabIndex) || -1 : -1;
+    }
+    /** Whether the chip is selected. */
+    get selected() {
+        return this._selected;
+    }
+    set selected(value) {
+        const coercedValue = coerceBooleanProperty(value);
+        if (coercedValue !== this._selected) {
+            this._selected = coercedValue;
+        }
+    }
+    /** The value of the chip. Defaults to the text content inside `<granite-chip>` tags. */
+    get value() {
+        return this._value != null
+            ? this._value
+            : this._elementRef.nativeElement.textContent;
+    }
+    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+    set value(val) {
+        this._value = val;
+    }
+    /**
+     * Whether or not the chip is selectable. When a chip is not selectable,
+     * changes to its selected state are always ignored. By default a chip is
+     * selectable, and it becomes non-selectable if its parent chip list is
+     * not selectable.
+     */
+    get selectable() {
+        return this._selectable && this._chipListSelectable;
+    }
+    set selectable(value) {
+        this._selectable = coerceBooleanProperty(value);
+    }
+    /** Whether the chip is disabled. Also the individual chips are disabled when chip list is disabled */
+    get disabled() {
+        return this._chipListDisabled || this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = coerceBooleanProperty(value);
+    }
+    /**
+     * Whether the chip can be removed from the list
+     */
+    get removable() {
+        return this._removable;
+    }
+    set removable(value) {
+        this._removable = coerceBooleanProperty(value);
+    }
+    /** Whether the chip is in an invalid state. */
+    get invalid() {
+        return this._invalid;
+    }
+    set invalid(value) {
+        this._invalid = coerceBooleanProperty(value);
+    }
+    ngOnDestroy() {
+        this.destroyed.emit({ chip: this });
+    }
+    /** Selects the chip. */
+    select(isUserInput = false) {
+        if (!this._selected) {
+            this._selected = true;
+            this._dispatchSelectionChange(isUserInput);
+            this._changeDetectorRef.markForCheck();
+        }
+    }
+    /** Deselects the chip. */
+    deselect() {
+        if (this._selected) {
+            this._selected = false;
+            this._dispatchSelectionChange();
+            this._changeDetectorRef.markForCheck();
+        }
+    }
+    /** Toggles the current selected state of this chip. */
+    toggleSelected(isUserInput = false) {
+        this._selected = !this.selected;
+        this._dispatchSelectionChange(isUserInput);
+        this._changeDetectorRef.markForCheck();
+        return this.selected;
+    }
+    /** Allows for programmatic focusing of the chip unless it's disabled. */
+    focus() {
+        if (!this.disabled) {
+            if (!this._hasFocus) {
+                this._elementRef.nativeElement.focus();
+                this.chipFocus.next({ chip: this });
+            }
+            this._hasFocus = true;
+        }
+    }
+    /**
+     * Allows for programmatic removal of the chip.
+     * Called by the GraniteChipList when the DELETE or BACKSPACE keys are pressed.
+     * Informs any listeners of the removal request. Does not remove the chip from the DOM.
+     */
+    remove() {
+        if (this.removable || this.inputChip) {
+            this.removed.emit({ chip: this });
+        }
+    }
+    /** Handles click events on the chip. */
+    _handleClick(event) {
+        if (this.disabled) {
+            event.preventDefault();
+            return;
+        }
+        if (this.selectable) {
+            this.toggleSelected(true);
+        }
+    }
+    /** Handle custom key presses. */
+    _handleKeydown(event) {
+        if (this.disabled) {
+            return;
+        }
+        switch (event.keyCode) {
+            case DELETE:
+            case BACKSPACE:
+                // If the chip is removable, remove the focused chip
+                this.remove();
+                // Always prevent so page navigation does not occur
+                event.preventDefault();
+                break;
+            case SPACE:
+                // If we are selectable, toggle the focused chip
+                if (this.selectable) {
+                    this.toggleSelected(true);
+                }
+                // Always prevent space from scrolling the page since the list has focus
+                event.preventDefault();
+                break;
+        }
+    }
+    _handleRemoveClick(event) {
+        this.remove();
+        // We need to stop event propagation because otherwise the event will bubble up to the
+        // form field and cause the `onContainerClick` method to be invoked. This method would then
+        // reset the focused chip that has been focused after chip removal.
+        event.stopPropagation();
+        event.preventDefault();
+    }
+    _blur() {
+        // When animations are enabled, Angular may end up removing the chip from the DOM a little
+        // earlier than usual, causing it to be blurred and throwing off the logic in the chip list
+        // that moves focus not the next item. To work around the issue, we defer marking the chip
+        // as not focused until the next time the zone stabilizes.
+        this._ngZone.onStable.pipe(take(1)).subscribe(() => {
+            this._ngZone.run(() => {
+                this._hasFocus = false;
+                this.chipBlur.next({ chip: this });
+            });
+        });
+    }
+    _dispatchSelectionChange(isUserInput = false) {
+        this.selectionChange.emit({
+            source: this,
+            isUserInput,
+            selected: this._selected,
+        });
+    }
+    /** The ARIA selected applied to the chip. */
+    get ariaSelected() {
+        // Remove the `aria-selected` when the chip is deselected in single-selection mode, because
+        // it adds noise to NVDA users where "not selected" will be read out for each chip.
+        return this.selectable && (this._chipListMultiple || this.selected)
+            ? this.selected.toString()
+            : null;
+    }
+}
+GraniteChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteChipComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef, optional: true }, { token: 'tabindex', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
+GraniteChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: GraniteChipComponent, selector: "granite-chip, granite-input-chip", inputs: { tabIndex: "tabIndex", role: "role", selected: "selected", value: "value", selectable: "selectable", disabled: "disabled", removable: "removable", invalid: "invalid", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"] }, outputs: { selectionChange: "selectionChange", removed: "removed", destroyed: "destroyed", chipFocus: "chipFocus", chipBlur: "chipBlur" }, host: { listeners: { "click": "_handleClick($event)", "keydown": "_handleKeydown($event)", "blur": "_blur()", "focus": "focus()" }, properties: { "class.granite-chip-input": "inputChip", "class.granite-chip-selectable": "selectable", "class.granite-chip-selected": "selected", "class.granite-chip-disabled": "disabled", "class.granite-chip-invalid": "invalid", "attr.tabindex": "disabled ? null : tabIndex", "attr.role": "role", "attr.disabled": "disabled || null", "attr.aria-label": "ariaLabel", "attr.aria-labelledby": "ariaLabelledby", "attr.aria-disabled": "disabled.toString()", "attr.aria-selected": "ariaSelected" }, classAttribute: "granite-chip" }, exportAs: ["graniteChip"], ngImport: i0, template: "<ng-content></ng-content>\n<button\n  *ngIf=\"!disabled && (removable || inputChip)\"\n  class=\"granite-chip-remove\"\n  (click)=\"_handleRemoveClick($event)\"\n>\n  <granite-icon\n    fontIcon=\"icon-error-solid\"\n    class=\"granite-chip-remove-icon\"\n    [class.granite-chip-remove-icon-invalid]=\"invalid\"\n  ></granite-icon>\n</button>\n", styles: [":host.granite-chip{display:-moz-inline-flex;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;user-select:none;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;border:none;-webkit-appearance:none;-moz-appearance:none;justify-content:center;align-items:center;padding-inline:var(--granite-spacing-m);padding-top:var(--granite-spacing-xs);padding-bottom:var(--granite-spacing-xs);margin:var(--granite-spacing-xxs);height:inherit;color:var(--granite-color-text-weak);background-color:var(--granite-color-background);border-radius:var(--granite-radius-l);border-style:solid;border-width:var(--granite-border-width-regular);border-color:var(--granite-color-border-hard);min-width:48px}:host.granite-chip:hover{background-color:var(--granite-color-background-hover);cursor:pointer}:host.granite-chip.granite-chip-disabled{background-color:var(--granite-color-background);color:var(--granite-color-text-hint)}:host.granite-chip.granite-chip-disabled:hover{background-color:var(--granite-color-background);cursor:auto}:host.granite-chip:not(.granite-chip-selectable):hover{background-color:var(--granite-color-background);cursor:auto}:host.granite-chip.granite-chip-invalid{background-color:var(--granite-color-background-failure)}:host.granite-chip.granite-chip-invalid{background-color:var(--granite-color-background-failure);border-color:var(--granite-color-background-failure)}:host.granite-chip.granite-chip-invalid:hover{border-color:var(--granite-color-signal-failure)}:host.granite-chip.granite-chip-selected:not(.granite-chip-disabled):not(.granite-chip-input){border-color:var(--granite-color-background-active);background-color:var(--granite-color-background-info)}:host.granite-chip.granite-chip-selected:not(.granite-chip-disabled):not(.granite-chip-input):hover{background-color:var(--granite-color-background-hover)}:host.granite-chip.granite-chip-input{padding-inline:var(--granite-spacing-s)}:host.granite-chip.granite-chip-input:hover{background-color:var(--granite-color-background-hover)}:host.granite-chip.granite-chip-input:hover.granite-chip-invalid{background-color:var(--granite-color-background-failure)}:host.granite-chip.granite-chip-input:hover.granite-chip-invalid:hover{border-color:var(--granite-color-signal-failure)}.granite-chip-remove{display:flex;justify-content:center;align-items:center;background-color:transparent;outline:none;border:none;cursor:pointer;margin-inline-start:var(--granite-spacing-xs);margin-inline-end:0;padding:0}[dir=rtl] .granite-chip-remove{margin-inline-end:var(--granite-spacing-xs);margin-inline-start:0}.granite-chip-remove .granite-chip-remove-icon{position:relative;top:0;font-size:var(--granite-font-size-body-medium);line-height:var(--granite-line-height-regular);overflow:hidden;background-repeat:no-repeat;color:var(--granite-color-text-hint)}.granite-chip-remove .granite-chip-remove-icon:hover{color:var(--granite-color-text)}.granite-chip-remove .granite-chip-remove-icon.granite-chip-remove-icon-invalid{color:var(--granite-color-signal-failure)}\n"], components: [{ type: GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteChipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: `granite-chip, granite-input-chip`, inputs: ['tabIndex'], exportAs: 'graniteChip', host: {
+                        class: 'granite-chip',
+                        '[class.granite-chip-input]': 'inputChip',
+                        '[class.granite-chip-selectable]': 'selectable',
+                        '[class.granite-chip-selected]': 'selected',
+                        '[class.granite-chip-disabled]': 'disabled',
+                        '[class.granite-chip-invalid]': 'invalid',
+                        '[attr.tabindex]': 'disabled ? null : tabIndex',
+                        '[attr.role]': 'role',
+                        '[attr.disabled]': 'disabled || null',
+                        '[attr.aria-label]': 'ariaLabel',
+                        '[attr.aria-labelledby]': 'ariaLabelledby',
+                        '[attr.aria-disabled]': 'disabled.toString()',
+                        '[attr.aria-selected]': 'ariaSelected',
+                        '(click)': '_handleClick($event)',
+                        '(keydown)': '_handleKeydown($event)',
+                        '(blur)': '_blur()',
+                        '(focus)': 'focus()',
+                    }, template: "<ng-content></ng-content>\n<button\n  *ngIf=\"!disabled && (removable || inputChip)\"\n  class=\"granite-chip-remove\"\n  (click)=\"_handleRemoveClick($event)\"\n>\n  <granite-icon\n    fontIcon=\"icon-error-solid\"\n    class=\"granite-chip-remove-icon\"\n    [class.granite-chip-remove-icon-invalid]=\"invalid\"\n  ></granite-icon>\n</button>\n", styles: [":host.granite-chip{display:-moz-inline-flex;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;user-select:none;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;border:none;-webkit-appearance:none;-moz-appearance:none;justify-content:center;align-items:center;padding-inline:var(--granite-spacing-m);padding-top:var(--granite-spacing-xs);padding-bottom:var(--granite-spacing-xs);margin:var(--granite-spacing-xxs);height:inherit;color:var(--granite-color-text-weak);background-color:var(--granite-color-background);border-radius:var(--granite-radius-l);border-style:solid;border-width:var(--granite-border-width-regular);border-color:var(--granite-color-border-hard);min-width:48px}:host.granite-chip:hover{background-color:var(--granite-color-background-hover);cursor:pointer}:host.granite-chip.granite-chip-disabled{background-color:var(--granite-color-background);color:var(--granite-color-text-hint)}:host.granite-chip.granite-chip-disabled:hover{background-color:var(--granite-color-background);cursor:auto}:host.granite-chip:not(.granite-chip-selectable):hover{background-color:var(--granite-color-background);cursor:auto}:host.granite-chip.granite-chip-invalid{background-color:var(--granite-color-background-failure)}:host.granite-chip.granite-chip-invalid{background-color:var(--granite-color-background-failure);border-color:var(--granite-color-background-failure)}:host.granite-chip.granite-chip-invalid:hover{border-color:var(--granite-color-signal-failure)}:host.granite-chip.granite-chip-selected:not(.granite-chip-disabled):not(.granite-chip-input){border-color:var(--granite-color-background-active);background-color:var(--granite-color-background-info)}:host.granite-chip.granite-chip-selected:not(.granite-chip-disabled):not(.granite-chip-input):hover{background-color:var(--granite-color-background-hover)}:host.granite-chip.granite-chip-input{padding-inline:var(--granite-spacing-s)}:host.granite-chip.granite-chip-input:hover{background-color:var(--granite-color-background-hover)}:host.granite-chip.granite-chip-input:hover.granite-chip-invalid{background-color:var(--granite-color-background-failure)}:host.granite-chip.granite-chip-input:hover.granite-chip-invalid:hover{border-color:var(--granite-color-signal-failure)}.granite-chip-remove{display:flex;justify-content:center;align-items:center;background-color:transparent;outline:none;border:none;cursor:pointer;margin-inline-start:var(--granite-spacing-xs);margin-inline-end:0;padding:0}[dir=rtl] .granite-chip-remove{margin-inline-end:var(--granite-spacing-xs);margin-inline-start:0}.granite-chip-remove .granite-chip-remove-icon{position:relative;top:0;font-size:var(--granite-font-size-body-medium);line-height:var(--granite-line-height-regular);overflow:hidden;background-repeat:no-repeat;color:var(--granite-color-text-hint)}.granite-chip-remove .granite-chip-remove-icon:hover{color:var(--granite-color-text)}.granite-chip-remove .granite-chip-remove-icon.granite-chip-remove-icon-invalid{color:var(--granite-color-signal-failure)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['tabindex']
+                }] }]; }, propDecorators: { role: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], selectable: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], removable: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input,
+                args: ['aria-label']
+            }], ariaLabelledby: [{
+                type: Input,
+                args: ['aria-labelledby']
+            }], selectionChange: [{
+                type: Output
+            }], removed: [{
+                type: Output
+            }], destroyed: [{
+                type: Output
+            }], chipFocus: [{
+                type: Output
+            }], chipBlur: [{
+                type: Output
+            }] } });
+
+class GraniteChipListBase {
+    constructor(_parentForm, _parentFormGroup, ngControl) {
+        this._parentForm = _parentForm;
+        this._parentFormGroup = _parentFormGroup;
+        this.ngControl = ngControl;
+        this.stateChanges = new EventEmitter();
+    }
+}
+// Increasing integer for generating unique ids for chip-list components.
+let nextUniqueId$1 = 0;
+class GraniteChipListComponent extends GraniteChipListBase {
+    constructor(_elementRef, _changeDetectorRef, _dir, _parentForm, _parentFormGroup, ngControl) {
+        super(_parentForm, _parentFormGroup, ngControl);
+        this._elementRef = _elementRef;
+        this._changeDetectorRef = _changeDetectorRef;
+        this._dir = _dir;
+        this.controlType = 'granite-chip-list';
+        /**
+         * When a chip is destroyed, we store the index of the destroyed chip until the chips
+         * query list notifies about the update. This is necessary because we cannot determine an
+         * appropriate chip that should receive focus until the array of chips updated completely.
+         */
+        this._lastDestroyedChipIndex = null;
+        /** Subject that emits when the component has been destroyed. */
+        this._destroyed = new Subject();
+        /** Uid of the chip list */
+        this._uid = `granite-chip-list-${nextUniqueId$1++}`;
+        /** Tab index for the chip list. */
+        this._tabIndex = 0;
+        /**
+         * User defined tab index.
+         * When it is not null, use user defined tab index. Otherwise use _tabIndex
+         */
+        this._userTabIndex = null;
+        this._multiple = false;
+        this._disabled = false;
+        this._selectable = true;
+        this.ariaLabel = null;
+        this.ariaLabelledby = null;
+        this.ariaOrientation = 'horizontal';
+        /** Function when changed */
+        this._onChange = () => {
+            // Implemented as part of ControlValueAccessor
+        };
+        /** Function when changed */
+        this._onTouched = () => {
+            // Implemented as part of ControlValueAccessor
+        };
+        this._compareWith = (o1, o2) => o1 === o2;
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    /** The ARIA role applied to the chip list. */
+    get role() {
+        if (this._explicitRole) {
+            return this._explicitRole;
+        }
+        return this.empty ? null : 'listbox';
+    }
+    set role(role) {
+        this._explicitRole = role;
+    }
+    /** Whether the user should be allowed to select multiselect chips. */
+    get multiselect() {
+        return this._multiple;
+    }
+    set multiselect(value) {
+        this._multiple = coerceBooleanProperty(value);
+        this._syncChipsState();
+    }
+    /**
+     * Whether the chip list is disabled.
+     */
+    get disabled() {
+        return this.ngControl ? !!this.ngControl.disabled : this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = coerceBooleanProperty(value);
+        this._syncChipsState();
+    }
+    /**
+     * Whether or not this chip list is selectable. When a chip list is not selectable,
+     * the selected states for all the chips inside the chip list are always ignored.
+     */
+    get selectable() {
+        return this._selectable;
+    }
+    set selectable(value) {
+        this._selectable = coerceBooleanProperty(value);
+        if (this.chips) {
+            this.chips.forEach((chip) => (chip._chipListSelectable = this._selectable));
+        }
+    }
+    set tabindex(value) {
+        this._userTabIndex = value;
+        this._tabIndex = value;
+    }
+    /** Unique identifier for the chip list. */
+    get id() {
+        return this._chipInput ? this._chipInput.id : this._uid;
+    }
+    /** Whether any chips or the matChipInput inside of this chip-list has focus. */
+    get focused() {
+        return ((this._chipInput && this._chipInput.focused) || this._hasFocusedChip());
+    }
+    /** Whether the chip list is empty. */
+    get empty() {
+        return ((!this._chipInput || this._chipInput.empty) &&
+            (!this.chips || this.chips.length === 0));
+    }
+    /** The array of selected chips inside chip list. */
+    get selected() {
+        return this.multiselect
+            ? this._selectionModel?.selected || []
+            : this._selectionModel?.selected[0];
+    }
+    /** Combined stream of all of the child chips' selection change events. */
+    get chipSelectionChanges() {
+        return merge(...this.chips.map((chip) => chip.selectionChange));
+    }
+    /** Combined stream of all of the child chips' focus change events. */
+    get chipFocusChanges() {
+        return merge(...this.chips.map((chip) => chip.chipFocus));
+    }
+    /** Combined stream of all of the child chips' blur change events. */
+    get chipBlurChanges() {
+        return merge(...this.chips.map((chip) => chip.chipBlur));
+    }
+    /** Combined stream of all of the child chips' remove change events. */
+    get chipRemoveChanges() {
+        return merge(...this.chips.map((chip) => chip.destroyed));
+    }
+    ngAfterContentInit() {
+        this._keyManager = new FocusKeyManager(this.chips)
+            .withWrap()
+            .withVerticalOrientation()
+            .withHomeAndEnd()
+            .withHorizontalOrientation(this._dir ? this._dir.value : 'ltr');
+        if (this._dir) {
+            this._dir.change
+                .pipe(takeUntil(this._destroyed))
+                .subscribe((dir) => this._keyManager.withHorizontalOrientation(dir));
+        }
+        this._keyManager.tabOut.pipe(takeUntil(this._destroyed)).subscribe(() => {
+            this._allowFocusEscape();
+        });
+        // When the list changes, re-subscribe
+        this.chips.changes
+            .pipe(startWith(null), takeUntil(this._destroyed))
+            .subscribe(() => {
+            if (this.disabled) {
+                // Since this happens after the content has been
+                // checked, we need to defer it to the next tick.
+                Promise.resolve().then(() => {
+                    this._syncChipsState();
+                });
+            }
+            this._resetChips();
+            // Reset chips selected/deselected status
+            this._initializeSelection();
+            // Check to see if we need to update our tab index
+            this._updateTabIndex();
+            // Check to see if we have a destroyed chip and need to refocus
+            this._updateFocusForDestroyedChips();
+            this.stateChanges.next();
+        });
+    }
+    ngOnInit() {
+        this._selectionModel = new SelectionModel(this.multiselect, undefined, false);
+        this.stateChanges.next();
+    }
+    ngDoCheck() {
+        if (this.ngControl) {
+            // We need to re-evaluate this on every change detection cycle, because there are some
+            // error triggers that we can't subscribe to (e.g. parent form submissions). This means
+            // that whatever logic is in here has to be super lean or we risk destroying the performance.
+            if (this.ngControl.disabled !== this._disabled) {
+                this.disabled = !!this.ngControl.disabled;
+            }
+        }
+    }
+    ngOnDestroy() {
+        this._destroyed.next();
+        this._destroyed.complete();
+        this.stateChanges.complete();
+        this._dropSubscriptions();
+    }
+    /** Associates an HTML input element with this chip list. */
+    registerInput(inputElement) {
+        this._chipInput = inputElement;
+        // We use this attribute to match the chip list to its input in test harnesses.
+        // Set the attribute directly here to avoid "changed after checked" errors.
+        this._elementRef.nativeElement.setAttribute('data-granite-chip-input', inputElement.id);
+    }
+    // Implemented as part of ControlValueAccessor.
+    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+    writeValue(value) {
+        if (this.chips) {
+            this._setSelectionByValue(value, false);
+        }
+    }
+    // Implemented as part of ControlValueAccessor.
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    // Implemented as part of ControlValueAccessor.
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    // Implemented as part of ControlValueAccessor.
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.stateChanges.next();
+    }
+    /**
+     * Focus chip list when click on the container.
+     */
+    onContainerClick(event) {
+        if (!this._originatesFromChip(event)) {
+            this.focus();
+        }
+    }
+    /**
+     * Focuses the first non-disabled chip in this chip list, or the associated input when there
+     * are no eligible chips.
+     */
+    focus(options) {
+        if (this.disabled) {
+            return;
+        }
+        // Focus on first element if there's no chipInput inside chip-list
+        if (this._chipInput && this._chipInput.focused) {
+            // do nothing
+        }
+        else if (this.chips.length > 0) {
+            this._keyManager.setFirstItemActive();
+            this.stateChanges.next();
+        }
+        else {
+            this._focusInput(options);
+            this.stateChanges.next();
+        }
+    }
+    /** Attempt to focus an input if we have one. */
+    _focusInput(options) {
+        if (this._chipInput) {
+            this._chipInput.setFocus(options);
+        }
+    }
+    /**
+     * Pass events to the keyboard manager. Available here for tests.
+     */
+    _keydown(event) {
+        const target = event.target;
+        if (target && target.classList.contains('granite-chip')) {
+            this._keyManager.onKeydown(event);
+            this.stateChanges.next();
+        }
+    }
+    /**
+     * Check the tab index as you should not be allowed to focus an empty list.
+     */
+    _updateTabIndex() {
+        // If we have 0 chips, we should not allow keyboard focus
+        this._tabIndex = this._userTabIndex || (this.chips.length === 0 ? -1 : 0);
+    }
+    /**
+     * If the amount of chips changed, we need to update the
+     * key manager state and focus the next closest chip.
+     */
+    _updateFocusForDestroyedChips() {
+        // Move focus to the closest chip. If no other chips remain, focus the chip-list itself.
+        if (this._lastDestroyedChipIndex != null) {
+            if (this.chips.length) {
+                const newChipIndex = Math.min(this._lastDestroyedChipIndex, this.chips.length - 1);
+                this._keyManager.setActiveItem(newChipIndex);
+            }
+            else {
+                this.focus();
+            }
+        }
+        this._lastDestroyedChipIndex = null;
+    }
+    /**
+     * Utility to ensure all indexes are valid.
+     *
+     * @param index The index to be checked.
+     * @returns True if the index is valid for our list of chips.
+     */
+    _isValidIndex(index) {
+        return index >= 0 && index < this.chips.length;
+    }
+    _setSelectionByValue(value, isUserInput = true) {
+        this._clearSelection();
+        this.chips.forEach((chip) => chip.deselect());
+        if (Array.isArray(value)) {
+            value.forEach((currentValue) => this._selectValue(currentValue, isUserInput));
+            this._sortValues();
+        }
+        else {
+            const correspondingChip = this._selectValue(value, isUserInput);
+            // Shift focus to the active item. Note that we shouldn't do this in multiselect
+            // mode, because we don't know what chip the user interacted with last.
+            if (correspondingChip) {
+                if (isUserInput) {
+                    this._keyManager.setActiveItem(correspondingChip);
+                }
+            }
+        }
+    }
+    /**
+     * Finds and selects the chip based on its value.
+     * @returns Chip that has the corresponding value.
+     */
+    _selectValue(value, isUserInput = true) {
+        const correspondingChip = this.chips.find((chip) => {
+            return chip.value != null && this._compareWith(chip.value, value);
+        });
+        if (correspondingChip) {
+            correspondingChip.select(isUserInput);
+            this._selectionModel.select(correspondingChip);
+        }
+        return correspondingChip;
+    }
+    _initializeSelection() {
+        // Defer setting the value in order to avoid the "Expression
+        // has changed after it was checked" errors from Angular.
+        Promise.resolve().then(() => {
+            if (this.ngControl) {
+                this._setSelectionByValue(this.ngControl.value, false);
+                this.stateChanges.next();
+            }
+        });
+    }
+    /**
+     * Deselects every chip in the list.
+     * @param skip Chip that should not be deselected.
+     */
+    _clearSelection(skip) {
+        this._selectionModel.clear();
+        this.chips.forEach((chip) => {
+            if (chip !== skip) {
+                chip.deselect();
+            }
+        });
+        this.stateChanges.next();
+    }
+    /**
+     * Sorts the model values, ensuring that they keep the same
+     * order that they have in the panel.
+     */
+    _sortValues() {
+        if (this._multiple) {
+            this._selectionModel.clear();
+            this.chips.forEach((chip) => {
+                if (chip.selected) {
+                    this._selectionModel.select(chip);
+                }
+            });
+            this.stateChanges.next();
+        }
+    }
+    /** When blurred, mark the field as touched when focus moved outside the chip list. */
+    _blur() {
+        if (!this._hasFocusedChip()) {
+            this._keyManager.setActiveItem(-1);
+        }
+        if (!this.disabled) {
+            if (this._chipInput) {
+                // If there's a chip input, we should check whether the focus moved to chip input.
+                // If the focus is not moved to chip input, mark the field as touched. If the focus moved
+                // to chip input, do nothing.
+                // Timeout is needed to wait for the focus() event trigger on chip input.
+                setTimeout(() => {
+                    if (!this.focused) {
+                        this._markAsTouched();
+                    }
+                });
+            }
+            else {
+                // If there's no chip input, then mark the field as touched.
+                this._markAsTouched();
+            }
+        }
+    }
+    /** Mark the field as touched */
+    _markAsTouched() {
+        this._onTouched();
+        this._changeDetectorRef.markForCheck();
+        this.stateChanges.next();
+    }
+    /**
+     * Removes the `tabindex` from the chip list and resets it back afterwards, allowing the
+     * user to tab out of it. This prevents the list from capturing focus and redirecting
+     * it back to the first chip, creating a focus trap, if it user tries to tab away.
+     */
+    _allowFocusEscape() {
+        if (this._tabIndex !== -1) {
+            this._tabIndex = -1;
+            setTimeout(() => {
+                this._tabIndex = this._userTabIndex || 0;
+                this._changeDetectorRef.markForCheck();
+            });
+        }
+    }
+    _resetChips() {
+        this._dropSubscriptions();
+        this._listenToChipsFocus();
+        this._listenToChipsSelection();
+        this._listenToChipsRemoved();
+    }
+    _dropSubscriptions() {
+        if (this._chipFocusSubscription) {
+            this._chipFocusSubscription.unsubscribe();
+            this._chipFocusSubscription = null;
+        }
+        if (this._chipBlurSubscription) {
+            this._chipBlurSubscription.unsubscribe();
+            this._chipBlurSubscription = null;
+        }
+        if (this._chipSelectionSubscription) {
+            this._chipSelectionSubscription.unsubscribe();
+            this._chipSelectionSubscription = null;
+        }
+        if (this._chipRemoveSubscription) {
+            this._chipRemoveSubscription.unsubscribe();
+            this._chipRemoveSubscription = null;
+        }
+    }
+    /** Listens to user-generated selection events on each chip. */
+    _listenToChipsSelection() {
+        this._chipSelectionSubscription = this.chipSelectionChanges.subscribe((event) => {
+            event.source.selected
+                ? this._selectionModel.select(event.source)
+                : this._selectionModel.deselect(event.source);
+            // For single selection chip list, make sure the deselected value is unselected.
+            if (!this.multiselect) {
+                this.chips.forEach((chip) => {
+                    if (!this._selectionModel.isSelected(chip) && chip.selected) {
+                        chip.deselect();
+                    }
+                });
+            }
+        });
+    }
+    /** Listens to user-generated selection events on each chip. */
+    _listenToChipsFocus() {
+        this._chipFocusSubscription = this.chipFocusChanges.subscribe((event) => {
+            const chipIndex = this.chips.toArray().indexOf(event.chip);
+            if (this._isValidIndex(chipIndex)) {
+                this._keyManager.updateActiveItem(chipIndex);
+            }
+            this.stateChanges.next();
+        });
+        this._chipBlurSubscription = this.chipBlurChanges.subscribe(() => {
+            this._blur();
+            this.stateChanges.next();
+        });
+    }
+    _listenToChipsRemoved() {
+        this._chipRemoveSubscription = this.chipRemoveChanges.subscribe((event) => {
+            const chip = event.chip;
+            const chipIndex = this.chips.toArray().indexOf(event.chip);
+            // In case the chip that will be removed is currently focused, we temporarily store
+            // the index in order to be able to determine an appropriate sibling chip that will
+            // receive focus.
+            if (this._isValidIndex(chipIndex) && chip._hasFocus) {
+                this._lastDestroyedChipIndex = chipIndex;
+            }
+        });
+    }
+    /** Checks whether an event comes from inside a chip element. */
+    _originatesFromChip(event) {
+        let currentElement = event.target;
+        while (currentElement &&
+            currentElement !== this._elementRef.nativeElement) {
+            if (currentElement.classList.contains('granite-chip')) {
+                return true;
+            }
+            currentElement = currentElement.parentElement;
+        }
+        return false;
+    }
+    /** Checks whether any of the chips is focused. */
+    _hasFocusedChip() {
+        return this.chips && this.chips.some((chip) => chip._hasFocus);
+    }
+    /** Syncs the list's state with the individual chips. */
+    _syncChipsState() {
+        if (this.chips) {
+            this.chips.forEach((chip) => {
+                chip._chipListDisabled = this._disabled;
+                chip._chipListMultiple = this.multiselect;
+            });
+        }
+    }
+}
+GraniteChipListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteChipListComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i3$1.Directionality, optional: true }, { token: i2$1.NgForm, optional: true }, { token: i2$1.FormGroupDirective, optional: true }, { token: i2$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+GraniteChipListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: GraniteChipListComponent, selector: "granite-chip-list", inputs: { role: "role", multiselect: "multiselect", disabled: "disabled", selectable: "selectable", tabindex: "tabindex", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaOrientation: ["aria-orientation", "ariaOrientation"] }, host: { listeners: { "focus": "focus()", "blur": "_blur()", "keydown": "_keydown($event)" }, properties: { "class.granite-chip-list-disabled": "disabled", "attr.tabindex": "disabled ? null : _tabIndex", "attr.role": "role", "attr.aria-label": "ariaLabel", "attr.aria-labelledby": "ariaLabelledby", "attr.aria-disabled": "disabled.toString()", "attr.aria-multiselectable": "multiselect", "attr.aria-orientation": "ariaOrientation", "id": "_uid" }, classAttribute: "granite-chip-list" }, queries: [{ propertyName: "chips", predicate: GraniteChipComponent, descendants: true }], exportAs: ["graniteChipList"], usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [".granite-chip-list{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;align-content:center;font-weight:400;font-size:var(--granite-font-size-body-small);line-height:var(--granite-line-height-flowing);overflow:auto;padding:0;margin:0}input.granite-chip-input{outline:none;border:none;background-color:transparent;color:var(--granite-color-text);margin-top:var(--granite-spacing-s);margin-bottom:var(--granite-spacing-s);margin-inline:var(--granite-spacing-xs)}granite-icon{color:var(--granite-color-text);background-color:transparent}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteChipListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'granite-chip-list', template: `<ng-content></ng-content>`, exportAs: 'graniteChipList', host: {
+                        class: 'granite-chip-list',
+                        '[class.granite-chip-list-disabled]': 'disabled',
+                        '[attr.tabindex]': 'disabled ? null : _tabIndex',
+                        '[attr.role]': 'role',
+                        '[attr.aria-label]': 'ariaLabel',
+                        '[attr.aria-labelledby]': 'ariaLabelledby',
+                        '[attr.aria-disabled]': 'disabled.toString()',
+                        '[attr.aria-multiselectable]': 'multiselect',
+                        '[attr.aria-orientation]': 'ariaOrientation',
+                        '[id]': '_uid',
+                        '(focus)': 'focus()',
+                        '(blur)': '_blur()',
+                        '(keydown)': '_keydown($event)',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".granite-chip-list{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;align-content:center;font-weight:400;font-size:var(--granite-font-size-body-small);line-height:var(--granite-line-height-flowing);overflow:auto;padding:0;margin:0}input.granite-chip-input{outline:none;border:none;background-color:transparent;color:var(--granite-color-text);margin-top:var(--granite-spacing-s);margin-bottom:var(--granite-spacing-s);margin-inline:var(--granite-spacing-xs)}granite-icon{color:var(--granite-color-text);background-color:transparent}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i3$1.Directionality, decorators: [{
+                    type: Optional
+                }] }, { type: i2$1.NgForm, decorators: [{
+                    type: Optional
+                }] }, { type: i2$1.FormGroupDirective, decorators: [{
+                    type: Optional
+                }] }, { type: i2$1.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }]; }, propDecorators: { role: [{
+                type: Input
+            }], multiselect: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], selectable: [{
+                type: Input
+            }], tabindex: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input,
+                args: ['aria-label']
+            }], ariaLabelledby: [{
+                type: Input,
+                args: ['aria-labelledby']
+            }], ariaOrientation: [{
+                type: Input,
+                args: ['aria-orientation']
+            }], chips: [{
+                type: ContentChildren,
+                args: [GraniteChipComponent, {
+                        // We need to use `descendants: true`, because Ivy will no longer match
+                        // indirect descendants if it's left as false.
+                        descendants: true,
+                    }]
+            }] } });
+
+let nextUniqueId = 0;
+class GraniteChipInputDirective {
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
+        /** Unique id for the input. */
+        this.id = `granite-chip-list-input-${nextUniqueId++}`;
+        /** The input's placeholder text. */
+        this.placeholder = '';
+        /**
+         * The list of key codes that will trigger a chipEnd event.
+         *
+         * Defaults to `[ENTER]`.
+         */
+        this.graniteChipInputSeparatorKeyCodes = [
+            ENTER,
+        ];
+        this._addOnBlur = true;
+        this._disabled = false;
+        /** Emitted when a chip is to be added. */
+        this.graniteChipInputTokenEnd = new EventEmitter();
+        this.focused = false;
+        this.inputElement = this._elementRef.nativeElement;
+    }
+    /** Register input for chip list */
+    set graniteChipInputFor(value) {
+        if (value) {
+            this._chipList = value;
+            this._chipList.registerInput(this);
+        }
+    }
+    /**
+     * Whether or not the chipEnd event will be emitted when the input is blurred.
+     */
+    get graniteChipInputAddOnBlur() {
+        return this._addOnBlur;
+    }
+    set graniteChipInputAddOnBlur(value) {
+        this._addOnBlur = coerceBooleanProperty(value);
+    }
+    /**
+     * Whether this is a required field, currently we use it only for setting aria-required.
+     */
+    get required() {
+        return this._required;
+    }
+    set required(value) {
+        this._required = coerceBooleanProperty(value);
+    }
+    /** Whether the input is disabled. */
+    get disabled() {
+        return this._disabled || (this._chipList && this._chipList.disabled);
+    }
+    set disabled(value) {
+        this._disabled = coerceBooleanProperty(value);
+    }
+    ngOnChanges() {
+        this._chipList.stateChanges.next();
+    }
+    ngOnDestroy() {
+        this.graniteChipInputTokenEnd.complete();
+    }
+    ngAfterContentInit() {
+        this._focusLastChipOnBackspace = this.empty;
+    }
+    /** Utility method to make host definition/tests more clear. */
+    _keydown(event) {
+        if (event) {
+            // Allow the user's focus to escape when they're tabbing forward. Note that we don't
+            // want to do this when going backwards, because focus should go back to the first chip.
+            if (event.keyCode === TAB && !hasModifierKey(event, 'shiftKey')) {
+                this._chipList._allowFocusEscape();
+            }
+            // To prevent the user from accidentally deleting chips when pressing BACKSPACE continuously,
+            // We focus the last chip on backspace only after the user has released the backspace button,
+            // and the input is empty (see behaviour in _keyup)
+            if (event.keyCode === BACKSPACE && this._focusLastChipOnBackspace) {
+                this._chipList._keyManager.setLastItemActive();
+                event.preventDefault();
+                return;
+            }
+            else {
+                this._focusLastChipOnBackspace = false;
+            }
+        }
+        this._emitChipEnd(event);
+    }
+    /**
+     * Pass events to the keyboard manager. Available here for tests.
+     */
+    _keyup(event) {
+        // Allow user to move focus to chips next time he presses backspace
+        if (!this._focusLastChipOnBackspace &&
+            event.keyCode === BACKSPACE &&
+            this.empty) {
+            this._focusLastChipOnBackspace = true;
+            event.preventDefault();
+        }
+    }
+    /** Checks to see if the blur should emit the (chipEnd) event. */
+    _blur() {
+        if (this.graniteChipInputAddOnBlur) {
+            this._emitChipEnd();
+        }
+        this.focused = false;
+        // Blur the chip list if it is not focused
+        if (!this._chipList.focused) {
+            this._chipList._blur();
+        }
+        this._chipList.stateChanges.next();
+    }
+    _focus() {
+        this.focused = true;
+        this._focusLastChipOnBackspace = this.empty;
+        this._chipList.stateChanges.next();
+    }
+    /** Checks to see if the (chipEnd) event needs to be emitted. */
+    _emitChipEnd(event) {
+        if (!this.inputElement.value && !!event) {
+            this._chipList._keydown(event);
+        }
+        if (!event || this._isSeparatorKey(event)) {
+            this.graniteChipInputTokenEnd.emit({
+                input: this.inputElement,
+                value: this.inputElement.value,
+                chipInput: this,
+            });
+            event?.preventDefault();
+        }
+    }
+    _onInput() {
+        // Let chip list know whenever the value changes.
+        this._chipList.stateChanges.next();
+    }
+    /** Focuses the input (called from parent level). */
+    setFocus(options) {
+        this.inputElement.focus(options);
+    }
+    /** Clears the input */
+    clear() {
+        this.inputElement.value = '';
+        this._focusLastChipOnBackspace = true;
+    }
+    /** Whether the input is empty. */
+    get empty() {
+        return !this.inputElement.value;
+    }
+    /** Checks whether a keycode is one of the configured separators. */
+    _isSeparatorKey(event) {
+        return (!hasModifierKey(event) &&
+            new Set(this.graniteChipInputSeparatorKeyCodes).has(event.keyCode));
+    }
+}
+GraniteChipInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteChipInputDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+GraniteChipInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: GraniteChipInputDirective, selector: "input[graniteChipInputFor]", inputs: { id: "id", placeholder: "placeholder", graniteChipInputFor: "graniteChipInputFor", graniteChipInputSeparatorKeyCodes: "graniteChipInputSeparatorKeyCodes", graniteChipInputAddOnBlur: "graniteChipInputAddOnBlur", required: "required", disabled: "disabled" }, outputs: { graniteChipInputTokenEnd: "graniteChipInputTokenEnd" }, host: { listeners: { "keydown": "_keydown($event)", "keyup": "_keyup($event)", "blur": "_blur()", "focus": "_focus()", "input": "_onInput()" }, properties: { "id": "id", "attr.disabled": "disabled || null", "attr.placeholder": "placeholder || null", "attr.aria-required": "required || null" }, classAttribute: "granite-chip-input" }, exportAs: ["graniteChipInput", "graniteChipInputFor"], usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteChipInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[graniteChipInputFor]',
+                    exportAs: 'graniteChipInput, graniteChipInputFor',
+                    host: {
+                        class: 'granite-chip-input',
+                        '[id]': 'id',
+                        '[attr.disabled]': 'disabled || null',
+                        '[attr.placeholder]': 'placeholder || null',
+                        '[attr.aria-required]': 'required || null',
+                        '(keydown)': '_keydown($event)',
+                        '(keyup)': '_keyup($event)',
+                        '(blur)': '_blur()',
+                        '(focus)': '_focus()',
+                        '(input)': '_onInput()',
+                    },
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { id: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], graniteChipInputFor: [{
+                type: Input
+            }], graniteChipInputSeparatorKeyCodes: [{
+                type: Input
+            }], graniteChipInputAddOnBlur: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], graniteChipInputTokenEnd: [{
+                type: Output
+            }] } });
+
+const CHIP_DECLARATIONS = [
+    GraniteChipListComponent,
+    GraniteChipComponent,
+    GraniteChipInputDirective,
+];
+class GraniteChipsModule {
+}
+GraniteChipsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteChipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+GraniteChipsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteChipsModule, declarations: [GraniteChipListComponent,
+        GraniteChipComponent,
+        GraniteChipInputDirective], imports: [CommonModule, FormsModule, ReactiveFormsModule, GraniteIconModule], exports: [GraniteChipListComponent,
+        GraniteChipComponent,
+        GraniteChipInputDirective] });
+GraniteChipsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteChipsModule, imports: [[CommonModule, FormsModule, ReactiveFormsModule, GraniteIconModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GraniteChipsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, FormsModule, ReactiveFormsModule, GraniteIconModule],
+                    declarations: CHIP_DECLARATIONS,
+                    exports: CHIP_DECLARATIONS,
+                }]
+        }] });
+
 class GraniteLabelComponent {
     constructor() {
         this.for = null;
@@ -3020,5 +4070,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonSelectors, ClientInputDesktopDirective, ClientInputTouchDirective, ClientOutputDesktopDirective, ClientOutputTouchDirective, GRANITE_CLIENT_INPUT, GRANITE_CLIENT_OUTPUT, GraniteAnchorComponent, GraniteArrangeGridComponent, GraniteArrangeGridItemComponent, GraniteArrangeGridModule, GraniteArrangeGridOrientation, GraniteBadgeComponent, GraniteBadgeHarness, GraniteBadgeModule, GraniteButtonComponent, GraniteButtonModule, GraniteCheckboxComponent, GraniteCheckboxGroupComponent, GraniteCheckboxModule, GraniteCoreModule, GraniteDividerDirective, GraniteGridComponent, GraniteGridItemComponent, GraniteGridModule, GraniteIconComponent, GraniteIconModule, GraniteInputFieldComponent, GraniteInputFieldModule, GraniteLabelComponent, GraniteLabelModule, GraniteMenuComponent, GraniteMenuHarness, GraniteMenuItemComponent, GraniteMenuItemHarness, GraniteMenuModule, GraniteMenuTouchCloseComponent, GraniteMenuTouchTitleItemComponent, GraniteMenuTriggerForDirective, GraniteRadioButtonComponent, GraniteRadioButtonModule, GraniteRadioGroupComponent, GraniteTitleDirective, GraniteTitlePipe, GraniteToggleSwitchComponent, GraniteToggleSwitchModule, PurePipesModule, deviceDesktop, deviceTouch, disabledMixin, graniteMenuDesktopAnimations, graniteMenuTouchAnimations };
+export { ButtonSelectors, ClientInputDesktopDirective, ClientInputTouchDirective, ClientOutputDesktopDirective, ClientOutputTouchDirective, GRANITE_CLIENT_INPUT, GRANITE_CLIENT_OUTPUT, GraniteAnchorComponent, GraniteArrangeGridComponent, GraniteArrangeGridItemComponent, GraniteArrangeGridModule, GraniteArrangeGridOrientation, GraniteBadgeComponent, GraniteBadgeHarness, GraniteBadgeModule, GraniteButtonComponent, GraniteButtonModule, GraniteCheckboxComponent, GraniteCheckboxGroupComponent, GraniteCheckboxModule, GraniteChipComponent, GraniteChipInputDirective, GraniteChipListComponent, GraniteChipSelectionChangeEvent, GraniteChipsModule, GraniteCoreModule, GraniteDividerDirective, GraniteGridComponent, GraniteGridItemComponent, GraniteGridModule, GraniteIconComponent, GraniteIconModule, GraniteInputFieldComponent, GraniteInputFieldModule, GraniteLabelComponent, GraniteLabelModule, GraniteMenuComponent, GraniteMenuHarness, GraniteMenuItemComponent, GraniteMenuItemHarness, GraniteMenuModule, GraniteMenuTouchCloseComponent, GraniteMenuTouchTitleItemComponent, GraniteMenuTriggerForDirective, GraniteRadioButtonComponent, GraniteRadioButtonModule, GraniteRadioGroupComponent, GraniteTitleDirective, GraniteTitlePipe, GraniteToggleSwitchComponent, GraniteToggleSwitchModule, PurePipesModule, deviceDesktop, deviceTouch, disabledMixin, graniteMenuDesktopAnimations, graniteMenuTouchAnimations };
 //# sourceMappingURL=ifsworld-granite-components.mjs.map