@inspark/inspark-components 19.0.49 → 19.0.51

package/src/bms-css.js

@@ -0,0 +1,3 @@
+import './scss/main.scss';
+import './scss/theme-bms-dark.scss';
+import './scss/theme-bms-light.scss';

package/src/components/autocomplete/autocomplete.component.html

@@ -0,0 +1,68 @@
+<p-autoComplete
+  #autocomplete
+
+  [style]="style"
+  [styleClass]="styleClass"
+
+  [(ngModel)]="value"
+
+  [suggestions]="suggestions"
+  [placeholder]="placeholder"
+  [field]="field"
+  [dropdown]="dropdown"
+  [multiple]="multiple"
+  [forceSelection]="forceSelection"
+  [minLength]="minLength"
+  [delay]="delay"
+  [disabled]="disabled"
+  [appendTo]="appendTo"
+  [dropdownMode]="dropdownMode"
+  [virtualScroll]="virtualScroll"
+  [virtualScrollItemSize]="virtualScrollItemSize"
+  [emptyMessage]="emptyMessage"
+  [inputStyle]="inputStyle"
+  [inputStyleClass]="inputStyleClass"
+  [dropdownIcon]="dropdownIcon"
+
+  (completeMethod)="handleComplete($event)"
+  (onSelect)="handleSelect($event)"
+  (onUnselect)="handleUnselect($event)"
+  (onFocus)="onFocus.emit($event)"
+  (onBlur)="handleBlur($event)"
+  (onDropdownClick)="onDropdownClick.emit($event)"
+  (onKeyUp)="onKeyUp.emit($event)"
+  (onShow)="onShow.emit()"
+  (onHide)="onHide.emit()"
+>
+
+  <ng-template
+    pTemplate="item"
+    let-item
+  >
+
+    <ng-content
+      select="[itemTemplate]"
+    ></ng-content>
+
+    <span *ngIf="!itemTemplate">
+      {{ item?.[optionLabel] }}
+    </span>
+
+  </ng-template>
+
+  <ng-template
+    pTemplate="selectedItem"
+    let-item
+  >
+
+    <ng-content
+      select="[selectedItemTemplate]"
+    ></ng-content>
+
+    <span *ngIf="!selectedItemTemplate">
+      {{ item?.[optionLabel] }}
+    </span>
+
+  </ng-template>
+
+</p-autoComplete>

package/src/components/autocomplete/autocomplete.component.scss

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

package/src/components/autocomplete/autocomplete.component.ts

