cax-design-system 2.7.0 → 2.7.2

package/resources/cax.scss

@@ -978,140 +978,6 @@
             background-color: transparent;
         }
     }
-    .cax-cascadeselect {
-        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: 7px;
-    }
-    .cax-cascadeselect:not(.cax-disabled):hover {
-        border-color: #52525b;
-    }
-    .cax-cascadeselect:not(.cax-disabled).cax-focus {
-        outline: 1px solid var(--cax-focus-ring-color);
-        outline-offset: -1px;
-        box-shadow: none;
-        border-color: #52525b;
-    }
-    .cax-cascadeselect .cax-cascadeselect-label {
-        background: transparent;
-        border: 0 none;
-        padding: 0.65rem 0.75rem;
-    }
-    .cax-cascadeselect .cax-cascadeselect-label.cax-placeholder {
-        color: var(--neutral-400);
-    }
-    .cax-cascadeselect .cax-cascadeselect-label:enabled:focus {
-        outline: 0 none;
-        box-shadow: none;
-    }
-    .cax-cascadeselect .cax-cascadeselect-trigger {
-        background: transparent;
-        color: #a1a1aa;
-        width: 2.5rem;
-        border-top-right-radius: 6px;
-        border-bottom-right-radius: 6px;
-    }
-    .cax-cascadeselect.cax-invalid.cax-component {
-        border-color: #fca5a5;
-    }
-    .cax-cascadeselect.cax-variant-filled {
-        background-color: #27272a;
-    }
-    .cax-cascadeselect.cax-variant-filled:enabled:hover {
-        background-color: #27272a;
-    }
-    .cax-cascadeselect.cax-variant-filled:enabled:focus {
-        background-color: #27272a;
-    }
-
-    .cax-cascadeselect-panel {
-        color: var(--neutral-900);
-        border: 1px solid var(--neutral-200);
-        border-radius: 7px;
-        background: var(--white-100);
-    }
-    .cax-cascadeselect-panel .cax-cascadeselect-items {
-        padding: 0.25rem 0.25rem;
-    }
-    .cax-cascadeselect-panel .cax-cascadeselect-items .cax-cascadeselect-item {
-        margin: 2px 0;
-        border: 0 none;
-        color: var(--neutral-900);
-        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-cascadeselect-panel .cax-cascadeselect-items .cax-cascadeselect-item:first-child {
-        margin-top: 0;
-    }
-    .cax-cascadeselect-panel .cax-cascadeselect-items .cax-cascadeselect-item.cax-highlight {
-        color: var(--neutral-900);
-        background: var(--neutral-200);
-    }
-    .cax-cascadeselect-panel .cax-cascadeselect-items .cax-cascadeselect-item.cax-highlight.cax-focus {
-        background: var(--neutral-200);
-    }
-    .cax-cascadeselect-panel .cax-cascadeselect-items .cax-cascadeselect-item:not(.cax-highlight):not(.cax-disabled).cax-focus {
-        color: var(--neutral-900);
-        background: rgba(255, 255, 255, 0.08);
-    }
-    .cax-cascadeselect-panel .cax-cascadeselect-items .cax-cascadeselect-item:not(.cax-highlight):not(.cax-disabled):hover {
-        color: var(--neutral-900);
-        background: var(--neutral-100);
-    }
-    .cax-cascadeselect-panel .cax-cascadeselect-items .cax-cascadeselect-item .cax-cascadeselect-item-content {
-        padding: 0.5rem 0.75rem;
-    }
-    .cax-cascadeselect-panel .cax-cascadeselect-items .cax-cascadeselect-item .cax-cascadeselect-group-icon {
-        font-size: 0.875rem;
-    }
-
-    .cax-input-filled .cax-cascadeselect {
-        background: #27272a;
-    }
-    .cax-input-filled .cax-cascadeselect:not(.cax-disabled):hover {
-        background-color: #27272a;
-    }
-    .cax-input-filled .cax-cascadeselect:not(.cax-disabled).cax-focus {
-        background-color: #27272a;
-    }
-
-    cax-cascadeselect.ng-dirty.ng-invalid > .cax-cascadeselect {
-        border-color: #fca5a5;
-    }
-
-    cax-cascadeselect.cax-cascadeselect-clearable .cax-cascadeselect-label {
-        padding-right: 0.75rem;
-    }
-    cax-cascadeselect.cax-cascadeselect-clearable .cax-cascadeselect-clear-icon {
-        color: #a1a1aa;
-        right: 2.5rem;
-    }
-
-    .cax-overlay-modal .cax-cascadeselect-sublist .cax-cascadeselect-panel {
-        box-shadow: none;
-        border-radius: 0;
-        padding: 0.25rem 0 0.25rem 0.5rem;
-    }
-    .cax-overlay-modal .cax-cascadeselect-item-active > .cax-cascadeselect-item-content .cax-cascadeselect-group-icon {
-        transform: rotate(90deg);
-    }
-
-    .cax-overlay-scroll {
-        max-height: 300px;
-        overflow-y: auto;
-        overflow-x: hidden;
-    }
 
     .cax-input-filled .cax-checkbox .cax-checkbox-box {
         background-color: #27272a;
@@ -4859,21 +4725,6 @@
         background-color: #22d3ee;
     }
 
-    .cax-cascadeselect .cax-cascadeselect-label {
-        box-shadow: none;
-    }
-    .cax-cascadeselect.cax-disabled {
-        opacity: 1;
-    }
-    .cax-cascadeselect.cax-disabled .cax-cascadeselect-label {
-        color: #a1a1aa;
-    }
-
-    div.cax-cascadeselect-panel {
-        border: 0 none;
-        box-shadow: none;
-    }
-
     // .cax-checkbox .cax-checkbox-box {
     //     box-shadow:
     //         0 0 #0000,
@@ -7864,6 +7715,7 @@ cax-inputmask.cax-inputmask-clearable .cax-inputmask-clear-icon {
 }
 .cax-paginator .cax-paginator-page-input .cax-inputtext {
     max-width: 3rem;
+    height: 40px !important;
 }
 .cax-paginator .cax-paginator-current {
     background-color: transparent;
@@ -9296,6 +9148,7 @@ cax-inputmask.cax-inputmask-clearable .cax-inputmask-clear-icon {
 }
 .cax-paginator .cax-paginator-page-input .cax-inputtext {
     max-width: 3rem;
+    height: 40px !important;
 }
 .cax-paginator .cax-paginator-current {
     background-color: transparent;
@@ -10548,10 +10401,6 @@ cax-dropdown.ng-dirty.ng-invalid > .cax-dropdown {
     padding-bottom: 1rem;
 }
 
-.cax-timeline-event-content:hover {
-    background: var(--neutral-75);
-}
-
 .cax-timeline.cax-timeline-vertical .cax-timeline-event-connector {
     width: 1px;
 }
@@ -11732,19 +11581,35 @@ cax-selectbutton.ng-dirty.ng-invalid > .cax-selectbutton > .cax-button {
     }
 }
 
+.cax-chips-label {
+    margin-bottom: 8px;
+    font-weight: 500;
+    color: var(--neutral-900);
+    line-height: 20px;
+}
+
 .cax-chips-size-sm .cax-chips-container {
     min-height: 32px;
     padding: 0px 8px;
+    .cax-chips-label {
+        font-size: 14px;
+    }
 }
 
 .cax-chips-size-md .cax-chips-container {
     min-height: 40px;
     padding: 0px 8px;
+    .cax-chips-label {
+        font-size: 14px;
+    }
 }
 
 .cax-chips-size-lg .cax-chips-container {
     min-height: 48px;
     padding: 0px 8px;
+    .cax-chips-label {
+        font-size: 16px !important;
+    }
 }
 
 .cax-chips-list {
@@ -12118,6 +11983,102 @@ cax-chips.cax-chips-right-icon .cax-chips-icon-right {
     color: var(--white-100);
     text-decoration: underline;
 }
+
+.cax-cascadeselect {
+    height: 40px;
+    align-items: center;
+    border: var(--border-100) solid var(--neutral-200);
+    border-radius: var(--radius-100);
+    padding: var(--space-100) 10px var(--space-100) 10px;
+}
+
+.cax-cascadeselect:not(.cax-disabled):hover {
+    border-color: var(--neutral-300);
+}
+.cax-cascadeselect:not(.cax-disabled).cax-focus {
+    outline: none;
+    outline-offset: -1px;
+    box-shadow: none;
+    border-color: var(--primary-500);
+}
+.cax-cascadeselect .cax-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+}
+.cax-cascadeselect .cax-cascadeselect-label.cax-placeholder {
+    color: var(--neutral-300);
+}
+.cax-cascadeselect .cax-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+}
+.cax-cascadeselect .cax-cascadeselect-trigger {
+    background: transparent;
+    color: var(--neutral-750);
+    width: 20px;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+}
+.cax-cascadeselect.cax-invalid.cax-component {
+    border-color: #fca5a5;
+}
+.cax-cascadeselect.cax-variant-filled {
+    background-color: #27272a;
+}
+.cax-cascadeselect.cax-variant-filled:enabled:hover {
+    background-color: #27272a;
+}
+.cax-cascadeselect.cax-variant-filled:enabled:focus {
+    background-color: #27272a;
+}
+
+.cax-cascadeselect-panel {
+    min-width: 14rem;
+    color: var(--neutral-900);
+    border: var(--border-100) solid var(--neutral-200);
+    border-radius: var(--radius-100);
+    background: var(--white-100);
+    margin-top: var(--space-50);
+    max-height: 300px;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+.cax-cascadeselect-panel .cax-cascadeselect-items {
+    padding: var(--space-150) var(--space-50) var(--space-150) var(--space-50);
+}
+.cax-cascadeselect-panel .cax-cascadeselect-items .cax-cascadeselect-item {
+    margin: 2px 0;
+    border: 0 none;
+    color: var(--neutral-750);
+    background: var(--white-100);
+}
+.cax-cascadeselect-panel .cax-cascadeselect-items .cax-cascadeselect-item:first-child {
+    margin-top: 0;
+}
+.cax-cascadeselect-panel .cax-cascadeselect-items .cax-cascadeselect-item.cax-highlight {
+    color: var(--primary-500);
+}
+.cax-cascadeselect-panel .cax-cascadeselect-items .cax-cascadeselect-item.cax-highlight:hover {
+    background: var(--primary-25);
+}
+.cax-cascadeselect-panel .cax-cascadeselect-items .cax-cascadeselect-item.cax-highlight.cax-focus {
+    // background: var(--neutral-200);
+}
+.cax-cascadeselect-panel .cax-cascadeselect-items .cax-cascadeselect-item:not(.cax-highlight):not(.cax-disabled).cax-focus {
+    color: var(--neutral-900);
+    background: rgba(255, 255, 255, 0.08);
+}
+.cax-cascadeselect-panel .cax-cascadeselect-items .cax-cascadeselect-item:not(.cax-highlight):not(.cax-disabled):hover {
+    color: var(--neutral-900);
+    background: var(--primary-25);
+}
+.cax-cascadeselect-panel .cax-cascadeselect-items .cax-cascadeselect-item .cax-cascadeselect-item-content {
+    padding: 0.5rem 0.75rem;
+}
+.cax-cascadeselect-panel .cax-cascadeselect-items .cax-cascadeselect-item .cax-cascadeselect-group-icon {
+    font-size: 0.875rem;
+}
+
 .cax-card {
     background: var(--white-900);
     color: var(--neutral-900);
@@ -12171,10 +12132,13 @@ cax-chips.cax-chips-right-icon .cax-chips-icon-right {
 .cax-column-filter-menu-button:hover {
     color: var(--neutral-900);
     border-color: transparent;
+    background: var(--primary-100);
+    border-radius: 6px;
 }
 .cax-column-filter-menu-button.cax-column-filter-menu-button-open,
 .cax-column-filter-menu-button.cax-column-filter-menu-button-open:hover {
     color: var(--neutral-900);
+    background: var(--primary-100);
 }
 .cax-column-filter-menu-button.cax-column-filter-menu-button-active,
 .cax-column-filter-menu-button.cax-column-filter-menu-button-active:hover {
@@ -12237,6 +12201,66 @@ cax-chips.cax-chips-right-icon .cax-chips-icon-right {
         outline-color 0.2s;
     border-radius: 4px;
 }
+
+.cax-input-filled .cax-cascadeselect {
+    background: #27272a;
+}
+.cax-input-filled .cax-cascadeselect:not(.cax-disabled):hover {
+    background-color: #27272a;
+}
+.cax-input-filled .cax-cascadeselect:not(.cax-disabled).cax-focus {
+    background-color: #27272a;
+}
+
+cax-cascadeselect.ng-dirty.ng-invalid > .cax-cascadeselect {
+    border-color: #fca5a5;
+}
+
+cax-cascadeselect.cax-cascadeselect-clearable .cax-cascadeselect-label {
+    padding-right: 0.75rem;
+}
+cax-cascadeselect.cax-cascadeselect-clearable .cax-cascadeselect-clear-icon {
+    color: #a1a1aa;
+    right: 2.5rem;
+}
+
+.cax-overlay-modal .cax-cascadeselect-sublist .cax-cascadeselect-panel {
+    box-shadow: none;
+    border-radius: 0;
+    padding: 0.25rem 0 0.25rem 0.5rem;
+}
+.cax-overlay-modal .cax-cascadeselect-item-active > .cax-cascadeselect-item-content .cax-cascadeselect-group-icon {
+    transform: rotate(90deg);
+}
+
+.cax-cascadeselect .cax-cascadeselect-label {
+    box-shadow: none;
+}
+.cax-cascadeselect.cax-disabled {
+    opacity: 1;
+}
+.cax-cascadeselect.cax-disabled .cax-cascadeselect-label {
+    color: #a1a1aa;
+}
+
+.cax-cascadeselect-sublist {
+    box-shadow:
+        var(--shadow-lg-1) #16181d14,
+        var(--shadow-lg-2) #16181d0f;
+}
+
+div.cax-cascadeselect-panel {
+    border: 0 none;
+    box-shadow:
+        var(--shadow-lg-1) #16181d14,
+        var(--shadow-lg-2) #16181d0f;
+}
+
+.cax-overlay-scroll {
+    max-height: 300px;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
 .cax-column-filter-overlay .cax-column-filter-row-items .cax-column-filter-row-item:first-child {
     margin-top: 0;
 }
@@ -12377,47 +12401,48 @@ cax-chips.cax-chips-right-icon .cax-chips-icon-right {
 }
 .cax-upload-menu{
     border: 1px solid var(--neutral-200);
-        &:has(.cax-upload-status.uploading),
-        &:has(.cax-upload-status.complete) {
-        border: 1px solid var(--primary-500);
-        }
-      &:has(.cax-error-upload){
-        border: 1px solid var(--error-600);
-      }
 }
-.cax-error-upload{
-    color: var(--error-600) ;
+.cax-upload-menu:has(.cax-upload-status.uploading){
+    border: 1px solid var(--primary-500);
+}
+.cax-upload-menu:has(.cax-upload-status.complete){
+    border: 1px solid var(--primary-500);
+}
+.cax-upload-menu:has(.cax-error-upload){
+    border: 1px solid var(--error-600);
 }
-.cax-upload-options{
-    .hint-text{
+.cax-error-upload {
+    color: var(--error-600);
+}
+.cax-upload-options {
+    .hint-text {
         color: var(--neutral-750);
     }
-    .drop-files{
+    .drop-files {
         color: var(--primary-500);
     }
-    .max-size{
+    .max-size {
         color: var(--neutral-750);
     }
 }
 
-.cax-upload-option{
-
-    .icon-container{
+.cax-upload-option {
+    .icon-container {
         background: var(--neutral-75);
     }
 }
-.cax-file-preview{
-    background-color: var(--neutral-50) ;
+.cax-file-preview {
+    background-color: var(--neutral-50);
     &.canceled {
         background-color: var(--error-50) !important;
-      }
+    }
 }
 .status-container {
-      .success-icon {
-        background-color: var( --success-500);
+    .success-icon {
+        background-color: var(--success-500);
 
         i {
             color: var(--white-100);
         }
-      }
-  }
+    }
+}

package/resources/components/cascadeselect/cascadeselect.scss

@@ -66,7 +66,8 @@
         z-index: 1;
         display: none;
         max-height: 300px;
-        overflow-y: auto;
+    }
+    .cax-cascadeselect-items-wrapper {
         overflow-x: hidden;
     }
 
@@ -77,8 +78,8 @@
     .cax-cascadeselect-item-active > .cax-cascadeselect-sublist {
         display: block;
         left: 100%;
-        top: 0;
-        margin-left: 4px;
+        top: 4px;
+        margin-left: 8px;
     }
 
     .cax-cascadeselect-clear-icon {

package/resources/components/chips/chips.scss

@@ -1,6 +1,7 @@
 @layer cax {
     .cax-chips {
         display: inline-flex;
+        flex-direction: column;
     }
 
     .cax-chips-multiple-container {

package/resources/components/table/table.scss

@@ -446,6 +446,6 @@ $checkbox-size-xl: 22px;
 }
 
 cax-sorticon {
-    float: right;
+    position: absolute;
     margin-left: 4px;
 }

package/resources/components/upload/upload.component.scss

@@ -6,7 +6,6 @@
     }
 
     .cax-upload-menu {
-      width: 569px;
       border-radius: 12px;
       padding-top: 24px;
       padding-left: 56px;
@@ -101,7 +100,6 @@
         flex-direction: column;
         gap: 10px;
         margin-top: 1rem;
-        width: 569px;
       }
       
       .cax-file-preview {

package/upload/upload.component.d.ts

@@ -1,4 +1,4 @@
-import { EventEmitter } from '@angular/core';
+import { EventEmitter, OnInit } from '@angular/core';
 import * as i0 from "@angular/core";
 export type UploadFileStatus = 'queued' | 'uploading' | 'complete' | 'canceled' | 'error';
 export type UploadFile = {
@@ -7,7 +7,7 @@ export type UploadFile = {
     progress?: number;
     errorMessage?: string;
 };
-export declare class UploadComponent {
+export declare class UploadComponent implements OnInit {
     invalid: boolean;
     style: {
         [klass: string]: any;
@@ -17,6 +17,8 @@ export declare class UploadComponent {
     uploadString: string;
     errorText: string;
     allowMultiple: boolean;
+    componentId: string;
+    allowedFileTypes: string[];
     fileSelected: EventEmitter<File>;
     filesQueued: EventEmitter<File[]>;
     uploadStarted: EventEmitter<File>;
@@ -33,11 +35,16 @@ export declare class UploadComponent {
     uploadedFiles: UploadFile[];
     uploadStatus: 'idle' | 'uploading' | 'complete';
     isProcessingQueue: boolean;
+    uniqueId: string;
+    get acceptFileTypes(): string;
     private get activeFilesCount();
+    ngOnInit(): void;
     onDragOver(event: DragEvent): void;
     onDragLeave(event: DragEvent): void;
     onDrop(event: DragEvent): void;
     handleFileInput(event: any): void;
+    private validateFile;
+    private getFileExtension;
     private queueFile;
     private updateUploadStatus;
     private processQueue;
@@ -49,7 +56,6 @@ export declare class UploadComponent {
     cancelAllUploads(): void;
     removeFile(index: number): void;
     removeAllFiles(): void;
-    retryUpload(index: number): void;
     get hasUploading(): boolean;
     get hasQueuedOrUploading(): boolean;
     get hasErrors(): boolean;
@@ -57,5 +63,5 @@ export declare class UploadComponent {
     get uploadingProgressText(): string;
     get overallProgress(): number;
     static ɵfac: i0.ɵɵFactoryDeclaration<UploadComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<UploadComponent, "cax-upload", never, { "invalid": { "alias": "invalid"; "required": false; }; "style": { "alias": "style"; "required": false; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; }; "inputFiles": { "alias": "inputFiles"; "required": false; }; "uploadString": { "alias": "uploadString"; "required": false; }; "errorText": { "alias": "errorText"; "required": false; }; "allowMultiple": { "alias": "allowMultiple"; "required": false; }; }, { "fileSelected": "fileSelected"; "filesQueued": "filesQueued"; "uploadStarted": "uploadStarted"; "uploadCompleted": "uploadCompleted"; "uploadCanceled": "uploadCanceled"; "uploadError": "uploadError"; "fileRemoved": "fileRemoved"; "allFilesRemoved": "allFilesRemoved"; "uploadStatusChange": "uploadStatusChange"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UploadComponent, "cax-upload", never, { "invalid": { "alias": "invalid"; "required": false; }; "style": { "alias": "style"; "required": false; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; }; "inputFiles": { "alias": "inputFiles"; "required": false; }; "uploadString": { "alias": "uploadString"; "required": false; }; "errorText": { "alias": "errorText"; "required": false; }; "allowMultiple": { "alias": "allowMultiple"; "required": false; }; "componentId": { "alias": "componentId"; "required": false; }; "allowedFileTypes": { "alias": "allowedFileTypes"; "required": false; }; }, { "fileSelected": "fileSelected"; "filesQueued": "filesQueued"; "uploadStarted": "uploadStarted"; "uploadCompleted": "uploadCompleted"; "uploadCanceled": "uploadCanceled"; "uploadError": "uploadError"; "fileRemoved": "fileRemoved"; "allFilesRemoved": "allFilesRemoved"; "uploadStatusChange": "uploadStatusChange"; }, never, never, false, never>;
 }