cats-ui-lib 2.0.1 → 2.0.2

package/src/lib/components/toogle-button/toogle-button.component.scss

@@ -1,60 +0,0 @@
-@use "../../styles" as *;
-
-.toggle_button {
-  // @include flex(center, center);
-  .switch {
-    position: relative;
-    display: flex;
-    @include box(rem(36px), rem(20px));
-    input {
-      opacity: 0;
-      @include box(0, 0);
-      &:focus {
-        box-shadow: unset;
-      }
-      & + .slider {
-        box-shadow: 0 0 rem(1px) var(--box-shadow);
-      }
-      &:checked + .slider {
-        background-color: var(--blue-600);
-        &:before {
-          -webkit-transform: translateX(rem(26px));
-          -ms-transform: translateX(rem(26px));
-          transform: translateX(rem(26px));
-          left: rem(-9px);
-          bottom: rem(2px);
-        }
-      }
-    }
-    .slider {
-      position: absolute;
-      background-color: var(--neutral-100);
-      cursor: pointer;
-      inset: 0;
-      transition: 0.4s;
-      &:before {
-        @include box(rem(16px), rem(16px));
-        position: absolute;
-        content: "";
-        background-color: var(--white);
-        transition: 0.4s;
-        position: absolute;
-        left: rem(3px);
-        bottom: rem(2px);
-        box-shadow: 0 rem(1px) rem(2px) 0 var(--box-shadow);
-      }
-      &.round {
-        border-radius: rem(12px);
-        &:before {
-          border-radius: 50%;
-        }
-      }
-    }
-    .toggle-status {
-      color: var(--white);
-      z-index: 9;
-      padding-left: rem(2px);
-      @include fontStyle(var(--fs-8), rem(24px), 400);
-    }
-  }
-}

package/src/lib/components/toogle-button/toogle-button.component.ts

@@ -1,47 +0,0 @@
-import { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';
-import { ToggleConfig } from '../../modal/cats-ui.modal';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-
-@Component({
-  selector: 'cats-ui-toogle-button',
-  imports: [],
-  templateUrl: './toogle-button.component.html',
-  styleUrl: './toogle-button.component.scss',
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => ToogleButtonComponent),
-      multi: true,
-    },
-  ],
-})
-export class ToogleButtonComponent {
-  @Input() toggleConfig!: ToggleConfig;
-  @Output() onToggled: EventEmitter<boolean> = new EventEmitter<boolean>();
-
-  private onChange: (value: boolean) => void = () => {};
-  private onTouched: () => void = () => {};
-  toggle() {
-    if (!this.toggleConfig.disabled) {
-      this.toggleConfig.checked = !this.toggleConfig.checked;
-      this.onToggled.emit(this.toggleConfig.checked);
-    }
-  }
-
-  // ControlValueAccessor methods
-  writeValue(value: boolean): void {
-    this.toggleConfig.checked = value;
-  }
-
-  registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: any): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.toggleConfig.disabled = isDisabled;
-  }
-}

package/src/lib/directives/cats-ui-tooltip.directive.ts

