i-tech-shared-components 1.1.6 → 1.1.9

package/src/lib/components/autocomplete-select/autocomplete-select.component.ts

@@ -1,430 +0,0 @@
-import {
-    Component,
-    ViewChild,
-    Input,
-    Output,
-    EventEmitter,
-    OnChanges,
-    SimpleChanges,
-    ElementRef, HostListener, AfterViewInit
-} from '@angular/core';
-import {MatSelect, MatSelectModule} from "@angular/material/select";
-import {AutocompleteConfigsInterface} from "../../interfaces/autocomplete-configs.interface";
-import {FormControlName, ReactiveFormsModule} from "@angular/forms";
-import { InputService } from '../../services/input.service';
-import { ButtonType } from '../../interfaces/button-types.enum';
-import {NgClass, NgFor, NgIf, NgOptimizedImage} from "@angular/common";
-import {MatTooltip} from "@angular/material/tooltip";
-import {TranslateModule} from "@ngx-translate/core";
-import {IconButtonComponent} from "../icon-button/icon-button.component";
-import {ButtonComponent} from "../button/button.component";
-import {GetValueByKeyFromObjectPipe} from "../../pipes/get-value-by-key-from-object.pipe";
-import {ArrayToStringPipe} from "../../pipes/array-to-string.pipe";
-import {MatIcon} from "@angular/material/icon";
-import {GenerateErrorMessagesPipe} from "../../pipes/generate-error-messages.pipe";
-import {ClearValueComponent} from "../clear-value/clear-value.component";
-import {MatFormFieldModule} from "@angular/material/form-field";
-
-@Component({
-  selector: 'i-tech-autocomplete-select',
-  templateUrl: './autocomplete-select.component.html',
-  styleUrls: ['./autocomplete-select.component.scss'],
-  imports: [
-    NgClass,
-    MatTooltip,
-    NgIf,
-    NgFor,
-    TranslateModule,
-    IconButtonComponent,
-    ReactiveFormsModule,
-    MatSelectModule,
-    ButtonComponent,
-    GetValueByKeyFromObjectPipe,
-    ArrayToStringPipe,
-    NgOptimizedImage,
-    MatIcon,
-    GenerateErrorMessagesPipe,
-    ClearValueComponent,
-    MatFormFieldModule
-  ],
-  standalone: true
-})
-export class AutocompleteSelectComponent implements OnChanges, AfterViewInit {
-    @ViewChild('matSelect') matSelect!: MatSelect;
-    @ViewChild('searchInput') searchInput!: ElementRef;
-    @Input() className!: string;
-    @Input() submitValue!: boolean;
-  /**
-   * For working configs.
-   */
-    @Input() set configs(data: AutocompleteConfigsInterface) {
-        this.selectConfig = data;
-        if (!data) {
-            return;
-        }
-
-        if ((typeof this.selectConfig.paginate) === 'function') {
-            if (this.firstRequest) {
-                return;
-            }
-            this.getData();
-            this.firstRequest = true
-            return;
-        }
-
-        this.data = this.selectConfig.paginate;
-        this.findAndSetDefaultValueFromData();
-    };
-
-    @Input() detectChanges!: boolean;
-    @Output() selectionChange = new EventEmitter<any>();
-    @Output() emitAction = new EventEmitter<any>();
-    @ViewChild('allSelected') allSelected!: MatSelect;
-    pending = false;
-    defaultValue!: any;
-    data: Array<any> = [];
-    paginationData: any = {current: 1, last: 0};
-    ngControl: FormControlName;
-    selectConfig!: AutocompleteConfigsInterface;
-    firstRequest = false;
-    showPlaceholder = true;
-    isNeededForRecall = false;
-    showingValue: any;
-    searchTimeoutId: any;
-    tabVisibility!: boolean;
-    accessToNextRequest = true;
-    disabled = false;
-    blockRecallDefaultValueSetter = false;
-    baseData: any;
-    requestLoading = false;
-    protected readonly ButtonType = ButtonType;
-
-    @HostListener('document:visibilitychange')
-    handleVisibilityChange(): void {
-        this.tabVisibility = !document.hidden;
-        if (this.ngControl.control.value) { return;}
-        this.closePanelAndUnsetFocus();
-        if (!document.hidden) {
-            this.isNeededForRecall = true;
-            this.pending = true;
-            setTimeout(() => {
-                this.pending = false
-            }, 4000)
-        }
-    }
-
-    constructor(private inputService: InputService) {
-        this.ngControl = this.inputService.injectNgControl();
-    }
-
-    ngOnChanges(changes: SimpleChanges) {
-        if (changes['selectConfig'] && this.selectConfig) {
-            if ((typeof this.selectConfig.paginate) === 'function') {
-                this.getData();
-            }
-        }
-    }
-
-    ngAfterViewInit() {
-        this.ngControl.control.valueChanges.subscribe((res: any) => {
-            if (this.data.length && res && !this.blockRecallDefaultValueSetter) {
-                this.findAndSetDefaultValueFromData();
-            }
-        })
-    }
-
-    hardReload(): void {
-        this.getData('', true);
-    }
-
-  /**
-   * Dynamic request for select data.
-   * @param searchText - The input value to search options by.
-   * @param fromSearch - Access for search .
-   * @returns Select data.
-   */
-    getData(searchText?: string, fromSearch?: boolean): void {
-        if (!fromSearch && !this.accessToNextRequest) { return; }
-
-        if (this.requestLoading) { return; }
-
-        if (fromSearch) {
-            this.paginationData.current = 1;
-            this.accessToNextRequest = true;
-        }
-
-        const functionToDo = this.selectConfig.paginate(this.paginationData.current, searchText);
-
-        this.requestLoading = true;
-        functionToDo?.subscribe((data: Array<any> | any) => {
-            const dataToAdd = ('content' in data) ? data.content : data;
-
-            if ('content' in data) {
-                this.accessToNextRequest = !data.last || (data.totalPages > this.paginationData.current);
-            }
-
-            this.data = (fromSearch || this.selectConfig?.blockPagination) ? dataToAdd : [...this.data, ...dataToAdd];
-            this.pending = false;
-            this.requestLoading = false;
-
-            if (!dataToAdd.length) {
-                this.paginationData.last = this.paginationData.current;
-                return;
-            }
-
-            this.paginationData.current += 1;
-            this.paginationData.last += 1;
-            setTimeout(() => {
-                this.findAndSetDefaultValueFromData();
-            },10)
-        }, () => {
-            this.pending = false;
-            this.requestLoading = false;
-        })
-    }
-
-    findAndSetDefaultValueFromData(): void {
-        if (this.selectConfig.multiple) {
-            if (this.ngControl.value && this.ngControl.value.length == 1) {
-                this.setShowingValue(this.data.find((item) => item.id === this.ngControl.value[0]))
-            }
-        } else {
-            const isDisabled = this.ngControl.disabled;
-            if (isDisabled) {
-                // TODO Remove after migrating all selects
-                this.ngControl.control.enable();
-                if (!this.ngControl.value && !this.data.length) {
-                    this.ngControl.control.disable();
-                    return;
-                }
-                this.setDefaultValue();
-                this.ngControl.control.disable();
-            } else {
-                if (!this.ngControl.value && !this.data) {
-                    return;
-                }
-                this.setDefaultValue();
-            }
-
-        }
-    }
-
-    setDefaultValue(): void {
-        this.defaultValue = this.data.find((item) => item.id === this.ngControl.value);
-        this.baseData = this.defaultValue
-        if (!this.defaultValue) { return;}
-        this.selectionChange.emit()
-        this.setShowingValue(this.defaultValue);
-    }
-
-    optionClick(showingData: any): void {
-        this.baseData = showingData
-        if (!this.selectConfig.multiple) {
-            this.setShowingValue(showingData);
-            this.matSelect.close();
-            return;
-        }
-        if (this.searchInput) {
-            if (this.selectConfig.multiple) {
-                this.searchInput?.nativeElement?.focus()
-            } else {
-                this.inputFocusOut();
-            }
-        }
-
-        this.setShowingValue(showingData);
-        this.showPlaceholder = false;
-    }
-
-    addNewItemEvent(): void {
-        this.isNeededForRecall = true;
-        this.emitAction.emit();
-    }
-  /**
-   * Filter and show.
-   * @param data - Existing chosen data.
-   */
-    setShowingValue(data: any): void {
-        if (!data) {
-            return;
-        }
-        // TODO refactor this part fully
-        let include = data;
-        let includeOptional = data;
-
-        if (this.selectConfig.valueToShowByKey) {
-            this.selectConfig.valueToShowByKey.forEach((param: Array<string | number> | string) => {
-
-                if (typeof param === 'object') {
-                    param.forEach((key: string | number) => {
-                        include = (include) ? include[key] : null;
-                    })
-                } else {
-                    include = include[param];
-                }
-            })
-            if (this.selectConfig.showFullTextWithOptionalOnSelectedValue) {
-                this.selectConfig.valueToShowByParam?.forEach((param: Array<string | number> | string) => {
-
-                    if (typeof param === 'object') {
-                        param.forEach((key: string | number) => {
-                            includeOptional = (includeOptional) ? includeOptional[key] : null;
-                        })
-                    } else {
-                        includeOptional = includeOptional[param];
-                    }
-                })
-                if (this.selectConfig.valueToShowByParam && typeof includeOptional === 'string') {
-                    include += (this.selectConfig.withParamSymbol || '') + includeOptional
-                }
-            }
-
-        }
-        this.showingValue = include;
-        this.blockRecallDefaultValueSetter = true;
-    }
-
-  /**
-   * Block another events.
-   * @param event - Element click event.
-   */
-    preventDefault(event: any) {
-        if (!this.selectConfig.multiple) {
-            return;
-        }
-        event.preventDefault()
-    }
-
-    registerPanelScrollEvent(element: MatSelect) {
-        if (this.selectConfig.paginateOnScroll === false) {
-            return;
-        }
-
-        const panel = element.panel.nativeElement;
-        panel.addEventListener('scroll', (event: any) => this.loadDataOnScroll(event));
-    }
-
-    loadDataOnScroll(event: any) {
-        const pos = (event.target.scrollTop || event.target.scrollTop) + event.target.offsetHeight;
-        const max = event.target.scrollHeight;
-        if ((pos + 1) >= max) {
-            if (this.paginationData.current === this.paginationData.last || this.selectConfig.blockPagination) {
-                return;
-            }
-            this.getData();
-        }
-    }
-
-    focusSearchInput() {
-        if (this.selectConfig.search && this.searchInput) {
-            this.searchInput.nativeElement.focus();
-        }
-    }
-
-    inputFocusOut(): void {
-        this.isNeededForRecall = !!this.searchInput.nativeElement.value;
-        this.searchInput.nativeElement.value = '';
-        this.showPlaceholder = true;
-        this.clearTimeoutForSearch();
-    }
-
-    resetValue(): void {
-        this.selectionChange.emit(null);
-        this.ngControl.reset(null);
-        this.inputFocusOut();
-    }
-
-    getDataWithSearch(value: any, event: any): void {
-        this.clearTimeoutForSearch();
-        if (value.length >= 1) {
-            this.searchTimeoutId = setTimeout(() => {
-                this.getData(value, true)
-            }, 800);
-        } else if (value.length <= 1 && event.keyCode === 8) {
-            this.getData(value, true)
-        }
-    }
-
-    clearTimeoutForSearch(): void {
-        if (this.searchTimeoutId) {
-            clearTimeout(this.searchTimeoutId);
-            this.searchTimeoutId = 0;
-        }
-    }
-
-    openSelection(): void {
-        if (this.selectConfig.disabled || this.ngControl.control.disabled) {
-            return;
-        }
-        this.showPlaceholder ? this.matSelect.open() : this.closePanelAndUnsetFocus();
-        this.showPlaceholder = !this.showPlaceholder;
-        if (!this.showPlaceholder) {
-            this.reCallData()
-        }
-    }
-
-    closePanelAndUnsetFocus(): void {
-        this.matSelect.close();
-        if (this.searchInput) {
-            this.searchInput.nativeElement.blur()
-        }
-    }
-
-    openedChange(event: any) {
-        if (event) {
-            if (this.isNeededForRecall) {
-                this.reCallData();
-                return;
-            }
-            if (!this.selectConfig.search) {
-                this.pending = false
-                this.reCallData();
-            }
-
-            return;
-        }
-
-        this.showPlaceholder = true;
-    }
-
-    reCallData(): void {
-        // TODO refactor this part
-        if (!this.isNeededForRecall) { return; }
-        this.data = [];
-        this.pending = true;
-        this.paginationData = {
-            current: 1,
-            last: 0
-        };
-        this.accessToNextRequest = true;
-        if ((typeof this.selectConfig.paginate) === 'function') {
-            this.getData();
-        } else {
-            this.pending = false;
-            this.data = this.selectConfig.paginate;
-        }
-        this.isNeededForRecall = false;
-    }
-
-    emitSelectionChangeAndClose(event: any) {
-        this.selectionChange.emit(event.value);
-        if (this.selectConfig.multiple) {
-            if (!event.value?.length) {
-                this.ngControl.control.reset();
-            }
-            return;
-        }
-        this.matSelect.close();
-    }
-
-    iconClick(matSelect: MatSelect, searchInput?: ElementRef): void {
-        matSelect.open();
-        searchInput?.nativeElement?.focus();
-    }
-
-    customErrorStateMatcher = {
-        isErrorState: (control: any, form: any): boolean => {
-            return !!(control && control.invalid && this.submitValue);
-        }
-    };
-}

