@verisoft/ui-govcz 18.6.2 → 18.6.3

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

@@ -0,0 +1,26 @@
+<gov-accordion>
+    <gov-accordion-item 
+        [size]="size | govSize"
+        [identifier]="identifier"
+        [open]="open"
+    >
+        @if (icon) {
+            <gov-icon
+                [name]="icons.chevronDown"
+            />
+        } @if (title) {
+            <h2 slot="label">{{ title | translate }}</h2>
+        } @if (badge) {
+            <gov-badge 
+                inverse="true"
+                size="s"
+                [slot]="badgeSlot"
+            >
+                {{ badge }}
+            </gov-badge>
+        } @if (annotation) {
+            <p slot="annotation">{{ annotation | translate }}</p>
+        }
+        <ng-content></ng-content>
+    </gov-accordion-item>
+</gov-accordion>

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

@@ -0,0 +1,57 @@
+import { CommonModule } from '@angular/common';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    Input,
+    NO_ERRORS_SCHEMA,
+} from '@angular/core';
+import { GovDesignSystemModule } from '@gov-design-system-ce/angular';
+import { TranslateModule } from '@ngx-translate/core';
+import {
+    FieldSizeType,
+    FieldSize,
+    SECTION_COMPONENT_TOKEN,
+    SectionCore,
+} from '@verisoft/ui-core';
+import { Icons } from '../../icons';
+import { GovSizePipe } from '../../pipes';
+
+@Component({
+    selector: 'v-section',
+    standalone: true,
+    imports: [
+        CommonModule,
+        GovDesignSystemModule,
+        GovSizePipe,
+        TranslateModule,
+    ],
+    templateUrl: './section.component.html',
+    styleUrl: './section.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: SECTION_COMPONENT_TOKEN,
+            useExisting: SectionComponent,
+        },
+    ],
+    schemas: [
+        NO_ERRORS_SCHEMA
+    ],
+})
+export class SectionComponent
+    implements SectionCore
+{
+    @Input() title!: string;
+    @Input() badge!: string;
+    @Input() showContent = false;
+    @Input() backgroundColor!: string;
+    @Input() annotation!: string;
+    @Input() identifier!: string;
+    @Input() icon!: string;
+    @Input() iconType!: string;
+    @Input() size: FieldSizeType = FieldSize.medium;
+    @Input() badgeSlot: 'prefix' | 'sufix' = 'sufix';
+    @Input() open = false;
+
+    icons = Icons;
+}

package/src/lib/components/shared-components/action-button-group/action-button-group.component.html

@@ -0,0 +1,27 @@
+<div
+  class="v-action-button-group align-items-center justify-content-center justify-content-md-end"
+>
+  <div class="v-action-button-group__actions d-flex gap-2">
+    @for (action of visibleActions; track action) {
+    <v-action-button
+      [disabled]="action.disabled"
+      [icon]="action.icon"
+      [id]="action.id"
+      [outlined]="action.outlined"
+      [raised]="action.raised"
+      [toolTip]="action.toolTip || action.label"
+      [severity]="action.severity"
+      [size]="action.size"
+      (click)="fireClick(action, $event)"
+    ></v-action-button>
+    } @if (actions.length > visibleActions.length) {
+    <v-button
+      (click)="menu.toggle($event)"
+      [label]="label"
+      [iconPos]="menuIconPos"
+      [icon]="menuIcon"
+    />
+    }
+  </div>
+</div>
+<p-menu #menu [model]="menuItems" [popup]="true" appendTo="body" />

package/src/lib/components/shared-components/action-button-group/action-button-group.component.spec.ts

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

package/src/lib/components/shared-components/action-button-group/action-button-group.component.ts

