cax-design-system 2.7.2 → 2.7.4

package/resources/components/calendar/calendar.scss

@@ -1,198 +1,228 @@
 @layer cax {
-    .cax-calendar {
-        position: relative;
-        display: flex;
-        width: 216px !important;
-        height : 40px;
-    }
-
-    .cax-calendar .cax-inputtext {
-        flex: 1 1 auto;
-        text-overflow: ellipsis;
-        padding-left: 1.8rem !important;
-        padding-right: 1.8rem !important;
-    }
-
-    .cax-calendar-w-btn .cax-inputtext {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-    }
-
-    .cax-calendar-w-btn .cax-datepicker-trigger {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-    }
-
-    .cax-datepicker-calendar-container {
-        padding: 4px;
-    }
-
-    /* Fluid */
-    .cax-fluid .cax-calendar {
-        display: flex;
-    }
-
-    .cax-fluid .cax-calendar .cax-inputtext {
-        width: 1%;
-    }
-
-    /* Datepicker */
-    .cax-calendar .cax-datepicker {
-        min-width: fit-content;
-    }
-
-    .cax-datepicker {
-        width: 372px;
+   .cax-calendar {
+       position: relative;
+       display: inline-flex;
+       max-width: 100%;
+   }
+
+   .cax-calendar .cax-inputtext {
+       flex: 1 1 auto;
+       width: 1%;
+       text-overflow: ellipsis;
+       padding-left: 1.8rem !important;
+      padding-right: 1.8rem !important;
+   }
+
+   .cax-calendar-w-btn .cax-inputtext {
+       border-top-right-radius: 0;
+       border-bottom-right-radius: 0; 
+   }
+
+   .cax-calendar-w-btn .cax-datepicker-trigger {
+       border-top-left-radius: 0;
+       border-bottom-left-radius: 0;
+   }
+
+   /* Fluid */
+   .cax-fluid .cax-calendar {
+       display: flex;
+   }
+
+   .cax-fluid .cax-calendar .cax-inputtext {
+       width: 1%;
+   }
+
+   /* Datepicker */
+   .cax-calendar .cax-datepicker {
+       min-width: 100%;
+   }
+
+   .cax-datepicker {
+       width: auto;
+       position: absolute;
+       top: 0;
+       left: 0;
+   }
+
+   .cax-datepicker-inline {
+       display: inline-block;
+       position: static;
+       overflow-x: auto;
+   }
+
+   /* Header */
+   .cax-datepicker-header {
+       display: flex;
+       align-items: center;
+       justify-content: space-between;
+   }
+
+   .cax-datepicker-header .cax-datepicker-title {
+       margin: 0 auto;
+   }
+
+   .cax-datepicker-prev,
+   .cax-datepicker-next {
+       cursor: pointer;
+       display: inline-flex;
+       justify-content: center;
+       align-items: center;
+       overflow: hidden;
+       position: relative;
+      
+   }
+
+   /* Multiple Month DatePicker */
+   .cax-datepicker-multiple-month .cax-datepicker-group-container {
+       display: flex;
+   }
+
+   .cax-datepicker-multiple-month .cax-datepicker-group-container .cax-datepicker-group {
+       flex: 1 1 auto;
+   }
+
+   /* Multiple Month DatePicker */
+   .cax-datepicker-multiple-month .cax-datepicker-group-container {
+       display: flex;
+   }
+
+   /* DatePicker Table */
+   .cax-datepicker table {
+       width: 100%;
+       border-collapse: collapse;
+   }
+
+   .cax-datepicker td > span {
+       display: flex;
+       justify-content: center;
+       align-items: center;
+       cursor: pointer;
+       margin: 0 auto;
+       overflow: hidden;
+       position: relative;
+   }
+
+   /* Month Picker */
+   .cax-monthpicker-month {
+       width: 33.3%;
+       display: inline-flex;
+       align-items: center;
+       justify-content: center;
+       cursor: pointer;
+       overflow: hidden;
+       position: relative;
+   }
+
+   /*  Button Bar */
+   .cax-datepicker-buttonbar {
+       display: flex;
+       justify-content: space-between;
+       align-items: center;
+   }
+
+   /* Time Picker */
+   .cax-timepicker {
+       display: flex;
+       justify-content: center;
+       align-items: center;
+   }
+
+   .cax-timepicker button {
+       display: flex;
+       align-items: center;
+       justify-content: center;
+       cursor: pointer;
+       overflow: hidden;
+       position: relative;
+   }
+
+   .cax-timepicker > div {
+       display: flex;
+       align-items: center;
+       flex-direction: column;
+   }
+
+   /* Touch UI */
+   .cax-datepicker-touch-ui,
+   .cax-calendar .cax-datepicker-touch-ui {
+       position: fixed;
+       top: 50%;
+       left: 50%;
+       min-width: 80vw;
+       transform: translate(-50%, -50%);
+   }
+
+   /* Year Picker */
+   .cax-yearpicker-year {
+       width: 50%;
+       display: inline-flex;
+       align-items: center;
+       justify-content: center;
+       cursor: pointer;
+       overflow: hidden;
+       position: relative;
+   }
+
+   .cax-calendar-clear-icon {
+       position: absolute;
+       top: 50%;
+       margin-top: -0.5rem;
+       cursor: pointer;
+   }
+
+   .cax-datepicker-icon {
+       pointer-events: none;
+   }
+
+   .cax-calendar-clearable {
+       position: relative;
+   }
+   .cax-datepicker-icon {
+       pointer-events: none;
+       left: 1.67px;
+       margin-top: 1px !important;
+   }
+   .cax-input-icon-left {
+       order: -1; 
+   }
+
+   .cax-datepicker-inline-actions {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 13px;
+    padding: 10px;
+    
+    
+    .cax-datepicker-inline-input {
+      margin-bottom: 10px;
+      position: relative;
+      display: inline-block;
+      input {
+        width: 130px;
+        height: 32px;
+        padding-left: 2rem;
+        border-radius: 8px;
+        font-size: 14px;
+        font-weight: 500;
+      }
+    }
+
+    .cax-datepicker-inline-input .cax-calendar-minimalistic {
         position: absolute;
-        top: 0;
-        left: 0;
-    }
-
-    .cax-datepicker-inline {
-        display: inline-block;
-        position: static;
-        overflow-x: auto;
-    }
-
-    /* Header */
-    .cax-datepicker-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-    }
-
-    .cax-datepicker-header .cax-datepicker-title {
-        margin: 0 auto;
-    }
-
-    .cax-datepicker-prev,
-    .cax-datepicker-next {
-        cursor: pointer;
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        overflow: hidden;
-        position: relative;
-    }
-
-    /* Multiple Month DatePicker */
-    .cax-datepicker-multiple-month .cax-datepicker-group-container {
-        display: flex;
-    }
-
-    .cax-datepicker-multiple-month .cax-datepicker-group-container .cax-datepicker-group {
-        flex: 1 1 auto;
-    }
-
-    /* Multiple Month DatePicker */
-    .cax-datepicker-multiple-month .cax-datepicker-group-container {
-        display: flex;
-    }
-
-    /* DatePicker Table */
-    .cax-datepicker table {
-        width: 100%;
-        border-collapse: collapse;
-    }
-
-    .cax-datepicker td > span {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        cursor: pointer;
-        margin: 0 auto;
-        overflow: hidden;
-        position: relative;
-    }
-
-    /* Month Picker */
-    .cax-monthpicker-month {
-        width: 33.3%;
-        height: 56px;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        overflow: hidden;
-        position: relative;
-    }
-
-    /*  Button Bar */
-    .cax-datepicker-buttonbar {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-
-    /* Time Picker */
-    .cax-timepicker {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-
-    .cax-timepicker button {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        overflow: hidden;
-        position: relative;
-    }
-
-    .cax-timepicker > div {
-        display: flex;
-        align-items: center;
-        flex-direction: column;
-    }
-
-    /* Touch UI */
-    .cax-datepicker-touch-ui,
-    .cax-calendar .cax-datepicker-touch-ui {
-        position: fixed;
+        left: 0.6rem;
         top: 50%;
-        left: 50%;
-        min-width: 80vw;
-        transform: translate(-50%, -50%);
-    }
+        transform: translateY(-50%);
+        font-size: 1rem;
+        pointer-events: none;
+      }
+  }
 
-    /* Year Picker */
-    .cax-yearpicker-year {
-        width: 33.3%;
-        height: 56px;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        overflow: hidden;
-        position: relative;
-    }
+  .left-side{
+    display: flex;
+    justify-content: space-between;
+    gap: 15px;
+  }
 
-    .cax-calendar-clear-icon {
-        position: absolute;
-        top: 50%;
-        margin-top: -0.5rem;
-        cursor: pointer;
-    }
 
-    .cax-datepicker-icon {
-        pointer-events: none;
-        left: 1.67px;
-        color: black !important;
-        margin-top: 1px !important;
-    }
-    .cax-input-icon-left {
-        order: -1; 
-    }
-    
 
-    .cax-calendar-clearable {
-        position: relative;
-    }
-
-    .downarrow{
-         top: 1.5rem !important;
-         color: black !important;
-     
-    }
 }

package/resources/components/common/common.scss

@@ -106,6 +106,7 @@
 
     .cax-link:disabled {
         cursor: default;
+        opacity: 0.3;
     }
 
     .cax-sr-only {

package/resources/components/dropdown/dropdown.scss

@@ -27,6 +27,14 @@
         flex-shrink: 0;
     }
 
+    .cax-dropdown-trigger-icon {
+        transition: transform 0.3s ease;
+    }
+
+    .cax-dropdown-open .cax-dropdown-trigger-icon {
+        transform: rotate(180deg);
+    }
+
     .cax-dropdown-label {
         display: block;
         white-space: nowrap;

package/resources/components/navigation/navigation.scss

@@ -2,17 +2,20 @@
     .cax-nav {
         width: 88px;
         height: 100vh;
-        transition: width 0.3s ease-in-out;
+        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         overflow: hidden;
         padding: 16px 8px;
         position: absolute;
         left: 0;
         top: 0;
         z-index: 1200;
+        will-change: width;
         .cax-nav-header {
             .cax-image img {
                 max-width: 26px;
                 object-fit: cover;
+                transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                will-change: max-width;
             }
         }
     }
@@ -20,11 +23,13 @@
         width: 264px;
         .cax-nav-bottom-container {
             width: 248px;
+            transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         }
         .cax-nav-header {
             .cax-image img {
                 max-width: 100px;
                 object-fit: cover;
+                transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
             }
         }
     }
@@ -67,6 +72,16 @@
                 cursor: pointer;
                 height: 56px;
                 line-height: 24px;
+
+                .cax-image {
+                    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                    will-change: transform;
+                }
+                .cax-image img {
+                    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                    will-change: opacity;
+                    backface-visibility: hidden;
+                }
             }
         }
     }
