cax-design-system 2.6.1 → 2.7.1

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

@@ -0,0 +1,147 @@
+@layer cax {
+    .cax-files {
+      font-size: 14px;
+      font-weight: 500;
+      margin-bottom: 10px;
+    }
+
+    .cax-upload-menu {
+      width: 569px;
+      border-radius: 12px;
+      padding-top: 24px;
+      padding-left: 56px;
+      padding-bottom: 24px;
+      padding-right: 56px;
+      
+    }
+
+      .status-container {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        gap: 16px;
+        height: 150px;
+        p {
+          margin: 0;
+          font-size: 14px;
+          font-weight: 500;
+        }
+       
+          .success-icon {
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+  
+            i {
+                font-size: 1.5rem;
+                font-weight: 800;
+            }
+          }
+      }
+    .cax-upload-options {
+      text-align: center;
+
+      .hint-text {
+        font-size: 14px;
+        font-weight: 500;
+      }
+
+      .drop-files {
+        font-weight: 500;
+        font-size: 14px;
+      }
+
+      .max-size {  
+        font-size: 12px;
+        margin-bottom: 20px;
+        font-weight: 400;
+      }
+    }
+
+    .cax-error-upload{
+      font-size: 14px;
+      font-weight: 400;
+      padding-top: 8px;
+  }
+
+    .cax-options-container {
+      display: flex;
+      gap: 24px;
+      justify-content: center;
+    }
+
+    .cax-upload-option {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      cursor: pointer;
+      .icon-container {
+        width: 48px;
+        height: 40px; 
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center; 
+        transition: background-color 0.2s;
+      }
+
+      span {
+        font-size: 14px; 
+        font-weight: 600;
+        padding-top: 10px;
+      }}
+
+      .cax-file-preview-wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        margin-top: 1rem;
+        width: 569px;
+      }
+      
+      .cax-file-preview {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 10px 14px;
+        border-radius: 8px;
+        .file-info {
+          display: flex;
+          align-items: center;
+          gap: 10px;
+      
+          .file-icon img {
+            width: 32px;
+            height: 32px;
+          }
+      
+          .file-name {
+            font-weight: 500;
+            font-size: 14px;
+          }
+        }
+      
+        .spinner {
+          margin-left: auto;
+          font-size: 20px !important;
+        }
+      
+        .remove-button {
+          background: none;
+          border: none;
+          margin-left: auto;
+          cursor: pointer;
+
+          i{
+            font-size: 20px;
+          }
+        }
+
+      }  
+
+}

package/upload/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="cax-design-system/upload" />
+export * from './public_api';

package/upload/public_api.d.ts

@@ -0,0 +1,2 @@
+export * from './upload.component';
+export * from './upload.component.module';

package/upload/upload.component.d.ts

@@ -0,0 +1,61 @@
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+export type UploadFileStatus = 'queued' | 'uploading' | 'complete' | 'canceled' | 'error';
+export type UploadFile = {
+    file: File;
+    status: UploadFileStatus;
+    progress?: number;
+    errorMessage?: string;
+};
+export declare class UploadComponent {
+    invalid: boolean;
+    style: {
+        [klass: string]: any;
+    } | null | undefined;
+    maxFileSize: number;
+    inputFiles: string;
+    uploadString: string;
+    errorText: string;
+    allowMultiple: boolean;
+    fileSelected: EventEmitter<File>;
+    filesQueued: EventEmitter<File[]>;
+    uploadStarted: EventEmitter<File>;
+    uploadCompleted: EventEmitter<File>;
+    uploadCanceled: EventEmitter<File>;
+    uploadError: EventEmitter<{
+        file: File;
+        error: string;
+    }>;
+    fileRemoved: EventEmitter<File>;
+    allFilesRemoved: EventEmitter<void>;
+    uploadStatusChange: EventEmitter<"uploading" | "complete" | "idle">;
+    isDragging: boolean;
+    uploadedFiles: UploadFile[];
+    uploadStatus: 'idle' | 'uploading' | 'complete';
+    isProcessingQueue: boolean;
+    private get activeFilesCount();
+    onDragOver(event: DragEvent): void;
+    onDragLeave(event: DragEvent): void;
+    onDrop(event: DragEvent): void;
+    handleFileInput(event: any): void;
+    private queueFile;
+    private updateUploadStatus;
+    private processQueue;
+    openFileSelector(): void;
+    private emitError;
+    private processFile;
+    cancelUpload(index: number): void;
+    cancelCurrentUpload(): void;
+    cancelAllUploads(): void;
+    removeFile(index: number): void;
+    removeAllFiles(): void;
+    retryUpload(index: number): void;
+    get hasUploading(): boolean;
+    get hasQueuedOrUploading(): boolean;
+    get hasErrors(): boolean;
+    get allUploadsComplete(): boolean;
+    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>;
+}

package/upload/upload.component.module.d.ts

@@ -0,0 +1,11 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./upload.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/forms";
+import * as i4 from "cax-design-system/progressspinner";
+import * as i5 from "cax-design-system/button";
+export declare class UploadModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<UploadModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<UploadModule, [typeof i1.UploadComponent], [typeof i2.CommonModule, typeof i3.FormsModule, typeof i4.ProgressSpinnerModule, typeof i5.Button], [typeof i1.UploadComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<UploadModule>;
+}