cax-design-system 2.8.2 → 2.8.4

package/fileupload/fileupload.d.ts

@@ -0,0 +1,380 @@
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, QueryList, Renderer2, TemplateRef } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { BlockableUI, Message, caxConfig, CaxTemplate } from 'cax-design-system/api';
+import { VoidListener } from 'cax-design-system/ts-helpers';
+import { Subscription } from 'rxjs';
+import { FileBeforeUploadEvent, FileProgressEvent, FileRemoveEvent, FileSelectEvent, FileSendEvent, FileUploadErrorEvent, FileUploadEvent, FileUploadHandlerEvent, RemoveUploadedFileEvent } from './fileupload.interface';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "cax-design-system/api";
+import * as i3 from "cax-design-system/button";
+import * as i4 from "cax-design-system/progressbar";
+import * as i5 from "cax-design-system/messages";
+import * as i6 from "cax-design-system/ripple";
+import * as i7 from "cax-design-system/icons/plus";
+import * as i8 from "cax-design-system/icons/upload";
+import * as i9 from "cax-design-system/icons/times";
+/**
+ * FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.
+ * @group Components
+ */
+export declare class FileUpload implements AfterViewInit, AfterContentInit, OnInit, OnDestroy, BlockableUI {
+    private document;
+    private platformId;
+    private renderer;
+    private el;
+    sanitizer: DomSanitizer;
+    zone: NgZone;
+    private http;
+    cd: ChangeDetectorRef;
+    config: caxConfig;
+    /**
+     * Name of the request parameter to identify the files at backend.
+     * @group Props
+     */
+    name: string | undefined;
+    /**
+     * Remote url to upload the files.
+     * @group Props
+     */
+    url: string | undefined;
+    /**
+     * HTTP method to send the files to the url such as "post" and "put".
+     * @group Props
+     */
+    method: 'post' | 'put' | undefined;
+    /**
+     * Used to select multiple files at once from file dialog.
+     * @group Props
+     */
+    multiple: boolean | undefined;
+    /**
+     * Comma-separated list of pattern to restrict the allowed file types. Can be any combination of either the MIME types (such as "image/*") or the file extensions (such as ".jpg").
+     * @group Props
+     */
+    accept: string | undefined;
+    /**
+     * Disables the upload functionality.
+     * @group Props
+     */
+    disabled: boolean | undefined;
+    /**
+     * When enabled, upload begins automatically after selection is completed.
+     * @group Props
+     */
+    auto: boolean | undefined;
+    /**
+     * Cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates.
+     * @group Props
+     */
+    withCredentials: boolean | undefined;
+    /**
+     * Maximum file size allowed in bytes.
+     * @group Props
+     */
+    maxFileSize: number | undefined;
+    /**
+     * Summary message of the invalid file size.
+     * @group Props
+     */
+    invalidFileSizeMessageSummary: string;
+    /**
+     * Detail message of the invalid file size.
+     * @group Props
+     */
+    invalidFileSizeMessageDetail: string;
+    /**
+     * Summary message of the invalid file type.
+     * @group Props
+     */
+    invalidFileTypeMessageSummary: string;
+    /**
+     * Detail message of the invalid file type.
+     * @group Props
+     */
+    invalidFileTypeMessageDetail: string;
+    /**
+     * Detail message of the invalid file type.
+     * @group Props
+     */
+    invalidFileLimitMessageDetail: string;
+    /**
+     * Summary message of the invalid file type.
+     * @group Props
+     */
+    invalidFileLimitMessageSummary: string;
+    /**
+     * Inline style of the element.
+     * @group Props
+     */
+    style: {
+        [klass: string]: any;
+    } | null | undefined;
+    /**
+     * Class of the element.
+     * @group Props
+     */
+    styleClass: string | undefined;
+    /**
+     * Width of the image thumbnail in pixels.
+     * @group Props
+     */
+    previewWidth: number;
+    /**
+     * Label of the choose button. Defaults to cax Locale configuration.
+     * @group Props
+     */
+    chooseLabel: string | undefined;
+    /**
+     * Label of the upload button. Defaults to cax Locale configuration.
+     * @group Props
+     */
+    uploadLabel: string | undefined;
+    /**
+     * Label of the cancel button. Defaults to cax Locale configuration.
+     * @group Props
+     */
+    cancelLabel: string | undefined;
+    /**
+     * Icon of the choose button.
+     * @group Props
+     */
+    chooseIcon: string | undefined;
+    /**
+     * Icon of the upload button.
+     * @group Props
+     */
+    uploadIcon: string | undefined;
+    /**
+     * Icon of the cancel button.
+     * @group Props
+     */
+    cancelIcon: string | undefined;
+    /**
+     * Whether to show the upload button.
+     * @group Props
+     */
+    showUploadButton: boolean;
+    /**
+     * Whether to show the cancel button.
+     * @group Props
+     */
+    showCancelButton: boolean;
+    /**
+     * Defines the UI of the component.
+     * @group Props
+     */
+    mode: 'advanced' | 'basic' | undefined;
+    /**
+     * HttpHeaders class represents the header configuration options for an HTTP request.
+     * @group Props
+     */
+    headers: HttpHeaders | undefined;
+    /**
+     * Whether to use the default upload or a manual implementation defined in uploadHandler callback. Defaults to cax Locale configuration.
+     * @group Props
+     */
+    customUpload: boolean | undefined;
+    /**
+     * Maximum number of files that can be uploaded.
+     * @group Props
+     */
+    fileLimit: number | undefined;
+    /**
+     * Style class of the upload button.
+     * @group Props
+     */
+    uploadStyleClass: string | undefined;
+    /**
+     * Style class of the cancel button.
+     * @group Props
+     */
+    cancelStyleClass: string | undefined;
+    /**
+     * Style class of the remove button.
+     * @group Props
+     */
+    removeStyleClass: string | undefined;
+    /**
+     * Style class of the choose button.
+     * @group Props
+     */
+    chooseStyleClass: string | undefined;
+    /**
+     * Callback to invoke before file upload is initialized.
+     * @param {FileBeforeUploadEvent} event - Custom upload event.
+     * @group Emits
+     */
+    onBeforeUpload: EventEmitter<FileBeforeUploadEvent>;
+    /**
+     * An event indicating that the request was sent to the server. Useful when a request may be retried multiple times, to distinguish between retries on the final event stream.
+     * @param {FileSendEvent} event - Custom send event.
+     * @group Emits
+     */
+    onSend: EventEmitter<FileSendEvent>;
+    /**
+     * Callback to invoke when file upload is complete.
+     * @param {FileUploadEvent} event - Custom upload event.
+     * @group Emits
+     */
+    onUpload: EventEmitter<FileUploadEvent>;
+    /**
+     * Callback to invoke if file upload fails.
+     * @param {FileUploadErrorEvent} event - Custom error event.
+     * @group Emits
+     */
+    onError: EventEmitter<FileUploadErrorEvent>;
+    /**
+     * Callback to invoke when files in queue are removed without uploading using clear all button.
+     * @param {Event} event - Browser event.
+     * @group Emits
+     */
+    onClear: EventEmitter<Event>;
+    /**
+     * Callback to invoke when a file is removed without uploading using clear button of a file.
+     * @param {FileRemoveEvent} event - Remove event.
+     * @group Emits
+     */
+    onRemove: EventEmitter<FileRemoveEvent>;
+    /**
+     * Callback to invoke when files are selected.
+     * @param {FileSelectEvent} event - Select event.
+     * @group Emits
+     */
+    onSelect: EventEmitter<FileSelectEvent>;
+    /**
+     * Callback to invoke when files are being uploaded.
+     * @param {FileProgressEvent} event - Progress event.
+     * @group Emits
+     */
+    onProgress: EventEmitter<FileProgressEvent>;
+    /**
+     * Callback to invoke in custom upload mode to upload the files manually.
+     * @param {FileUploadHandlerEvent} event - Upload handler event.
+     * @group Emits
+     */
+    uploadHandler: EventEmitter<FileUploadHandlerEvent>;
+    /**
+     * This event is triggered if an error occurs while loading an image file.
+     * @param {Event} event - Browser event.
+     * @group Emits
+     */
+    onImageError: EventEmitter<Event>;
+    /**
+     * This event is triggered if an error occurs while removing an uploaded file.
+     * @param {RemoveUploadedFileEvent} event - Remove event.
+     * @group Emits
+     */
+    onRemoveUploadedFile: EventEmitter<RemoveUploadedFileEvent>;
+    templates: QueryList<CaxTemplate> | undefined;
+    advancedFileInput: ElementRef | undefined | any;
+    basicFileInput: ElementRef | undefined;
+    content: ElementRef | undefined;
+    set files(files: File[]);
+    get files(): File[];
+    get basicButtonLabel(): string;
+    _files: File[];
+    progress: number;
+    dragHighlight: boolean | undefined;
+    msgs: Message[] | undefined;
+    fileTemplate: TemplateRef<any> | undefined;
+    headerTemplate: TemplateRef<any> | undefined;
+    contentTemplate: TemplateRef<any> | undefined;
+    toolbarTemplate: TemplateRef<any> | undefined;
+    chooseIconTemplate: TemplateRef<any> | undefined;
+    uploadIconTemplate: TemplateRef<any> | undefined;
+    cancelIconTemplate: TemplateRef<any> | undefined;
+    emptyTemplate: TemplateRef<any> | undefined;
+    uploadedFileCount: number;
+    focus: boolean | undefined;
+    uploading: boolean | undefined;
+    duplicateIEEvent: boolean | undefined;
+    translationSubscription: Subscription | undefined;
+    dragOverListener: VoidListener;
+    uploadedFiles: any[];
+    private fileUploadSubcription;
+    constructor(document: Document, platformId: any, renderer: Renderer2, el: ElementRef, sanitizer: DomSanitizer, zone: NgZone, http: HttpClient, cd: ChangeDetectorRef, config: caxConfig);
+    ngAfterContentInit(): void;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    getTranslation(option: string): any;
+    choose(): void;
+    onFileSelect(event: any): void;
+    isFileSelected(file: File): boolean;
+    isIE11(): boolean;
+    validate(file: File): boolean;
+    private isFileTypeValid;
+    getTypeClass(fileType: string): string;
+    isWildcard(fileType: string): boolean;
+    getFileExtension(file: File): string;
+    isImage(file: File): boolean;
+    onImageLoad(img: any): void;
+    /**
+     * Uploads the selected files.
+     * @group Method
+     */
+    upload(): void;
+    /**
+     * Clears the files list.
+     * @group Method
+     */
+    clear(): void;
+    /**
+     * Removes a single file.
+     * @param {Event} event - Browser event.
+     * @param {Number} index - Index of the file.
+     * @group Method
+     */
+    remove(event: Event, index: number): void;
+    /**
+     * Removes uploaded file.
+     * @param {Number} index - Index of the file to be removed.
+     * @group Method
+     */
+    removeUploadedFile(index: any): void;
+    /**
+     * Cancel upload file request.
+     * */
+    cancelUploadRequest(): void;
+    isFileLimitExceeded(): boolean;
+    isChooseDisabled(): boolean;
+    checkFileLimit(files: File[]): void;
+    clearInputElement(): void;
+    clearIEInput(): void;
+    hasFiles(): boolean;
+    hasUploadedFiles(): boolean;
+    onDragEnter(e: DragEvent): void;
+    onDragOver(e: DragEvent): void;
+    onDragLeave(event: DragEvent): void;
+    onDrop(event: any): void;
+    onFocus(): void;
+    onBlur(): void;
+    formatSize(bytes: number): string;
+    onBasicUploaderClick(): void;
+    onBasicKeydown(event: KeyboardEvent): void;
+    imageError(event: Event): void;
+    getBlockableElement(): HTMLElement;
+    get chooseButtonLabel(): string;
+    get uploadButtonLabel(): string;
+    get cancelButtonLabel(): string;
+    get browseFilesLabel(): string;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FileUpload, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FileUpload, "p-fileUpload", never, { "name": { "alias": "name"; "required": false; }; "url": { "alias": "url"; "required": false; }; "method": { "alias": "method"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "auto": { "alias": "auto"; "required": false; }; "withCredentials": { "alias": "withCredentials"; "required": false; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; }; "invalidFileSizeMessageSummary": { "alias": "invalidFileSizeMessageSummary"; "required": false; }; "invalidFileSizeMessageDetail": { "alias": "invalidFileSizeMessageDetail"; "required": false; }; "invalidFileTypeMessageSummary": { "alias": "invalidFileTypeMessageSummary"; "required": false; }; "invalidFileTypeMessageDetail": { "alias": "invalidFileTypeMessageDetail"; "required": false; }; "invalidFileLimitMessageDetail": { "alias": "invalidFileLimitMessageDetail"; "required": false; }; "invalidFileLimitMessageSummary": { "alias": "invalidFileLimitMessageSummary"; "required": false; }; "style": { "alias": "style"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; "previewWidth": { "alias": "previewWidth"; "required": false; }; "chooseLabel": { "alias": "chooseLabel"; "required": false; }; "uploadLabel": { "alias": "uploadLabel"; "required": false; }; "cancelLabel": { "alias": "cancelLabel"; "required": false; }; "chooseIcon": { "alias": "chooseIcon"; "required": false; }; "uploadIcon": { "alias": "uploadIcon"; "required": false; }; "cancelIcon": { "alias": "cancelIcon"; "required": false; }; "showUploadButton": { "alias": "showUploadButton"; "required": false; }; "showCancelButton": { "alias": "showCancelButton"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "headers": { "alias": "headers"; "required": false; }; "customUpload": { "alias": "customUpload"; "required": false; }; "fileLimit": { "alias": "fileLimit"; "required": false; }; "uploadStyleClass": { "alias": "uploadStyleClass"; "required": false; }; "cancelStyleClass": { "alias": "cancelStyleClass"; "required": false; }; "removeStyleClass": { "alias": "removeStyleClass"; "required": false; }; "chooseStyleClass": { "alias": "chooseStyleClass"; "required": false; }; "files": { "alias": "files"; "required": false; }; }, { "onBeforeUpload": "onBeforeUpload"; "onSend": "onSend"; "onUpload": "onUpload"; "onError": "onError"; "onClear": "onClear"; "onRemove": "onRemove"; "onSelect": "onSelect"; "onProgress": "onProgress"; "uploadHandler": "uploadHandler"; "onImageError": "onImageError"; "onRemoveUploadedFile": "onRemoveUploadedFile"; }, ["templates"], never, false, never>;
+    static ngAcceptInputType_multiple: unknown;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_auto: unknown;
+    static ngAcceptInputType_withCredentials: unknown;
+    static ngAcceptInputType_maxFileSize: unknown;
+    static ngAcceptInputType_previewWidth: unknown;
+    static ngAcceptInputType_showUploadButton: unknown;
+    static ngAcceptInputType_showCancelButton: unknown;
+    static ngAcceptInputType_customUpload: unknown;
+    static ngAcceptInputType_fileLimit: unknown;
+}
+export declare class FileUploadModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<FileUploadModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<FileUploadModule, [typeof FileUpload], [typeof i1.CommonModule, typeof i2.SharedModule, typeof i3.ButtonModule, typeof i4.ProgressBarModule, typeof i5.MessagesModule, typeof i6.RippleModule, typeof i7.PlusIcon, typeof i8.UploadIcon, typeof i9.TimesIcon], [typeof FileUpload, typeof i2.SharedModule, typeof i3.ButtonModule, typeof i4.ProgressBarModule, typeof i5.MessagesModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<FileUploadModule>;
+}

package/fileupload/fileupload.interface.d.ts

@@ -0,0 +1,226 @@
+import { HttpEvent } from '@angular/common/http';
+import { TemplateRef } from '@angular/core';
+/**
+ * Upload event.
+ * @group Events
+ */
+export interface UploadEvent {
+    /**
+     * HTTP event.
+     */
+    originalEvent: HttpEvent<any>;
+}
+/**
+ * Remove uploaded file event.
+ * @group Events
+ */
+export interface RemoveUploadedFileEvent {
+    /**
+     * Removed file.
+     */
+    file: any;
+    /**
+     * Uploaded files.
+     */
+    files: any[];
+}
+/**
+ * Form data event.
+ * @group Events
+ */
+export interface FormDataEvent {
+    /**
+     * FormData object.
+     */
+    formData: FormData;
+}
+/**
+ * An event indicating that the request was sent to the server. Useful when a request may be retried multiple times, to distinguish between retries on the final event stream.
+ * @see {@link FileUpload.onSend}
+ * @group Events
+ */
+export interface FileSendEvent extends UploadEvent, FormDataEvent {
+}
+/**
+ * Callback to invoke before file upload is initialized.
+ * @see {@link FileUpload.onBeforeUpload}
+ * @group Events
+ */
+export interface FileBeforeUploadEvent extends FormDataEvent {
+}
+/**
+ * Callback to invoke when file upload is complete.
+ * @see {@link FileUpload.onUpload}
+ * @group Events
+ */
+export interface FileUploadEvent extends UploadEvent {
+    /**
+     * Uploaded files.
+     */
+    files: File[];
+}
+/**
+ * Callback to invoke when a file is removed without uploading using clear button of a file.
+ * @see {@link FileUpload.onRemove}
+ * @group Events
+ */
+export interface FileRemoveEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: Event;
+    /**
+     * Selected file
+     */
+    file: File;
+}
+/**
+ * Callback to invoke when files are selected.
+ * @see {@link FileUpload.onSelect}
+ * @group Events
+ */
+export interface FileSelectEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: Event;
+    /**
+     * Uploaded files.
+     */
+    files: File[];
+    /**
+     * All files to be uploaded.
+     */
+    currentFiles: File[];
+}
+/**
+ * Callback to invoke when files are being uploaded.
+ * @see {@link FileUpload.onProgress}
+ * @extends {UploadEvent}
+ * @group Events
+ */
+export interface FileProgressEvent extends UploadEvent {
+    /**
+     * Calculated progress value.
+     */
+    progress: number;
+}
+/**
+ * Callback to invoke in custom upload mode to upload the files manually.
+ * @see {@link FileUpload.uploadHandler}
+ * @group Events
+ */
+export interface FileUploadHandlerEvent {
+    /**
+     * List of selected files.
+     */
+    files: File[];
+}
+/**
+ * Callback to invoke on upload error.
+ * @see {@link FileUpload.onError}
+ * @group Events
+ */
+export interface FileUploadErrorEvent {
+    /**
+     * List of selected files.
+     */
+    error?: ErrorEvent;
+    /**
+     * List of selected files.
+     */
+    files: File[];
+}
+/**
+ * Defines valid templates in FileUpload.
+ * @group Templates
+ */
+export interface FileUploadTemplates {
+    /**
+     * Custom template of file.
+     */
+    file(): TemplateRef<any>;
+    /**
+     * Custom template of file.
+     */
+    header(context: {
+        /**
+         * File list.
+         */
+        $implicit: any;
+        /**
+         * Uploaded files list.
+         */
+        uploadedFiles: any;
+        /**
+         * Callback to invoke on choose button click.
+         */
+        chooseCallback: VoidFunction;
+        /**
+         * Callback to invoke on clear button click.
+         */
+        clearCallback: VoidFunction;
+        /**
+         * Callback to invoke on upload.
+         */
+        uploadCallback: VoidFunction;
+    }): TemplateRef<any>;
+    /**
+     * Custom template of content.
+     */
+    content(context: {
+        /**
+         * File list.
+         */
+        $implicit: any;
+        /**
+         * Uploaded files list.
+         */
+        uploadedFiles: any;
+        /**
+         * Upload progress.
+         */
+        progress: any;
+        /**
+         * Status messages about upload process.
+         */
+        messages: any;
+        /**
+         * Callback to invoke on choose button click.
+         */
+        chooseCallback: VoidFunction;
+        /**
+         * Callback to invoke on clear button click.
+         */
+        removeFileCallback: VoidFunction;
+        /**
+         * Callback to invoke on clear button click.
+         */
+        clearCallback: VoidFunction;
+        /**
+         * Callback to invoke on upload.
+         */
+        uploadCallback: VoidFunction;
+        /**
+         * Callback to invoke on remove uploaded file, accepts index as a parameter.
+         * @param index Index of the file to remove.
+         */
+        removeUploadedFileCallback: VoidFunction;
+    }): TemplateRef<any>;
+    /**
+     * Custom template of toolbar.
+     */
+    toolbar(): TemplateRef<any>;
+    /**
+     * Custom template of chooseicon.
+     */
+    chooseicon(): TemplateRef<any>;
+    /**
+     * Custom template of uploadicon.
+     */
+    uploadicon(): TemplateRef<any>;
+    /**
+     * Custom template of cancelicon.
+     */
+    cancelicon(): TemplateRef<any>;
+}