@verisoft/ui-primeng 20.0.0 → 20.1.1

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

@@ -0,0 +1,98 @@
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { TextareaComponent } from './textarea.component';
+
+const meta: Meta<TextareaComponent> = {
+  component: TextareaComponent,
+  title: 'TextareaComponent',
+  decorators: [
+    moduleMetadata({
+      imports: [ReactiveFormsModule],
+    }),
+  ],
+};
+export default meta;
+type Story = StoryObj<TextareaComponent>;
+const formGroup = new FormGroup({
+  textarea: new FormControl(''),
+});
+
+export const Primary: Story = {
+  render: (args: any) => ({
+    props: {
+      ...args,
+      formGroup,
+    },
+    template: `
+    <form [formGroup]="formGroup">
+      <v-textarea
+        formControlName="textarea"
+        [label]="label"
+        [rows]="rows"
+        [cols]="cols"
+        [disabled]="disabled"
+        [readonly]="readonly"
+        [required]="required"
+        [tooltip]="tooltip"
+        [placeholder]="placeholder"
+        [testId]="testId"
+        [formDisplay]="formDisplay"
+        [autoResize]="autoResize"
+      ></v-textarea>
+    </form>
+    `,
+  }),
+  args: {
+    label: 'Description',
+    rows: 5,
+    cols: 30,
+    formDisplay: 'block',
+    autoResize: false,
+    required: false,
+    disabled: false,
+    readonly: false,
+    placeholder:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+    testId: 'testId',
+    tooltip: 'This is a tooltip lorem ipsum',
+  },
+  argTypes: {
+    formDisplay: {
+      options: ['block', 'flex'],
+      control: { type: 'radio' },
+      description:
+        'Defines if the **TextareaComponent** is in `flex` or `block` display mode',
+    },
+    label: {
+      description:
+        'Label shown on the (top)left side of the **TextareaComponent** input',
+    },
+    rows: {
+      description: 'Number of `rows` of the **TextareaComponent** input',
+    },
+    cols: {
+      description: 'Number of `columns` of the **TextareaComponent** input',
+    },
+    tooltip: { description: 'Tooltip text of the **TextareaComponent**' },
+    required: {
+      description: 'Defines if the **TextareaComponent** is `required`',
+    },
+    autoResize: {
+      description:
+        'Defines if the **TextareaComponent** should be auto-resized',
+    },
+    disabled: {
+      description: 'Defines if the **TextareaComponent** is `disabled`',
+    },
+    readonly: {
+      description: 'Defines if the **TextareaComponent** is `readonly`',
+    },
+    testId: { description: 'Test ID of the **TextareaComponent**' },
+    placeholder: {
+      description: 'Placeholder text for the **TextareaComponent**',
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};

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

@@ -0,0 +1,62 @@
+
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  Optional,
+  Self,
+} from '@angular/core';
+import {
+  ControlValueAccessor,
+  NgControl,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { BaseFormInputComponent, BaseInputControls, TEXTAREA_COMPONENT_TOKEN, TextareaCore } from '@verisoft/ui-core';
+import { FloatLabelModule } from 'primeng/floatlabel';
+import { Textarea } from 'primeng/textarea';
+import { ErrorComponent } from '../errors';
+import { FormFieldComponent } from '../form-field/form-field.component';
+
+@Component({
+    selector: 'v-textarea',
+    imports: [
+    Textarea,
+    ReactiveFormsModule,
+    FormFieldComponent,
+    FloatLabelModule,
+    ErrorComponent
+],
+    templateUrl: './textarea.component.html',
+    styleUrl: './textarea.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: BaseInputControls,
+            useExisting: TextareaComponent,
+        },
+        {
+            provide: TEXTAREA_COMPONENT_TOKEN,
+            useExisting: TextareaComponent,
+        },
+    ]
+})
+export class TextareaComponent
+  extends BaseFormInputComponent
+  implements ControlValueAccessor, TextareaCore
+{
+  @Input()
+  rows = 5;
+
+  @Input()
+  cols = 30;
+
+  @Input()
+  autoResize = false;
+
+  @Input()
+  floatLabel: string | undefined;
+
+  constructor(@Optional() @Self() ngControl: NgControl) {
+    super(ngControl);
+  }
+}

package/src/lib/components/textfield/index.ts

@@ -0,0 +1 @@
+export * from './textfield.component';

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

