@ifsworld/granite-components 6.1.0 → 6.1.2

package/index.d.ts

@@ -31,6 +31,10 @@ export * from './lib/button/button.module';
 export * from './lib/button/button.component';
 export * from './lib/input-field/input-field.module';
 export * from './lib/input-field/input-field.component';
+export * from './lib/chips/chips.module';
+export * from './lib/chips/chip-list.component';
+export * from './lib/chips/chip.component';
+export * from './lib/chips/chip-input';
 export * from './lib/label/label.module';
 export * from './lib/label/label.component';
 export * from './lib/core/client-environment';

package/lib/chips/chip-input.d.ts

@@ -0,0 +1,89 @@
+import { AfterContentInit, ElementRef, EventEmitter, OnChanges, OnDestroy } from '@angular/core';
+import { GraniteChipListComponent } from './chip-list.component';
+import * as i0 from "@angular/core";
+export interface GraniteChipTextControl {
+    /** Unique identifier for the text control. */
+    id: string;
+    /** The text control's placeholder text. */
+    placeholder: string;
+    /** Whether the text control has browser focus. */
+    focused: boolean;
+    /** Whether the text control is empty. */
+    empty: boolean;
+    /** Focuses the text control. */
+    setFocus(options?: FocusOptions): void;
+}
+/** Represents an input event on a `graniteChipInput`. */
+export interface GraniteChipInputEvent {
+    /** The native `<input>` element that the event is being fired for. */
+    input: HTMLInputElement;
+    /** The value of the input. */
+    value: string;
+    /** Reference to the chip input that emitted the event. */
+    chipInput: GraniteChipInputDirective;
+}
+export declare class GraniteChipInputDirective implements GraniteChipTextControl, OnChanges, OnDestroy, AfterContentInit {
+    protected _elementRef: ElementRef<HTMLInputElement>;
+    /** Unique id for the input. */
+    id: string;
+    /** The input's placeholder text. */
+    placeholder: string;
+    /** Register input for chip list */
+    set graniteChipInputFor(value: GraniteChipListComponent);
+    /**
+     * The list of key codes that will trigger a chipEnd event.
+     *
+     * Defaults to `[ENTER]`.
+     */
+    graniteChipInputSeparatorKeyCodes: readonly number[] | ReadonlySet<number>;
+    /**
+     * Whether or not the chipEnd event will be emitted when the input is blurred.
+     */
+    get graniteChipInputAddOnBlur(): boolean;
+    set graniteChipInputAddOnBlur(value: boolean);
+    _addOnBlur: boolean;
+    /**
+     * Whether this is a required field, currently we use it only for setting aria-required.
+     */
+    get required(): boolean;
+    set required(value: boolean);
+    protected _required: boolean | undefined;
+    /** Whether the input is disabled. */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private _disabled;
+    /** Emitted when a chip is to be added. */
+    readonly graniteChipInputTokenEnd: EventEmitter<GraniteChipInputEvent>;
+    /** The native input element to which this directive is attached. */
+    readonly inputElement: HTMLInputElement;
+    _chipList: GraniteChipListComponent;
+    focused: boolean;
+    /** Used to prevent focus moving to chips while user is holding backspace */
+    private _focusLastChipOnBackspace;
+    constructor(_elementRef: ElementRef<HTMLInputElement>);
+    ngOnChanges(): void;
+    ngOnDestroy(): void;
+    ngAfterContentInit(): void;
+    /** Utility method to make host definition/tests more clear. */
+    _keydown(event?: KeyboardEvent): void;
+    /**
+     * Pass events to the keyboard manager. Available here for tests.
+     */
+    _keyup(event: KeyboardEvent): void;
+    /** Checks to see if the blur should emit the (chipEnd) event. */
+    _blur(): void;
+    _focus(): void;
+    /** Checks to see if the (chipEnd) event needs to be emitted. */
+    _emitChipEnd(event?: KeyboardEvent): void;
+    _onInput(): void;
+    /** Focuses the input (called from parent level). */
+    setFocus(options?: FocusOptions): void;
+    /** Clears the input */
+    clear(): void;
+    /** Whether the input is empty. */
+    get empty(): boolean;
+    /** Checks whether a keycode is one of the configured separators. */
+    private _isSeparatorKey;
+    static ɵfac: i0.ɵɵFactoryDeclaration<GraniteChipInputDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<GraniteChipInputDirective, "input[graniteChipInputFor]", ["graniteChipInput", "graniteChipInputFor"], { "id": "id"; "placeholder": "placeholder"; "graniteChipInputFor": "graniteChipInputFor"; "graniteChipInputSeparatorKeyCodes": "graniteChipInputSeparatorKeyCodes"; "graniteChipInputAddOnBlur": "graniteChipInputAddOnBlur"; "required": "required"; "disabled": "disabled"; }, { "graniteChipInputTokenEnd": "graniteChipInputTokenEnd"; }, never>;
+}

