@tekus/design-system 2.0.1 → 4.0.0

package/assets/styles/_index.scss

@@ -0,0 +1 @@
+@forward './variables';

package/assets/styles/_variables.scss

@@ -0,0 +1,284 @@
+/* Colors -----------------------------------------*/
+$tk-color-primary-900: var(--tk-color-primary-900);
+$tk-color-primary-800: var(--tk-color-primary-800);
+$tk-color-primary-700: var(--tk-color-primary-700);
+$tk-color-primary-600: var(--tk-color-primary-600);
+$tk-color-primary-500: var(--tk-color-primary-500);
+$tk-color-primary-400: var(--tk-color-primary-400);
+$tk-color-primary-300: var(--tk-color-primary-300);
+$tk-color-primary-200: var(--tk-color-primary-200);
+$tk-color-primary-100: var(--tk-color-primary-100);
+$tk-color-primary: var(--tk-color-primary-900);
+
+$tk-color-secondary-900: var(--tk-color-secondary-900);
+$tk-color-secondary-800: var(--tk-color-secondary-800);
+$tk-color-secondary-700: var(--tk-color-secondary-700);
+$tk-color-secondary-600: var(--tk-color-secondary-600);
+$tk-color-secondary-500: var(--tk-color-secondary-500);
+$tk-color-secondary-400: var(--tk-color-secondary-400);
+$tk-color-secondary-300: var(--tk-color-secondary-300);
+$tk-color-secondary-200: var(--tk-color-secondary-200);
+$tk-color-secondary-100: var(--tk-color-secondary-100);
+$tk-color-secondary: var(--tk-color-secondary-900);
+
+$tk-color-accent-900: var(--tk-color-accent-900);
+$tk-color-accent-800: var(--tk-color-accent-800);
+$tk-color-accent-700: var(--tk-color-accent-700);
+$tk-color-accent-600: var(--tk-color-accent-600);
+$tk-color-accent-500: var(--tk-color-accent-500);
+$tk-color-accent-400: var(--tk-color-accent-400);
+$tk-color-accent-300: var(--tk-color-accent-300);
+$tk-color-accent-200: var(--tk-color-accent-200);
+$tk-color-accent-100: var(--tk-color-accent-100);
+$tk-color-accent: var(--tk-color-accent-500);
+
+$tk-color-neutral-900: var(--tk-color-neutral-900);
+$tk-color-neutral-800: var(--tk-color-neutral-800);
+$tk-color-neutral-700: var(--tk-color-neutral-700);
+$tk-color-neutral-600: var(--tk-color-neutral-600);
+$tk-color-neutral-500: var(--tk-color-neutral-500);
+$tk-color-neutral-400: var(--tk-color-neutral-400);
+$tk-color-neutral-300: var(--tk-color-neutral-300);
+$tk-color-neutral-200: var(--tk-color-neutral-200);
+$tk-color-neutral-100: var(--tk-color-neutral-100);
+$tk-color-neutral: var(--tk-color-neutral-500);
+
+$tk-color-success-900: var(--tk-color-success-900);
+$tk-color-success-800: var(--tk-color-success-800);
+$tk-color-success-700: var(--tk-color-success-700);
+$tk-color-success-600: var(--tk-color-success-600);
+$tk-color-success-500: var(--tk-color-success-500);
+$tk-color-success-400: var(--tk-color-success-400);
+$tk-color-success-300: var(--tk-color-success-300);
+$tk-color-success-200: var(--tk-color-success-200);
+$tk-color-success-100: var(--tk-color-success-100);
+$tk-color-success: var(--tk-color-success-500);
+
+$tk-color-danger-900: var(--tk-color-danger-900);
+$tk-color-danger-800: var(--tk-color-danger-800);
+$tk-color-danger-700: var(--tk-color-danger-700);
+$tk-color-danger-600: var(--tk-color-danger-600);
+$tk-color-danger-500: var(--tk-color-danger-500);
+$tk-color-danger-400: var(--tk-color-danger-400);
+$tk-color-danger-300: var(--tk-color-danger-300);
+$tk-color-danger-200: var(--tk-color-danger-200);
+$tk-color-danger-100: var(--tk-color-danger-100);
+$tk-color-danger: var(--tk-color-danger-500);
+
+$tk-color-info-900: var(--tk-color-info-900);
+$tk-color-info-800: var(--tk-color-info-800);
+$tk-color-info-700: var(--tk-color-info-700);
+$tk-color-info-600: var(--tk-color-info-600);
+$tk-color-info-500: var(--tk-color-info-500);
+$tk-color-info-400: var(--tk-color-info-400);
+$tk-color-info-300: var(--tk-color-info-300);
+$tk-color-info-200: var(--tk-color-info-200);
+$tk-color-info-100: var(--tk-color-info-100);
+$tk-color-info: var(--tk-color-info-500);
+
+$tk-color-warning-900: var(--tk-color-warning-900);
+$tk-color-warning-800: var(--tk-color-warning-800);
+$tk-color-warning-600: var(--tk-color-warning-600);
+$tk-color-warning-700: var(--tk-color-warning-700);
+$tk-color-warning-500: var(--tk-color-warning-500);
+$tk-color-warning-400: var(--tk-color-warning-400);
+$tk-color-warning-300: var(--tk-color-warning-300);
+$tk-color-warning-200: var(--tk-color-warning-200);
+$tk-color-warning-100: var(--tk-color-warning-100);
+$tk-color-warning: var(--tk-color-warning-500);
+
+$tk-color-white: var(--tk-color-white-900);
+$tk-color-white-900: var(--tk-color-white-900);
+$tk-color-white-800: var(--tk-color-white-800);
+
+$tk-color-black: var(--tk-color-black-900);
+$tk-color-black-900: var(--tk-color-black-900);
+/* Colors ----------------------------------------*/
+
+// Utils ---------------------------------------------- */
+
+$tk-color-text-900: var(--tk-color-text-900);
+$tk-color-text-800: var(--tk-color-text-800);
+$tk-color-text-700: var(--tk-color-text-700);
+$tk-color-text-600: var(--tk-color-text-600);
+$tk-color-text-500: var(--tk-color-text-500);
+$tk-color-text: var(--tk-color-text-500);
+
+$tk-color-text-primary-900: var(--tk-color-text-primary-900);
+$tk-color-text-primary-800: var(--tk-color-text-primary-800);
+$tk-color-text-primary-700: var(--tk-color-text-primary-700);
+$tk-color-text-primary-500: var(--tk-color-text-primary-500);
+$tk-color-text-primary-400: var(--tk-color-text-primary-400);
+$tk-color-text-primary-300: var(--tk-color-text-primary-300);
+$tk-color-text-primary-200: var(--tk-color-text-primary-200);
+$tk-color-text-primary-100: var(--tk-color-text-primary-100);
+$tk-color-text-primary: var(--tk-color-text-primary-500);
+
+$tk-color-text-secondary-900: var(--tk-color-text-secondary-900);
+$tk-color-text-secondary-800: var(--tk-color-text-secondary-800);
+$tk-color-text-secondary-700: var(--tk-color-text-secondary-700);
+$tk-color-text-secondary-500: var(--tk-color-text-secondary-500);
+$tk-color-text-secondary-400: var(--tk-color-text-secondary-400);
+$tk-color-text-secondary-300: var(--tk-color-text-secondary-300);
+$tk-color-text-secondary-200: var(--tk-color-text-secondary-200);
+$tk-color-text-secondary-100: var(--tk-color-text-secondary-100);
+$tk-color-text-secondary: var(--tk-color-text-secondary-500);
+
+$tk-color-text-accent-900: var(--tk-color-text-accent-900);
+$tk-color-text-accent-800: var(--tk-color-text-accent-800);
+$tk-color-text-accent-700: var(--tk-color-text-accent-700);
+$tk-color-text-accent-500: var(--tk-color-text-accent-500);
+$tk-color-text-accent-400: var(--tk-color-text-accent-400);
+$tk-color-text-accent-300: var(--tk-color-text-accent-300);
+$tk-color-text-accent-200: var(--tk-color-text-accent-200);
+$tk-color-text-accent-100: var(--tk-color-text-accent-100);
+$tk-color-text-accent: var(--tk-color-text-accent-500);
+
+$tk-color-border-soft: var(--tk-color-border-soft);
+$tk-color-border-hover: var(--tk-color-border-hover);
+$tk-color-border-disabled: var(--tk-color-border-disabled);
+$tk-color-border-focused: var(--tk-color-border-focused);
+$tk-color-border-error: var(--tk-color-border-error);
+
+$tk-color-shadow-x-small: var(--tk-color-shadow-x-small);
+$tk-color-shadow-small: var(--tk-color-shadow-small);
+$tk-color-shadow-medium: var(--tk-color-shadow-medium);
+$tk-color-shadow-large: var(--tk-color-shadow-large);
+$tk-color-shadow-x-large: var(--tk-color-border-x-large);
+$tk-color-shadow-2x-large: var(--tk-color-border-2x-large);
+
+/* Utils ---------------------------------------------- */
+
+$colors: (
+  tk-color-primary-900: $tk-color-primary-900,
+  tk-color-primary-800: $tk-color-primary-800,
+  tk-color-primary-700: $tk-color-primary-700,
+  tk-color-primary-600: $tk-color-primary-600,
+  tk-color-primary-500: $tk-color-primary-500,
+  tk-color-primary-400: $tk-color-primary-400,
+  tk-color-primary-300: $tk-color-primary-300,
+  tk-color-primary-200: $tk-color-primary-200,
+  tk-color-primary-100: $tk-color-primary-100,
+  tk-color-primary: $tk-color-primary-900,
+
+  tk-color-secondary-900: $tk-color-secondary-900,
+  tk-color-secondary-800: $tk-color-secondary-800,
+  tk-color-secondary-700: $tk-color-secondary-700,
+  tk-color-secondary-600: $tk-color-secondary-600,
+  tk-color-secondary-500: $tk-color-secondary-500,
+  tk-color-secondary-400: $tk-color-secondary-400,
+  tk-color-secondary-300: $tk-color-secondary-300,
+  tk-color-secondary-200: $tk-color-secondary-200,
+  tk-color-secondary-100: $tk-color-secondary-100,
+  tk-color-secondary: $tk-color-secondary-900,
+
+  tk-color-accent-900: $tk-color-accent-900,
+  tk-color-accent-800: $tk-color-accent-800,
+  tk-color-accent-700: $tk-color-accent-700,
+  tk-color-accent-600: $tk-color-accent-600,
+  tk-color-accent-500: $tk-color-accent-500,
+  tk-color-accent-400: $tk-color-accent-400,
+  tk-color-accent-300: $tk-color-accent-300,
+  tk-color-accent-200: $tk-color-accent-200,
+  tk-color-accent-100: $tk-color-accent-100,
+  tk-color-accent: $tk-color-accent-500,
+
+  tk-color-neutral-900: $tk-color-neutral-900,
+  tk-color-neutral-800: $tk-color-neutral-800,
+  tk-color-neutral-700: $tk-color-neutral-700,
+  tk-color-neutral-600: $tk-color-neutral-600,
+  tk-color-neutral-500: $tk-color-neutral-500,
+  tk-color-neutral-400: $tk-color-neutral-400,
+  tk-color-neutral-300: $tk-color-neutral-300,
+  tk-color-neutral-200: $tk-color-neutral-200,
+  tk-color-neutral-100: $tk-color-neutral-100,
+  tk-color-neutral: $tk-color-neutral-500,
+
+  tk-color-success-900: $tk-color-success-900,
+  tk-color-success-800: $tk-color-success-800,
+  tk-color-success-700: $tk-color-success-700,
+  tk-color-success-600: $tk-color-success-600,
+  tk-color-success-500: $tk-color-success-500,
+  tk-color-success-400: $tk-color-success-400,
+  tk-color-success-300: $tk-color-success-300,
+  tk-color-success-200: $tk-color-success-200,
+  tk-color-success-100: $tk-color-success-100,
+  tk-color-success: $tk-color-success-500,
+
+  tk-color-danger-900: $tk-color-danger-900,
+  tk-color-danger-800: $tk-color-danger-800,
+  tk-color-danger-700: $tk-color-danger-700,
+  tk-color-danger-600: $tk-color-danger-600,
+  tk-color-danger-500: $tk-color-danger-500,
+  tk-color-danger-400: $tk-color-danger-400,
+  tk-color-danger-300: $tk-color-danger-300,
+  tk-color-danger-200: $tk-color-danger-200,
+  tk-color-danger-100: $tk-color-danger-100,
+  tk-color-danger: $tk-color-danger-500,
+
+  tk-color-info-900: $tk-color-info-900,
+  tk-color-info-800: $tk-color-info-800,
+  tk-color-info-700: $tk-color-info-700,
+  tk-color-info-600: $tk-color-info-600,
+  tk-color-info-500: $tk-color-info-500,
+  tk-color-info-400: $tk-color-info-400,
+  tk-color-info-300: $tk-color-info-300,
+  tk-color-info-200: $tk-color-info-200,
+  tk-color-info-100: $tk-color-info-100,
+  tk-color-info: $tk-color-info-500,
+
+  tk-color-warning-900: $tk-color-warning-900,
+  tk-color-warning-800: $tk-color-warning-800,
+  tk-color-warning-700: $tk-color-warning-700,
+  tk-color-warning-600: $tk-color-warning-600,
+  tk-color-warning-500: $tk-color-warning-500,
+  tk-color-warning-400: $tk-color-warning-400,
+  tk-color-warning-300: $tk-color-warning-300,
+  tk-color-warning-200: $tk-color-warning-200,
+  tk-color-warning-100: $tk-color-warning-100,
+  tk-color-warning: $tk-color-warning-500,
+
+  /* Colors */ tk-color-white: $tk-color-white-900,
+  tk-color-white-900: $tk-color-white-900,
+  tk-color-white-800: $tk-color-white-800,
+
+  tk-color-black: $tk-color-black-900,
+  tk-color-black-900: $tk-color-black-900,
+
+  tk-color-text-900: $tk-color-text-900,
+  tk-color-text-800: $tk-color-text-800,
+  tk-color-text-700: $tk-color-text-700,
+  tk-color-text-600: $tk-color-text-600,
+  tk-color-text-500: $tk-color-text-500,
+  tk-color-text: $tk-color-text-500,
+
+  tk-color-text-primary-900: $tk-color-text-primary-900,
+  tk-color-text-primary-800: $tk-color-text-primary-800,
+  tk-color-text-primary-700: $tk-color-text-primary-700,
+  tk-color-text-primary-500: $tk-color-text-primary-500,
+  tk-color-text-primary-400: $tk-color-text-primary-400,
+  tk-color-text-primary-300: $tk-color-text-primary-300,
+  tk-color-text-primary-200: $tk-color-text-primary-200,
+  tk-color-text-primary-100: $tk-color-text-primary-100,
+  tk-color-text-primary: $tk-color-text-primary-500,
+
+  tk-color-text-secondary-900: $tk-color-text-secondary-900,
+  tk-color-text-secondary-800: $tk-color-text-secondary-800,
+  tk-color-text-secondary-700: $tk-color-text-secondary-700,
+  tk-color-text-secondary-500: $tk-color-text-secondary-500,
+  tk-color-text-secondary-400: $tk-color-text-secondary-400,
+  tk-color-text-secondary-300: $tk-color-text-secondary-300,
+  tk-color-text-secondary-200: $tk-color-text-secondary-200,
+  tk-color-text-secondary-100: $tk-color-text-secondary-100,
+  tk-color-text-secondary: $tk-color-text-secondary-500,
+
+  tk-color-text-accent-900: $tk-color-text-accent-900,
+  tk-color-text-accent-800: $tk-color-text-accent-800,
+  tk-color-text-accent-700: $tk-color-text-accent-700,
+  tk-color-text-accent-500: $tk-color-text-accent-500,
+  tk-color-text-accent-400: $tk-color-text-accent-400,
+  tk-color-text-accent-300: $tk-color-text-accent-300,
+  tk-color-text-accent-200: $tk-color-text-accent-200,
+  tk-color-text-accent-100: $tk-color-text-accent-100,
+  tk-color-text-accent: $tk-color-text-accent-500,
+);