package/src/lib/components/autocomplete-select/loader.svg

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
-<circle cx="50" cy="50" fill="none" stroke="#00AC47" stroke-width="10" r="35" stroke-dasharray="164.93361431346415 56.97787143782138">
-  <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;360 50 50" keyTimes="0;1"></animateTransform>
-</circle>
-<!-- [ldio] generated by https://loading.io/ --></svg>

package/src/lib/components/button/button.component.html

@@ -1,48 +0,0 @@
-<button *ngIf="[ButtonType.FILLED,ButtonType.WARNING].includes(type)"
-        mat-flat-button
-        [attr.data-cy]="data_cy"
-        [color]="type === ButtonType.WARNING ? 'warn' : color"
-        [class.activated]="activated"
-        [ngClass]="(customClass || '')"
-        [disabled]="disabled || submit"
-        (click)="onClick($event)"
->
-        <span *ngIf="submit" class="spinner-overlay">
-            <mat-spinner diameter="16"></mat-spinner>
-        </span>
-  <mat-icon *ngIf="fontIcon && !submit">{{fontIcon}}</mat-icon>
-  <mat-icon *ngIf="svgIcon && !submit" [svgIcon]="svgIcon"></mat-icon>
-  <span>{{text | translate}}</span>
-</button>
-<button *ngIf="[ButtonType.TONAL,ButtonType.TEXT].includes(type)"
-        mat-button
-        [attr.data-cy]="data_cy"
-        [ngClass]="(type === ButtonType.TONAL ? 'tertiary ' : '') + (customClass || '')"
-        [class.activated]="activated"
-        [disabled]="disabled || submit"
-        (click)="onClick($event)"
->
-        <span *ngIf="submit"  class="spinner-overlay">
-            <mat-spinner diameter="16"></mat-spinner>
-        </span>
-  <mat-icon *ngIf="fontIcon && !submit">{{fontIcon}}</mat-icon>
-  <mat-icon *ngIf="svgIcon && !submit" [svgIcon]="svgIcon"></mat-icon>
-
-  <span>{{text | translate}}</span>
-</button>
-<button *ngIf="type === ButtonType.OUTLINE"
-        [color]="color"
-        mat-stroked-button
-        [attr.data-cy]="data_cy"
-        [ngClass]="(customClass || '') "
-        [disabled]="disabled || submit"
-        (click)="onClick($event)"
-        [class.activated]="activated"
->
-        <span *ngIf="submit"  class="spinner-overlay">
-            <mat-spinner diameter="16"></mat-spinner>
-        </span>
-  <mat-icon *ngIf="fontIcon && !submit" >{{fontIcon}}</mat-icon>
-  <mat-icon *ngIf="svgIcon && !submit" [svgIcon]="svgIcon"></mat-icon>
-  <span>{{text | translate}}</span>
-</button>

