cax-design-system 2.5.0 → 2.6.1

package/resources/components/autocomplete/autocomplete.scss

@@ -1,11 +1,11 @@
 @layer cax {
     .cax-autocomplete {
-        display: inline-flex;
+        display: flex;
         position: relative;
+        height: 40px;
     }
 
     .cax-autocomplete-loader {
-        position: absolute;
         position: absolute;
         top: 50%;
         margin-top: -0.5rem;
@@ -106,72 +106,72 @@
         top: 50%;
         margin-top: -0.5rem;
         cursor: pointer;
-        margin-left: 9px;
+        left: 9px;
+        
     }  
     .cax-autocomplete-sm {
-        height: 32px;
+        height: 32px !important;
         .cax-inputtext{
-            font-size: 16px !important;
+            font-size: 12px !important;
         }
         .cax-autocomplete-clear-icon {
-            width: 16px !important;
-            height: 16px !important;
+            width: 12px !important;
+            height: 12px !important;
+            margin-top: -0.3rem;
         }
         .cax-autocomplete-search-icon{
-            width: 16px !important;
-            height: 16px !important;
+            width: 12px !important;
+            height: 12px !important;
+            margin-top: -0.3rem;
         }
 
        
       }
       
       .cax-autocomplete-md {
-        height: 40px;
+        height: 40px !important;
         .cax-inputtext{
-            font-size: 20px !important;
+            font-size: 16px !important;
         }
         .cax-autocomplete-clear-icon {
-            width: 20px !important;
-            height: 20px !important;
-            margin-top: -0.6rem;
+            width: 16px !important;
+            height: 16px !important;
 
         }
         .cax-autocomplete-search-icon{
-            width: 20px !important;
-            height: 20px !important;
-            margin-top: -0.6rem;
+            width: 16px !important;
+            height: 16px !important;
         }
         .cax-inputtext {
             padding-left: 2rem !important;
             padding-right: 2rem !important;
           }
           .cax-autocomplete-loader{
-            width: 20px !important;
-            height: 20px !important;
-            margin-top: -0.6rem;
+            width: 16px !important;
+            height: 16px !important;
           }
 
       }
       
       .cax-autocomplete-lg {
-        height: 48px;
+        height: 48px !important;
         .cax-inputtext{
-            font-size: 24px !important;
+            font-size: 18px !important;
         }
         .cax-autocomplete-clear-icon {
-            width: 24px !important;
-            height: 24px !important;
-            margin-top: -0.7rem;
+            width: 18px !important;
+            height: 18px !important;
+            margin-top: -0.6rem;
         }
         .cax-autocomplete-search-icon{
-            width: 24px !important;
-            height: 24px !important;
-            margin-top: -0.7rem;
+            width: 18px !important;
+            height: 18px !important;
+            margin-top: -0.6rem;
         }
         .cax-autocomplete-loader{
-            width: 24px !important;
-            height: 24px !important;
-            margin-top: -0.7rem;
+            width: 18px !important;
+            height: 18px !important;
+            margin-top: -0.6rem;
           }
         
        .cax-inputtext {
@@ -181,5 +181,4 @@
 
         
       }
-}
-
+}

package/resources/components/calendar/calendar.scss

@@ -1,15 +1,16 @@
 @layer cax {
     .cax-calendar {
         position: relative;
-        display: inline-flex;
-        max-width: 100%;
+        display: flex;
+        width: 216px !important;
+        height : 40px;
     }
 
     .cax-calendar .cax-inputtext {
         flex: 1 1 auto;
         text-overflow: ellipsis;
-        padding-left: 25px !important;
-        padding-right: 25px !important;
+        padding-left: 1.8rem !important;
+        padding-right: 1.8rem !important;
     }
 
     .cax-calendar-w-btn .cax-inputtext {
@@ -41,7 +42,7 @@
     }
 
     .cax-datepicker {
-         width: 372px;
+        width: 372px;
         position: absolute;
         top: 0;
         left: 0;
@@ -176,13 +177,12 @@
 
     .cax-datepicker-icon {
         pointer-events: none;
-        left: 8px;
+        left: 1.67px;
         color: black !important;
         margin-top: 1px !important;
     }
     .cax-input-icon-left {
         order: -1; 
-        margin-left: 20px; 
     }
     
 
@@ -191,9 +191,8 @@
     }
 
     .downarrow{
-        position: absolute;
-       right: 0.5rem;
-       top: 0.5rem;
+         top: 1.5rem !important;
+         color: black !important;
      
     }
 }

