@ptsecurity/mosaic 15.3.2 → 15.4.0-beta.1

package/textarea/_textarea-theme.nvl.scss

@@ -0,0 +1,37 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+
+@mixin nvl-mc-textarea-theme($theme) {
+    $foreground: map.get($theme, foreground);
+
+    .mc-textarea {
+        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);
+        }
+    }
+}
+
+@mixin nvl-mc-textarea-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    textarea.mc-textarea {
+        @include mc-typography-level-to-styles($config, map.get($tokens, textarea-font-default));
+    }
+
+    .mc-textarea.mc-textarea_monospace {
+        @include mc-typography-level-to-styles($config, map.get($tokens, textarea-font-mono));
+    }
+}

package/timezone/_timezone-option-theme.nvl.scss

@@ -0,0 +1,34 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+
+@mixin nvl-mc-timezone-option-theme($theme) {
+    $timezone: map.get(map.get($theme, components), timezone);
+
+    .mc-timezone-option__offset,
+    .mc-timezone-option__city {
+        color: map.get($timezone, text);
+    }
+
+    .mc-timezone-option__cities {
+        color: map.get($timezone, caption);
+    }
+}
+
+@mixin nvl-mc-timezone-option-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .mc-timezone-option__offset {
+        @include mc-typography-level-to-styles($config, map.get($tokens, timezone-option-font-offset-text));
+    }
+
+    .mc-timezone-option__city {
+        @include mc-typography-level-to-styles($config, map.get($tokens, timezone-option-font-text));
+    }
+
+    .mc-timezone-option__cities {
+        @include mc-typography-level-to-styles($config, map.get($tokens, timezone-option-font-caption));
+    }
+}

package/toast/_toast-theme.nvl.scss

@@ -0,0 +1,61 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+
+@mixin nvl-mc-toast-theme($theme) {
+    $foreground: map.get($theme, foreground);
+
+    $toast: map.get(map.get($theme, components), toast);
+
+    .mc-toast {
+        &.mc-toast_info .mc-toast__icon {
+            color: map.get($toast, icon_info);
+        }
+
+        &.mc-toast_success .mc-toast__icon {
+            color: map.get($toast, icon_success);
+        }
+
+        &.mc-toast_warning .mc-toast__icon {
+            color: map.get($toast, icon_warning);
+        }
+
+        &.mc-toast_error .mc-toast__icon {
+            color: map.get($toast, icon_error);
+        }
+    }
+
+    .mc-toast__wrapper {
+        border-color: map.get($toast, border);
+
+        background: map.get($toast, background);
+
+        box-shadow: map.get($toast, shadow);
+    }
+
+    .mc-toast__title {
+        color: map.get($toast, text);
+    }
+
+    .mc-toast__caption {
+        color: map.get($toast, text-caption);
+    }
+}
+
+@mixin nvl-mc-toast-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .mc-toast {
+        @include mc-typography-level-to-styles($config, body);
+    }
+
+    .mc-toast__title {
+        @include mc-typography-level-to-styles($config, map.get($tokens, toast-font-title));
+    }
+
+    .mc-toast__caption {
+        @include mc-typography-level-to-styles($config, map.get($tokens, toast-font-caption));
+    }
+}

package/toggle/_toggle-theme.nvl.scss

