@ptsecurity/mosaic 15.3.1 → 15.4.0-beta.1

package/file-upload/_file-upload-theme.scss

@@ -0,0 +1,174 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+@use '../core/styles/tokens';
+
+$tokens: meta.module-variables(tokens) !default;
+
+@mixin mc-file-upload-text-color($states) {
+    &, .mc-icon, .mc-link {
+        color: map.get($states, border);
+    }
+}
+
+@mixin mc-file-upload-color($states) {
+    background-color: map.get($states, background);
+    border-color: map.get($states, border) !important;
+}
+
+@mixin mc-file-upload-theme($theme) {
+    $file-upload: map.get(map.get($theme, components), file-upload);
+    $single: map.get($file-upload, single);
+    $single-states: map.get($single, states);
+    $multiple: map.get($file-upload, multiple);
+    $multiple-states: map.get($multiple, states);
+    $foreground: map.get($theme, foreground);
+
+    .mc-file-upload {
+        .mc-focused, .mc-link.mc-focused {
+            border: 2px solid map.get(map.get($theme, states), focused-color);
+        }
+    }
+
+    .mc-single-file-upload {
+        .mc-file-upload {
+            @include mc-file-upload-color(map.get($single, default));
+
+            &.dragover {
+                @include mc-file-upload-color(map.get($single-states, drag-n-drop));
+            }
+
+            &.mc-error:not(.disabled) {
+                &:not(.dragover) {
+                    @include mc-file-upload-color(map.get($single-states, error));
+                }
+
+                *, .mc-icon {
+                    color: map.get($foreground, text-error);
+                }
+            }
+
+            &.disabled {
+                @include mc-file-upload-color(map.get($single-states, disabled));
+
+                @include mc-file-upload-text-color(map.get($single-states, disabled));
+            }
+        }
+    }
+
+    .mc-multiple-file-upload {
+        .mc-file-upload {
+            @include mc-file-upload-color(map.get($multiple, default));
+
+            .btn-upload {
+                .dropzone {
+                    border-top-color: map.get(map.get($multiple, default), border);
+                }
+            }
+
+            .mc-file-multiple-uploaded__header {
+                border-bottom-color: map.get(map.get($multiple, default), border);
+
+                &-inner {
+                    color: map.get($foreground, text-less-contrast);
+                }
+            }
+
+            &.dragover {
+                @include mc-file-upload-color(map.get($multiple-states, drag-n-drop));
+
+                .mc-file-multiple-uploaded__header {
+                    border-bottom-color: map.get(map.get($multiple-states, drag-n-drop), background) !important;
+                }
+
+                &.selected {
+                    .dropzone {
+                        border-top-color: map.get(map.get($multiple-states, drag-n-drop), border);
+                    }
+                }
+            }
+
+            &.disabled {
+                @include mc-file-upload-color(map.get($multiple-states, disabled));
+
+                @include mc-file-upload-text-color(map.get($multiple-states, disabled));
+
+                &.selected {
+                    .dropzone {
+                        border-top-color: map.get(map.get($multiple-states, disabled), border);
+                    }
+                }
+            }
+
+            &:not(.disabled) {
+                .mc-file-upload__row.error {
+                    *, .mc-icon {
+                        color: map.get($foreground, text-error);
+                    }
+                }
+            }
+
+            .multiple__uploaded-item {
+                .mc-list-text {
+                    padding-right: 0;
+                }
+            }
+        }
+    }
+
+    .mc-single-file-upload, .mc-multiple-file-upload {
+        .mc-file-upload__hint:not(.mc-error) {
+            color: map-get($foreground, text-less-contrast);
+        }
+    }
+}
+
+
+@mixin mc-file-upload-typography($config) {
+    .mc-single-file-upload {
+        @include mc-typography-level-to-styles($config, map.get($tokens, file-upload-font-single));
+    }
+
+    .mc-multiple-file-upload {
+        .multiple__header {
+            @include mc-typography-level-to-styles($config, map.get($tokens, file-upload-font-multiple-header));
+        }
+
+        .multiple__caption {
+            &, .mc-link {
+                @include mc-typography-level-to-styles(
+                    $config, map.get($tokens, file-upload-font-multiple-caption)
+                );
+            }
+        }
+
+        .mc-file-multiple-uploaded__header {
+            @include mc-typography-level-to-styles(
+                $config,
+                map.get($tokens, file-upload-font-multiple-uploaded-header)
+            );
+        }
+
+        .multiple__uploaded-item {
+            @include mc-typography-level-to-styles($config, map.get($tokens, file-upload-font-multiple-uploaded-item));
+        }
+
+        .mc-file-upload {
+            .mc-list-item,
+            .mc-list-option {
+                @include mc-typography-level-to-styles(
+                    $config,
+                    map.get($tokens, file-upload-font-multiple-uploaded-item)
+                );
+            }
+        }
+    }
+
+    .mc-single-file-upload, .mc-multiple-file-upload {
+        .mc-file-upload__hint {
+            @include mc-typography-level-to-styles($config, map.get($tokens, form-field-hint-font-default));
+        }
+    }
+}

package/file-upload/file-drop.d.ts