@@ -0,0 +1,209 @@
+import {
+  Component,
+  EventEmitter,
+  forwardRef,
+  Input,
+  Output,
+  ViewChild
+} from '@angular/core';
+
+import {
+  ControlValueAccessor,
+  NG_VALUE_ACCESSOR
+} from '@angular/forms';
+
+import {
+  AutoComplete,
+  AutoCompleteCompleteEvent,
+  AutoCompleteSelectEvent,
+  AutoCompleteUnselectEvent
+} from 'primeng/autocomplete';
+
+@Component({
+  standalone: false,
+  selector: 'in-autocomplete',
+  templateUrl: './autocomplete.component.html',
+  styleUrls: ['./autocomplete.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => AutoCompleteComponent),
+      multi: true
+    }
+  ]
+})
+export class AutoCompleteComponent implements ControlValueAccessor {
+
+  @ViewChild('autocomplete')
+  autocomplete!: AutoComplete;
+
+  @Input()
+  suggestions: any[] = [];
+
+  @Input()
+  placeholder = '';
+
+  @Input()
+  field = 'label';
+
+  @Input()
+  dropdown = false;
+
+  @Input()
+  multiple = false;
+
+  @Input()
+  forceSelection = false;
+
+  @Input()
+  minLength = 1;
+
+  @Input()
+  delay = 300;
+
+  @Input()
+  disabled = false;
+
+  @Input()
+  appendTo: any = 'body';
+
+  @Input()
+  dropdownMode: 'blank' | 'current' = 'blank';
+
+  @Input()
+  optionLabel = 'label';
+
+  @Input()
+  virtualScroll = false;
+
+  @Input()
+  virtualScrollItemSize = 38;
+
+  @Input()
+  emptyMessage = 'No results found';
+
+  @Input()
+  style: any = null;
+
+  @Input()
+  styleClass = '';
+
+  @Input()
+  inputStyle: any = null;
+
+  @Input()
+  inputStyleClass = '';
+
+  /** HTML size attribute of the input field (number of characters) */
+  @Input()
+  size: number | undefined = undefined;
+
+  /**
+   * When true, the component won't update ngModel with typed text on blur
+   * (PrimeNG 14 legacy prop — accepted but not forwarded to p-autoComplete v19)
+   */
+  @Input()
+  immutable = true;
+
+  @Input()
+  dropdownIcon: string | undefined = undefined;
+
+  @Output()
+  completeMethod = new EventEmitter<any>();
+
+  @Output()
+  onSelect = new EventEmitter<any>();
+
+  @Output()
+  onUnselect = new EventEmitter<any>();
+
+  @Output()
+  onClear = new EventEmitter<void>();
+
+  @Output()
+  onFocus = new EventEmitter<any>();
+
+  @Output()
+  onBlur = new EventEmitter<any>();
+
+  @Output()
+  onDropdownClick = new EventEmitter<any>();
+
+  @Output()
+  onKeyUp = new EventEmitter<any>();
+
+  @Output()
+  onShow = new EventEmitter<void>();
+
+  @Output()
+  onHide = new EventEmitter<void>();
+
+  value: any = null;
+
+  itemTemplate: any = null;
+
+  selectedItemTemplate: any = null;
+
+  private onModelChange = (_value: any) => {};
+
+  private onModelTouched = () => {};
+
+  writeValue(value: any): void {
+    this.value = value;
+  }
+
+  registerOnChange(fn: any): void {
+    this.onModelChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onModelTouched = fn;
+  }
+
+  setDisabledState(disabled: boolean): void {
+    this.disabled = disabled;
+  }
+
+  handleComplete(event: AutoCompleteCompleteEvent): void {
+    this.completeMethod.emit(event);
+  }
+
+  handleSelect(event: AutoCompleteSelectEvent): void {
+    // PrimeNG 19 auto-extracts option.value from items that have a .value property,
+    // storing it in modelValue instead of the full item object.
+    // event.value always carries the full original item — use it to restore PrimeNG 14 behavior.
+    this.value = event.value;
+    this.autocomplete?.writeValue(event.value);
+    this.onModelChange(event.value);
+
+    this.onSelect.emit(event);
+  }
+
+  handleUnselect(event: AutoCompleteUnselectEvent): void {
+    this.onModelChange(this.value);
+
+    this.onUnselect.emit(event);
+  }
+
+  handleBlur(event: any): void {
+    this.onModelTouched();
+
+    this.onBlur.emit(event);
+  }
+
+  clear(): void {
+    this.value = this.multiple ? [] : null;
+
+    this.onModelChange(this.value);
+
+    this.onClear.emit();
+  }
+
+  show(): void {
+    this.autocomplete?.show();
+  }
+
+  hide(): void {
+    this.autocomplete?.hide();
+  }
+}

package/src/components/autocomplete/autocomplete.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+
+import { AutoCompleteModule } from 'primeng/autocomplete';
+
+import { SharedUiModule } from '../shared/shared-ui.module';
+
+import { AutoCompleteComponent } from './autocomplete.component';
+
+@NgModule({
+  declarations: [
+    AutoCompleteComponent
+  ],
+  imports: [
+    SharedUiModule,
+    AutoCompleteModule
+  ],
+  exports: [
+    AutoCompleteComponent
+  ]
+})
+export class AutoCompleteComponentModule {}

package/src/components/breadcrumb/breadcrumb.component.html

@@ -0,0 +1,13 @@
+<div>
+  <ul class="c-crumb">
+    <li class="c-crumb__item">
+      <a [routerLink]="['/main/page/home']" translate="">{{'Home' | translate }}</a>
+    </li>
+    <li *ngFor="let item of items; last as isLast" class="c-crumb__item">
+      <a *ngIf="item.url && !isLast; else noUrl" [routerLink]="item.url" translate="">{{item.label}}</a>
+      <ng-template #noUrl>
+        <span translate="">{{item.label}}</span>
+      </ng-template>
+    </li>
+  </ul>
+</div>

package/src/components/breadcrumb/breadcrumb.component.ts

