@ptsecurity/mosaic 15.3.2 → 15.4.0-beta.1

package/link/_link-theme.scss

@@ -127,7 +127,6 @@ $tokens: meta.module-variables(tokens) !default;
     }
 }
 
-
 @mixin mc-link-theme($theme) {
     $foreground: map.get($theme, foreground);
 
@@ -179,10 +178,10 @@ $tokens: meta.module-variables(tokens) !default;
 
 @mixin mc-link-typography($config) {
     .mc-link {
-        @include mc-typography-level-to-styles($config, map.get($tokens, link-font-default));
+        @include mc-typography-level-to-styles($config, map.get($tokens, link-font-normal));
     }
 
     .mc-link.mc-link_caption {
-        @include mc-typography-level-to-styles($config, map.get($tokens, link-font-caption));
+        @include mc-typography-level-to-styles($config, map.get($tokens, link-font-big));
     }
 }

package/link/link.component.d.ts

@@ -25,6 +25,9 @@ export declare class McLink extends McLinkMixinBase implements OnDestroy, HasTab
     get caption(): any;
     set caption(value: any);
     private _caption;
+    get big(): any;
+    set big(value: any);
+    private _big;
     get useVisited(): any;
     set useVisited(value: any);
     private _useVisited;
@@ -40,5 +43,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"; "caption": "caption"; "useVisited": "useVisited"; "print": "print"; }, {}, ["icon"], never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McLink, "[mc-link]", ["mcLink"], { "tabIndex": "tabIndex"; "disabled": "disabled"; "pseudo": "pseudo"; "noUnderline": "noUnderline"; "caption": "caption"; "big": "big"; "useVisited": "useVisited"; "print": "print"; }, {}, ["icon"], never, false, never>;
 }

package/list/_list-theme.nvl.scss

@@ -0,0 +1,47 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+
+@mixin nvl-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 nvl-mc-list-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .mc-list-item,
+    .mc-list-option {
+        @include mc-typography-level-to-styles($config, map.get($tokens, list-font-item));
+    }
+}

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

@@ -0,0 +1,34 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+
+@mixin nvl-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 nvl-mc-loader-overlay-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .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-theme.scss

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

package/markdown/_markdown-theme.nvl.scss