@@ -0,0 +1,114 @@
+import {
+  AfterContentInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ContentChildren,
+  Input,
+  QueryList,
+} from '@angular/core';
+import {
+  ACTION_BUTTON_GROUP_COMPONENT_TOKEN,
+  ActionButton,
+  ActionButtonGroupCore,
+  IconPositionType,
+  queryListChanged,
+  ScreenSizeService,
+  UnsubscribeComponent,
+} from '@verisoft/ui-core';
+import { MenuItem } from 'primeng/api';
+import { MenuModule } from 'primeng/menu';
+import {
+  combineLatestWith,
+  takeUntil,
+} from 'rxjs';
+import { Icons } from '../../../icons';
+import { ButtonComponent } from '../../button';
+import { ActionButtonComponent } from './components/action-button/action-button.component';
+
+@Component({
+  selector: 'v-action-button-group',
+  standalone: true,
+  imports: [MenuModule, ButtonComponent, ActionButtonComponent],
+  templateUrl: './action-button-group.component.html',
+  styleUrl: './action-button-group.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: ACTION_BUTTON_GROUP_COMPONENT_TOKEN,
+      useExisting: ActionButtonGroupComponent,
+    },
+  ],
+})
+export class ActionButtonGroupComponent
+  extends UnsubscribeComponent
+  implements AfterContentInit, ActionButtonGroupCore
+{
+  @ContentChildren(ActionButtonComponent)
+  actions!: QueryList<ActionButtonComponent>;
+
+  @Input() maxItems = 3;
+
+  @Input() maxItemsMobile = 0;
+
+  @Input() items: ActionButton[] = [];
+
+  @Input() menuIconPos: IconPositionType = 'right';
+
+  @Input() menuIcon = Icons.action;
+
+  @Input() label?: string;
+
+  @Input() icon?: string;
+
+  icons = Icons;
+  allItems: ActionButton[] = [];
+  visibleActions: ActionButton[] = [];
+  menuItems: MenuItem[] = [];
+
+  constructor(
+    private readonly changeDetectorRef: ChangeDetectorRef,
+    readonly screenSizeService: ScreenSizeService
+  ) {
+    super();
+  }
+
+  ngAfterContentInit(): void {
+    this.subscribeItemChange();
+  }
+
+  fireClick(item: ActionButton, event: MouseEvent) {
+    event.stopPropagation();
+    item.click.emit();
+  }
+
+  private subscribeItemChange(): void {
+    const screenResize$ = this.screenSizeService.isMobileBlock;
+
+    const actions$ = queryListChanged(this.actions);
+
+    screenResize$
+      .pipe(takeUntil(this.destroyed$), combineLatestWith(actions$))
+      .subscribe(([isMobile, actions]) => {
+        this.computeItems(actions, isMobile);
+      });
+  }
+
+  private computeItems(actions: ActionButton[], isMobile: boolean) {
+    const allItems = [...(this.items ?? []), ...actions];
+    const maxItems = isMobile ? this.maxItemsMobile : this.maxItems;
+    this.visibleActions = allItems.slice(0, maxItems);
+    this.menuItems = allItems.slice(maxItems).map(this.convertToMenuItem);
+    this.changeDetectorRef.detectChanges();
+  }
+
+  private convertToMenuItem(item: ActionButton): MenuItem {
+    return {
+      label: item.label,
+      icon: item.icon,
+      command: () => {
+        item.click.emit();
+      },
+    };
+  }
+}

package/src/lib/components/shared-components/action-button-group/components/action-button/action-button.component.html

@@ -0,0 +1,11 @@
+<v-button
+  [label]="label"
+  [disabled]="disabled"
+  [icon]="icon"
+  [pTooltip]="toolTip"
+  [outlined]="outlined"
+  tooltipPosition="bottom"
+  [size]="size"
+  [severity]="severity"
+  (click)="handleClick($event)"
+></v-button>

package/src/lib/components/shared-components/action-button-group/components/action-button/action-button.component.spec.ts

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

package/src/lib/components/shared-components/action-button-group/components/action-button/action-button.component.ts

