cax-design-system 1.2.0 → 1.2.2

package/resources/components/cascadeselect/cascadeselect.scss

@@ -65,6 +65,9 @@
         min-width: 100%;
         z-index: 1;
         display: none;
+        max-height: 300px;
+        overflow-y: auto;
+        overflow-x: hidden;
     }
 
     .cax-cascadeselect-item-active {
@@ -97,4 +100,5 @@
     .cax-overlay-modal .cax-cascadeselect-item-active > .cax-cascadeselect-sublist {
         left: 0;
     }
+
 }

package/resources/components/dialog/dialog.scss

@@ -40,8 +40,15 @@
     }
 
     .cax-dialog-footer {
+        display: flex;
+        justify-content: flex-end;
+        gap: 8px;
         flex-shrink: 0;
     }
+    .cax-button-container {
+        display: inline-flex;
+        align-items: center;
+    }
 
     .cax-dialog .cax-dialog-header-icons {
         display: flex;
@@ -131,7 +138,7 @@
         right: 1px;
         bottom: 1px;
     }
-    .cax-header-allign{
+    .cax-header-allign {
         display: flex;
     }
     .cax-dialog-icon {
@@ -149,7 +156,7 @@
         margin-top: 1rem; /* Adjusts spacing as needed */
     }
 
-    .cax-dialog-checkbox input[type="checkbox"] {
+    .cax-dialog-checkbox input[type='checkbox'] {
         margin-right: 0.5rem; /* Space between checkbox and label */
     }
 

package/resources/components/table/table.scss

@@ -5,6 +5,7 @@
 
     .cax-datatable > .cax-datatable-wrapper {
         overflow: auto;
+        border-radius: 12px;
     }
 
     .cax-datatable-wrapper::-webkit-scrollbar {

package/resources/themes/cax-theme.scss

@@ -448,7 +448,7 @@
     .cax-autocomplete-panel {
         background: var(--white-100);
         color: var(--black-100);
-        border: 1px solid  var(--grey-2-200);
+        border: 1px solid var(--grey-2-200);
         border-radius: 7px;
         box-shadow:
             0 4px 6px -1px rgba(0, 0, 0, 0.1),
@@ -462,7 +462,7 @@
         padding: 0.5rem 0.75rem;
         border: 0 none;
         color: var(--grey-2-900);
-        background: transparent;
+        background: var(--white-100);
         transition:
             background-color 0.2s,
             color 0.2s,
@@ -499,7 +499,7 @@
     .cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-empty-message {
         padding: 0.5rem 0.75rem;
         color: var(--grey-2-900);
-        background: transparent;
+        background: var(--white-100);
     }
 
     cax-autocomplete.ng-dirty.ng-invalid > .cax-autocomplete > .cax-inputtext {
@@ -845,6 +845,7 @@
         color: var(--charcoal-900);
         border: 1px solid var(--charcoal-200);
         border-radius: 7px;
+        background: var(--white-100);
     }
     .cax-cascadeselect-panel .cax-cascadeselect-items {
         padding: 0.25rem 0.25rem;
@@ -853,7 +854,7 @@
         margin: 2px 0;
         border: 0 none;
         color: var(--charcoal-900);
-        background: transparent;
+        background: var(--white-100);
         transition:
             background-color 0.2s,
             color 0.2s,
@@ -918,6 +919,12 @@
         transform: rotate(90deg);
     }
 
+    .cax-overlay-scroll {
+        max-height: 300px;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+
     .cax-checkbox {
         width: 1.25rem;
         height: 1.25rem;
@@ -1112,6 +1119,8 @@
         background: transparent;
         border: 0 none;
         color: var(--black-100);
+        display: flex;
+        align-items: center;
     }
     .cax-dropdown .cax-dropdown-label.cax-placeholder {
         color: var(--grey-2-400);
@@ -1148,7 +1157,7 @@
     }
 
     .cax-dropdown-panel {
-        background: transparent;
+        background: var(--white-100);
         color: var(--charcoal-900);
         border: 1px solid var(--grey-2-200);
         border-radius: 7px;
@@ -1157,7 +1166,7 @@
         padding: 0.5rem 0.5rem 0 0.5rem;
         border-bottom: 0 none;
         color: var(--charcoal-900);
-        background: transparent;
+        background: var(--white-100);
         margin: 0 0 0 0;
         border-top-right-radius: 6px;
         border-top-left-radius: 6px;
@@ -1177,7 +1186,7 @@
         padding: 0.5rem 0.75rem;
         border: 0 none;
         color: var(--charcoal-900);
-        background: transparent;
+        background: var(--white-100);
         transition:
             background-color 0.2s,
             color 0.2s,
@@ -1212,7 +1221,7 @@
     .cax-dropdown-panel .cax-dropdown-items .cax-dropdown-empty-message {
         padding: 0.5rem 0.75rem;
         color: #ffffff;
-        background: transparent;
+        background: var(--white-100);
     }
     .cax-label {
         font-size: 14px;
@@ -1819,6 +1828,7 @@
         border: 1px solid var(--charcoal-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;
@@ -1852,7 +1862,7 @@
         height: 1.75rem;
         color: #a1a1aa;
         border: 0 none;
-        background: transparent;
+        background: var(--white-100);
         border-radius: 50%;
         transition:
             background-color 0.2s,
@@ -1880,7 +1890,7 @@
         border: 0 none;
         color: var(--charcoal-900);
         font-weight: 500;
-        background: transparent;
+        background: var(--white-100);
         transition:
             background-color 0.2s,
             color 0.2s,
@@ -1906,7 +1916,7 @@
     .cax-multiselect-panel .cax-multiselect-items .cax-multiselect-empty-message {
         padding: 0.5rem 0.75rem;
         color: #ffffff;
-        background: transparent;
+        background: var(--white-100);
     }
 
     .cax-input-filled .cax-multiselect {
@@ -2317,6 +2327,7 @@
         border: 1px solid var(--charcoal-200);
         border-radius: 7px;
         margin-top: 0.25rem;
+        background: var(--white-100);
     }
     .cax-treeselect-panel .cax-treeselect-header {
         padding: 0.5rem 0.5rem 0 0.5rem;
@@ -2354,7 +2365,7 @@
         height: 1.75rem;
         color: #a1a1aa;
         border: 0 none;
-        background: transparent;
+        background: var(--white-100);
         border-radius: 50%;
         transition:
             background-color 0.2s,
@@ -2378,7 +2389,7 @@
     .cax-treeselect-panel .cax-treeselect-items-wrapper .cax-treeselect-empty-message {
         padding: 0.5rem 0.75rem;
         color: #ffffff;
-        background: transparent;
+        background: var(--white-100);
     }
 
     .cax-input-filled .cax-treeselect {
@@ -4204,6 +4215,9 @@
     }
     .cax-tree .cax-treenode-content .cax-treenode-label {
         font-size: 16px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
     .cax-tree .cax-tree-container .cax-treenode .cax-treenode-content .cax-tree-toggler:focus-visible {
         outline-offset: 2px;
@@ -6015,6 +6029,7 @@
     .cax-menu.cax-menu-overlay {
         position: absolute !important;
         border: 1px solid var(--charcoal-200);
+        background: var(--white-100);
     }
     .cax-menu .cax-submenu-header {
         margin: 0;
@@ -6686,6 +6701,7 @@
         width: 12.5rem;
     }
     .cax-tieredmenu.cax-tieredmenu-overlay {
+        background: var(--white-100);
         border: 1px solid #e3e4e6;
     }
     .cax-tieredmenu .cax-tieredmenu-root-list {
@@ -7962,6 +7978,9 @@
         border-top-right-radius: 12px;
         border-top-left-radius: 12px;
     }
+    .cax-confirm-dialog-header{
+        background: none !important;
+    }
     .cax-dialog .cax-dialog-content:last-of-type {
         border-bottom-right-radius: 12px;
         border-bottom-left-radius: 12px;
@@ -8528,7 +8547,7 @@
         height: 1.75rem;
         color: #a1a1aa;
         border: 0 none;
-        background: transparent;
+        background: var(--white-100);
         border-radius: 50%;
         transition:
             background-color 0.2s,

package/tabview/tabview.d.ts

@@ -238,6 +238,7 @@ export declare class TabView implements AfterContentInit, AfterViewChecked, OnDe
     ngAfterContentInit(): void;
     callResizeObserver(): void;
     ngAfterViewInit(): void;
+    handleResize: () => void;
     bindResizeObserver(): void;
     unbindResizeObserver(): void;
     ngAfterViewChecked(): void;