@verisoft/ui-primeng 18.7.0 → 18.8.0

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

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

package/src/lib/components/radiobutton/radiobutton.component.stories.ts

@@ -1,71 +0,0 @@
-import {
-  FormControl,
-  FormGroup,
-  FormsModule,
-  ReactiveFormsModule,
-} from '@angular/forms';
-import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
-import { within, expect } from '@storybook/test';
-import { BaseFormInputComponent } from '@verisoft/ui-core';
-import { FormFieldComponent } from '../form-field';
-import { RadioButtonComponent } from './radiobutton.component';
-
-const meta: Meta<RadioButtonComponent<any>> = {
-  component: RadioButtonComponent,
-  title: 'RadioButtonComponent',
-  decorators: [
-    moduleMetadata({
-      imports: [
-        FormFieldComponent,
-        ReactiveFormsModule,
-        FormsModule,
-        BaseFormInputComponent,
-      ],
-    }),
-  ],
-};
-export default meta;
-type Story = StoryObj<RadioButtonComponent<any>>;
-const formGroup: FormGroup = new FormGroup({
-  radio: new FormControl(null),
-});
-export const Primary: Story = {
-  render: (args: any) => ({
-    props: {
-      ...args,
-      formGroup,
-    },
-    template: `
-    <form [formGroup]="formGroup">
-      <v-radiobutton
-      formControlName="radio"
-      [radioGroupName]="radioGroupName"
-      [items]="items"
-      [testId]="testId"
-      [label]="label"
-      [required]="required"
-      [tooltip]="tooltip"
-      />
-    </form>
-    `,
-  }),
-  args: {
-    radioGroupName: 'test',
-    items: [
-      { id: 'true', value: 'Yes' },
-      { id: 'false', value: 'No' },
-    ],
-    label: 'Save item?',
-    required: true,
-    tooltip: 'This is a tooltip lorem ipsum',
-    testId: 'radioButtonTestId',
-  },
-  play: async ({ canvasElement }: any) => {
-    const canvas = within(canvasElement);
-    expect(canvas.getByText('Save item?')).toBeTruthy();
-    expect(canvas.getByText('Yes')).toBeTruthy();
-    expect(canvas.getByText('No')).toBeTruthy();
-    expect(canvas.queryAllByText('This is a tooltip lorem ipsum')).toBeTruthy();
-    expect(canvas.findByTestId('radioButtonTestId')).toBeTruthy();
-  },
-};

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

@@ -1,62 +0,0 @@
-import { CommonModule } from '@angular/common';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Input,
-  Optional,
-  Self,
-  ViewEncapsulation,
-} from '@angular/core';
-import {
-  ControlValueAccessor,
-  NgControl,
-  ReactiveFormsModule,
-} from '@angular/forms';
-import {
-  BaseFormInputComponent,
-  BaseInputControls,
-  RADIOBUTTON_COMPONENT_TOKEN,
-  RadiobuttonCore,
-  RadioButtonItem,
-} from '@verisoft/ui-core';
-import { RadioButtonModule } from 'primeng/radiobutton';
-import { ErrorComponent } from '../errors';
-import { FormFieldComponent } from '../form-field/form-field.component';
-
-@Component({
-  selector: 'v-radiobutton',
-  standalone: true,
-  imports: [
-    CommonModule,
-    FormFieldComponent,
-    RadioButtonModule,
-    ReactiveFormsModule,
-    ErrorComponent
-  ],
-  templateUrl: './radiobutton.component.html',
-  styleUrl: './radiobutton.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  providers: [
-    {
-      provide: BaseInputControls,
-      useExisting: RadioButtonComponent,
-    },
-    {
-      provide: RADIOBUTTON_COMPONENT_TOKEN,
-      useExisting: RadioButtonComponent,
-    },
-  ],
-})
-export class RadioButtonComponent<T>
-  extends BaseFormInputComponent
-  implements ControlValueAccessor, RadiobuttonCore<T>
-{
-  constructor(@Optional() @Self() ngControl: NgControl) {
-    super(ngControl);
-  }
-
-  @Input() radioGroupName = Math.random().toString();
-
-  @Input() items: RadioButtonItem<T>[] = [];
-}

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

@@ -1,23 +0,0 @@
-<div class="v-section">
-  <div
-    class="v-section-header text-align-center d-flex"
-    [ngStyle]="{ 'background-color': backgroundColor }"
-  >
-    <p
-      class="text-primary align-items-center text-nowrap d-none d-md-block ps-3 m-0 w-100"
-    >
-      {{ title }}
-    </p>
-    <div class="d-flex">
-      <ng-content select="[actions]"></ng-content>
-      <v-button
-        size="small"
-        [icon]="icon"
-        (click)="toggle()"
-      />
-    </div>
-  </div>
-  <div class="v-section-content" *ngIf="showContent">
-    <ng-content></ng-content>
-  </div>
-</div>

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

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

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

@@ -1,32 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { SECTION_COMPONENT_TOKEN, SectionCore } from '@verisoft/ui-core';
-import { Icons } from '../../icons';
-import { ButtonComponent } from '../button';
-
-@Component({
-  selector: 'v-section',
-  standalone: true,
-  imports: [CommonModule, ButtonComponent],
-  templateUrl: './section.component.html',
-  styleUrl: './section.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    { provide: SECTION_COMPONENT_TOKEN, useExisting: SectionComponent },
-  ],
-})
-export class SectionComponent 
-  implements SectionCore
-{
-  @Input() title!: string;
-  @Input() showContent = true;
-  @Input() backgroundColor!: string;
-
-  icons = Icons;
-  protected icon = Icons.chevronDown;
-
-  protected toggle(): void {
-    this.showContent = !this.showContent;
-    this.icon = this.showContent ? Icons.chevronDown : Icons.chevronUp;
-  }
-}

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

@@ -1,27 +0,0 @@
-<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

@@ -1,21 +0,0 @@
-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

@@ -1,114 +0,0 @@
-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

@@ -1,11 +0,0 @@
-<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

@@ -1,21 +0,0 @@
-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

@@ -1,71 +0,0 @@
-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/src/lib/components/shared-components/dynamic-component/dynamic-component-factory.service.ts

@@ -1,142 +0,0 @@
-/* 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);
-      }
-    }
-  }
-}