@ptsecurity/mosaic 15.3.1 → 15.4.0-beta.1

package/select/select.scss

@@ -16,12 +16,27 @@ $tokens: meta.module-variables(tokens) !default;
     width: 100%;
 
     overflow: hidden;
-    text-overflow: ellipsis;
 
     white-space: nowrap;
 
     & > span {
-        width: 100%;
+        flex: 1;
+        overflow: hidden;
+    }
+}
+
+.mc-select__match-container {
+    width: 100%;
+
+    text-overflow: ellipsis;
+    overflow: hidden;
+
+    & .mc-select__match-hidden-text {
+        flex: 0 0 70px;
+        align-self: center;
+        padding: 0 8px;
+
+        text-align: right;
     }
 }
 
@@ -57,14 +72,23 @@ $tokens: meta.module-variables(tokens) !default;
             );
         }
 
-        &.mc-select__trigger_multiple .mc-select__matcher {
-            padding-left: calc(
-                var(--mc-select-size-left-padding-multiple, #{map.get($tokens, select-size-left-padding-multiple)}) -
-                var(--mc-form-field-size-border-width, #{map.get($tokens, form-field-size-border-width)})
-            );
+        &.mc-select__trigger_multiple {
+            .mc-select__matcher {
+                .mc-select__match-container {
+                    display: flex;
+                }
+
+                $select-size-left-padding-multiple: map.get($tokens, select-size-left-padding-multiple);
+                $form-field-size-border-width: map.get($tokens, form-field-size-border-width);
 
-            & .mc-tag.mc-disabled .mc-tag__text {
-                margin-right: 7px;
+                padding-left: calc(
+                    var(--mc-select-size-left-padding-multiple, #{$select-size-left-padding-multiple}) -
+                    var(--mc-form-field-size-border-width, #{$form-field-size-border-width})
+                );
+
+                & .mc-tag.mc-disabled .mc-tag__text {
+                    margin-right: 7px;
+                }
             }
         }
     }
@@ -102,8 +126,11 @@ $tokens: meta.module-variables(tokens) !default;
     overflow: hidden;
 
     max-height: calc(
-        var(--mc-form-field-size-height, map.get($tokens, form-field-size-height)) -
-        (var(--mc-form-field-size-border-width, map.get($tokens, form-field-size-border-width)) * 2)
+        var(--mc-form-field-size-height, map.get($tokens, form-field-size-height)) - 4px
+    );
+
+    height: calc(
+        var(--mc-form-field-size-height, map.get($tokens, form-field-size-height)) - 4px
     );
 
     & .mc-tag {
@@ -111,22 +138,6 @@ $tokens: meta.module-variables(tokens) !default;
     }
 }
 
-.mc-select__match-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-
-    width: 100%;
-
-    & .mc-select__match-hidden-text {
-        flex: 0 0 70px;
-        align-self: center;
-        padding: 0 8px;
-
-        text-align: right;
-    }
-}
-
 .mc-select__arrow-wrapper {
     display: flex;
     align-self: center;
@@ -168,6 +179,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-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-select__content {

package/sidepanel/_sidepanel-theme.nvl.scss

@@ -0,0 +1,67 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+
+@mixin nvl-mc-sidepanel-theme($theme) {
+    $background: map.get($theme, background);
+
+    $sidepanel: map.get(map.get($theme, components), sidepanel);
+    $popup: map.get(map.get($theme, components), popup);
+
+    .mc-sidepanel-content {
+        background-color: map.get($background, background);
+    }
+
+    .mc-sidepanel-container_shadowed {
+        &.mc-sidepanel-container_right {
+            .mc-sidepanel-content {
+                box-shadow: 0 0 0 1px map.get($sidepanel, border), -6px 0 12px 0 rgba(0, 0, 0, 0.24);
+            }
+        }
+
+        &.mc-sidepanel-container_left {
+            .mc-sidepanel-content {
+                box-shadow: 0 0 0 1px map.get($sidepanel, border), 6px 0 12px 0 rgba(0, 0, 0, 0.24);
+            }
+        }
+
+        &.mc-sidepanel-container_bottom {
+            .mc-sidepanel-content {
+                box-shadow: 0 0 0 1px map.get($sidepanel, border), 0 -6px 12px 0 rgba(0, 0, 0, 0.24);
+            }
+        }
+
+        &.mc-sidepanel-container_top {
+            .mc-sidepanel-content {
+                box-shadow: 0 0 0 1px map.get($sidepanel, border), 0 6px 12px 0 rgba(0, 0, 0, 0.24);
+            }
+        }
+    }
+
+    .mc-sidepanel-header {
+        border-bottom: 1px solid map.get($sidepanel, header-border);
+    }
+
+    .mc-sidepanel-footer {
+        border-top: 1px solid map.get($sidepanel, footer-border);
+        background-color: map.get($popup, footer-background);
+    }
+}
+
+@mixin nvl-mc-sidepanel-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .mc-sidepanel-title {
+        @include mc-typography-level-to-styles($config, map.get($tokens, sidepanel-header-font-default));
+    }
+
+    .mc-sidepanel-container {
+        @include mc-typography-level-to-styles($config, map.get($tokens, sidepanel-font-default));
+    }
+
+    .mc-sidepanel-footer {
+        @include mc-typography-level-to-styles($config, map.get($tokens, sidepanel-footer-font-default));
+    }
+}

package/splitter/_splitter-theme.nvl.scss

@@ -0,0 +1,31 @@
+@use 'sass:map';
+
+@use '../core/styles/theming/theming' as *;
+
+
+@mixin nvl-mc-splitter-theme($theme) {
+    $background: map.get($theme, background);
+
+    .mc-gutter {
+        cursor: col-resize;
+
+        &:hover,
+        &.mc-gutter_dragged {
+            background-color: map.get($background, background-disabled);
+        }
+
+        &.mc-gutter_vertical {
+            cursor: row-resize;
+        }
+
+        &[disabled] {
+            background-color: mc-color($background, overlay-disabled);
+
+            cursor: default;
+        }
+    }
+
+    .mc-gutter-ghost {
+        background: mc-color($background, overlay-disabled);
+    }
+}

package/table/_table-theme.nvl.scss

@@ -0,0 +1,65 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+
+@mixin nvl-mc-table-theme($theme) {
+    $foreground: map.get($theme, foreground);
+    $background: map.get($theme, background);
+
+    .mc-table {
+        & > thead {
+            color: map.get($foreground, text-less-contrast);
+
+            & > tr > th {
+                border-color: map.get($foreground, divider);
+            }
+        }
+
+        & > tbody {
+            & > tr {
+                &:hover {
+                    background-color: map.get($background, overlay-hover);
+                }
+
+                & > th,
+                & > td {
+                    color: map.get($foreground, text);
+                }
+            }
+        }
+
+        &.mc-table_bordered {
+            & > tbody > tr {
+                & th,
+                & td {
+                    border-bottom-color: map.get($foreground, divider);
+                }
+            }
+        }
+    }
+}
+
+@mixin nvl-mc-table-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .mc-table {
+        & > thead {
+            & > tr > th {
+                font-weight: normal;
+            }
+
+            @include mc-typography-level-to-styles($config, map.get($tokens, table-font-header));
+        }
+
+        & > tbody {
+            & > tr > th {
+                font-weight: normal;
+            }
+
+            @include mc-typography-level-to-styles($config, map.get($tokens, table-font-body));
+        }
+    }
+}
+

package/table/_table-theme.scss

@@ -64,4 +64,3 @@ $tokens: meta.module-variables(tokens) !default;
         }
     }
 }
