@ptsecurity/mosaic 14.7.1 → 15.0.0

package/button/_button-theme.scss

@@ -0,0 +1,154 @@
+@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-color($params) {
+    color: map.get($params, color);
+    border-color: map.get($params, border);
+    background: map.get($params, background);
+
+    .mc-icon {
+        color: map.get($params, icon);
+    }
+
+    &:active:not([disabled]),
+    &.mc-active:not([disabled]) {
+        border-color: map.get($params, active_border);
+        background: map.get($params, active_background);
+    }
+
+}
+
+@mixin mc-button_transparent($theme) {
+    $background: map.get($theme, background);
+
+    border-color: transparent;
+    background-color: transparent;
+
+    &:hover:not([disabled]) {
+        background-color: map.get($background, overlay-hover);
+
+        & .mc-button-overlay {
+            background-color: transparent;
+        }
+    }
+
+    &:active:not([disabled]),
+    &.mc-active:not([disabled]) {
+        border-color: transparent;
+        background-color: map.get($background, overlay-active);
+        box-shadow: none;
+
+        & .mc-button-overlay {
+            background-color: transparent;
+        }
+    }
+
+    &.mc-disabled,
+    &[disabled] {
+        border-color: transparent;
+    }
+}
+
+@mixin mc-button-theme($theme) {
+    $background: map.get($theme, background);
+    $primary: map.get($theme, primary);
+
+    $button: map.get(map.get($theme, components), button);
+
+    .mc-button-overlay {
+        background: transparent;
+    }
+
+    .mc-button,
+    .mc-icon-button {
+        -webkit-font-smoothing: antialiased;
+
+        &.mc-primary {
+            @include mc-button-color(map.get($button, primary));
+
+            &.mc-button_transparent {
+                @include mc-button_transparent($theme);
+
+                $primary_transparent: map.get($button, primary_transparent);
+
+                color: map.get($primary_transparent, color);
+
+                & .mc-icon {
+                    color: map.get($primary_transparent, icon);
+                }
+            }
+        }
+
+        &.mc-secondary {
+            @include mc-button-color(map.get($button, secondary));
+
+            &.mc-button_transparent {
+                @include mc-button_transparent($theme);
+            }
+        }
+
+        &.mc-error {
+            @include mc-button-color(map.get($button, error));
+
+            &.mc-button_transparent {
+                @include mc-button_transparent($theme);
+            }
+        }
+
+        &:hover:not([disabled]) {
+            & .mc-button-overlay {
+                background: map.get($background, overlay-hover);
+            }
+        }
+
+        &:active:not([disabled]),
+        &.mc-active:not([disabled]) {
+            box-shadow: map.get($button, active-shadow);
+        }
+
+        &.mc-primary,
+        &.mc-secondary,
+        &.mc-error {
+            &.cdk-keyboard-focused {
+                border-color: map.get(map.get($theme, states), focused-color);
+                box-shadow:
+                    inset 0 0 0 1px map.get($background, background),
+                    0 0 0 1px map.get(map.get($theme, states), focused-color);
+            }
+        }
+
+        &.mc-disabled,
+        &[disabled] {
+            opacity: map.get(map.get($theme, states), disabled-opacity);
+        }
+    }
+}
+
+@mixin mc-button-typography($config) {
+    .mc-button,
+    .mc-icon-button {
+        @include mc-typography-level-to-styles($config, map.get($tokens, button-font-default));
+
+        &.mc-primary {
+            @include mc-typography-level-to-styles($config, map.get($tokens, button-font-primary));
+        }
+
+        &.mc-primary.mc-button_transparent {
+            @include mc-typography-level-to-styles($config, map.get($tokens, button-font-primary-transparent));
+        }
+    }
+
+    .mc-icon-button.mc-button-wrapper {
+        .mc-icon {
+            line-height: mc-line-height($config, body);
+        }
+    }
+}
+

package/button/button.component.d.ts

@@ -12,7 +12,7 @@ export declare class McButtonCssStyler implements AfterContentInit {
     ngAfterContentInit(): void;
     updateClassModifierForIcons(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<McButtonCssStyler, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McButtonCssStyler, "[mc-button]", never, {}, {}, ["icons"], never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McButtonCssStyler, "[mc-button]", never, {}, {}, ["icons"], never, false, never>;
 }
 /** @docs-private */
 export declare class McButtonBase {
@@ -38,5 +38,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>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McButton, "[mc-button]", never, { "color": "color"; "tabIndex": "tabIndex"; "disabled": "disabled"; }, {}, never, ["*"], false, never>;
 }

package/button/button.scss

@@ -0,0 +1,45 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use 'button-base' as *;
+
+@use '../core/styles/tokens';
+
+
+$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));
+}
+
+.mc-light-button {
+    @extend %mc-button-base;
+}
+
+.mc-icon-button {
+    @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-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-size-border-width, map.get($tokens, button-size-border-width))
+    );
+}
+
+.mc-button-overlay {
+    position: absolute;
+
+    top: -#{map.get($tokens, button-size-border-width)};
+    left: -#{map.get($tokens, button-size-border-width)};
+    right: -#{map.get($tokens, button-size-border-width)};
+    bottom: -#{map.get($tokens, button-size-border-width)};
+
+    border-radius: inherit;
+}

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

