cax-design-system 2.7.4 → 2.7.6

package/resources/cax.scss

@@ -861,8 +861,8 @@
 @import './styles/typography.scss';
 
 :root {
-    font-family: 'IBM Plex Sans', sans-serif;
-    --font-family: 'IBM Plex Sans', sans-serif;
+    font-family: 'Inter', sans-serif;
+    --font-family: 'Inter', sans-serif;
     --surface-a: #1e1e1e;
     --surface-b: #121212;
     --surface-c: rgba(255, 255, 255, 0.03);
@@ -1189,8 +1189,6 @@
         border-color: #fca5a5;
     }
 
-    
-
     cax-password.ng-invalid.ng-dirty > .cax-password > .cax-inputtext {
         border-color: #fca5a5;
     }
@@ -3229,108 +3227,6 @@
         color: #ffffff;
     }
 
-    .cax-menu {
-        padding: 1rem 0.5rem 1rem 0.5rem;
-        color: var(--neutral-900);
-        border: 1px solid var(--neutral-200);
-        border-radius: 7px;
-        min-width: 8.188rem;
-        margin-top: 8px !important;
-    }
-    .cax-menu .cax-menuitem > .cax-menuitem-content {
-        padding: 8px;
-        color: var(--neutral-900);
-        transition:
-            background-color 0.2s,
-            color 0.2s,
-            border-color 0.2s,
-            box-shadow 0.2s,
-            outline-color 0.2s;
-        border-radius: 4px;
-    }
-    .cax-menu .cax-menuitem > .cax-menuitem-content .cax-menuitem-link {
-        color: var(--neutral-900);
-        padding: 0.5rem 0;
-        user-select: none;
-    }
-    .cax-menu .cax-menuitem > .cax-menuitem-content .cax-menuitem-link .cax-menuitem-text {
-        color: var(--neutral-900);
-        font-weight: 500;
-        font-size: 14px;
-    }
-    .cax-menu .cax-menuitem > .cax-menuitem-content .cax-menuitem-link .cax-menuitem-icon {
-        color: var(--neutral-900);
-        margin-right: 0.5rem;
-    }
-    .cax-menu .cax-menuitem > .cax-menuitem-content .cax-menuitem-link .cax-submenu-icon {
-        color: var(--neutral-900);
-    }
-    .cax-menu .cax-menuitem.cax-highlight > .cax-menuitem-content {
-        color: rgba(255, 255, 255, 0.87);
-        background: rgba(34, 211, 238, 0.16);
-    }
-    .cax-menu .cax-menuitem.cax-highlight > .cax-menuitem-content .cax-menuitem-link .cax-menuitem-text {
-        color: rgba(255, 255, 255, 0.87);
-    }
-    .cax-menu .cax-menuitem.cax-highlight > .cax-menuitem-content .cax-menuitem-link .cax-menuitem-icon,
-    .cax-menu .cax-menuitem.cax-highlight > .cax-menuitem-content .cax-menuitem-link .cax-submenu-icon {
-        color: rgba(255, 255, 255, 0.87);
-    }
-    .cax-menu .cax-menuitem.cax-highlight.cax-focus > .cax-menuitem-content {
-        background: rgba(34, 211, 238, 0.24);
-    }
-    .cax-menu .cax-menuitem:not(.cax-highlight):not(.cax-disabled).cax-focus > .cax-menuitem-content {
-        color: #ffffff;
-        background: rgba(255, 255, 255, 0.08);
-    }
-    .cax-menu .cax-menuitem:not(.cax-highlight):not(.cax-disabled).cax-focus > .cax-menuitem-content .cax-menuitem-link .cax-menuitem-text {
-        color: var(--neutral-900);
-    }
-    .cax-menu .cax-menuitem:not(.cax-highlight):not(.cax-disabled).cax-focus > .cax-menuitem-content .cax-menuitem-link .cax-menuitem-icon,
-    .cax-menu .cax-menuitem:not(.cax-highlight):not(.cax-disabled).cax-focus > .cax-menuitem-content .cax-menuitem-link .cax-submenu-icon {
-        color: var(--neutral-900);
-    }
-    .cax-menu .cax-menuitem:not(.cax-highlight):not(.cax-disabled) > .cax-menuitem-content:hover {
-        background: var(--neutral-100);
-    }
-    .cax-menu .cax-menuitem:not(.cax-highlight):not(.cax-disabled) > .cax-menuitem-content:hover .cax-menuitem-link .cax-menuitem-text {
-        color: var(--neutral-900);
-    }
-    .cax-menu .cax-menuitem:not(.cax-highlight):not(.cax-disabled) > .cax-menuitem-content:hover .cax-menuitem-link .cax-menuitem-icon,
-    .cax-menu .cax-menuitem:not(.cax-highlight):not(.cax-disabled) > .cax-menuitem-content:hover .cax-menuitem-link .cax-submenu-icon {
-        color: var(--neutral-900);
-    }
-    .cax-menu.cax-menu-overlay {
-        position: absolute !important;
-        border: 1px solid var(--neutral-200);
-        background: var(--white-100);
-    }
-    .cax-menu .cax-submenu-header {
-        margin: 0;
-        padding: 0.5rem 0.75rem;
-        color: var(--neutral-900);
-        font-weight: 600;
-        border-top-right-radius: 0;
-        border-top-left-radius: 0;
-    }
-    .cax-menu .cax-menuitem-separator {
-        border-top: 1px solid #3f3f46;
-        margin: 2px 0;
-    }
-    .cax-menu .cax-menuitem-badge {
-        background: #22d3ee;
-        color: #020617;
-        font-size: 0.75rem;
-        font-weight: 700;
-        min-width: 1.5rem;
-        height: 1.5rem;
-        line-height: 1.5rem;
-        border-radius: 6px;
-        margin-left: 0.5rem;
-        padding-left: 0.5rem;
-        padding-right: 0.5rem;
-    }
-
     .cax-menubar {
         padding: 0.5rem 0.5rem;
         background: #18181b;
@@ -5476,7 +5372,7 @@ cax-calendar.ng-dirty.ng-invalid > .cax-calendar > .cax-inputtext {
     width: 32px;
     height: 32px;
     color: var(--neutral-750);
-    border:1px solid #D4D7DD;
+    border: 1px solid #d4d7dd;
     background: transparent;
     border-radius: 8px;
     transition:
@@ -5682,22 +5578,22 @@ cax-calendar.ng-dirty.ng-invalid > .cax-calendar > .cax-inputtext {
     outline-offset: 2px;
     box-shadow: none;
 }
-.cax-datepicker-icon{
+.cax-datepicker-icon {
     color: var(--black-100);
 }
-.cax-datepicker-inline-input{
-    input{
+.cax-datepicker-inline-input {
+    input {
         border: 1px solid var(--neutral-200);
         color: var(--neutral-750);
     }
 }
-.cax-datepicker-inline-actions{
+.cax-datepicker-inline-actions {
     border-top: 1px solid var(--neutral-150);
     border-bottom: 1px solid var(--neutral-150);
 }
-.cax-downarrow{
+.cax-downarrow {
     color: var(--black-100) !important;
-  }
+}
 cax-calendar.cax-calendar-clearable .cax-inputtext {
     padding-right: 2.5rem;
 }
@@ -9882,7 +9778,7 @@ cax-dropdown.ng-dirty.ng-invalid > .cax-dropdown {
     background: var(--white-100);
     border: solid var(--neutral-200);
     border-width: 1px;
-    color: var(--neutral-600);
+    color: var(--neutral-900);
     .cax-toast-summary {
         color: var(--neutral-900);
     }
@@ -9895,51 +9791,59 @@ cax-dropdown.ng-dirty.ng-invalid > .cax-dropdown {
     background: var(--success-25);
     border: solid var(--success-500);
     border-width: 1px;
-    color: var(--success-400);
+    color: var(--neutral-900);
     .cax-toast-summary {
-        color: var(--success-500);
+        color: var(--neutral-900);
     }
 }
-.cax-toast .cax-toast-message.cax-toast-message-success .cax-toast-message-icon,
-.cax-toast .cax-toast-message.cax-toast-message-success .cax-toast-icon-close {
+.cax-toast .cax-toast-message.cax-toast-message-success .cax-toast-message-icon {
     color: var(--success-500);
 }
+.cax-toast .cax-toast-message.cax-toast-message-success .cax-toast-icon-close {
+    color: var(--neutral-900);
+}
 .cax-toast .cax-toast-message.cax-toast-message-warn {
     background: var(--warning-25);
     border: solid var(--warning-500);
     border-width: 1px;
-    color: var(--warning-400);
+    color: var(--neutral-900);
     .cax-toast-summary {
-        color: var(--warning-500);
+        color: var(--neutral-900);
     }
 }
-.cax-toast .cax-toast-message.cax-toast-message-warn .cax-toast-message-icon,
-.cax-toast .cax-toast-message.cax-toast-message-warn .cax-toast-icon-close {
+.cax-toast .cax-toast-message.cax-toast-message-warn .cax-toast-message-icon {
     color: var(--warning-500);
 }
+.cax-toast .cax-toast-message.cax-toast-message-warn .cax-toast-icon-close {
+    color: var(--grey-900);
+}
 .cax-toast .cax-toast-message.cax-toast-message-error {
     background: var(--error-25);
     border: solid var(--error-500);
     border-width: 1px;
-    color: var(--error-400);
+    color: var(--neutral-900);
     .cax-toast-summary {
-        color: var(--error-500);
+        color: var(--neutral-900);
     }
 }
-.cax-toast .cax-toast-message.cax-toast-message-error .cax-toast-message-icon,
-.cax-toast .cax-toast-message.cax-toast-message-error .cax-toast-icon-close {
+.cax-toast .cax-toast-message.cax-toast-message-error .cax-toast-message-icon {
     color: var(--error-500);
 }
+.cax-toast .cax-toast-message.cax-toast-message-error .cax-toast-icon-close {
+    color: var(--grey-900);
+}
 .cax-toast .cax-toast-message.cax-toast-message-secondary {
     background: #27272a;
     border: solid #3f3f46;
     border-width: 1px;
     color: #d4d4d8;
 }
-.cax-toast .cax-toast-message.cax-toast-message-secondary .cax-toast-message-icon,
-.cax-toast .cax-toast-message.cax-toast-message-secondary .cax-toast-icon-close {
+.cax-toast .cax-toast-message.cax-toast-message-secondary .cax-toast-message-icon {
     color: #d4d4d8;
 }
+.cax-toast .cax-toast-message.cax-toast-message-secondary .cax-toast-icon-close {
+    color: var(--grey-900);
+}
 .cax-toast .cax-toast-message.cax-toast-message-contrast {
     background: #ffffff;
     border: solid #f4f4f5;
@@ -9987,7 +9891,7 @@ cax-dropdown.ng-dirty.ng-invalid > .cax-dropdown {
     background: rgba(255, 255, 255, 0.075);
 }
 .cax-toast .cax-toast-message.cax-toast-message-success .cax-toast-detail {
-    color: var(--success-500);
+    color: var(--neutral-600);
 }
 .cax-toast .cax-toast-message.cax-toast-message-warn {
     box-shadow: 0px 4px 8px 0px rgba(234, 179, 8, 0.04);
@@ -9999,7 +9903,7 @@ cax-dropdown.ng-dirty.ng-invalid > .cax-dropdown {
     background: rgba(255, 255, 255, 0.075);
 }
 .cax-toast .cax-toast-message.cax-toast-message-warn .cax-toast-detail {
-    color: var(--warning-500);
+    color: var(--neutral-600);
 }
 .cax-toast .cax-toast-message.cax-toast-message-error {
     box-shadow: 0px 4px 8px 0px rgba(239, 68, 68, 0.04);
@@ -10011,7 +9915,7 @@ cax-dropdown.ng-dirty.ng-invalid > .cax-dropdown {
     background: rgba(255, 255, 255, 0.05);
 }
 .cax-toast .cax-toast-message.cax-toast-message-error .cax-toast-detail {
-    color: var(--error-500);
+    color: var(--neutral-600);
 }
 .cax-toast .cax-toast-message.cax-toast-message-secondary {
     box-shadow: 0px 4px 8px 0px rgba(74, 85, 103, 0.04);
@@ -12219,16 +12123,16 @@ div.cax-cascadeselect-panel {
 .cax-files {
     color: var(--neutral-900);
 }
-.cax-upload-menu{
+.cax-upload-menu {
     border: 1px solid var(--neutral-200);
 }
-.cax-upload-menu:has(.cax-upload-status.uploading){
+.cax-upload-menu:has(.cax-upload-status.uploading) {
     border: 1px solid var(--primary-500);
 }
-.cax-upload-menu:has(.cax-upload-status.complete){
+.cax-upload-menu:has(.cax-upload-status.complete) {
     border: 1px solid var(--primary-500);
 }
-.cax-upload-menu:has(.cax-error-upload){
+.cax-upload-menu:has(.cax-error-upload) {
     border: 1px solid var(--error-600);
 }
 .cax-error-upload {
@@ -12301,15 +12205,15 @@ div.cax-cascadeselect-panel {
 .cax-multiselect-panel .cax-multiselect-items .cax-multiselect-item.cax-highlight {
     color: var(--black-100);
     background: var(--primary-75);
-  }
-.cax-multiselect-panel :not(.cax-highlight):not(.cax-disabled).cax-focus{
+}
+.cax-multiselect-panel :not(.cax-highlight):not(.cax-disabled).cax-focus {
     color: var(--black-100);
     background: var(--primary-75);
 }
 .cax-multiselect-panel .cax-multiselect-items .cax-multiselect-item:not(.cax-highlight):not(.cax-disabled):hover {
     color: var(--black-100);
     background: var(--primary-25);
-  }
+}
 .cax-multiselect .cax-multiselect-label {
     padding: 0.65rem 0.75rem;
     transition:
@@ -12329,8 +12233,8 @@ div.cax-cascadeselect-panel {
 .cax-multiselect.cax-multiselect-chip .cax-multiselect-token {
     padding: 0.25rem 0.75rem;
     margin-right: 0.5rem;
-    background: #E3E4E6;
-    color: #4E5155;
+    background: #e3e4e6;
+    color: #4e5155;
     border-radius: var(--radius-200);
 }
 .cax-multiselect.cax-multiselect-chip .cax-multiselect-token .cax-multiselect-token-icon {
@@ -12477,4 +12381,103 @@ div.cax-cascadeselect-panel {
 
 cax-multiselect.ng-dirty.ng-invalid > .cax-multiselect {
     border-color: #fca5a5;
-}
+}
+.cax-menu {
+    padding: 12px 4px;
+    color: var(--neutral-900);
+    border: 1px solid var(--neutral-200);
+    border-radius: 8px;
+    min-width: 8.188rem;
+    margin-top: 8px !important;
+}
+.cax-menu .cax-menuitem > .cax-menuitem-content {
+    padding: 6px 8px;
+    color: var(--neutral-900);
+    transition:
+        background-color 0.2s,
+        color 0.2s,
+        border-color 0.2s,
+        box-shadow 0.2s,
+        outline-color 0.2s;
+    border-radius: 4px;
+}
+.cax-menu .cax-menuitem > .cax-menuitem-content .cax-menuitem-link {
+    color: var(--neutral-900);
+    user-select: none;
+}
+.cax-menu .cax-menuitem > .cax-menuitem-content .cax-menuitem-link .cax-menuitem-text {
+    color: var(--neutral-900);
+    font-weight: 500;
+    font-size: 14px;
+}
+.cax-menu .cax-menuitem > .cax-menuitem-content .cax-menuitem-link .cax-menuitem-icon {
+    color: var(--neutral-900);
+}
+.cax-menu .cax-menuitem > .cax-menuitem-content .cax-menuitem-link .cax-submenu-icon {
+    color: var(--neutral-900);
+}
+.cax-menu .cax-menuitem.cax-highlight > .cax-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(34, 211, 238, 0.16);
+}
+.cax-menu .cax-menuitem.cax-highlight > .cax-menuitem-content .cax-menuitem-link .cax-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+}
+.cax-menu .cax-menuitem.cax-highlight > .cax-menuitem-content .cax-menuitem-link .cax-menuitem-icon,
+.cax-menu .cax-menuitem.cax-highlight > .cax-menuitem-content .cax-menuitem-link .cax-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+}
+.cax-menu .cax-menuitem.cax-highlight.cax-focus > .cax-menuitem-content {
+    background: rgba(34, 211, 238, 0.24);
+}
+.cax-menu .cax-menuitem:not(.cax-highlight):not(.cax-disabled).cax-focus > .cax-menuitem-content {
+    color: #ffffff;
+    background: rgba(255, 255, 255, 0.08);
+}
+.cax-menu .cax-menuitem:not(.cax-highlight):not(.cax-disabled).cax-focus > .cax-menuitem-content .cax-menuitem-link .cax-menuitem-text {
+    color: var(--neutral-900);
+}
+.cax-menu .cax-menuitem:not(.cax-highlight):not(.cax-disabled).cax-focus > .cax-menuitem-content .cax-menuitem-link .cax-menuitem-icon,
+.cax-menu .cax-menuitem:not(.cax-highlight):not(.cax-disabled).cax-focus > .cax-menuitem-content .cax-menuitem-link .cax-submenu-icon {
+    color: var(--neutral-900);
+}
+.cax-menu .cax-menuitem:not(.cax-highlight):not(.cax-disabled) > .cax-menuitem-content:hover {
+    background: var(--neutral-100);
+}
+.cax-menu .cax-menuitem:not(.cax-highlight):not(.cax-disabled) > .cax-menuitem-content:hover .cax-menuitem-link .cax-menuitem-text {
+    color: var(--neutral-900);
+}
+.cax-menu .cax-menuitem:not(.cax-highlight):not(.cax-disabled) > .cax-menuitem-content:hover .cax-menuitem-link .cax-menuitem-icon,
+.cax-menu .cax-menuitem:not(.cax-highlight):not(.cax-disabled) > .cax-menuitem-content:hover .cax-menuitem-link .cax-submenu-icon {
+    color: var(--neutral-900);
+}
+.cax-menu.cax-menu-overlay {
+    position: absolute !important;
+    border: 1px solid var(--neutral-200);
+    background: var(--white-100);
+}
+.cax-menu .cax-submenu-header {
+    margin: 0;
+    padding: 0px 8px 8px 8px;
+    color: var(--neutral-900);
+    font-weight: 600;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+}
+.cax-menu .cax-menuitem-separator {
+    border-top: 1px solid #3f3f46;
+    margin: 2px 0;
+}
+.cax-menu .cax-menuitem-badge {
+    background: #22d3ee;
+    color: #020617;
+    font-size: 0.75rem;
+    font-weight: 700;
+    min-width: 1.5rem;
+    height: 1.5rem;
+    line-height: 1.5rem;
+    border-radius: 6px;
+    margin-left: 0.5rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+}

package/resources/components/commentbox/commentbox.scss

@@ -1,4 +1,10 @@
 @layer cax {
+    .cax-comments-wrapper {
+        width: 100%;
+        min-height: 100%;
+        display: flex;
+        flex-direction: column;
+    }
     .cax-comments-list {
         display: flex;
         flex-direction: column;
@@ -507,8 +513,9 @@
         }
 
         .chat-footer {
-            position: relative;
-            z-index: 1;
+            position: sticky;
+            bottom: 0;
+            z-index: 10;
         }
 
         .cax-chat-input-container {

package/resources/components/sidebar/sidebar.scss

@@ -1,55 +1,10 @@
 @layer cax {
-    .cax-sidebar-layout-wrapper {
-        display: flex;
-        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;
+    .cax-sidebar {
         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);
-          }
-        }
-        
-      }     
+        transition: transform 0.3s;
+        display: flex;
+        flex-direction: column;
+    }
 
     .cax-sidebar-content {
         position: relative;
@@ -78,15 +33,17 @@
         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 {
@@ -94,7 +51,8 @@
         left: 0;
         width: -webkit-fill-available;
         height: 10rem;
-
+        margin: 15px 15px 15px 15px;
+        border-radius: 12px;
     }
 
     .cax-sidebar-bottom {
@@ -102,20 +60,12 @@
         left: 0;
         width: -webkit-fill-available;
         height: 10rem;
-        -webkit-transition: none !important;
-        transition: none !important;
-    }
-    .cax-sidebar-overlay {
-        margin: 15px;
+        margin: 15px 15px 15px 15px;
         border-radius: 12px;
-        
-        &.cax-sidebar-left,
-        &.cax-sidebar-right,
-        &.cax-sidebar-top,
-        &.cax-sidebar-bottom {
-          margin: 15px;
-          border-radius: 12px;
-        }
+    }
+    .cax-sidebar-inline {
+        margin: 0 !important;
+        border-radius: 0 !important;
       }
     .cax-sidebar-full {
         width: 100%;

package/resources/components/toast/toast.scss

@@ -63,6 +63,7 @@
         overflow: hidden;
         position: relative;
         flex: none;
+        
     }
 
     .cax-toast-icon-close.cax-link {
@@ -80,4 +81,7 @@
     .cax-toast:has(.cax-toast-lg) {
         width: 75%;
     }
+    .message-icon{
+        font-size: 24px !important;
+    }
 }

package/resources/styles/colors.scss

@@ -1,6 +1,6 @@
 :root {
     --primary-25: var(--blue-25);
-    --primary-50: var(--blue-50);
+    --primary-50: var(--blue-50); 
     --primary-75: var(--blue-75);
     --primary-100: var(--blue-100);
     --primary-125: var(--blue-125);
@@ -41,7 +41,7 @@
 
     --error-25: var(--red-25);
     --error-50: var(--red-50);
-    --error-75: var(--red-75);
+    --error-75: var(--red-75); 
     --error-100: var(--red-100);
     --error-125: var(--red-125);
     --error-150: var(--red-150);

package/sidebar/sidebar.d.ts

@@ -138,6 +138,12 @@ export declare class Sidebar implements AfterViewInit, AfterContentInit, OnDestr
     constructor(document: Document, el: ElementRef, renderer: Renderer2, cd: ChangeDetectorRef, config: caxConfig);
     ngAfterViewInit(): void;
     ngAfterContentInit(): void;
+    isInlineMode: boolean;
+    sidebarElement: ElementRef;
+    private hasShifted;
+    ngAfterViewChecked(): void;
+    handleContentShift(): void;
+    resetBodyShift(): void;
     onKeyDown(event: KeyboardEvent): void;
     show(): void;
     hide(emit?: boolean): void;