-

package/tabs/_tabs-theme.nvl.scss

@@ -0,0 +1,240 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+
+//noinspection ALL
+@mixin nvl-mc-tabs-theme($theme) {
+    $foreground: map.get($theme, foreground);
+    $background: map.get($theme, background);
+
+    $states: map.get($theme, states);
+
+    $tabs: map.get(map.get($theme, components), tabs);
+    $vertical-tabs: map.get(map.get($theme, components), vertical-tabs);
+
+    .mc-tab-group_vertical .mc-tab-header__content {
+        border-right-color: map.get($foreground, divider);
+    }
+
+    .mc-tab-header__pagination {
+        border-bottom-color: map.get($tabs, border);
+
+        &:hover {
+            background: map.get($background, overlay-hover);
+
+            & .mc-icon {
+                color: map.get($foreground, text);
+            }
+        }
+
+        &:active {
+            background: map.get($foreground, divider);
+        }
+
+        &.mc-tab-header__pagination_before {
+            border-right-color: map.get($foreground, divider);
+        }
+
+        &.mc-tab-header__pagination_after {
+            border-left-color: map.get($foreground, divider);
+        }
+
+        &[disabled],
+        &.mc-disabled {
+            pointer-events: none;
+
+            & .mc-icon {
+                color: map.get($foreground, text-disabled);
+            }
+        }
+    }
+
+    /* stylelint-disable no-descending-specificity */
+    .mc-tab-label_old {
+        color: map.get($foreground, text);
+
+        border-top-color: transparent;
+        border-bottom-color: map.get($tabs, border);
+
+        &.cdk-keyboard-focused:after {
+            border-color: map.get(map.get($theme, states), focused-color);
+            border-bottom-color: transparent;
+        }
+
+        &.mc-tab-label_empty {
+            color: map.get($tabs, state-empty-text);
+
+            & .mc-icon {
+                color: map.get($tabs, state-empty-icon);
+            }
+        }
+
+        &:hover {
+            background: map.get($background, overlay-hover);
+
+            color: map.get($tabs, state-hover-text);
+
+            & .mc-icon {
+                color: map.get($tabs, state-hover-icon);
+            }
+        }
+
+        &.mc-active {
+            border: {
+                color: map.get($tabs, border);
+                bottom-color: transparent;
+            }
+        }
+
+        &[disabled],
+        &.mc-disabled {
+            cursor: default;
+
+            color: map.get($tabs, state-disabled-text);
+
+            & .mc-icon {
+                color: map.get($tabs, state-disabled-icon);
+            }
+        }
+    }
+
+    .mc-tab-link,
+    .mc-tab-label_horizontal {
+        color: map.get($tabs, state-normal-text);
+
+        & .mc-icon {
+            color: map.get($tabs, state-normal-icon);
+        }
+
+        border-bottom-color: map.get($tabs, border);
+
+        &.cdk-keyboard-focused:after {
+            border-color: map.get(map.get($theme, states), focused-color);
+            border-bottom-color: transparent;
+        }
+
+        &.mc-tab-label_empty {
+            color: map.get($tabs, state-empty-text);
+
+            & .mc-icon {
+                color: map.get($tabs, state-empty-icon);
+            }
+        }
+
+        &.mc-active {
+            border-bottom-color: transparent;
+
+            color: map.get($tabs, state-normal-text);
+
+            & .mc-icon {
+                color: map.get($tabs, state-normal-icon);
+            }
+
+            &:before {
+                background-color: map.get($tabs, state-active-marker);
+            }
+        }
+
+        &:hover {
+            background: map.get($background, overlay-hover);
+
+            color: map.get($tabs, state-hover-text);
+
+            & .mc-icon {
+                color: map.get($tabs, state-hover-icon);
+            }
+        }
+
+        &[disabled],
+        &.mc-disabled {
+            cursor: default;
+
+            color: map.get($tabs, state-disabled-text);
+
+            &:before {
+                opacity: map.get($tabs, state-disabled-marker-opacity);
+            }
+
+            & .mc-icon {
+                color: map.get($tabs, state-disabled-icon);
+            }
+        }
+    }
+
+    .mc-tab-label_vertical {
+        background: map.get($vertical-tabs, state-normal-background);
+        color: map.get($tabs, state-normal-text);
+
+        & .mc-icon {
+            color: map.get($tabs, state-normal-icon);
+        }
+
+        &.cdk-keyboard-focused:after {
+            border-color: map.get(map.get($theme, states), focused-color);
+        }
+
+        &.mc-tab-label_empty {
+            color: map.get($tabs, state-empty-text);
+
+            & .mc-icon {
+                color: map.get($tabs, state-empty-icon);
+            }
+        }
+
+        &:hover {
+            background: map.get($vertical-tabs, state-hover-background);
+
+            color: map.get($tabs, state-hover-text);
+
+            & .mc-icon {
+                color: map.get($tabs, state-hover-icon);
+            }
+        }
+
+        &.mc-active {
+            color: map.get($tabs, state-normal-text);
+            background: map.get($states, selected-color);
+
+            & .mc-icon {
+                color: map.get($tabs, state-normal-icon);
+            }
+
+            &:before {
+                background-color: map.get($tabs, state-active-marker);
+            }
+
+            &:hover {
+                background: map.get($vertical-tabs, state-hover-selected-background);
+
+                & .mc-icon {
+                    color: map.get($tabs, state-hover-icon);
+                }
+            }
+        }
+
+        &[disabled],
+        &.mc-disabled {
+            cursor: default;
+            background: map.get($vertical-tabs, state-normal-background);
+
+            color: map.get($tabs, state-disabled-text);
+
+            & .mc-icon {
+                color: map.get($tabs, state-disabled-icon);
+            }
+        }
+    }
+    /* stylelint-enable no-descending-specificity */
+}
+
+@mixin nvl-mc-tabs-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .mc-tab-label,
+    .mc-tab-label_old,
+    .mc-tab-link {
+        @include mc-typography-level-to-styles($config, map.get($tokens, tabs-font-default));
+    }
+}

