@impartner/design-components 2.0.1 → 2.1.1

package/lib/form-field/controls/select/select.component.d.ts

@@ -1,22 +1,26 @@
-import { AfterContentInit, AfterViewInit, ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, QueryList, SimpleChanges } from '@angular/core';
-import { ControlValueAccessor, FormGroupDirective, NgControl, NgForm } from '@angular/forms';
-import { NgbDropdown, NgbDropdownMenu } from '@ng-bootstrap/ng-bootstrap';
-import { BooleanInput } from '../../../../utilities';
+import { AfterViewInit, ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, QueryList, SimpleChanges } from '@angular/core';
+import { ControlValueAccessor, FormControl, FormGroupDirective, NgControl, NgForm } from '@angular/forms';
+import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap';
 import { Observable, Subject } from 'rxjs';
+import { ComponentTheme } from '../../../../types';
 import { ErrorStateMatcher } from '../../services';
-import { ImpdcFormRoot } from '../../directives';
+import { ImpdcFormRoot } from '../../component';
 import { CanDisable, HasTabIndex, ICanUpdateErrorState, IHasErrorState, ImpdcFormFieldControl } from '../../shared';
-import { SelectOptionSelectionChangeEvent, SelectOptionComponent } from './option/select-option.component';
+import { ISelectOptionParentComponent, ISelectValueBadgesParentComponent } from './option-parent';
+import { SelectOptionSelectionChangeEvent, SelectOptionDisplayComponent } from './option-display';
 import { SelectModel } from './select-model';
+import { SelectOptionComponent } from './option';
+import { ISelectOption } from './interfaces';
 import * as i0 from "@angular/core";
