@corp-products/ui-components 0.0.1 → 1.0.0

package/src/lib/form-components/components/auto-complete/auto-complete.component.html

@@ -1,48 +0,0 @@
-<div class="field flex flex-col gap-2 my-3 relative">
-  @if (label) {
-    <label [for]="inputId">
-      {{ label }}
-      @if (required) {
-        <span [class.text-red-700]="isInvalid">*</span>
-      }
-    </label>
-  }
-  @if (!required) {
-    <span class="absolute top-[6px] left-0 text-[10px] text-gray-400">{{'forms.config.optional' | translate}}</span>
-  }
-  <p-auto-complete
-    (completeMethod)="search($event)"
-    (onSelect)="onSelect($event)"
-    [delay]="delay"
-    [disabled]="disabled"
-    [formControl]="control"
-    [id]="inputId"
-    [inputStyleClass]="'reset-default-styles w-full' + (basicInput ? ' basic-style': ' ')"
-    [minLength]="minLengthToSearch"
-    [name]="name"
-    [ngClass]="{ 'p-invalid ng-dirty ng-invalid': isInvalid}"
-    [placeholder]="placeholder"
-    [styleClass]="'w-full'"
-    [suggestions]="items">
-    <ng-template let-item pTemplate="item">
-      @if (selectedItemTemplate) {
-        <ng-container
-          [ngTemplateOutletContext]="{ $implicit: item }"
-          [ngTemplateOutlet]="selectedItemTemplate"
-        />
-      }
-    </ng-template>
-  </p-auto-complete>
-
-  @if (hint) {
-    <small class="p-mt-1">{{ hint }}</small>
-  }
-  @if (isInvalid && (control.dirty || control.touched)) {
-    <small class="p-error text-red-700">
-      @for (error of control.errors | validationErrors; track error) {
-        {{ error }}<br>
-      }
-    </small>
-  }
-
-</div>

package/src/lib/form-components/components/auto-complete/auto-complete.component.spec.ts

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

package/src/lib/form-components/components/auto-complete/auto-complete.component.ts

@@ -1,48 +0,0 @@
-import { JsonPipe, NgClass, NgIf, NgTemplateOutlet } from "@angular/common";
-import { Component, EventEmitter, Input, Output, TemplateRef } from "@angular/core";
-import { ReactiveFormsModule } from "@angular/forms";
-import { ValidationErrorsPipe } from "../../@utils/validations/validation-message.pipe";
-import { PrimeTemplate } from "primeng/api";
-import { AutoComplete, AutoCompleteCompleteEvent, AutoCompleteSelectEvent } from "primeng/autocomplete";
-import { BaseInputComponent } from "../base-input.component";
-import {TranslatePipe} from "@ngx-translate/core";
-
-@Component({
-  selector: "stc-auto-complete",
-  standalone: true,
-  imports: [
-    ReactiveFormsModule,
-    AutoComplete,
-    PrimeTemplate,
-    NgIf,
-    NgTemplateOutlet,
-    NgClass,
-    JsonPipe,
-    ValidationErrorsPipe,
-    TranslatePipe
-  ],
-  templateUrl: "./auto-complete.component.html",
-  styleUrl: "./auto-complete.component.scss"
-})
-export class AutoCompleteComponent extends BaseInputComponent {
-  @Input() selectedItemTemplate: TemplateRef<unknown> | null = null;
-  // eslint-disable-next-line @angular-eslint/no-output-on-prefix
-  @Output() onSearch: EventEmitter<string> = new EventEmitter<string>();
-  @Output() selectOption: EventEmitter<AutoCompleteSelectEvent> = new EventEmitter<AutoCompleteSelectEvent>();
-  @Input() items: any[] = [];
-  @Input() minLengthToSearch = 3;
-  @Input() delay = 300; // default value
-  @Input() basicInput!: boolean;
-
-  constructor() {
-    super();
-  }
-
-  search(event: AutoCompleteCompleteEvent) {
-    this.onSearch.emit(event.query);
-  }
-
-  onSelect(event: AutoCompleteSelectEvent) {
-    this.selectOption.emit(event);
-  }
-}

package/src/lib/form-components/components/base-input.component.ts

