cax-design-system 2.4.1 → 2.6.0

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,8 +106,79 @@
         top: 50%;
         margin-top: -0.5rem;
         cursor: pointer;
-        margin-left: 9px;
+        left: 9px;
+        
     }  
- 
-}
-
+    .cax-autocomplete-sm {
+        height: 32px !important;
+        .cax-inputtext{
+            font-size: 12px !important;
+        }
+        .cax-autocomplete-clear-icon {
+            width: 12px !important;
+            height: 12px !important;
+            margin-top: -0.3rem;
+        }
+        .cax-autocomplete-search-icon{
+            width: 12px !important;
+            height: 12px !important;
+            margin-top: -0.3rem;
+        }
+
+       
+      }
+      
+      .cax-autocomplete-md {
+        height: 40px !important;
+        .cax-inputtext{
+            font-size: 16px !important;
+        }
+        .cax-autocomplete-clear-icon {
+            width: 16px !important;
+            height: 16px !important;
+
+        }
+        .cax-autocomplete-search-icon{
+            width: 16px !important;
+            height: 16px !important;
+        }
+        .cax-inputtext {
+            padding-left: 2rem !important;
+            padding-right: 2rem !important;
+          }
+          .cax-autocomplete-loader{
+            width: 16px !important;
+            height: 16px !important;
+          }
+
+      }
+      
+      .cax-autocomplete-lg {
+        height: 48px !important;
+        .cax-inputtext{
+            font-size: 18px !important;
+        }
+        .cax-autocomplete-clear-icon {
+            width: 18px !important;
+            height: 18px !important;
+            margin-top: -0.6rem;
+        }
+        .cax-autocomplete-search-icon{
+            width: 18px !important;
+            height: 18px !important;
+            margin-top: -0.6rem;
+        }
+        .cax-autocomplete-loader{
+            width: 18px !important;
+            height: 18px !important;
+            margin-top: -0.6rem;
+          }
+        
+       .cax-inputtext {
+          padding-left: 2.4rem !important;
+          padding-right: 2.4rem !important;
+        }
+
+        
+      }
+}

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,37 @@
         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;
