cax-design-system 2.7.3 → 2.7.4

package/resources/cax.scss

@@ -106,6 +106,7 @@
 
     .cax-link:disabled {
         cursor: default;
+        opacity: 0.3;
     }
 
     .cax-sr-only {
@@ -1188,201 +1189,7 @@
         border-color: #fca5a5;
     }
 
-    .cax-multiselect {
-        border: 1px solid var(--neutral-200);
-        transition:
-            background-color 0.2s,
-            color 0.2s,
-            border-color 0.2s,
-            box-shadow 0.2s,
-            outline-color 0.2s;
-        border-radius: 8px;
-        height: 40px;
-        min-width: 13.5rem;
-    }
-    .cax-multiselect:not(.cax-disabled):hover {
-        border-color: var(--neutral-400);
-    }
-    .cax-multiselect:not(.cax-disabled):active {
-        border-color: var(--primary-500);
-    }
-    .cax-multiselect:not(.cax-disabled):focus {
-        border-color: var(--primary-500);
-    }
-    .cax-multiselect .cax-highlight {
-        border-color: var(--primary-500);
-        background: var(--primary-500);
-    }
-    .cax-multiselect:not(.cax-disabled).cax-focus {
-        outline: 1px solid var(--cax-focus-ring-color);
-        outline-offset: -1px;
-        box-shadow: none;
-        border-color: var(--neutral-400);
-    }
-    .cax-multiselect .cax-multiselect-label {
-        padding: 0.65rem 0.75rem;
-        transition:
-            background-color 0.2s,
-            color 0.2s,
-            border-color 0.2s,
-            box-shadow 0.2s,
-            outline-color 0.2s;
-    }
-    .cax-multiselect .cax-multiselect-label.cax-placeholder {
-        color: var(--neutral-400);
-        font-weight: 400;
-    }
-    .cax-multiselect.active .cax-multiselect-label.cax-placeholder {
-        color: var(--neutral-400);
-    }
-    .cax-multiselect.cax-multiselect-chip .cax-multiselect-token {
-        padding: 0.25rem 0.75rem;
-        margin-right: 0.5rem;
-        background: #3f3f46;
-        color: #ffffff;
-        border-radius: 16px;
-    }
-    .cax-multiselect.cax-multiselect-chip .cax-multiselect-token .cax-multiselect-token-icon {
-        margin-left: 0.5rem;
-    }
-    .cax-multiselect .cax-multiselect-trigger {
-        background: transparent;
-        color: var(--neutral-900);
-        width: 2.5rem;
-        border-top-right-radius: 6px;
-        border-bottom-right-radius: 6px;
-    }
-    .cax-multiselect.cax-variant-filled {
-        background: #27272a;
-    }
-    .cax-multiselect.cax-variant-filled:not(.cax-disabled):hover {
-        background-color: #27272a;
-    }
-    .cax-multiselect.cax-variant-filled:not(.cax-disabled).cax-focus {
-        background-color: #27272a;
-    }
-
-    .cax-inputwrapper-filled .cax-multiselect.cax-multiselect-chip .cax-multiselect-label {
-        padding: 0.25rem 0.75rem;
-    }
-
-    .cax-multiselect-clearable .cax-multiselect-label-container {
-        padding-right: 1.75rem;
-    }
-    .cax-multiselect-clearable .cax-multiselect-clear-icon {
-        color: #a1a1aa;
-        right: 2.5rem;
-    }
-
-    .cax-multiselect-panel {
-        color: var(--neutral-900);
-        border: 1px solid var(--neutral-200);
-        border-radius: 8px;
-        margin-top: 0.25rem;
-        background: var(--white-100);
-    }
-    .cax-multiselect-panel .cax-multiselect-header {
-        padding: 0.5rem 0.5rem 0 0.5rem;
-        border-bottom: 0 none;
-        color: var(--neutral-900);
-        margin: 0 0 0 0;
-        border-top-right-radius: 6px;
-        border-top-left-radius: 6px;
-    }
-    .cax-multiselect-filter-container {
-        margin-top: 0.25rem;
-    }
-    .cax-multiselect-panel .cax-multiselect-header .cax-multiselect-filter-container .cax-inputtext {
-        padding-right: 0.75rem;
-        padding-left: 2.5rem;
-    }
-    .cax-multiselect-filter-icon {
-        width: 20px;
-        height: 20px;
-    }
-    .cax-multiselect-panel .cax-multiselect-header .cax-multiselect-filter-container .cax-multiselect-filter-icon {
-        left: 0.75rem;
-        color: var(--neutral-900);
-    }
-    .cax-multiselect-panel .cax-multiselect-header .cax-checkbox {
-        margin-right: 0.5rem;
-    }
-    .cax-multiselect-panel .cax-multiselect-header .cax-multiselect-close {
-        margin-left: 0.5rem;
-        width: 1.75rem;
-        height: 1.75rem;
-        color: #a1a1aa;
-        border: 0 none;
-        background: var(--white-100);
-        border-radius: 50%;
-        transition:
-            background-color 0.2s,
-            color 0.2s,
-            border-color 0.2s,
-            box-shadow 0.2s,
-            outline-color 0.2s;
-    }
-    .cax-multiselect-panel .cax-multiselect-header .cax-multiselect-close:enabled:hover {
-        color: #ffffff;
-        border-color: transparent;
-        background: rgba(255, 255, 255, 0.03);
-    }
-    .cax-multiselect-panel .cax-multiselect-header .cax-multiselect-close:focus-visible {
-        outline: 1px solid var(--cax-focus-ring-color);
-        outline-offset: 2px;
-        box-shadow: none;
-    }
-    .cax-multiselect-panel .cax-multiselect-items {
-        padding: 0.25rem 0.25rem;
-    }
-    .cax-multiselect-panel .cax-multiselect-items .cax-multiselect-item {
-        margin: 2px 0;
-        padding: 0.5rem 0.75rem;
-        border: 0 none;
-        color: var(--neutral-900);
-        font-weight: 500;
-        background: var(--white-100);
-        transition:
-            background-color 0.2s,
-            color 0.2s,
-            border-color 0.2s,
-            box-shadow 0.2s,
-            outline-color 0.2s;
-        border-radius: 4px;
-    }
-    .cax-multiselect-panel .cax-multiselect-items .cax-multiselect-item:first-child {
-        margin-top: 0;
-    }
-
-    .cax-multiselect-panel .cax-multiselect-items .cax-multiselect-item .cax-checkbox {
-        margin-right: 0.5rem;
-    }
-    .cax-multiselect-panel .cax-multiselect-items .cax-multiselect-item-group {
-        margin: 0;
-        padding: 0.5rem 0.75rem;
-        color: #71717a;
-        background: #18181b;
-        font-weight: 600;
-    }
-    .cax-multiselect-panel .cax-multiselect-items .cax-multiselect-empty-message {
-        padding: 0.5rem 0.75rem;
-        color: #ffffff;
-        background: var(--white-100);
-    }
-
-    .cax-input-filled .cax-multiselect {
-        background: #27272a;
-    }
-    .cax-input-filled .cax-multiselect:not(.cax-disabled):hover {
-        background-color: #27272a;
-    }
-    .cax-input-filled .cax-multiselect:not(.cax-disabled).cax-focus {
-        background-color: #27272a;
-    }
-
-    cax-multiselect.ng-dirty.ng-invalid > .cax-multiselect {
-        border-color: #fca5a5;
-    }
+    
 
     cax-password.ng-invalid.ng-dirty > .cax-password > .cax-inputtext {
         border-color: #fca5a5;
@@ -7555,7 +7362,7 @@ cax-inputmask.cax-inputmask-clearable .cax-inputmask-clear-icon {
         background-color 0.2s,
         color 0.2s,
         border-color 0.2s,
-        box-shadow 0.2s,
+        // box-shadow 0.2s,
         outline-color 0.2s;
 }
 .cax-sidebar .cax-sidebar-header .cax-sidebar-close:enabled:hover,
@@ -10334,7 +10141,7 @@ cax-dropdown.ng-dirty.ng-invalid > .cax-dropdown {
 }
 
 .cax-accordion .cax-accordion-header:not(.cax-disabled).cax-highlight .cax-accordion-header-link {
-    background: var(--neutral-75);
+    background: var(--neutral-25);
     border: 1px solid var(--neutral-200);
     color: var(--neutral-900);
     border-bottom-right-radius: 0;
@@ -12459,3 +12266,215 @@ div.cax-cascadeselect-panel {
         }
     }
 }