@@ -0,0 +1,142 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/theming/theming' as *;
+@use '../core/styles/typography/typography-utils' as *;
+
+
+@mixin nvl-mc-markdown-theme($theme) {
+    $tokens: map.get($theme, tokens);
+
+    $foreground: map.get($theme, foreground);
+    $background: map.get($theme, background);
+
+    $markdown: map.get(map.get($theme, components), markdown);
+
+    .mc-markdown {
+        color: map.get($foreground, text);
+        background: map.get($background, background);;
+
+        // h1, h2, h3, h4, h5, h6
+        @for $i from 1 through 6 {
+            .mc-markdown__h#{$i} {
+                color: map.get($markdown, h#{$i}-color);
+            }
+        }
+
+        .mc-markdown__p {
+            color: map.get($markdown, p-color);
+        }
+
+        .mc-markdown__ul,
+        .mc-markdown__ol {
+            color: map.get($markdown, list-color);
+        }
+
+        .mc-markdown__blockquote {
+            color: map.get($markdown, blockquote-text);
+            background: map.get($markdown, blockquote-background);
+            border-color: map.get($markdown, blockquote-border);
+            border-left-color: map.get($markdown, blockquote-line);
+        }
+
+        .mc-markdown__pre,
+        .mc-markdown__p > .mc-markdown__code {
+            color: map.get($markdown, code-text);
+            background-color: map.get($markdown, code-background);
+            border-color: map.get($markdown, code-border);
+        }
+
+        .mc-markdown__a {
+            color: map.get($markdown, link-text);
+            border-bottom-color: map.get($markdown, link-border-bottom);
+
+            &:visited {
+                color: map.get($markdown, link-state-visited-text);
+                border-bottom-color: map.get($markdown, link-state-visited-border-bottom);
+            }
+
+            &:hover {
+                color: map.get($markdown, link-state-hover-text);
+                transition: color 0ms;
+                border-bottom-color: map.get($markdown, link-state-hover-border-bottom);
+            }
+
+            &:active {
+                color: map.get($markdown, link-state-active-text);
+            }
+
+            &:focus {
+                outline:
+                    map.get($markdown, link-state-focused-outline)
+                    solid
+                    map.get($tokens, markdown-link-size-state-focused-outline-width);
+
+                outline-offset: map.get($tokens, markdown-link-size-state-focused-outline-offset);
+            }
+        }
+
+        .mc-markdown__img + em {
+            color: map.get($markdown, image-caption-text);
+        }
+
+        .mc-markdown__hr {
+            border-bottom-color: map.get($markdown, hr-color);
+        }
+
+        .mc-markdown__table > .mc-markdown__thead {
+            color: map.get($markdown, table-header);
+            border-bottom-color: map.get($markdown, table-border);
+        }
+
+        .mc-markdown__table > .mc-markdown__tbody {
+            color: map.get($markdown, table-body);
+        }
+    }
+}
+
+@mixin nvl-mc-markdown-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .mc-markdown {
+        // h1, h2, h3, h4, h5, h6
+        @for $i from 1 through 6 {
+            .mc-markdown__h#{$i} {
+                @include mc-typography-level-to-styles($config, map.get($tokens, markdown-h#{$i}-font-default));
+            }
+        }
+
+        .mc-markdown__p {
+            @include mc-typography-level-to-styles($config, map.get($tokens, markdown-p-font-default));
+        }
+
+        .mc-markdown__ul,
+        .mc-markdown__ol {
+            @include mc-typography-level-to-styles($config, map.get($tokens, markdown-list-font-default));
+        }
+
+        .mc-markdown__blockquote > .mc-markdown__p {
+            @include mc-typography-level-to-styles($config, map.get($tokens, markdown-blockquote-font-default));
+        }
+
+        .mc-markdown__code {
+            @include mc-typography-level-to-styles($config, map.get($tokens, markdown-code-font-default));
+        }
+
+        .mc-markdown__a {
+            @include mc-typography-level-to-styles($config, map.get($tokens, markdown-link-font-default));
+        }
+
+        .mc-markdown__img + em {
+            @include mc-typography-level-to-styles($config, map.get($tokens, markdown-image-font-caption));
+        }
+
+        .mc-markdown__table > .mc-markdown__thead {
+            @include mc-typography-level-to-styles($config, map.get($tokens, markdown-table-font-header));
+        }
+
+        .mc-markdown__table > .mc-markdown__tbody {
+            @include mc-typography-level-to-styles($config, map.get($tokens, markdown-table-font-body));
+        }
+    }
+}

package/modal/_modal-theme.nvl.scss