package/resources/components/chips/chips.scss

@@ -20,6 +20,16 @@
         align-items: center;
         flex: 0 0 auto;
         max-width: 100%;
+        border-radius: 8px;
+        padding: 0 10px;
+        background: var(--neutral-100);
+        border: 1px solid var(--neutral-200);
+        scroll-snap-align: end;
+        scroll-snap-stop: always;
+
+        &:hover {
+            border-color: var(--neutral-300);
+        }
     }
 
     .cax-chips-token-label {
@@ -38,6 +48,24 @@
 
     .cax-chips-token-icon {
         cursor: pointer;
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 20px;
+        min-height: 20px;
+
+        i {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+        }
+
+        &:hover {
+            color: var(--neutral-900);
+        }
     }
 
     .cax-chips-input-token input {
@@ -56,25 +84,52 @@
     }
 
     .cax-chips-clear-icon {
-        position: absolute;
-        top: 50%;
-        margin-top: -0.5rem;
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 20px;
+        min-height: 20px;
+        color: var(--neutral-750);
+        margin-left: 8px;
         cursor: pointer;
+
+        &:hover {
+            color: var(--neutral-900);
+        }
+
+        i {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+        }
     }
 
     .cax-chips-clearable .cax-inputtext {
         position: relative;
     }
+
     .cax-cax-edit-icon {
         margin-right: 5px;
         height: 15px;
         width: auto;
     }
+
     .cax-chips-wrapper {
         display: flex;
-        justify-content: space-between;
         align-items: center;
-        width: 100%;
+        flex: 1;
+        min-width: 0;
+        position: relative;
+    }
+
+    .cax-chips-content {
+        display: flex;
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
     }
 
     .cax-input-icon-left {
@@ -88,69 +143,62 @@
     }
 
     .cax-chips-input-token {
-        display: flex;
+        display: inline-flex;
         align-items: center;
-        justify-content: space-between;
-    }
+        min-width: 120px;
+        flex: 0 0 auto;
+        height: 100%;
 
-    .cax-chips-clear-icon {
-        cursor: pointer;
-    }
-    .cax-chips-icon-left {
-        margin-left: 8px;
-        margin-top: 2px;
-    }
-    .cax-chips-container {
-        display: flex;
-        align-items: center;
-        width: 216px;
-        height: 30px;
-        overflow: hidden;
-        white-space: nowrap;
-        border: transparent;
+        input {
+            width: 100%;
+            background: transparent;
+            border: none;
+            outline: none;
+            padding: 4px;
+            font-family: inherit;
+            font-size: inherit;
+        }
     }
 
-    .cax-chips-scrollable {
-        display: flex;
+    .cax-chips-icon-left {
+        position: relative;
+        display: inline-flex;
         align-items: center;
-        flex: 1;
-        overflow-x: auto;
-        overflow-y: hidden;
-        scrollbar-width: none;
-        -ms-overflow-style: none;
-    }
-
-    .cax-chips-scrollable::-webkit-scrollbar {
-        display: none;
-    }
-
-    .cax-chips-list {
-        display: flex;
-        gap: 6px;
-        margin: 0;
-        padding: 0;
-        list-style: none;
-        flex-shrink: 0;
-        overflow-x: hidden;
-    }
-
-    .cax-chips-input-container {
-        flex-shrink: 0;
-        display: flex;
+        justify-content: center;
+        min-width: 20px;
+        min-height: 20px;
+        color: var(--neutral-750);
+        margin-right: 8px;
+
+        i {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .cax-chips-icon-right {
+        position: relative;
+        display: inline-flex;
         align-items: center;
-        width: 50px;
-    }
-
-    .cax-chips-input {
-        height: 30px;
-        margin-left: 2px;
-        width: 140px;
-        border: transparent;
-        border-radius: 4px;
-        box-sizing: border-box;
-    }
+        justify-content: center;
+        min-width: 20px;
+        min-height: 20px;
+        color: var(--neutral-750);
+        margin-left: 8px;
 
-    .cax-chips-container.no-chips .cax-chips-input {
-        width: 100%;
+        i {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+        }
+
+        &:hover {
+            color: var(--neutral-900);
+        }
     }
 }

package/resources/components/dialog/dialog.scss

@@ -140,10 +140,10 @@
     }
     .cax-header-allign {
         display: flex;
+        align-items: center;
     }
-    .cax-dialog-icon {
+    .cax-dialog-header-icon {
         font-size: 1.25rem;
-        margin-top: 11%;
     }
 
     .cax-confirm-dialog .cax-dialog-content {

package/resources/components/dropdown/dropdown.scss

@@ -13,6 +13,12 @@
         top: 50%;
         margin-top: -0.5rem;
     }
+    .cax-dropdown-main-label {
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 20px;
+        margin-bottom: 8px;
+    }
 
     .cax-dropdown-trigger {
         display: flex;

package/resources/components/table/table.scss

@@ -27,7 +27,6 @@
     }
 
     .cax-datatable .cax-sortable-column {
-        cursor: pointer;
         user-select: none;
     }
 
@@ -191,10 +190,38 @@
         display: flex;
         align-items: center;
         width: 100%;
+        i {
+            font-size: 20px;
+        }
     }
 
-    .cax-column-filter-menu {
+    .cax-column-filter-menu,
+    .cax-column-filter-custom {
         display: inline-flex;
+        position: relative;
+        float: right;
+        margin-left: 4px;
+        i {
+            font-size: 20px;
+        }
+    }
+
+    .cax-column-filter-custom-container {
+        padding: 16px;
+        display: flex;
+        gap: 16px;
+        flex-direction: column;
+        .cax-column-filter-custom-buttons {
+            display: flex;
+            gap: 12px;
+            cax-button {
+                flex: 1;
+            }
+        }
+    }
+
+    .cax-column-filter-overlay-custom {
+        width: 248px;
     }
 
     .cax-column-filter-row cax-columnfilterformelement {
@@ -213,6 +240,10 @@
         position: relative;
     }
 
+    .cax-column-filter-menu-button:disabled {
+        opacity: 0.5;
+    }
+
     .cax-column-filter-overlay {
         position: absolute;
         top: 0;
@@ -243,6 +274,7 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
+        gap: 12px;
     }
 
     .cax-column-filter-buttonbar .cax-button {
@@ -393,3 +425,27 @@ $checkbox-size-xl: 22px;
 .cax-cell-background-error {
     background: var(--error-50);
 }
+
+.cax-sort-icon-button {
+    border: 0;
+    width: 28px;
+    height: 28px !important;
+    display: flex;
+    background: transparent;
+    cursor: pointer;
+    padding: 0 !important;
+    align-items: center;
+    justify-content: center;
+    i {
+        font-size: 20px;
+    }
+    &:disabled {
+        opacity: 0.5;
+        cursor: context-menu;
+    }
+}
+
+cax-sorticon {
+    float: right;
+    margin-left: 4px;
+}

package/resources/components/timeline/timeline.scss

@@ -48,7 +48,6 @@
     .cax-timeline-event {
         display: flex;
         position: relative;
-        min-height: 70px;
     }
 
     .cax-timeline-event:last-child {

package/sidebar/sidebar.d.ts

@@ -127,6 +127,13 @@ export declare class Sidebar implements AfterViewInit, AfterContentInit, OnDestr
     headlessTemplate: TemplateRef<any> | null;
     footerTemplate: Nullable<TemplateRef<any>>;
     closeIconTemplate: TemplateRef<any> | null;
+    /**
+     * Inline style of the header section.
+     * @group Props
+     */
+    headerStyle: {
+        [klass: string]: any;
+    };
     constructor(document: Document, el: ElementRef, renderer: Renderer2, cd: ChangeDetectorRef, config: caxConfig);
     ngAfterViewInit(): void;
     ngAfterContentInit(): void;
@@ -147,7 +154,7 @@ export declare class Sidebar implements AfterViewInit, AfterContentInit, OnDestr
     unbindAnimationEndListener(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<Sidebar, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<Sidebar, "cax-sidebar", never, { "headerText": { "alias": "headerText"; "required": false; }; "appendTo": { "alias": "appendTo"; "required": false; }; "blockScroll": { "alias": "blockScroll"; "required": false; }; "style": { "alias": "style"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; "ariaCloseLabel": { "alias": "ariaCloseLabel"; "required": false; }; "autoZIndex": { "alias": "autoZIndex"; "required": false; }; "baseZIndex": { "alias": "baseZIndex"; "required": false; }; "modal": { "alias": "modal"; "required": false; }; "dismissible": { "alias": "dismissible"; "required": false; }; "showCloseIcon": { "alias": "showCloseIcon"; "required": false; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; }; "transitionOptions": { "alias": "transitionOptions"; "required": false; }; "visible": { "alias": "visible"; "required": false; }; "position": { "alias": "position"; "required": false; }; "fullScreen": { "alias": "fullScreen"; "required": false; }; "contentTemplate": { "alias": "contentTemplate"; "required": false; }; "headerTemplate": { "alias": "headerTemplate"; "required": false; }; "headlessTemplate": { "alias": "headlessTemplate"; "required": false; }; "footerTemplate": { "alias": "footerTemplate"; "required": false; }; "closeIconTemplate": { "alias": "closeIconTemplate"; "required": false; }; }, { "onShow": "onShow"; "onHide": "onHide"; "visibleChange": "visibleChange"; }, ["templates"], ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Sidebar, "cax-sidebar", never, { "headerText": { "alias": "headerText"; "required": false; }; "appendTo": { "alias": "appendTo"; "required": false; }; "blockScroll": { "alias": "blockScroll"; "required": false; }; "style": { "alias": "style"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; "ariaCloseLabel": { "alias": "ariaCloseLabel"; "required": false; }; "autoZIndex": { "alias": "autoZIndex"; "required": false; }; "baseZIndex": { "alias": "baseZIndex"; "required": false; }; "modal": { "alias": "modal"; "required": false; }; "dismissible": { "alias": "dismissible"; "required": false; }; "showCloseIcon": { "alias": "showCloseIcon"; "required": false; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; }; "transitionOptions": { "alias": "transitionOptions"; "required": false; }; "visible": { "alias": "visible"; "required": false; }; "position": { "alias": "position"; "required": false; }; "fullScreen": { "alias": "fullScreen"; "required": false; }; "contentTemplate": { "alias": "contentTemplate"; "required": false; }; "headerTemplate": { "alias": "headerTemplate"; "required": false; }; "headlessTemplate": { "alias": "headlessTemplate"; "required": false; }; "footerTemplate": { "alias": "footerTemplate"; "required": false; }; "closeIconTemplate": { "alias": "closeIconTemplate"; "required": false; }; "headerStyle": { "alias": "headerStyle"; "required": false; }; }, { "onShow": "onShow"; "onHide": "onHide"; "visibleChange": "visibleChange"; }, ["templates"], ["*"], true, never>;
     static ngAcceptInputType_blockScroll: unknown;
     static ngAcceptInputType_autoZIndex: unknown;
     static ngAcceptInputType_baseZIndex: unknown;

package/table/components/column-filter/column-filter.d.ts

@@ -24,6 +24,7 @@ export declare class ColumnFilter implements AfterContentInit {
      * @group Props
      */
     type: string;
+    disabled: boolean;
     /**
      * Filter display.
      * @group Props
@@ -200,8 +201,34 @@ export declare class ColumnFilter implements AfterContentInit {
     get removeRuleButtonAriaLabel(): string;
     get filterOperatorAriaLabel(): string;
     get filterConstraintAriaLabel(): string;
+    customFilterListVisible: boolean;
+    selectedCustomFilter: any;
+    commonFilterOptions: {
+        label: string;
+        key: string;
+    }[];
+    stringFilterOptions: {
+        label: string;
+        key: string;
+    }[];
+    numberFilterOptions: {
+        label: string;
+        key: string;
+    }[];
+    dateFilterOptions: {
+        label: string;
+        key: string;
+    }[];
+    customInputFilter: string;
+    customNumberFilter1: number;
+    customNumberFilter2: number;
+    customDateFilter: any;
     constructor(document: Document, el: ElementRef, dt: Table, renderer: Renderer2, config: caxConfig, overlayService: OverlayService, cd: ChangeDetectorRef);
     ngOnInit(): void;
+    getSelectedFilter(key: string): {
+        label: string;
+        key: string;
+    } | undefined;
     generateMatchModeOptions(): void;
     generateOperatorOptions(): void;
     ngAfterContentInit(): void;
@@ -239,8 +266,16 @@ export declare class ColumnFilter implements AfterContentInit {
     clearFilter(): void;
     applyFilter(): void;
     ngOnDestroy(): void;
+    toggleCustomFilterList(): void;
+    selectCustomFilter(option: any): void;
+    get isCustomCommonFilterSelected(): boolean;
+    get isCustomStringFilterSelected(): boolean;
+    get isCustomNumberFilterSelected(): boolean;
+    get isCustomDateFilterSelected(): boolean;
+    onClearCustomFilters(): void;
+    onApplyCustomFilters(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ColumnFilter, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ColumnFilter, "cax-columnFilter", never, { "field": { "alias": "field"; "required": false; }; "type": { "alias": "type"; "required": false; }; "display": { "alias": "display"; "required": false; }; "showMenu": { "alias": "showMenu"; "required": false; }; "matchMode": { "alias": "matchMode"; "required": false; }; "operator": { "alias": "operator"; "required": false; }; "showOperator": { "alias": "showOperator"; "required": false; }; "showClearButton": { "alias": "showClearButton"; "required": false; }; "showApplyButton": { "alias": "showApplyButton"; "required": false; }; "showMatchModes": { "alias": "showMatchModes"; "required": false; }; "showAddButton": { "alias": "showAddButton"; "required": false; }; "hideOnClear": { "alias": "hideOnClear"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "matchModeOptions": { "alias": "matchModeOptions"; "required": false; }; "maxConstraints": { "alias": "maxConstraints"; "required": false; }; "minFractionDigits": { "alias": "minFractionDigits"; "required": false; }; "maxFractionDigits": { "alias": "maxFractionDigits"; "required": false; }; "prefix": { "alias": "prefix"; "required": false; }; "suffix": { "alias": "suffix"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "localeMatcher": { "alias": "localeMatcher"; "required": false; }; "currency": { "alias": "currency"; "required": false; }; "currencyDisplay": { "alias": "currencyDisplay"; "required": false; }; "useGrouping": { "alias": "useGrouping"; "required": false; }; "showButtons": { "alias": "showButtons"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; }, { "onShow": "onShow"; "onHide": "onHide"; }, ["templates"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ColumnFilter, "cax-columnFilter", never, { "field": { "alias": "field"; "required": false; }; "type": { "alias": "type"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "display": { "alias": "display"; "required": false; }; "showMenu": { "alias": "showMenu"; "required": false; }; "matchMode": { "alias": "matchMode"; "required": false; }; "operator": { "alias": "operator"; "required": false; }; "showOperator": { "alias": "showOperator"; "required": false; }; "showClearButton": { "alias": "showClearButton"; "required": false; }; "showApplyButton": { "alias": "showApplyButton"; "required": false; }; "showMatchModes": { "alias": "showMatchModes"; "required": false; }; "showAddButton": { "alias": "showAddButton"; "required": false; }; "hideOnClear": { "alias": "hideOnClear"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "matchModeOptions": { "alias": "matchModeOptions"; "required": false; }; "maxConstraints": { "alias": "maxConstraints"; "required": false; }; "minFractionDigits": { "alias": "minFractionDigits"; "required": false; }; "maxFractionDigits": { "alias": "maxFractionDigits"; "required": false; }; "prefix": { "alias": "prefix"; "required": false; }; "suffix": { "alias": "suffix"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "localeMatcher": { "alias": "localeMatcher"; "required": false; }; "currency": { "alias": "currency"; "required": false; }; "currencyDisplay": { "alias": "currencyDisplay"; "required": false; }; "useGrouping": { "alias": "useGrouping"; "required": false; }; "showButtons": { "alias": "showButtons"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; }, { "onShow": "onShow"; "onHide": "onHide"; }, ["templates"], never, true, never>;
     static ngAcceptInputType_showMenu: unknown;
     static ngAcceptInputType_showOperator: unknown;
     static ngAcceptInputType_showClearButton: unknown;

package/table/components/sort-icon/sort-icon.d.ts

@@ -6,6 +6,7 @@ export declare class SortIcon implements OnInit, OnDestroy {
     dt: Table;
     cd: ChangeDetectorRef;
     field: string | undefined;
+    disabled: boolean;
     subscription: Subscription | undefined;
     sortOrder: number | undefined;
     constructor(dt: Table, cd: ChangeDetectorRef);
@@ -17,5 +18,5 @@ export declare class SortIcon implements OnInit, OnDestroy {
     isMultiSorted(): boolean;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SortIcon, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SortIcon, "cax-sortIcon", never, { "field": { "alias": "field"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SortIcon, "cax-sortIcon", never, { "field": { "alias": "field"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, true, never>;
 }

package/table/directives/sortable-column.directive.d.ts

@@ -15,8 +15,8 @@ export declare class SortableColumn implements OnInit, OnDestroy {
     onClick(event: MouseEvent): void;
     onEnterKey(event: MouseEvent): void;
     isEnabled(): boolean;
-    isFilterElement(element: HTMLElement): boolean;
-    private isFilterElementIconOrButton;
+    isSortElement(element: HTMLElement): boolean;
+    private isSortButton;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SortableColumn, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<SortableColumn, "[caxSortableColumn]", never, { "field": { "alias": "caxSortableColumn"; "required": false; }; "caxSortableColumnDisabled": { "alias": "caxSortableColumnDisabled"; "required": false; }; }, {}, never, never, true, never>;