+        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 {
@@ -243,6 +269,7 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
+        gap: 12px;
     }
 
     .cax-column-filter-buttonbar .cax-button {
@@ -393,3 +420,24 @@ $checkbox-size-xl: 22px;
 .cax-cell-background-error {
     background: var(--error-50);
 }
+
+.cax-sort-icon-button {
+    border: 0;
+    width: 28px;
+    height: 28px;
+    display: flex;
+    background: transparent;
+    cursor: pointer;
+    padding: 0;
+
+    align-items: center;
+    justify-content: center;
+    i {
+        font-size: 20px;
+    }
+}
+
+cax-sorticon {
+    float: right;
+    margin-left: 8px;
+}

package/resources/components/tabview/tabview.scss

@@ -2,7 +2,25 @@
     .cax-tabview-nav-container {
         position: relative;
     }
-
+    .cax-tabview-nav-container.block-mode {
+        display: block;
+    }
+    .cax-tabview-nav-container.flex-mode {
+        display: flex;
+    }
+    .cax-tabview-action-buttons {
+        display: flex;
+        align-items: center;
+        margin-left: auto;
+    }
+    
+    .cax-tabview-separator {
+        width: 2px;
+        height: 35px;
+        display: inline-block;
+        vertical-align: middle;
+        margin-right: 8px;
+    }
     .cax-tabview-scrollable .cax-tabview-nav-container {
         overflow: hidden;
         white-space: nowrap;

package/resources/components/timeline/timeline.scss

@@ -48,25 +48,19 @@
     .cax-timeline-event {
         display: flex;
         position: relative;
-        min-height: 70px;
     }
 
     .cax-timeline-event:last-child {
         min-height: 0;
     }
-
-    .cax-timeline-event-opposite {
-        flex: 1;
-        padding: 0 1rem;
-        min-width: 100px;
-    }
-
     .cax-timeline-event-content {
-        flex: 1;
         padding: 0 1rem;
         min-width: 100px;
         border-radius: 8px;
-        //margin-left: 8px;
+    }
+    
+    .cax-timeline-event-opposite:empty {
+        display: none;
     }
     .cax-timeline-event-separator {
         flex: 0;

package/selectbutton/public_api.d.ts

@@ -1,2 +1,3 @@
 export * from './selectbutton';
 export * from './selectbutton.interface';
+export * from './selectbutton.module';

package/selectbutton/selectbutton.d.ts

@@ -4,10 +4,6 @@ import { CaxTemplate } from 'cax-design-system/api';
 import { Nullable } from 'cax-design-system/ts-helpers';
 import { SelectButtonChangeEvent, SelectButtonOptionClickEvent } from './selectbutton.interface';
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
-import * as i2 from "cax-design-system/ripple";
-import * as i3 from "cax-design-system/api";
-import * as i4 from "cax-design-system/autofocus";
 export declare const SELECTBUTTON_VALUE_ACCESSOR: any;
 /**
  * SelectButton is used to choose single or multiple items from a list using buttons.
@@ -35,6 +31,7 @@ export declare class SelectButton implements ControlValueAccessor {
      * @group Props
      */
     optionDisabled: string | undefined;
+    invalid: boolean;
     /**
      * Whether selection can be cleared.
      * @group Props
@@ -121,7 +118,7 @@ export declare class SelectButton implements ControlValueAccessor {
     removeOption(option: any): void;
     isSelected(option: any): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<SelectButton, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SelectButton, "p-selectButton", never, { "options": { "alias": "options"; "required": false; }; "optionLabel": { "alias": "optionLabel"; "required": false; }; "optionValue": { "alias": "optionValue"; "required": false; }; "optionDisabled": { "alias": "optionDisabled"; "required": false; }; "unselectable": { "alias": "unselectable"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "allowEmpty": { "alias": "allowEmpty"; "required": false; }; "style": { "alias": "style"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "dataKey": { "alias": "dataKey"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; }, { "onOptionClick": "onOptionClick"; "onChange": "onChange"; }, ["itemTemplate"], never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SelectButton, "cax-selectButton", never, { "options": { "alias": "options"; "required": false; }; "optionLabel": { "alias": "optionLabel"; "required": false; }; "optionValue": { "alias": "optionValue"; "required": false; }; "optionDisabled": { "alias": "optionDisabled"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "unselectable": { "alias": "unselectable"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "allowEmpty": { "alias": "allowEmpty"; "required": false; }; "style": { "alias": "style"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "dataKey": { "alias": "dataKey"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; }, { "onOptionClick": "onOptionClick"; "onChange": "onChange"; }, ["itemTemplate"], never, false, never>;
     static ngAcceptInputType_unselectable: unknown;
     static ngAcceptInputType_tabindex: unknown;
     static ngAcceptInputType_multiple: unknown;
@@ -129,8 +126,3 @@ export declare class SelectButton implements ControlValueAccessor {
     static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_autofocus: unknown;
 }
-export declare class SelectButtonModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<SelectButtonModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<SelectButtonModule, [typeof SelectButton], [typeof i1.CommonModule, typeof i2.RippleModule, typeof i3.SharedModule, typeof i4.AutoFocusModule], [typeof SelectButton, typeof i3.SharedModule]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<SelectButtonModule>;
-}

package/selectbutton/selectbutton.module.d.ts

@@ -0,0 +1,11 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./selectbutton";
+import * as i2 from "@angular/common";
+import * as i3 from "cax-design-system/ripple";
+import * as i4 from "cax-design-system/api";
+import * as i5 from "cax-design-system/autofocus";
+export declare class SelectButtonModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SelectButtonModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SelectButtonModule, [typeof i1.SelectButton], [typeof i2.CommonModule, typeof i3.RippleModule, typeof i4.SharedModule, typeof i5.AutoFocusModule], [typeof i1.SelectButton, typeof i4.SharedModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<SelectButtonModule>;
+}

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/splitbutton/splitbutton.d.ts

@@ -43,7 +43,7 @@ export declare class SplitButton {
      * Defines the size of the button.
      * @group Props
      */
-    size: 'small' | 'large' | undefined | null;
+    size: 'small' | 'medium' | 'large' | undefined | null;
     /**
      * Add a plain textual class to the button without a background initially.
      * @group Props
@@ -196,7 +196,7 @@ export declare class SplitButton {
     ngOnInit(): void;
     ngAfterContentInit(): void;
     get containerClass(): {
-        [x: string]: boolean | "small" | "large";
+        [x: string]: boolean | "small" | "medium" | "large";
         'cax-splitbutton cax-component': boolean;
         'cax-button-raised': boolean;
         'cax-button-rounded': boolean;