package/components/{search-bar → forms}/index.d.ts

@@ -1,5 +1,5 @@
 /**
  * Generated bundle index. Do not edit.
  */
-/// <amd-module name="@tekus/design-system/components/search-bar" />
+/// <amd-module name="@tekus/design-system/components/forms" />
 export * from './public-api';

package/components/forms/public-api.d.ts

@@ -0,0 +1,3 @@
+export * from './tk-form-input-field/tk-form-input-field.component';
+export * from './tk-form-autocomplete-field/tk-form-autocomplete-field.component';
+export * from './tk-form-chips-autocomplete-field/tk-form-chips-autocomplete-field.component';

package/components/forms/tk-form-autocomplete-field/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@tekus/design-system/components/forms/tk-form-autocomplete-field" />
+export * from './public-api';

package/components/forms/tk-form-autocomplete-field/models/option.model.d.ts

@@ -0,0 +1,4 @@
+export interface Option {
+    ViewValue: string;
+    Value: string | number;
+}

package/components/forms/tk-form-autocomplete-field/public-api.d.ts

@@ -0,0 +1 @@
+export * from './tk-form-autocomplete-field.component';

package/components/forms/tk-form-autocomplete-field/tk-form-autocomplete-field.component.d.ts

@@ -0,0 +1,158 @@
+import { OnInit, OnDestroy, EventEmitter, AfterViewInit } from '@angular/core';
+import { SubscriptSizing, MatFormFieldAppearance } from '@angular/material/form-field';
+import { MatAutocomplete } from '@angular/material/autocomplete';
+import { Option } from './models/option.model';
+import { ThemePalette } from '@angular/material/core';
+import { Observable } from 'rxjs';
+import { FormControl } from '@angular/forms';
+import * as i0 from "@angular/core";
+export declare class TkFormAutocompleteFieldComponent implements OnInit, OnDestroy, AfterViewInit {
+    /**
+     * Input field control
+     * @ignore
+     */
+    formControl: FormControl<string | Option | null>;
+    /**
+     * Optional input field width
+     * @default 100%
+     */
+    fieldWidth?: string;
+    /**
+     * What color palette to use
+     * @default 'accent'
+     */
+    theme?: ThemePalette;
+    /**
+     * Form field appearance
+     * @default 'fill'
+     */
+    appearance: MatFormFieldAppearance;
+    /**
+     * Form field reserved space for one line by default.
+     * @default 'dynamic'
+     */
+    subscriptSizing: SubscriptSizing;
+    /**
+     * Whether the first option should be highlighted when the autocomplete panel is opened
+     * @default true
+     */
+    autoActiveFirstOption?: boolean;
+    /**
+     * Whether the active option should be selected as the user is navigating.
+     * @default true
+     */
+    autoSelectActiveOption?: boolean;
+    /**
+     * Whether the field is required
+     * @default true
+     */
+    required: boolean;
+    /**
+     * Optional input field title
+     * @default null
+     */
+    fieldTitle?: string;
+    /**
+     * Input field label
+     */
+    fieldLabel: string;
+    /**
+     * Input field placeholder
+     * @default ''
+     */
+    placeHolder: string;
+    /**
+     * Filtered options
+     * @ignore
+     */
+    filteredOptions: Observable<Option[]>;
+    /**
+     * Options to be displayed
+     * @ignore
+     */
+    options: Option[];
+    /**
+     * Option changes handler
+     */
+    optionSelected: EventEmitter<string | number>;
+    /**
+     * Input field changes handler
+     */
+    inputStatus: EventEmitter<FormControl<any>>;
+    /**
+     * Autocomplete bottom reached handler
+     */
+    bottomReached: EventEmitter<void>;
+    /**
+     * Subscriptions property to handle all subscriptions
+     * @ignore
+     */
+    private subscriptions;
+    /**
+     * Mat-autocomplete reference
+     * @ignore
+     */
+    matAutocomplete: MatAutocomplete;
+    /**
+     * Component lifecycle method
+     * @ignore
+     */
+    ngOnInit(): void;
+    /**
+     * Component lifecycle method
+     * @ignore
+     */
+    ngAfterViewInit(): void;
+    /**
+     * Starts the autocomplete subscriptions
+     * @ignore
+     */
+    initAutocompleteListener(): void;
+    /**
+     * Handles the autocomplete opened event
+     * @ignore
+     */
+    private onAutocompleteOpened;
+    /**
+     * Handles the autocomplete closed event
+     * @ignore
+     */
+    private onAutocompleteClosed;
+    /**
+     * Handles the scrolling event
+     * @ignore
+     */
+    private onScroll;
+    /**
+     * Emits the bottomReached when the user reaches the end of the autocomplete panel
+     * @ignore
+     */
+    private onScrolledToEnd;
+    /**
+     * Conditions the options' view to display the view value
+     * @ignore
+     */
+    displayFn(option: Option | null): string;
+    /**
+     * Filters the options according to the input value
+     * @ignore
+     */
+    private _filterOptions;
+    /**
+     * Emits the selected option every time it changes
+     * @ignore
+     */
+    onSelectionChanged(option: Option): void;
+    /**
+     * Emits the formControl variable every time the input value changes
+     * @ignore
+     */
+    onInputChanged(): void;
+    /**
+     * Unsubscribe from all subscriptions when the component is destroyed
+     * @ignore
+     */
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TkFormAutocompleteFieldComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TkFormAutocompleteFieldComponent, "lib-tk-form-autocomplete-field", never, { "fieldWidth": { "alias": "fieldWidth"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "subscriptSizing": { "alias": "subscriptSizing"; "required": false; }; "autoActiveFirstOption": { "alias": "autoActiveFirstOption"; "required": false; }; "autoSelectActiveOption": { "alias": "autoSelectActiveOption"; "required": false; }; "required": { "alias": "required"; "required": false; }; "fieldTitle": { "alias": "fieldTitle"; "required": false; }; "fieldLabel": { "alias": "fieldLabel"; "required": false; }; "placeHolder": { "alias": "placeHolder"; "required": false; }; "options": { "alias": "options"; "required": false; }; }, { "optionSelected": "optionSelected"; "inputStatus": "inputStatus"; "bottomReached": "bottomReached"; }, never, never, true, never>;
+}

package/components/forms/tk-form-chips-autocomplete-field/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@tekus/design-system/components/forms/tk-form-chips-autocomplete-field" />
+export * from './public-api';

package/components/forms/tk-form-chips-autocomplete-field/models/option.model.d.ts

@@ -0,0 +1,4 @@
+export interface Option {
+    ViewValue: string;
+    Value: string | number;
+}

package/components/forms/tk-form-chips-autocomplete-field/public-api.d.ts

@@ -0,0 +1 @@
+export * from './tk-form-chips-autocomplete-field.component';

package/components/forms/tk-form-chips-autocomplete-field/tk-form-chips-autocomplete-field.component.d.ts

@@ -0,0 +1,114 @@
+import { ElementRef, EventEmitter } from '@angular/core';
+import { SubscriptSizing, MatFormFieldAppearance } from '@angular/material/form-field';
+import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { Option } from './models/option.model';
+import { Observable } from 'rxjs';
+import { ThemePalette } from '@angular/material/core';
+import { FormControl } from '@angular/forms';
+import * as i0 from "@angular/core";
+export declare class TkFormChipsAutocompleteFieldComponent {
+    /**
+     * Input field label
+     */
+    fieldLabel: string;
+    /**
+     * Input field placeholder
+     * @default ''
+     */
+    placeHolder: string;
+    /**
+     * Optional input field title
+     * @default null
+     */
+    fieldTitle?: string;
+    /**
+     * What color palette to use
+     * @default 'accent'
+     */
+    theme?: ThemePalette;
+    /**
+     * Form field reserved space for one line by default.
+     * @default 'dynamic'
+     */
+    subscriptSizing: SubscriptSizing;
+    /**
+     * Optional input field width
+     * @default 100%
+     */
+    fieldWidth?: string;
+    /**
+     * Form field appearance
+     * @default 'fill'
+     */
+    appearance: MatFormFieldAppearance;
+    /**
+     * Input field control
+     * @ignore
+     */
+    formControl: FormControl<string | null>;
+    /**
+     * Selected keywords
+     * @ignore
+     */
+    keywords: Option[];
+    /**
+     * Input field changes handler
+     */
+    inputStatus: EventEmitter<FormControl<any>>;
+    /**
+     * Keywords changes handler
+     */
+    selectedKeywords: EventEmitter<(string | number)[]>;
+    /**
+     * Separator constants
+     * @ignore
+     */
+    readonly separatorKeysCodes: number[];
+    /**
+     * Options to be displayed
+     * @ignore
+     */
+    allKeywords: Option[];
+    /**
+     * Filtered keywords after the input field changes
+     * @ignore
+     */
+    readonly filteredKeywords: Observable<Option[]>;
+    /**
+     * Keyword Input element reference
+     * @ignore
+     */
+    keywordInput: ElementRef<HTMLInputElement>;
+    /**
+     * @ignore
+     * Class constructor
+     */
+    constructor();
+    /**
+     * Handles every keyword deletion
+     * @ignore
+     */
+    remove(keyword: Option): void;
+    /**
+     * Emits the formControl variable every time the field value changes
+     * @ignore
+     */
+    onInputChanged(): void;
+    /**
+     * Emits the selected keywords every time they changed
+     * @ignore
+     */
+    onKeywordsChanged(): void;
+    /**
+     * Handles the autocomplete selection
+     * @ignore
+     */
+    selected(event: MatAutocompleteSelectedEvent): void;
+    /**
+     * Filters the keywords based on the input
+     * @ignore
+     */
+    private _filter;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TkFormChipsAutocompleteFieldComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TkFormChipsAutocompleteFieldComponent, "lib-tk-form-chips-autocomplete-field", never, { "fieldLabel": { "alias": "fieldLabel"; "required": false; }; "placeHolder": { "alias": "placeHolder"; "required": false; }; "fieldTitle": { "alias": "fieldTitle"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "subscriptSizing": { "alias": "subscriptSizing"; "required": false; }; "fieldWidth": { "alias": "fieldWidth"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "allKeywords": { "alias": "allKeywords"; "required": false; }; }, { "inputStatus": "inputStatus"; "selectedKeywords": "selectedKeywords"; }, never, never, true, never>;
+}

package/components/forms/tk-form-input-field/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@tekus/design-system/components/forms/tk-form-input-field" />
+export * from './public-api';

package/components/forms/tk-form-input-field/models/validator-with-message.model.d.ts

@@ -0,0 +1,5 @@
+import { ValidatorFn } from '@angular/forms';
+export interface ValidatorWithMessage {
+    validator: ValidatorFn;
+    message: string;
+}

package/components/forms/tk-form-input-field/public-api.d.ts

@@ -0,0 +1 @@
+export * from './tk-form-input-field.component';