@@ -0,0 +1,82 @@
+<div class="v-text-field">
+  @if (!floatLabel && label) {
+    <v-form-field
+      class="w-100"
+      [label]="label"
+      [tooltip]="tooltip"
+      [required]="isRequired()"
+      [testId]="testId"
+      [display]="formDisplay"
+      >
+      <span
+        class="w-100 flex-grow-1"
+        [ngClass]="{ 'p-input-icon-right': type === 'search' }"
+        >
+        <input
+          pInputText
+          [id]="inputId"
+          [formControl]="formControl"
+          [type]="type === 'search' ? 'text' : type"
+          class="w-100 flex-grow-1 v-text-field"
+          [required]="isRequired()"
+          [readOnly]="readonly"
+          [title]="label"
+          [placeholder]="placeholder ? placeholder : ''"
+          [ngClass]="{
+            'p-inputtext-sm': size === 'small',
+            'p-inputtext-lg': size === 'large'
+          }"
+          />
+        @if (type === 'search') {
+          <i
+            class="pi ms-2 v-text-field__icon"
+            [ngStyle]="{
+              cursor: ngControl && ngControl.value ? 'pointer' : 'default'
+            }"
+            [ngClass]="{
+              'pi-search': ngControl && !ngControl.value,
+              'pi-times': ngControl && ngControl.value,
+            }"
+            (click)="ngControl && ngControl.value ? ngControl.reset() : null"
+          ></i>
+        }
+      </span>
+    </v-form-field>
+    <v-validation-message [ngControl]="ngControl"></v-validation-message>
+  } @else {
+    <span
+      class="w-100 flex-grow-1"
+      [ngClass]="{ 'p-input-icon-right': type === 'search' }"
+      >
+      <p-floatLabel>
+        <input
+          pInputText
+          type="text"
+          [id]="inputId"
+          class="w-100 flex-grow-1"
+          [required]="isRequired()"
+          [formControl]="formControl"
+          [placeholder]="placeholder ? placeholder : ''"
+          [ngClass]="{
+            'p-inputtext-sm': size === 'small',
+            'p-inputtext-lg': size === 'large'
+          }"
+          />
+        <label [for]="inputId" class="v-text-field__label">{{ label }}</label>
+      </p-floatLabel>
+      @if (type === 'search') {
+        <i
+          class="pi ms-2 v-text-field__icon"
+          [ngStyle]="{
+            cursor: ngControl && ngControl.value ? 'pointer' : 'default'
+          }"
+          [ngClass]="{
+            'pi-search': ngControl && !ngControl.value,
+            'pi-times': ngControl && ngControl.value,
+          }"
+          (click)="ngControl && ngControl.value ? ngControl.reset() : null"
+        ></i>
+      }
+    </span>
+  }
+</div>

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

@@ -0,0 +1,23 @@
+.p-inputtext:focus .ng-invalid.ng-dirty {
+  border-color: var(--error-color);
+}
+
+.p-inputtext.ng-dirty.ng-invalid {
+  border-color: var(--error-color);
+}
+
+.verisoft-text-field {
+  justify-content: center;
+  width: 100%;
+}
+
+.p-input-icon-right {
+  i.pi-times:hover {
+    cursor: pointer;
+  }
+}
+
+.p-inputtext.p-inputtext-lg {
+  font-size: 1rem;
+  padding: 0.75rem;
+}

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

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

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