@@ -99,7 +99,7 @@ export declare class McButtonToggleGroup implements ControlValueAccessor, OnInit
     /** Selects a value if there's a toggle that corresponds to it. */
     private selectValue;
     static ɵfac: i0.ɵɵFactoryDeclaration<McButtonToggleGroup, never>;
-    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>;
+    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 {
@@ -137,5 +137,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>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McButtonToggle, "mc-button-toggle", ["mcButtonToggle"], { "checked": "checked"; "value": "value"; "tabIndex": "tabIndex"; "disabled": "disabled"; }, { "change": "change"; }, never, ["*"], false, never>;
 }

package/button-toggle/button-toggle.scss

@@ -0,0 +1,135 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/common';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.mc-button-toggle-group {
+    display: flex;
+    flex-direction: row;
+
+    .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))
+                );
+            }
+        }
+
+        &: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))
+                );
+            }
+        }
+
+        &:not(:first-of-type):not(:last-of-type) {
+            > .mc-button,
+            > .mc-icon-button {
+                border-radius: var(
+                    --mc-button-toggle-size-border-siblings-radius,
+                    map.get($tokens, button-toggle-size-border-siblings-radius)
+                )
+            }
+        }
+
+        &[disabled] {
+            outline: 0;
+        }
+    }
+
+    &: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)})
+            );
+        }
+    }
+}
+
+/* stylelint-disable no-descending-specificity */
+.mc-button-toggle_vertical {
+    flex-direction: column;
+
+    .mc-button-toggle + .mc-button-toggle {
+        border-left: none;
+        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)));
+            }
+        }
+
+        &: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)));
+            }
+        }
+
+        &: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)
+                )
+            }
+        }
+    }
+}
+/* stylelint-enable no-descending-specificity */
+
+.mc-button-toggle-standalone {
+    box-shadow: none;
+}

package/card/_card-theme.scss

@@ -0,0 +1,61 @@
+@use 'sass:map';
+
+
+@mixin card-type($card) {
+    box-shadow:
+        inset -1px 0 0 0 map.get($card, shadow),
+        inset 0 1px 0 0 map.get($card, shadow),
+        inset 0 -1px 0 0 map.get($card, shadow);
+
+    background-color: map.get($card, background);
+
+    border-left-color: map.get($card, vertical-line);
+}
+
+@mixin mc-card-theme($theme) {
+    $foreground: map.get($theme, foreground);
+    $background: map.get($theme, background);
+
+    $card: map.get(map.get($theme, components), card);
+    $popup: map.get(map.get($theme, components), popup);
+
+    $is-dark: map.get($theme, is-dark);
+
+    .mc-card {
+        color: map.get($foreground, text);
+
+        &.mc-card_error {
+            @include card-type(map.get($card, error));
+        }
+
+        &.mc-card_warning {
+            @include card-type(map.get($card, warning));
+        }
+
+        &.mc-card_success {
+            @include card-type(map.get($card, success));
+        }
+
+        &.mc-card_info {
+            @include card-type(map.get($card, info));
+        }
+
+        &.mc-card_white {
+            background-color: map.get($popup, background);
+        }
+
+        &.mc-selected {
+            background-color: map.get(map.get($theme, states), selected-color);
+        }
+
+        &:not(.mc-card_readonly):hover {
+            .mc-card__overlay {
+                background: map.get($background, overlay-hover);
+            }
+        }
+
+        &.cdk-keyboard-focused {
+            box-shadow: 0 0 0 2px map.get(map.get($theme, states), focused-color);
+        }
+    }
+}

package/card/card.component.d.ts

@@ -24,5 +24,5 @@ export declare class McCard extends McCardBaseMixin implements OnDestroy {
     onKeyDown($event: KeyboardEvent): void;
     private get hostElement();
     static ɵfac: i0.ɵɵFactoryDeclaration<McCard, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McCard, "mc-card", never, { "color": "color"; "readonly": "readonly"; "selected": "selected"; "tabIndex": "tabIndex"; }, { "selectedChange": "selectedChange"; }, never, ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McCard, "mc-card", never, { "color": "color"; "readonly": "readonly"; "selected": "selected"; "tabIndex": "tabIndex"; }, { "selectedChange": "selectedChange"; }, never, ["*"], false, never>;
 }

package/card/card.component.scss

@@ -0,0 +1,40 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/common/layout';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.mc-card {
+    position: relative;
+    box-sizing: border-box;
+
+    display: flex;
+    flex-direction: column;
+
+    cursor: pointer;
+
+    &:focus {
+        outline: none;
+    }
+
+    border-left: {
+        width: var(--mc-card-size-vertical-line, map.get($tokens, card-size-vertical-line));
+        style: solid;
+        color: transparent;
+    };
+
+    & .mc-card__overlay {
+        @include layout.mc-fill;
+        pointer-events: none;
+
+        background: transparent;
+    }
+
+    &.mc-card_readonly {
+        cursor: auto;
+    }
+}

