@ptsecurity/mosaic 16.4.0 → 16.4.2

package/file-upload/file-upload.scss

@@ -6,26 +6,18 @@
 @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;

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

@@ -1,6 +1,5 @@
-import { FocusMonitor } from '@angular/cdk/a11y';
-import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, Renderer2, TemplateRef } from '@angular/core';
-import { CanDisable } from '@ptsecurity/mosaic/core';
+import { ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, Renderer2, TemplateRef } from '@angular/core';
+import { CanDisable, McLocaleService } from '@ptsecurity/mosaic/core';
 import { McFile, McFileItem, McFileValidatorFn, McInputFile, McInputFileLabel } from './file-upload';
 import * as i0 from "@angular/core";
 export interface McInputFileMultipleLabel extends McInputFileLabel {
@@ -13,11 +12,11 @@ export interface McInputFileMultipleLabel extends McInputFileLabel {
     [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;
+export declare class McMultipleFileUploadComponent implements McInputFile, CanDisable, OnDestroy {
     private renderer;
-    config: McInputFileMultipleLabel;
+    private cdr;
+    readonly configuration: McInputFileMultipleLabel;
+    private localeService?;
     accept?: string[];
     disabled: boolean;
     errors: string[];
@@ -28,25 +27,29 @@ export declare class McMultipleFileUploadComponent implements AfterViewInit, OnD
     fileQueueChanged: EventEmitter<McFileItem[]>;
     customFileIcon: TemplateRef<HTMLElement>;
     input: ElementRef<HTMLInputElement>;
-    hasFocus: boolean;
     columnDefs: {
         header: string;
         cssClass: string;
     }[];
-    private focusMonitorSubscription;
+    config: McInputFileMultipleLabel;
+    separatedCaptionText: string[];
+    separatedCaptionTextWhenSelected: string[];
+    separatedCaptionTextForCompactSize: string[];
     get acceptedFiles(): string;
     get hasErrors(): boolean;
-    constructor(focusMonitor: FocusMonitor, cdr: ChangeDetectorRef, renderer: Renderer2, config: McInputFileMultipleLabel);
-    ngAfterViewInit(): void;
+    private localeSubscription;
+    constructor(renderer: Renderer2, cdr: ChangeDetectorRef, configuration: McInputFileMultipleLabel, localeService?: McLocaleService | undefined);
     ngOnDestroy(): void;
     onFileSelectedViaClick({ target }: Event): void;
     onFileDropped(files: FileList | McFile[]): void;
     deleteFile(index: number, event?: MouseEvent): void;
     onFileListChange(): void;
-    onFocus(focusState: boolean): void;
+    private updateLocaleParams;
     private mapToFileItem;
     private validateFile;
     private isCorrectExtension;
-    static ɵfac: i0.ɵɵFactoryDeclaration<McMultipleFileUploadComponent, [null, null, null, { optional: true; }]>;
+    private initDefaultParams;
+    private makeCaptionText;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McMultipleFileUploadComponent, [null, null, { optional: true; }, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<McMultipleFileUploadComponent, "mc-multiple-file-upload", never, { "accept": { "alias": "accept"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "files": { "alias": "files"; "required": false; }; "size": { "alias": "size"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "customValidation": { "alias": "customValidation"; "required": false; }; }, { "fileQueueChanged": "fileQueueChanged"; }, ["customFileIcon"], ["[hint]"], false, never>;
 }

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

@@ -7,7 +7,6 @@
 
 $tokens: meta.module-variables(tokens) !default;
 
-$dropzone-text-margin-left: map.get($tokens, size-xs);
 $multiple-default-height: 176px;
 $border-type-header: solid;
 
@@ -34,29 +33,9 @@ $vertical-padding-item: var(
         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;
+        height: 36px;
 
         .mc-icon {
             margin-right: 0;
@@ -64,7 +43,7 @@ $vertical-padding-item: var(
     }
 
     .mc-file-upload__grid {
-        min-height: 144px;
+        min-height: 142px;
     }
 
     .mc-file-multiple-uploaded__header-inner,
@@ -90,6 +69,11 @@ $vertical-padding-item: var(
             padding-left: $horizontal-padding-item;
             padding-right: $horizontal-padding-item;
         }
+
+        .mc-file-upload__action {
+            display: flex;
+            align-items: center;
+        }
     }
 
     .mc-file-upload__row {
@@ -120,6 +104,7 @@ $vertical-padding-item: var(
 
     .btn-upload {
         .dropzone {
+            $padding-top: map.get($tokens, size-xxs);
             margin: 0;
             border-top-width: var(
                 --mc-file-upload-size-multiple-border-width,
@@ -129,10 +114,57 @@ $vertical-padding-item: 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);
+            padding: calc($padding-top - 1px)
+                map.get($tokens, size-m)
+                map.get($tokens, size-xxs)
+                map.get($tokens, size-m);
+        }
+    }
+
+    &.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);
+        }
+
+        .dropzone {
+            .dropzone__text {
+                margin-left: map.get($tokens, size-xs);
+            }
         }
     }
 
+    &.default {
+        min-height: $multiple-default-height;
+        justify-content: center;
+
+        .dropzone {
+            .dropzone__text {
+                margin-left: map.get($tokens, size-l);
+            }
+        }
+
+        .btn-upload {
+            .dropzone {
+                .dropzone__text {
+                    margin-left: map.get($tokens, size-xs);
+                }
+            }
+        }
+    }
+
+
     .file-upload__dropzone {
         width: 100%;
         height: 100%;

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

@@ -1,14 +1,13 @@
-import { FocusMonitor } from '@angular/cdk/a11y';
-import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, Renderer2 } from '@angular/core';
-import { CanDisable } from '@ptsecurity/mosaic/core';
+import { ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, Renderer2 } from '@angular/core';
+import { CanDisable, McLocaleService } from '@ptsecurity/mosaic/core';
 import { McFile, 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;
+export declare class McSingleFileUploadComponent implements McInputFile, CanDisable, OnDestroy {
     private renderer;
-    config: McInputFileLabel;
+    private cdr;
+    readonly configuration: McInputFileLabel;
+    private localeService?;
     accept: string[];
     disabled: boolean;
     errors: string[];
@@ -17,19 +16,21 @@ export declare class McSingleFileUploadComponent implements AfterViewInit, OnDes
     customValidation?: McFileValidatorFn[];
     fileQueueChanged: EventEmitter<McFileItem | null>;
     input: ElementRef<HTMLInputElement>;
-    hasFocus: boolean;
-    private focusMonitorSubscription;
     get acceptedFiles(): string;
-    constructor(focusMonitor: FocusMonitor, cdr: ChangeDetectorRef, renderer: Renderer2, config: McInputFileLabel);
-    ngAfterViewInit(): void;
+    config: McInputFileLabel;
+    separatedCaptionText: string[];
+    private localeSubscription;
+    constructor(renderer: Renderer2, cdr: ChangeDetectorRef, configuration: McInputFileLabel, localeService?: McLocaleService | undefined);
     ngOnDestroy(): void;
     onFileSelectedViaClick({ target }: Event): void;
     deleteItem(event?: MouseEvent): void;
     onFileDropped(files: FileList | McFile[]): void;
-    onFocus(focusState: boolean): void;
     private mapToFileItem;
     private validateFile;
     private isCorrectExtension;
-    static ɵfac: i0.ɵɵFactoryDeclaration<McSingleFileUploadComponent, [null, null, null, { optional: true; }]>;
+    private updateLocaleParams;
+    private initDefaultParams;
+    private makeCaptionText;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McSingleFileUploadComponent, [null, null, { optional: true; }, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<McSingleFileUploadComponent, "mc-single-file-upload", never, { "accept": { "alias": "accept"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "files": { "alias": "files"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "customValidation": { "alias": "customValidation"; "required": false; }; }, { "fileQueueChanged": "fileQueueChanged"; }, never, ["[hint]", "[mc-icon]"], false, never>;
 }

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

@@ -34,6 +34,12 @@ $tokens: meta.module-variables(tokens) !default;
         map.get($tokens, file-upload-size-single-border-style)
     );
 
+    .dropzone {
+        .dropzone__text {
+            margin-left: map.get($tokens, size-xs);
+        }
+    }
+
     .file-item {
         width: 100%;
 

package/form-field/form-field.scss

@@ -114,6 +114,8 @@ $tokens: meta.module-variables(tokens) !default;
 
 .mc-cleaner {
     display: flex;
+    align-items: center;
+    justify-content: center;
 
     width: var(--mc-form-field-size-button-width, map.get($tokens, form-field-size-button-width));
     height: 100%;

package/input/input-password.d.ts

@@ -10,7 +10,6 @@ import { Subject } from 'rxjs';
 import { McInputMixinBase } from './input';
 import * as i0 from "@angular/core";
 export declare class McPasswordToggle extends McTooltipTrigger implements OnDestroy {
-    private focusMonitor;
     private formField;
     get content(): string | TemplateRef<any>;
     set content(content: string | TemplateRef<any>);

package/link/_link-theme.scss

@@ -31,7 +31,8 @@
         }
     }
 
-    &:active {
+    &:active,
+    &.mc-active {
         color: map.get($link, state-active-text);
     }
 

package/navbar/navbar-item.component.d.ts

@@ -142,13 +142,13 @@ export declare class McNavbarItem extends McTooltipTrigger {
     get showVerticalDropDownAngle(): boolean;
     get showHorizontalDropDownAngle(): boolean;
     get hasCroppedText(): boolean;
-    constructor(rectangleElement: McNavbarRectangleElement, navbarFocusableItem: McNavbarFocusableItem, changeDetectorRef: ChangeDetectorRef, overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality, dropdownTrigger: McDropdownTrigger, bento: McNavbarBento);
+    constructor(rectangleElement: McNavbarRectangleElement, navbarFocusableItem: McNavbarFocusableItem, changeDetectorRef: ChangeDetectorRef, overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, focusMonitor: FocusMonitor, scrollStrategy: any, direction: Directionality, dropdownTrigger: McDropdownTrigger, bento: McNavbarBento);
     ngAfterContentInit(): void;
     updateTooltip(): void;
     getTitleWidth(): number;
     onKeyDown($event: KeyboardEvent): void;
     private updateCollapsedState;
-    static ɵfac: i0.ɵɵFactoryDeclaration<McNavbarItem, [null, null, null, null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McNavbarItem, [null, null, null, null, null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<McNavbarItem, "mc-navbar-item, [mc-navbar-item]", ["mcNavbarItem"], { "collapsedText": { "alias": "collapsedText"; "required": false; }; "trigger": { "alias": "mcTrigger"; "required": false; }; "collapsable": { "alias": "collapsable"; "required": false; }; }, {}, ["title", "subTitle", "icon"], ["[mc-icon]", "mc-navbar-title, [mc-navbar-title]", "mc-navbar-subtitle, [mc-navbar-subtitle]", "*"], false, never>;
 }
 export declare class McNavbarToggle extends McTooltipTrigger implements OnDestroy {
@@ -160,12 +160,12 @@ export declare class McNavbarToggle extends McTooltipTrigger implements OnDestro
     set content(content: string | TemplateRef<any>);
     get disabled(): boolean;
     protected modifier: TooltipModifier;
-    constructor(navbar: McVerticalNavbar, changeDetectorRef: ChangeDetectorRef, overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality, document: any);
+    constructor(navbar: McVerticalNavbar, changeDetectorRef: ChangeDetectorRef, overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, focusMonitor: FocusMonitor, direction: Directionality, document: any);
     onKeydown($event: KeyboardEvent): void;
     ngOnDestroy(): void;
     toggle: () => void;
     private getWindow;
     private windowToggleHandler;
-    static ɵfac: i0.ɵɵFactoryDeclaration<McNavbarToggle, [null, null, null, null, null, null, null, null, { optional: true; }, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McNavbarToggle, [null, null, null, null, null, null, null, null, null, { optional: true; }, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<McNavbarToggle, "mc-navbar-toggle", never, { "content": { "alias": "mcCollapsedTooltip"; "required": false; }; }, {}, ["customIcon"], ["[mc-icon]", "mc-navbar-title"], false, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ptsecurity/mosaic",
-    "version": "16.4.0",
+    "version": "16.4.2",
     "description": "Mosaic",
     "repository": {
         "type": "git",
@@ -19,14 +19,14 @@
     "peerDependencies": {
         "@angular/cdk": "^16.1.5",
         "@angular/forms": "^16.1.5",
-        "@ptsecurity/cdk": "^16.4.0",
-        "@ptsecurity/mosaic-moment-adapter": "^16.4.0",
-        "@ptsecurity/mosaic-luxon-adapter": "^16.4.0",
-        "@mosaic-design/date-formatter": "^2.1.5",
+        "@ptsecurity/cdk": "^16.4.2",
+        "@ptsecurity/mosaic-moment-adapter": "^16.4.2",
+        "@ptsecurity/mosaic-luxon-adapter": "^16.4.2",
+        "@mosaic-design/date-formatter": "^2.1.6",
         "@ptsecurity/mosaic-icons": "^7.0.8",
-        "@mosaic-design/tokens-builder": "^2.1.4",
-        "@mosaic-design/tokens-fe-2022": "^2.1.4",
-        "@mosaic-design/tokens-legacy-2017": "^2.1.4",
+        "@mosaic-design/tokens-builder": "^2.2.1",
+        "@mosaic-design/tokens-fe-2022": "^2.2.1",
+        "@mosaic-design/tokens-legacy-2017": "^2.2.1",
         "marked": "^4.0.18"
     },
     "dependencies": {