@ptsecurity/mosaic 15.3.1 → 15.4.0-beta.1

package/button/_button-theme.nvl.scss

@@ -0,0 +1,180 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+
+@mixin _icon($left-icon, $right-icon) {
+    .mc-icon {
+        color: $left-icon;
+
+        &.mc-icon_left {
+            color: $left-icon;
+        }
+
+        &.mc-icon_right {
+            color: $right-icon;
+        }
+    }
+}
+
+@mixin nvl-mc-filled-button($params) {
+    border-color: map.get($params, border);
+    color: map.get($params, foreground);
+    background: map.get($params, background);
+
+    @include _icon(map.get($params, left-icon), map.get($params, right-icon));
+
+    &:hover:not([disabled]),
+    &.mc-hover:not([disabled]) {
+        background: map.get($params, states_hover_background);
+    }
+
+    &:active:not([disabled]),
+    &.mc-active:not([disabled]) {
+        background: map.get($params, states_active_background);
+    }
+
+    &.mc-disabled,
+    &[disabled] {
+        color: map.get($params, states_disabled_foreground);
+        background: map.get($params, states_disabled_background);
+
+        @include _icon(map.get($params, states_disabled_left-icon), map.get($params, states_disabled_left-icon));
+    }
+}
+
+@mixin nvl-mc-outline-button($params) {
+    border-color: map.get($params, border);
+    color: map.get($params, foreground);
+    background: map.get($params, background);
+
+    @include _icon(map.get($params, left-icon), map.get($params, right-icon));
+
+    &:hover:not([disabled]),
+    &.mc-hover:not([disabled]) {
+        background: map.get($params, states_hover_background);
+    }
+
+    &:active:not([disabled]),
+    &.mc-active:not([disabled]) {
+        background: map.get($params, states_active_background);
+    }
+
+    &.mc-disabled,
+    &[disabled] {
+        border-color: map.get($params, states_disabled_border);
+        color: map.get($params, states_disabled_foreground);
+
+        @include _icon(map.get($params, states_disabled_left-icon), map.get($params, states_disabled_left-icon));
+    }
+}
+
+@mixin nvl-mc-transparent-button($params) {
+    border-color: map.get($params, border);
+    color: map.get($params, foreground);
+    background: map.get($params, background);
+
+    @include _icon(map.get($params, left-icon), map.get($params, right-icon));
+
+    &:hover:not([disabled]),
+    &.mc-hover:not([disabled]) {
+        background: map.get($params, states_hover_background);
+    }
+
+    &:active:not([disabled]),
+    &.mc-active:not([disabled]) {
+        background: map.get($params, states_active_background);
+    }
+
+    &.mc-disabled,
+    &[disabled] {
+        border-color: map.get($params, states_disabled_border);
+        color: map.get($params, states_disabled_foreground);
+
+        @include _icon(map.get($params, states_disabled_left-icon), map.get($params, states_disabled_left-icon));
+    }
+}
+
+@mixin nvl-mc-button-theme($theme) {
+    $primary: map.get($theme, theme);
+    $background: map.get($theme, background);
+
+    $button: map.get(map.get($theme, components), button);
+
+    .mc-button-overlay {
+        display: none;
+    }
+
+    .mc-button,
+    .mc-button-icon {
+        -webkit-font-smoothing: antialiased;
+
+        &.kbq-button_filled {
+            &.mc-contrast {
+                $filled-contrast: map.get(map.get($button, filled), contrast-fade-off);
+
+                @include nvl-mc-filled-button($filled-contrast);
+            }
+
+            &.mc-contrast-fade {
+                $filled-fade-contrast: map.get(map.get($button, filled), contrast-fade-on);
+
+                @include nvl-mc-filled-button($filled-fade-contrast);
+            }
+        }
+
+        &.kbq-button_outline {
+            &.mc-theme-fade {
+                $outline-theme-fade-on: map.get(map.get($button, outline), theme-fade-on);
+
+                @include nvl-mc-outline-button($outline-theme-fade-on);
+            }
+
+            &.mc-contrast-fade {
+                $outline-contrast-fade-on: map.get(map.get($button, outline), contrast-fade-on);
+
+                @include nvl-mc-outline-button($outline-contrast-fade-on);
+
+            }
+        }
+
+        &.kbq-button_transparent {
+            &.mc-theme {
+                $transparent-theme: map.get(map.get($button, transparent), theme);
+
+                @include nvl-mc-transparent-button($transparent-theme);
+            }
+
+            &.mc-contrast {
+                $transparent-contrast: map.get(map.get($button, transparent), contrast);
+
+                @include nvl-mc-transparent-button($transparent-contrast);
+            }
+        }
+
+        &.mc-button_filled,
+        &.mc-button_outline,
+        &.mc-button_transparent {
+            &.cdk-keyboard-focused {
+                border-color: map.get(map.get($theme, states), focused-color);
+            }
+        }
+    }
+}
+
+@mixin nvl-mc-button-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .mc-button,
+    .mc-button-icon {
+        @include mc-typography-level-to-styles($config, map.get($tokens, button-font-default));
+    }
+
+    .mc-button-icon.mc-button-wrapper {
+        .mc-icon {
+            line-height: mc-line-height($config, body);
+        }
+    }
+}
+