@@ -0,0 +1,98 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/theming/theming' as *;
+@use '../core/styles/typography/typography-utils' as *;
+
+
+@mixin nvl-mc-toggle-state($state) {
+    .mc-toggle-bar {
+        border-color: map.get($state, border);
+        background: map.get($state, background);
+    }
+
+    .mc-toggle__circle {
+        background: map.get($state, circle-background);
+    }
+}
+
+@mixin nvl-mc-toggle-focused-state($state) {
+    & .mc-toggle-bar {
+        border-color: map.get($state, focus-outline);
+        box-shadow: 0 0 0 1px map.get($state, focus-outline);
+    }
+}
+
+@mixin nvl-mc-toggle-color($toggle) {
+    @include nvl-mc-toggle-state(map.get($toggle, default));
+
+    &:hover {
+        @include nvl-mc-toggle-state(map.get($toggle, hover));
+    }
+
+    &.mc-active {
+        @include nvl-mc-toggle-state(map.get($toggle, checked));
+    }
+
+    &.mc-active:hover {
+        @include nvl-mc-toggle-state(map.get($toggle, checked-hover));
+    }
+
+    &.cdk-keyboard-focused {
+        $focused: map.get($toggle, focused);
+
+        @include nvl-mc-toggle-state($focused);
+        @include nvl-mc-toggle-focused-state($focused);
+    }
+
+    &.mc-active.cdk-keyboard-focused {
+        $checked-focused: map.get($toggle, checked-focused);
+
+        @include nvl-mc-toggle-state($checked-focused);
+        @include nvl-mc-toggle-focused-state($checked-focused);
+    }
+
+    &.mc-disabled,
+    &.mc-active.mc-disabled {
+        @include nvl-mc-toggle-state(map.get($toggle, disabled));
+    }
+}
+
+@mixin nvl-mc-toggle-theme($theme) {
+    $foreground: map.get($theme, foreground);
+
+    $toggle: map.get(map.get($theme, components), toggle);
+
+    $toggle-theme: map.get($toggle, theme);
+    $toggle-error: map.get($toggle, error);
+
+    .mc-toggle {
+        color: map.get($foreground, text);
+
+        @include nvl-mc-toggle-color($toggle-theme);
+
+        &.mc-error {
+            @include nvl-mc-toggle-color($toggle-error);
+        }
+    }
+}
+
+@mixin nvl-mc-toggle-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .mc-toggle:not(.mc-toggle_big) {
+        @include mc-typography-level-to-styles($config, map.get($tokens, toggle-font-normal-label));
+
+        & .mc-hint {
+            @include mc-typography-level-to-styles($config, map.get($tokens, toggle-font-normal-caption));
+        }
+    }
+
+    .mc-toggle.mc-toggle_big {
+        @include mc-typography-level-to-styles($config, map.get($tokens, toggle-font-big-label));
+
+        & .mc-hint {
+            @include mc-typography-level-to-styles($config, map.get($tokens, toggle-font-big-caption));
+        }
+    }
+}

package/toggle/_toggle-theme.scss

@@ -13,9 +13,6 @@ $tokens: meta.module-variables(tokens) !default;
     $foreground: map.get($theme, foreground);
     $background: map.get($theme, background);
 
-    $primary: map.get($theme, primary);
-    $error: map.get($theme, error);
-
     $toggle: map.get(map.get($theme, components), toggle);
 
     .mc-toggle {

package/toggle/toggle.component.d.ts

@@ -19,6 +19,7 @@ export declare class McToggleComponent extends McToggleMixinBase implements Cont
     elementRef: ElementRef;
     private _focusMonitor;
     private _changeDetectorRef;
+    big: boolean;
     inputElement: ElementRef;
     labelPosition: ToggleLabelPositionType;
     ariaLabel: string;
@@ -51,6 +52,6 @@ export declare class McToggleComponent extends McToggleMixinBase implements Cont
     private updateModelValue;
     private emitChangeEvent;
     static ɵfac: i0.ɵɵFactoryDeclaration<McToggleComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McToggleComponent, "mc-toggle", ["mcToggle"], { "color": "color"; "tabIndex": "tabIndex"; "labelPosition": "labelPosition"; "ariaLabel": "aria-label"; "ariaLabelledby": "aria-labelledby"; "id": "id"; "name": "name"; "value": "value"; "disabled": "disabled"; "checked": "checked"; }, { "change": "change"; }, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McToggleComponent, "mc-toggle", ["mcToggle"], { "color": "color"; "tabIndex": "tabIndex"; "big": "big"; "labelPosition": "labelPosition"; "ariaLabel": "aria-label"; "ariaLabelledby": "aria-labelledby"; "id": "id"; "name": "name"; "value": "value"; "disabled": "disabled"; "checked": "checked"; }, { "change": "change"; }, never, ["*", "mc-hint"], false, never>;
 }
 export {};

package/toggle/toggle.scss

