cats-ui-lib 2.0.5 → 2.0.7

package/index.d.ts

@@ -2,7 +2,6 @@ import * as i0 from '@angular/core';
 import { EventEmitter, OnInit, OnChanges, TemplateRef, ChangeDetectorRef, ElementRef, SimpleChanges, OnDestroy, Renderer2, QueryList } from '@angular/core';
 import { ControlValueAccessor, Validator, FormControl, AbstractControl, ValidationErrors } from '@angular/forms';
 import { SafeHtml, DomSanitizer } from '@angular/platform-browser';
-import { DatePipe } from '@angular/common';
 
 declare class CatsUiService {
     constructor();
@@ -14,18 +13,24 @@ declare class SingleSelectConfig {
     idField: string;
     textField: string;
     disabledField?: string;
+    colorField?: string;
+    iconField?: string;
     placeholder?: string;
     prefixLabel?: string;
     enableSearch?: boolean;
+    searchPlaceholder?: string;
     required?: boolean;
 }
 declare class MultiSelectConfig {
     idField: string;
     textField: string;
     disabledField?: string;
+    colorField?: string;
+    iconField?: string;
     placeholder?: string;
     prefixLabel?: string;
     enableSearch?: boolean;
+    searchPlaceholder?: string;
     chipLimit: number;
     selectAll?: boolean;
     required?: boolean;
@@ -42,6 +47,8 @@ declare class InputConfig {
 declare class AutoCompleteSingleSelectConfig {
     idField: string;
     textField: string;
+    colorField?: string;
+    iconField?: string;
     disabledField?: string;
     placeholder?: string;
     required?: boolean;
@@ -51,6 +58,8 @@ declare class AutoCompleteMultiSelectConfig {
     idField: string;
     textField: string;
     disabledField?: string;
+    colorField?: string;
+    iconField?: string;
     selectAll?: boolean;
     placeholder?: string;
     required?: boolean;
@@ -85,10 +94,6 @@ interface RadioButtonConfig {
     name: string;
     layout?: 'horizontal' | 'vertical';
 }
-interface DateConfig {
-    selectionMode: 'single' | 'range';
-    enableTime?: boolean;
-}
 
 declare class InputComponent implements ControlValueAccessor, Validator {
     inputConfig: InputConfig;
@@ -601,199 +606,6 @@ declare class RadioButtonComponent implements ControlValueAccessor {
     static ɵcmp: i0.ɵɵComponentDeclaration<RadioButtonComponent, "cats-ui-radio-button", never, { "config": { "alias": "config"; "required": false; }; "optionList": { "alias": "optionList"; "required": false; }; "selectedRadio": { "alias": "selectedRadio"; "required": false; }; }, { "selectionChange": "selectionChange"; }, never, never, true, never>;
 }
 
-interface IRange {
-    value: Date;
-    label: string;
-}
-declare class DateTimePickerComponent implements OnInit, OnChanges, ControlValueAccessor {
-    private locale;
-    private cd;
-    private datePipe;
-    dateTimeSelected: EventEmitter<any>;
-    dateConfig: DateConfig;
-    minDate?: string;
-    maxDate?: string;
-    preSelectedValue: any;
-    selectedDateTime: any;
-    currentDate: Date;
-    currentMonth: number;
-    currentYear: number;
-    selectedDate: number | null;
-    selectedTime: string | null;
-    calendar: number[][];
-    timeSlots: IRange[];
-    rangeStart: number | null;
-    rangeEnd: number | null;
-    selectedMonth: any;
-    selectedYear: any;
-    control: AbstractControl<any, any>;
-    disableControl: boolean;
-    date: any;
-    calendarView: string;
-    yearRange: number[];
-    daysInMonth: any[];
-    selectedDay: number;
-    selectedStartDate: any;
-    selectedEndDate: any;
-    isOpen: boolean;
-    showYearSelector: boolean;
-    monthRange: any;
-    constructor(locale: string, cd: ChangeDetectorRef, datePipe: DatePipe);
-    ngOnChanges(_changes: SimpleChanges): void;
-    ngOnInit(): void;
-    private onTouchedCallback;
-    private onChangeCallback;
-    writeValue(value: any): void;
-    registerOnChange(fn: any): void;
-    registerOnTouched(fn: any): void;
-    setDisabledState(isDisabled: boolean): void;
-    /**
-     * @description Validates date time picker component
-     * @author Shiva Kant
-     * @param control
-     * @returns validate
-     */
-    validate(control: AbstractControl): ValidationErrors | null;
-    /**
-     * @description method to toggleCalendar
-     * @author Shiva Kant
-     */
-    toggleCalendar(): void;
-    /**
-     * @description Closes calendar
-     * @author Shiva Kant
-     */
-    closeCalendar(): void;
-    /**
-     * @description Method to Gets month year
-     * @author Shiva Kant
-     * @returns month year
-     */
-    getMonthYear(): {
-        month: string;
-        year: string;
-    };
-    /**
-     * @description Method to Updates current year month
-     * @author Shiva Kant
-     */
-    updateCurrentYearMonth(): void;
-    /**
-     * @description Method to Selects year
-     * @author Shiva Kant
-     * @param year
-     */
-    selectYear(year: number): void;
-    /**
-     * @description Method to Selects month
-     * @author Shiva Kant
-     * @param month
-     */
-    selectMonth(month: any): void;
-    /**
-     * @description Method to Previous year range
-     * @author Shiva Kant
-     */
-    previousYearRange(): void;
-    /**
-     * @description Method to Next year range
-     * @author Shiva Kant
-     */
-    nextYearRange(): void;
-    /**
-     * @description Method to Toggles year selector
-     * @author Shiva Kant
-     */
-    toggleYearSelector(): void;
-    /**
-     * @description Method to Generates year range
-     * @author Shiva Kant
-     */
-    generateYearRange(): void;
-    /**
-     * @description Method to Determines whether date selectable is
-     * @author Shiva Kant
-     * @param date
-     * @returns true if date selectable
-     */
-    isDateSelectable(date: Date): boolean;
-    /**
-     * @description Method to Determines whether day disabled is
-     * @author Shiva Kant
-     * @param day
-     * @returns true if day disabled
-     */
-    isDayDisabled(day: number): boolean;
-    /**
-     * @description Method to Generates calendar
-     * @author Shiva Kant
-     */
-    generateCalendar(): void;
-    /**
-     * @description Method to Previous month
-     * @author Shiva Kant
-     */
-    previousMonth(): void;
-    /**
-     * @description Method to Next month
-     * @author Shiva Kant
-     */
-    nextMonth(): void;
-    /**
-     * @description Method to Initializes calendar when preSelectedValue  date
-     * @author Shiva Kant
-     * @returns calendar
-     */
-    initializeCalendar(): void;
-    /**
-     * @description Method to Selects date
-     * @author Shiva Kant
-     * @param date
-     */
-    selectDate(date: number): void;
-    /**
-     * @description Method to Selects time
-     * @author Shiva Kant
-     * @param time
-     */
-    selectTime(time: string): void;
-    /**
-     * @description Method to Determines whether selected date is
-     * @author Shiva Kant
-     * @param date
-     * @returns
-     */
-    isSelectedDate(date: number, month: number, year: number): boolean;
-    /**
-     * @description Method to Generates time ranges
-     * @author Shiva Kant
-     */
-    generateTimeRanges(): void;
-    /**
-     * @description Method to Formats time
-     * @author Shiva Kant
-     * @param date
-     * @returns time
-     */
-    formatTime(date: Date): string;
-    /**
-     * @description Method to Formats date time
-     * @author Shiva Kant
-     * @param fullDate
-     * @param selectedTime
-     * @returns date time
-     */
-    formatDateTime(fullDate: Date, selectedTime: string | null): string;
-    /**
-     * @description Method to Emits date time
-     * @author Shiva Kant
-     * @returns date time
-     */
-    emitDateTime(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DateTimePickerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DateTimePickerComponent, "cats-ui-date-time-picker", never, { "dateConfig": { "alias": "dateConfig"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "preSelectedValue": { "alias": "preSelectedValue"; "required": false; }; }, { "dateTimeSelected": "dateTimeSelected"; }, never, never, true, never>;
-}
-
 type DatePickerMode = 'single' | 'range' | 'dual';
 interface DatePickerConfig {
     mode?: DatePickerMode;
@@ -822,7 +634,7 @@ interface DateTimeResult {
     meridiem: 'AM' | 'PM';
 }
 type CalenderView = 'day' | 'year' | 'month';
-declare class CustomDatePickerComponent implements OnInit, ControlValueAccessor {
+declare class CustomDatePickerComponent implements OnInit, ControlValueAccessor, OnChanges {
     private elRef;
     config: DatePickerConfig;
     label: string;
@@ -858,6 +670,7 @@ declare class CustomDatePickerComponent implements OnInit, ControlValueAccessor
     activeCalendar: 'primary' | 'secondary';
     monthNames: string[];
     constructor(elRef: ElementRef);
+    ngOnChanges(changes: SimpleChanges): void;
     ngOnInit(): void;
     get mode(): DatePickerMode;
     get showDateLabel(): boolean;
@@ -1007,42 +820,6 @@ declare class AccordionItemComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<AccordionItemComponent, "cats-ui-accordion-item", never, { "title": { "alias": "title"; "required": false; }; "index": { "alias": "index"; "required": false; }; }, {}, ["contentTemplate"], never, true, never>;
 }
 
-declare class TabContentDirective {
-    template: TemplateRef<any>;
-    constructor(template: TemplateRef<any>);
-    static ɵfac: i0.ɵɵFactoryDeclaration<TabContentDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TabContentDirective, "[tabContent]", never, {}, {}, never, never, true, never>;
-}
-
-declare class TabHeadingDirective {
-    template: TemplateRef<any>;
-    constructor(template: TemplateRef<any>);
-    static ɵfac: i0.ɵɵFactoryDeclaration<TabHeadingDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TabHeadingDirective, "[tabHeading]", never, {}, {}, never, never, true, never>;
-}
-
-declare class TabItemComponent {
-    heading: TabHeadingDirective;
-    content: TabContentDirective;
-    static ɵfac: i0.ɵɵFactoryDeclaration<TabItemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TabItemComponent, "cats-ui-tab-item", never, {}, {}, ["heading", "content"], never, true, never>;
-}
-
-declare class TabComponent {
-    activeTab: number;
-    disabledTabs: number[];
-    selectTab: EventEmitter<number>;
-    items: QueryList<TabItemComponent>;
-    /**
-     * @description Sets active
-     * @author Shiva Kant
-     * @param index
-     */
-    setActive(index: number): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<TabComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TabComponent, "cats-ui-tab", never, { "activeTab": { "alias": "activeTab"; "required": false; }; "disabledTabs": { "alias": "disabledTabs"; "required": false; }; }, { "selectTab": "selectTab"; }, ["items"], never, true, never>;
-}
-
 declare class TabContentComponent {
     active: boolean;
     tabId: number;
@@ -1062,7 +839,6 @@ interface TabItem {
     leadingIcon?: string;
     tralingIocn?: string;
     count?: number | string;
-    closable?: boolean;
     isDisable?: boolean;
     isHome?: boolean;
 }
@@ -1094,8 +870,10 @@ interface TimeFilterOption {
     children?: TimeFilterOption[];
     default?: boolean;
     custom?: boolean;
+    parentDateFormat?: 'dd MMM yyyy' | 'MM/dd/yyyy' | 'yyyy-MM-dd';
     pickerMode?: DatePickerMode;
     time?: boolean;
+    extraConfig?: Partial<DatePickerConfig>;
 }
 interface TimeFilterConfig {
     title?: string;
@@ -1105,19 +883,23 @@ interface TimeFilterConfig {
 interface TimeFilterOutput {
     type: FilterType;
     label?: string;
-    startDate?: Date;
-    endDate?: Date;
+    startDate?: string;
+    endDate?: string;
     value?: number;
     unit?: 'Hours' | 'Days';
     key?: string;
 }
 declare class TimestampFilterComponent {
+    private cdr;
     config: TimeFilterConfig;
     selectionChange: EventEmitter<TimeFilterOutput>;
     selectedValue: string | null;
     activePicker: TimeFilterOption | null;
     lastValue: number;
-    lastUnit: 'Hours' | 'Days';
+    lastUnit: 'seconds' | 'minutes' | 'hours' | 'days';
+    get normalOptions(): TimeFilterOption[];
+    get customOptions(): TimeFilterOption[];
+    constructor(cdr: ChangeDetectorRef);
     ngOnInit(): void;
     getPickerConfig(option: TimeFilterOption): DatePickerConfig;
     selectOption(option: TimeFilterOption): void;
@@ -1130,10 +912,63 @@ declare class TimestampFilterComponent {
     reset(): void;
     private emit;
     onDateApplied(event: any): void;
-    applied(dt: any): void;
+    onCancel(event: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TimestampFilterComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<TimestampFilterComponent, "cats-ui-timestamp-filter", never, { "config": { "alias": "config"; "required": true; }; }, { "selectionChange": "selectionChange"; }, never, never, true, never>;
 }
 
-export { AccordionComponent, AccordionItemComponent, AutoCompleteMultiSelectComponent, AutoCompleteMultiSelectConfig, AutoCompleteSingleSelectComponent, AutoCompleteSingleSelectConfig, CatsUiService, CatsUiTooltipDirective, CheckBoxConfig, CheckBoxSubtask, CheckboxButtonComponent, CustomDatePickerComponent, DROPDOWN_CONTROL_VALUE_ACCESSOR, DROPDOWN_CONTROL_VALUE_VALIDATOR, DateTimePickerComponent, InputComponent, InputConfig, MULTI_SELECT_CONTROL_VALUE_ACCESSOR, MULTI_SELECT_CONTROL_VALUE_VALIDATOR, MultiSelectComponent, MultiSelectConfig, OutsideClickDirective, RadioButtonComponent, SINGLE_SELECT_CONTROL_VALUE_ACCESSOR, SINGLE_SELECT_CONTROL_VALUE_VALIDATOR, SearchBoxComponent, SearchConfig, SingleSelectComponent, SingleSelectConfig, TabComponent, TabContentComponent, TabContentDirective, TabHeadingDirective, TabItemComponent, TabsetComponent, TimestampFilterComponent, ToggleConfig, ToogleButtonComponent };
-export type { CalenderView, DateConfig, DatePickerConfig, DatePickerMode, DateRange, DateTimeResult, FilterType, RadioButtonConfig, TabConfig, TabItem, TimeFilterConfig, TimeFilterOption, TimeFilterOutput };
+declare class WizardService {
+    private wizards;
+    activeStep: i0.WritableSignal<any>;
+    stepConfig: i0.WritableSignal<any>;
+    open(wizardId: string, config: any): void;
+    close(wizardId: string): void;
+    nextStep(wizardId: string): void;
+    previousStep(wizardId: string): void;
+    gotoStep(step: number, wizardId: string): void;
+    isOpen(wizardId: string): i0.Signal<any>;
+    getConfig(wizardId: string): i0.Signal<any>;
+    getCurrentStepIndex(wizardId: string): i0.Signal<any>;
+    getCurrentStep(wizardId: string): i0.Signal<any>;
+    getProgress(wizardId: string): i0.Signal<number>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WizardService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<WizardService>;
+}
+
+declare class WizardStepDirective {
+    templateRef: TemplateRef<any>;
+    constructor(templateRef: TemplateRef<any>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<WizardStepDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<WizardStepDirective, "[wizardStep]", never, {}, {}, never, never, true, never>;
+}
+
+declare class WizardComponent {
+    private commonService;
+    wizardId: string;
+    title: string;
+    closed: EventEmitter<void>;
+    stepTemplates: QueryList<WizardStepDirective>;
+    showProgressBar: boolean;
+    showStepBadge: boolean;
+    expandable: boolean;
+    isExpanded: boolean;
+    steps: any;
+    activeStep: any;
+    templates: WizardStepDirective[];
+    constructor(commonService: WizardService);
+    ngAfterContentInit(): void;
+    toggleExpand(): void;
+    onEscPressed(): void;
+    get currentStepIndex(): number;
+    get wizardSteps(): any[];
+    get currentTemplate(): i0.TemplateRef<any>;
+    get currentStepLabel(): string;
+    get currentStepNumber(): number;
+    goToStep(step: number): void;
+    closeModal(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WizardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WizardComponent, "cats-ui-wizard", never, { "wizardId": { "alias": "wizardId"; "required": false; }; "title": { "alias": "title"; "required": false; }; "showProgressBar": { "alias": "showProgressBar"; "required": false; }; "showStepBadge": { "alias": "showStepBadge"; "required": false; }; }, { "closed": "closed"; }, ["stepTemplates"], never, true, never>;
+}
+
+export { AccordionComponent, AccordionItemComponent, AutoCompleteMultiSelectComponent, AutoCompleteMultiSelectConfig, AutoCompleteSingleSelectComponent, AutoCompleteSingleSelectConfig, CatsUiService, CatsUiTooltipDirective, CheckBoxConfig, CheckBoxSubtask, CheckboxButtonComponent, CustomDatePickerComponent, DROPDOWN_CONTROL_VALUE_ACCESSOR, DROPDOWN_CONTROL_VALUE_VALIDATOR, InputComponent, InputConfig, MULTI_SELECT_CONTROL_VALUE_ACCESSOR, MULTI_SELECT_CONTROL_VALUE_VALIDATOR, MultiSelectComponent, MultiSelectConfig, OutsideClickDirective, RadioButtonComponent, SINGLE_SELECT_CONTROL_VALUE_ACCESSOR, SINGLE_SELECT_CONTROL_VALUE_VALIDATOR, SearchBoxComponent, SearchConfig, SingleSelectComponent, SingleSelectConfig, TabContentComponent, TabsetComponent, TimestampFilterComponent, ToggleConfig, ToogleButtonComponent, WizardComponent, WizardService, WizardStepDirective };
+export type { CalenderView, DatePickerConfig, DatePickerMode, DateRange, DateTimeResult, FilterType, RadioButtonConfig, TabConfig, TabItem, TimeFilterConfig, TimeFilterOption, TimeFilterOutput };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cats-ui-lib",
-  "version": "2.0.5",
+  "version": "2.0.7",
   "peerDependencies": {
     "@angular/core": ">=18 <22",
     "@angular/common": ">=18 <22"

package/styles/_utilities.scss

@@ -17,7 +17,7 @@
 }
 
 // ------------------Button Styles--------------------
-button {
+button.cats-btn {
   border: rem(1px) solid transparent;
   padding: 0 rem(28px);
   height: rem(56px);
@@ -230,7 +230,6 @@ button {
   font-weight: 600;
 }
 
-
 /* Padding Classes (sp prefix) */
 .sp-0 {
   padding: rem(0px);
@@ -801,6 +800,92 @@ button {
   border-radius: rem(36px);
 }
 
-.br-200{
+.br-200 {
   border-radius: rem(200px);
-}
+}
+
+// ------------------Checkbox Styles--------------------
+.checkbox-container,
+.item, .multiitem {
+  @include flex(flex-start, center, rem(8px));
+  @include fontStyle(var(--fs-16), rem(20px), 400);
+  margin-bottom: rem(8px);
+  color: var(--text-heading-primary);
+  &.disabled-option{
+    input[type="checkbox"]:checked{
+      background-color: var(--surface-background-subtle);
+      border-color: var(--border-core-default);
+      &::after{
+        background-image: url(/images/check-disabled.svg);
+      }
+    }
+    &::selection{
+      background-color: transparent;
+    }
+  }
+
+  input[type="checkbox"] {
+    appearance: none;
+    -webkit-appearance: none;
+    @include box(rem(16px), rem(16px));
+    min-width: rem(16px);
+    @include border();
+    cursor: pointer;
+    background-color: var(--surface-background-canvas);
+    position: relative;
+    transition: all 0.2s ease;
+
+    // --- Default (unchecked) ---
+    &::after {
+      content: "";
+      display: none;
+      position: absolute;
+      @include position(rem(-1px), rem(-1px));
+      @include box(rem(16px), rem(16px));
+      background-size: auto;
+      background-repeat: no-repeat;
+      background-position: center;
+    }
+    // --- Checked State ---
+    &:checked {
+      border-color: var(--border-interaction-focus);
+      background-color: var(--surface-action-default);
+      &::after {
+        display: block;
+        background-image: url("/images/check-white.svg");
+        background-size: rem(8px) rem(6px);
+      }
+    }
+    // --- Indeterminate (minus) state ---
+    &:indeterminate {
+      border-color: var(--border-interaction-focus);
+      background-color: var(--surface-background-canvas);
+      &::after {
+        display: block;
+        top: 0;
+        background-image: url("/images/minus-blue.svg");
+        background-size: rem(7px) rem(1px);
+      }
+    }
+    // Disabled (unchecked)
+    &:disabled {
+      cursor: default;
+      background-color: var(--surface-background-default);
+      border-color: var(--border-core-muted);
+      & + span {
+        color: var(--text-body-muted);
+      }
+    }
+
+    //  Disabled + Checked (IMPORTANT)
+    &:checked:disabled {
+      background-color: var(--surface-background-default);
+      border-color: var(--border-core-muted);
+
+      &::after {
+        display: block;
+        background-image: url("/images/check-disabled.svg");
+      }
+    }
+  }
+}