cats-ui-lib 1.0.0

package/lib/components/search-box/search-box.component.d.ts

@@ -0,0 +1,30 @@
+import { EventEmitter } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { SearchConfig } from '../../modal/cats-ui.modal';
+import * as i0 from "@angular/core";
+export declare class SearchBoxComponent implements ControlValueAccessor {
+    searchParam: string;
+    searchConfig: SearchConfig;
+    onClose: EventEmitter<void>;
+    searchParamValue: EventEmitter<string>;
+    private onChange;
+    onTouched: () => void;
+    isDisabled: boolean;
+    ngOnInit(): void;
+    /**
+     * @description Method to Called when input changes
+     * @author Shiva Kant
+     */
+    onInputChange(event: any): void;
+    /**
+     * @description Method to closeSearchBar
+     * @author Shiva Kant
+     */
+    closeSearchBar(): void;
+    writeValue(value: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState?(isDisabled: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SearchBoxComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SearchBoxComponent, "cats-ui-search-box", never, { "searchConfig": { "alias": "searchConfig"; "required": false; }; }, { "onClose": "onClose"; "searchParamValue": "searchParamValue"; }, never, never, true, never>;
+}

package/lib/components/single-select/index.d.ts

@@ -0,0 +1 @@
+export * from "./single-select.component";

package/lib/components/single-select/single-select.component.d.ts

@@ -0,0 +1,89 @@
+import { ChangeDetectorRef, ElementRef, EventEmitter, OnChanges, OnInit, SimpleChanges, TemplateRef } from '@angular/core';
+import { ControlValueAccessor, FormControl } from '@angular/forms';
+import { SingleSelectConfig } from '../../modal/cats-ui.modal';
+import * as i0 from "@angular/core";
+export declare const SINGLE_SELECT_CONTROL_VALUE_ACCESSOR: any;
+export declare const SINGLE_SELECT_CONTROL_VALUE_VALIDATOR: any;
+export declare class SingleSelectComponent implements OnInit, OnChanges, ControlValueAccessor {
+    private cd;
+    private el;
+    optionList: any[];
+    singleSelectConfig: SingleSelectConfig;
+    selectedOption: any;
+    onSelection: EventEmitter<any>;
+    showDropdown: boolean;
+    searchText: string;
+    inValid: boolean;
+    control: FormControl<any> | null;
+    disableControl: boolean;
+    onScroll: any;
+    parentNativeElement: any;
+    selectedData: TemplateRef<any>;
+    constructor(cd: ChangeDetectorRef, el: ElementRef);
+    ngOnInit(): void;
+    ngOnChanges(_changes: SimpleChanges): void;
+    /**
+     * @description Method to toggle dropdown list
+     * @author Shiva Kant
+     */
+    toggleDropdown(): void;
+    /**
+     * @description Method to check if provide arg is an object or not
+     * @author Shiva Kant
+     * @param Obj:any
+     * @returns boolean
+     */
+    isObjEmpty(obj: any): boolean;
+    /**
+     * @description Method is to update selected option and then
+     * update formcontrol by call onChangeCallback.
+     * @author Shiva Kant
+     * @param item
+     * @returns void
+     */
+    updateSelectedOption(item: any): void;
+    validate(control: FormControl): void;
+    private onTouchedCallback;
+    private onChangeCallback;
+    /**
+     * @description method to update value of selectedOption
+     * @author Shiva Kant
+     * @param obj this is provided by formcontrol
+     * @returns void
+     */
+    writeValue(obj: any): void;
+    /**
+     * @description method to register on change callback from form API
+     * @author Shiva Kant
+     * @param fn
+     * @returns void
+     */
+    registerOnChange(fn: any): void;
+    /**
+     * @description method to register on touch callback from form API
+     * @author Shiva Kant
+     * @param fn
+     * @returns void
+     */
+    registerOnTouched(fn: any): void;
+    setDisabledState(isDisabled: boolean): void;
+    /**
+     * @description method to update ontouchcallback on blur
+     * @author Shiva Kant
+     */
+    onTouched(): void;
+    /**
+     * @description method to toggle dropdown on outside click
+     * @author Shiva Kant
+     */
+    closeDropdown(event: any): void;
+    /**
+     * @description method to load more list
+     * @author Shiva Kant
+     * @param event
+     */
+    onDivScroll(event: any): void;
+    get filteredOptionsValue(): any[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<SingleSelectComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SingleSelectComponent, "cats-ui-single-select", never, { "optionList": { "alias": "optionList"; "required": false; }; "singleSelectConfig": { "alias": "singleSelectConfig"; "required": false; }; "selectedOption": { "alias": "selectedOption"; "required": false; }; "parentNativeElement": { "alias": "parentNativeElement"; "required": false; }; }, { "onSelection": "onSelection"; "onScroll": "onScroll"; }, ["selectedData"], never, true, never>;
+}

package/lib/components/toogle-button/index.d.ts

@@ -0,0 +1 @@
+export * from "./toogle-button.component";

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

@@ -0,0 +1,16 @@
+import { EventEmitter } from '@angular/core';
+import { ToggleConfig } from '../../modal/cats-ui.modal';
+import * as i0 from "@angular/core";
+export declare class ToogleButtonComponent {
+    toggleConfig: ToggleConfig;
+    onToggled: EventEmitter<boolean>;
+    private onChange;
+    private onTouched;
+    toggle(): void;
+    writeValue(value: boolean): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ToogleButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToogleButtonComponent, "cats-ui-toogle-button", never, { "toggleConfig": { "alias": "toggleConfig"; "required": false; }; }, { "onToggled": "onToggled"; }, never, never, true, never>;
+}

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

@@ -0,0 +1,71 @@
+export declare class SingleSelectConfig {
+    idField: string;
+    textField: string;
+    disabledField?: string;
+    placeholder?: string;
+    prefixLabel?: string;
+    enableSearch?: boolean;
+    required?: boolean;
+}
+export declare class MultiSelectConfig {
+    idField: string;
+    textField: string;
+    disabledField?: string;
+    placeholder?: string;
+    prefixLabel?: string;
+    enableSearch?: boolean;
+    chipLimit: number;
+    selectAll?: boolean;
+    required?: boolean;
+}
+export declare class SearchConfig {
+    serachValue: string;
+    borderRequired?: boolean;
+    placeholder?: string;
+}
+export declare class InputConfig {
+    type: 'text' | 'email' | 'password' | 'number';
+    placeholder?: string;
+    label?: string;
+}
+export declare class AutoCompleteSingleSelectConfig {
+    idField: string;
+    textField: string;
+    disabledField?: string;
+    placeholder?: string;
+    required?: boolean;
+    customInput: boolean;
+}
+export declare class AutoCompleteMultiSelectConfig {
+    idField: string;
+    textField: string;
+    disabledField?: string;
+    selectAll?: boolean;
+    placeholder?: string;
+    required?: boolean;
+    chipLimit: number;
+    customInput: boolean;
+    pattern?: string;
+}
+export declare class ToggleConfig {
+    checked: boolean;
+    disabled?: boolean;
+}
+export declare class CheckBoxSubtask {
+    name: string;
+    id: string;
+    checked?: boolean;
+}
+export declare class CheckBoxConfig {
+    id: string;
+    name: string;
+    checked?: boolean;
+    subtasks?: CheckBoxSubtask[];
+}
+export interface RadioButtonConfig {
+    label?: string;
+    disabled?: boolean;
+    valueField?: string;
+    textField?: string;
+    layout?: 'horizontal' | 'vertical';
+}

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

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+export declare class CatsUiService {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<CatsUiService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<CatsUiService>;
+}

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "cats-ui-lib",
+  "version": "1.0.0",
+  "peerDependencies": {
+    "@angular/common": "^19.2.0",
+    "@angular/core": "^19.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/cats-ui.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/cats-ui.mjs"
+    }
+  }
+}

package/public-api.d.ts

@@ -0,0 +1,12 @@
+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/components/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';

package/styles/_fonts.scss

@@ -0,0 +1,74 @@
+// @use url("https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap");
+
+@use "mixins" as *;
+
+:root {
+  --fs-6: 6px;
+  --fs-12: 12px;
+  --fs-14: 14px;
+  --fs-16: 16px;
+  --fs-18: 18px;
+  --fs-20: 20px;
+  --fs-24: 24px;
+  --fs-28: 28px;
+  --fs-30: 30px;
+  --fs-32: 32px;
+  --fs-42: 42px;
+  --fs-48: 48px;
+  --img-w: 28px;
+  --scale: 1;
+}
+
+@include width-range($tablet, $mediumDesktop) {
+  :root {
+    --scale: 1.5;
+    --fs-6: calc(6px / var(--scale));
+    --fs-12: calc(12px / var(--scale));
+    --fs-14: calc(14px / var(--scale));
+    --fs-16: calc(16px / var(--scale));
+    --fs-18: calc(18px / var(--scale));
+    --fs-20: calc(20px / var(--scale));
+    --fs-24: calc(24px / var(--scale));
+    --fs-28: calc(28px / var(--scale));
+    --fs-30: calc(30px / var(--scale));
+    --fs-32: calc(32px / var(--scale));
+    --fs-42: calc(42px / var(--scale));
+    --fs-48: calc(48px / var(--scale));
+  }
+}
+
+@include width-range($largeDesktop, $extraLargeDesktop) {
+  :root {
+    --scale: 1.33;
+    --fs-6: calc(6px / var(--scale));
+    --fs-12: calc(12px / var(--scale));
+    --fs-14: calc(14px / var(--scale));
+    --fs-16: calc(16px / var(--scale));
+    --fs-18: calc(18px / var(--scale));
+    --fs-20: calc(20px / var(--scale));
+    --fs-24: calc(24px / var(--scale));
+    --fs-28: calc(28px / var(--scale));
+    --fs-30: calc(30px / var(--scale));
+    --fs-32: calc(32px / var(--scale));
+    --fs-42: calc(42px / var(--scale));
+    --fs-48: calc(48px / var(--scale));
+  }
+}
+
+@include width-range($xxlargeDesktop, $ultraWideDesktop) {
+  :root {
+    --scale: 1.25;
+    --fs-6: calc(6px / var(--scale));
+    --fs-12: calc(12px / var(--scale));
+    --fs-14: calc(14px / var(--scale));
+    --fs-16: calc(16px / var(--scale));
+    --fs-18: calc(18px / var(--scale));
+    --fs-20: calc(20px / var(--scale));
+    --fs-24: calc(24px / var(--scale));
+    --fs-28: calc(28px / var(--scale));
+    --fs-30: calc(30px / var(--scale));
+    --fs-32: calc(32px / var(--scale));
+    --fs-42: calc(42px / var(--scale));
+    --fs-48: calc(48px / var(--scale));
+  }
+}

package/styles/_functions.scss

@@ -0,0 +1,10 @@
+@use "sass:math";
+$font-size: 12px;
+html {
+  font-size: $font-size;
+}
+@function rem($pxValue) {
+  // @return calc(math.div($pxValue, $font-size) * 1rem / var(--scale));
+  $val: calc($pxValue/$font-size);
+  @return calc($val * 1rem / var(--scale));
+}

package/styles/_index.scss

@@ -0,0 +1,6 @@
+@forward "variables";
+@forward "mixins";
+@forward "functions";
+@forward "utilities";
+@forward "fonts";
+@forward "reset";

package/styles/_mixins.scss

@@ -0,0 +1,65 @@
+@use "variables" as *;
+@use "functions" as *;
+
+$tablet: 1024px;
+$mediumDesktop: 1280px;
+$largeDesktop: 1360px;
+$extraLargeDesktop: 1440px;
+$xxlargeDesktop: 1536px;
+$ultraWideDesktop: 1919px;
+
+// --------------- MEDIA QUERY ------------------------
+@mixin width-range($min, $max) {
+  @media only screen and (min-width: $min) and (max-width: $max) {
+    @content;
+  }
+}
+
+// -------------- BOX HEIGHT AND WIDTH -------
+@mixin box($width, $height: 100%) {
+  width: $width;
+  height: $height;
+}
+
+// ------------- FONT STYLE
+@mixin fontStyle($fontSize, $lineHeight, $fontWeight: 400) {
+  font-size: $fontSize;
+  line-height: $lineHeight;
+  font-weight: $fontWeight;
+}
+
+// -------------  FLEX PROPERTY ---------------------
+@mixin flex(
+  $justify: flex-start,
+  $align: stretch,
+  $gap: 0,
+  $direction: row,
+  $wrap: nowrap
+) {
+  display: flex;
+  flex-direction: $direction;
+  justify-content: $justify;
+  align-items: $align;
+  flex-wrap: $wrap;
+  gap: $gap;
+}
+
+// USE CASE: IF YOU WANT ONLY 2 PROP. THEN OTHER PROP WILL APPLY AS DEFAULT PROP.
+// @include flex(center, stretch,row, wrap, 10px);
+
+// -------------  Border PROPERTY with width,color and radius ---------------------
+@mixin border(
+  $width: rem(1px),
+  $style: solid,
+  $color: var(--neutral-300),
+  $radius: rem(4px)
+) {
+  border: $width $style $color;
+  border-radius: $radius;
+}
+
+// Positioning element
+@mixin position($top, $left) {
+  top: $top;
+  left: $left;
+}

package/styles/_reset.scss

@@ -0,0 +1,69 @@
+// Box Sizing
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: "Open Sans", sans-serif;
+}
+
+body {
+  font-size: 100%;
+}
+
+// Font-inflation
+html {
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  -ms-text-size-adjust: none;
+  text-size-adjust: none;
+}
+
+// Remove default margin and padding
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+ul,
+ol p {
+  margin: 0;
+  padding: 0;
+  text-wrap: pretty;
+}
+
+// Remove list styles on ul, ol elements
+ul[role="list"],
+ol[role="list"] {
+  list-style: none;
+}
+
+ul {
+  list-style: none;
+}
+
+// images
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--neutral-200);
+  border-radius: 8px;
+}
+
+input,
+select,
+textarea {
+  outline: none;
+  box-shadow: none;
+}

