@corp-products/ui-components 3.2.9 → 3.3.1

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

@@ -1,63 +0,0 @@
-<div class="field flex flex-col gap-2 my-3 relative">
-
-  @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 -->
-
-  @switch (type) {
-  @case ('textarea') {
-  @if (label) {
-  <label [for]="inputId">
-    {{ label }}
-    @if (required) {
-    <span [class.text-required]="required">*</span>
-    }
-  </label>
-
-  <ng-content></ng-content>
-  }
-  <textarea [name]="name" [id]="inputId" [formControl]="control" [placeholder]="placeholder" [readonly]="readonly"
-    [disabled]="disabled" pTextarea [rows]="rows" [cols]="cols" [autoResize]="autoResize" [class]="
-        'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'
-        "
-    [ngClass]="{'ng-invalid ng-dirty': control.invalid && (control.dirty || control.touched), 'basic-style': basicInput, 'no-style':noStyle}">
-  </textarea>
-  }
-  @default {
-  <p-floatlabel [variant]="variant">
-    <!-- <input pInputText id="value2" [(ngModel)]="value2" [invalid]="!value2" autocomplete="off" /> -->
-    <input [id]="inputId" [type]="'text-float-label'" [formControl]="control" [readonly]="readonly" [pSize]="size"
-      [class]="
-        'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'
-        " [disabled]="disabled" [name]="name" pInputText [ngStyle]="{'direction': inputDirection || 'inherit'}"
-      class="w-full"
-      [ngClass]="{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}" />
-    <label [for]="inputId">
-      {{ label }}
-      @if (required) {
-      <span [class.text-required]="required">*</span>
-      }
-    </label>
-  </p-floatlabel>
-  @if (prefix) {
-  <span class="absolute top-[40px] font-bold text-[16px] left-[25px]">
-    {{ prefix }}
-  </span>
-  }
-
-
-  }
-  }
-  @if (hint) {
-  <small class="p-mt-1">{{ hint }}</small>
-  }
-  @if (isInvalid && (control.dirty || control.touched)) {
-  <small class="p-error">
-    @for (error of control.errors | validationErrors; track error) {
-    {{ error }}<br>
-    }
-  </small>
-  }
-</div>

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

