cats-ui-lib 2.0.3 → 2.0.5

package/index.d.ts

@@ -1,6 +1,7 @@
 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 {
@@ -54,8 +55,10 @@ declare class AutoCompleteMultiSelectConfig {
     placeholder?: string;
     required?: boolean;
     chipLimit: number;
-    customInput: boolean;
+    customInput?: boolean;
     pattern?: string;
+    infoText?: string;
+    selectionLimit?: number;
 }
 declare class ToggleConfig {
     checked: boolean;
@@ -424,6 +427,7 @@ declare class OutsideClickDirective {
 }
 
 declare class AutoCompleteMultiSelectComponent implements OnInit, ControlValueAccessor, Validator {
+    private sanitizer;
     autoCompleteMultiSelectConfig: AutoCompleteMultiSelectConfig;
     selectedItem: any;
     optionsList: any[];
@@ -437,12 +441,12 @@ declare class AutoCompleteMultiSelectComponent implements OnInit, ControlValueAc
     inValid: boolean;
     control: FormControl<any>;
     isDisabled: boolean;
-    constructor();
+    safePlaceholder: SafeHtml;
+    constructor(sanitizer: DomSanitizer);
     ngOnInit(): void;
     ngOnChanges(_changes: SimpleChanges): void;
     private onChange;
     private onTouched;
-    private applyDefaultConfig;
     /**
      * @description Method to toggle dropdown list
      * @author Shiva Kant
@@ -790,6 +794,142 @@ declare class DateTimePickerComponent implements OnInit, OnChanges, ControlValue
     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;
+    time?: boolean;
+    minDate?: Date;
+    maxDate?: Date;
+    placeholder?: string;
+    fromPlaceholder?: string;
+    toPlaceholder?: string;
+    dateFormat?: 'dd MMM yyyy' | 'MM/dd/yyyy' | 'yyyy-MM-dd';
+    parentDateFormat?: 'dd MMM yyyy' | 'MM/dd/yyyy' | 'yyyy-MM-dd';
+    disabledDates?: Date[];
+    disablePastDays?: number;
+    showDateLabel?: boolean;
+    showTimeLabel?: boolean;
+}
+interface DateRange {
+    from: string | null;
+    fromTime: string;
+    to: string | null;
+    toTime: string;
+}
+interface DateTimeResult {
+    date: string | null;
+    time: string;
+    meridiem: 'AM' | 'PM';
+}
+type CalenderView = 'day' | 'year' | 'month';
+declare class CustomDatePickerComponent implements OnInit, ControlValueAccessor {
+    private elRef;
+    config: DatePickerConfig;
+    label: string;
+    showHeader: boolean;
+    showTrigger: boolean;
+    applied: EventEmitter<string | Date | DateRange | DateTimeResult>;
+    cancelled: EventEmitter<void>;
+    rangeSelected: EventEmitter<DateRange>;
+    private onChange;
+    private onTouched;
+    isOpen: boolean;
+    selectedDate: Date | null;
+    tempDate: Date | null;
+    rangeFrom: Date | null;
+    rangeTo: Date | null;
+    tempFrom: Date | null;
+    tempTo: Date | null;
+    timeValue: string;
+    timeMeridiem: 'AM' | 'PM';
+    fromTimeValue: string;
+    fromTimeMeridiem: 'AM' | 'PM';
+    toTimeValue: string;
+    toTimeMeridiem: 'AM' | 'PM';
+    currentMonth: number;
+    currentYear: number;
+    weekDays: string[];
+    calendarDays: (number | null)[];
+    currentMonth2: number;
+    currentYear2: number;
+    calendarDays2: (number | null)[];
+    yearRange: number[];
+    calenderView: CalenderView;
+    activeCalendar: 'primary' | 'secondary';
+    monthNames: string[];
+    constructor(elRef: ElementRef);
+    ngOnInit(): void;
+    get mode(): DatePickerMode;
+    get showDateLabel(): boolean;
+    get time(): boolean;
+    get currentMonthYear(): string;
+    get currentMonthName(): string;
+    get activeMonthName(): string;
+    get activeYearValue(): number;
+    get displayValue(): string;
+    get tempDisplayValue(): string;
+    get tempFromDisplay(): string;
+    get tempToDisplay(): string;
+    writeValue(val: any): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    toggleCalendar(): void;
+    initializeCurrentMonthYear(): void;
+    onDocumentClick(event: MouseEvent): void;
+    buildCalendar(): void;
+    private buildCalendarDays;
+    private getNextMonthYear;
+    private getPrevMonthYear;
+    generateYearRange(year?: number): void;
+    openView(calendar: 'primary' | 'secondary', view: CalenderView): void;
+    getDayDisplay(day: number | null): string;
+    isOtherMonth(day: number | null): boolean;
+    getActualDay(day: number | null): number | null;
+    prevMonth(): void;
+    nextMonth(): void;
+    selectMonth(month: string): void;
+    previousYearRange(): void;
+    nextYearRange(): void;
+    selectYear(year: number): void;
+    selectDay(day: number | null, calendar?: 'primary' | 'secondary'): void;
+    isSelected(day: number | null, month?: number, year?: number): boolean;
+    isInRange(day: number | null, month?: number, year?: number): boolean;
+    isRangeStart(day: number | null, month?: number, year?: number): boolean;
+    isRangeEnd(day: number | null, month?: number, year?: number): boolean;
+    isToday(day: number | null, month?: number, year?: number): boolean;
+    isDayDisabled(day: number | null, month?: number, year?: number): boolean;
+    setTime(event: any): void;
+    singleTimeInSeconds: number | null;
+    fromTimeInSeconds: number | null;
+    toTimeInSeconds: number | null;
+    private convertToSeconds;
+    onSingleTimeChange(event: {
+        time: string;
+        meridiem: 'AM' | 'PM';
+    }): void;
+    onFromTimeChange(event: {
+        time: string;
+        meridiem: 'AM' | 'PM';
+    }): void;
+    onToTimeChange(event: {
+        time: string;
+        meridiem: 'AM' | 'PM';
+    }): void;
+    onApply(): void;
+    private normalizeTime;
+    appendTimeInDate(time: string, date: Date, timeMeridiem: string): Date;
+    onCancel(): void;
+    clearDate(): void;
+    cancelDate(source: string): void;
+    onDaySelected(day: number | null, calendar: 'primary' | 'secondary'): void;
+    isSameDay(a: Date | null, b: Date | null): boolean;
+    formatDate(date: Date, dateFormat?: string): string;
+    get canApply(): boolean;
+    private isValidTime;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CustomDatePickerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CustomDatePickerComponent, "cats-ui-custom-date-picker", never, { "config": { "alias": "config"; "required": false; }; "label": { "alias": "label"; "required": false; }; "showHeader": { "alias": "showHeader"; "required": false; }; "showTrigger": { "alias": "showTrigger"; "required": false; }; }, { "applied": "applied"; "cancelled": "cancelled"; "rangeSelected": "rangeSelected"; }, never, never, true, never>;
+}
+
 declare class CatsUiTooltipDirective implements OnInit, OnDestroy {
     private el;
     private renderer;
@@ -903,5 +1043,97 @@ declare class TabComponent {
     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>;
 }
 
-export { AccordionComponent, AccordionItemComponent, AutoCompleteMultiSelectComponent, AutoCompleteMultiSelectConfig, AutoCompleteSingleSelectComponent, AutoCompleteSingleSelectConfig, CatsUiService, CatsUiTooltipDirective, CheckBoxConfig, CheckBoxSubtask, CheckboxButtonComponent, 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, TabContentDirective, TabHeadingDirective, TabItemComponent, ToggleConfig, ToogleButtonComponent };
-export type { DateConfig, RadioButtonConfig };
+declare class TabContentComponent {
+    active: boolean;
+    tabId: number;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TabContentComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TabContentComponent, "cats-ui-tab-content", never, { "active": { "alias": "active"; "required": false; }; "tabId": { "alias": "tabId"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+
+interface TabConfig {
+    type?: 'Default' | 'Stroke' | string;
+    addTab?: boolean;
+    closeTab?: boolean;
+    homeTab?: boolean;
+}
+interface TabItem {
+    id: number;
+    title: string;
+    leadingIcon?: string;
+    tralingIocn?: string;
+    count?: number | string;
+    closable?: boolean;
+    isDisable?: boolean;
+    isHome?: boolean;
+}
+declare class TabsetComponent {
+    tabs: TabItem[];
+    activeTab: number | null;
+    activeTabChange: EventEmitter<number | null>;
+    tabConfig: TabConfig;
+    tabAdded: EventEmitter<TabItem>;
+    tabClosed: EventEmitter<number>;
+    contents: QueryList<TabContentComponent>;
+    counter: number;
+    ngAfterContentInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    addHomeTabIfNeeded(): void;
+    setActive(id: number): void;
+    closeTab(event: Event, id: number, index: number): void;
+    addTab(event: Event): void;
+    updateContentActivation(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TabsetComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TabsetComponent, "cats-ui-tabset", never, { "tabs": { "alias": "tabs"; "required": false; }; "activeTab": { "alias": "activeTab"; "required": false; }; "tabConfig": { "alias": "tabConfig"; "required": false; }; }, { "activeTabChange": "activeTabChange"; "tabAdded": "tabAdded"; "tabClosed": "tabClosed"; }, ["contents"], ["*"], true, never>;
+}
+
+type FilterType = 'live' | 'today' | 'week' | 'month' | 'fy' | 'last' | 'customRange' | 'customDate';
+interface TimeFilterOption {
+    label: string;
+    value: string;
+    type?: 'radio' | 'input' | 'submenu';
+    children?: TimeFilterOption[];
+    default?: boolean;
+    custom?: boolean;
+    pickerMode?: DatePickerMode;
+    time?: boolean;
+}
+interface TimeFilterConfig {
+    title?: string;
+    showReset?: boolean;
+    options: TimeFilterOption[];
+}
+interface TimeFilterOutput {
+    type: FilterType;
+    label?: string;
+    startDate?: Date;
+    endDate?: Date;
+    value?: number;
+    unit?: 'Hours' | 'Days';
+    key?: string;
+}
+declare class TimestampFilterComponent {
+    config: TimeFilterConfig;
+    selectionChange: EventEmitter<TimeFilterOutput>;
+    selectedValue: string | null;
+    activePicker: TimeFilterOption | null;
+    lastValue: number;
+    lastUnit: 'Hours' | 'Days';
+    ngOnInit(): void;
+    getPickerConfig(option: TimeFilterOption): DatePickerConfig;
+    selectOption(option: TimeFilterOption): void;
+    private startOfDay;
+    private startOfWeek;
+    private startOfFinancialYear;
+    private subtractTime;
+    emitLast(): void;
+    onLastChange(): void;
+    reset(): void;
+    private emit;
+    onDateApplied(event: any): void;
+    applied(dt: 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 };

package/package.json

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

package/styles/_mixins.scss

@@ -51,7 +51,7 @@ $ultraWideDesktop: 1919px;
 @mixin border(
   $width: rem(1px),
   $style: solid,
-  $color: var(--neutral-300),
+  $color: var(--border-core-default),
   $radius: rem(4px)
 ) {
   border: $width $style $color;