@ptsecurity/mosaic 15.3.1 → 15.4.0-beta.1

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));
+    }
+}

package/tree-select/_tree-select-theme.nvl.scss

@@ -0,0 +1,41 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/theming/theming' as *;
+@use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/popup' as *;
+
+
+@mixin nvl-mc-tree-select-theme($theme) {
+    $foreground: map.get($theme, foreground);
+    $error: map.get($theme, error);
+
+    .mc-tree-select {
+        color: map.get($foreground, text);
+
+        &.ng-invalid {
+            color: mc-color($error);
+        }
+
+        &.mc-disabled {
+            color: map.get($foreground, text-disabled);
+        }
+    }
+
+    .mc-tree-select__placeholder {
+        color: map.get($foreground, text-disabled);
+    }
+
+    .mc-tree-select__panel {
+        @include popup-params($theme);
+    }
+}
+
+@mixin nvl-mc-tree-select-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .mc-tree-select,
+    .mc-tree-select__panel {
+        @include mc-typography-level-to-styles($config, map.get($tokens, select-panel-font-default));
+    }
+}

package/tree-select/_tree-select-theme.scss

@@ -14,6 +14,7 @@ $tokens: meta.module-variables(tokens) !default;
     $foreground: map.get($theme, foreground);
 
     $error: map.get($theme, error);
+    $list: map-get(map-get($theme, components), list);
 
     .mc-tree-select {
         color: map.get($foreground, text);
@@ -33,6 +34,11 @@ $tokens: meta.module-variables(tokens) !default;
 
     .mc-tree-select__panel {
         @include popup-params($theme);
+
+        & .mc-tree-select__footer {
+            background: map.get($list, footer-background);
+            border-top-color: map.get($list, footer-divider);
+        }
     }
 }
 

package/tree-select/tree-select.component.d.ts