+
+.cax-multiselect {
+    border: 1px solid var(--neutral-200);
+    transition:
+        background-color 0.2s,
+        color 0.2s,
+        border-color 0.2s,
+        box-shadow 0.2s,
+        outline-color 0.2s;
+    border-radius: var(--space-100);
+    height: 40px;
+    width: 13.5rem;
+}
+.cax-multiselect:not(.cax-disabled):hover {
+    border-color: var(--neutral-400);
+}
+.cax-multiselect:not(.cax-disabled):active {
+    border-color: var(--primary-500);
+}
+.cax-multiselect:not(.cax-disabled):focus {
+    border-color: var(--primary-500);
+}
+.cax-multiselect .cax-highlight {
+    border-color: var(--primary-500);
+    background: var(--primary-500);
+}
+.cax-multiselect:not(.cax-disabled).cax-focus {
+    outline: 1px solid var(--cax-focus-ring-color);
+    outline-offset: -1px;
+    box-shadow: none;
+    border-color: var(--neutral-400);
+}
+.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{
+    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:
+        background-color 0.2s,
+        color 0.2s,
+        border-color 0.2s,
+        box-shadow 0.2s,
+        outline-color 0.2s;
+}
+.cax-multiselect .cax-multiselect-label.cax-placeholder {
+    color: var(--neutral-400);
+    font-weight: 400;
+}
+.cax-multiselect.active .cax-multiselect-label.cax-placeholder {
+    color: var(--neutral-400);
+}
+.cax-multiselect.cax-multiselect-chip .cax-multiselect-token {
+    padding: 0.25rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #E3E4E6;
+    color: #4E5155;
+    border-radius: var(--radius-200);
+}
+.cax-multiselect.cax-multiselect-chip .cax-multiselect-token .cax-multiselect-token-icon {
+    margin-left: 0.5rem;
+}
+.cax-multiselect .cax-multiselect-trigger {
+    background: transparent;
+    color: var(--neutral-900);
+    width: 2.5rem;
+    border-top-right-radius: var(--radius-75);
+    border-bottom-right-radius: var(--radius-75);
+}
+.cax-multiselect.cax-variant-filled {
+    background: #27272a;
+}
+.cax-multiselect.cax-variant-filled:not(.cax-disabled):hover {
+    background-color: #27272a;
+}
+.cax-multiselect.cax-variant-filled:not(.cax-disabled).cax-focus {
+    background-color: #27272a;
+}
+
+.cax-inputwrapper-filled .cax-multiselect.cax-multiselect-chip .cax-multiselect-label {
+    padding: 0.25rem 0.75rem;
+}
+
+.cax-multiselect-clearable .cax-multiselect-label-container {
+    padding-right: 1.75rem;
+}
+.cax-multiselect-clearable .cax-multiselect-clear-icon {
+    color: #a1a1aa;
+    right: 2.5rem;
+}
+
+.cax-multiselect-panel {
+    color: var(--neutral-900);
+    border: 1px solid var(--neutral-200);
+    border-radius: var(--radius-100);
+    margin-top: 0.25rem;
+    background: var(--white-100);
+}
+.cax-multiselect-panel .cax-multiselect-header {
+    padding: 0.5rem 0.5rem 0 0.5rem;
+    border-bottom: 0 none;
+    color: var(--neutral-900);
+    margin: 0 0 0 0;
+    border-top-right-radius: var(--radius-75);
+    border-top-left-radius: var(--radius-75);
+}
+.cax-multiselect-filter-container {
+    margin-top: 0.25rem;
+}
+.cax-multiselect-panel .cax-multiselect-header .cax-multiselect-filter-container .cax-inputtext {
+    padding-right: 0.75rem;
+    padding-left: 2.5rem;
+}
+.cax-multiselect-filter-icon {
+    width: 20px;
+    height: 20px;
+}
+.cax-multiselect-filter-container .cax-inputtext {
+    padding-left: 2.2rem !important;
+    padding-right: 1.9rem !important;
+}
+.cax-multiselect-panel .cax-multiselect-header .cax-multiselect-filter-container .cax-multiselect-filter-icon {
+    left: 0.75rem;
+    color: var(--neutral-900);
+}
+.cax-multiselect-panel .cax-multiselect-header .cax-checkbox {
+    margin-right: 0.5rem;
+}
+.cax-multiselect-panel .cax-multiselect-header .cax-multiselect-close {
+    margin-left: 0.5rem;
+    width: 1.75rem;
+    height: 1.75rem;
+    color: #a1a1aa;
+    border: 0 none;
+    background: var(--white-100);
+    border-radius: 50%;
+    transition:
+        background-color 0.2s,
+        color 0.2s,
+        border-color 0.2s,
+        box-shadow 0.2s,
+        outline-color 0.2s;
+}
+.cax-multiselect-panel .cax-multiselect-header .cax-multiselect-close:enabled:hover {
+    color: var(--white-100);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+}
+.cax-multiselect-panel .cax-multiselect-header .cax-multiselect-close:focus-visible {
+    outline: 1px solid var(--cax-focus-ring-color);
+    outline-offset: 2px;
+    box-shadow: none;
+}
+.cax-multiselect-panel .cax-multiselect-items {
+    padding: 0.25rem 0.25rem;
+}
+.cax-multiselect-panel .cax-multiselect-items .cax-multiselect-item {
+    margin: 2px 0;
+    padding: 0.5rem 0.75rem;
+    border: 0 none;
+    color: var(--neutral-900);
+    font-weight: 500;
+    background: var(--white-100);
+    transition:
+        background-color 0.2s,
+        color 0.2s,
+        border-color 0.2s,
+        box-shadow 0.2s,
+        outline-color 0.2s;
+    border-radius: 4px;
+}
+.cax-multiselect-panel .cax-multiselect-items .cax-multiselect-item:first-child {
+    margin-top: 0;
+}
+
+.cax-multiselect-panel .cax-multiselect-items .cax-multiselect-item .cax-checkbox {
+    margin-right: 0.5rem;
+}
+.cax-multiselect-panel .cax-multiselect-items .cax-multiselect-item-group {
+    margin: 0;
+    padding: 0.5rem 0.75rem;
+    color: #71717a;
+    background: #18181b;
+    font-weight: 600;
+}
+.cax-multiselect-panel .cax-multiselect-items .cax-multiselect-empty-message {
+    padding: var(--space-100) var(--space-150);
+    color: var(--white-100);
+    background: var(--white-100);
+}
+
+.cax-input-filled .cax-multiselect {
+    background: #27272a;
+}
+.cax-input-filled .cax-multiselect:not(.cax-disabled):hover {
+    background-color: #27272a;
+}
+.cax-input-filled .cax-multiselect:not(.cax-disabled).cax-focus {
+    background-color: #27272a;
+}
+
+cax-multiselect.ng-dirty.ng-invalid > .cax-multiselect {
+    border-color: #fca5a5;
+}

package/resources/components/common/common.scss

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

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;