package/tabs/tabs.module.d.ts

@@ -10,11 +10,12 @@ import * as i8 from "./tab-content.directive";
 import * as i9 from "@angular/common";
 import * as i10 from "@angular/cdk/portal";
 import * as i11 from "@angular/cdk/a11y";
-import * as i12 from "@ptsecurity/mosaic/core";
-import * as i13 from "@ptsecurity/mosaic/icon";
-import * as i14 from "@ptsecurity/mosaic/tooltip";
+import * as i12 from "@angular/cdk/scrolling";
+import * as i13 from "@ptsecurity/mosaic/core";
+import * as i14 from "@ptsecurity/mosaic/icon";
+import * as i15 from "@ptsecurity/mosaic/tooltip";
 export declare class McTabsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<McTabsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<McTabsModule, [typeof i1.McTabGroup, typeof i2.McTabLabel, typeof i3.McTab, typeof i4.McTabLabelWrapper, typeof i5.McTabNav, typeof i5.McTabLink, typeof i6.McTabBody, typeof i6.McTabBodyPortal, typeof i7.McTabHeader, typeof i8.McTabContent, typeof i1.McOldTabsCssStyler, typeof i1.McAlignTabsCenterCssStyler, typeof i1.McAlignTabsEndCssStyler, typeof i1.McStretchTabsCssStyler, typeof i1.McVerticalTabsCssStyler], [typeof i9.CommonModule, typeof i10.PortalModule, typeof i11.A11yModule, typeof i12.McCommonModule, typeof i13.McIconModule, typeof i14.McToolTipModule], [typeof i12.McCommonModule, typeof i1.McTabGroup, typeof i2.McTabLabel, typeof i3.McTab, typeof i5.McTabNav, typeof i5.McTabLink, typeof i8.McTabContent, typeof i1.McOldTabsCssStyler, typeof i1.McAlignTabsCenterCssStyler, typeof i1.McAlignTabsEndCssStyler, typeof i1.McStretchTabsCssStyler, typeof i1.McVerticalTabsCssStyler]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<McTabsModule, [typeof i1.McTabGroup, typeof i2.McTabLabel, typeof i3.McTab, typeof i4.McTabLabelWrapper, typeof i5.McTabNav, typeof i5.McTabLink, typeof i6.McTabBody, typeof i6.McTabBodyPortal, typeof i7.McTabHeader, typeof i8.McTabContent, typeof i1.McOldTabsCssStyler, typeof i1.McAlignTabsCenterCssStyler, typeof i1.McAlignTabsEndCssStyler, typeof i1.McStretchTabsCssStyler, typeof i1.McVerticalTabsCssStyler], [typeof i9.CommonModule, typeof i10.PortalModule, typeof i11.A11yModule, typeof i12.CdkScrollableModule, typeof i13.McCommonModule, typeof i14.McIconModule, typeof i15.McToolTipModule], [typeof i13.McCommonModule, typeof i1.McTabGroup, typeof i2.McTabLabel, typeof i3.McTab, typeof i5.McTabNav, typeof i5.McTabLink, typeof i8.McTabContent, typeof i1.McOldTabsCssStyler, typeof i1.McAlignTabsCenterCssStyler, typeof i1.McAlignTabsEndCssStyler, typeof i1.McStretchTabsCssStyler, typeof i1.McVerticalTabsCssStyler]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<McTabsModule>;
 }