@@ -0,0 +1,71 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  inject,
+  Input,
+  OnChanges,
+  Output,
+  SimpleChanges,
+} from '@angular/core';
+import {
+  ACTION_BUTTON_GROUP_COMPONENT_TOKEN,
+  ActionButton,
+  ActionButtonGroupCore,
+  ControlSeverityType,
+  FieldSizeType,
+} from '@verisoft/ui-core';
+import { TooltipModule } from 'primeng/tooltip';
+import { Observable, Subject } from 'rxjs';
+import { Icons } from '../../../../../icons';
+import { ButtonComponent } from '../../../../button';
+
+@Component({
+  selector: 'v-action-button',
+  standalone: true,
+  imports: [ButtonComponent, TooltipModule],
+  templateUrl: './action-button.component.html',
+  styleUrl: './action-button.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ActionButtonComponent implements ActionButton, OnChanges {
+  @Input() disabled = false;
+  @Input() toolTip?: string;
+  @Input() id?: string;
+  @Input() icon?: string;
+  @Input() outlined = false;
+  @Input() raised = false;
+  @Input() severity?: ControlSeverityType;
+  @Input() label?: string;
+  @Input() size?: FieldSizeType;
+  // eslint-disable-next-line @angular-eslint/no-output-native
+  @Output() click = new EventEmitter<MouseEvent>();
+
+  icons = Icons
+
+  private propertyChangeSubject = new Subject();
+
+  propertyChanged: Observable<unknown> =
+    this.propertyChangeSubject.asObservable();
+
+  buttonGroup: ActionButtonGroupCore | null = inject<ActionButtonGroupCore>(
+    ACTION_BUTTON_GROUP_COMPONENT_TOKEN,
+    {
+      optional: true,
+    }
+  );
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const isValueChange = Object.keys(changes).some(
+      (x) => !changes[x].firstChange
+    );
+    if (isValueChange) {
+      this.propertyChangeSubject.next(null);
+    }
+  }
+
+  handleClick(event: MouseEvent) {
+    event.stopPropagation();
+    this.click.emit(event);
+  }
+}

package/{lib/components/shared-components/action-button-group/index.d.ts → src/lib/components/shared-components/action-button-group/index.ts}

@@ -1,2 +1,2 @@
-export * from './action-button-group.component';
-export * from './components/action-button/action-button.component';
+export * from './action-button-group.component';
+export * from './components/action-button/action-button.component';

package/src/lib/components/shared-components/dynamic-component/dynamic-component-factory.service.ts

