@verisoft/ui-primeng 18.0.0

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

@@ -0,0 +1,62 @@
+import { CommonModule } from '@angular/common';
+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 { InputTextareaModule } from 'primeng/inputtextarea';
+import { FormFieldComponent } from '../form-field/form-field.component';
+
+@Component({
+  selector: 'v-textarea',
+  standalone: true,
+  imports: [
+    CommonModule,
+    InputTextareaModule,
+    ReactiveFormsModule,
+    FormFieldComponent,
+    FloatLabelModule,
+  ],
+  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,83 @@
+<div class="v-text-field">
+  <ng-container *ngIf="!floatLabel && label; else floatLabelInput">
+    <v-form-field
+      class="w-100"
+      [label]="label"
+      [tooltip]="tooltip"
+      [required]="isRequired()"
+      [ngControl]="ngControl"
+      [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'
+          }"
+        />
+        <ng-container *ngIf="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>
+        </ng-container>
+      </span>
+    </v-form-field>
+  </ng-container>
+  <ng-template #floatLabelInput>
+    <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>
+      <ng-container *ngIf="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>
+      </ng-container>
+    </span>
+  </ng-template>
+</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,64 @@
+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 { FormFieldComponent } from '../form-field/form-field.component';
+
+@Component({
+  selector: 'v-textfield',
+  standalone: true,
+  imports: [
+    CommonModule,
+    InputTextModule,
+    ReactiveFormsModule,
+    FormFieldComponent,
+    FloatLabelModule,
+  ],
+  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
+{
+  constructor(@Optional() @Self() ngControl: NgControl) {
+    super(ngControl);
+  }
+
+  @Input() size?: FieldSizeType = FieldSize.medium;
+  @Input() type: FieldTypeType = FieldType.text;
+  @Input() floatLabel = false;
+}

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

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

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

@@ -0,0 +1,23 @@
+<div class="v-tristatecheckbox d-flex align-items-center mt-2">
+  <v-form-field
+    class="w-100"
+    [label]="label"
+    [tooltip]="tooltip"
+    [required]="isRequired()"
+    [ngControl]="ngControl"
+    [testId]="testId"
+    [display]="formDisplay"
+  >
+    <p-triStateCheckbox
+      [ngClass]="{
+        'tristate-error':
+          ngControl?.invalid && ngControl?.dirty && ngControl?.value === false
+      }"
+      [formControl]="formControl"
+      [required]="required"
+      [readonly]="readonly"
+      [inputId]="testId"
+      checkboxFalseIcon="pi pi-minus"
+    />
+  </v-form-field>
+</div>

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

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

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

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { within, expect } from '@storybook/test';
+import { TristatecheckboxComponent } from './tristatecheckbox.component';
+
+const meta: Meta<TristatecheckboxComponent> = {
+  component: TristatecheckboxComponent,
+  title: 'VerisoftTristatecheckboxComponent',
+};
+export default meta;
+type Story = StoryObj<TristatecheckboxComponent>;
+
+export const Primary: Story = {
+  args: {},
+};
+
+export const Heading: Story = {
+  args: {},
+  play: async ({ canvasElement }: any) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByText(/verisoft-tristatecheckbox works!/gi)).toBeTruthy();
+  },
+};

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

@@ -0,0 +1,46 @@
+import { CommonModule } from '@angular/common';
+import { Component, Optional, Self } from '@angular/core';
+import {
+  ControlValueAccessor,
+  NgControl,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import {
+  BaseFormInputComponent,
+  BaseInputControls,
+  TRISTATE_CHECKBOX_COMPONENT_TOKEN,
+  TristateCheckboxCore,
+} from '@verisoft/ui-core';
+import { TriStateCheckboxModule } from 'primeng/tristatecheckbox';
+import { FormFieldComponent } from '../form-field';
+
+@Component({
+  selector: 'v-tristatecheckbox',
+  standalone: true,
+  imports: [
+    CommonModule,
+    TriStateCheckboxModule,
+    ReactiveFormsModule,
+    FormFieldComponent,
+  ],
+  templateUrl: './tristatecheckbox.component.html',
+  styleUrl: './tristatecheckbox.component.scss',
+  providers: [
+    {
+      provide: BaseInputControls,
+      useExisting: TristatecheckboxComponent,
+    },
+    {
+      provide: TRISTATE_CHECKBOX_COMPONENT_TOKEN,
+      useExisting: TristatecheckboxComponent,
+    },
+  ],
+})
+export class TristatecheckboxComponent
+  extends BaseFormInputComponent
+  implements ControlValueAccessor, TristateCheckboxCore
+{
+  constructor(@Optional() @Self() ngControl: NgControl) {
+    super(ngControl);
+  }
+}

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,27 @@
+<div class="v-not-found">
+  <div class="error-message p-4">
+    <h1 class="text-primary">404 - PAGE NOT FOUND</h1>
+    <p class="text-default">
+      This is not the page you are looking for.<br />Try searching for something
+      else.
+    </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,17 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ButtonComponent } from '../../components/button';
+
+@Component({
+  selector: 'v-not-found-page',
+  standalone: true,
+  imports: [CommonModule, ButtonComponent],
+  templateUrl: './not-found-page.component.html',
+  styleUrl: './not-found-page.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NotFoundPageComponent {
+  navigationBack() {
+    history.back();
+  }
+}

package/src/lib/services/screen-size.service.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ScreenSizeService {
+  isMobileBlock = new BehaviorSubject<boolean>(false);
+  prevState = false;
+
+  constructor() {
+    this.checkScreenSize();
+    window.addEventListener('resize', async () => {
+      await this.checkScreenSize();
+    });
+  }
+
+  async checkScreenSize() {
+    const isMobile = window.matchMedia('(max-width: 768px)').matches;
+    if (isMobile !== this.prevState) {
+      this.prevState = isMobile;
+      this.isMobileBlock.next(isMobile);
+    }
+  }
+}

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"]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}