-export declare class SelectChangeEvent {
+export declare const ON_OPEN_AUTO_SCROLL_TIMEOUT_MS = 50;
+export declare class SelectChangeEvent<TComponent> {
     /** The specific SelectComponent that changed. */
-    readonly source: SelectComponent;
+    readonly source: TComponent;
     /** The selected value(s) */
     readonly value: any;
     constructor(
     /** The specific SelectComponent that changed. */
-    source: SelectComponent, 
+    source: TComponent, 
     /** The selected value(s) */
     value: any);
 }
@@ -39,38 +43,53 @@ export declare function getImpdcSelectNonFunctionValueError(): Error;
  * @ignore
  */
 export declare function getImpdcSelectDynamicMultipleError(): Error;
-declare const _SelectComponentBase: import("../../shared").Constructor<HasTabIndex> & import("../../shared").AbstractConstructor<HasTabIndex> & import("../../shared").Constructor<CanDisable> & import("../../shared").AbstractConstructor<CanDisable> & import("../../shared").Constructor<ICanUpdateErrorState> & import("../../shared").AbstractConstructor<ICanUpdateErrorState> & {
-    new (_defaultErrorStateMatcher: ErrorStateMatcher, _formRoot: ImpdcFormRoot, _parentForm: NgForm, _parentFormGroup: FormGroupDirective, ngControl: NgControl | null): {
+interface IRenderedSelectOption extends ISelectOption {
+    readonly selected?: boolean;
+    readonly showGroupLabel?: boolean;
+}
+declare const __SelectComponentBase: import("../../shared").Constructor<HasTabIndex> & import("../../shared").AbstractConstructor<HasTabIndex> & import("../../shared").Constructor<CanDisable> & import("../../shared").AbstractConstructor<CanDisable> & import("../../shared").Constructor<ICanUpdateErrorState> & import("../../shared").AbstractConstructor<ICanUpdateErrorState> & {
+    new (_defaultErrorStateMatcher: ErrorStateMatcher, _formRoot: ImpdcFormRoot | null, _parentForm: NgForm | null, _parentFormGroup: FormGroupDirective | null, ngControl: NgControl | null): {
         readonly stateChanges: Subject<void>;
         _defaultErrorStateMatcher: ErrorStateMatcher;
-        _formRoot: ImpdcFormRoot;
-        _parentForm: NgForm;
-        _parentFormGroup: FormGroupDirective;
+        _formRoot: ImpdcFormRoot | null;
+        _parentForm: NgForm | null;
+        _parentFormGroup: FormGroupDirective | null;
         ngControl: NgControl | null;
     };
 };
-/**
- * The `SelectComponent` (`<impdc-select`) is a select-style dropdown input where an item (or multiple items) can be picked
- * from a list of available options. This component can be used within a `FormFieldComponent` (`<impdc-form-field`).
- * To use, import `SelectModule` or another module that imports and exports that module from `@impartner/design-components`.
- */
-export declare class SelectComponent extends _SelectComponentBase implements OnInit, AfterContentInit, AfterViewInit, OnChanges, DoCheck, OnDestroy, ControlValueAccessor, HasTabIndex, ImpdcFormFieldControl<any>, CanDisable, ICanUpdateErrorState, IHasErrorState {
-    private readonly _changeDetector;
-    protected readonly _ngZone: NgZone;
-    /** @ignore */
-    options: QueryList<SelectOptionComponent>;
-    protected _ngbDropdown: NgbDropdown;
-    protected _ngbDropdownMenu: NgbDropdownMenu;
-    protected _toggleButtonRef: ElementRef<HTMLButtonElement>;
-    /** @ignore */
-    readonly optionSelectionChanges: Observable<SelectOptionSelectionChangeEvent>;
-    protected readonly _uid: string;
-    protected _selectionModel: SelectModel<SelectOptionComponent>;
+export declare abstract class _SelectComponentBase extends __SelectComponentBase implements ISelectOptionParentComponent, OnInit, AfterViewInit, OnChanges, DoCheck, OnDestroy, ControlValueAccessor, HasTabIndex, ImpdcFormFieldControl<any>, CanDisable, ICanUpdateErrorState, IHasErrorState {
+    protected staticOptions: QueryList<SelectOptionComponent>;
+    protected options: QueryList<SelectOptionDisplayComponent>;
+    protected ngbDropdown: NgbDropdown;
+    protected toggleButtonRef?: ElementRef<HTMLElement>;
+    protected searchInputRef?: ElementRef<HTMLInputElement>;
     private readonly _ngDestroy;
+    private readonly _searchSubject;
     private _previousControl?;
     private _compareWith;
     private _cvaOnChange;
     private _cvaOnTouched;
+    protected readonly uid: string;
+    protected readonly changeDetector: ChangeDetectorRef;
+    protected readonly ngZone: NgZone;
+    protected readonly searchControl: FormControl<string | null>;
+    protected readonly BadgeTheme: typeof ComponentTheme;
+    protected readonly filteredOptions$: Observable<IRenderedSelectOption[]>;
+    protected selectionModel: SelectModel<ISelectOption>;
+    protected activeIndex: number;
+    /** @ignore */
+    readonly optionSelectionChanges: Observable<SelectOptionSelectionChangeEvent>;
+    /**
+     * Set whether or not an input field will appear for searching and
+     * filtering visible options.
+     *
+     * - `'none'`: No search control will be displayed, and all select options are provided via projected `<impdc-select-option>` elements.
+     * - `'static'`: A search control will be displayed, select options are provided via projected `<impdc-select-option>` elements, and
+     * filtering is performed against the `[label]` attribute value.
+     * @default 'none'
+     */
+    get search(): 'none' | 'static';
+    set search(value: 'none' | 'static');
     /**
      * The placeholder text that will be displayed when no selection has been made.
      *
@@ -78,50 +97,58 @@ export declare class SelectComponent extends _SelectComponentBase implements OnI
      */
     get placeholder(): string;
     set placeholder(value: string);
-    private _placeholder;
+    protected _placeholder: string;
     /**
      * Used to set requiredness of control in a template-based manner;
      * not necessary when using the Angular reactive forms API and `required` validator.
      */
     get required(): boolean;
-    set required(value: BooleanInput);
+    set required(value: boolean);
     private _required;
     /**
-     * Sets whether the control is a single-select or multiple-select. Cannot be changed after component initialization.
+     * Whether the control is a single-select or multiple-select. Cannot be changed after component initialization.
      */
     get multiple(): boolean;
-    set multiple(value: BooleanInput);
     protected _multiple: boolean;
     /**
      * Function used to compare option values with selected values. The first arg is a
-     * value from an option, and the second arg is a value from the selection.
+     * `value` from an option, and the second arg is a `value` from the selection or another option.
      *
      * @returns Boolean indicating if the values are equivalent.
      */
     get compareWith(): (a: any, b: any) => boolean;
     set compareWith(fn: (a: any, b: any) => boolean);
+    /**
+     * Document element that the select dropdown will be attached to in the DOM - either the
+     * document's `<body>` tag, or as a child of the component tag.
+     *
+     * The default value (`'body'`) is generally the correct choice, and should only be
+     * overridden when absolutely certain that the result behavior is what's desired.
+     */
+    dropdownContainer: 'body' | null;
     errorStateMatcher: ErrorStateMatcher;
     /** Events fire when selection has been changed by the user. */
-    readonly selectionChange: EventEmitter<SelectChangeEvent>;
+    readonly selectionChange: EventEmitter<SelectChangeEvent<this>>;
     /**
      * Events fire when raw value of select changes. Mainly exists to handle
      * two-way binding of `value` input property.
      * @ignore
      */
     readonly valueChange: EventEmitter<any>;
+    /**
+     * Events fire when the text value of the option search input control has changed.
+     */
+    readonly searchTextChanges: Observable<string | null>;
+    constructor(uid: string, tabIndex?: string);
     get dropdownOpen(): boolean;
-    constructor(_changeDetector: ChangeDetectorRef, _ngZone: NgZone, tabIndex: string, _defaultErrorStateMatcher: ErrorStateMatcher, _formRoot: ImpdcFormRoot, _parentForm: NgForm, _parentFormGroup: FormGroupDirective, ngControl: NgControl);
     get empty(): boolean;
-    get displayedValue(): string;
-    get selected(): SelectOptionComponent | SelectOptionComponent[];
+    get selected(): ISelectOption | ISelectOption[];
     /** @ignore */
     focus(options?: FocusOptions): void;
-    protected _handleOpenChange(isOpen: boolean): void;
+    protected handleOpenChange(isOpen: boolean): void;
     /** @ignore */
     ngOnInit(): void;
     /** @ignore */
-    ngAfterContentInit(): void;
-    /** @ignore */
     ngAfterViewInit(): void;
     /** @ignore */
     ngDoCheck(): void;
@@ -129,8 +156,8 @@ export declare class SelectComponent extends _SelectComponentBase implements OnI
     ngOnChanges(changes: SimpleChanges): void;
     /** @ignore */
     ngOnDestroy(): void;
-    readonly controlType: string;
-    readonly supportsAffixes: boolean;
+    abstract readonly controlType: string;
+    abstract readonly supportsAffixes: boolean;
     get value(): any;
     set value(value: any);
     protected _value: any;
@@ -147,11 +174,16 @@ export declare class SelectComponent extends _SelectComponentBase implements OnI
     registerOnTouched(fn: () => {}): void;
     /** @ignore */
     setDisabledState(isDisabled: boolean): void;
-    protected _onFocus(): void;
+    protected onFocus(): void;
     /**
      * Calls the CVA touched callback only if the dropdown is closed.
      */
-    protected _onBlur(): void;
+    protected onBlur(): void;
+    protected clearSelection(): void;
+    protected handleSearchSubmit(evt: Event): void;
+    protected handleSearchUpDown(evt: Event, direction: 'up' | 'down'): void;
+    protected markActive(index: number): void;
+    protected selectedIsSingle(selected: ISelectOption | ISelectOption[]): selected is ISelectOption;
     private _initializeSelection;
     private _setSelectionByValue;
     private _selectOptionByValue;
@@ -162,9 +194,39 @@ export declare class SelectComponent extends _SelectComponentBase implements OnI
     private _resetOptions;
     private _onSelect;
     private _sortValues;
-    private _propagateChanges;
-    private _buildChangeEvent;
-    static ɵfac: i0.ɵɵFactoryDeclaration<SelectComponent, [null, null, { attribute: "tabindex"; }, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; self: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent, "impdc-select", ["impdcSelect"], { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, { "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["options"], ["*"], false, never>;
+    protected _propagateChanges(fallbackValue?: any): void;
+    protected _buildChangeEvent(value: any): SelectChangeEvent<this>;
+    /** @ignore */
+    protected _deselectOption(option: ISelectOption, markTouched?: boolean): void;
+    private _scrollToSelectedOption;
+    static ɵfac: i0.ɵɵFactoryDeclaration<_SelectComponentBase, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<_SelectComponentBase, never, never, { "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, { "searchTextChanges": "searchTextChanges"; }, ["staticOptions"], never, false, never>;
+}
+/**
+ * The `SelectComponent` (`<impdc-select`) is a select-style dropdown input where an item (or multiple items) can be picked
+ * from a list of *unique* available options. This component can be used within a `FormFieldComponent` (`<impdc-form-field`).
+ * To use, add `SelectModule` to the `imports` array of the relevant `NgModule` or standalone component.
+ */
+export declare class SelectComponent extends _SelectComponentBase implements ISelectValueBadgesParentComponent {
+    readonly controlType: string;
+    readonly supportsAffixes: boolean;
+    constructor(tabIndex?: string);
+    /**
+     * Allow the user to click a button inside of the select control and clear their selection(s);
+     *
+     * @default true
+     */
+    allowClear: boolean;
+    get multiple(): boolean;
+    set multiple(value: boolean);
+    multipleDisplay: 'inside' | 'outside';
+    /** @ignore */
+    deselectOption(option: ISelectOption): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SelectComponent, [{ attribute: "tabindex"; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent, "impdc-select", ["impdcSelect"], { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "search": { "alias": "search"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "dropdownContainer": { "alias": "dropdownContainer"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "allowClear": { "alias": "allowClear"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "multipleDisplay": { "alias": "multipleDisplay"; "required": false; }; }, { "selectionChange": "selectionChange"; "valueChange": "valueChange"; "searchTextChanges": "searchTextChanges"; }, never, never, true, never>;
+    static ngAcceptInputType_tabIndex: unknown;
+    static ngAcceptInputType_required: unknown;
+    static ngAcceptInputType_allowClear: unknown;
+    static ngAcceptInputType_multiple: unknown;
 }
 export {};

package/lib/form-field/controls/select/select.module.d.ts

@@ -1,11 +1,10 @@
 import * as i0 from "@angular/core";
-import * as i1 from "./option/select-option.component";
-import * as i2 from "./select.component";
-import * as i3 from "@angular/common";
-import * as i4 from "@ng-bootstrap/ng-bootstrap";
-import * as i5 from "../../../icon/icon.module";
+import * as i1 from "./option-group/select-option-group.component";
+import * as i2 from "./option/select-option.component";
+import * as i3 from "./value-tags-display/select-value-tags-display.component";
+import * as i4 from "./select.component";
 export declare class SelectModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<SelectModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<SelectModule, [typeof i1.SelectOptionComponent, typeof i2.SelectComponent], [typeof i3.CommonModule, typeof i4.NgbDropdownModule, typeof i5.IconModule], [typeof i4.NgbDropdownModule, typeof i5.IconModule, typeof i1.SelectOptionComponent, typeof i2.SelectComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SelectModule, never, [typeof i1.SelectOptionGroupComponent, typeof i2.SelectOptionComponent, typeof i3.SelectValueTagsDisplayComponent, typeof i4.SelectComponent], [typeof i1.SelectOptionGroupComponent, typeof i2.SelectOptionComponent, typeof i3.SelectValueTagsDisplayComponent, typeof i4.SelectComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<SelectModule>;
 }

package/lib/form-field/controls/select/value-tags-display/index.d.ts

@@ -0,0 +1 @@
+export * from './select-value-tags-display.component';

package/lib/form-field/controls/select/value-tags-display/select-value-tags-display.component.d.ts

@@ -0,0 +1,46 @@
+import { OnChanges, OnDestroy, OnInit } from '@angular/core';
+import { ISelectValueBadgesParentComponent } from '../option-parent';
+import { ComponentTheme } from '../../../../../types';
+import { ISelectOption } from '../interfaces';
+import * as i0 from "@angular/core";
+export declare class SelectValueTagsDisplayComponent implements OnInit, OnChanges, OnDestroy {
+    private readonly _changeDetector;
+    private readonly _parentSelect;
+    private readonly _destroy$;
+    protected readonly BadgeTheme: typeof ComponentTheme;
+    protected truncate: boolean;
+    rounded: boolean;
+    get select(): ISelectValueBadgesParentComponent | null;
+    set select(value: ISelectValueBadgesParentComponent | null);
+    private _select;
+    protected get resolvedSelect(): ISelectValueBadgesParentComponent | null;
+    /**
+     * Render the control is a readonly state.
+     *
+     * Semantically distinct from `disabled`, `readonly` controls will still have their values bound in
+     * Angular forms and `FormGroup`s, whereas a disabled control's value would be omitted.
+     */
+    readonly: boolean;
+    /**
+     * The maximum number of values that will be displayed inline before truncation occurs.
+     */
+    truncateThreshold: number | undefined;
+    /**
+     * Text to be shown when displayed values are truncated, allowing the user to view all selected values.
+     */
+    showMoreLabel: string;
+    /**
+     * Text to be shown when displayed values have been expanded beyond the truncation threshold, allowing
+     * the user collapse the view again.
+     */
+    showLessLabel: string;
+    ngOnInit(): void;
+    ngOnChanges(): void;
+    ngOnDestroy(): void;
+    protected toggleTruncate(): void;
+    protected observeStateChanges(select: ISelectValueBadgesParentComponent): void;
+    protected selectedIsMultiple(selected: ISelectOption | ISelectOption[]): selected is ISelectOption[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<SelectValueTagsDisplayComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SelectValueTagsDisplayComponent, "impdc-select-value-tags-display", never, { "rounded": { "alias": "rounded"; "required": false; }; "select": { "alias": "select"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "truncateThreshold": { "alias": "truncateThreshold"; "required": false; }; "showMoreLabel": { "alias": "showMoreLabel"; "required": false; }; "showLessLabel": { "alias": "showLessLabel"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ngAcceptInputType_rounded: unknown;
+}

package/lib/form-field/controls/shared/toggle/components/toggle-input/toggle-input.component.d.ts

@@ -2,5 +2,5 @@ import * as i0 from "@angular/core";
 export declare class ToggleInputComponent {
     classFormCheck: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToggleInputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ToggleInputComponent, "input[impdc-toggle-input]", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToggleInputComponent, "input[impdc-toggle-input]", never, {}, {}, never, never, true, never>;
 }

package/lib/form-field/controls/shared/toggle/toggle.component.d.ts

@@ -8,6 +8,7 @@ export declare class ToggleComponent implements AfterViewChecked {
     description: string;
     inline: boolean;
     switchIcons: boolean;
+    layout: 'check-start' | 'check-end';
     branded: boolean;
     private classDefaults;
     private get classHasDescription();
@@ -15,6 +16,8 @@ export declare class ToggleComponent implements AfterViewChecked {
     private get classFormCheckInline();
     private get classFormSwitchIcons();
     private get classBranded();
+    private get classFlexRowReverse();
+    private get classJustifyContentEnd();
     inputRef?: ElementRef<HTMLInputElement>;
     get id(): string;
     get isCheckbox(): boolean;
@@ -22,5 +25,5 @@ export declare class ToggleComponent implements AfterViewChecked {
     constructor(changeDetectorRef: ChangeDetectorRef);
     ngAfterViewChecked(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToggleComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ToggleComponent, "impdc-toggle", never, { "isSwitch": { "alias": "isSwitch"; "required": false; }; "label": { "alias": "label"; "required": false; }; "description": { "alias": "description"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; "switchIcons": { "alias": "switchIcons"; "required": false; }; }, {}, ["inputRef"], ["[impdc-toggle-input]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToggleComponent, "impdc-toggle", never, { "isSwitch": { "alias": "isSwitch"; "required": false; }; "label": { "alias": "label"; "required": false; }; "description": { "alias": "description"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; "switchIcons": { "alias": "switchIcons"; "required": false; }; "layout": { "alias": "layout"; "required": false; }; }, {}, ["inputRef"], ["[impdc-toggle-input]"], true, never>;
 }

package/lib/form-field/controls/shared/toggle/toggle.module.d.ts

@@ -1,10 +1,9 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./toggle.component";
 import * as i2 from "./components/toggle-input/toggle-input.component";
-import * as i3 from "@angular/common";
 export declare class ToggleModule {
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<ToggleModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ToggleModule, [typeof i1.ToggleComponent, typeof i2.ToggleInputComponent], [typeof i3.CommonModule], [typeof i1.ToggleComponent, typeof i2.ToggleInputComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ToggleModule, never, [typeof i1.ToggleComponent, typeof i2.ToggleInputComponent], [typeof i1.ToggleComponent, typeof i2.ToggleInputComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ToggleModule>;
 }

package/lib/form-field/controls/tag-select/index.d.ts

@@ -0,0 +1 @@
+export * from './tag-select.component';

package/lib/form-field/controls/tag-select/tag-select.component.d.ts

@@ -0,0 +1,43 @@
+import { _SelectComponentBase } from '../select/select.component';
+import { ISelectOption, ISelectValueBadgesParentComponent } from '../select';
+import * as i0 from "@angular/core";
+/**
+ * The `TagSelectComponent` (`<impdc-tag-select>`) is a form control where multiple "tag"-like values can
+ * be picked from a list of *unique* available options. This component can be used within a `FormFieldComponent`
+ * (`<impdc-form-field>`) component or on its own. To use, add `TagSelectComponent` to the `imports` array of
+ * the relevant `NgModule` or standalone component.
+ */
+export declare class TagSelectComponent extends _SelectComponentBase implements ISelectValueBadgesParentComponent {
+    readonly controlType: string;
+    readonly supportsAffixes: boolean;
+    /**
+     * Render the control is a readonly state.
+     *
+     * Semantically distinct from `disabled`, `readonly` controls will still have their values bound in
+     * Angular forms and `FormGroup`s, whereas a disabled control's value would be omitted.
+     */
+    readonly: boolean;
+    /**
+     * The maximum number of values that will be displayed inline before truncation occurs.
+     */
+    truncateThreshold: number;
+    /**
+     * Text to be shown when displayed values are truncated, allowing the user to view all selected values.
+     */
+    showMoreLabel: string;
+    /**
+     * Text to be shown when displayed values have been expanded beyond the truncation threshold, allowing
+     * the user collapse the view again.
+     */
+    showLessLabel: string;
+    constructor(tabIndex?: string);
+    /** @ignore */
+    deselectOption(option: ISelectOption): void;
+    protected toggleDropdown(evt: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TagSelectComponent, [{ attribute: "tabindex"; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TagSelectComponent, "impdc-tag-select", ["impdcTagSelect"], { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "search": { "alias": "search"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "dropdownContainer": { "alias": "dropdownContainer"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "truncateThreshold": { "alias": "truncateThreshold"; "required": false; }; "showMoreLabel": { "alias": "showMoreLabel"; "required": false; }; "showLessLabel": { "alias": "showLessLabel"; "required": false; }; }, { "selectionChange": "selectionChange"; "valueChange": "valueChange"; "searchTextChanges": "searchTextChanges"; }, never, never, true, never>;
+    static ngAcceptInputType_tabIndex: unknown;
+    static ngAcceptInputType_required: unknown;
+    static ngAcceptInputType_readonly: unknown;
+    static ngAcceptInputType_truncateThreshold: unknown;
+}

package/lib/form-field/impdc-forms.d.ts

@@ -1,7 +1,6 @@
+export * from './component';
 export * from './controls';
-export * from './directives';
 export * from './services';
 export * from './shared';
 export * from './form-field-errors';
-export { IMPDC_FORM_FIELD, FormFieldComponent } from './form-field.component';
 export { ImpdcFormsModule } from './impdc-forms.module';

package/lib/form-field/impdc-forms.module.d.ts

@@ -1,19 +1,13 @@
 import * as i0 from "@angular/core";
-import * as i1 from "./form-field.component";
-import * as i2 from "./controls/input/input.directive";
-import * as i3 from "./directives/corner-hint.directive";
-import * as i4 from "./directives/error.directive";
-import * as i5 from "./directives/hint.directive";
-import * as i6 from "./directives/label.directive";
-import * as i7 from "./directives/prefix.directive";
-import * as i8 from "./directives/form-root.directive";
-import * as i9 from "./directives/suffix.directive";
-import * as i10 from "@angular/common";
-import * as i11 from "./controls/checkbox/checkbox.module";
-import * as i12 from "./controls/radio/radio.module";
-import * as i13 from "./controls/select/select.module";
+import * as i1 from "@angular/common";
+import * as i2 from "./component/form-field.module";
+import * as i3 from "./controls/checkbox/checkbox.module";
+import * as i4 from "./controls/radio/radio.module";
+import * as i5 from "./controls/select/select.module";
+import * as i6 from "./controls/tag-select/tag-select.component";
+import * as i7 from "./controls/input/input.directive";
 export declare class ImpdcFormsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ImpdcFormsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ImpdcFormsModule, [typeof i1.FormFieldComponent, typeof i2.InputDirective, typeof i3.CornerHintDirective, typeof i4.ErrorDirective, typeof i5.HintDirective, typeof i6.LabelDirective, typeof i7.PrefixDirective, typeof i8.RootFormGroupDirective, typeof i8.RootNgFormDirective, typeof i9.SuffixDirective], [typeof i10.CommonModule, typeof i11.CheckboxModule, typeof i12.RadioModule, typeof i13.SelectModule], [typeof i11.CheckboxModule, typeof i12.RadioModule, typeof i13.SelectModule, typeof i1.FormFieldComponent, typeof i2.InputDirective, typeof i3.CornerHintDirective, typeof i4.ErrorDirective, typeof i5.HintDirective, typeof i6.LabelDirective, typeof i7.PrefixDirective, typeof i8.RootFormGroupDirective, typeof i8.RootNgFormDirective, typeof i9.SuffixDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ImpdcFormsModule, never, [typeof i1.CommonModule, typeof i2.FormFieldModule, typeof i3.CheckboxModule, typeof i4.RadioModule, typeof i5.SelectModule, typeof i6.TagSelectComponent, typeof i7.InputDirective], [typeof i2.FormFieldModule, typeof i3.CheckboxModule, typeof i4.RadioModule, typeof i5.SelectModule, typeof i6.TagSelectComponent, typeof i7.InputDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ImpdcFormsModule>;
 }

package/lib/form-field/shared/error-state.mixin.d.ts

@@ -1,6 +1,6 @@
 import { FormGroupDirective, NgControl, NgForm } from '@angular/forms';
 import { Subject } from 'rxjs';
-import { ImpdcFormRoot } from '../directives';
+import { ImpdcFormRoot } from '../component';
 import { ErrorStateMatcher } from '../services';
 import { AbstractConstructor, Constructor } from './constructors.type';
 /**
@@ -16,9 +16,9 @@ type CanUpdateErrorStateCtor = Constructor<ICanUpdateErrorState> & AbstractConst
  * @docs-private
  */
 export interface IHasErrorState {
-    _formRoot: ImpdcFormRoot;
-    _parentFormGroup: FormGroupDirective;
-    _parentForm: NgForm;
+    _formRoot: ImpdcFormRoot | null;
+    _parentFormGroup: FormGroupDirective | null;
+    _parentForm: NgForm | null;
     _defaultErrorStateMatcher: ErrorStateMatcher;
     ngControl: NgControl | null;
     stateChanges: Subject<void>;

package/lib/icon/icon.component.d.ts

@@ -1,14 +1,15 @@
-import { AfterContentChecked, ChangeDetectorRef, ElementRef } from '@angular/core';
+import { AfterContentChecked, ChangeDetectorRef, ElementRef, OnInit } from '@angular/core';
 import { FontAwesomeIcon, FontAwesomeIconTheme } from '../../constants';
 import * as i0 from "@angular/core";
 /**
  * The `IconComponent` (`<impdc-icon` or `<any impdc-icon`) is an icon wrapper utilizing Font Awesome 5.
  * To use, import `IconModule` or another module that imports and exports that module from `@impartner/design-components`.
  */
-export declare class IconComponent implements AfterContentChecked {
+export declare class IconComponent implements OnInit, AfterContentChecked {
     private _changeDetectorRef;
+    private static readonly _licensed$;
+    private readonly _licensedChanges$;
     private _loading;
-    private _licensed;
     /**
      * The Font Awesome 5 icon name. See {@link https://fontawesome.com/v5/search}. Local
      * development may not represent the complete list of available icons.
@@ -28,6 +29,7 @@ export declare class IconComponent implements AfterContentChecked {
     constructor(_changeDetectorRef: ChangeDetectorRef);
     get typeClass(): string;
     get computedSize(): string;
+    ngOnInit(): void;
     ngAfterContentChecked(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<IconComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<IconComponent, "impdc-icon, [impdc-icon]", never, { "name": { "alias": "name"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, never, false, never>;

package/lib/index.d.ts

@@ -4,6 +4,7 @@ export * from './icon';
 export * from './branding';
 export * from './breadcrumb';
 export * from './badge';
+export * from './tag';
 export * from './progress-bar';
 export * from './button';
 export * from './button-group';
@@ -23,4 +24,5 @@ export * from './scrollable';
 export * from './size-detection';
 export * from './select-icon';
 export * from './data-card';
+export * from './datetime-picker';
 export { DesignComponentsModule };

package/lib/select-icon/select-icon.module.d.ts

@@ -2,10 +2,11 @@ import * as i0 from "@angular/core";
 import * as i1 from "./select-icon.component";
 import * as i2 from "@angular/common";
 import * as i3 from "../form-field/impdc-forms.module";
-import * as i4 from "@ng-bootstrap/ng-bootstrap";
-import * as i5 from "@angular/forms";
+import * as i4 from "../icon/icon.module";
+import * as i5 from "@ng-bootstrap/ng-bootstrap";
+import * as i6 from "@angular/forms";
 export declare class SelectIconModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<SelectIconModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<SelectIconModule, [typeof i1.SelectIconComponent], [typeof i2.CommonModule, typeof i3.ImpdcFormsModule, typeof i4.NgbTypeaheadModule, typeof i4.NgbDropdownModule, typeof i5.ReactiveFormsModule], [typeof i1.SelectIconComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SelectIconModule, [typeof i1.SelectIconComponent], [typeof i2.CommonModule, typeof i3.ImpdcFormsModule, typeof i4.IconModule, typeof i5.NgbTypeaheadModule, typeof i5.NgbDropdownModule, typeof i6.ReactiveFormsModule], [typeof i1.SelectIconComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<SelectIconModule>;
 }

package/lib/tag/index.d.ts

@@ -0,0 +1 @@
+export * from './tag.component';

package/lib/tag/tag.component.d.ts

@@ -0,0 +1,54 @@
+import { EventEmitter } from '@angular/core';
+import { FontAwesomeIcon, FontAwesomeIconTheme } from '../../constants';
+import { CanDisable, HasTabIndex } from '../form-field/shared';
+import * as i0 from "@angular/core";
+export type TagTheme = 'default' | 'outline' | 'inverse';
+declare const _TagComponentBase: import("../form-field/shared").Constructor<HasTabIndex> & import("../form-field/shared").AbstractConstructor<HasTabIndex> & import("../form-field/shared").Constructor<CanDisable> & import("../form-field/shared").AbstractConstructor<CanDisable> & {
+    new (): {};
+};
+/**
+ * Tags are interactive elements that can be added to UI objects to label, categorize, organize, and filter.
+ * They can be added and removed by users. Tags are used in multi-select inputs.
+ *
+ * Don’t use Tags to communicate the status of an object or the result of an action (like Enabled, Deleted,
+ * Submitted, Error...) — use badges instead.
+ */
+export declare class TagComponent extends _TagComponentBase implements CanDisable, HasTabIndex {
+    /**
+     * Color theme to be used when rendering the tag.
+     */
+    theme: TagTheme;
+    /**
+     * Whether to use fully rounded borders for tag, granting a "pill"-like appearance.
+     */
+    rounded: boolean;
+    /**
+     * Where to include an interactable button inside of the tag, whose interactions can be listened
+     * for via the `(buttonClick)` event output.
+     */
+    withButton: boolean;
+    /**
+     * The FontAwesome icon to be displayed inside of the button when `withButton` is set to `true`. Value may be
+     * just a icon name, or optionally an icon name and specific FontAwesome theme/face.
+     */
+    buttonIcon: FontAwesomeIcon | {
+        name: FontAwesomeIcon;
+        theme: FontAwesomeIconTheme;
+    };
+    /**
+     * Event output for button events triggered when `withButton` is set to `true`.
+     */
+    readonly buttonClick: EventEmitter<Event>;
+    get themeClass(): string | null;
+    constructor(tabIndex?: string);
+    protected get buttonIconName(): FontAwesomeIcon;
+    protected get buttonIconTheme(): FontAwesomeIconTheme;
+    protected handleButtonClick(evt: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TagComponent, [{ attribute: "tabindex"; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TagComponent, "impdc-tag", ["impdcTag"], { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "withButton": { "alias": "withButton"; "required": false; }; "buttonIcon": { "alias": "buttonIcon"; "required": false; }; }, { "buttonClick": "buttonClick"; }, never, ["*"], true, never>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_tabIndex: unknown;
+    static ngAcceptInputType_rounded: unknown;
+    static ngAcceptInputType_withButton: unknown;
+}
+export {};