@@ -28,7 +28,7 @@ export declare class McTreeSelectTrigger {
 }
 export declare class McTreeSelectFooter {
     static ɵfac: i0.ɵɵFactoryDeclaration<McTreeSelectFooter, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McTreeSelectFooter, "mc-tree-select-footer", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McTreeSelectFooter, "mc-tree-select-footer, [mc-tree-select-footer], [mc-tree-selection-footer]", never, {}, {}, never, never, false, never>;
 }
 /** @docs-private */
 declare class McTreeSelectBase {
@@ -278,6 +278,6 @@ export declare class McTreeSelect extends McTreeSelectMixinBase implements After
     private _compareWith;
     private subscribeOnSearchChanges;
     static ɵfac: i0.ɵɵFactoryDeclaration<McTreeSelect, [null, null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; self: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McTreeSelect, "mc-tree-select", ["mcTreeSelect"], { "disabled": "disabled"; "tabIndex": "tabIndex"; "hiddenItemsText": "hiddenItemsText"; "panelClass": "panelClass"; "backdropClass": "backdropClass"; "errorStateMatcher": "errorStateMatcher"; "sortComparator": "sortComparator"; "placeholder": "placeholder"; "required": "required"; "multiple": "multiple"; "autoSelect": "autoSelect"; "compareWith": "compareWith"; "id": "id"; "hasBackdrop": "hasBackdrop"; "hiddenItemsTextFormatter": "hiddenItemsTextFormatter"; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["cleaner", "customTrigger", "tree", "search"], ["mc-tree-select-trigger", "mc-cleaner", "[mcSelectSearch]", "[mc-select-search-empty-result]", "mc-tree-selection", "[mc-tree-selection-footer]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McTreeSelect, "mc-tree-select", ["mcTreeSelect"], { "disabled": "disabled"; "tabIndex": "tabIndex"; "hiddenItemsText": "hiddenItemsText"; "panelClass": "panelClass"; "backdropClass": "backdropClass"; "errorStateMatcher": "errorStateMatcher"; "sortComparator": "sortComparator"; "placeholder": "placeholder"; "required": "required"; "multiple": "multiple"; "autoSelect": "autoSelect"; "compareWith": "compareWith"; "id": "id"; "hasBackdrop": "hasBackdrop"; "hiddenItemsTextFormatter": "hiddenItemsTextFormatter"; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["cleaner", "customTrigger", "tree", "search"], ["mc-tree-select-trigger", "mc-cleaner", "[mcSelectSearch]", "[mc-select-search-empty-result]", "mc-tree-selection", "mc-tree-select-footer,[mc-tree-select-footer],[mc-tree-selection-footer]"], false, never>;
 }
 export {};

package/tree-select/tree-select.scss

@@ -168,6 +168,19 @@ $tokens: meta.module-variables(tokens) !default;
         line-height: var(--mc-option-size-height, map.get($tokens, option-size-height));
         height: var(--mc-option-size-height, map.get($tokens, option-size-height));
     }
+
+    & .mc-tree-select__footer {
+        display: flex;
+        align-items: center;
+        box-sizing: border-box;
+        padding: map.get($tokens, size-xxs) map.get($tokens, size-m);
+        border-top-width: 1px;
+        border-top-style: solid;
+        min-height: var(
+            --mc-list-size-footer-min-height,
+            map.get($tokens, list-size-footer-min-height)
+        );
+    }
 }
 
 .mc-tree-select__content {

package/core/styles/theming/_alerts.scss

@@ -1,166 +0,0 @@
-@use 'sass:meta';
-@use 'sass:map';
-
-@use '../typography/typography-utils' as *;
-@use '../tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
-
-.mc-alert {
-    display: flex;
-    align-items: baseline;
-
-    vertical-align: top;
-    text-align: left;
-
-    border: var(--mc-alert-size-border-width, map.get($tokens, alert-size-border-width)) solid transparent;
-    border-radius: var(--mc-alert-size-border-radius, map.get($tokens, alert-size-border-radius));
-
-    .mc-link {
-        padding-left: 0;
-    }
-
-    .mc-alert__icon {
-        margin-right: var(--mc-alert-size-icon-margin, map.get($tokens, alert-size-icon-margin));
-    }
-
-    padding: {
-        right: calc(
-            var(--mc-alert-size-horizontal-padding, #{map.get($tokens, alert-size-horizontal-padding)}) -
-            var(--mc-alert-size-border-width, #{map.get($tokens, alert-size-border-width)})
-        );
-        left: calc(
-            var(--mc-alert-size-horizontal-padding, #{map.get($tokens, alert-size-horizontal-padding)}) -
-            var(--mc-alert-size-border-width, #{map.get($tokens, alert-size-border-width)})
-        );
-    };
-
-    &:not(.mc-alert_small) {
-        padding: {
-            top: var(--mc-alert-size-vertical-padding, map.get($tokens, alert-size-vertical-padding));
-            bottom: var(--mc-alert-size-vertical-padding, map.get($tokens, alert-size-vertical-padding));
-        };
-    }
-
-    &.mc-alert_small {
-        padding: {
-            top: var(--mc-alert-size-small-vertical-padding, map.get($tokens, alert-size-small-vertical-padding));
-            bottom: var(--mc-alert-size-small-vertical-padding, map.get($tokens, alert-size-small-vertical-padding));
-        };
-    }
-
-    &.mc-alert_dismissible {
-        padding-right: calc(
-            var(--mc-alert-size-right-padding-dismissible, #{map.get($tokens, alert-size-close-button-width)}) +
-            var(--mc-alert-size-horizontal-padding, #{map.get($tokens, alert-size-horizontal-padding)})
-        );
-    }
-}
-
-.mc-alert_dismissible {
-    position: relative;
-
-    .mc-alert__close {
-        position: absolute;
-
-        z-index: 10;
-        right: 15px;
-
-        border: 1px solid transparent;
-        outline: 0;
-
-        background: transparent;
-
-        padding: 0;
-
-        cursor: pointer;
-        text-align: center;
-
-        height: auto;
-        min-height: auto;
-    }
-
-    &.mc-alert_small {
-        .mc-alert__close {
-            top: 10px;
-        }
-    }
-
-    &:not(.mc-alert_small) {
-        .mc-alert__close {
-            top: 14px;
-        }
-    }
-}
-
-@mixin alert-theme($alert) {
-    background-color: map.get($alert, background);
-    border-color: map.get($alert, border);
-
-    .mc-icon.mc-alert__icon {
-        color: map.get($alert, icon);
-    }
-}
-
-@mixin mc-alert-theme($theme) {
-    $foreground: map.get($theme, foreground);
-
-    $alert: map.get(map.get($theme, components), alert);
-
-    $is-dark: map.get($theme, is-dark);
-
-    .mc-alert__close:focus {
-        outline: none;
-    }
-
-    .mc-alert {
-        color: map.get($foreground, text);
-    }
-
-    .mc-alert_error {
-        @include alert-theme(map.get($alert, error));
-    }
-
-    .mc-alert_warning {
-        @include alert-theme(map.get($alert, warning));
-    }
-
-    .mc-alert_success {
-        @include alert-theme(map.get($alert, success));
-    }
-
-    .mc-alert_info {
-        @include alert-theme(map.get($alert, info));
-    }
-
-    .mc-alert:not(.mc-alert_error):not(.mc-alert_warning):not(.mc-alert_success):not(.mc-alert_info) {
-        @include alert-theme(map.get($alert, default));
-    }
-}
-
-@mixin mc-alert-typography($config) {
-    .mc-alert:not(.mc-alert_small) {
-        @include mc-typography-level-to-styles($config, map.get($tokens, alert-font-default-body));
-
-        header {
-            @include mc-typography-level-to-styles($config, map.get($tokens, alert-font-default-header));
-        }
-    }
-
-    .mc-alert.mc-alert_small {
-        @include mc-typography-level-to-styles($config, map.get($tokens, alert-font-small-body));
-
-        header {
-            @include mc-typography-level-to-styles($config, map.get($tokens, alert-font-small-header));
-        }
-
-        .mc-link__text {
-            @include mc-typography-level-to-styles($config, map.get($tokens, alert-font-small-body));
-        }
-    }
-
-    .mc-icon {
-        letter-spacing: unset;
-    }
-}