@@ -0,0 +1,142 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {
+  Injectable,
+  ViewContainerRef,
+  Type,
+  ComponentFactoryResolver,
+  Injector,
+  ComponentRef,
+  ComponentFactory,
+  OnChanges,
+  SimpleChanges,
+  SimpleChange,
+  EventEmitter,
+  OnDestroy,
+} from '@angular/core';
+import { ExtendedComponent } from '@verisoft/ui-core';
+import { Subscription } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DynamicComponentFactoryService implements OnDestroy {
+  constructor(private componentFactoryResolver: ComponentFactoryResolver) { }
+
+  ngOnDestroy(): void {
+    this.unsubscribeComponentEvents(this);
+  }
+
+  async createDynamicComponent<TComponent>(
+    componentType: Type<TComponent>,
+    viewContainerRef: ViewContainerRef,
+    inputs: ExtendedComponent<TComponent>,
+    injector: Injector | undefined = undefined
+  ) {
+    const componentFactory =
+      this.componentFactoryResolver.resolveComponentFactory(componentType);
+    viewContainerRef.clear();
+    const component = viewContainerRef.createComponent(
+      componentFactory,
+      undefined,
+      injector
+    );
+    this.setComponentDataInt(componentFactory, component, inputs);
+    this.fireComponentEvents(component.instance, inputs);
+    return component;
+  }
+
+  setComponentData<TComponent>(
+    component: ComponentRef<TComponent>,
+    inputs: Partial<TComponent>
+  ) {
+    const factory = this.componentFactoryResolver.resolveComponentFactory(
+      component.componentType
+    );
+
+    this.setComponentDataInt(factory, component, inputs);
+  }
+
+  private unsubscribeComponentEvents<TComponent>(instance: TComponent) {
+    const subscriptionStoreKey = '__outputSubscriptions__';
+    const subscriptions = (instance as any)[subscriptionStoreKey] as Map<string, Subscription>;
+
+    if (subscriptions) {
+      subscriptions.forEach((sub) => sub.unsubscribe());
+      subscriptions.clear();
+    }
+  }
+
+  private fireComponentEvents<TComponent>(
+    instance: TComponent,
+    inputs: ExtendedComponent<TComponent>
+  ) {
+    if (!instance || typeof instance !== 'object') return;
+
+    this.fireInputComponentEvents(instance, inputs);
+    this.fireOutputComponentEvents(instance, inputs);
+  }
+
+  private setComponentDataInt<TComponent>(
+    factory: ComponentFactory<TComponent>,
+    component: ComponentRef<TComponent>,
+    inputs: Partial<TComponent>
+  ) {
+    if (inputs) {
+      const propertyNames = factory.inputs.map((x) => x.propName);
+      const inputsHash = new Set(propertyNames);
+      Object.keys(inputs)
+        .filter((x) => inputsHash.has(x))
+        .forEach((x) => {
+          (<{ [key: string]: unknown }>component.instance)[x] = (<
+            { [key: string]: unknown }
+            >inputs)[x];
+        });
+    }
+  }
+
+  private fireInputComponentEvents<TComponent>(
+    instance: TComponent,
+    inputs: ExtendedComponent<TComponent>
+  ) {
+    const onChangeComponent = instance as unknown as OnChanges;
+    if (onChangeComponent.ngOnChanges && inputs) {
+      const changeEventArgs = Object.keys(inputs).reduce((changes: SimpleChanges, key: string) => {
+        const inputValue = (inputs as { [key: string]: unknown })[key];
+        changes[key] = new SimpleChange(undefined, inputValue, true);
+        return changes;
+      }, {} as SimpleChanges);
+
+      onChangeComponent.ngOnChanges(changeEventArgs);
+    }
+  }
+
+  private fireOutputComponentEvents<TComponent>(
+    instance: TComponent & object,
+    inputs: ExtendedComponent<TComponent>
+  ) {
+    const outputs = Object.keys(inputs).filter((key) => {
+      const emitter = (instance as Record<string, any>)[key];
+      return emitter instanceof EventEmitter;
+    });
+
+    const subscriptionStoreKey = '__outputSubscriptions__';
+    if (!(subscriptionStoreKey in instance)) {
+      (instance as any)[subscriptionStoreKey] = new Map<string, Subscription>();
+    }
+    const subscriptions = (instance as any)[subscriptionStoreKey] as Map<string, Subscription>;
+
+    for (const outputKey of outputs) {
+      const eventEmitter = (instance as Record<string, any>)[outputKey] as EventEmitter<any>;
+      const callback = inputs[outputKey] as (value: any) => void;
+
+      if (eventEmitter && typeof callback === 'function') {
+        if (subscriptions.has(outputKey)) {
+          subscriptions.get(outputKey)!.unsubscribe();
+        }
+
+        const subscription = eventEmitter.subscribe((value: any) => callback(value));
+        subscriptions.set(outputKey, subscription);
+      }
+    }
+  }
+}

package/src/lib/components/shared-components/dynamic-component/dynamic-component.component.ts

@@ -0,0 +1,56 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  inject,
+  Injector,
+  Input,
+  OnChanges,
+  Type,
+  ViewChild,
+  ViewContainerRef,
+} from '@angular/core';
+import { ExtendedComponent } from '@verisoft/ui-core';
+import { DynamicComponentFactoryService } from './dynamic-component-factory.service';
+
+@Component({
+  selector: 'v-dynamic-component',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `<ng-container #dynamicContainer></ng-container>`,
+})
+export class DynamicComponent<TComponent> implements AfterViewInit, OnChanges {
+  @Input() componentType!: Type<TComponent>;
+
+  @Input() data!: ExtendedComponent<TComponent>;
+
+  @ViewChild('dynamicContainer', { read: ViewContainerRef, static: true })
+  container!: ViewContainerRef;
+
+  private factoryServices = inject(DynamicComponentFactoryService);
+
+  private changeDetectorRef = inject(ChangeDetectorRef);
+
+  private injector = inject(Injector);
+
+  ngOnChanges(): void {
+    this.createComponent();
+  }
+
+  ngAfterViewInit(): void {
+    this.createComponent();
+    this.changeDetectorRef.detectChanges();
+  }
+
+  private createComponent() {
+    if (this.container) {
+      this.factoryServices.createDynamicComponent(
+        this.componentType,
+        this.container,
+        this.data,
+        this.injector
+      );
+    }
+  }
+}

