@ptsecurity/mosaic 15.3.1 → 15.4.0-beta.1

package/form-field/_hint-theme.nvl.scss

@@ -0,0 +1,67 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/theming/theming' as *;
+@use '../core/styles/typography/typography-utils' as *;
+
+
+@mixin nvl-hint-color($hint) {
+    color: map.get($hint, text);
+
+    & .mc-icon {
+        color: map.get($hint, icon);
+    }
+}
+
+
+@mixin nvl-hint-theme($theme) {
+    $hint: map.get(map.get($theme, components), hint);
+
+    .mc-hint {
+        $fill-text-on: map.get($hint, fill-text-on);
+
+        &.mc-fade-contrast {
+            @include nvl-hint-color(map.get($fill-text-on, fade-contrast));
+        }
+
+        &.mc-success {
+            @include nvl-hint-color(map.get($fill-text-on, success));
+        }
+
+        &.mc-warning {
+            @include nvl-hint-color(map.get($fill-text-on, warning));
+        }
+
+        &.mc-error {
+            @include nvl-hint-color(map.get($fill-text-on, error));
+        }
+    }
+
+    .mc-hint.mc-hint_fill-text-off {
+        $fill-text-off: map.get($hint, fill-text-off);
+
+        &.mc-fade-contrast {
+            @include nvl-hint-color(map.get($fill-text-off, fade-contrast));
+        }
+
+        &.mc-success {
+            @include nvl-hint-color(map.get($fill-text-off, success));
+        }
+
+        &.mc-warning {
+            @include nvl-hint-color(map.get($fill-text-off, warning));
+        }
+
+        &.mc-error {
+            @include nvl-hint-color(map.get($fill-text-off, error));
+        }
+    }
+}
+
+@mixin nvl-hint-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .mc-hint .mc-hint__text {
+        @include mc-typography-level-to-styles($config, map.get($tokens, hint-font-text));
+    }
+}

package/form-field/cleaner.d.ts

@@ -1,7 +1,7 @@
-import { ThemePalette } from '@ptsecurity/mosaic/core';
+import { KbqComponentColors } from '@ptsecurity/mosaic/core';
 import * as i0 from "@angular/core";
 export declare class McCleaner {
-    themePalette: typeof ThemePalette;
+    ComponentColors: typeof KbqComponentColors;
     static ɵfac: i0.ɵɵFactoryDeclaration<McCleaner, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<McCleaner, "mc-cleaner", ["mcCleaner"], {}, {}, never, never, false, never>;
 }

package/form-field/hint.d.ts

