@verisoft/ui-primeng 19.0.1-1 → 20.1.0

package/src/lib/components/page-header/page-header.component.ts

@@ -0,0 +1,31 @@
+
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ContentChild,
+  OnInit,
+} from '@angular/core';
+import { PAGE_HEADER_COMPONENT_TOKEN, PageHeaderCore, PageHeaderCoreComponent } from '@verisoft/ui-core';
+import { Icons } from '../../icons';
+import { ButtonComponent } from '../button';
+import { ActionButtonGroupComponent } from '../shared-components';
+
+@Component({
+    selector: 'v-page-header',
+    imports: [ButtonComponent],
+    templateUrl: './page-header.component.html',
+    styleUrl: './page-header.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        { provide: PAGE_HEADER_COMPONENT_TOKEN, useExisting: PageHeaderComponent },
+    ]
+})
+export class PageHeaderComponent
+  extends PageHeaderCoreComponent
+  implements OnInit, PageHeaderCore
+{
+  @ContentChild(ActionButtonGroupComponent)
+  buttonGroup?: ActionButtonGroupComponent;
+  
+  icons = Icons;
+}

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

@@ -0,0 +1,24 @@
+<div class="v-password d-flex align-items-center">
+  <v-form-field
+    class="w-100"
+    [label]="label"
+    [tooltip]="tooltip"
+    [required]="isRequired()"
+    [testId]="testId"
+    [display]="formDisplay"
+  >
+    <p-password
+      [style]="{'width':'100%'}"
+      [inputStyle]="{'width':'100%'}" 
+      [formControl]="formControl"
+      [placeholder]="placeholder"
+      [showClear]="clearable"
+      [feedback]="feedback"
+      [required]="isRequired()"
+      [label]="label"
+      [id]="inputId"
+      [toggleMask]="toggleMask"
+    />
+    <v-validation-message [ngControl]="ngControl"></v-validation-message>
+  </v-form-field>
+</div>

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

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

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

@@ -0,0 +1,56 @@
+
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  Optional,
+  Self,
+} from '@angular/core';
+import {
+  ControlValueAccessor,
+  NgControl,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { BaseFormInputComponent, BaseInputControls, PASSWORD_COMPONENT_TOKEN, PasswordCore } from '@verisoft/ui-core';
+import { FloatLabelModule } from 'primeng/floatlabel';
+import { PasswordModule } from 'primeng/password';
+import { ErrorComponent } from '../errors';
+import { FormFieldComponent } from '../form-field';
+
+@Component({
+    selector: 'v-password',
+    imports: [
+    ReactiveFormsModule,
+    PasswordModule,
+    FloatLabelModule,
+    FormFieldComponent,
+    ErrorComponent
+],
+    templateUrl: './password.component.html',
+    styleUrl: './password.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: BaseInputControls,
+            useExisting: PasswordComponent,
+        },
+        {
+            provide: PASSWORD_COMPONENT_TOKEN,
+            useExisting: PasswordComponent,
+        },
+    ]
+})
+export class PasswordComponent 
+  extends BaseFormInputComponent
+  implements ControlValueAccessor, PasswordCore
+{
+  @Input() toggleMask = true;
+  
+  @Input() feedback = false;
+
+  override formDisplay: "flex" | "block" = "block";
+
+  constructor(@Optional() @Self() ngControl: NgControl) {
+    super(ngControl);
+  }
+}

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

@@ -0,0 +1,34 @@
+<div class="v-radiobutton">
+  <v-form-field
+    [label]="label"
+    [required]="required"
+    [tooltip]="tooltip"
+    [testId]="testId"
+    >
+    <div class="d-flex align-items-center gap-3">
+      @for (item of items; track item) {
+        <div>
+          <p-radioButton
+            [inputId]="item.id"
+          [ngClass]="{
+                    'radio-error': ngControl?.invalid && ngControl?.dirty,
+                    }"
+            [name]="radioGroupName"
+            [value]="item.value"
+            [formControl]="formControl"
+            />
+          <label [for]="item.id" class="ps-2">
+            <span
+            [ngClass]="{
+              'text-error': ngControl?.invalid && ngControl?.dirty,
+              'text-primary': ngControl?.value === item.value
+            }"
+              >{{ item.value }}</span
+              >
+            </label>
+          </div>
+        }
+        <v-validation-message [ngControl]="ngControl"></v-validation-message>
+      </div>
+    </v-form-field>
+  </div>

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

@@ -0,0 +1,6 @@
+.radio-error {
+  .p-radiobutton .p-radiobutton-box.p-highlight {
+    border-color: var(--error-color);
+    background: var(--error-color);
+  }
+}

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

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

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

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

@@ -0,0 +1,25 @@
+<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>
+  @if (showContent) {
+    <div class="v-section-content">
+      <ng-content></ng-content>
+    </div>
+  }
+</div>

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

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

@@ -0,0 +1,31 @@
+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',
+    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/.eslintrc.json

@@ -0,0 +1,42 @@
+{
+  "extends": ["../../../../../../../.eslintrc.base.json"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "v",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "v",
+            "style": "kebab-case"
+          }
+        ],
+        "no-restricted-imports": [
+          "error",
+          {
+            "paths": [
+              {
+                "name": "primeng",
+                "message": "Import PrimeNG není povolen v @verisoft/ui-govcz."
+              }
+            ],
+            "patterns": ["primeng/*", "@verisoft/ui-primeng"]
+          }
+        ]
+      }
+    }
+  ]
+}

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

@@ -0,0 +1,25 @@
+<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-dropdown-button
+      [label]="label"
+      [icon]="menuIcon"
+      [items]="menuItems"
+    />
+    }
+  </div>
+</div>

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,111 @@
+import {
+  AfterContentInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ContentChildren,
+  Input,
+  QueryList,
+} from '@angular/core';
+import {
+  ACTION_BUTTON_GROUP_COMPONENT_TOKEN,
+  ActionButton,
+  ActionButtonGroupCore,
+  IconPositionType,
+  MenuItem,
+  queryListChanged,
+  ScreenSizeService,
+  UnsubscribeComponent,
+} from '@verisoft/ui-core';
+import {
+  combineLatestWith,
+  takeUntil,
+} from 'rxjs';
+import { Icons } from '../../../icons';
+import { DropdownButtonComponent } from '../../dropdown-button';
+import { ActionButtonComponent } from './components/action-button/action-button.component';
+
+@Component({
+  selector: 'v-action-button-group',
+  imports: [ActionButtonComponent, DropdownButtonComponent],
+  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,10 @@
+<v-button
+  [label]="label"
+  [disabled]="disabled"
+  [icon]="icon"
+  [outlined]="outlined"
+  tooltipPosition="bottom"
+  [size]="size"
+  [severity]="severity"
+  (click)="handleClick($event)"
+/>

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();
+  });
+});