package/{lib/components/shared-components/dynamic-component/index.d.ts → src/lib/components/shared-components/dynamic-component/index.ts}

@@ -1,2 +1,2 @@
-export * from './dynamic-component-factory.service';
-export * from './dynamic-component.component';
+export * from './dynamic-component-factory.service';
+export * from './dynamic-component.component';

package/src/lib/components/shared-components/feature-list/directives/feature-list-column.directive.ts

@@ -0,0 +1,32 @@
+import { Directive, Input } from '@angular/core';
+import { GenericFieldType, GenericFieldTypeType, TableColumnDirective } from '@verisoft/ui-core';
+import { FEATURE_LIST_COLUMN_PROVIDER, FeatureListColumnDefinition, FeatureListColumnProvider } from '../feature-list-page.model';
+
+@Directive({
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: 'v-feature-list-column',
+  standalone: true,
+  providers: [
+    {
+      provide: FEATURE_LIST_COLUMN_PROVIDER,
+      useExisting: FeatureListColumnDirective,
+      multi: true,
+    },
+  ],
+})
+export class FeatureListColumnDirective<T>
+  extends TableColumnDirective<T>
+  implements FeatureListColumnProvider<T>
+{
+  @Input() filter = false;
+
+  @Input() type: GenericFieldTypeType = GenericFieldType.text;
+
+  override getDefinition(): FeatureListColumnDefinition<T> {
+    const definition = super.getDefinition() as FeatureListColumnDefinition<T>;
+    definition.filter = this.filter;
+    definition.type = this.type;
+    definition.format = this.format;
+    return definition;
+  }
+}

package/src/lib/components/shared-components/feature-list/directives/feature-list-filter-field.directive.ts

@@ -0,0 +1,8 @@
+import { Directive } from '@angular/core';
+import { FilterFieldDirective } from '../../filter';
+@Directive({
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: 'v-feature-list-filter-field',
+  standalone: true,
+})
+export class FeatureListFilterFieldDirective extends FilterFieldDirective {}

package/src/lib/components/shared-components/feature-list/feature-list-filter.pipe.ts

@@ -0,0 +1,21 @@
+import { Pipe, PipeTransform } from "@angular/core";
+import { GenericFieldDefinition, GenericFieldType } from "@verisoft/ui-core";
+import { FeatureListColumnDefinition } from "./feature-list-page.model";
+
+@Pipe({
+    name: 'featureListColumn',
+    standalone: true,
+})
+export class FeatureListFilterPipe<T> implements PipeTransform {
+    transform(value: FeatureListColumnDefinition<T>[] | undefined): GenericFieldDefinition[] | undefined {
+        if (!value){
+            return undefined;
+        }
+
+        return value.filter(x => x.filter).map((x, index) => ({
+            name: x.id,
+            label: typeof x.headerName === 'function'? x.headerName(x.id, index) : x.headerName ?? '',
+            type: x.type as GenericFieldType,
+        }));
+    }
+}

package/src/lib/components/shared-components/feature-list/feature-list-page.component.ts

@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import {
+  FEATURE_LIST_PAGE_CONFIG_PROPERTY,
+  FeatureListPageConfig,
+} from './feature-list-page.model';
+import { FeatureListComponent } from './feature-list.component';
+
+@Component({
+  selector: 'v-feature-list-page',
+  standalone: true,
+  imports: [FeatureListComponent],
+  template: `
+    <v-feature-list
+      [title]="config.title"
+      [tableName]="config.tableName"
+      [showAdd]="config.showAdd ?? true"
+      [showDownload]="config.showDownload ?? true"
+      [showDelete]="config.showDelete ?? true"
+    >
+    </v-feature-list>
+  `,
+})
+export class FeatureListPageComponent {
+  config!: FeatureListPageConfig;
+
+  constructor(activatedRoute: ActivatedRoute) {
+    this.config =
+      activatedRoute.snapshot.data[FEATURE_LIST_PAGE_CONFIG_PROPERTY];
+  }
+}