package/src/lib/components/button/button.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ButtonComponent } from './button.component';
-
-describe('ButtonComponent', () => {
-  let component: ButtonComponent;
-  let fixture: ComponentFixture<ButtonComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [ButtonComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(ButtonComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/components/button/button.component.ts

@@ -1,106 +0,0 @@
-import {Component, EventEmitter, Input, Output} from '@angular/core';
-import {MatButton} from "@angular/material/button";
-import {NgClass, NgIf} from "@angular/common";
-import {MatProgressSpinner} from "@angular/material/progress-spinner";
-import {MatIconModule} from "@angular/material/icon";
-import {TranslateModule, TranslatePipe, TranslateService} from "@ngx-translate/core";
-import { ButtonType } from '../../interfaces/button-types.enum';
-import {NgxMaskDirective, NgxMaskPipe } from 'ngx-mask';
-
-/**
- * A reusable button component with Material Design styling and custom functionality.
- */
-@Component({
-  selector: 'i-tech-button',
-  standalone: true,
-  imports: [
-    MatButton,
-    NgClass,
-    MatProgressSpinner,
-    NgIf,
-    MatIconModule,
-    TranslateModule
-  ],
-  templateUrl: './button.component.html',
-  styleUrl: './button.component.css',
-  providers: [
-    NgxMaskDirective,
-    NgxMaskPipe,
-    TranslatePipe,
-    TranslateService
-  ]
-})
-export class ButtonComponent {
-  /**
-   * The text displayed inside the button.
-   */
-  @Input() text: string = '';
-
-  /**
-   * Data attribute used for Cypress or other testing frameworks.
-   */
-  @Input() data_cy: string = '';
-
-  /**
-   * Font icon class for displaying an icon (e.g., Material Icons).
-   */
-  @Input() fontIcon: string = '';
-
-  /**
-   * SVG icon name for displaying an SVG icon.
-   */
-  @Input() svgIcon: string = '';
-
-  /**
-   * Defines the type of button (e.g., `FILLED`, `OUTLINED`).
-   */
-  @Input() type: ButtonType = ButtonType.FILLED;
-
-  /**
-   * Additional custom classes to style the button.
-   */
-  @Input() customClass: string = '';
-
-  /**
-   * If true, the button acts as a submit button.
-   */
-  @Input() submit: boolean = false;
-
-  /**
-   * If true, the button is disabled and cannot be clicked.
-   */
-  @Input() disabled: boolean = false;
-
-  /**
-   * Indicates whether the button is currently activated.
-   */
-  @Input() activated: boolean = false;
-
-  /**
-   * The color of the button (e.g., `primary`, `warn`).
-   */
-  @Input() color: 'primary' | 'warn' = 'primary';
-
-  /**
-   * Emits an event when the button is clicked.
-   */
-  @Output() buttonClick = new EventEmitter<void>();
-
-  /**
-   * Enum reference for `ButtonType` to use in templates.
-   */
-  protected readonly ButtonType = ButtonType;
-
-  constructor() {}
-
-  /**
-   * Handles the button click event.
-   *
-   * @param event - The mouse event triggered by clicking the button.
-   */
-  onClick(event: MouseEvent): void {
-    if (!this.disabled && !this.submit) {
-      this.buttonClick.emit();
-    }
-  }
-}

package/src/lib/components/clear-value/clear-value.component.ts

@@ -1,44 +0,0 @@
-import {Component, EventEmitter, Input, Output} from '@angular/core';
-import {NgClass, NgOptimizedImage} from "@angular/common";
-
-@Component({
-    selector: 'i-tech-clear-value',
-    template: `<img
-    class="pointer"
-    [ngClass]="className || 'standard'"
-    (click)="reset.emit()"
-    ngSrc="./ic_close.svg"
-    height="24" width="24" alt=""/>`,
-    styles: [`
-    img {
-      position: absolute;
-      width: 15px;
-      height: 15px;
-    }
-
-    .big {
-      width: 25px;
-      height: 25px;
-    }
-
-    .range_date {
-      right: -65px;
-      top: 15px;
-    }
-
-    .standard {
-      right: -20px;
-      top: 40px;
-    }
-  `],
-  imports: [
-    NgClass,
-    NgOptimizedImage
-  ],
-  standalone: true
-})
-export class ClearValueComponent {
-  @Input() className!: string;
-  @Input() additionalClass!: string;
-  @Output() reset = new EventEmitter<any>();
-}