package/lib/chips/chip-list.component.d.ts

@@ -0,0 +1,185 @@
+import { FocusKeyManager } from '@angular/cdk/a11y';
+import { Directionality } from '@angular/cdk/bidi';
+import { SelectionModel } from '@angular/cdk/collections';
+import { AfterContentInit, ChangeDetectorRef, DoCheck, ElementRef, OnDestroy, OnInit, QueryList, EventEmitter } from '@angular/core';
+import { ControlValueAccessor, FormGroupDirective, NgControl, NgForm } from '@angular/forms';
+import { Observable } from 'rxjs';
+import { GraniteChipComponent, GraniteChipEvent, GraniteChipSelectionChangeEvent } from './chip.component';
+import { GraniteChipTextControl } from './chip-input';
+import * as i0 from "@angular/core";
+declare abstract class GraniteChipListBase {
+    _parentForm: NgForm;
+    _parentFormGroup: FormGroupDirective;
+    ngControl: NgControl;
+    readonly stateChanges: EventEmitter<void>;
+    constructor(_parentForm: NgForm, _parentFormGroup: FormGroupDirective, ngControl: NgControl);
+}
+export declare class GraniteChipListComponent extends GraniteChipListBase implements ControlValueAccessor, AfterContentInit, DoCheck, OnInit, OnDestroy {
+    protected _elementRef: ElementRef<HTMLElement>;
+    private _changeDetectorRef;
+    private _dir;
+    readonly controlType: string;
+    /**
+     * 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.
+     */
+    private _lastDestroyedChipIndex;
+    /** Subject that emits when the component has been destroyed. */
+    private readonly _destroyed;
+    /** Subscription to focus changes in the chips. */
+    private _chipFocusSubscription;
+    /** Subscription to blur changes in the chips. */
+    private _chipBlurSubscription;
+    /** Subscription to selection changes in chips. */
+    private _chipSelectionSubscription;
+    /** Subscription to remove changes in chips. */
+    private _chipRemoveSubscription;
+    /** The chip input to add more chips */
+    protected _chipInput: GraniteChipTextControl;
+    /** Uid of the chip list */
+    _uid: string;
+    /** Tab index for the chip list. */
+    _tabIndex: number;
+    /**
+     * User defined tab index.
+     * When it is not null, use user defined tab index. Otherwise use _tabIndex
+     */
+    _userTabIndex: number | null;
+    /** The FocusKeyManager which handles focus. */
+    _keyManager: FocusKeyManager<GraniteChipComponent>;
+    _selectionModel: SelectionModel<GraniteChipComponent>;
+    /** The ARIA role applied to the chip list. */
+    get role(): string | null;
+    set role(role: string | null);
+    private _explicitRole?;
+    /** Whether the user should be allowed to select multiselect chips. */
+    get multiselect(): boolean;
+    set multiselect(value: boolean);
+    private _multiple;
+    /**
+     * Whether the chip list is disabled.
+     */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    protected _disabled: boolean;
+    /**
+     * 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(): boolean;
+    set selectable(value: boolean);
+    protected _selectable: boolean;
+    set tabindex(value: number);
+    ariaLabel: string | null;
+    ariaLabelledby: string | null;
+    ariaOrientation: 'horizontal' | 'vertical';
+    /** The chips contained within this chip list. */
+    chips: QueryList<GraniteChipComponent>;
+    /** Unique identifier for the chip list. */
+    get id(): string;
+    /** Whether any chips or the matChipInput inside of this chip-list has focus. */
+    get focused(): boolean;
+    /** Whether the chip list is empty. */
+    get empty(): boolean;
+    /** The array of selected chips inside chip list. */
+    get selected(): GraniteChipComponent[] | GraniteChipComponent;
+    /** Combined stream of all of the child chips' selection change events. */
+    get chipSelectionChanges(): Observable<GraniteChipSelectionChangeEvent>;
+    /** Combined stream of all of the child chips' focus change events. */
+    get chipFocusChanges(): Observable<GraniteChipEvent>;
+    /** Combined stream of all of the child chips' blur change events. */
+    get chipBlurChanges(): Observable<GraniteChipEvent>;
+    /** Combined stream of all of the child chips' remove change events. */
+    get chipRemoveChanges(): Observable<GraniteChipEvent>;
+    /** Function when changed */
+    _onChange: (value: any) => void;
+    /** Function when changed */
+    _onTouched: () => void;
+    constructor(_elementRef: ElementRef<HTMLElement>, _changeDetectorRef: ChangeDetectorRef, _dir: Directionality, _parentForm: NgForm, _parentFormGroup: FormGroupDirective, ngControl: NgControl);
+    ngAfterContentInit(): void;
+    ngOnInit(): void;
+    ngDoCheck(): void;
+    ngOnDestroy(): void;
+    /** Associates an HTML input element with this chip list. */
+    registerInput(inputElement: GraniteChipTextControl): void;
+    writeValue(value: any): void;
+    registerOnChange(fn: (value: any) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    /**
+     * Focus chip list when click on the container.
+     */
+    onContainerClick(event: MouseEvent): void;
+    /**
+     * Focuses the first non-disabled chip in this chip list, or the associated input when there
+     * are no eligible chips.
+     */
+    focus(options?: FocusOptions): void;
+    /** Attempt to focus an input if we have one. */
+    _focusInput(options?: FocusOptions): void;
+    /**
+     * Pass events to the keyboard manager. Available here for tests.
+     */
+    _keydown(event: KeyboardEvent): void;
+    /**
+     * Check the tab index as you should not be allowed to focus an empty list.
+     */
+    protected _updateTabIndex(): void;
+    /**
+     * If the amount of chips changed, we need to update the
+     * key manager state and focus the next closest chip.
+     */
+    protected _updateFocusForDestroyedChips(): void;
+    /**
+     * 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.
+     */
+    private _isValidIndex;
+    private _setSelectionByValue;
+    /**
+     * Finds and selects the chip based on its value.
+     * @returns Chip that has the corresponding value.
+     */
+    private _selectValue;
+    private _initializeSelection;
+    /**
+     * Deselects every chip in the list.
+     * @param skip Chip that should not be deselected.
+     */
+    private _clearSelection;
+    /**
+     * Sorts the model values, ensuring that they keep the same
+     * order that they have in the panel.
+     */
+    private _sortValues;
+    private _compareWith;
+    /** When blurred, mark the field as touched when focus moved outside the chip list. */
+    _blur(): void;
+    /** Mark the field as touched */
+    _markAsTouched(): void;
+    /**
+     * 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(): void;
+    private _resetChips;
+    private _dropSubscriptions;
+    /** Listens to user-generated selection events on each chip. */
+    private _listenToChipsSelection;
+    /** Listens to user-generated selection events on each chip. */
+    private _listenToChipsFocus;
+    private _listenToChipsRemoved;
+    /** Checks whether an event comes from inside a chip element. */
+    private _originatesFromChip;
+    /** Checks whether any of the chips is focused. */
+    private _hasFocusedChip;
+    /** Syncs the list's state with the individual chips. */
+    private _syncChipsState;
+    static ɵfac: i0.ɵɵFactoryDeclaration<GraniteChipListComponent, [null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; self: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GraniteChipListComponent, "granite-chip-list", ["graniteChipList"], { "role": "role"; "multiselect": "multiselect"; "disabled": "disabled"; "selectable": "selectable"; "tabindex": "tabindex"; "ariaLabel": "aria-label"; "ariaLabelledby": "aria-labelledby"; "ariaOrientation": "aria-orientation"; }, {}, ["chips"], ["*"]>;
+}
+export {};

package/lib/chips/chip.component.d.ts

@@ -0,0 +1,104 @@
+import { FocusableOption } from '@angular/cdk/a11y';
+import { ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy } from '@angular/core';
+import * as i0 from "@angular/core";
+/** Event fired on an individual `granite-chip` element. */
+export interface GraniteChipEvent {
+    /** The chip the event was fired on. */
+    chip: GraniteChipComponent;
+}
+/** Event object emitted by GraniteChip when selected or deselected. */
+export declare class GraniteChipSelectionChangeEvent {
+    /** Reference to the chip that emitted the event. */
+    source: GraniteChipComponent;
+    /** Whether the chip that emitted the event is selected. */
+    selected: boolean;
+    /** Whether the selection change was a result of a user interaction. */
+    isUserInput: boolean;
+}
+export declare class GraniteChipComponent implements FocusableOption, OnDestroy {
+    _elementRef: ElementRef;
+    private _ngZone;
+    private _changeDetectorRef;
+    /** Whether the chip has focus. */
+    _hasFocus: boolean;
+    /** Whether the chip list is selectable */
+    _chipListSelectable: boolean;
+    /** Whether the chip list is in multi-selection mode. */
+    _chipListMultiple: boolean;
+    /** Whether the chip list as a whole is disabled. */
+    _chipListDisabled: boolean;
+    /** ARIA role that should be applied to the chip. */
+    role: string;
+    /** Whether the chip is selected. */
+    get selected(): boolean;
+    set selected(value: boolean);
+    protected _selected: boolean;
+    /** The value of the chip. Defaults to the text content inside `<granite-chip>` tags. */
+    get value(): any;
+    set value(val: any);
+    private _value;
+    /**
+     * 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(): boolean;
+    set selectable(value: boolean);
+    protected _selectable: boolean;
+    /** Whether the chip is disabled. Also the individual chips are disabled when chip list is disabled */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    protected _disabled: boolean;
+    /**
+     * Whether the chip can be removed from the list
+     */
+    get removable(): boolean;
+    set removable(value: boolean);
+    protected _removable: boolean;
+    /** Whether the chip is in an invalid state. */
+    get invalid(): boolean;
+    set invalid(value: boolean);
+    protected _invalid: boolean;
+    ariaLabel: string | null;
+    ariaLabelledby: string | null;
+    /** Emitted when the chip is selected or deselected. */
+    readonly selectionChange: EventEmitter<GraniteChipSelectionChangeEvent>;
+    /** Emitted when a chip is to be removed. */
+    readonly removed: EventEmitter<GraniteChipEvent>;
+    /** Emitted when the chip is destroyed. */
+    readonly destroyed: EventEmitter<GraniteChipEvent>;
+    tabIndex: number;
+    inputChip: boolean;
+    /** Emits when the chip is focused. */
+    readonly chipFocus: EventEmitter<GraniteChipEvent>;
+    /** Emits when the chip is blurred. */
+    readonly chipBlur: EventEmitter<GraniteChipEvent>;
+    constructor(_elementRef: ElementRef, _ngZone: NgZone, _changeDetectorRef: ChangeDetectorRef, tabIndex?: string);
+    ngOnDestroy(): void;
+    /** Selects the chip. */
+    select(isUserInput?: boolean): void;
+    /** Deselects the chip. */
+    deselect(): void;
+    /** Toggles the current selected state of this chip. */
+    toggleSelected(isUserInput?: boolean): boolean;
+    /** Allows for programmatic focusing of the chip unless it's disabled. */
+    focus(): void;
+    /**
+     * 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(): void;
+    /** Handles click events on the chip. */
+    _handleClick(event: Event): void;
+    /** Handle custom key presses. */
+    _handleKeydown(event: KeyboardEvent): void;
+    _handleRemoveClick(event: Event): void;
+    _blur(): void;
+    private _dispatchSelectionChange;
+    /** The ARIA selected applied to the chip. */
+    get ariaSelected(): string | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<GraniteChipComponent, [null, null, { optional: true; }, { attribute: "tabindex"; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GraniteChipComponent, "granite-chip, granite-input-chip", ["graniteChip"], { "tabIndex": "tabIndex"; "role": "role"; "selected": "selected"; "value": "value"; "selectable": "selectable"; "disabled": "disabled"; "removable": "removable"; "invalid": "invalid"; "ariaLabel": "aria-label"; "ariaLabelledby": "aria-labelledby"; }, { "selectionChange": "selectionChange"; "removed": "removed"; "destroyed": "destroyed"; "chipFocus": "chipFocus"; "chipBlur": "chipBlur"; }, never, ["*"]>;
+}

package/lib/chips/chips.module.d.ts

@@ -0,0 +1,12 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./chip-list.component";
+import * as i2 from "./chip.component";
+import * as i3 from "./chip-input";
+import * as i4 from "@angular/common";
+import * as i5 from "@angular/forms";
+import * as i6 from "../icon/icon.module";
+export declare class GraniteChipsModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<GraniteChipsModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<GraniteChipsModule, [typeof i1.GraniteChipListComponent, typeof i2.GraniteChipComponent, typeof i3.GraniteChipInputDirective], [typeof i4.CommonModule, typeof i5.FormsModule, typeof i5.ReactiveFormsModule, typeof i6.GraniteIconModule], [typeof i1.GraniteChipListComponent, typeof i2.GraniteChipComponent, typeof i3.GraniteChipInputDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<GraniteChipsModule>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ifsworld/granite-components",
-  "version": "6.1.0",
+  "version": "6.1.2",
   "peerDependencies": {
     "@angular/cdk": ">=13.0.0",
     "@angular/common": ">=13.0.0",
@@ -14,6 +14,7 @@
     "rxjs": ">=6.0.0",
     "@microsoft/applicationinsights-web": "^2.8.4",
     "@microsoft/applicationinsights-clickanalytics-js": "^2.8.4",
+    "@angular/forms": "13.3.11",
     "primeng": "13.4.1"
   },
   "dependencies": {