@@ -1,132 +0,0 @@
-import {
-  Directive,
-  ElementRef,
-  HostListener,
-  Input,
-  Renderer2,
-  OnDestroy,
-  OnInit,
-} from '@angular/core';
-
-@Directive({
-  selector: '[catsUiTooltip]',
-})
-export class CatsUiTooltipDirective implements OnInit, OnDestroy {
-  @Input('catsUiTooltip') tooltipText = '';
-  @Input() tooltipClass?: string = '';
-
-  private tooltipEl!: HTMLElement;
-
-  constructor(private el: ElementRef, private renderer: Renderer2) {}
-
-  ngOnInit(): void {
-    this.showTooltip();
-  }
-
-  ngOnDestroy(): void {
-    this.removeTooltip();
-  }
-
-  @HostListener('mouseenter')
-  showTooltip() {
-    this.createTooltip();
-    this.positionTooltip();
-  }
-
-  @HostListener('mouseleave')
-  hideTooltip() {
-    this.removeTooltip();
-  }
-
-  @HostListener('window:resize')
-  @HostListener('window:scroll')
-  adjustOnWindowChange() {
-    if (this.tooltipEl) this.positionTooltip();
-  }
-
-  /**
-   * @description Creates tooltip
-   * @author Shiva Kant
-   * @returns
-   */
-  private createTooltip() {
-    if (this.tooltipEl) return;
-
-    this.tooltipEl = this.renderer.createElement('div');
-    this.tooltipEl.innerText = this.tooltipText;
-
-    this.renderer.setStyle(this.tooltipEl, 'position', 'fixed');
-    // this.renderer.setStyle(this.tooltipEl, 'padding', '6px 10px');
-    // this.renderer.setStyle(this.tooltipEl, 'background', '#ffffff');
-    // this.renderer.setStyle(this.tooltipEl, 'color', '#434a51');
-    // this.renderer.setStyle(this.tooltipEl, 'borderRadius', '4px');
-    // this.renderer.setStyle(this.tooltipEl, 'zIndex', '9999');
-    // this.renderer.setStyle(this.tooltipEl, 'whiteSpace', 'nowrap');
-    // Add a custom class if provided
-    if (this.tooltipClass) {
-      this.renderer.addClass(this.tooltipEl, this.tooltipClass);
-    } else {
-      // Optionally, you can add a default class here
-      this.renderer.addClass(this.tooltipEl, 'default-tooltip-class');
-    }
-
-    document.body.appendChild(this.tooltipEl);
-  }
-
-  /**
-   * @description Removes tooltip
-   * @author Shiva Kant
-   */
-  private removeTooltip() {
-    if (this.tooltipEl) {
-      this.tooltipEl.remove();
-      this.tooltipEl = null as any;
-    }
-  }
-
-  /**
-   * @description Positions tooltip
-   * @author Shiva Kant
-   */
-  private positionTooltip() {
-    const hostRect = this.el.nativeElement.getBoundingClientRect();
-    const tooltipRect = this.tooltipEl.getBoundingClientRect();
-
-    const spacing = 8; // distance from host element
-
-    const fitsAbove = hostRect.top >= tooltipRect.height + spacing;
-    const fitsBelow =
-      window.innerHeight - hostRect.bottom >= tooltipRect.height + spacing;
-    const fitsLeft = hostRect.left >= tooltipRect.width + spacing;
-    const fitsRight =
-      window.innerWidth - hostRect.right >= tooltipRect.width + spacing;
-
-    let top = 0;
-    let left = 0;
-
-    // Priority: bottom → top → right → left
-    if (fitsBelow) {
-      top = hostRect.bottom + spacing;
-      left = hostRect.left + (hostRect.width - tooltipRect.width) / 2;
-    } else if (fitsAbove) {
-      top = hostRect.top - tooltipRect.height - spacing;
-      left = hostRect.left + (hostRect.width - tooltipRect.width) / 2;
-    } else if (fitsRight) {
-      top = hostRect.top + (hostRect.height - tooltipRect.height) / 2;
-      left = hostRect.right + spacing;
-    } else if (fitsLeft) {
-      top = hostRect.top + (hostRect.height - tooltipRect.height) / 2;
-      left = hostRect.left - tooltipRect.width - spacing;
-    } else {
-      // fallback → bottom with clamped position
-      top = hostRect.bottom + spacing;
-      left = Math.min(
-        Math.max(10, hostRect.left),
-        window.innerWidth - tooltipRect.width - 10
-      );
-    }
-
-    this.renderer.setStyle(this.tooltipEl, 'top', `${top}px`);
-    this.renderer.setStyle(this.tooltipEl, 'left', `${left}px`);
-  }
-}

package/src/lib/directives/outside-click.directive.ts

@@ -1,31 +0,0 @@
-import { Directive, ElementRef, EventEmitter, HostListener, Output } from "@angular/core";
-
-@Directive({
-  selector: '[catsOutsideClick]',
-  standalone: true,
-})
-export class OutsideClickDirective {
-  @Output() public clickOutSide = new EventEmitter<MouseEvent>();
-
-  constructor(private elementRef: ElementRef) {}
-  /**
-   * @description Hosts listener
-   * @author Shiva Kant
-   * @param event 
-   * @returns click 
-   */
-  @HostListener('document:click', ['$event'])
-  public onClick(event: MouseEvent): void {
-    const targetElement = event.target as HTMLElement | null;
-
-    // Guard clause: exit early if no target or not an element
-    if (!targetElement) {
-      return;
-    }
-
-    const clickInside = this.elementRef.nativeElement.contains(targetElement);
-    if (!clickInside) {
-      this.clickOutSide.emit(event);
-    }
-  }
-}

