@tekus/design-system 5.0.0 → 5.0.2

package/fesm2022/tekus-design-system-components-dropdown-list.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"tekus-design-system-components-dropdown-list.mjs","sources":["../../../projects/design-system/components/dropdown-list/src/dropdown-list.component.ts","../../../projects/design-system/components/dropdown-list/src/dropdown-list.component.html","../../../projects/design-system/components/dropdown-list/tekus-design-system-components-dropdown-list.ts"],"sourcesContent":["import {\n  faXmark,\n  faCheck,\n  faCaretUp,\n  faCaretDown,\n} from '@fortawesome/pro-solid-svg-icons';\nimport { FormsModule } from '@angular/forms';\nimport { NgClass, NgFor, NgIf, NgStyle } from '@angular/common';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\nimport { DropdownListItem } from '@tekus/design-system/core/types';\nimport { Input, Output, OnInit, Component, EventEmitter } from '@angular/core';\n\n@Component({\n  selector: 'tk-dropdown-list',\n  standalone: true,\n  imports: [NgStyle, NgClass, NgFor, NgIf, FormsModule, FontAwesomeModule],\n  templateUrl: './dropdown-list.component.html',\n  styleUrls: ['./dropdown-list.component.scss'],\n})\nexport class DropdownListComponent implements OnInit {\n  /**\n   * Search field input value\n   * @ignore\n   */\n  public inputValue = '';\n\n  /**\n   * Selected value\n   * @ignore\n   */\n  public selectedValue = { Value: '', ViewValue: '' };\n\n  /**\n   * Filtered data\n   * @ignore\n   */\n  public filteredData!: DropdownListItem<string>[];\n\n  /**\n   * Is dropdown list visible\n   * @ignore\n   */\n  public isDropDownListVisible = false;\n\n  /**\n   * Icon\n   * @ignore\n   */\n  public readonly faXmark = faXmark;\n  /**\n   * Icon\n   * @ignore\n   */\n  public readonly faCheck = faCheck;\n  /**\n   * Icon\n   * @ignore\n   */\n  public readonly faCaretUp = faCaretUp;\n  /**\n   * Icon\n   * @ignore\n   */\n  public readonly faCaretDown = faCaretDown;\n\n  /**\n   * Data for dropdown list\n   */\n  @Input() data!: DropdownListItem<string>[];\n\n  /**\n   * Dropdown list hint label\n   * @default ''\n   */\n  @Input()\n  hintLabel = '';\n\n  /**\n   * Dropdown list search field placeholder\n   * @default ''\n   */\n  @Input()\n  searchFieldPlaceHolder = '';\n\n  /**\n   * Width of the dropdown list\n   * @default 13rem\n   */\n  @Input()\n  width?: string;\n\n  /**\n   * What background color to use\n   * @default #fff\n   */\n  @Input()\n  backgroundColor?: string;\n\n  /**\n   * Selected value changes handler\n   */\n  @Output()\n  selectedValueChange = new EventEmitter<string>();\n\n  /**\n   * @ignore\n   * Component lifecycle method\n   */\n  ngOnInit(): void {\n    this.loadData();\n  }\n\n  /**\n   * @ignore\n   * Component method to load data\n   */\n  private loadData(): void {\n    if (this.data && this.data.length > 0) {\n      this.filteredData = this.data.slice();\n    } else {\n      this.filteredData = [];\n    }\n  }\n\n  /**\n   * @ignore\n   * Component method to handle click on dropdown list\n   */\n  public onClickDropDownList(): void {\n    this.isDropDownListVisible = !this.isDropDownListVisible;\n  }\n\n  /**\n   * @ignore\n   * Component method to handle click on clear selected value\n   */\n  public onClickClearSelectedValue(): void {\n    this.selectedValue.Value = '';\n    this.selectedValue.ViewValue = '';\n    this.selectedValueChange.emit(this.selectedValue.Value);\n  }\n\n  /**\n   * @ignore\n   * Component method to handle click on clear input value\n   */\n  public onClickClearInputValue(): void {\n    this.inputValue = '';\n    this.filter();\n  }\n\n  /**\n   * @ignore\n   * Component method to handle click on dropdown list item\n   */\n  public onClickListItem(item:  DropdownListItem<string | number>): void {\n    this.selectedValue.Value = String(item.Value);\n    this.selectedValue.ViewValue = item.ViewValue;\n    this.selectedValueChange.emit(String(item.Value));\n  }\n\n  /**\n   * @ignore\n   * Component method to filter data\n   */\n  public filter(): void {\n    const filterValue = this.inputValue.toLowerCase();\n    this.filteredData = this.data.filter(option =>\n      String(option.ViewValue).toLowerCase().trim().includes(filterValue)\n    );\n  }\n}\n","<div class=\"dropdown__list\">\n  <div\n    class=\"dropdown__list__selected__item__field\"\n    [ngStyle]=\"{ 'background-color': backgroundColor, width: width }\">\n    <label [attr.aria-label]=\"selectedValue.ViewValue\" for=\"selectedValue\">\n      <input\n        class=\"dropdown__list__selected__item\"\n        type=\"text\"\n        readonly=\"true\"\n        id=\"selectedValue\"\n        name=\"selectedValue\"\n        [value]=\"\n          selectedValue.ViewValue ? selectedValue.ViewValue : hintLabel\n        \" />\n    </label>\n    <fa-icon\n      class=\"dropdown__list__clear__mark__icon\"\n      [icon]=\"faXmark\"\n      *ngIf=\"selectedValue.ViewValue !== ''\"\n      (click)=\"onClickClearSelectedValue()\"></fa-icon>\n    <fa-icon\n      class=\"dropdown__list__caret__icon\"\n      [icon]=\"isDropDownListVisible ? faCaretUp : faCaretDown\"\n      (click)=\"onClickDropDownList()\"></fa-icon>\n  </div>\n  <div\n    [class]=\"\n      isDropDownListVisible\n        ? 'dropdown__list__collapsible--open dropdown__list__collapsible'\n        : 'dropdown__list__collapsible'\n    \"\n    [ngStyle]=\"{ 'background-color': backgroundColor, width: width }\">\n    <div class=\"dropdown__list__search__field\">\n      <input\n        class=\"dropdown__list__search__field__input\"\n        type=\"text\"\n        (input)=\"filter()\"\n        (focus)=\"filter()\"\n        [(ngModel)]=\"inputValue\"\n        [placeholder]=\"searchFieldPlaceHolder\" />\n      <fa-icon\n        class=\"dropdown__list__clear__mark__icon\"\n        [icon]=\"faXmark\"\n        *ngIf=\"inputValue !== ''\"\n        (click)=\"onClickClearInputValue()\"></fa-icon>\n    </div>\n    <ul class=\"dropdown__list__items\">\n      <li\n        [ngClass]=\"\n          filteredValue.ViewValue === selectedValue.ViewValue\n            ? 'dropdown__list__item dropdown__list__item--selected'\n            : 'dropdown__list__item'\n        \"\n        tabindex=\"0\"\n        (click)=\"onClickListItem(filteredValue)\"\n        *ngFor=\"let filteredValue of filteredData\"\n        (keydown.enter)=\"onClickListItem(filteredValue)\">\n        {{ filteredValue.ViewValue }}\n        <fa-icon\n          class=\"dropdown__list__item__checked__icon\"\n          [icon]=\"faCheck\"\n          *ngIf=\"filteredValue.ViewValue === selectedValue.ViewValue\"></fa-icon>\n      </li>\n    </ul>\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/tekus-design-system-components-forms-form-autocomplete-field.mjs

@@ -1,268 +0,0 @@
-import * as i0 from '@angular/core';
-import { EventEmitter, ViewChild, Output, Input, Component } from '@angular/core';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i3 from '@angular/material/autocomplete';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { NgStyle, AsyncPipe } from '@angular/common';
-import * as i2 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import { Subscription, startWith, map } from 'rxjs';
-import * as i1 from '@angular/forms';
-import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
-
-class FormAutocompleteFieldComponent {
-    constructor() {
-        /**
-         * Input field control
-         * @ignore
-         */
-        this.formControl = new FormControl('');
-        /**
-         * What color palette to use
-         * @default 'accent'
-         */
-        this.theme = 'accent';
-        /**
-         * Form field appearance
-         * @default 'fill'
-         */
-        this.appearance = 'fill';
-        /**
-         * Form field reserved space for one line by default.
-         * @default 'dynamic'
-         */
-        this.subscriptSizing = 'dynamic';
-        /**
-         * Whether the first option should be highlighted when the autocomplete panel is opened
-         * @default true
-         */
-        this.autoActiveFirstOption = true;
-        /**
-         * Whether the active option should be selected as the user is navigating.
-         * @default true
-         */
-        this.autoSelectActiveOption = true;
-        /**
-         * Optional field input type
-         * @default 'text'
-         */
-        this.type = 'text';
-        /**
-         * Whether the field is required
-         * @default true
-         */
-        this.required = true;
-        /**
-         * Input field label
-         */
-        this.fieldLabel = '';
-        /**
-         * Input field placeholder
-         * @default ''
-         */
-        this.placeHolder = '';
-        /**
-         * Options to be displayed
-         * @ignore
-         */
-        this.options = [];
-        /**
-         * Option changes handler
-         */
-        this.optionSelected = new EventEmitter();
-        /**
-         * Input field changes handler
-         */
-        this.inputStatus = new EventEmitter();
-        /**
-         * Autocomplete bottom reached handler
-         */
-        this.bottomReached = new EventEmitter();
-        /**
-         * Subscriptions property to handle all subscriptions
-         * @ignore
-         */
-        this.subscriptions = new Subscription();
-    }
-    /**
-     * Component lifecycle method
-     * @ignore
-     */
-    ngOnInit() {
-        this.updateFilteredOptions();
-    }
-    /**
-     * Component lifecycle method
-     * @ignore
-     */
-    ngAfterViewInit() {
-        this.initAutocompleteListener();
-    }
-    /**
-     * Component lifecycle method
-     * @ignore
-     */
-    ngOnChanges(changes) {
-        if (changes) {
-            this.updateFilteredOptions();
-        }
-    }
-    /**
-     * Handles options updates
-     * @ignore
-     */
-    updateFilteredOptions() {
-        this.filteredOptions = this.formControl.valueChanges.pipe(startWith(''), map(value => {
-            const option = typeof value === 'string' ? value : value?.ViewValue;
-            return option
-                ? this._filterOptions(option)
-                : (this.options ?? []).slice();
-        }));
-    }
-    /**
-     * Starts the autocomplete subscriptions
-     * @ignore
-     */
-    initAutocompleteListener() {
-        const openedSubscription = this.onAutocompleteOpened();
-        const closedSubscription = this.onAutocompleteClosed();
-        this.subscriptions.add(openedSubscription);
-        this.subscriptions.add(closedSubscription);
-    }
-    /**
-     * Handles the autocomplete opened event
-     * @ignore
-     */
-    onAutocompleteOpened() {
-        return this.matAutocomplete.opened.subscribe(() => {
-            setTimeout(() => {
-                const panel = this.matAutocomplete.panel?.nativeElement;
-                if (panel) {
-                    panel.addEventListener('scroll', this.onScroll.bind(this));
-                }
-            });
-        });
-    }
-    /**
-     * Handles the autocomplete closed event
-     * @ignore
-     */
-    onAutocompleteClosed() {
-        return this.matAutocomplete.closed.subscribe(() => {
-            const panel = this.matAutocomplete.panel?.nativeElement;
-            if (panel) {
-                panel.removeEventListener('scroll', this.onScroll.bind(this));
-            }
-        });
-    }
-    /**
-     * Handles the scrolling event
-     * @ignore
-     */
-    onScroll(event) {
-        const panel = event.target;
-        const scrollTop = panel.scrollTop;
-        const scrollHeight = panel.scrollHeight;
-        const offsetHeight = panel.offsetHeight;
-        if (scrollTop + offsetHeight >= scrollHeight) {
-            this.onScrolledToEnd();
-        }
-    }
-    /**
-     * Emits the bottomReached when the user reaches the end of the autocomplete panel
-     * @ignore
-     */
-    onScrolledToEnd() {
-        this.bottomReached.emit();
-    }
-    /**
-     * Conditions the options' view to display the view value
-     * @ignore
-     */
-    displayFn(option) {
-        return option?.ViewValue ? option.ViewValue : '';
-    }
-    /**
-     * Filters the options according to the input value
-     * @ignore
-     */
-    _filterOptions(value) {
-        const filterValue = value.toLowerCase();
-        return this.options.filter(option => option.ViewValue.toLowerCase().includes(filterValue));
-    }
-    /**
-     * Emits the selected option every time it changes
-     * @ignore
-     */
-    onSelectionChanged(option) {
-        this.optionSelected.emit(option.Value);
-    }
-    /**
-     * Emits the formControl variable every time the input value changes
-     * @ignore
-     */
-    onInputChanged() {
-        this.inputStatus.emit(this.formControl);
-    }
-    /**
-     * Unsubscribe from all subscriptions when the component is destroyed
-     * @ignore
-     */
-    ngOnDestroy() {
-        this.subscriptions?.unsubscribe();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FormAutocompleteFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: FormAutocompleteFieldComponent, isStandalone: true, selector: "tk-form-autocomplete-field", inputs: { fieldWidth: "fieldWidth", theme: "theme", appearance: "appearance", subscriptSizing: "subscriptSizing", autoActiveFirstOption: "autoActiveFirstOption", autoSelectActiveOption: "autoSelectActiveOption", type: "type", required: "required", fieldTitle: "fieldTitle", fieldLabel: "fieldLabel", placeHolder: "placeHolder", options: "options" }, outputs: { optionSelected: "optionSelected", inputStatus: "inputStatus", bottomReached: "bottomReached" }, viewQueries: [{ propertyName: "matAutocomplete", first: true, predicate: ["auto"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"section\" [ngStyle]=\"{ width: fieldWidth ? 'fit-content' : '100%' }\">\n  @if (fieldTitle) {\n  <h1 class=\"field__title\">{{ fieldTitle }}</h1>\n  }\n  <mat-form-field\n    class=\"form__field\"\n    [color]=\"theme\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [ngStyle]=\"{ width: fieldWidth ? fieldWidth : '100%' }\">\n    <mat-label class=\"form__field__label\">{{ fieldLabel }}</mat-label>\n    <input\n      matInput\n      [type]=\"type\"\n      aria-label=\"Option\"\n      [required]=\"required\"\n      [matAutocomplete]=\"auto\"\n      (input)=\"onInputChanged()\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"placeHolder\" />\n    <mat-autocomplete\n      requireSelection\n      #auto=\"matAutocomplete\"\n      [displayWith]=\"displayFn\"\n      [autoActiveFirstOption]=\"autoActiveFirstOption\"\n      [autoSelectActiveOption]=\"autoSelectActiveOption\"\n      (optionSelected)=\"onSelectionChanged($event.option.value)\">\n      @for (option of filteredOptions | async; track option.Value) {\n      <mat-option [value]=\"option\">\n        <span>{{ option.ViewValue }}</span>\n      </mat-option>\n      }\n    </mat-autocomplete>\n  </mat-form-field>\n</div>\n", styles: [".section{gap:.5rem;display:flex;flex-wrap:wrap;max-width:100%;align-items:center;justify-content:flex-start}.form__field{flex:1;height:100%;width:20rem;display:flex;max-width:100%;min-width:10rem;font-size:clamp(.8rem,.657rem + .381vw,1rem)}.form__field__label{font-weight:400;font-style:normal;line-height:.98438em;font-size:clamp(.688rem,.554rem + .357vw,.875rem)}.field__title{margin:0;padding:0;max-width:100%;font-weight:500;overflow:hidden;font-style:normal;align-self:center;white-space:nowrap;text-overflow:ellipsis;font-size:clamp(.9rem,.852rem + .276vw,1.1rem)}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FormAutocompleteFieldComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tk-form-autocomplete-field', standalone: true, imports: [
-                        NgStyle,
-                        AsyncPipe,
-                        FormsModule,
-                        MatInputModule,
-                        MatFormFieldModule,
-                        ReactiveFormsModule,
-                        MatAutocompleteModule,
-                    ], template: "<div class=\"section\" [ngStyle]=\"{ width: fieldWidth ? 'fit-content' : '100%' }\">\n  @if (fieldTitle) {\n  <h1 class=\"field__title\">{{ fieldTitle }}</h1>\n  }\n  <mat-form-field\n    class=\"form__field\"\n    [color]=\"theme\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [ngStyle]=\"{ width: fieldWidth ? fieldWidth : '100%' }\">\n    <mat-label class=\"form__field__label\">{{ fieldLabel }}</mat-label>\n    <input\n      matInput\n      [type]=\"type\"\n      aria-label=\"Option\"\n      [required]=\"required\"\n      [matAutocomplete]=\"auto\"\n      (input)=\"onInputChanged()\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"placeHolder\" />\n    <mat-autocomplete\n      requireSelection\n      #auto=\"matAutocomplete\"\n      [displayWith]=\"displayFn\"\n      [autoActiveFirstOption]=\"autoActiveFirstOption\"\n      [autoSelectActiveOption]=\"autoSelectActiveOption\"\n      (optionSelected)=\"onSelectionChanged($event.option.value)\">\n      @for (option of filteredOptions | async; track option.Value) {\n      <mat-option [value]=\"option\">\n        <span>{{ option.ViewValue }}</span>\n      </mat-option>\n      }\n    </mat-autocomplete>\n  </mat-form-field>\n</div>\n", styles: [".section{gap:.5rem;display:flex;flex-wrap:wrap;max-width:100%;align-items:center;justify-content:flex-start}.form__field{flex:1;height:100%;width:20rem;display:flex;max-width:100%;min-width:10rem;font-size:clamp(.8rem,.657rem + .381vw,1rem)}.form__field__label{font-weight:400;font-style:normal;line-height:.98438em;font-size:clamp(.688rem,.554rem + .357vw,.875rem)}.field__title{margin:0;padding:0;max-width:100%;font-weight:500;overflow:hidden;font-style:normal;align-self:center;white-space:nowrap;text-overflow:ellipsis;font-size:clamp(.9rem,.852rem + .276vw,1.1rem)}\n"] }]
-        }], propDecorators: { fieldWidth: [{
-                type: Input
-            }], theme: [{
-                type: Input
-            }], appearance: [{
-                type: Input
-            }], subscriptSizing: [{
-                type: Input
-            }], autoActiveFirstOption: [{
-                type: Input
-            }], autoSelectActiveOption: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], fieldTitle: [{
-                type: Input
-            }], fieldLabel: [{
-                type: Input
-            }], placeHolder: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], optionSelected: [{
-                type: Output
-            }], inputStatus: [{
-                type: Output
-            }], bottomReached: [{
-                type: Output
-            }], matAutocomplete: [{
-                type: ViewChild,
-                args: ['auto']
-            }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { FormAutocompleteFieldComponent };
-//# sourceMappingURL=tekus-design-system-components-forms-form-autocomplete-field.mjs.map

package/fesm2022/tekus-design-system-components-forms-form-autocomplete-field.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"tekus-design-system-components-forms-form-autocomplete-field.mjs","sources":["../../../projects/design-system/components/forms/form-autocomplete-field/src/form-autocomplete-field.component.ts","../../../projects/design-system/components/forms/form-autocomplete-field/src/form-autocomplete-field.component.html","../../../projects/design-system/components/forms/form-autocomplete-field/tekus-design-system-components-forms-form-autocomplete-field.ts"],"sourcesContent":["import {\n  Input,\n  Output,\n  OnInit,\n  Component,\n  ViewChild,\n  OnDestroy,\n  OnChanges,\n  EventEmitter,\n  AfterViewInit,\n  SimpleChanges,\n} from '@angular/core';\nimport {\n  SubscriptSizing,\n  MatFormFieldModule,\n  MatFormFieldAppearance,\n} from '@angular/material/form-field';\nimport {\n  MatAutocomplete,\n  MatAutocompleteModule,\n} from '@angular/material/autocomplete';\nimport { Option } from '@tekus/design-system/core/types'\nimport { AsyncPipe, NgStyle } from '@angular/common';\nimport { ThemePalette } from '@angular/material/core';\nimport { MatInputModule } from '@angular/material/input';\nimport { map, Observable, startWith, Subscription } from 'rxjs';\nimport { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';\n\n@Component({\n  selector: 'tk-form-autocomplete-field',\n  standalone: true,\n  imports: [\n    NgStyle,\n    AsyncPipe,\n    FormsModule,\n    MatInputModule,\n    MatFormFieldModule,\n    ReactiveFormsModule,\n    MatAutocompleteModule,\n  ],\n  templateUrl: './form-autocomplete-field.component.html',\n  styleUrl: './form-autocomplete-field.component.scss',\n})\nexport class FormAutocompleteFieldComponent\n  implements OnInit, OnDestroy, AfterViewInit, OnChanges\n{\n  /**\n   * Input field control\n   * @ignore\n   */\n  public formControl = new FormControl<string | Option>('');\n\n  /**\n   * Optional input field width\n   * @default 100%\n   */\n  @Input()\n  public fieldWidth?: string;\n\n  /**\n   * What color palette to use\n   * @default 'accent'\n   */\n  @Input()\n  public theme?: ThemePalette = 'accent';\n\n  /**\n   * Form field appearance\n   * @default 'fill'\n   */\n  @Input()\n  public appearance: MatFormFieldAppearance = 'fill';\n\n  /**\n   * Form field reserved space for one line by default.\n   * @default 'dynamic'\n   */\n  @Input()\n  public subscriptSizing: SubscriptSizing = 'dynamic';\n\n  /**\n   * Whether the first option should be highlighted when the autocomplete panel is opened\n   * @default true\n   */\n  @Input()\n  public autoActiveFirstOption?: boolean = true;\n\n  /**\n   * Whether the active option should be selected as the user is navigating.\n   * @default true\n   */\n  @Input()\n  public autoSelectActiveOption?: boolean = true;\n\n  /**\n   * Optional field input type\n   * @default 'text'\n   */\n  @Input()\n  public type = 'text';\n\n  /**\n   * Whether the field is required\n   * @default true\n   */\n  @Input()\n  public required = true;\n\n  /**\n   * Optional input field title\n   * @default null\n   */\n  @Input()\n  public fieldTitle?: string;\n\n  /**\n   * Input field label\n   */\n  @Input()\n  public fieldLabel = '';\n\n  /**\n   * Input field placeholder\n   * @default ''\n   */\n  @Input()\n  public placeHolder = '';\n\n  /**\n   * Filtered options\n   * @ignore\n   */\n  public filteredOptions!: Observable<Option[]>;\n\n  /**\n   * Options to be displayed\n   * @ignore\n   */\n  @Input()\n  public options: Option[] = [];\n\n  /**\n   * Option changes handler\n   */\n  @Output()\n  public optionSelected = new EventEmitter<string | number>();\n\n  /**\n   * Input field changes handler\n   */\n  @Output()\n  public inputStatus = new EventEmitter<FormControl>();\n\n  /**\n   * Autocomplete bottom reached handler\n   */\n  @Output()\n  public bottomReached = new EventEmitter<void>();\n\n  /**\n   * Subscriptions property to handle all subscriptions\n   * @ignore\n   */\n  private readonly subscriptions: Subscription = new Subscription();\n\n  /**\n   * Mat-autocomplete reference\n   * @ignore\n   */\n  @ViewChild('auto') matAutocomplete!: MatAutocomplete;\n\n  /**\n   * Component lifecycle method\n   * @ignore\n   */\n  ngOnInit(): void {\n    this.updateFilteredOptions();\n  }\n\n  /**\n   * Component lifecycle method\n   * @ignore\n   */\n  ngAfterViewInit(): void {\n    this.initAutocompleteListener();\n  }\n\n  /**\n   * Component lifecycle method\n   * @ignore\n   */\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes) {\n      this.updateFilteredOptions();\n    }\n  }\n\n  /**\n   * Handles options updates\n   * @ignore\n   */\n  private updateFilteredOptions(): void {\n    this.filteredOptions = this.formControl.valueChanges.pipe(\n      startWith(''),\n      map(value => {\n        const option = typeof value === 'string' ? value : value?.ViewValue;\n        return option\n          ? this._filterOptions(option)\n          : (this.options ?? []).slice();\n      })\n    );\n  }\n\n  /**\n   * Starts the autocomplete subscriptions\n   * @ignore\n   */\n  public initAutocompleteListener(): void {\n    const openedSubscription = this.onAutocompleteOpened();\n    const closedSubscription = this.onAutocompleteClosed();\n\n    this.subscriptions.add(openedSubscription);\n    this.subscriptions.add(closedSubscription);\n  }\n\n  /**\n   * Handles the autocomplete opened event\n   * @ignore\n   */\n  private onAutocompleteOpened(): Subscription {\n    return this.matAutocomplete.opened.subscribe(() => {\n      setTimeout(() => {\n        const panel = this.matAutocomplete.panel?.nativeElement;\n        if (panel) {\n          panel.addEventListener('scroll', this.onScroll.bind(this));\n        }\n      });\n    });\n  }\n\n  /**\n   * Handles the autocomplete closed event\n   * @ignore\n   */\n  private onAutocompleteClosed(): Subscription {\n    return this.matAutocomplete.closed.subscribe(() => {\n      const panel = this.matAutocomplete.panel?.nativeElement;\n      if (panel) {\n        panel.removeEventListener('scroll', this.onScroll.bind(this));\n      }\n    });\n  }\n\n  /**\n   * Handles the scrolling event\n   * @ignore\n   */\n  private onScroll(event: Event) {\n    const panel = event.target as HTMLElement;\n    const scrollTop = panel.scrollTop;\n    const scrollHeight = panel.scrollHeight;\n    const offsetHeight = panel.offsetHeight;\n\n    if (scrollTop + offsetHeight >= scrollHeight) {\n      this.onScrolledToEnd();\n    }\n  }\n\n  /**\n   * Emits the bottomReached when the user reaches the end of the autocomplete panel\n   * @ignore\n   */\n  private onScrolledToEnd(): void {\n    this.bottomReached.emit();\n  }\n\n  /**\n   * Conditions the options' view to display the view value\n   * @ignore\n   */\n  public displayFn(option: Option | null): string {\n    return option?.ViewValue ? option.ViewValue : '';\n  }\n\n  /**\n   * Filters the options according to the input value\n   * @ignore\n   */\n  private _filterOptions(value: string): Option[] {\n    const filterValue = value.toLowerCase();\n\n    return this.options.filter(option =>\n      option.ViewValue.toLowerCase().includes(filterValue)\n    );\n  }\n\n  /**\n   * Emits the selected option every time it changes\n   * @ignore\n   */\n  public onSelectionChanged(option: Option): void {\n    this.optionSelected.emit(option.Value);\n  }\n\n  /**\n   * Emits the formControl variable every time the input value changes\n   * @ignore\n   */\n  public onInputChanged(): void {\n    this.inputStatus.emit(this.formControl);\n  }\n\n  /**\n   * Unsubscribe from all subscriptions when the component is destroyed\n   * @ignore\n   */\n  ngOnDestroy() {\n    this.subscriptions?.unsubscribe();\n  }\n}\n","<div class=\"section\" [ngStyle]=\"{ width: fieldWidth ? 'fit-content' : '100%' }\">\n  @if (fieldTitle) {\n  <h1 class=\"field__title\">{{ fieldTitle }}</h1>\n  }\n  <mat-form-field\n    class=\"form__field\"\n    [color]=\"theme\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [ngStyle]=\"{ width: fieldWidth ? fieldWidth : '100%' }\">\n    <mat-label class=\"form__field__label\">{{ fieldLabel }}</mat-label>\n    <input\n      matInput\n      [type]=\"type\"\n      aria-label=\"Option\"\n      [required]=\"required\"\n      [matAutocomplete]=\"auto\"\n      (input)=\"onInputChanged()\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"placeHolder\" />\n    <mat-autocomplete\n      requireSelection\n      #auto=\"matAutocomplete\"\n      [displayWith]=\"displayFn\"\n      [autoActiveFirstOption]=\"autoActiveFirstOption\"\n      [autoSelectActiveOption]=\"autoSelectActiveOption\"\n      (optionSelected)=\"onSelectionChanged($event.option.value)\">\n      @for (option of filteredOptions | async; track option.Value) {\n      <mat-option [value]=\"option\">\n        <span>{{ option.ViewValue }}</span>\n      </mat-option>\n      }\n    </mat-autocomplete>\n  </mat-form-field>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/tekus-design-system-components-forms-form-chips-autocomplete-field.mjs

@@ -1,193 +0,0 @@
-import * as i0 from '@angular/core';
-import { EventEmitter, ViewChild, Input, Output, ChangeDetectionStrategy, Component } from '@angular/core';
-import * as i4 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i5 from '@angular/material/autocomplete';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { startWith, map } from 'rxjs';
-import { NgStyle, AsyncPipe } from '@angular/common';
-import { ENTER, COMMA } from '@angular/cdk/keycodes';
-import * as i2 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i3 from '@angular/material/chips';
-import { MatChipsModule } from '@angular/material/chips';
-import { MatButtonModule } from '@angular/material/button';
-import * as i1 from '@angular/forms';
-import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
-
-class FormChipsAutocompleteFieldComponent {
-    constructor() {
-        /**
-         * Input field label
-         */
-        this.fieldLabel = '';
-        /**
-         * Input field placeholder
-         * @default ''
-         */
-        this.placeHolder = '';
-        /**
-         * What color palette to use
-         * @default 'accent'
-         */
-        this.theme = 'accent';
-        /**
-         * Form field reserved space for one line by default.
-         * @default 'dynamic'
-         */
-        this.subscriptSizing = 'dynamic';
-        /**
-         * Form field appearance
-         * @default 'fill'
-         */
-        this.appearance = 'fill';
-        /**
-         * Input field control
-         * @ignore
-         */
-        this.formControl = new FormControl('');
-        /**
-         * Selected keywords
-         * @ignore
-         */
-        this.keywords = [];
-        /**
-         * Input field changes handler
-         */
-        this.inputStatus = new EventEmitter();
-        /**
-         * Keywords changes handler
-         */
-        this.selectedKeywords = new EventEmitter();
-        /**
-         * Separator constants
-         * @ignore
-         */
-        this.separatorKeysCodes = [ENTER, COMMA];
-        /**
-         * Options to be displayed
-         * @ignore
-         */
-        this.allKeywords = [];
-    }
-    /**
-     * @ignore
-     * Lifecycle method
-     */
-    ngOnInit() {
-        this.updateFilteredKeywords();
-    }
-    /**
-     * @ignore
-     * Lifecycle method
-     */
-    ngOnChanges(changes) {
-        if (changes['allKeywords']) {
-            this.updateFilteredKeywords();
-        }
-    }
-    /**
-     * Updates the filtered keywords when allKeywords changes
-     * @ignore
-     */
-    updateFilteredKeywords() {
-        this.filteredKeywords = this.formControl.valueChanges.pipe(startWith(null), map((keyword) => keyword
-            ? this._filter(String(keyword))
-            : (this.allKeywords ?? []).slice()));
-    }
-    /**
-     * Handles every keyword deletion
-     * @ignore
-     */
-    remove(keyword) {
-        const index = this.keywords.indexOf(keyword);
-        if (index >= 0) {
-            this.keywords.splice(index, 1);
-            this.onKeywordsChanged();
-        }
-    }
-    /**
-     * Emits the formControl variable every time the field value changes
-     * @ignore
-     */
-    onInputChanged() {
-        this.inputStatus.emit(this.formControl);
-    }
-    /**
-     * Emits the selected keywords every time they changed
-     * @ignore
-     */
-    onKeywordsChanged() {
-        this.selectedKeywords.emit(this.keywords.map(keyword => keyword.Value));
-    }
-    /**
-     * Handles the autocomplete selection
-     * @ignore
-     */
-    selected(event) {
-        const value = event.option.value;
-        const selectedKeyword = this.allKeywords.find(option => option.Value === value);
-        if (selectedKeyword &&
-            !this.keywords.some(keyword => keyword.Value === selectedKeyword.Value)) {
-            this.keywords.push(selectedKeyword);
-            this.onKeywordsChanged();
-        }
-        this.keywordInput.nativeElement.value = '';
-        this.formControl.setValue(null);
-    }
-    /**
-     * Filters the keywords based on the input
-     * @ignore
-     */
-    _filter(value) {
-        this.onInputChanged();
-        const filterValue = value.toLowerCase();
-        return this.allKeywords.filter(keyword => keyword.ViewValue.toLowerCase().includes(filterValue));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FormChipsAutocompleteFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: FormChipsAutocompleteFieldComponent, isStandalone: true, selector: "tk-form-chips-autocomplete-field", inputs: { fieldLabel: "fieldLabel", placeHolder: "placeHolder", fieldTitle: "fieldTitle", theme: "theme", subscriptSizing: "subscriptSizing", fieldWidth: "fieldWidth", appearance: "appearance", allKeywords: "allKeywords" }, outputs: { inputStatus: "inputStatus", selectedKeywords: "selectedKeywords" }, viewQueries: [{ propertyName: "keywordInput", first: true, predicate: ["keywordInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"section\" [ngStyle]=\"{ width: fieldWidth ? 'fit-content' : '100%' }\">\n  @if (fieldTitle) {\n    <h1 class=\"field__title\">{{ fieldTitle }}</h1>\n  }\n  <mat-form-field\n    class=\"form__field\"\n    [color]=\"theme\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [ngStyle]=\"{ width: fieldWidth ? fieldWidth : '100%' }\">\n    <mat-label class=\"form__field__label\">{{ fieldLabel }}</mat-label>\n    <mat-chip-grid #chipGrid aria-label=\"Keyword selection\">\n      @for (keyword of keywords; track keyword.Value) {\n        <mat-chip-row (removed)=\"remove(keyword)\">\n          {{ keyword.ViewValue }}\n          <button\n            matChipRemove\n            [attr.aria-label]=\"'remove ' + keyword.ViewValue\">\n            <mat-icon>cancel</mat-icon>\n          </button>\n        </mat-chip-row>\n      }\n    </mat-chip-grid>\n    <input\n      #keywordInput\n      [matAutocomplete]=\"auto\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"placeHolder\"\n      [matChipInputFor]=\"chipGrid\"\n      [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" />\n    <mat-autocomplete\n      #auto=\"matAutocomplete\"\n      (optionSelected)=\"selected($event)\">\n      @for (keyword of filteredKeywords | async; track keyword.Value) {\n        <mat-option [value]=\"keyword.Value\">{{ keyword.ViewValue }}</mat-option>\n      }\n    </mat-autocomplete>\n  </mat-form-field>\n</div>\n", styles: [".section{gap:.5rem;display:flex;flex-wrap:wrap;max-width:100%;align-items:center;justify-content:flex-start}.form__field{flex:1;height:100%;width:20rem;display:flex;max-width:100%;min-width:10rem;font-size:clamp(.8rem,.657rem + .381vw,1rem)}.form__field__label{font-weight:400;font-style:normal;line-height:.98438em;font-size:clamp(.688rem,.554rem + .357vw,.875rem)}.field__title{margin:0;padding:0;max-width:100%;font-weight:500;overflow:hidden;font-style:normal;align-self:center;white-space:nowrap;text-overflow:ellipsis;font-size:clamp(.9rem,.852rem + .276vw,1.1rem)}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i3.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i3.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i3.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FormChipsAutocompleteFieldComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'tk-form-chips-autocomplete-field', standalone: true, imports: [
-                        NgStyle,
-                        AsyncPipe,
-                        FormsModule,
-                        MatIconModule,
-                        MatChipsModule,
-                        MatButtonModule,
-                        MatFormFieldModule,
-                        ReactiveFormsModule,
-                        MatAutocompleteModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"section\" [ngStyle]=\"{ width: fieldWidth ? 'fit-content' : '100%' }\">\n  @if (fieldTitle) {\n    <h1 class=\"field__title\">{{ fieldTitle }}</h1>\n  }\n  <mat-form-field\n    class=\"form__field\"\n    [color]=\"theme\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [ngStyle]=\"{ width: fieldWidth ? fieldWidth : '100%' }\">\n    <mat-label class=\"form__field__label\">{{ fieldLabel }}</mat-label>\n    <mat-chip-grid #chipGrid aria-label=\"Keyword selection\">\n      @for (keyword of keywords; track keyword.Value) {\n        <mat-chip-row (removed)=\"remove(keyword)\">\n          {{ keyword.ViewValue }}\n          <button\n            matChipRemove\n            [attr.aria-label]=\"'remove ' + keyword.ViewValue\">\n            <mat-icon>cancel</mat-icon>\n          </button>\n        </mat-chip-row>\n      }\n    </mat-chip-grid>\n    <input\n      #keywordInput\n      [matAutocomplete]=\"auto\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"placeHolder\"\n      [matChipInputFor]=\"chipGrid\"\n      [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" />\n    <mat-autocomplete\n      #auto=\"matAutocomplete\"\n      (optionSelected)=\"selected($event)\">\n      @for (keyword of filteredKeywords | async; track keyword.Value) {\n        <mat-option [value]=\"keyword.Value\">{{ keyword.ViewValue }}</mat-option>\n      }\n    </mat-autocomplete>\n  </mat-form-field>\n</div>\n", styles: [".section{gap:.5rem;display:flex;flex-wrap:wrap;max-width:100%;align-items:center;justify-content:flex-start}.form__field{flex:1;height:100%;width:20rem;display:flex;max-width:100%;min-width:10rem;font-size:clamp(.8rem,.657rem + .381vw,1rem)}.form__field__label{font-weight:400;font-style:normal;line-height:.98438em;font-size:clamp(.688rem,.554rem + .357vw,.875rem)}.field__title{margin:0;padding:0;max-width:100%;font-weight:500;overflow:hidden;font-style:normal;align-self:center;white-space:nowrap;text-overflow:ellipsis;font-size:clamp(.9rem,.852rem + .276vw,1.1rem)}\n"] }]
-        }], propDecorators: { fieldLabel: [{
-                type: Input
-            }], placeHolder: [{
-                type: Input
-            }], fieldTitle: [{
-                type: Input
-            }], theme: [{
-                type: Input
-            }], subscriptSizing: [{
-                type: Input
-            }], fieldWidth: [{
-                type: Input
-            }], appearance: [{
-                type: Input
-            }], inputStatus: [{
-                type: Output
-            }], selectedKeywords: [{
-                type: Output
-            }], allKeywords: [{
-                type: Input
-            }], keywordInput: [{
-                type: ViewChild,
-                args: ['keywordInput']
-            }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { FormChipsAutocompleteFieldComponent };
-//# sourceMappingURL=tekus-design-system-components-forms-form-chips-autocomplete-field.mjs.map

package/fesm2022/tekus-design-system-components-forms-form-chips-autocomplete-field.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"tekus-design-system-components-forms-form-chips-autocomplete-field.mjs","sources":["../../../projects/design-system/components/forms/form-chips-autocomplete-field/src/form-chips-autocomplete-field.component.ts","../../../projects/design-system/components/forms/form-chips-autocomplete-field/src/form-chips-autocomplete-field.component.html","../../../projects/design-system/components/forms/form-chips-autocomplete-field/tekus-design-system-components-forms-form-chips-autocomplete-field.ts"],"sourcesContent":["import {\n  Input,\n  Output,\n  OnInit,\n  Component,\n  ViewChild,\n  OnChanges,\n  ElementRef,\n  EventEmitter,\n  SimpleChanges,\n  ChangeDetectionStrategy,\n} from '@angular/core';\nimport {\n  SubscriptSizing,\n  MatFormFieldModule,\n  MatFormFieldAppearance,\n} from '@angular/material/form-field';\nimport {\n  MatAutocompleteModule,\n  MatAutocompleteSelectedEvent,\n} from '@angular/material/autocomplete';\nimport { Option } from '@tekus/design-system/core/types';\nimport { map, Observable, startWith } from 'rxjs';\nimport { AsyncPipe, NgStyle } from '@angular/common';\nimport { COMMA, ENTER } from '@angular/cdk/keycodes';\nimport { ThemePalette } from '@angular/material/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatChipsModule } from '@angular/material/chips';\nimport { MatButtonModule } from '@angular/material/button';\nimport { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';\n\n@Component({\n  selector: 'tk-form-chips-autocomplete-field',\n  standalone: true,\n  imports: [\n    NgStyle,\n    AsyncPipe,\n    FormsModule,\n    MatIconModule,\n    MatChipsModule,\n    MatButtonModule,\n    MatFormFieldModule,\n    ReactiveFormsModule,\n    MatAutocompleteModule,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './form-chips-autocomplete-field.component.html',\n  styleUrl: './form-chips-autocomplete-field.component.scss',\n})\nexport class FormChipsAutocompleteFieldComponent\n  implements OnInit, OnChanges\n{\n  /**\n   * Input field label\n   */\n  @Input()\n  public fieldLabel = '';\n\n  /**\n   * Input field placeholder\n   * @default ''\n   */\n  @Input()\n  public placeHolder = '';\n\n  /**\n   * Optional input field title\n   * @default null\n   */\n  @Input()\n  public fieldTitle?: string;\n\n  /**\n   * What color palette to use\n   * @default 'accent'\n   */\n  @Input()\n  public theme?: ThemePalette = 'accent';\n\n  /**\n   * Form field reserved space for one line by default.\n   * @default 'dynamic'\n   */\n  @Input()\n  public subscriptSizing: SubscriptSizing = 'dynamic';\n\n  /**\n   * Optional input field width\n   * @default 100%\n   */\n  @Input()\n  public fieldWidth?: string;\n\n  /**\n   * Form field appearance\n   * @default 'fill'\n   */\n  @Input()\n  public appearance: MatFormFieldAppearance = 'fill';\n\n  /**\n   * Input field control\n   * @ignore\n   */\n  public formControl = new FormControl('');\n\n  /**\n   * Selected keywords\n   * @ignore\n   */\n  public keywords: Option[] = [];\n\n  /**\n   * Input field changes handler\n   */\n  @Output()\n  public inputStatus = new EventEmitter<FormControl>();\n\n  /**\n   * Keywords changes handler\n   */\n  @Output()\n  public selectedKeywords = new EventEmitter<(string | number)[]>();\n\n  /**\n   * Separator constants\n   * @ignore\n   */\n  public readonly separatorKeysCodes: number[] = [ENTER, COMMA];\n\n  /**\n   * Options to be displayed\n   * @ignore\n   */\n  @Input()\n  public allKeywords: Option[] = [];\n\n  /**\n   * Filtered keywords after the input field changes\n   * @ignore\n   */\n  public filteredKeywords: Observable<Option[]> | undefined;\n\n  /**\n   * Keyword Input element reference\n   * @ignore\n   */\n  @ViewChild('keywordInput') keywordInput!: ElementRef<HTMLInputElement>;\n\n  /**\n   * @ignore\n   * Lifecycle method\n   */\n  ngOnInit(): void {\n    this.updateFilteredKeywords();\n  }\n\n  /**\n   * @ignore\n   * Lifecycle method\n   */\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes['allKeywords']) {\n      this.updateFilteredKeywords();\n    }\n  }\n\n  /**\n   * Updates the filtered keywords when allKeywords changes\n   * @ignore\n   */\n  private updateFilteredKeywords(): void {\n    this.filteredKeywords = this.formControl.valueChanges.pipe(\n      startWith(null),\n      map((keyword: string | null) =>\n        keyword\n          ? this._filter(String(keyword))\n          : (this.allKeywords ?? []).slice()\n      )\n    );\n  }\n\n  /**\n   * Handles every keyword deletion\n   * @ignore\n   */\n  public remove(keyword: Option): void {\n    const index = this.keywords.indexOf(keyword);\n\n    if (index >= 0) {\n      this.keywords.splice(index, 1);\n      this.onKeywordsChanged();\n    }\n  }\n\n  /**\n   * Emits the formControl variable every time the field value changes\n   * @ignore\n   */\n  public onInputChanged(): void {\n    this.inputStatus.emit(this.formControl);\n  }\n\n  /**\n   * Emits the selected keywords every time they changed\n   * @ignore\n   */\n  public onKeywordsChanged(): void {\n    this.selectedKeywords.emit(this.keywords.map(keyword => keyword.Value));\n  }\n\n  /**\n   * Handles the autocomplete selection\n   * @ignore\n   */\n  public selected(event: MatAutocompleteSelectedEvent): void {\n    const value = event.option.value;\n    const selectedKeyword = this.allKeywords.find(\n      option => option.Value === value\n    );\n\n    if (\n      selectedKeyword &&\n      !this.keywords.some(keyword => keyword.Value === selectedKeyword.Value)\n    ) {\n      this.keywords.push(selectedKeyword);\n      this.onKeywordsChanged();\n    }\n\n    this.keywordInput.nativeElement.value = '';\n    this.formControl.setValue(null);\n  }\n\n  /**\n   * Filters the keywords based on the input\n   * @ignore\n   */\n  private _filter(value: string): Option[] {\n    this.onInputChanged();\n    const filterValue = value.toLowerCase();\n\n    return this.allKeywords.filter(keyword =>\n      keyword.ViewValue.toLowerCase().includes(filterValue)\n    );\n  }\n}\n","<div class=\"section\" [ngStyle]=\"{ width: fieldWidth ? 'fit-content' : '100%' }\">\n  @if (fieldTitle) {\n    <h1 class=\"field__title\">{{ fieldTitle }}</h1>\n  }\n  <mat-form-field\n    class=\"form__field\"\n    [color]=\"theme\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    [ngStyle]=\"{ width: fieldWidth ? fieldWidth : '100%' }\">\n    <mat-label class=\"form__field__label\">{{ fieldLabel }}</mat-label>\n    <mat-chip-grid #chipGrid aria-label=\"Keyword selection\">\n      @for (keyword of keywords; track keyword.Value) {\n        <mat-chip-row (removed)=\"remove(keyword)\">\n          {{ keyword.ViewValue }}\n          <button\n            matChipRemove\n            [attr.aria-label]=\"'remove ' + keyword.ViewValue\">\n            <mat-icon>cancel</mat-icon>\n          </button>\n        </mat-chip-row>\n      }\n    </mat-chip-grid>\n    <input\n      #keywordInput\n      [matAutocomplete]=\"auto\"\n      [formControl]=\"formControl\"\n      [placeholder]=\"placeHolder\"\n      [matChipInputFor]=\"chipGrid\"\n      [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" />\n    <mat-autocomplete\n      #auto=\"matAutocomplete\"\n      (optionSelected)=\"selected($event)\">\n      @for (keyword of filteredKeywords | async; track keyword.Value) {\n        <mat-option [value]=\"keyword.Value\">{{ keyword.ViewValue }}</mat-option>\n      }\n    </mat-autocomplete>\n  </mat-form-field>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;MAiDa,mCAAmC,CAAA;AAlBhD,IAAA,WAAA,GAAA;AAqBE;;AAEG;QAEI,IAAU,CAAA,UAAA,GAAG,EAAE;AAEtB;;;AAGG;QAEI,IAAW,CAAA,WAAA,GAAG,EAAE;AASvB;;;AAGG;QAEI,IAAK,CAAA,KAAA,GAAkB,QAAQ;AAEtC;;;AAGG;QAEI,IAAe,CAAA,eAAA,GAAoB,SAAS;AASnD;;;AAGG;QAEI,IAAU,CAAA,UAAA,GAA2B,MAAM;AAElD;;;AAGG;AACI,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,WAAW,CAAC,EAAE,CAAC;AAExC;;;AAGG;QACI,IAAQ,CAAA,QAAA,GAAa,EAAE;AAE9B;;AAEG;AAEI,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,YAAY,EAAe;AAEpD;;AAEG;AAEI,QAAA,IAAA,CAAA,gBAAgB,GAAG,IAAI,YAAY,EAAuB;AAEjE;;;AAGG;AACa,QAAA,IAAA,CAAA,kBAAkB,GAAa,CAAC,KAAK,EAAE,KAAK,CAAC;AAE7D;;;AAGG;QAEI,IAAW,CAAA,WAAA,GAAa,EAAE;AA8GlC;AAhGC;;;AAGG;IACH,QAAQ,GAAA;QACN,IAAI,CAAC,sBAAsB,EAAE;;AAG/B;;;AAGG;AACH,IAAA,WAAW,CAAC,OAAsB,EAAA;AAChC,QAAA,IAAI,OAAO,CAAC,aAAa,CAAC,EAAE;YAC1B,IAAI,CAAC,sBAAsB,EAAE;;;AAIjC;;;AAGG;IACK,sBAAsB,GAAA;QAC5B,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,CACxD,SAAS,CAAC,IAAI,CAAC,EACf,GAAG,CAAC,CAAC,OAAsB,KACzB;cACI,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC;AAC9B,cAAE,CAAC,IAAI,CAAC,WAAW,IAAI,EAAE,EAAE,KAAK,EAAE,CACrC,CACF;;AAGH;;;AAGG;AACI,IAAA,MAAM,CAAC,OAAe,EAAA;QAC3B,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC;AAE5C,QAAA,IAAI,KAAK,IAAI,CAAC,EAAE;YACd,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;YAC9B,IAAI,CAAC,iBAAiB,EAAE;;;AAI5B;;;AAGG;IACI,cAAc,GAAA;QACnB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC;;AAGzC;;;AAGG;IACI,iBAAiB,GAAA;QACtB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC;;AAGzE;;;AAGG;AACI,IAAA,QAAQ,CAAC,KAAmC,EAAA;AACjD,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK;AAChC,QAAA,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAC3C,MAAM,IAAI,MAAM,CAAC,KAAK,KAAK,KAAK,CACjC;AAED,QAAA,IACE,eAAe;AACf,YAAA,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,KAAK,KAAK,eAAe,CAAC,KAAK,CAAC,EACvE;AACA,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC;YACnC,IAAI,CAAC,iBAAiB,EAAE;;QAG1B,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,KAAK,GAAG,EAAE;AAC1C,QAAA,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC;;AAGjC;;;AAGG;AACK,IAAA,OAAO,CAAC,KAAa,EAAA;QAC3B,IAAI,CAAC,cAAc,EAAE;AACrB,QAAA,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,EAAE;QAEvC,OAAO,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,OAAO,IACpC,OAAO,CAAC,SAAS,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,CACtD;;+GAlMQ,mCAAmC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAnC,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,mCAAmC,8gBCjDhD,k7CAuCA,EAAA,MAAA,EAAA,CAAA,+jBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDJI,OAAO,EACP,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,SAAS,6CACT,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,8MAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACX,aAAa,EACb,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,cAAc,4uBACd,eAAe,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACf,kBAAkB,EAClB,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,YAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,OAAA,EAAA,YAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,WAAA,CAAA,EAAA,QAAA,EAAA,CAAA,cAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,WAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,mBAAmB,iNACnB,qBAAqB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,uBAAA,EAAA,wBAAA,EAAA,kBAAA,EAAA,YAAA,EAAA,eAAA,EAAA,OAAA,EAAA,8BAAA,CAAA,EAAA,OAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,QAAA,EAAA,iBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,iBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,IAAA,EAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,sBAAA,EAAA,QAAA,EAAA,mDAAA,EAAA,MAAA,EAAA,CAAA,iBAAA,EAAA,yBAAA,EAAA,4BAAA,EAAA,cAAA,EAAA,yBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,wBAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAMZ,mCAAmC,EAAA,UAAA,EAAA,CAAA;kBAlB/C,SAAS;+BACE,kCAAkC,EAAA,UAAA,EAChC,IAAI,EACP,OAAA,EAAA;wBACP,OAAO;wBACP,SAAS;wBACT,WAAW;wBACX,aAAa;wBACb,cAAc;wBACd,eAAe;wBACf,kBAAkB;wBAClB,mBAAmB;wBACnB,qBAAqB;qBACtB,EACgB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,k7CAAA,EAAA,MAAA,EAAA,CAAA,+jBAAA,CAAA,EAAA;8BAWxC,UAAU,EAAA,CAAA;sBADhB;gBAQM,WAAW,EAAA,CAAA;sBADjB;gBAQM,UAAU,EAAA,CAAA;sBADhB;gBAQM,KAAK,EAAA,CAAA;sBADX;gBAQM,eAAe,EAAA,CAAA;sBADrB;gBAQM,UAAU,EAAA,CAAA;sBADhB;gBAQM,UAAU,EAAA,CAAA;sBADhB;gBAmBM,WAAW,EAAA,CAAA;sBADjB;gBAOM,gBAAgB,EAAA,CAAA;sBADtB;gBAcM,WAAW,EAAA,CAAA;sBADjB;gBAa0B,YAAY,EAAA,CAAA;sBAAtC,SAAS;uBAAC,cAAc;;;AEnJ3B;;AAEG;;;;"}