@ptsecurity/mosaic 15.3.2 → 15.4.1

package/file-upload/file-upload.scss

@@ -0,0 +1,46 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+@use '../core/styles/common';
+
+$tokens: meta.module-variables(tokens) !default;
+$dropzone-text-margin-left: map.get($tokens, size-xs);
+
+.mc-file-upload {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    position: relative;
+    cursor: pointer;
+
+    .dropzone, .file-item {
+        display: flex;
+        align-items: center;
+    }
+
+    .dropzone {
+        .dropzone__text {
+            margin-left: $dropzone-text-margin-left;
+        }
+    }
+
+    .mc-ellipsis-center {
+        position: relative;
+        display: flex;
+
+        .data-text-start {
+            flex: 0 1 auto;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: pre;
+        }
+
+        .data-text-end {
+            flex: 1 0 auto;
+            overflow: hidden;
+            white-space: pre;
+        }
+    }
+}

package/file-upload/index.d.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/file-upload/multiple-file-upload.component.d.ts

@@ -0,0 +1,51 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, TemplateRef } from '@angular/core';
+import { CanDisable } from '@ptsecurity/mosaic/core';
+import { McFileItem, McFileValidatorFn, McInputFile, McInputFileLabel } from './file-upload';
+import * as i0 from "@angular/core";
+export interface McInputFileMultipleLabel extends McInputFileLabel {
+    captionTextWhenSelected: string;
+    captionTextForCompactSize: string;
+    gridHeaders: {
+        file: string;
+        size: string;
+    };
+    [k: string | number | symbol]: unknown;
+}
+export declare const MC_MULTIPLE_FILE_UPLOAD_DEFAULT_CONFIGURATION: McInputFileMultipleLabel;
+export declare class McMultipleFileUploadComponent implements AfterViewInit, OnDestroy, McInputFile, CanDisable {
+    private focusMonitor;
+    private cdr;
+    config: McInputFileMultipleLabel;
+    accept?: string[];
+    disabled: boolean;
+    errors: string[];
+    files: McFileItem[];
+    size: 'compact' | 'default';
+    inputId: string;
+    customValidation?: McFileValidatorFn[];
+    fileQueueChanged: EventEmitter<McFileItem[]>;
+    customFileIcon: TemplateRef<HTMLElement>;
+    input: ElementRef<HTMLInputElement>;
+    hasFocus: boolean;
+    columnDefs: {
+        header: string;
+        cssClass: string;
+    }[];
+    private focusMonitorSubscription;
+    get acceptedFiles(): string;
+    get hasErrors(): boolean;
+    constructor(focusMonitor: FocusMonitor, cdr: ChangeDetectorRef, config: McInputFileMultipleLabel);
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    onFileSelectedViaClick({ target }: Event): void;
+    onFileDropped(files: FileList): void;
+    deleteFile(index: number, event?: MouseEvent): void;
+    onFileListChange(): void;
+    onFocus(focusState: boolean): void;
+    private mapToFileItem;
+    private validateFile;
+    private isCorrectExtension;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McMultipleFileUploadComponent, [null, null, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McMultipleFileUploadComponent, "mc-multiple-file-upload", never, { "accept": "accept"; "disabled": "disabled"; "errors": "errors"; "files": "files"; "size": "size"; "inputId": "inputId"; "customValidation": "customValidation"; }, { "fileQueueChanged": "fileQueueChanged"; }, ["customFileIcon"], ["[hint]"], false, never>;
+}

package/file-upload/multiple-file-upload.component.scss

@@ -0,0 +1,148 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+@use '../core/styles/common';
+
+$tokens: meta.module-variables(tokens) !default;
+
+$dropzone-text-margin-left: map.get($tokens, size-xs);
+$multiple-default-height: 176px;
+$border-type-header: solid;
+
+$horizontal-padding-item: var(
+    --mc-file-upload-size-multiple-uploaded-item-horizontal-padding,
+    map.get($tokens, file-upload-size-multiple-uploaded-item-horizontal-padding)
+);
+$vertical-padding-item: var(
+    --mc-file-upload-size-multiple-uploaded-item-vertical-padding,
+    map.get($tokens, file-upload-size-multiple-uploaded-item-vertical-padding)
+);
+
+.mc-file-upload {
+    border-radius: var(
+        --mc-file-upload-size-multiple-border-radius,
+        map.get($tokens, file-upload-size-multiple-border-radius)
+    );
+    border-width: var(
+        --mc-file-upload-size-multiple-border-width,
+        map.get($tokens, file-upload-size-multiple-border-width)
+    );
+    border-style: var(
+        --mc-file-upload-size-multiple-border-style,
+        map.get($tokens, file-upload-size-multiple-border-style)
+    );
+
+    &.default {
+        min-height: $multiple-default-height;
+        justify-content: center;
+    }
+
+    &.compact:not(.selected) {
+        height: var(
+            --mc-file-upload-size-single-height,
+            map.get($tokens, file-upload-size-single-height)
+        );
+        padding-top: var(
+            --mc-file-upload-size-single-vertical-padding,
+            map.get($tokens, file-upload-size-single-vertical-padding)
+        );
+        padding-bottom: var(
+            --mc-file-upload-size-single-vertical-padding,
+            map.get($tokens, file-upload-size-single-vertical-padding)
+        );
+        padding-left: map.get($tokens, size-m);
+    }
+
+    .mc-list-option {
+        padding: $horizontal-padding-item $vertical-padding-item;
+
+        .mc-icon {
+            margin-right: 0;
+        }
+    }
+
+    .mc-file-upload__grid {
+        min-height: 144px;
+    }
+
+    .mc-file-multiple-uploaded__header-inner,
+    .mc-file-upload__row {
+        display: flex;
+        align-items: center;
+
+        .mc-file-upload__file {
+            width: 65%;
+            max-width: 65%;
+        }
+
+        .mc-file-upload__size {
+            width: map.get($tokens, size-7xl);
+            min-width: map.get($tokens, size-7xl);
+            text-align: left;
+            flex-grow: 1;
+        }
+
+        .mc-file-upload__file,
+        .mc-file-upload__size,
+        .mc-file-upload__action, {
+            padding-left: $horizontal-padding-item;
+            padding-right: $horizontal-padding-item;
+        }
+    }
+
+    .mc-file-upload__row {
+        .mc-file-upload__file {
+            display: flex;
+            align-items: center;
+
+            .file-item__text {
+                margin-left: 0;
+                width: 90%;
+            }
+        }
+    }
+
+    .mc-file-multiple-uploaded__header {
+        border-bottom-width: 1px;
+        border-bottom-style: $border-type-header;
+
+        &-inner {
+            padding: $horizontal-padding-item $vertical-padding-item;
+            border: 2px solid transparent;
+            border-bottom: unset;
+            box-sizing: border-box;
+            height: var(--mc-list-size-item-height, map.get($tokens, size-3xl));
+        }
+
+    }
+
+    .btn-upload {
+        .dropzone {
+            margin: 0;
+            border-top-width: var(
+                --mc-file-upload-size-multiple-border-width,
+                map.get($tokens, file-upload-size-multiple-border-width)
+            );
+            border-top-style: var(
+                --mc-file-upload-size-multiple-border-style,
+                map.get($tokens, file-upload-size-multiple-border-style)
+            );
+            padding: map.get($tokens, size-xxs) map.get($tokens, size-m);
+        }
+    }
+
+    .file-upload__dropzone {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.mc-hint {
+    display: block;
+}
+
+.mc-file-upload__hint {
+    margin-top: var(--mc-form-field-hint-size-margin-top, map.get($tokens, form-field-hint-size-margin-top));
+}

package/file-upload/public-api.d.ts

@@ -0,0 +1,5 @@
+export * from './file-upload';
+export * from './file-upload.module';
+export * from './multiple-file-upload.component';
+export * from './single-file-upload.component';
+export * from './file-drop';

package/file-upload/single-file-upload.component.d.ts

@@ -0,0 +1,34 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy } from '@angular/core';
+import { CanDisable } from '@ptsecurity/mosaic/core';
+import { McFileItem, McFileValidatorFn, McInputFile, McInputFileLabel } from './file-upload';
+import * as i0 from "@angular/core";
+export declare const MC_SINGLE_FILE_UPLOAD_DEFAULT_CONFIGURATION: McInputFileLabel;
+export declare class McSingleFileUploadComponent implements AfterViewInit, OnDestroy, McInputFile, CanDisable {
+    private focusMonitor;
+    private cdr;
+    config: McInputFileLabel;
+    accept: string[];
+    disabled: boolean;
+    errors: string[];
+    files: McFileItem[];
+    inputId: string;
+    customValidation?: McFileValidatorFn[];
+    fileQueueChanged: EventEmitter<McFileItem | null>;
+    input: ElementRef<HTMLInputElement>;
+    hasFocus: boolean;
+    private focusMonitorSubscription;
+    get acceptedFiles(): string;
+    constructor(focusMonitor: FocusMonitor, cdr: ChangeDetectorRef, config: McInputFileLabel);
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    onFileSelectedViaClick({ target }: Event): void;
+    deleteItem(event?: MouseEvent): void;
+    onFileDropped(files: FileList): void;
+    onFocus(focusState: boolean): void;
+    private mapToFileItem;
+    private validateFile;
+    private isCorrectExtension;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McSingleFileUploadComponent, [null, null, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McSingleFileUploadComponent, "mc-single-file-upload", never, { "accept": "accept"; "disabled": "disabled"; "errors": "errors"; "files": "files"; "inputId": "inputId"; "customValidation": "customValidation"; }, { "fileQueueChanged": "fileQueueChanged"; }, never, ["[hint]", "[mc-icon]"], false, never>;
+}

package/file-upload/single-file-upload.component.scss

@@ -0,0 +1,60 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+@use '../core/styles/common';
+
+$tokens: meta.module-variables(tokens) !default;
+
+.mc-file-upload {
+    height: var(
+        --mc-file-upload-size-single-height,
+        map.get($tokens, file-upload-size-single-height)
+    );
+    padding-top: var(
+        --mc-file-upload-size-single-vertical-padding,
+        map.get($tokens, file-upload-size-single-vertical-padding)
+    );
+    padding-bottom: var(
+        --mc-file-upload-size-single-vertical-padding,
+        map.get($tokens, file-upload-size-single-vertical-padding)
+    );
+    padding-left: map.get($tokens, size-m);
+
+    border-radius: var(
+        --mc-file-upload-size-single-border-radius,
+        map.get($tokens, file-upload-size-single-border-radius)
+    );
+    border-width: var(
+        --mc-file-upload-size-single-border-width,
+        map.get($tokens, file-upload-size-single-border-width));
+    border-style: var(
+        --mc-file-upload-size-single-border-style,
+        map.get($tokens, file-upload-size-single-border-style)
+    );
+
+    .file-item {
+        width: 100%;
+
+        .file-item__text-wrapper {
+            display: flex;
+            align-items: center;
+            width: 100%;
+
+            .file-item__text {
+                margin-left: map.get($tokens, size-s);
+                width: 120px;
+                flex-grow: 1;
+            }
+        }
+    }
+}
+
+.mc-hint {
+    display: block;
+}
+
+.mc-file-upload__hint {
+    margin-top: var(--mc-form-field-hint-size-margin-top, map.get($tokens, form-field-hint-size-margin-top));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ptsecurity/mosaic",
-    "version": "15.3.2",
+    "version": "15.4.1",
     "description": "Mosaic",
     "repository": {
         "type": "git",
@@ -22,7 +22,7 @@
         "@angular/core": "^15.2.0",
         "@angular/common": "^15.2.0",
         "@angular/forms": "^15.2.0",
-        "@ptsecurity/cdk": "^15.3.2",
+        "@ptsecurity/cdk": "^15.4.1",
         "@ptsecurity/mosaic-moment-adapter": "^1.1.0",
         "@ptsecurity/mosaic-luxon-adapter": "^1.1.0",
         "@mosaic-design/date-formatter": "^1.1.0",
@@ -149,6 +149,22 @@
             "node": "./fesm2015/ptsecurity-mosaic-dropdown.mjs",
             "default": "./fesm2020/ptsecurity-mosaic-dropdown.mjs"
         },
+        "./ellipsis-center": {
+            "types": "./ellipsis-center/index.d.ts",
+            "esm2020": "./esm2020/ellipsis-center/ptsecurity-mosaic-ellipsis-center.mjs",
+            "es2020": "./fesm2020/ptsecurity-mosaic-ellipsis-center.mjs",
+            "es2015": "./fesm2015/ptsecurity-mosaic-ellipsis-center.mjs",
+            "node": "./fesm2015/ptsecurity-mosaic-ellipsis-center.mjs",
+            "default": "./fesm2020/ptsecurity-mosaic-ellipsis-center.mjs"
+        },
+        "./file-upload": {
+            "types": "./file-upload/index.d.ts",
+            "esm2020": "./esm2020/file-upload/ptsecurity-mosaic-file-upload.mjs",
+            "es2020": "./fesm2020/ptsecurity-mosaic-file-upload.mjs",
+            "es2015": "./fesm2015/ptsecurity-mosaic-file-upload.mjs",
+            "node": "./fesm2015/ptsecurity-mosaic-file-upload.mjs",
+            "default": "./fesm2020/ptsecurity-mosaic-file-upload.mjs"
+        },
         "./form-field": {
             "types": "./form-field/index.d.ts",
             "esm2020": "./esm2020/form-field/ptsecurity-mosaic-form-field.mjs",