@corp-products/ui-components 0.0.1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/lib/form-components/components/switcher/switch.component.spec.ts

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

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

@@ -0,0 +1,25 @@
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { ToggleSwitchModule } from 'primeng/toggleswitch';
+import { FormsModule } from "@angular/forms";
+
+@Component({
+  selector: "stc-switch",
+  standalone: true,
+  imports: [CommonModule, ToggleSwitchModule, FormsModule],
+  templateUrl: "./switch.component.html",
+  styleUrl: "./switch.component.scss"
+})
+export class SwitchComponent {
+  @Input() label: string;
+  @Input() key: string;
+  @Input() checked: boolean = false;
+  @Output() onChange: EventEmitter<string> = new EventEmitter<string>();
+  // checked: boolean = false;
+
+  sendUpdatedValue(value: any) {
+    if (value) {
+      this.onChange.emit(value.checked);
+    }
+  }
+}

package/src/lib/form-components/index.ts

@@ -0,0 +1,9 @@
+export * from "./components/input/input.component";
+export * from "./components/select/select.component";
+export * from "./components/date-picker/date-picker.component";
+export * from "./components/auto-complete/auto-complete.component";
+export * from "./components/select-button/select-button.component";
+export * from "./components/switcher/switch.component";
+export * from "./@utils/form-utils";
+export * from "./@utils/validations";
+export * from "./interfaces";

package/src/lib/form-components/interfaces/index.ts

@@ -0,0 +1 @@
+export * from "./label-value";

package/src/lib/form-components/interfaces/label-value.ts

@@ -0,0 +1,4 @@
+export interface LabelValue<T> {
+  label: string;
+  value: T | any;
+}

package/src/lib/ico-moon-icon/ico-moon-icon.component.ts

@@ -0,0 +1,23 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-ico-moon-card',
+  standalone: true,
+  template:`
+    <i [class]="iconName + ' ' + iconClass">
+      @for (path of getPathCount; track $index) {
+        <i [class]="iconName + ' path'+path"></i>
+      }
+    </i>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class IcoMoonIconComponent {
+  @Input({ required: true }) iconName!: string;
+  @Input() iconClass!: string;
+  @Input() iconPathCount = 0;
+
+  get getPathCount() {
+    return Array.from({ length: this.iconPathCount }, (_, i) => i + 1);
+  }
+}

package/src/lib/read-more/read-more.component.html

@@ -0,0 +1,17 @@
+<p [class]="styleClass">
+  {{ isExpanded ? text : (text | slice : 0 : maxCharacters) }}
+  @if (text.length > maxCharacters && !isExpanded) {
+    <span>...</span>
+  }
+  @if (isExpanded) {
+    <span>
+    {{ text | slice : maxCharacters + 1 : text.length }}
+  </span>
+  }
+  <br>
+  @if (text.length > maxCharacters) {
+    <span class="text-primary_light cursor-pointer" (click)="toggleReadMore()">
+     {{ isExpanded ? ('less' | translate) : ('more' | translate) }}
+    </span>
+  }
+</p>

package/src/lib/read-more/read-more.component.spec.ts

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

package/src/lib/read-more/read-more.component.ts

@@ -0,0 +1,21 @@
+import { Component, Input } from "@angular/core";
+import {SlicePipe} from "@angular/common";
+import { TranslateModule } from "@ngx-translate/core";
+
+@Component({
+  selector: "app-read-more",
+  standalone: true,
+  imports: [TranslateModule, SlicePipe],
+  templateUrl: "./read-more.component.html",
+  styleUrl: "./read-more.component.scss"
+})
+export class ReadMoreComponent {
+  @Input({ required: true }) text = "";
+  @Input() styleClass = "";
+  @Input() maxCharacters = 100;
+  isExpanded = false;
+
+  toggleReadMore() {
+    this.isExpanded = !this.isExpanded;
+  }
+}

package/src/lib/side-bar/side-bar.component.html

@@ -0,0 +1,25 @@
+<!-- TODO refactor position sidebar based on html dir-->
+<p-drawer
+  (onHide)="hideSidebar()"
+  (onShow)="onShow.emit($event)"
+  [(visible)]="show"
+  [closable]="closable"
+  [closeOnEscape]="closeOnEscape"
+  [dismissible]="dismissible"
+  [ngClass]="{ show: show }"
+  [position]="'left'"
+  appendTo="body"
+  styleClass="p-drawer-{{ sidebarSize }} custom-content bg-white {{ styleClass }}">
+  <ng-template pTemplate="header">{{ title }}</ng-template>
+  @if (contentTemplate) {
+    <ng-template pTemplate="content">
+      <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
+    </ng-template>
+    <ng-template pTemplate="footer">
+      <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
+    </ng-template>
+  }
+  <ng-template pTemplate="content">
+    <ng-content id="side-content"></ng-content>
+  </ng-template>
+</p-drawer>

package/src/lib/side-bar/side-bar.component.scss

@@ -0,0 +1,5 @@
+.sidebar {
+  &.show {
+    @apply min-w-[550px];
+  }
+}

package/src/lib/side-bar/side-bar.component.spec.ts

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

package/src/lib/side-bar/side-bar.component.ts

@@ -0,0 +1,32 @@
+import { NgClass, NgTemplateOutlet } from "@angular/common";
+import { Component, EventEmitter, Input, Output, TemplateRef, ViewEncapsulation } from "@angular/core";
+import { PrimeTemplate } from "primeng/api";
+import { Drawer } from "primeng/drawer";
+
+@Component({
+  selector: "app-side-bar",
+  standalone: true,
+  imports: [PrimeTemplate, Drawer, NgClass, NgTemplateOutlet],
+  templateUrl: "./side-bar.component.html",
+  styleUrl: "./side-bar.component.scss",
+  encapsulation: ViewEncapsulation.None
+})
+export class SideBarComponent {
+  @Input() show = false;
+  @Input() title: string;
+  @Input() closable = false;
+  @Input() dismissible = false;
+  @Input() closeOnEscape = false;
+  @Input() sidebarSize: "sm" | "md" | "lg" | "xl" = "sm";
+  @Input() styleClass = "";
+  @Output() hide = new EventEmitter<boolean>();
+  // eslint-disable-next-line @angular-eslint/no-output-on-prefix
+  @Output() onShow = new EventEmitter<boolean>();
+  @Input() contentTemplate!: TemplateRef<unknown>;
+  @Input() footerTemplate!: TemplateRef<unknown>;
+
+  hideSidebar() {
+    this.show = false;
+    this.hide.emit(false);
+  }
+}