@ptsecurity/mosaic 14.7.1 → 15.0.0

package/input/input-password.d.ts

@@ -28,7 +28,7 @@ export declare class McPasswordToggle extends McTooltipTrigger implements OnDest
     private runFocusMonitor;
     private stopFocusMonitor;
     static ɵfac: i0.ɵɵFactoryDeclaration<McPasswordToggle, [null, null, null, null, null, null, { optional: true; }, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McPasswordToggle, "mc-password-toggle", ["mcPasswordToggle"], { "content": "mcTooltipNotHidden"; "mcTooltipHidden": "mcTooltipHidden"; "disabled": "disabled"; "tabIndex": "tabIndex"; }, {}, never, ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McPasswordToggle, "mc-password-toggle", ["mcPasswordToggle"], { "content": "mcTooltipNotHidden"; "mcTooltipHidden": "mcTooltipHidden"; "disabled": "disabled"; "tabIndex": "tabIndex"; }, {}, never, ["*"], false, never>;
 }
 export declare class McInputPassword extends McInputMixinBase implements McFormFieldControl<any>, OnChanges, OnDestroy, DoCheck, CanUpdateErrorState, OnChanges {
     protected elementRef: ElementRef;
@@ -113,5 +113,5 @@ export declare class McInputPassword extends McInputMixinBase implements McFormF
     /** Checks whether the input is invalid based on the native validation. */
     protected isBadInput(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<McInputPassword, [null, { optional: true; self: true; }, { optional: true; }, { optional: true; }, null, { optional: true; self: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McInputPassword, "input[mcInputPassword]", ["mcInputPassword"], { "errorStateMatcher": "errorStateMatcher"; "placeholder": "placeholder"; "disabled": "disabled"; "id": "id"; "required": "required"; "value": "value"; }, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McInputPassword, "input[mcInputPassword]", ["mcInputPassword"], { "errorStateMatcher": "errorStateMatcher"; "placeholder": "placeholder"; "disabled": "disabled"; "id": "id"; "required": "required"; "value": "value"; }, {}, never, never, false, never>;
 }

package/input/input.d.ts

@@ -109,9 +109,9 @@ export declare class McInput extends McInputMixinBase implements McFormFieldCont
     /** Checks whether the input is invalid based on the native validation. */
     protected isBadInput(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<McInput, [null, { optional: true; self: true; }, { optional: true; self: true; }, { optional: true; }, { optional: true; }, null, { optional: true; self: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McInput, "input[mcInput]", ["mcInput"], { "errorStateMatcher": "errorStateMatcher"; "placeholder": "placeholder"; "disabled": "disabled"; "id": "id"; "required": "required"; "type": "type"; "value": "value"; }, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McInput, "input[mcInput]", ["mcInput"], { "errorStateMatcher": "errorStateMatcher"; "placeholder": "placeholder"; "disabled": "disabled"; "id": "id"; "required": "required"; "type": "type"; "value": "value"; }, {}, never, never, false, never>;
 }
 export declare class McInputMono {
     static ɵfac: i0.ɵɵFactoryDeclaration<McInputMono, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McInputMono, "input[mcInputMonospace]", ["McInputMonospace"], {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McInputMono, "input[mcInputMonospace]", ["McInputMonospace"], {}, {}, never, never, false, never>;
 }

package/input/input.scss

@@ -0,0 +1,62 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use 'input-base' as *;
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.mc-input {
+    @extend %mc-input-field-base;
+
+    display: inline-block;
+    box-sizing: border-box;
+}
+
+input.mc-input[type="number"] {
+    -moz-appearance: textfield;
+}
+
+input.mc-input[type="number"]::-webkit-inner-spin-button,
+input.mc-input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+}
+
+/* remove default red border for HTML5 validation invalid fields in Firefox */
+input.mc-input:invalid {
+    box-shadow: unset;
+}
+
+.mc-password-toggle {
+    display: flex;
+
+    position: absolute;
+
+    top: -1px;
+    right: -1px;
+
+    border: 1px solid transparent;
+
+    width: 32px;
+    height: 32px;
+
+    align-items: center;
+    justify-content: center;
+
+    cursor: pointer;
+
+    border-top-right-radius: var(--mc-form-field-size-border-radius, map.get($tokens, form-field-size-border-radius));
+    border-bottom-right-radius: var(
+        --mc-form-field-size-border-radius, map.get($tokens, form-field-size-border-radius)
+    );
+
+    &::-moz-focus-inner {
+        border: 0;
+    }
+
+    &:focus {
+        outline: none;
+    }
+}

package/link/_link-theme.scss

@@ -0,0 +1,172 @@
+@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-link($foreground, $link) {
+    display: inline-block;
+
+    color: map.get($link, text);
+    text-decoration: none;
+    cursor: pointer;
+
+    transition: color ease-out 300ms;
+
+    &:focus {
+        outline: none;
+    }
+
+    /* stylelint-disable no-descending-specificity */
+    &:hover {
+        color: map.get($link, state-hover-text);
+        transition: color 0ms;
+
+        &.mc-text-only,
+        &.mc-text-with-icon .mc-link__text {
+            border-bottom-color: map.get($link, state-hover-border-bottom);
+        }
+
+        & .mc-icon {
+            color: map.get($link, state-hover-text);
+        }
+    }
+
+    &:active {
+        color: map.get($link, state-active-text);
+    }
+
+    &.cdk-keyboard-focused {
+        outline: map.get($link, state-focused-outline) solid map.get($tokens, link-size-state-focused-outline-width);
+
+        outline-offset: map.get($tokens, link-size-state-focused-outline-offset);
+    }
+
+    & .mc-icon {
+        color: inherit;
+    }
+
+    &.mc-text-only,
+    &.mc-text-with-icon .mc-link__text {
+        border-bottom-style: solid;
+        border-bottom-width: 1px;
+        border-bottom-color: map.get($link, border-bottom);
+    }
+
+    &.mc-text-with-icon .mc-link__text {
+        &:not(:first-child) {
+            margin-left: map.get($tokens, link-size-icon-margin);
+        }
+
+        &:not(:last-child) {
+            margin-right: map.get($tokens, link-size-icon-margin);
+        }
+    }
+
+    &.mc-link_pseudo {
+        display: inline;
+
+        &.mc-text-only,
+        &.mc-text-with-icon .mc-link__text {
+            border-bottom-color: transparent;
+        }
+
+        &:hover {
+            &.mc-text-only,
+            &.mc-text-with-icon .mc-link__text {
+                border-bottom-color: map.get($link, state-hover-border-bottom);
+            }
+        }
+
+        &[disabled] {
+            &.mc-text-only,
+            &.mc-text-with-icon .mc-link__text {
+                border-bottom-color: transparent;
+            }
+        }
+    }
+
+    &.mc-link_no-underline {
+        &.mc-text-only,
+        &.mc-text-with-icon .mc-link__text {
+            border-bottom-color: transparent;
+        }
+    }
+
+    &[disabled] {
+        color: map.get($foreground, text-disabled);
+
+        cursor: default;
+        pointer-events: none;
+
+        &.mc-text-only,
+        &.mc-text-with-icon .mc-link__text {
+            border-bottom-color: map.get($link, border-bottom);
+        }
+
+        & .mc-icon {
+            color: map.get($foreground, text-disabled);
+        }
+        /* stylelint-enable no-descending-specificity */
+    }
+}
+
+
+@mixin mc-link-theme($theme) {
+    $foreground: map.get($theme, foreground);
+
+    $link: map.get(map.get($theme, components), link);
+
+    .mc-link:not(.mc-link_use-visited) {
+        &:visited {
+            color: map.get($link, text);
+        }
+
+        @include mc-link($foreground, $link);
+    }
+
+    .mc-link.mc-link_use-visited {
+        &:visited {
+            color: map.get($link, state-visited-text);
+
+            &.mc-text-only,
+            &.mc-text-with-icon .mc-link__text {
+                border-bottom-color: map.get($link, state-visited-border-bottom);
+            }
+
+            & .mc-icon {
+                color: map.get($link, state-visited-text);
+            }
+        }
+
+        @include mc-link($foreground, $link);
+    }
+
+    @media print {
+        .mc-link_print:not([disabled]) {
+            color: map.get($foreground, text);
+
+            &.mc-text-only,
+            &.mc-text-with-icon .mc-link__text {
+                border-bottom: none;
+            }
+
+            &::after {
+                color: map.get($foreground, text);
+
+                content: ":\a" attr(print);
+                white-space: pre;
+            }
+        }
+    }
+}
+
+@mixin mc-link-typography($config) {
+    .mc-link {
+        @include mc-typography-level-to-styles($config, map.get($tokens, link-font-default));
+    }
+}

package/link/link.component.d.ts

@@ -37,5 +37,5 @@ export declare class McLink extends McLinkMixinBase implements OnDestroy, HasTab
     getHostElement(): any;
     private updatePrintUrl;
     static ɵfac: i0.ɵɵFactoryDeclaration<McLink, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McLink, "[mc-link]", ["mcLink"], { "tabIndex": "tabIndex"; "disabled": "disabled"; "pseudo": "pseudo"; "noUnderline": "noUnderline"; "useVisited": "useVisited"; "print": "print"; }, {}, ["icon"], never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McLink, "[mc-link]", ["mcLink"], { "tabIndex": "tabIndex"; "disabled": "disabled"; "pseudo": "pseudo"; "noUnderline": "noUnderline"; "useVisited": "useVisited"; "print": "print"; }, {}, ["icon"], never, false, never>;
 }

package/list/_list-base.scss

@@ -0,0 +1,50 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/common/list';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+// This mixin provides all list-item styles, changing font size and height based on whether the list is in dense mode.
+@mixin mc-list-item-base() {
+    position: relative;
+
+    display: flex;
+    align-items: center;
+
+    box-sizing: border-box;
+    height: var(--mc-list-size-item-height, map.get($tokens, list-size-item-height));
+
+    border: 2px solid transparent;
+
+    padding-left: var(--mc-list-size-horizontal-padding, map.get($tokens, list-size-horizontal-padding));
+
+    .mc-list-text {
+        @include list.mc-line-wrapper-base();
+
+        padding-right: var(--mc-list-size-horizontal-padding, map.get($tokens, list-size-horizontal-padding));
+    }
+
+    .mc-divider {
+        position: absolute;
+
+        bottom: 0;
+        left: 0;
+
+        width: 100%;
+
+        margin: 0;
+
+        [dir='rtl'] & {
+            margin-left: auto;
+            margin-right: 0;
+        }
+
+        &.mc-divider_inset {
+            position: absolute; // necessary to override card styles
+        }
+    }
+}

package/list/_list-theme.scss

@@ -0,0 +1,49 @@
+@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-list-theme($theme) {
+    $foreground: map.get($theme, foreground);
+    $background: map.get($theme, background);
+
+    .mc-list-item,
+    .mc-list-option {
+        color: map.get($foreground, text);
+    }
+
+    .mc-list-option {
+        outline: none;
+
+        &:hover {
+            background: map.get($background, overlay-hover);
+        }
+
+        &.mc-focused {
+            border-color: map.get(map.get($theme, states), focused-color);
+        }
+
+        &.mc-selected {
+            background: map.get(map.get($theme, states), selected-color);
+        }
+
+        &.mc-disabled,
+        &[disabled] {
+            background: transparent;
+
+            color: map.get($foreground, text-disabled);
+        }
+    }
+}
+
+@mixin mc-list-typography($config) {
+    .mc-list-item,
+    .mc-list-option {
+        @include mc-typography-level-to-styles($config, map.get($tokens, list-font-item));
+    }
+}

package/list/list-selection.component.d.ts

@@ -114,7 +114,7 @@ export declare class McListSelection extends McListSelectionMixinBase implements
     private selectAllOptions;
     private copyActiveOption;
     static ɵfac: i0.ɵɵFactoryDeclaration<McListSelection, [null, null, { attribute: "multiple"; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McListSelection, "mc-list-selection", ["mcListSelection"], { "disabled": "disabled"; "autoSelect": "autoSelect"; "noUnselectLast": "noUnselectLast"; "horizontal": "horizontal"; "tabIndex": "tabIndex"; "compareWith": "compareWith"; }, { "onSelectAll": "onSelectAll"; "onCopy": "onCopy"; "selectionChange": "selectionChange"; }, ["options"], ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McListSelection, "mc-list-selection", ["mcListSelection"], { "disabled": "disabled"; "autoSelect": "autoSelect"; "noUnselectLast": "noUnselectLast"; "horizontal": "horizontal"; "tabIndex": "tabIndex"; "compareWith": "compareWith"; }, { "onSelectAll": "onSelectAll"; "onCopy": "onCopy"; "selectionChange": "selectionChange"; }, ["options"], ["*"], false, never>;
 }
 /**
  * Component for list-options of selection-list. Each list-option can automatically
@@ -167,5 +167,5 @@ export declare class McListOption implements OnDestroy, OnInit, IFocusableOption
     blur(): void;
     getHostElement(): HTMLElement;
     static ɵfac: i0.ɵɵFactoryDeclaration<McListOption, [null, null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McListOption, "mc-list-option", ["mcListOption"], { "checkboxPosition": "checkboxPosition"; "value": "value"; "disabled": "disabled"; "showCheckbox": "showCheckbox"; "selected": "selected"; }, {}, ["actionButton", "tooltipTrigger", "dropdownTrigger"], ["[mc-icon]", "*", "mc-option-action"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McListOption, "mc-list-option", ["mcListOption"], { "checkboxPosition": "checkboxPosition"; "value": "value"; "disabled": "disabled"; "showCheckbox": "showCheckbox"; "selected": "selected"; }, {}, ["actionButton", "tooltipTrigger", "dropdownTrigger"], ["[mc-icon]", "*", "mc-option-action"], false, never>;
 }

package/list/list.component.d.ts

@@ -3,7 +3,7 @@ import { McLine } from '@ptsecurity/mosaic/core';
 import * as i0 from "@angular/core";
 export declare class McList {
     static ɵfac: i0.ɵɵFactoryDeclaration<McList, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McList, "mc-list", never, {}, {}, never, ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McList, "mc-list", never, {}, {}, never, ["*"], false, never>;
 }
 export declare class McListItem implements AfterContentInit {
     private elementRef;
@@ -14,5 +14,5 @@ export declare class McListItem implements AfterContentInit {
     handleBlur(): void;
     getHostElement(): HTMLElement;
     static ɵfac: i0.ɵɵFactoryDeclaration<McListItem, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McListItem, "mc-list-item, a[mc-list-item]", never, {}, {}, ["lines"], ["[mc-list-icon], [mcListIcon]", "[mc-line], [mcLine]", "*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McListItem, "mc-list-item, a[mc-list-item]", never, {}, {}, ["lines"], ["[mc-list-icon], [mcListIcon]", "[mc-line], [mcLine]", "*"], false, never>;
 }

package/list/list.scss

@@ -0,0 +1,52 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use 'list-base';
+@use '../core/styles/common/list';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.mc-list,
+.mc-list-selection {
+    display: block;
+
+    outline: none;
+}
+
+.mc-list-item,
+.mc-list-option {
+    @include list.mc-no-select;
+
+    @include list-base.mc-list-item-base();
+
+    &.mc-progress:after {
+        top: -2px;
+        right: -2px;
+        bottom: -2px;
+        left: -2px;
+    }
+
+    & .mc-pseudo-checkbox,
+    & .mc-icon {
+        margin-right: var(--mc-list-size-icon-right-margin, map.get($tokens, list-size-icon-right-margin));
+    }
+
+    & .mc-option-action {
+        display: none;
+    }
+
+    &:not([disabled]):hover,
+    &:not([disabled]).mc-focused,
+    &:not([disabled]).mc-action-button-focused {
+        & .mc-option-action {
+            display: flex;
+        }
+    }
+}
+
+.mc-list-option:not([disabled]):not(.mc-disabled){
+    cursor: pointer;
+}

package/loader-overlay/_loader-overlay-theme.scss

@@ -0,0 +1,36 @@
+@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-loader-overlay-theme($theme) {
+    $loader-overlay: map.get(map.get($theme, components), loader-overlay);
+
+    .mc-loader-overlay {
+        background: map.get($loader-overlay, background);
+    }
+
+    .mc-loader-overlay-text {
+        color: map.get($loader-overlay, text);
+    }
+
+    .mc-loader-overlay-caption {
+        color: map.get($loader-overlay, caption);
+    }
+}
+
+@mixin mc-loader-overlay-typography($config) {
+    .mc-loader-overlay-text {
+        @include mc-typography-level-to-styles($config, map.get($tokens, loader-overlay-font-text));
+    }
+
+    .mc-loader-overlay-caption {
+        @include mc-typography-level-to-styles($config, map.get($tokens, loader-overlay-font-caption));
+    }
+}
+

package/loader-overlay/loader-overlay.component.d.ts

@@ -2,15 +2,15 @@ import { ElementRef, OnDestroy, OnInit, Renderer2 } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class McLoaderOverlayIndicator {
     static ɵfac: i0.ɵɵFactoryDeclaration<McLoaderOverlayIndicator, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McLoaderOverlayIndicator, "[mc-loader-overlay-indicator]", never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McLoaderOverlayIndicator, "[mc-loader-overlay-indicator]", never, {}, {}, never, never, false, never>;
 }
 export declare class McLoaderOverlayText {
     static ɵfac: i0.ɵɵFactoryDeclaration<McLoaderOverlayText, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McLoaderOverlayText, "[mc-loader-overlay-text]", never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McLoaderOverlayText, "[mc-loader-overlay-text]", never, {}, {}, never, never, false, never>;
 }
 export declare class McLoaderOverlayCaption {
     static ɵfac: i0.ɵɵFactoryDeclaration<McLoaderOverlayCaption, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McLoaderOverlayCaption, "[mc-loader-overlay-caption]", never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McLoaderOverlayCaption, "[mc-loader-overlay-caption]", never, {}, {}, never, never, false, never>;
 }
 export declare class McLoaderOverlay implements OnInit, OnDestroy {
     private elementRef;
@@ -30,5 +30,5 @@ export declare class McLoaderOverlay implements OnInit, OnDestroy {
     ngOnInit(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<McLoaderOverlay, [null, null, { attribute: "fixed-top"; optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McLoaderOverlay, "mc-loader-overlay", never, { "text": "text"; "caption": "caption"; }, {}, ["externalIndicator", "externalText", "externalCaption"], ["[mc-loader-overlay-indicator]", "[mc-loader-overlay-text]", "[mc-loader-overlay-caption]"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McLoaderOverlay, "mc-loader-overlay", never, { "text": "text"; "caption": "caption"; }, {}, ["externalIndicator", "externalText", "externalCaption"], ["[mc-loader-overlay-indicator]", "[mc-loader-overlay-text]", "[mc-loader-overlay-caption]"], false, never>;
 }

package/loader-overlay/loader-overlay.scss

@@ -0,0 +1,64 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.mc-loader-overlay_parent {
+    position: relative;
+}
+
+.mc-loader-overlay {
+    position: absolute;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    & .mc-loader-overlay__container {
+        display: flex;
+        flex-direction: column;
+
+        justify-content: center;
+        align-items: center;
+
+        width: 80%;
+        max-width: 80%;
+    }
+
+    &.mc-loader-overlay_fixed-top {
+        justify-content: unset;
+
+        & .mc-loader-overlay__container {
+            margin-top: map.get($tokens, loader-overlay-size-fixed-top-padding);
+        }
+    }
+
+    &.mc-loader-overlay_center:not(.mc-loader-overlay_empty) .mc-loader-overlay__container {
+        transform: translateY(map.get($tokens, loader-overlay-size-center-optical-compensation));
+    }
+}
+
+.mc-loader-overlay-text {
+    margin-top: map.get($tokens, size-s);
+
+    max-width: map.get($tokens, loader-overlay-size-text-max-width);
+
+    text-align: center;
+}
+
+.mc-loader-overlay-caption {
+    margin-top: map.get($tokens, size-3xs);
+
+    max-width: map.get($tokens, loader-overlay-size-text-max-width);
+
+    text-align: center;
+}