@@ -0,0 +1,85 @@
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { FieldSize, FieldType } from '@verisoft/ui-core';
+import { TextfieldComponent } from './textfield.component';
+
+const meta: Meta<TextfieldComponent> = {
+  component: TextfieldComponent,
+  title: 'TextfieldComponent',
+  decorators: [
+    moduleMetadata({
+      imports: [ReactiveFormsModule],
+    }),
+  ],
+};
+export default meta;
+type Story = StoryObj<TextfieldComponent>;
+const formGroup = new FormGroup({
+  formField: new FormControl(''),
+});
+export const Primary: Story = {
+  render: (args: any) => ({
+    props: {
+      ...args,
+      formGroup,
+    },
+    template: `
+    <form [formGroup]="formGroup">
+      <v-textfield
+        formControlName="formField"
+        [label]="label"
+        [size]="size"
+        [type]="type"
+        [disabled]="disabled"
+        [readonly]="readonly"
+        [required]="required"
+        [tooltip]="tooltip"
+        [placeholder]="placeholder"
+        [testId]="testId"
+      ></v-textfield>
+    </form>
+    `,
+  }),
+  args: {
+    label: 'Description',
+    size: FieldSize.medium,
+    type: FieldType.text,
+    required: false,
+    disabled: false,
+    readonly: false,
+    placeholder:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+    testId: 'testId',
+    tooltip: 'This is a tooltip lorem ipsum',
+  },
+  argTypes: {
+    size: {
+      options: ['small', 'medium', 'large'],
+      control: { type: 'radio' },
+      description: 'Defines the size of the `TextfieldComponent`',
+    },
+    type: {
+      options: ['text', 'number', 'password', 'search'],
+      control: { type: 'radio' },
+      description: 'Defines the type of the `TextfieldComponent`',
+    },
+    label: {
+      description:
+        'Label shown on the left side of the `TextfieldComponent` input',
+    },
+    tooltip: { description: 'Tooltip text of the `TextfieldComponent`' },
+    required: {
+      description: 'Defines if the `TextfieldComponent` is `required`',
+    },
+    disabled: {
+      description: 'Defines if the `TextfieldComponent` is `disabled`',
+    },
+    readonly: {
+      description: 'Defines if the `TextfieldComponent` is `readonly`',
+    },
+    testId: { description: 'Test ID of the `TextfieldComponent`' },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};

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

@@ -0,0 +1,68 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  forwardRef,
+  Input,
+  Optional,
+  Self,
+} from '@angular/core';
+import {
+  ControlValueAccessor,
+  NgControl,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import {
+  BaseFormInputComponent,
+  BaseInputControls,
+  FieldSize,
+  FieldSizeType,
+  FieldType,
+  FieldTypeType,
+  TEXTFIELD_COMPONENT_TOKEN,
+  TextfieldCore,
+} from '@verisoft/ui-core';
+import { FloatLabelModule } from 'primeng/floatlabel';
+import { InputTextModule } from 'primeng/inputtext';
+import { Icons } from '../../icons';
+import { ErrorComponent } from '../errors';
+import { FormFieldComponent } from '../form-field/form-field.component';
+
+@Component({
+    selector: 'v-textfield',
+    imports: [
+        CommonModule,
+        InputTextModule,
+        ReactiveFormsModule,
+        FormFieldComponent,
+        FloatLabelModule,
+        ErrorComponent
+    ],
+    templateUrl: './textfield.component.html',
+    styleUrl: './textfield.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: BaseInputControls,
+            useExisting: forwardRef(() => TextfieldComponent),
+        },
+        {
+            provide: TEXTFIELD_COMPONENT_TOKEN,
+            useExisting: TextfieldComponent,
+        },
+    ]
+})
+export class TextfieldComponent
+  extends BaseFormInputComponent
+  implements ControlValueAccessor, TextfieldCore
+{
+  icons = Icons;
+  
+  constructor(@Optional() @Self() ngControl: NgControl) {
+    super(ngControl);
+  }
+
+  @Input() size: FieldSizeType | undefined = FieldSize.medium;
+  @Input() type: FieldTypeType = FieldType.text;
+  @Input() floatLabel = false;
+}

package/src/lib/components/tooltip/index.ts

@@ -0,0 +1 @@
+export * from './tooltip.component';

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

@@ -0,0 +1,3 @@
+<div class="d-inline-block v-tooltip" [pTooltip]="tooltipText()" [tooltipPosition]="position()">
+    <ng-content></ng-content>
+</div>

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

@@ -0,0 +1,17 @@
+import { Component, input } from "@angular/core";
+import { ControlSeverityType, FieldSizeType, PositionType, TooltipCore } from "@verisoft/ui-core";
+import { TooltipModule } from "primeng/tooltip";
+
+@Component({
+    selector: "v-tooltip",
+    templateUrl: './tooltip.component.html',
+    imports: [
+        TooltipModule,
+    ]
+})
+export class TooltipComponent implements TooltipCore {
+    color = input<ControlSeverityType | undefined>(undefined);
+    position = input<PositionType | undefined>(undefined);
+    size = input<FieldSizeType | undefined>(undefined);
+    tooltipText = input<string | undefined>(undefined);
+}

package/src/lib/icons.ts