package/checkbox/_checkbox-theme.scss

@@ -0,0 +1,103 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+/* stylelint-disable no-descending-specificity */
+@mixin mc-checkbox-color($states) {
+    & .mc-checkbox-frame {
+        background-color: map.get($states, background);
+
+        border-color: map.get($states, border);
+
+        & .mc-checkbox-checkmark,
+        & .mc-checkbox-mixedmark {
+            color: map.get($states, color);
+        }
+    }
+
+    &.mc-checked,
+    &.mc-indeterminate {
+        & .mc-checkbox-frame {
+            border-color: map.get($states, checked, border);
+
+            background: map.get($states, checked, background);
+        }
+
+        & .mc-checkbox-input.cdk-keyboard-focused {
+            + .mc-checkbox-frame {
+                border-color: map.get($states, checked-focused, border);
+
+                box-shadow: map.get($states, checked-focused, shadow);
+
+                background: map.get($states, checked-focused, background);
+
+                outline: map.get($states, checked-focused, outline);
+
+                outline-offset: -2px;
+            }
+        }
+    }
+
+    & .mc-checkbox-input.cdk-keyboard-focused {
+        + .mc-checkbox-frame {
+            border-color: map.get($states, focused, border);
+
+            box-shadow: map.get($states, focused, shadow);
+        }
+    }
+}
+/* stylelint-enable no-descending-specificity */
+
+@mixin mc-checkbox-theme($theme) {
+    $foreground: map.get($theme, foreground);
+    $background: map.get($theme, background);
+
+    $checkbox: map.get(map.get($theme, components), checkbox);
+
+    .mc-checkbox {
+        &:not(.mc-disabled) {
+            .mc-checkbox-overlay:hover {
+                background-color: map.get($background, overlay-hover);
+            }
+        }
+
+        &.mc-primary {
+            color: map.get($foreground, primary);
+            @include mc-checkbox-color(map.get($checkbox, default));
+        }
+
+        &.mc-error {
+            color: map.get($foreground, error);
+            @include mc-checkbox-color(map.get($checkbox, error));
+        }
+
+        &.mc-disabled,
+        &.mc-primary.mc-disabled,
+        &.mc-error.mc-disabled {
+            color: map.get($foreground, text-disabled);
+
+            .mc-checkbox-frame {
+                border-color: map.get($foreground, border);
+
+                background-color: map.get($background, background-disabled);
+
+                & .mc-checkbox-checkmark,
+                & .mc-checkbox-mixedmark {
+                    color: map.get($foreground, text-disabled);
+                }
+            }
+        }
+    }
+}
+
+@mixin mc-checkbox-typography($config) {
+    .mc-checkbox {
+        @include mc-typography-level-to-styles($config, map.get($tokens, checkbox-font-default));
+    }
+}

package/checkbox/checkbox-required-validator.d.ts

@@ -9,5 +9,5 @@ export declare const MC_CHECKBOX_REQUIRED_VALIDATOR: Provider;
  */
 export declare class McCheckboxRequiredValidator extends CheckboxRequiredValidator {
     static ɵfac: i0.ɵɵFactoryDeclaration<McCheckboxRequiredValidator, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McCheckboxRequiredValidator, "mc-checkbox[required][formControlName],             mc-checkbox[required][formControl], mc-checkbox[required][ngModel]", never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McCheckboxRequiredValidator, "mc-checkbox[required][formControlName],             mc-checkbox[required][formControl], mc-checkbox[required][ngModel]", never, {}, {}, never, never, false, never>;
 }

package/checkbox/checkbox.d.ts

@@ -128,5 +128,5 @@ export declare class McCheckbox extends McCheckboxMixinBase implements ControlVa
     /** Function is called whenever the focus changes for the input element. */
     private onInputFocusChange;
     static ɵfac: i0.ɵɵFactoryDeclaration<McCheckbox, [null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McCheckbox, "mc-checkbox", ["mcCheckbox"], { "color": "color"; "tabIndex": "tabIndex"; "id": "id"; "labelPosition": "labelPosition"; "name": "name"; "value": "value"; "required": "required"; "checked": "checked"; "disabled": "disabled"; "indeterminate": "indeterminate"; }, { "change": "change"; "indeterminateChange": "indeterminateChange"; }, never, ["*", "mc-hint"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McCheckbox, "mc-checkbox", ["mcCheckbox"], { "color": "color"; "tabIndex": "tabIndex"; "id": "id"; "labelPosition": "labelPosition"; "name": "name"; "value": "value"; "required": "required"; "checked": "checked"; "disabled": "disabled"; "indeterminate": "indeterminate"; }, { "change": "change"; "indeterminateChange": "indeterminateChange"; }, never, ["*", "mc-hint"], false, never>;
 }