@@ -1,41 +0,0 @@
-import { Component, Input, OnDestroy, OnInit } from "@angular/core";
-import { FormControl, Validators } from "@angular/forms";
-import { Subject, takeUntil } from "rxjs";
-
-@Component({
-  template: ""
-})
-export abstract class BaseInputComponent implements OnInit, OnDestroy {
-  @Input({ required: true }) control!: FormControl;
-  @Input() name: string = "";
-  @Input() label?: string;
-  @Input() placeholder: string = "";
-  @Input() inputId!: string;
-  @Input() readonly: boolean = false;
-  @Input() disabled: boolean = false;
-  @Input() hint?: string;
-
-  protected destroy$ = new Subject<void>();
-
-  get required(): boolean {
-    return this.control.hasValidator(Validators.required);
-  }
-
-  get isInvalid(): boolean {
-    return this.control.invalid && this.control.touched;
-  }
-
-  ngOnInit() {
-    this.inputId = `input-${this.name + "-" + Math.random().toString(36).substring(7)}`;
-    this.control.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((v) => {
-      if (v) {
-        this.control.markAsTouched();
-      }
-    });
-  }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-}

package/src/lib/form-components/components/date-picker/date-picker.component.html

@@ -1,53 +0,0 @@
-<div class="field flex flex-col gap-2 my-3 relative"  >
-  @if (label) {
-  <label [for]="inputId">
-    {{ label }}
-    @if (required) {
-    <span [class.text-red-700]="isInvalid">*</span>
-    }
-  </label>
-  }
-  @if (!required) {
-  <span class="absolute top-[6px] left-0 text-[10px] text-gray-400">{{'forms.config.optional' | translate}}</span>
-  }
-  <p-datepicker
-    [selectionMode]="selectionMode"
-    [disabled]="disabled"
-    [formControl]="control"
-    [iconDisplay]="'input'"
-    [showClear]="showClear"
-    (onClear)="afterClearDate()"
-    [id]="inputId"
-    [inputStyleClass]="'reset-default-styles ' + (basicInput ? 'basic-style' : '')"
-    [ngClass]="{ 'p-invalid ng-dirty ng-invalid': isInvalid }"
-    [placeholder]="placeholder"
-    [showIcon]="showIcon" [styleClass]="'w-full'"
-    appendTo="body"
-    [timeOnly]="isTimeOnly"
-    [hourFormat]="hourFormat"
-    [minDate]="minDate"
-    [maxDate]="maxDate">
-    @if (isTimeOnly) {
-      <ng-template #inputicon let-clickCallBack="clickCallBack">
-        <i class="text-[18px] font-icon-time-clock" (click)="clickCallBack($event)"></i>
-      </ng-template>
-      <ng-template pTemplate="footer">
-        <div class="p-datepicker-buttonbar">
-          <button pButton type="button" class="p-button-text" (click)="selectCurrentTime($event)">الان
-          </button>
-          <button pButton type="button" class="p-button-text" (click)="clearButtonClick($event)"> الغاء</button>
-        </div>
-      </ng-template>
-    }
-  </p-datepicker>
-  @if (hint) {
-  <small class="p-mt-1">{{ hint }}</small>
-  }
-  @if (isInvalid && (control.dirty || control.touched)) {
-  <small class="p-error text-red-700">
-    @for (error of control.errors | validationErrors; track error) {
-    {{ error }}<br>
-    }
-  </small>
-  }
-</div>

package/src/lib/form-components/components/date-picker/date-picker.component.scss

@@ -1,4 +0,0 @@
-.p-datepicker-clear-icon {
-    @apply cursor-pointer absolute top-[50%] left-[13px] -translate-y-1/2 text-[var(--p-datepicker-input-icon-color)] ml-[calc(var(--p-icon-size))] leading-none;
-}
-

package/src/lib/form-components/components/date-picker/date-picker.component.spec.ts