package/tags/_tag-theme.nvl.scss

@@ -0,0 +1,100 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/theming/theming' as *;
+@use '../core/styles/typography/typography-utils' as *;
+
+
+@mixin nvl-mc-tag-state($state) {
+    background: map.get($state, background);
+
+    & .mc-icon {
+        color: map.get($state, icon);
+    }
+
+    & .mc-tag__text {
+        color: map.get($state, text);
+    }
+}
+
+@mixin nvl-mc-tag-color($tag) {
+    $default: map.get($tag, default);
+
+    @include nvl-mc-tag-state($default);
+
+    &:hover,
+    &.mc-hovered {
+        $hover: map.get($tag, hover);
+
+        @include nvl-mc-tag-state($hover);
+    }
+
+    &.mc-focused {
+        $focus: map.get($tag, focus);
+
+        @include nvl-mc-tag-state($focus);
+
+        box-shadow: inset 0 0 0 1px map.get($focus, outline), 0 0 0 1px map.get($focus, outline);
+    }
+
+    &.mc-disabled {
+        $disabled: map.get($tag, disabled);
+
+        @include nvl-mc-tag-state($disabled);
+    }
+}
+
+@mixin nvl-mc-tag-theme($theme) {
+    $tag: map.get(map.get($theme, components), tag);
+
+    .mc-tag {
+        &.mc-theme {
+            @include nvl-mc-tag-color(map.get($tag, theme-fade-on));
+        }
+
+        &.mc-contrast {
+            @include nvl-mc-tag-color(map.get($tag, contrast-fade-on));
+        }
+
+        &.mc-error {
+            @include nvl-mc-tag-color(map.get($tag, error-fade-on));
+        }
+
+        //&.mc-disabled {
+        //    color: map.get($foreground, text-disabled);
+        //
+        //    border-color: transparent;
+        //
+        //    background-color: map.get($background, background-disabled);
+        //}
+    }
+
+    //.mc-tag-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);
+    //    }
+    //}
+}
+
+@mixin nvl-mc-tag-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .mc-tag {
+        @include mc-typography-level-to-styles($config, map.get($tokens, tag-font-default));
+    }
+
+    .mc-tag-input {
+        @include mc-typography-level-to-styles($config, map.get($tokens, tag-input-font-default));
+    }
+}
+

package/tags/_tag-theme.scss

@@ -119,4 +119,3 @@ $tokens: meta.module-variables(tokens) !default;
         @include mc-typography-level-to-styles($config, map.get($tokens, tag-input-font-default));
     }
 }
-