@@ -0,0 +1,90 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+
+@mixin nvl-mc-modal-theme($theme) {
+    $tokens: map.get($theme, tokens);
+
+    $foreground: map.get($theme, foreground);
+    $background: map.get($theme, background);
+
+    $modal: map.get(map.get($theme, components), modal);
+    $popup: map.get(map.get($theme, components), popup);
+
+    .mc-modal {
+        .mc-modal-content {
+            // У модалки должен быть фон background. Чтобы поповеры и дропдауны было видно поверх модалки
+            background-color: map.get($background, background);
+
+            box-shadow: map.get($modal, shadow);
+        }
+
+        .mc-modal-title {
+            color: map.get($foreground, text);
+        }
+
+        .mc-modal-header {
+            border-bottom-width: var(--mc-modal-size-border-width, map.get($tokens, modal-size-border-width));
+            border-bottom-style: solid;
+            border-bottom-color: map.get($modal, header-border);
+        }
+
+        .mc-modal-header.mc-modal-body_top-overflow {
+            box-shadow: map.get($modal, body-top-shadow);
+        }
+
+        .mc-modal-footer.mc-modal-body_bottom-overflow {
+            box-shadow: map.get($modal, body-bottom-shadow);
+        }
+
+        .mc-modal-footer {
+            border-top-width: var(--mc-modal-size-border-width, map.get($tokens, modal-size-border-width));
+            border-top-style: solid;
+            border-top-color: map.get($modal, footer-border);
+
+            background-color: map.get($popup, footer-background);
+        }
+
+        .mc-modal-close {
+            border: var(--mc-modal-size-border-width, map.get($tokens, modal-size-border-width)) solid transparent;
+
+            &:hover {
+                .mc-button-overlay {
+                    background: map.get($background, overlay-hover);
+                }
+
+                .mc-icon {
+                    color: inherit;
+                }
+            }
+        }
+    }
+
+    .mc-modal-mask {
+        background-color: map.get($modal, background-mask);
+    }
+
+    .mc-confirm {
+        .mc-confirm-btns {
+            border-top-width: var(--mc-modal-size-border-width, map.get($tokens, modal-size-border-width));
+            border-top-style: solid;
+            border-top-color: map.get($modal, footer-border);
+
+            background-color: map.get($popup, footer-background);
+        }
+    }
+}
+
+@mixin nvl-mc-modal-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .mc-modal-title {
+        @include mc-typography-level-to-styles($config, map.get($tokens, modal-header-font-default));
+    }
+
+    .mc-modal-body {
+        @include mc-typography-level-to-styles($config, map.get($tokens, modal-body-font-default));
+    }
+}

package/navbar/_navbar-theme.nvl.scss