@@ -1,23 +0,0 @@
-import {ComponentFixture, TestBed} from '@angular/core/testing';
-import {
-  DatePickerComponent
-} from 'nx-BOD-workspace/libs/ui-components/src/lib/form-components/components/date-picker/date-picker.component';
-
-describe('DatePickerComponent', () => {
-  let component: DatePickerComponent;
-  let fixture: ComponentFixture<DatePickerComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [DatePickerComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(DatePickerComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/form-components/components/date-picker/date-picker.component.ts

@@ -1,45 +0,0 @@
-import { NgClass } from "@angular/common";
-import { Component, EventEmitter, Input, Output, ViewEncapsulation } from "@angular/core";
-import { FormsModule, ReactiveFormsModule } from "@angular/forms";
-import { ValidationErrorsPipe } from "../../@utils/validations/validation-message.pipe";
-import { DatePicker } from "primeng/datepicker";
-import { BaseInputComponent } from "../base-input.component";
-import { CalendarModule } from "primeng/calendar";
-import {TranslatePipe} from "@ngx-translate/core";
-@Component({
-  selector: "stc-date-picker",
-  standalone: true,
-  imports: [FormsModule, DatePicker, ReactiveFormsModule, NgClass, CalendarModule, ValidationErrorsPipe, TranslatePipe],
-  templateUrl: "./date-picker.component.html",
-  styleUrl: "./date-picker.component.scss",
-  encapsulation: ViewEncapsulation.None
-})
-export class DatePickerComponent extends BaseInputComponent {
-  @Input() showIcon: boolean = false;
-  @Input() showClear: boolean = false;
-  @Input() basicInput!: boolean;
-  @Input() isTimeOnly: boolean = false;
-  @Input() minDate: Date | undefined | null;
-  @Input() maxDate: Date | undefined | null;
-  @Input() hourFormat: "12" | "24" = "12";
-  nowTime = new Date();
-  @Input() selectionMode: "single" | "range" = "single";
-  @Output() onAfterClearDate = new EventEmitter<void>();
-
-  constructor() {
-    super();
-  }
-
-  selectCurrentTime(e: any) {
-    this.control.setValue(this.nowTime);
-  }
-
-  clearButtonClick(e: any) {
-    this.control.setValue(null);
-  }
-
-  afterClearDate() {
-    this.control.reset();
-    this.onAfterClearDate.emit();
-  }
-}

package/src/lib/form-components/components/input/input.component.html

@@ -1,59 +0,0 @@
-<div class="field flex flex-col gap-2 my-3 relative">
-  @if (label) {
-    <label [for]="inputId">
-      {{ label }}
-      @if (required) {
-        <span [class.text-red-700]="isInvalid">*</span>
-      }
-    </label>
-  }
-  @if (!required && !hideOptionalLabel) {
-    <span class="absolute top-[6px] left-0 text-[10px] text-gray-400">{{'forms.config.optional' | translate}}</span>
-  }
-
-  <!-- input text align will be handled according to lang when implemented -->
-
-  @if (type !== 'textarea') {
-    <input
-      [id]="inputId"
-      [type]="contentType"
-      [formControl]="control"
-      [placeholder]="placeholder"
-      [readonly]="readonly"
-      [disabled]="disabled"
-      [name]="name"
-      pInputText
-      [ngStyle]="{'direction': inputDirection || 'inherit', 'text-align': 'right'}"
-      [ngClass]="{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}"
-    />
-    @if (prefix) {
-      <span class="absolute top-[40px] font-bold text-[16px] left-[25px]">
-       {{ prefix }}
-    </span>
-    }
-  } @else {
-    <textarea
-      [name]="name"
-      [id]="inputId"
-      [formControl]="control"
-      [placeholder]="placeholder"
-      [readonly]="readonly"
-      [disabled]="disabled"
-      pTextarea
-      [rows]="rows"
-      [cols]="cols"
-      [autoResize]="autoResize"
-      [ngClass]="{'ng-invalid ng-dirty': control.invalid && (control.dirty || control.touched), 'basic-style': basicInput, 'no-style':noStyle}"
-    ></textarea>
-  }
-  @if (hint) {
-    <small class="p-mt-1">{{ hint }}</small>
-  }
-  @if (isInvalid && (control.dirty || control.touched)) {
-    <small class="p-error text-red-700">
-      @for (error of control.errors | validationErrors; track error) {
-        {{ error }}<br>
-      }
-    </small>
-  }
-</div>

package/src/lib/form-components/components/input/input.component.scss

@@ -1,3 +0,0 @@
-textarea {
-    @apply h-auto min-h-[50px] overflow-auto;
-  }

package/src/lib/form-components/components/input/input.component.spec.ts

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

package/src/lib/form-components/components/input/input.component.ts

@@ -1,32 +0,0 @@
-import { NgClass, NgStyle } from "@angular/common";
-import { Component, Input } from "@angular/core";
-import { ReactiveFormsModule } from "@angular/forms";
-import { ValidationErrorsPipe } from "../../@utils/validations/validation-message.pipe";
-import { InputText } from "primeng/inputtext";
-import { Textarea } from "primeng/textarea";
-import { BaseInputComponent } from "../base-input.component";
-import {TranslatePipe} from "@ngx-translate/core";
-
-@Component({
-  selector: "stc-input",
-  standalone: true,
-  imports: [ReactiveFormsModule, InputText, Textarea, ValidationErrorsPipe, NgClass, NgStyle, TranslatePipe],
-  templateUrl: "./input.component.html",
-  styleUrl: "./input.component.scss"
-})
-export class InputComponent extends BaseInputComponent {
-  @Input() type: "text" | "textarea" = "text";
-  @Input() contentType: "text" | "email" | "number" = "text";
-  @Input() prefix: string;
-  @Input() rows = 2;
-  @Input() cols = 20;
-  @Input() autoResize = true;
-  @Input() basicInput!: boolean;
-  @Input() noStyle!: boolean;
-  @Input() hideOptionalLabel: boolean;
-  @Input() inputDirection: "ltr" | "rtl" | "inherit" = "inherit";
-
-  constructor() {
-    super();
-  }
-}

package/src/lib/form-components/components/select/select.component.html

@@ -1,90 +0,0 @@
-<div class="field flex flex-col gap-2 my-3 relative">
-  @if (label) {
-  <label [for]="inputId">
-    {{ label }}
-    @if (required) {
-    <span [class.text-red-700]="isInvalid">*</span>
-    }
-  </label>
-  } @if (!required) {
-  <span class="absolute top-[6px] left-0 text-[10px] text-gray-400">{{'forms.config.optional' | translate}}</span>
-  }
-
-
-  @if(multiple) {
-
-
-    <p-multiselect
-    [disabled]="disabled"
-    [filterBy]="filterBy"
-    [filter]="filter"
-    [formControl]="control"
-    [id]="inputId"
-    [name]="name"
-    [ngClass]="{ 'p-invalid ng-dirty ng-invalid': isInvalid }"
-    [optionLabel]="optionLabel"
-    [options]="options"
-    [placeholder]="placeholder"
-    [readonly]="readonly"
-    [showClear]="showClear"
-    class="w-full"
-    [selectedItemsLabel]="selectedItemsLabel"
-    (onChange)="onChange($event)"
-    [ngClass]="{ 'basic-style': basicInput }"
-     >
-
-
-     @if(optionTemplate){
-      <ng-template let-item #item>
-        <ng-container [ngTemplateOutletContext]="{ $implicit: item }" [ngTemplateOutlet]="optionTemplate" />
-      </ng-template>
-     }
-
-
-  <ng-template #dropdownicon>
-      <i class="pi pi-map"></i>
-  </ng-template>
-
-
-    </p-multiselect>
-
-  } @else {
-    <p-select
-      [checkmark]="checkmark"
-      [disabled]="disabled"
-      [editable]="editable"
-      [filterBy]="filterBy"
-      [filter]="filter"
-      [formControl]="control"
-      [id]="inputId"
-      [name]="name"
-      [ngClass]="{ 'p-invalid ng-dirty ng-invalid': isInvalid }"
-      [optionLabel]="optionLabel"
-      [options]="options"
-      [placeholder]="placeholder"
-      [readonly]="readonly"
-      [showClear]="showClear"
-      class="w-full"
-      (onChange)="onChange($event)"
-      [ngClass]="{ 'basic-style': basicInput }"
-    >
-
-
-    @if (selectedItemTemplate) {
-      <ng-template let-item pTemplate="item">
-        <ng-container [ngTemplateOutletContext]="{ $implicit: item }" [ngTemplateOutlet]="selectedItemTemplate" />
-      </ng-template>
-    }
-  </p-select>
-}
-
-  @if (hint) {
-  <small class="p-mt-1">{{ hint }}</small>
-  } @if (isInvalid && (control.dirty || control.touched)) {
-  <small class="p-error text-red-700">
-    @for (error of control.errors | validationErrors; track error) {
-    {{ error }}<br />
-    }
-  </small>
-  }
-</div>

package/src/lib/form-components/components/select/select.component.spec.ts

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

package/src/lib/form-components/components/select/select.component.ts

@@ -1,51 +0,0 @@
-import { NgClass, NgTemplateOutlet } from '@angular/common';
-import { Component, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
-import { PrimeTemplate } from 'primeng/api';
-import { ValidationErrorsPipe } from "../../@utils/validations";
-import { FormsModule, ReactiveFormsModule } from "@angular/forms";
-import { Select, SelectChangeEvent } from "primeng/select";
-import { BaseInputComponent } from "../base-input.component";
-import { MultiSelectModule } from 'primeng/multiselect';
-import {TranslatePipe} from "@ngx-translate/core";
-
-@Component({
-  selector: "stc-select",
-  standalone: true,
-  imports: [
-    FormsModule,
-    Select,
-    ReactiveFormsModule,
-    NgClass,
-    NgTemplateOutlet,
-    PrimeTemplate,
-    ValidationErrorsPipe,
-    MultiSelectModule,
-    TranslatePipe
-  ],
-  templateUrl: "./select.component.html",
-  styleUrl: "./select.component.scss"
-})
-export class SelectComponent extends BaseInputComponent {
-  @Input() selectedItemTemplate: TemplateRef<unknown> | null = null;
-  @Input() optionTemplate: TemplateRef<unknown> | null = null;
-  @Input() options: unknown[];
-  @Input() optionLabel!: string;
-  @Input() checkmark = true;
-  @Input() showClear = false;
-  @Input() editable = false;
-  @Input() filter = false;
-  @Input() multiple = false;
-  @Input() filterBy!: string;
-  @Input() selectedItemsLabel!: string;
-  @Input() basicInput!: boolean;
-  // eslint-disable-next-line @angular-eslint/no-output-native
-  @Output() change = new EventEmitter();
-
-  constructor() {
-    super();
-  }
-
-  onChange(e: SelectChangeEvent) {
-    this.change.emit(e);
-  }
-}

package/src/lib/form-components/components/select-button/select-button.component.html

@@ -1,21 +0,0 @@
-<div class="grid grid-cols-12 gap-x-4 gap-y-0 items-end">
-  <div class="col-span-12">
-    <div class="text-[14px] font-bold mb-1">{{ title }}</div>
-    <div class="grid w-100 bg-gray-100 rounded drop-shadow-basic">
-      <p-selectButton [disabled]="disabled"
-                      [options]="options"
-                      [formControl]="control"
-                      optionLabel="label"
-                      optionValue="value"
-                      class="rounded"
-                      [styleClass]="'full-width'"
-                      (onChange)="changeValue($event)">
-        <ng-template let-item class="flex w-100">
-          <div class="col-span-4">
-            <span>{{ item.value }}</span>
-          </div>
-        </ng-template>
-      </p-selectButton>
-    </div>
-  </div>
-</div>

package/src/lib/form-components/components/select-button/select-button.component.spec.ts

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

package/src/lib/form-components/components/select-button/select-button.component.ts

@@ -1,22 +0,0 @@
-import { Component, EventEmitter, Input, Output } from "@angular/core";
-import { SelectButtonChangeEvent, SelectButtonModule } from 'primeng/selectbutton';
-import { BaseInputComponent } from "../base-input.component";
-import { FormsModule, ReactiveFormsModule } from "@angular/forms";
-import {LabelValue} from "../../interfaces";
-
-@Component({
-  selector: "stc-select-button",
-  standalone: true,
-  imports: [ReactiveFormsModule, SelectButtonModule, FormsModule],
-  templateUrl: "./select-button.component.html",
-  styleUrl: "./select-button.component.scss"
-})
-export class SelectButtonComponent extends BaseInputComponent {
-  @Output() onChange: EventEmitter<any> = new EventEmitter<string>();
-  @Input() options: LabelValue<any>[];
-  @Input() title: string;
-
-  changeValue(e: SelectButtonChangeEvent) {
-    this.onChange.emit(e.value);
-  }
-}

package/src/lib/form-components/components/switcher/switch.component.html

@@ -1,5 +0,0 @@
-<div class="flex items-center mr-2">
-    <p-toggleswitch [(ngModel)]="checked" [inputId]="key" (onChange)="sendUpdatedValue($event)" class="flex">
-    </p-toggleswitch>
-    <label [for]="key" class="text-[12px] mx-2">{{label}}</label>
-</div>