package/src/lib/modal/cats-ui.modal.ts

@@ -1,83 +0,0 @@
-export class SingleSelectConfig {
-  idField: string = 'id';
-  textField: string = 'name';
-  disabledField?: string = '';
-  placeholder?: string = 'Select Option';
-  prefixLabel?: string = '';
-  enableSearch?: boolean = false;
-  required?: boolean = false;
-}
-
-export class MultiSelectConfig {
-  idField: string = 'id';
-  textField: string = 'name';
-  disabledField?: string = '';
-  placeholder?: string = 'Select Option';
-  prefixLabel?: string = '';
-  enableSearch?: boolean = false;
-  chipLimit: number = 2;
-  selectAll?: boolean = true;
-  required?: boolean = false;
-}
-
-export class SearchConfig {
-  serachValue: string = '';
-  placeholder?: string = 'Search';
-}
-
-export class InputConfig {
-  type: 'text' | 'email' | 'password' | 'number' = 'text';
-  placeholder?: string = '';
-  label?: string = '';
-}
-
-export class AutoCompleteSingleSelectConfig {
-  idField: string = 'id';
-  textField: string = 'name';
-  disabledField?: string = '';
-  placeholder?: string = 'Enter or Select';
-  required?: boolean = false;
-  customInput: boolean = false;
-}
-export class AutoCompleteMultiSelectConfig {
-  idField: string = 'id';
-  textField: string = 'name';
-  disabledField?: string = '';
-  selectAll?: boolean = true;
-  placeholder?: string = 'Enter or Select';
-  required?: boolean = false;
-  chipLimit: number = 2;
-  customInput: boolean = false;
-  pattern?: string = '';
-}
-export class ToggleConfig {
-  checked: boolean = false;
-  disabled?: boolean = false;
-}
-export class CheckBoxSubtask {
-  idField: string = '';
-  textField: string = '';
-  checked?: boolean = false;
-}
-
-export class CheckBoxConfig {
-  idField: string = '';
-  textField: string = '';
-  disabledField?: string = '';
-  name: string = '';
-  checked?: boolean = false;
-  subtasks?: CheckBoxSubtask[];
-}
-export interface RadioButtonConfig {
-  label?: string;
-  disabled?: string;
-  valueField?: string;
-  textField?: string;
-  name: string;
-  layout?: 'horizontal' | 'vertical';
-}
-
-export interface DateConfig {
-  selectionMode: 'single' | 'range';
-  enableTime?: boolean;
-}

package/src/lib/services/cats-ui.service.spec.ts

@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { CatsUiService } from './cats-ui.service';
-
-describe('CatsUiService', () => {
-  let service: CatsUiService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(CatsUiService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});

package/src/lib/services/cats-ui.service.ts

@@ -1,9 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class CatsUiService {
-
-  constructor() { }
-}

package/src/public-api.ts

@@ -1,21 +0,0 @@
-/*
- * Public API Surface of cats-ui
- */
-
-export * from './lib/services/cats-ui.service';
-export * from './lib/components/input';
-export * from './lib/components/single-select';
-export * from './lib/components/multi-select';
-export * from './lib/components/search-box';
-export * from './lib/components/auto-complete-single-select';
-export * from './lib/directives/outside-click.directive'
-export * from './lib/components/auto-complete-multi-select';
-export * from './lib/modal/cats-ui.modal';
-export * from './lib/components/toogle-button';
-export * from './lib/components/checkbox-button';
-export * from './lib/components/radio-button';
-export * from './lib/components/date-time-picker';
-export * from './lib/directives/cats-ui-tooltip.directive';
-export * from './lib/components/accordion';
-export * from './lib/components/tabs';
-

package/tsconfig.lib.json

@@ -1,15 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/lib",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": []
-  },
-  "exclude": [
-    "**/*.spec.ts"
-  ]
-}

package/tsconfig.lib.prod.json

@@ -1,11 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  }
-}

package/tsconfig.spec.json

@@ -1,15 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
-  },
-  "include": [
-    "**/*.spec.ts",
-    "**/*.d.ts"
-  ]
-}