@@ -10,7 +10,8 @@ export declare class McHintBase {
 export declare const McHintMixinBase: CanColorCtor & typeof McHintBase;
 export declare class McHint extends McHintMixinBase {
     id: string;
+    fillTextOff: boolean;
     constructor(elementRef: ElementRef);
     static ɵfac: i0.ɵɵFactoryDeclaration<McHint, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McHint, "mc-hint", never, { "color": "color"; "id": "id"; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McHint, "mc-hint", ["mcHint"], { "color": "color"; "id": "id"; "fillTextOff": "fillTextOff"; }, {}, never, ["[mc-icon]", "*"], false, never>;
 }

package/form-field/hint.scss

@@ -0,0 +1,15 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.mc-hint {
+    display: block;
+
+    & .mc-icon {
+        margin-right: var(--mc-hint-size-content-padding, map-get($tokens, hint-size-content-padding));
+    }
+}

package/icon/_icon-theme.nvl.scss

@@ -0,0 +1,267 @@
+@use 'sass:map';
+
+@use '../core/styles/theming/theming' as *;
+
+
+@mixin nvl-mc-icon-theme($themeObj) {
+    $icon: map.get(map.get($themeObj, components), icon);
+
+    $theme: map.get($icon, theme);
+    $contrast: map.get($icon, contrast);
+    $fade-contrast: map.get($icon, fade-contrast);
+    $error: map.get($icon, error);
+    $success: map.get($icon, success);
+
+    .mc-icon {
+        &.mc-theme {
+            color: map.get($theme, color);
+        }
+
+        &.mc-contrast {
+            color: map.get($contrast, color);
+        }
+
+        &.mc-fade-contrast {
+            color: map.get($fade-contrast, color);
+        }
+
+        &.mc-error {
+            color: map.get($error, color);
+        }
+
+        &.mc-success {
+            color: map.get($success, color);
+        }
+
+        &[disabled],
+        &.mc-disabled {
+            cursor: default;
+        }
+    }
+}
+
+@mixin nvl-mc-icon-item-theme($themeObj) {
+    $icon-item: map.get(map.get($themeObj, components), icon-item);
+
+    $theme: map.get($icon-item, theme);
+    $contrast: map.get($icon-item, contrast);
+    $fade-contrast: map.get($icon-item, fade-contrast);
+    $error: map.get($icon-item, error);
+    $success: map.get($icon-item, success);
+
+    .mc-icon-item {
+        &.mc-theme {
+            color: map.get($theme, color);
+            background: map.get($theme, background);
+        }
+
+        &.mc-contrast {
+            color: map.get($contrast, color);
+            background: map.get($contrast, background);
+        }
+
+        &.mc-fade-contrast {
+            color: map.get($fade-contrast, color);
+            background: map.get($fade-contrast, background);
+        }
+
+        &.mc-error {
+            color: map.get($error, color);
+            background: map.get($error, background);
+        }
+
+        &.mc-success {
+            color: map.get($success, color);
+            background: map.get($success, background);
+        }
+
+        &[disabled],
+        &.mc-disabled {
+            cursor: default;
+        }
+    }
+}
+
+@mixin nvl-mc-icon-button-theme($themeObj) {
+    $icon-button: map.get(map.get($themeObj, components), icon-button);
+
+    $theme: map.get($icon-button, theme);
+    $contrast: map.get($icon-button, contrast);
+    $fade-contrast: map.get($icon-button, fade-contrast);
+    $error: map.get($icon-button, error);
+    $success: map.get($icon-button, success);
+
+    .mc-icon_button {
+        &.mc-theme {
+            &:active,
+            &.mc-active {
+                color: map.get($theme, state-active);
+            }
+
+            &:not([disabled], .mc-disabled):hover {
+                color: map.get($theme, state-hover);
+            }
+
+            &[disabled],
+            &.mc-disabled {
+                color: map.get($theme, state-disabled);
+            }
+        }
+
+        &.mc-contrast {
+            &:active,
+            &.mc-active {
+                color: map.get($contrast, state-active);
+            }
+
+            &:not([disabled], .mc-disabled):hover {
+                color: map.get($contrast, state-hover);
+            }
+
+            &[disabled],
+            &.mc-disabled {
+                color: map.get($contrast, state-disabled);
+            }
+        }
+
+        &.mc-fade-contrast {
+            &:active,
+            &.mc-active {
+                color: map.get($fade-contrast, state-active);
+            }
+
+            &:not([disabled], .mc-disabled):hover {
+                color: map.get($fade-contrast, state-hover);
+            }
+
+            &[disabled],
+            &.mc-disabled {
+                color: map.get($fade-contrast, state-disabled);
+            }
+        }
+
+        &.mc-error {
+            &:active,
+            &.mc-active {
+                color: map.get($error, state-active);
+            }
+
+            &:not([disabled], .mc-disabled):hover {
+                color: map.get($error, state-hover);
+            }
+
+            &[disabled],
+            &.mc-disabled {
+                color: map.get($error, state-disabled);
+            }
+        }
+
+        &.mc-success {
+            &:active,
+            &.mc-active {
+                color: map.get($success, state-active);
+            }
+
+            &:not([disabled], .mc-disabled):hover {
+                color: map.get($success, state-hover);
+            }
+
+            &[disabled],
+            &.mc-disabled {
+                color: map.get($success, state-disabled);
+            }
+        }
+    }
+
+    .mc-icon.mc-icon_button {
+        &.mc-theme {
+            &:active,
+            &.mc-active {
+                color: map.get($theme, state-active);
+            }
+
+            &:not([disabled], .mc-disabled):hover {
+                color: map.get($theme, state-hover);
+            }
+
+            &[disabled],
+            &.mc-disabled {
+                color: map.get($theme, state-disabled);
+            }
+        }
+
+        &.mc-contrast {
+            &:active,
+            &.mc-active {
+                color: map.get($contrast, state-active);
+            }
+
+            &:not([disabled], .mc-disabled):hover {
+                color: map.get($contrast, state-hover);
+            }
+
+            &[disabled],
+            &.mc-disabled {
+                color: map.get($contrast, state-disabled);
+            }
+        }
+
+        &.mc-fade-contrast {
+            &:active,
+            &.mc-active {
+                color: map.get($fade-contrast, state-active);
+            }
+
+            &:not([disabled], .mc-disabled):hover {
+                color: map.get($fade-contrast, state-hover);
+            }
+
+            &[disabled],
+            &.mc-disabled {
+                color: map.get($fade-contrast, state-disabled);
+            }
+        }
+
+        &.mc-error {
+            &:active,
+            &.mc-active {
+                color: map.get($error, state-active);
+            }
+
+            &:not([disabled], .mc-disabled):hover {
+                color: map.get($error, state-hover);
+            }
+
+            &[disabled],
+            &.mc-disabled {
+                color: map.get($error, state-disabled);
+            }
+        }
+
+        &.mc-success {
+            &:active,
+            &.mc-active {
+                color: map.get($success, state-active);
+            }
+
+            &:not([disabled],.mc-disabled):hover {
+                color: map.get($success, state-hover);
+            }
+
+            &[disabled],
+            &.mc-disabled {
+                color: map.get($success, state-disabled);
+            }
+        }
+
+        &:focus {
+            outline: none;
+        }
+
+        &.cdk-keyboard-focused {
+            box-shadow:
+                inset 0 0 0 1px map.get(map.get($themeObj, states), focused-color),
+                0 0 0 1px map.get(map.get($themeObj, states), focused-color);
+        }
+    }
+}

package/icon/icon.component.d.ts

@@ -1,10 +1,7 @@
-import { ElementRef } from '@angular/core';
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { ElementRef, OnDestroy } from '@angular/core';
 import { CanColor, CanColorCtor } from '@ptsecurity/mosaic/core';
 import * as i0 from "@angular/core";
-export declare class McIconCSSStyler {
-    static ɵfac: i0.ɵɵFactoryDeclaration<McIconCSSStyler, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McIconCSSStyler, "[mc-icon]", never, {}, {}, never, never, false, never>;
-}
 /** @docs-private */
 export declare class McIconBase {
     elementRef: ElementRef;
@@ -13,8 +10,27 @@ export declare class McIconBase {
 /** @docs-private */
 export declare const McIconMixinBase: CanColorCtor & typeof McIconBase;
 export declare class McIcon extends McIconMixinBase implements CanColor {
+    small: boolean;
     constructor(elementRef: ElementRef, iconName: string);
     getHostElement(): any;
     static ɵfac: i0.ɵɵFactoryDeclaration<McIcon, [null, { attribute: "mc-icon"; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McIcon, "[mc-icon]", never, { "color": "color"; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McIcon, "[mc-icon]", never, { "color": "color"; "small": "small"; }, {}, never, ["*"], false, never>;
+}
+export declare class McIconButton extends McIcon implements OnDestroy, CanColor {
+    private focusMonitor;
+    small: boolean;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private _disabled;
+    constructor(elementRef: ElementRef, iconName: string, focusMonitor: FocusMonitor);
+    ngOnDestroy(): void;
+    private runFocusMonitor;
+    private stopFocusMonitor;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McIconButton, [null, { attribute: "mc-icon-button"; }, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McIconButton, "[mc-icon-button]", never, { "color": "color"; "small": "small"; "disabled": "disabled"; }, {}, never, ["*"], false, never>;
+}
+export declare class McIconItem extends McIcon implements CanColor {
+    constructor(elementRef: ElementRef, iconName: string);
+    static ɵfac: i0.ɵɵFactoryDeclaration<McIconItem, [null, { attribute: "mc-icon-item"; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McIconItem, "[mc-icon-item]", never, { "color": "color"; }, {}, never, ["*"], false, never>;
 }

package/icon/icon.module.d.ts

@@ -5,6 +5,6 @@ import * as i3 from "@angular/cdk/a11y";
 import * as i4 from "@angular/cdk/platform";
 export declare class McIconModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<McIconModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<McIconModule, [typeof i1.McIcon, typeof i1.McIconCSSStyler], [typeof i2.CommonModule, typeof i3.A11yModule, typeof i4.PlatformModule], [typeof i1.McIcon, typeof i1.McIconCSSStyler]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<McIconModule, [typeof i1.McIcon, typeof i1.McIconButton, typeof i1.McIconItem], [typeof i2.CommonModule, typeof i3.A11yModule, typeof i4.PlatformModule], [typeof i1.McIcon, typeof i1.McIconButton, typeof i1.McIconItem]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<McIconModule>;
 }

package/icon/icon.scss

@@ -1,9 +1,48 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+
 @mixin mc-icon-size($padding, $line-height, $font-size) {
     padding: $padding;
     line-height: $line-height;
     font-size: $font-size;
 }
 
+.mc-icon_button {
+    padding:
+        var(--mc-icon-button-size-small-vertical-padding, map-get($tokens, icon-button-size-small-vertical-padding))
+        var(
+            --mc-icon-button-size-small-horizontal-padding,
+            map-get($tokens, icon-button-size-small-horizontal-padding)
+        );
+
+    &.mc-icon-button_small {
+        padding:
+            var(
+                --mc-icon-button-size-normal-vertical-padding,
+                map-get($tokens, icon-button-size-normal-vertical-padding)
+            )
+            var(
+                --mc-icon-button-size-normal-horizontal-padding,
+                map-get($tokens, icon-button-size-normal-horizontal-padding)
+            );
+    }
+}
+
+.mc-icon-item {
+    box-sizing: border-box;
+
+    border-radius: 50%;
+
+    padding:
+        var(--mc-icon-item-size-vertical-padding, map-get($tokens, icon-item-size-vertical-padding))
+        var(--mc-icon-item-size-horizontal-padding, map-get($tokens, icon-item-size-horizontal-padding));
+}
 
 .mc-icon-rotate_90 {
     transform: rotate(90deg);

package/input/_input-theme.nvl.scss

@@ -0,0 +1,56 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+
+@mixin nvl-mc-input-theme($theme) {
+    $foreground: map.get($theme, foreground);
+
+    .mc-input {
+        color: map.get($foreground, text);
+
+        &::placeholder {
+            color: map.get($foreground, text-disabled);
+        }
+
+        &::-ms-input-placeholder {
+            color: map.get($foreground, text-disabled);
+        }
+
+        &::-webkit-input-placeholder {
+            color: map.get($foreground, text-disabled);
+        }
+    }
+
+    .mc-password-toggle {
+        color: map.get($foreground, icon);
+
+        &:hover {
+            color: map.get($foreground, text);
+        }
+
+        &[disabled] {
+            cursor: default;
+
+            color: map.get($foreground, text-disabled);
+        }
+
+        &.cdk-keyboard-focused {
+            border-color: map.get(map.get($theme, states), focused-color);
+            box-shadow: 0 0 0 1px map.get(map.get($theme, states), focused-color);
+        }
+    }
+}
+
+@mixin nvl-mc-input-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .mc-input {
+        @include mc-typography-level-to-styles($config, map.get($tokens, input-font-default));
+    }
+
+    .mc-input.mc-input_monospace {
+        @include mc-typography-level-to-styles($config, map.get($tokens, input-font-monospace));
+    }
+}

package/input/input.scss

@@ -29,6 +29,11 @@ input.mc-input:invalid {
     box-shadow: unset;
 }
 
+/* overwrite default placeholder opacity in Firefox */
+input.mc-input::placeholder {
+    opacity: 1;
+}
+
 .mc-password-toggle {
     display: flex;