@@ -0,0 +1,20 @@
+import {ChangeDetectionStrategy, Component, Input, OnInit} from '@angular/core';
+import {MenuItem} from 'primeng/api';
+
+@Component({
+  standalone: false,
+  selector: 'in-breadcrumb',
+  templateUrl: './breadcrumb.component.html',
+  styleUrls: ['./breadcrumb.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class BreadcrumbComponent implements OnInit {
+
+  @Input() items: MenuItem[];
+
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+}

package/src/components/breadcrumb/breadcrumb.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+
+import { SharedUiModule } from '../shared/shared-ui.module';
+
+import { BreadcrumbComponent } from './breadcrumb.component';
+
+@NgModule({
+  declarations: [
+    BreadcrumbComponent
+  ],
+  imports: [
+    SharedUiModule
+  ],
+  exports: [
+    BreadcrumbComponent
+  ]
+})
+export class BreadcrumbComponentModule {}

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

@@ -0,0 +1,155 @@
+<a (blur)="blur.emit($event)"
+   (click)="_onClick($event)"
+   (focus)="focus.emit($event)"
+   *ngIf="link && _linkType ==='external'"
+   [attr.type]="type"
+   [class]="className + ' ' + testId  + ' field_' + name"
+   [href]="link"
+   [ngClass]="{'p-button p-widget p-state-default p-corner-all':true,
+                        'p-button-icon-only': ((icon || svg) && !label),
+                        'p-button-text-icon-left': ((icon || svg) && label && iconPos === 'left'),
+                        'p-button-text-icon-right': ((icon || svg) && label && iconPos === 'right'),
+                        'p-button-text-only': (!(icon || svg) && label),
+                        'p-button-text-empty': (!(icon || svg) && !label),
+                        'p-button-svg': svg,
+                        'p-button-material': isMaterialIcon,
+                        'p-state-disabled': disabled,
+                        'p-button-tiny': size === 'tiny',
+                        'p-button-small': size === 'small',
+                        'p-button-large': size === 'large',
+                        'p-button-primary': color === 'primary',
+                        'p-button-secondary': color === 'secondary',
+                        'p-button-danger': color === 'danger',
+                        'p-button-transparency': color === 'transparent',
+                        'p-button-pressed' : pressed}"
+   [ngStyle]="{width:width}"
+   [style]="style"
+   [target]="_target" class="button-container">
+  <ng-container *ngTemplateOutlet="content;"></ng-container>
+</a>
+<a (blur)="blur.emit($event)"
+   (click)="_onClick($event)"
+   (focus)="focus.emit($event)"
+   *ngIf="link && _linkType ==='internal'"
+   [attr.type]="type"
+   [class]="className + ' ' + testId  + ' field_' + name"
+   [ngClass]="{'p-button p-widget p-state-default p-corner-all':true,
+                        'p-button-icon-only': ((icon || svg) && !label),
+                        'p-button-text-icon-left': ((icon || svg) && label && iconPos === 'left'),
+                        'p-button-text-icon-right': ((icon || svg) && label && iconPos === 'right'),
+                        'p-button-text-only': (!(icon || svg) && label),
+                        'p-button-text-empty': (!(icon || svg) && !label),
+                        'p-button-svg': svg,
+                        'p-button-material': isMaterialIcon,
+                        'p-state-disabled': disabled,
+                        'p-button-tiny': size === 'tiny',
+                        'p-button-small': size === 'small',
+                        'p-button-large': size === 'large',
+                        'p-button-primary': color === 'primary',
+                        'p-button-secondary': color === 'secondary',
+                        'p-button-danger': color === 'danger',
+                        'p-button-transparency': color === 'transparent',
+                        'p-button-pressed' : pressed}"
+   [ngStyle]="{width:width}"
+   [routerLink]="link"
+   [style]="style"
+   [target]="_target" class="button-container">
+  <ng-container *ngTemplateOutlet="content;"></ng-container>
+</a>
+<span #dropdown="ngbDropdown" *ngIf="!link && menuItems.length" [ngStyle]="{width:width}" class="button-container" container="body"
+      ngbDropdown>
+    <button
+      (blur)="blur.emit($event)"
+      (click)="_onClick($event)"
+      (focus)="focus.emit($event)"
+      [attr.type]="type"
+      [class]="className + ' ' + testId + ' field_' + name"
+      [disabled]="disabled"
+      [ngClass]=" {'p-button p-widget p-state-default p-corner-all':true,
+                        'p-button-icon-only': ((icon || svg) && !label),
+                        'p-button-text-icon-left': ((icon || svg) && label && iconPos === 'left'),
+                        'p-button-text-icon-right': ((icon || svg) && label && iconPos === 'right'),
+                        'p-button-text-only': (!(icon || svg) && label),
+                        'p-button-text-empty': (!(icon || svg) && !label),
+                        'p-button-svg': svg,
+                        'p-button-material': isMaterialIcon,
+                        'p-state-disabled': disabled,
+                        'p-button-tiny': size === 'tiny',
+                        'p-button-small': size === 'small',
+                        'p-button-large': size === 'large',
+                        'p-button-primary': color === 'primary',
+                        'p-button-secondary': color === 'secondary',
+                        'p-button-danger': color === 'danger',
+                        'p-button-transparency': color === 'transparent',
+                        'p-button-shadowed': shadow === true,
+                        'p-button-pressed' : pressed}"
+      [style]="style" ngbDropdownToggle>
+        <ng-container *ngTemplateOutlet="content;"></ng-container>
+    </button>
+    <div *ngIf="menuItems.length" aria-labelledby="menu"
+         class="in-dropdown-menu"
+         ngbDropdownMenu>
+        <div *ngFor="let item of menuItems" class="in-dropdown-menu-item" role="menuitem">
+            <in-button (click)="dropdown.close(); item.command?.($event);"
+                       [color]="selectedItem && selectedItem == item.id?'primary':'transparent'"
+                       [icon]="item.icon"
+                       [label]="item.label"
+                       [svg]="item.svg"
+                       size="large"
+                       width="100%"></in-button>
+        </div>
+    </div>
+
+    <div *ngIf="notify" [ngClass]="notify" class="notify"></div>
+</span>
+<span *ngIf="!link && !menuItems.length" [ngStyle]="{width:width}" class="button-container">
+    <button
+      (blur)="blur.emit($event)"
+      (click)="_onClick($event)"
+      (focus)="focus.emit($event)"
+      [attr.type]="type"
+      [class]="className + ' ' + testId  + ' field_' + name"
+      [disabled]="disabled"
+      [ngClass]=" {'p-button p-widget p-state-default p-corner-all':true,
+                        'p-button-icon-only': ((icon || svg) && !label) || isIconOnly,
+                        'p-button-text-icon-left': ((icon || svg) && label && iconPos === 'left'),
+                        'p-button-text-icon-right': ((icon || svg) && label && iconPos === 'right'),
+                        'p-button-text-only': (!(icon || svg) && label),
+                        'p-button-text-empty': (!(icon || svg) && !label),
+                        'p-button-svg': svg,
+                        'p-button-material': isMaterialIcon,
+                        'p-state-disabled': disabled,
+                        'p-button-tiny': size === 'tiny',
+                        'p-button-small': size === 'small',
+                        'p-button-large': size === 'large',
+                        'p-button-primary': color === 'primary',
+                        'p-button-secondary': color === 'secondary',
+                        'p-button-danger': color === 'danger',
+                        'p-button-transparency': color === 'transparent',
+                        'p-button-shadowed': shadow === true,
+                        'p-button-pressed' : pressed}" [style]="style">
+        <ng-container *ngTemplateOutlet="content;"></ng-container>
+    </button>
+    <div *ngIf="notify" [ngClass]="notify" class="notify"></div>
+</span>
+
+<ng-template #content>
+    <span *ngIf="!isMaterialIcon && icon && !isLoading" [class]="icon"
+          [ngClass]="{'p-clickable': true,
+                        'p-button-icon-left': (iconPos === 'left'),
+                        'p-button-icon-right': (iconPos === 'right')}"></span>
+  <span *ngIf="isMaterialIcon && icon && !isLoading" [ngClass]="{'p-clickable': true,
+                        'p-button-icon-left': (iconPos === 'left'),
+                        'p-button-icon-right': (iconPos === 'right')}"
+  ><i class="material-icons">{{icon}}</i></span>
+  <in-preloader *ngIf="isLoading" size="small"></in-preloader>
+  <span class="p-button-text p-clickable">{{label}}</span>
+  <span *ngIf="svg && !isLoading" [ngClass]="{'p-clickable': true,
+                        'p-button-icon-left': (iconPos === 'left'),
+                        'p-button-icon-right': (iconPos === 'right')}">
+        <in-svg *ngIf="size === 'normal'" [src]="svg" height="20px" width="20px"></in-svg>
+        <in-svg *ngIf="size === 'large'" [src]="svg" height="20px" width="20px"></in-svg>
+        <in-svg *ngIf="size === 'small'" [src]="svg" height="20px" width="20px"></in-svg>
+        <in-svg *ngIf="size === 'tiny'" [src]="svg" height="10px" width="10px"></in-svg>
+    </span>
+</ng-template>