package/styles/_utilities.scss

@@ -0,0 +1,80 @@
+@use "./functions" as *;
+@use "./mixins" as *;
+
+.pointer {
+  cursor: pointer;
+}
+.d-none {
+  display: none;
+}
+// ---------------------------- THREE DOTS TRUNCATE TEXT ------------------------
+.textTruncate {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+// ------------------Button Styles--------------------
+button {
+  border: rem(1px) solid transparent;
+  padding: 0 rem(28px);
+  height: rem(56px);
+  min-width: rem(142px);
+  @include flex(center, center, rem(12px));
+  border-radius: rem(8px);
+  @include fontStyle(var(--fs-18), "", 600);
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: none;
+    border: 0;
+  }
+
+  i-feather.icon {
+    display: flex;
+  }
+
+  &.primary_btn {
+    background-color: var(--blue-600);
+    color: var(--white);
+  }
+  &.secondary_btn {
+    background-color: var(--neutral-100);
+    color: var(--neutral-500);
+  }
+  &.outline_btn {
+    background-color: var(--white);
+    color: var(--neutral-500);
+    border: rem(1px) solid var(--neutral-300);
+  }
+  &.disable {
+    pointer-events: none;
+    opacity: 0.6;
+  }
+
+  &.fill_lightBlue_btn {
+    background-color: var(--blue-50);
+    color: var(--blue-600);
+  }
+  &.disable_fill_lightBlue_btn {
+    background-color: var(--blue-50);
+    color: var(--blue-300);
+    pointer-events: none;
+  }
+
+  &.bg_logic_btn {
+    background-color: var(--white);
+    color: var(--neutral-500);
+    border: rem(1px) solid var(--neutral-200);
+  }
+  &.no_outline_btn {
+    background-color: var(--blue-50);
+    color: var(--blue-600);
+    outline: none;
+  }
+  .close_outline_btn {
+    background-color: var(--blue-50);
+    border: rem(1px) solid var(--blue-50);
+    color: var(--blue-600);
+  }
+}