@@ -0,0 +1,36 @@
+import { CommonIcons } from '@verisoft/ui-core';
+
+export const Icons: CommonIcons = {
+  add: 'pi pi-plus',
+  minus: 'pi pi-minus',
+  delete: 'pi pi-trash',
+  filter: 'pi pi-filter',
+  download: 'pi pi-download',
+  save: 'pi pi-save',
+  print: 'pi pi-print',
+  calendar: 'pi pi-calendar',
+  edit: 'pi pi-pencil',
+  settings: 'pi pi-cog',
+  house: 'pi pi-home',
+  chevronRight: 'pi pi-chevron-right',
+  chevronLeft: 'pi pi-chevron-left',
+  chevronDown: 'pi pi-chevron-down',
+  chevronUp: 'pi pi-chevron-up',
+  checkbox: 'pi pi-check',
+  warning: 'pi pi-exclamation-triangle',
+  search: 'pi pi-search',
+  action: 'pi pi-bars',
+  user: 'pi pi-user',
+  logout: 'pi pi-user',
+  crossCircle: 'pi pi-times-circle',
+  infoCircle: 'pi pi-info-circle',
+  cross: 'pi pi-times',
+  arrowLeft: 'pi pi-arrow-left',
+  arrowRight: 'pi pi-arrow-right',
+  questionCircle: 'pi pi-question-circle',
+  checkCircle: 'pi pi-check-circle',
+  sitemap: 'pi pi-sitemap',
+  check: 'pi pi-check',
+  envelope: 'pi pi-envelope',
+  loader: 'pi pi-loader',
+};

package/src/lib/interceptors/http-error-message.interceptor.ts

@@ -0,0 +1,35 @@
+import {
+  HttpErrorResponse,
+  HttpEvent,
+  HttpHandler,
+  HttpInterceptor,
+  HttpRequest,
+} from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { catchError, Observable, throwError } from 'rxjs';
+import { SnackbarService } from '../components/snackbar';
+
+@Injectable()
+export class HttpErrorMessageInterceptor implements HttpInterceptor {
+  constructor(private readonly snackbarService: SnackbarService) {}
+  intercept(
+    req: HttpRequest<any>,
+    next: HttpHandler
+  ): Observable<HttpEvent<any>> {
+    return next.handle(req).pipe(
+      catchError((errorResponse: HttpErrorResponse) => {
+        if (!errorResponse.ok) {
+          if (errorResponse.status === 403) {
+            this.snackbarService.showError('Unauthorized request');
+            console.error('Unauthorized request');
+          } else {
+            this.snackbarService.showError(errorResponse.message);
+            console.error(errorResponse);
+          }
+        }
+
+        return throwError(() => errorResponse);
+      })
+    );
+  }
+}

package/src/lib/pages/not-found-page/not-found-page.component.html

@@ -0,0 +1,26 @@
+<div class="v-not-found">
+  <div class="error-message p-4">
+    <h1 class="text-primary">404 - PAGE NOT FOUND</h1>
+    <p class="text-default">
+      Sorry, the page you are looking for does not exist or has been moved.
+    </p>
+    <v-button
+      class="back-button"
+      size="small"
+      label="Take me back"
+      (click)="navigationBack()"
+    />
+  </div>
+  <div class="images">
+    <img
+      src="assets/images/_global/hafan.jpeg"
+      alt="Dog Image"
+      class="dog-image"
+    />
+    <img
+      src="assets/images/_global/bouda.png"
+      alt="House Image"
+      class="house-image"
+    />
+  </div>
+</div>

package/src/lib/pages/not-found-page/not-found-page.component.spec.ts

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

package/src/lib/pages/not-found-page/not-found-page.component.ts

@@ -0,0 +1,16 @@
+
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ButtonComponent } from '../../components/button';
+
+@Component({
+    selector: 'v-not-found-page',
+    imports: [ButtonComponent],
+    templateUrl: './not-found-page.component.html',
+    styleUrl: './not-found-page.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class NotFoundPageComponent {
+  navigationBack() {
+    history.back();
+  }
+}

package/src/tab-view.ts

@@ -0,0 +1 @@
+export * from './lib/components/tab-view';

package/src/test-setup.ts

@@ -0,0 +1,8 @@
+// @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment
+globalThis.ngJest = {
+  testEnvironmentOptions: {
+    errorOnUnknownElements: true,
+    errorOnUnknownProperties: true,
+  },
+};
+import 'jest-preset-angular/setup-jest';

package/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "useDefineForClassFields": false,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../../tsconfig.base.json",
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

package/tsconfig.lib.json

@@ -0,0 +1,18 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "sourceMap": true,
+    "types": []
+  },
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/test-setup.ts",
+    "jest.config.ts",
+    "src/**/*.test.ts"
+  ],
+  "include": ["src/**/*.ts"]
+}