@@ -0,0 +1,123 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+
+@mixin nvl-mc-navbar-theme($theme) {
+    $background: map.get($theme, background);
+    $primary: map.get($theme, theme);
+
+    $navbar: map.get(map.get($theme, components), navbar);
+    $navbar-item: map.get(map.get($theme, components), navbar-item);
+
+    .mc-navbar,
+    .mc-vertical-navbar .mc-vertical-navbar__container {
+        background-color: map.get($navbar, background);
+    }
+
+    .mc-navbar-brand.mc-hovered:not(.mc-collapsed) {
+        background-color: map.get($navbar-item, state-hover);
+    }
+
+    .mc-navbar-brand.mc-vertical.mc-collapsed {
+        & .mc-navbar-logo:hover {
+            background-color: map.get($navbar-item, state-hover);
+        }
+    }
+
+    .mc-navbar-title {
+        color: map.get($navbar-item, color);
+    }
+
+    .mc-navbar-item,
+    .mc-navbar-brand,
+    .mc-navbar-toggle {
+        color: map.get($navbar-item, color);
+
+        & > .mc-icon {
+            color: map.get($navbar-item, icon-color);
+        }
+
+        & .mc-navbar-item__arrow-icon {
+            color: map.get($navbar-item, color);
+        }
+
+        &.mc-active {
+            background: map.get($navbar-item, state-selected);
+        }
+
+        &:hover:not(.mc-navbar-item_button) {
+            cursor: pointer;
+
+            & .mc-navbar-item__overlay {
+                background-color: map.get($navbar-item, state-hover);
+            }
+        }
+
+        &:active:not(.mc-navbar-item_button) {
+            & .mc-navbar-item__overlay {
+                background: map.get($navbar-item, state-active);
+            }
+        }
+
+        &[disabled] {
+            pointer-events: none;
+            cursor: default;
+
+            .mc-navbar-item__title,
+            .mc-icon {
+                opacity: map.get($navbar-item, state-disabled-opacity);
+            }
+        }
+    }
+
+    .mc-navbar-focusable-item {
+        outline: none;
+
+        /* stylelint-disable no-descending-specificity */
+        &.cdk-keyboard-focused .mc-navbar-item__overlay {
+            box-shadow:
+                inset 0 0 0 2px map.get(map.get($theme, states), focused-color),
+                inset 0 0 0 3px map.get($background, background);
+        }
+        /* stylelint-enable no-descending-specificity */
+    }
+
+    .mc-navbar-divider {
+        background-color: map.get($navbar, divider-background);
+    }
+}
+
+button {
+    &.mc-navbar-item,
+    &.mc-navbar-brand,
+    &.mc-navbar-toggle {
+        background: transparent;
+        border: none;
+    }
+}
+
+@mixin nvl-mc-navbar-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .mc-navbar-title {
+        @include mc-typography-level-to-styles($config, map.get($tokens, navbar-font-title));
+    }
+
+    .mc-navbar-subtitle {
+        @include mc-typography-level-to-styles($config, extra-small-text);
+    }
+
+    .mc-navbar-brand {
+        .mc-navbar-title {
+            @include mc-typography-level-to-styles($config, map.get($tokens, navbar-brand-font-title));
+
+            &.mc-navbar-title_small {
+                @include mc-typography-level-to-styles($config, subheading);
+
+                white-space: unset;
+            }
+        }
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ptsecurity/mosaic",
-    "version": "15.3.2",
+    "version": "15.4.0-beta.1",
     "description": "Mosaic",
     "repository": {
         "type": "git",
@@ -22,7 +22,7 @@
         "@angular/core": "^15.2.0",
         "@angular/common": "^15.2.0",
         "@angular/forms": "^15.2.0",
-        "@ptsecurity/cdk": "^15.3.2",
+        "@ptsecurity/cdk": "^15.4.0-beta.1",
         "@ptsecurity/mosaic-moment-adapter": "^1.1.0",
         "@ptsecurity/mosaic-luxon-adapter": "^1.1.0",
         "@mosaic-design/date-formatter": "^1.1.0",
@@ -61,6 +61,14 @@
         "./package.json": {
             "default": "./package.json"
         },
+        "./alert": {
+            "types": "./alert/index.d.ts",
+            "esm2020": "./esm2020/alert/ptsecurity-mosaic-alert.mjs",
+            "es2020": "./fesm2020/ptsecurity-mosaic-alert.mjs",
+            "es2015": "./fesm2015/ptsecurity-mosaic-alert.mjs",
+            "node": "./fesm2015/ptsecurity-mosaic-alert.mjs",
+            "default": "./fesm2020/ptsecurity-mosaic-alert.mjs"
+        },
         "./autocomplete": {
             "types": "./autocomplete/index.d.ts",
             "esm2020": "./esm2020/autocomplete/ptsecurity-mosaic-autocomplete.mjs",
@@ -149,6 +157,22 @@
             "node": "./fesm2015/ptsecurity-mosaic-dropdown.mjs",
             "default": "./fesm2020/ptsecurity-mosaic-dropdown.mjs"
         },
+        "./ellipsis-center": {
+            "types": "./ellipsis-center/index.d.ts",
+            "esm2020": "./esm2020/ellipsis-center/ptsecurity-mosaic-ellipsis-center.mjs",
+            "es2020": "./fesm2020/ptsecurity-mosaic-ellipsis-center.mjs",
+            "es2015": "./fesm2015/ptsecurity-mosaic-ellipsis-center.mjs",
+            "node": "./fesm2015/ptsecurity-mosaic-ellipsis-center.mjs",
+            "default": "./fesm2020/ptsecurity-mosaic-ellipsis-center.mjs"
+        },
+        "./file-upload": {
+            "types": "./file-upload/index.d.ts",
+            "esm2020": "./esm2020/file-upload/ptsecurity-mosaic-file-upload.mjs",
+            "es2020": "./fesm2020/ptsecurity-mosaic-file-upload.mjs",
+            "es2015": "./fesm2015/ptsecurity-mosaic-file-upload.mjs",
+            "node": "./fesm2015/ptsecurity-mosaic-file-upload.mjs",
+            "default": "./fesm2020/ptsecurity-mosaic-file-upload.mjs"
+        },
         "./form-field": {
             "types": "./form-field/index.d.ts",
             "esm2020": "./esm2020/form-field/ptsecurity-mosaic-form-field.mjs",

package/popover/_popover-theme.nvl.scss

@@ -0,0 +1,111 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+
+@mixin nvl-mc-popover-theme($theme) {
+    $foreground: map.get($theme, foreground);
+
+    $popover: map.get(map.get($theme, components), popover);
+
+    $header: map.get($popover, header);
+    $footer: map.get($popover, footer);
+
+    .mc-popover {
+        border-color: map.get($popover, border);
+        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+    }
+
+    .mc-popover__header {
+        color: map.get($header, text);
+        background: map.get($header, background);
+        border-bottom-color: map.get($header, border);
+    }
+
+    .mc-popover__container,
+    .mc-popover__content {
+        color: map.get($popover, text);
+        background-color: map.get($popover, background);
+    }
+
+    .mc-popover__footer {
+        border-top-color: map.get($footer, border);
+        background-color: map.get($footer, background);
+    }
+
+    .mc-popover .mc-popover__arrow {
+        border-color: map.get($popover, border);
+    }
+
+    .mc-popover_placement-top .mc-popover__arrow,
+    .mc-popover_placement-top-left .mc-popover__arrow,
+    .mc-popover_placement-top-right .mc-popover__arrow {
+        background-color: map.get($popover, background);
+        border-top-color: map.get($popover, border);
+        border-left-color: map.get($popover, border);
+    }
+
+    .mc-popover_placement-top .mc-popover__arrow.mc-popover__arrow_with-footer,
+    .mc-popover_placement-top-left .mc-popover__arrow.mc-popover__arrow_with-footer,
+    .mc-popover_placement-top-right .mc-popover__arrow.mc-popover__arrow_with-footer {
+        background-color: map.get($footer, background);
+        border-top-color: map.get($footer, border);
+        border-left-color: map.get($footer, border);
+    }
+
+    .mc-popover_placement-right .mc-popover__arrow,
+    .mc-popover_placement-right-top .mc-popover__arrow,
+    .mc-popover_placement-right-bottom .mc-popover__arrow {
+        background-color: map.get($popover, background);
+        border-top-color: map.get($popover, background);
+        border-right-color: map.get($popover, background);
+    }
+
+    .mc-popover_placement-right-bottom .mc-popover__arrow.mc-popover__arrow_with-footer {
+        background-color: map.get($footer, background);
+        border-top-color: map.get($footer, border);
+        border-right-color: map.get($footer, border);
+    }
+
+    .mc-popover_placement-left .mc-popover__arrow,
+    .mc-popover_placement-left-top .mc-popover__arrow,
+    .mc-popover_placement-left-bottom .mc-popover__arrow {
+        background-color: map.get($popover, background);
+        border-bottom-color: map.get($popover, background);
+        border-left-color: map.get($popover, background);
+    }
+
+    .mc-popover_placement-left-bottom .mc-popover__arrow.mc-popover__arrow_with-footer {
+        background-color: map.get($footer, background);
+        border-bottom-color: map.get($footer, border);
+        border-left-color: map.get($footer, border);
+    }
+
+    .mc-popover_placement-bottom .mc-popover__arrow,
+    .mc-popover_placement-bottom-left .mc-popover__arrow,
+    .mc-popover_placement-bottom-right .mc-popover__arrow,
+    .mc-popover_placement-bottom .mc-popover__arrow.mc-popover__arrow_with-footer,
+    .mc-popover_placement-bottom-left .mc-popover__arrow.mc-popover__arrow_with-footer,
+    .mc-popover_placement-bottom-right .mc-popover__arrow.mc-popover__arrow_with-footer {
+        background-color: map.get($popover, background);
+        border-right-color: map.get($popover, background);
+        border-bottom-color: map.get($popover, background);
+    }
+}
+
+@mixin nvl-mc-popover-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .mc-popover__header {
+        @include mc-typography-level-to-styles($config, map.get($tokens, popover-header-font-default));
+    }
+
+    .mc-popover__content {
+        @include mc-typography-level-to-styles($config, map.get($tokens, popover-font-default));
+    }
+
+    .mc-popover__footer {
+        @include mc-typography-level-to-styles($config, map.get($tokens, popover-footer-font-default));
+    }
+}