package/styles/_variables.scss

@@ -0,0 +1,92 @@
+:root {
+  --white: #ffffff;
+  --white-50: rgba(255, 255, 255, 0.582);
+
+  --black: #1f1f1f;
+  --default: #000000;
+  --black-900: #202224;
+  --pagination-text: var(--neutral-500);
+  --black-dust: #1a1a1a;
+
+  // NEUTRAL-COLOR
+  --neutral-cross: #d9d9d9;
+  --neutral-40: #d5d7da;
+  --neutral-50: #f0f0f0;
+  --neutral-100: #e6e7e8;
+  --neutral-200: #dadbdc;
+  --neutral-300: #c0c2c5;
+  --neutral-400: #81858a;
+  --neutral-500: #434a51;
+  --neutral-600: #040d17;
+  --neutral-900: #010306;
+
+  // BLUE COLOR
+  --blue-700: #1c60af;
+  --blue-600: #2680ea;
+  --blue-400: #92bff4;
+  --blue-100: #eaf3fd;
+  --blue-300: #c8dff9;
+  --blue-200: #dfecfc;
+  --blue-50: #f7fafe;
+  --blue-800: #1849d6;
+
+  // GREY COLOR
+  --grey-50: #e9eaeb;
+  --grey-100: #e2e8f0;
+  --grey-150: #d6d6d6;
+  --grey-200: #64748b;
+  --grey-300: #414651;
+  --grey-400: #8080808c;
+  --grey-600: #535862;
+  --light-grey: #81858a;
+  --dark-grey: #4a4a4a;
+
+  --green-50: #f7fbf7;
+  --green-100: #ecf4ec;
+  --green-200: #2a6a2d;
+  --green-400: #9bc69d;
+  --green-600: #388e3c;
+  --green-700: rgba(42, 106, 45, 1);
+
+  --red: #ff0000;
+  --red-50: #fdf7f7;
+  --red-100: #f0c9c9;
+  --red-200: #f7dfdf;
+  --red-300: #f2f2f2;
+  --red-700: #941e1e;
+
+  --yellow-50: #fffdf5;
+  --yellow-100: #fff5e6;
+  --yellow-200: #fff6da;
+  --yellow-300: #ffefc1;
+  --yellow-400: #fff9e7;
+  --yellow-500: #bf7200;
+  --yellow-600: #ffc107;
+  --yellow-700: #bf9105;
+  --yellow-800: #806003;
+  --yellow-900: #bf9105;
+
+  // Orange
+  --orange-50: rgba(255, 251, 245, 1);
+  --orange-100: #fff5e6;
+  --orange-200: #fff0d9;
+  --orange-600: #ff9800;
+  --orange-700: rgba(191, 114, 0, 1);
+
+  --box-shadow: #0a0d1208;
+  --box-shadow-100: #0000001f;
+  --box-shadow-200: #0a0d1214;
+  --grid-box-shadow: #0000000a;
+  --model-shadow: rgba(0, 0, 0, 0.08);
+  --canvas-shadow: #00000014;
+  // chunk shadow
+  --chunk-shadow: #0a0d120d;
+
+  --loader-border: #6f7b93;
+  --modal-bg: rgba(4, 13, 23, 0.3);
+  --checkbox-border: #0d6efd;
+
+  // FILTER COLOR
+  --filter-600: rgba(0, 0, 0, 0.644);
+  --feather-bg: #fafafa;
+}