package/button/_button-theme.scss

@@ -22,7 +22,6 @@ $tokens: meta.module-variables(tokens) !default;
         border-color: map.get($params, active_border);
         background: map.get($params, active_background);
     }
-
 }
 
 @mixin mc-button_transparent($theme) {
@@ -151,4 +150,3 @@ $tokens: meta.module-variables(tokens) !default;
         }
     }
 }
-

package/button/button.component.d.ts

@@ -3,10 +3,16 @@ import { ChangeDetectorRef, ElementRef, OnDestroy, Renderer2, QueryList, AfterCo
 import { CanColor, CanDisable, CanColorCtor, HasTabIndexCtor } from '@ptsecurity/mosaic/core';
 import { McIcon } from '@ptsecurity/mosaic/icon';
 import * as i0 from "@angular/core";
+export declare enum KbqButtonStyles {
+    Filled = "filled",
+    Outline = "outline",
+    Transparent = "transparent"
+}
 export declare const leftIconClassName = "mc-icon_left";
 export declare const rightIconClassName = "mc-icon_right";
-export declare const buttonLeftIconClassName = "mc-icon-button_left";
-export declare const buttonRightIconClassName = "mc-icon-button_right";
+export declare const buttonLeftIconClassName = "mc-button-icon_left";
+export declare const buttonRightIconClassName = "mc-button-icon_right";
+export declare const getNodesWithoutComments: (nodes: NodeList) => Node[];
 export declare class McButtonCssStyler implements AfterContentInit {
     private renderer;
     private cdr;
@@ -30,6 +36,9 @@ export declare class McButton extends McButtonMixinBase implements OnDestroy, Ca
     private focusMonitor;
     private styler;
     hasFocus: boolean;
+    get kbqStyle(): string;
+    set kbqStyle(value: string | KbqButtonStyles);
+    private _kbqStyle;
     get disabled(): any;
     set disabled(value: any);
     private _disabled;
@@ -45,5 +54,5 @@ export declare class McButton extends McButtonMixinBase implements OnDestroy, Ca
     private runFocusMonitor;
     private stopFocusMonitor;
     static ɵfac: i0.ɵɵFactoryDeclaration<McButton, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McButton, "[mc-button]", never, { "color": "color"; "tabIndex": "tabIndex"; "disabled": "disabled"; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McButton, "[mc-button]", never, { "color": "color"; "tabIndex": "tabIndex"; "kbqStyle": "kbqStyle"; "disabled": "disabled"; }, {}, never, ["*"], false, never>;
 }

package/button/button.scss

@@ -11,24 +11,38 @@ $tokens: meta.module-variables(tokens) !default;
 .mc-button {
     @extend %mc-button-base;
 
-    padding-left: var(--mc-button-size-horizontal-padding, map.get($tokens, button-size-horizontal-padding));
-    padding-right: var(--mc-button-size-horizontal-padding, map.get($tokens, button-size-horizontal-padding));
+    padding-left: calc(
+        var(--mc-button-size-horizontal-padding, map.get($tokens, button-size-horizontal-padding)) +
+        4px
+    );
+    padding-right: calc(
+        var(--mc-button-size-horizontal-padding, map.get($tokens, button-size-horizontal-padding)) +
+        4px
+    );
+
+    &.mc-button-icon_left {
+        padding-left: var(--mc-button-size-horizontal-padding, map.get($tokens, button-size-horizontal-padding));
+    }
+
+    &.mc-button-icon_right {
+        padding-right: var(--mc-button-size-horizontal-padding, map.get($tokens, button-size-horizontal-padding));
+    }
 }
 
 .mc-light-button {
     @extend %mc-button-base;
 }
 
-.mc-icon-button {
+.mc-button-icon {
     @extend %mc-button-base;
 
     padding-left: calc(
-        var(--mc-icon-button-size-horizontal-padding, map.get($tokens, icon-button-size-horizontal-padding)) -
+        var(--mc-button-icon-size-horizontal-padding, map.get($tokens, button-icon-size-horizontal-padding)) -
         var(--mc-button-size-border-width, map.get($tokens, button-size-border-width))
     );
 
     padding-right: calc(
-        var(--mc-icon-button-size-horizontal-padding, map.get($tokens, icon-button-size-horizontal-padding)) -
+        var(--mc-button-icon-size-horizontal-padding, map.get($tokens, button-icon-size-horizontal-padding)) -
         var(--mc-button-size-border-width, map.get($tokens, button-size-border-width))
     );
 }

package/button-toggle/_button-toggle-theme.scss

@@ -0,0 +1,92 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+@mixin mc-button-toggle-color($state) {
+    & .mc-button-overlay {
+        background: map.get($state, background);
+        border-color: map.get($state, background);
+    }
+
+    & .mc-icon {
+        color: map.get($state, icon);
+    }
+}
+
+@mixin mc-button-toggle-theme($theme) {
+    $button-toggle-group: map.get(map.get(map.get($theme, components), button-toggle), button-toggle-group);
+    $button-toggle: map.get(map.get(map.get($theme, components), button-toggle), button-toggle);
+    $states: map.get($button-toggle, states);
+
+    .mc-button-toggle-group {
+        background: map.get($button-toggle-group, background);
+        border-color:  map.get($button-toggle-group, border);
+
+        .mc-button-toggle {
+            & > .mc-button,
+            & > .mc-icon-button {
+                color: map.get($button-toggle, color);
+                border-color: map.get($button-toggle-group, background);
+                background: inherit;
+
+                & .mc-icon {
+                    color: map.get($button-toggle, icon);
+                }
+
+                .mc-button-overlay {
+                    background-color: unset;
+                }
+
+                &:hover:not([disabled], .mc-active) {
+                    @include mc-button-toggle-color(map.get($states, hover));
+                }
+
+                &:active:not([disabled], .mc-active) {
+                    @include mc-button-toggle-color(map.get($states, active));
+                }
+
+                &.mc-active {
+                    $state: map.get($states, pressed);
+
+                    background: map.get($state, background);
+                    border-color: map.get($state, background);
+
+                    & .mc-icon {
+                        color: map.get($state, icon);
+                    }
+                }
+
+                &.mc-disabled,
+                &[disabled] {
+                    opacity: map.get(map.get($states, disabled), opacity);
+                }
+
+                &.cdk-keyboard-focused {
+                    box-shadow: unset;
+                }
+            }
+
+            &.cdk-keyboard-focused {
+                box-shadow: 0 0 0 2px map-get(map-get($theme, states), focused-color);
+            }
+        }
+    }
+}
+
+@mixin mc-button-toggle-typography($config) {
+    .mc-button-toggle {
+        @include mc-typography-level-to-styles($config, map.get($tokens, button-toggle-font-default));
+
+        > .mc-button,
+        > .mc-icon-button {
+            @include mc-typography-level-to-styles($config, map.get($tokens, button-toggle-font-default));
+        }
+    }
+}
+

package/button-toggle/button-toggle.component.d.ts

@@ -2,6 +2,7 @@ import { FocusMonitor } from '@angular/cdk/a11y';
 import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, OnInit, QueryList } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { McButton } from '@ptsecurity/mosaic/button';
+import { McIcon } from '@ptsecurity/mosaic/icon';
 import * as i0 from "@angular/core";
 /** Acceptable types for a button toggle. */
 export declare type ToggleType = 'checkbox' | 'radio';
@@ -102,15 +103,17 @@ export declare class McButtonToggleGroup implements ControlValueAccessor, OnInit
     static ɵdir: i0.ɵɵDirectiveDeclaration<McButtonToggleGroup, "mc-button-toggle-group", ["mcButtonToggleGroup"], { "vertical": "vertical"; "value": "value"; "multiple": "multiple"; "disabled": "disabled"; }, { "valueChange": "valueChange"; "change": "change"; }, ["buttonToggles"], never, false, never>;
 }
 /** Single button inside of a toggle group. */
-export declare class McButtonToggle implements OnInit, OnDestroy {
+export declare class McButtonToggle implements OnInit, AfterContentInit, OnDestroy {
     buttonToggleGroup: McButtonToggleGroup;
     private changeDetectorRef;
     private focusMonitor;
     private element;
+    icons: QueryList<McIcon>;
     /** Whether the button is checked. */
     get checked(): boolean;
     set checked(value: boolean);
     type: ToggleType;
+    iconType: string;
     mcButton: McButton;
     /** McButtonToggleGroup reads this to assign its own value. */
     value: any;
@@ -125,6 +128,7 @@ export declare class McButtonToggle implements OnInit, OnDestroy {
     private _disabled;
     constructor(buttonToggleGroup: McButtonToggleGroup, changeDetectorRef: ChangeDetectorRef, focusMonitor: FocusMonitor, element: ElementRef);
     ngOnInit(): void;
+    ngAfterContentInit(): void;
     ngOnDestroy(): void;
     /** Focuses the button. */
     focus(): void;
@@ -137,5 +141,5 @@ export declare class McButtonToggle implements OnInit, OnDestroy {
      */
     markForCheck(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<McButtonToggle, [{ optional: true; }, null, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McButtonToggle, "mc-button-toggle", ["mcButtonToggle"], { "checked": "checked"; "value": "value"; "tabIndex": "tabIndex"; "disabled": "disabled"; }, { "change": "change"; }, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McButtonToggle, "mc-button-toggle", ["mcButtonToggle"], { "checked": "checked"; "value": "value"; "tabIndex": "tabIndex"; "disabled": "disabled"; }, { "change": "change"; }, ["icons"], ["*"], false, never>;
 }

package/button-toggle/button-toggle.module.d.ts

@@ -2,8 +2,9 @@ import * as i0 from "@angular/core";
 import * as i1 from "./button-toggle.component";
 import * as i2 from "@ptsecurity/mosaic/core";
 import * as i3 from "@ptsecurity/mosaic/button";
+import * as i4 from "@ptsecurity/mosaic/title";
 export declare class McButtonToggleModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<McButtonToggleModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<McButtonToggleModule, [typeof i1.McButtonToggleGroup, typeof i1.McButtonToggle], [typeof i2.McCommonModule, typeof i3.McButtonModule], [typeof i2.McCommonModule, typeof i1.McButtonToggleGroup, typeof i1.McButtonToggle]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<McButtonToggleModule, [typeof i1.McButtonToggleGroup, typeof i1.McButtonToggle], [typeof i2.McCommonModule, typeof i3.McButtonModule, typeof i4.McTitleModule], [typeof i2.McCommonModule, typeof i1.McButtonToggleGroup, typeof i1.McButtonToggle]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<McButtonToggleModule>;
 }

package/button-toggle/button-toggle.scss

@@ -9,47 +9,89 @@
 $tokens: meta.module-variables(tokens) !default;
 
 .mc-button-toggle-group {
-    display: flex;
+    box-sizing: border-box;
+    display: inline-flex;
     flex-direction: row;
+    align-items: center;
+    gap: map.get($tokens, size-3xs);
+
+    border-width: var(
+        --mc-button-toggle-group-size-border-width,
+        map.get($tokens, button-toggle-group-size-border-width)
+    );
+    border-radius: var(
+        --mc-button-toggle-group-size-border-radius,
+        map.get($tokens, button-toggle-group-size-border-radius)
+    );
+    border-style: solid;
+    padding: var(
+        --mc-button-toggle-group-size-padding,
+        map.get($tokens, button-toggle-group-size-padding)
+    );
 
     .mc-button-toggle {
-        &:first-of-type:not(:last-of-type) {
-            > .mc-button,
-            > .mc-icon-button {
-                @include common.border-right-radius(
-                    var(
-                        --mc-button-toggle-size-border-siblings-radius,
-                        map.get($tokens, button-toggle-size-border-siblings-radius)
-                    )
-                );
-                @include common.border-left-radius(
-                    var(--mc-button-toggle-size-border-radius, map.get($tokens, button-toggle-size-border-radius))
-                );
+        display: flex;
+        overflow: hidden;
+        justify-content: flex-start;
+
+        border-radius: var(
+            --mc-button-toggle-size-border-radius,
+            map.get($tokens, button-toggle-size-border-radius)
+        );
+
+        > .mc-button,
+        > .mc-button-icon {
+            border: none;
+            border-width: var(
+                --mc-button-toggle-size-border-width,
+                map.get($tokens, button-toggle-size-border-width)
+            );
+            border-radius: var(
+                --mc-button-toggle-size-border-radius,
+                map.get($tokens, button-toggle-size-border-radius)
+            );
+            min-width: var(
+                --mc-button-toggle-size-min-width,
+                map.get($tokens, button-toggle-size-min-width)
+            );
+            padding-left: var(
+                --mc-button-toggle-size-horizontal-padding,
+                map.get($tokens, button-toggle-size-horizontal-padding)
+            );
+            padding-right: var(
+                --mc-button-toggle-size-horizontal-padding,
+                map.get($tokens, button-toggle-size-horizontal-padding)
+            );
+
+            & .mc-button-wrapper {
+                width: 100%;
             }
-        }
 
-        &:last-of-type:not(:first-of-type) {
-            > .mc-button,
-            > .mc-icon-button {
-                @include common.border-left-radius(
-                    var(
-                        --mc-button-toggle-size-border-siblings-radius,
-                        map.get($tokens, button-toggle-size-border-siblings-radius)
-                    )
-                );
-                @include common.border-right-radius(
-                    var(--mc-button-toggle-size-border-radius, map.get($tokens, button-toggle-size-border-radius))
-                );
+            .mc-button-toggle-wrapper {
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+                display: inline-block;
+                width: 100%;
+
+                .mc-icon {
+                    line-height: 20px;
+                    vertical-align: baseline;
+                }
             }
         }
 
-        &:not(:first-of-type):not(:last-of-type) {
+        &.mc-button-toggle-icon-text {
             > .mc-button,
-            > .mc-icon-button {
-                border-radius: var(
-                    --mc-button-toggle-size-border-siblings-radius,
-                    map.get($tokens, button-toggle-size-border-siblings-radius)
-                )
+            > .mc-button-icon {
+                padding-left: var(
+                    --mc-button-toggle-size-left-icon-padding,
+                    map.get($tokens, button-toggle-size-left-icon-padding)
+                );
+
+                & .mc-icon {
+                    margin-right: map.get($tokens, size-xxs);
+                }
             }
         }
 
@@ -59,10 +101,29 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     &:not(.mc-button-toggle_vertical) {
-        .mc-button-toggle:not([disabled]) + .mc-button-toggle:not([disabled]) {
-            margin-left:calc(
-                -1 * var(--mc-button-toggle-size-border-size, #{map.get($tokens, button-toggle-size-border-size)})
-            );
+        height: 32px;
+
+        .mc-button-toggle {
+            > .mc-button,
+            > .mc-button-icon {
+                height: 28px;
+                min-height: 28px;
+            }
+
+            &.mc-button-toggle-icon {
+                width: var(
+                    --mc-button-icon-toggle-size-width,
+                    map.get($tokens, icon-button-toggle-size-width)
+                );
+
+                > .mc-button,
+                > .mc-button-icon {
+                    width: var(
+                        --mc-button-icon-toggle-size-width,
+                        map.get($tokens, icon-button-toggle-size-width)
+                    );
+                }
+            }
         }
     }
 }
@@ -76,58 +137,25 @@ $tokens: meta.module-variables(tokens) !default;
         border-right: none;
     }
 
-    .mc-button-toggle:not([disabled]) + .mc-button-toggle:not([disabled]) {
-        margin-top: calc(
-            -1 * var(--mc-button-toggle-size-border-size, #{map.get($tokens, button-toggle-size-border-size)})
-        );
-    }
-
     .mc-button-toggle {
-        .mc-button,
-        .mc-icon-button {
-            width: 100%;
-        }
-
-        &:first-child:not(:last-child) {
-            > .mc-button,
-            > .mc-icon-button {
-                @include common.border-bottom-radius(
-                    var(
-                        --mc-button-toggle-size-border-siblings-radius,
-                        map.get($tokens, button-toggle-size-border-siblings-radius)
-                    )
-                );
-                @include common.border-top-radius(
-                    var(--mc-button-toggle-size-border-radius, map.get($tokens, button-toggle-size-border-radius)));
-            }
-        }
+        width: 100%;
 
-        &:last-child:not(:first-child) {
-            > .mc-button,
-            > .mc-icon-button {
-                @include common.border-top-radius(
-                    var(
-                        --mc-button-toggle-size-border-siblings-radius,
-                        map.get($tokens, button-toggle-size-border-siblings-radius)
-                    )
-                );
-
-                @include common.border-bottom-radius(
-                    var(--mc-button-toggle-size-border-radius, map.get($tokens, button-toggle-size-border-radius)));
-            }
-        }
+        > .mc-button,
+        > .mc-button-icon {
+            width: 100%;
+            border-width: var(
+                --mc-button-toggle-size-border-width,
+                map.get($tokens, button-toggle-size-border-width)
+            );
 
-        &:not(:first-child):not(:last-child) {
-            > .mc-button,
-            > .mc-icon-button {
-                border-radius: var(
-                    --mc-button-toggle-size-border-siblings-radius,
-                    map.get($tokens, button-toggle-size-border-siblings-radius)
-                )
-            }
+            border-radius: var(
+                --mc-button-toggle-size-border-radius,
+                map.get($tokens, button-toggle-size-border-radius)
+            );
         }
     }
 }
+
 /* stylelint-enable no-descending-specificity */
 
 .mc-button-toggle-standalone {