@@ -0,0 +1,11 @@
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class McFileDropDirective {
+    dragover: boolean;
+    filesDropped: EventEmitter<FileList>;
+    onDragOver(event: DragEvent): void;
+    onDragLeave(event: DragEvent): void;
+    onDrop(event: DragEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McFileDropDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McFileDropDirective, "[mcFileDrop]", ["mcFileDrop"], {}, { "filesDropped": "filesDropped"; }, never, never, false, never>;
+}

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

@@ -0,0 +1,22 @@
+import { InjectionToken } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+export interface McFileItem {
+    file: File;
+    hasError?: boolean;
+    loading?: BehaviorSubject<boolean>;
+    progress?: BehaviorSubject<number>;
+}
+export interface McInputFile {
+    disabled: boolean;
+    files: McFileItem[] | McFileItem | null;
+    accept?: string[];
+    onFileSelectedViaClick(event: Event): void;
+    onFileDropped(files: FileList): void;
+}
+export interface McInputFileLabel {
+    captionText: string;
+    browseLink: string;
+    title?: string | undefined;
+}
+export declare type McFileValidatorFn = (file: File) => string | null;
+export declare const MC_FILE_UPLOAD_CONFIGURATION: InjectionToken<McInputFileLabel>;

package/file-upload/file-upload.module.d.ts

@@ -0,0 +1,18 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./file-drop";
+import * as i2 from "./single-file-upload.component";
+import * as i3 from "./multiple-file-upload.component";
+import * as i4 from "@angular/common";
+import * as i5 from "@ptsecurity/mosaic/tooltip";
+import * as i6 from "@ptsecurity/mosaic/progress-spinner";
+import * as i7 from "@ptsecurity/mosaic/icon";
+import * as i8 from "@ptsecurity/mosaic/button";
+import * as i9 from "@ptsecurity/mosaic/list";
+import * as i10 from "@ptsecurity/mosaic/form-field";
+import * as i11 from "@ptsecurity/mosaic/ellipsis-center";
+import * as i12 from "@ptsecurity/mosaic/core";
+export declare class McFileUploadModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<McFileUploadModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<McFileUploadModule, [typeof i1.McFileDropDirective, typeof i2.McSingleFileUploadComponent, typeof i3.McMultipleFileUploadComponent], [typeof i4.CommonModule, typeof i5.McToolTipModule, typeof i6.McProgressSpinnerModule, typeof i7.McIconModule, typeof i8.McButtonModule, typeof i9.McListModule, typeof i10.McFormFieldModule, typeof i11.McEllipsisCenterModule, typeof i12.McDataSizeModule], [typeof i2.McSingleFileUploadComponent, typeof i3.McMultipleFileUploadComponent, typeof i1.McFileDropDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<McFileUploadModule>;
+}

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/form-field/_form-field-theme.nvl.scss

@@ -0,0 +1,111 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/theming/theming' as *;
+@use '../core/styles/typography/typography-utils' as *;
+
+
+@mixin nvl-mc-form-field-theme($theme) {
+    $foreground: map.get($theme, foreground);
+    $background: map.get($theme, background);
+
+    $error: map.get($theme, error);
+
+    $form-field: map.get(map.get($theme, components), form-field);
+
+    .mc-form-field {
+        & .mc-form-field__container {
+            background-color: map.get($form-field, background);
+        }
+
+        & .mc-form-field__hint {
+            color: map.get($foreground, text-less-contrast);
+        }
+
+        &:not(.mc-form-field_without-borders) {
+            .mc-form-field__container {
+                border-color: map.get($form-field, border);
+            }
+
+            &:hover .mc-form-field__container {
+                border-color: map.get($form-field, state-hover-border);
+            }
+
+            &.ng-invalid {
+                & .mc-form-field__container {
+                    border-color: map.get($form-field, state-invalid-border);
+                    background-color: map.get($form-field, state-invalid-background);
+
+                    .mc-input,
+                    .mc-textarea {
+                        color: map.get($foreground, text-error);
+                    }
+                }
+            }
+
+            &.cdk-focused {
+                &:not(.ng-invalid) .mc-form-field__container {
+                    border-color: map.get(map.get($theme, states), focused-color);
+                    box-shadow: 0 0 0 1px map.get(map.get($theme, states), focused-color);
+                }
+
+                &.ng-invalid .mc-form-field__container {
+                    box-shadow: 0 0 0 1px mc-color($error);
+                }
+            }
+
+            /* stylelint-disable no-descending-specificity */
+            &.mc-disabled .mc-form-field__container {
+                border-color: map.get($form-field, border);
+
+                background-color: map.get($background, background-disabled);
+
+                .mc-icon,
+                .mc-input,
+                .mc-textarea {
+                    color: map.get($foreground, text-disabled);
+                    -webkit-text-fill-color: map.get($foreground, text-disabled);
+                }
+            }
+            /* stylelint-enable no-descending-specificity */
+        }
+    }
+
+    .mc-password-hint {
+        $password-hint: map.get(map.get($theme, components), form-field-password-hint);
+
+        color: map.get($password-hint, text-color);
+
+        & .mc-password-hint__icon {
+            color: map.get($password-hint, icon-color);
+        }
+
+        &.mc-password-hint_valid {
+            color: map.get($password-hint, state-valid-text-color);
+
+            & .mc-password-hint__icon {
+                color: map.get($password-hint, state-valid-icon-color);
+            }
+        }
+
+        &.mc-password-hint_invalid {
+            color: map.get($password-hint, state-invalid-text-color);
+
+            & .mc-password-hint__icon {
+                color: map.get($password-hint, state-invalid-icon-color);
+            }
+        }
+    }
+}
+
+@mixin nvl-mc-form-field-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .mc-form-field {
+        @include mc-typography-level-to-styles($config, map.get($tokens, form-field-font-default));
+    }
+
+    .mc-form-field__hint {
+        @include mc-typography-level-to-styles($config, map.get($tokens, form-field-hint-font-default));
+    }
+}