@@ -9,113 +9,88 @@ $tokens: meta.module-variables(tokens) !default;
 .mc-toggle {
     display: inline-block;
 
+    .mc-toggle__circle {
+        position: absolute;
+
+        border-radius: 50%;
+
+        transform: translateX(-1px); // due to EDGE animation features
+
+        height: 10px;
+        width: 10px;
+    }
+
     .mc-toggle-layout {
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+
         cursor: inherit;
-        align-items: baseline;
-        vertical-align: middle;
-        display: inline-flex;
-        white-space: nowrap;
+
+        &.left {
+            flex-direction: row-reverse;
+        }
     }
 
     .mc-toggle-bar {
+        position: relative;
         box-sizing: border-box;
 
-        position: relative;
+        display: flex;
+        align-items: center;
 
         border: {
             width: 1px;
             style: solid;
+            radius: 8px;
         }
 
-        &.mc-toggle-label-position-left {
-            order: 1;
-        }
+        height: var(--mc-toggle-size-normal-height, map.get($tokens, toggle-size-normal-height));
+        width: var(--mc-toggle-size-normal-width, map.get($tokens, toggle-size-normal-width));
     }
 
-    .mc-toggle-bar-container {
-        position: relative;
+    .mc-hint {
+        margin-top: var(
+            --mc-toggle-size-normal-vertical-content-padding,
+            map.get($tokens, toggle-size-normal-vertical-content-padding)
+        );
     }
 }
 
-.mc-toggle__container {
+.mc-toggle__content {
     display: flex;
-    align-items: center;
-    position: relative;
+    flex-direction: column;
 
-    &.left {
-        flex-direction: row-reverse;
-    }
-}
+    flex: 1;
 
-.mc-toggle__content {
     &.left {
-        margin-right: var(--mc-toggle-size-label-margin, map.get($tokens, toggle-size-label-margin));
+        margin-right: var(
+            --mc-toggle-size-normal-horizontal-content-padding,
+            map.get($tokens, toggle-size-normal-horizontal-content-padding)
+        );
     }
 
     &.right {
-        margin-left: var(--mc-toggle-size-label-margin, map.get($tokens, toggle-size-label-margin));
+        margin-left: var(
+            --mc-toggle-size-normal-horizontal-content-padding,
+            map.get($tokens, toggle-size-normal-horizontal-content-padding)
+        );
     }
 }
 
-.mc-toggle__circle {
-    box-sizing: border-box;
+.mc-toggle.mc-toggle_big {
+    & .mc-toggle-bar {
+        margin-top: 2px;
 
-    position: absolute;
-
-    border: {
-        width: 1px;
-        style: solid;
-        radius: 100%;
+        height: var(--mc-toggle-size-big-height, map.get($tokens, toggle-size-big-height));
+        width: var(--mc-toggle-size-big-width, map.get($tokens, toggle-size-big-width));
     }
 
-    margin-top: -1px;
-    margin-left: -1px;
-    transform: translateX(-1px); // due to EDGE animation features
-}
-
-.mc-toggle__overlay {
-    position: absolute;
-
-    top: 0;
-    left: 0;
-    z-index: 1;
-}
-
-.mc-toggle:not(.mc-toggle_small) {
-    .mc-toggle-bar {
-        height: var(--mc-toggle-size-height, map.get($tokens, toggle-size-height));
-        width: var(--mc-toggle-size-width, map.get($tokens, toggle-size-width));
-        border-radius: var(--mc-toggle-size-border-radius, map.get($tokens, toggle-size-border-radius));
-    }
-
-    .mc-toggle__overlay {
-        border-radius: var(--mc-toggle-size-border-radius, map.get($tokens, toggle-size-border-radius));
-        height: var(--mc-toggle-size-height, map.get($tokens, toggle-size-height));
-        width: var(--mc-toggle-size-width, map.get($tokens, toggle-size-width));
-    }
-
-    .mc-toggle__circle {
-        height: var(--mc-toggle-size-height, map.get($tokens, toggle-size-height));
-        width: var(--mc-toggle-size-height, map.get($tokens, toggle-size-height));
-    }
-}
-
-.mc-toggle.mc-toggle_small {
-    .mc-toggle-bar {
-        height: var(--mc-toggle-small-size-height, map.get($tokens, toggle-small-size-height));
-        width: var(--mc-toggle-small-size-width, map.get($tokens, toggle-small-size-width));
-        border-radius: var(--mc-toggle-small-size-border-radius, map.get($tokens, toggle-small-size-border-radius));
-    }
-
-    .mc-toggle__overlay {
-        border-radius: var(--mc-toggle-small-size-border-radius, map.get($tokens, toggle-small-size-border-radius));
-        height: var(--mc-toggle-small-size-height, map.get($tokens, toggle-small-size-height));
-        width: var(--mc-toggle-small-size-width, map.get($tokens, toggle-small-size-width));
-    }
-
-    .mc-toggle__circle {
-        height: var(--mc-toggle-small-size-height, map.get($tokens, toggle-small-size-height));
-        width: var(--mc-toggle-small-size-height, map.get($tokens, toggle-small-size-height));
+    & .mc-hint {
+        margin-top: var(
+            --mc-toggle-size-big-vertical-content-padding,
+            map.get($tokens, toggle-size-big-vertical-content-padding)
+        );
     }
 }
 

package/tooltip/_tooltip-theme.nvl.scss

@@ -0,0 +1,49 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/pop-up/pop-up' as *;
+@use '../core/styles/typography/typography-utils' as *;
+
+
+@mixin kbq-tooltip-color($tooltip) {
+    box-shadow: map.get($tooltip, shadow);
+
+    & .mc-tooltip__inner {
+        color: map.get($tooltip, text);
+
+        background-color: map.get($tooltip, background);
+    }
+
+    & .mc-tooltip__arrow {
+        background-color: map.get($tooltip, background);
+        box-shadow: map.get($tooltip, shadow);
+    }
+}
+
+@mixin nvl-mc-tooltip-theme($theme) {
+    $tooltip: map.get(map.get($theme, components), tooltip);
+
+    $theme-fade-off: map.get($tooltip, theme-fade-off);
+    $contrast-fade-off: map.get($tooltip, contrast-fade-off);
+    $contrast-fade-on: map.get($tooltip, contrast-fade-on);
+
+    .mc-tooltip.kbq-theme {
+        @include kbq-tooltip-color($theme-fade-off);
+    }
+
+    .mc-tooltip.kbq-contrast {
+        @include kbq-tooltip-color($contrast-fade-off);
+    }
+
+    .mc-tooltip.kbq-contrast-fade {
+        @include kbq-tooltip-color($contrast-fade-on);
+    }
+}
+
+@mixin nvl-mc-tooltip-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .mc-tooltip {
+        @include mc-typography-level-to-styles($config, map.get($tokens, tooltip-font-default));
+    }
+}

package/tooltip/tooltip.component.d.ts

@@ -1,7 +1,7 @@
 import { Directionality } from '@angular/cdk/bidi';
 import { Overlay, ScrollDispatcher, ScrollStrategy, OverlayConfig } from '@angular/cdk/overlay';
 import { ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, NgZone, TemplateRef, Type, ViewContainerRef } from '@angular/core';
-import { McPopUp, McPopUpTrigger, PopUpPlacements } from '@ptsecurity/mosaic/core';
+import { McPopUp, McPopUpTrigger, PopUpPlacements, KbqComponentColors } from '@ptsecurity/mosaic/core';
 import * as i0 from "@angular/core";
 export declare enum TooltipModifier {
     Default = "default",
@@ -55,6 +55,9 @@ export declare class McTooltipTrigger extends McPopUpTrigger<McTooltipComponent>
     protected _trigger: string;
     get customClass(): string;
     set customClass(value: string);
+    get color(): string;
+    set color(value: KbqComponentColors | string);
+    private _color;
     placementChange: EventEmitter<any>;
     visibleChange: EventEmitter<boolean>;
     private get hasClickInTrigger();
@@ -67,7 +70,7 @@ export declare class McTooltipTrigger extends McPopUpTrigger<McTooltipComponent>
     getOverlayHandleComponentType(): Type<McTooltipComponent>;
     updateClassMap(newPlacement?: string): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<McTooltipTrigger, [null, null, null, null, null, null, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McTooltipTrigger, "[mcTooltip]", ["mcTooltip"], { "tooltipVisible": "mcVisible"; "tooltipPlacement": "mcPlacement"; "tooltipPlacementPriority": "mcPlacementPriority"; "content": "mcTooltip"; "disabled": "mcTooltipDisabled"; "enterDelay": "mcEnterDelay"; "leaveDelay": "mcLeaveDelay"; "trigger": "mcTrigger"; "customClass": "mcTooltipClass"; }, { "placementChange": "mcPlacementChange"; "visibleChange": "mcVisibleChange"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McTooltipTrigger, "[mcTooltip]", ["mcTooltip"], { "tooltipVisible": "mcVisible"; "tooltipPlacement": "mcPlacement"; "tooltipPlacementPriority": "mcPlacementPriority"; "content": "mcTooltip"; "disabled": "mcTooltipDisabled"; "enterDelay": "mcEnterDelay"; "leaveDelay": "mcLeaveDelay"; "trigger": "mcTrigger"; "customClass": "mcTooltipClass"; "color": "color"; }, { "placementChange": "mcPlacementChange"; "visibleChange": "mcVisibleChange"; }, never, never, false, never>;
 }
 export declare class McWarningTooltipTrigger extends McTooltipTrigger {
     get content(): string | TemplateRef<any>;

package/tooltip/tooltip.scss

@@ -9,13 +9,14 @@
 
 $tokens: meta.module-variables(tokens) !default;
 
+$trigger-margin: 8px;
+
 
 .mc-tooltip__inner {
     border-radius: var(--mc-tooltip-size-border-radius, map.get($tokens, tooltip-size-border-radius));
     word-break: break-word;
 }
 
-
 .mc-tooltip {
     box-sizing: border-box;
 
@@ -25,47 +26,17 @@ $tokens: meta.module-variables(tokens) !default;
 
     white-space: pre-line;
 
-    $trigger-margin: calc(var(--mc-tooltip-size-trigger-margin, #{map.get($tokens, tooltip-size-trigger-margin)}));
-
     @include pop-up.popup-margins(mc-tooltip, $trigger-margin);
 
+    max-width: var(--mc-tooltip-size-max-width, map.get($tokens, tooltip-size-max-width));
 
-    &.mc-tooltip_default,
-    &.mc-tooltip_warning {
-        max-width: var(--mc-tooltip-size-max-width, map.get($tokens, tooltip-size-max-width));
-
-
-        .mc-tooltip__inner {
-            padding: var(--mc-tooltip-size-padding, map.get($tokens, tooltip-size-padding));
-        }
-    }
-
-
-    &.mc-tooltip_extended {
-        max-height: var(--mc-extended-tooltip-size-max-height, map.get($tokens, extended-tooltip-size-max-height));
-
-
-        .mc-tooltip__header {
-            height: var(
-                --mc-extended-tooltip-header-size-height, map.get($tokens, extended-tooltip-header-size-height)
-            );
-            padding: var(
-                --mc-extended-tooltip-header-size-padding, map.get($tokens, extended-tooltip-header-size-padding)
-            );
-            box-sizing: border-box;
-
-            border-top-left-radius: var(--mc-tooltip-size-border-radius, map.get($tokens, tooltip-size-border-radius));
-            border-top-right-radius: var(--mc-tooltip-size-border-radius, map.get($tokens, tooltip-size-border-radius));
-        }
-
-
-        .mc-tooltip__content {
-            padding: var(--mc-extended-tooltip-size-padding, map.get($tokens, extended-tooltip-size-padding));
-        }
+    .mc-tooltip__inner {
+        padding:
+            var(--mc-tooltip-size-padding-vertical, map.get($tokens, tooltip-size-padding-vertical))
+            var(--mc-tooltip-size-padding-horizontal, map.get($tokens, tooltip-size-padding-horizontal));
     }
 }
 
-
 .mc-tooltip__arrow {
     position: absolute;
 
@@ -73,11 +44,11 @@ $tokens: meta.module-variables(tokens) !default;
     height: var(--mc-tooltip-size-arrow-size, map.get($tokens, tooltip-size-arrow-size));
 
     transform: rotate(45deg);
+
+    z-index: -1;
 }
 
 $arrow-offset: calc((var(--mc-tooltip-size-arrow-size, #{map.get($tokens, tooltip-size-arrow-size)}) - 1px) / -2);
-$arrow-padding: calc(
-    18px - (var(--mc-tooltip-size-trigger-margin, #{map.get($tokens, tooltip-size-trigger-margin)}) / 2)
-);
+$arrow-padding: calc((18px + $trigger-margin) / 2);
 
 @include pop-up.popup-arrow-positions(mc-tooltip, $arrow-offset, $arrow-padding);

package/tree/_tree-theme.nvl.scss

@@ -0,0 +1,69 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/theming/theming' as *;
+@use '../core/styles/typography/typography-utils' as *;
+
+
+@mixin nvl-mc-tree-theme($theme) {
+    $foreground: map.get($theme, foreground);
+    $background: map.get($theme, background);
+
+    $secondary: map.get($theme, secondary);
+
+    $is-dark: map.get($theme, is-dark);
+
+    .mc-tree-selection:focus {
+        outline: none;
+    }
+
+    .mc-tree-option {
+        color: map.get($foreground, text);
+
+        &:hover {
+            background-color: map.get($background, overlay-hover);
+        }
+
+        &.mc-focused {
+            border-color: map.get(map.get($theme, states), focused-color);
+
+            & .mc-tree-node-toggle:not([disabled]) .mc-icon {
+                color: mc-color($secondary, if($is-dark, 70, 30));
+            }
+        }
+
+        &.mc-selected {
+            background: map.get(map.get($theme, states), selected-color);
+        }
+
+        &[disabled] {
+            background-color: transparent;
+
+            color: map.get($foreground, text-disabled);
+        }
+    }
+
+    /* stylelint-disable no-descending-specificity */
+    .mc-tree-node-toggle {
+        & .mc-icon {
+            color: mc-color($secondary, 10);
+        }
+
+        &:hover .mc-icon {
+            color: mc-color($secondary, if($is-dark, 70, 30));
+        }
+
+        &[disabled] .mc-icon {
+            color: mc-color($secondary, if($is-dark, 30, 70));
+        }
+    }
+    /* stylelint-enable no-descending-specificity */
+}
+
+@mixin nvl-mc-tree-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .mc-tree-option {
+        @include mc-typography-level-to-styles($config, map.get($tokens, tree-font-node));
+    }
+}