@@ -88,13 +103,23 @@
         border-radius: 12px;
         padding: 12px;
         cursor: pointer;
-        transition: width 0.3s ease-in-out;
+        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         display: flex;
         align-items: flex-start;
+        will-change: width;
         .cax-nav-account-icon {
             display: grid;
             margin-left: auto;
         }
+        .cax-avatar {
+            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            will-change: transform;
+        }
+        .cax-avatar img {
+            transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            will-change: opacity;
+            backface-visibility: hidden;
+        }
     }
 
     .cax-nav.cax-nav-expand .cax-nav-account-details {

package/resources/components/sidebar/sidebar.scss

@@ -1,10 +1,55 @@
 @layer cax {
-    .cax-sidebar {
-        position: fixed;
-        transition: transform 0.3s;
+    .cax-sidebar-layout-wrapper {
         display: flex;
-        flex-direction: column;
-    }
+        width: 100%;
+        height: 100%;
+        position: relative;
+        background-color: white;
+      }
+      
+      .cax-sidebar-content-wrapper {
+        flex: 1;
+        transition: margin 0.3s ease;
+      
+        &.shift-left {
+          margin-left: 300px; 
+        }
+      
+        &.shift-right {
+          margin-right: 300px;
+        }
+        &.shift-bottom{
+          margin-bottom: 300px;
+        }
+        &.shift-top{
+          margin-top: 300px;
+        }
+      }
+      
+      .cax-sidebar {
+        width: 300px;
+        position: fixed;
+        transition: transform 0.3s ease;
+        z-index: 1000;
+        box-shadow: none !important;
+      
+        &.cax-sidebar-left {
+          left: 0;
+          transform: translateX(-100%);
+          &.cax-sidebar-active {
+            transform: translateX(0);
+          }
+        }
+      
+        &.cax-sidebar-right {
+          right: 0;
+          transform: translateX(100%);
+          &.cax-sidebar-active {
+            transform: translateX(0);
+          }
+        }
+        
+      }     
 
     .cax-sidebar-content {
         position: relative;
@@ -33,17 +78,15 @@
         left: 0;
         width: 478px;
         height: -webkit-fill-available;
-        margin: 15px 15px 15px 15px;
-        border-radius: 12px;
     }
 
     .cax-sidebar-right {
         top: 0;
         right: 0;
         width: 480px;
+        box-shadow: none !important;
         height: -webkit-fill-available;
-        margin: 15px 15px 15px 15px;
-        border-radius: 12px;
+
     }
 
     .cax-sidebar-top {
@@ -51,8 +94,7 @@
         left: 0;
         width: -webkit-fill-available;
         height: 10rem;
-        margin: 15px 15px 15px 15px;
-        border-radius: 12px;
+
     }
 
     .cax-sidebar-bottom {
@@ -60,10 +102,21 @@
         left: 0;
         width: -webkit-fill-available;
         height: 10rem;
-        margin: 15px 15px 15px 15px;
-        border-radius: 12px;
+        -webkit-transition: none !important;
+        transition: none !important;
     }
-
+    .cax-sidebar-overlay {
+        margin: 15px;
+        border-radius: 12px;
+        
+        &.cax-sidebar-left,
+        &.cax-sidebar-right,
+        &.cax-sidebar-top,
+        &.cax-sidebar-bottom {
+          margin: 15px;
+          border-radius: 12px;
+        }
+      }
     .cax-sidebar-full {
         width: 100%;
         height: 100%;

package/resources/components/tree/tree.scss

@@ -32,10 +32,6 @@
         flex-shrink: 0;
     }
 
-    .cax-treenode-leaf > .cax-treenode-content .cax-tree-toggler {
-        visibility: hidden;
-    }
-
     .cax-treenode-content {
         display: flex;
         align-items: center;

package/sidebar/sidebar.d.ts

@@ -1,4 +1,4 @@
-import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, QueryList, Renderer2, TemplateRef } from '@angular/core';
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, QueryList, Renderer2, SimpleChanges, TemplateRef } from '@angular/core';
 import { caxConfig, CaxTemplate } from 'cax-design-system/api';
 import { Nullable, VoidListener } from 'cax-design-system/ts-helpers';
 import * as i0 from "@angular/core";
@@ -95,6 +95,7 @@ export declare class Sidebar implements AfterViewInit, AfterContentInit, OnDestr
      */
     get fullScreen(): boolean;
     set fullScreen(value: boolean);
+    mode: 'overlay' | 'inline';
     templates: QueryList<CaxTemplate> | undefined;
     /**
      * Callback to invoke when dialog is shown.
@@ -152,9 +153,10 @@ export declare class Sidebar implements AfterViewInit, AfterContentInit, OnDestr
     unbindMaskClickListener(): void;
     unbindGlobalListeners(): void;
     unbindAnimationEndListener(): void;
+    ngOnChanges(changes: SimpleChanges): 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; }; "headerStyle": { "alias": "headerStyle"; "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; }; "mode": { "alias": "mode"; "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;