@@ -1,41 +0,0 @@
-textarea {
-  @apply h-auto min-h-[50px] overflow-auto;
-}
-
-
-textarea,
-.p-select, input {
-  border-radius: 0 ;
-  border-color: #DFE0E6 ;
-
-  &:enabled {
-    &:hover {
-      border-color: #DFE0E6 ;
-    }
-  }
-
-  &:not(.p-disabled).p-focus,
-  &:not(.p-disabled).p-focus:hover,
-  &:focus {
-    outline: #DFE0E6 ;
-    border-color: #DFE0E6 ;
-  }
-}
-.p-floatlabel:has(input:focus) label,
-.p-floatlabel:has(input:-webkit-autofill) label,
-.p-floatlabel:has(textarea:focus) label,
-.p-floatlabel:has(.p-inputwrapper-focus) label {
-      color: #687078;
-
-}
-.p-inputtext:enabled:focus {
-  border-color: #DFE0E6 ;
-}
-
-.text-required {
-  color: red;
-}
-
-.p-error {
-  color: #dc2626;
-}

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,45 +0,0 @@
-import { NgClass, NgStyle } from '@angular/common';
-import { Component, Input } from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
-import { TranslatePipe } from '@ngx-translate/core';
-import { FloatLabelModule } from 'primeng/floatlabel';
-import { InputText } from 'primeng/inputtext';
-import { Textarea } from 'primeng/textarea';
-import { ValidationErrorsPipe } from '../../@utils/validations/validation-message.pipe';
-import { BaseInputComponent } from '../base-input.component';
-@Component({
-  selector: 'stc-input',
-  standalone: true,
-  imports: [
-    ReactiveFormsModule,
-    InputText,
-    Textarea,
-    ValidationErrorsPipe,
-    NgClass,
-    NgStyle,
-    TranslatePipe,
-    FloatLabelModule,
-  ],
-  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() size: 'small' | 'large' = "small";
-  @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';
-  @Input() variant: 'in' | 'over' | 'on' = 'over';
-  @Input() defaultColor = '#DFE0E6'
-
-
-  constructor() {
-    super();
-  }
-}

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

@@ -1,111 +0,0 @@
-<div class="field flex flex-col gap-2 my-3 relative">
-
-  @if(multiple) {
-   <p-floatLabel [variant]="variant">
-
-    <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"
-     [size]="size"
-    [selectedItemsLabel]="selectedItemsLabel"
-    [class]="
-        'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'
-        "
-    (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>
-    <label [for]="inputId">
-      {{ label }}
-      @if (required) {
-      <span [class.text-required]="required">*</span>
-      }
-    </label>
-
-  </p-floatLabel>
-
-  } @else {
-      <p-floatLabel [variant]="variant">
-    <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"
-       [size]="size"
-      class="w-full"
-      [class]="
-        'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'
-        "
-      (onChange)="onChange($event)"
-      [ngClass]="{ 'basic-style': basicInput }"
-    >
-
-      @if (optionTemplate) {
-        <ng-template let-item pTemplate="item">
-          <ng-container [ngTemplateOutletContext]="{ $implicit: item }" [ngTemplateOutlet]="optionTemplate" />
-        </ng-template>
-      }
-      @if (selectedItemTemplate) {
-        <ng-template let-item pTemplate="selectedItem">
-          <ng-container [ngTemplateOutletContext]="{ $implicit: item }" [ngTemplateOutlet]="selectedItemTemplate" />
-        </ng-template>
-      }
-    </p-select>
-    <label [for]="inputId">
-      {{ label }}
-      @if (required) {
-      <span [class.text-required]="required">*</span>
-      }
-    </label>
-  </p-floatLabel>
-  }
-
-  @if (hint) {
-  <small class="p-mt-1">{{ hint }}</small>
-  } @if (isInvalid && (control.dirty || control.touched)) {
-  <small class="p-error">
-    @for (error of control.errors | validationErrors; track error) {
-    {{ error }}<br />
-    }
-  </small>
-  }
-</div>

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

@@ -1,43 +0,0 @@
-textarea,
-.p-select {
-  border-radius: 0;
-  border-color: #DFE0E6;
-
-  &:enabled {
-    &:hover {
-      border-color: #DFE0E6;
-    }
-  }
-
-  &:not(.p-disabled).p-focus,
-  &:not(.p-disabled).p-focus:hover,
-  &:focus {
-    outline: #DFE0E6;
-    border-color: #DFE0E6;
-  }
-}
-.p-floatlabel:has(input:focus) label,
-.p-floatlabel:has(input:-webkit-autofill) label,
-.p-floatlabel:has(textarea:focus) label,
-.p-floatlabel:has(.p-inputwrapper-focus) label {
-      color: #687078;
-
-}
-.p-inputtext:enabled:focus {
-  border-color: #DFE0E6 ;
-}
-.p-select {
-  .p-select-label {
-    padding-block-end: 1rem !important;
-    padding-block-start: 1rem !important;
-  }
-}
-
-.text-required {
-  color: red;
-}
-
-.p-error {
-  color: #dc2626;
-}
-

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,56 +0,0 @@
-import { NgClass, NgTemplateOutlet } from '@angular/common';
-import { Component, EventEmitter, Input, Output, TemplateRef, ViewEncapsulation } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { TranslatePipe } from '@ngx-translate/core';
-import { PrimeTemplate } from 'primeng/api';
-import { FloatLabelModule } from 'primeng/floatlabel';
-import { MultiSelectModule } from 'primeng/multiselect';
-import { Select, SelectChangeEvent } from 'primeng/select';
-import { ValidationErrorsPipe } from '../../@utils/validations';
-import { BaseInputComponent } from '../base-input.component';
-
-@Component({
-  selector: 'stc-select',
-  standalone: true,
-  imports: [
-    FormsModule,
-    Select,
-    ReactiveFormsModule,
-    NgClass,
-    NgTemplateOutlet,
-    PrimeTemplate,
-    ValidationErrorsPipe,
-    MultiSelectModule,
-    FloatLabelModule,
-  ],
-  templateUrl: './select.component.html',
-  styleUrl: './select.component.scss',
-  encapsulation: ViewEncapsulation.None
-})
-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() size: 'small' | 'large' = "small";
-
-  @Input() selectedItemsLabel!: string;
-  @Input() basicInput!: boolean;
-  @Input() variant: 'in' | 'over' | 'on' = 'over';
-  // eslint-disable-next-line @angular-eslint/no-output-native
-  @Output() change = new EventEmitter();
-  @Input() defaultColor = '#DFE0E6'
-  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>

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,24 +0,0 @@
-<!-- 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">
-    <p class="truncate" [pTooltip]="title">{{ title }}</p>
-  </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>
-  }
-</p-drawer>