@verisoft/ui-primeng 20.1.1 → 20.1.3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/test-setup.ts

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

@@ -1,29 +0,0 @@
-{
-  "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

@@ -1,18 +0,0 @@
-{
-  "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"]
-}