@ptsecurity/mosaic 16.1.1 → 16.2.0

package/_theming.scss

@@ -3471,6 +3471,123 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
 }
 
 
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../styles/common/vendor-prefixes';
+@use '../styles/typography/typography' as *;
+@use '../styles/typography/typography-utils' as *;
+
+@mixin mc-form-geometry($tokens) {
+    .mc-form {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .mc-form__row {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .mc-form-horizontal {
+        $config: mc-typography-config($tokens);
+
+        $line-height: mc-line-height($config, body);
+
+        $form-field-size-height: map.get($tokens, form-field-size-height);
+
+        $label-padding-top: calc(($form-field-size-height - $line-height) / 2);
+
+        & .mc-form-row_margin {
+            margin-bottom: var(
+                --mc-forms-size-horizontal-row-margin-bottom,
+                #{map.get($tokens, forms-size-horizontal-row-margin-bottom)}
+            );
+        }
+
+        & .mc-form__label {
+            padding-top: var(--mc-forms-size-horizontal-label-padding-top, #{$label-padding-top});
+
+            text-align: start;
+        }
+
+        & .mc-form__control {
+            padding-left: var(
+                --mc-forms-size-horizontal-control-padding-left,
+                #{map.get($tokens, forms-size-horizontal-control-padding-left)}
+            );
+        }
+
+        & .mc-form__legend {
+            margin-top: var(
+                --mc-forms-size-horizontal-legend-margin-top,
+                #{map.get($tokens, forms-size-horizontal-legend-margin-top)}
+            );
+            margin-bottom: var(
+                --mc-forms-size-horizontal-legend-margin-bottom,
+                #{map.get($tokens, forms-size-horizontal-legend-margin-bottom)}
+            );
+        }
+    }
+
+    .mc-form-vertical {
+        & .mc-form__row {
+            flex-direction: column;
+        }
+
+        & .mc-form-row_margin {
+            margin-bottom: var(
+                --mc-forms-size-vertical-row-margin-bottom,
+                #{map.get($tokens, forms-size-vertical-row-margin-bottom)}
+            );
+        }
+
+        & .mc-form__label {
+            padding-top: var(
+                --mc-forms-size-vertical-label-padding-top,
+                #{map.get($tokens, forms-size-vertical-label-padding-top)}
+            );
+            padding-bottom: var(
+                --mc-forms-size-vertical-label-padding-bottom,
+                #{map.get($tokens, forms-size-vertical-label-padding-bottom)}
+            );
+
+            text-align: start;
+        }
+
+        & .mc-form__control {
+            padding-left: 0;
+        }
+
+        & .mc-form__legend {
+            margin-top: var(
+                --mc-forms-size-vertical-legend-margin-top,
+                #{map.get($tokens, forms-size-vertical-legend-margin-top)}
+            );
+            margin-bottom: var(
+                --mc-forms-size-vertical-legend-margin-bottom,
+                #{map.get($tokens, forms-size-vertical-legend-margin-bottom)}
+            );
+        }
+    }
+
+    .mc-form__fieldset {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .mc-form__fieldset.mc-horizontal {
+        flex-direction: row;
+
+        & .mc-form__row:not(:first-child) {
+            padding-left: var(
+                --mc-forms-size-vertical-control-padding-left,
+                #{map.get($tokens, forms-size-vertical-control-padding-left)}
+            );
+        }
+    }
+}
+
 
 
 // Mixin that renders all of the core styles that are not theme-dependent.
@@ -9832,10 +9949,18 @@ button {
 @mixin mc-toggle-typography($config) {
     .mc-toggle:not(.mc-toggle_small) {
         @include mc-typography-level-to-styles($config, $toggle-font-default);
+
+        .mc-toggle-bar-outer-container {
+            height: mc-line-height($config, $toggle-font-default);
+        }
     }
 
     .mc-toggle.mc-toggle_small {
         @include mc-typography-level-to-styles($config, $toggle-small-font-default);
+
+        .mc-toggle-bar-outer-container {
+            height: mc-line-height($config, $toggle-small-font-default);
+        }
     }
 }
 
@@ -10244,8 +10369,109 @@ button {
 
 
 
+@mixin mc-form-geometry() {
+    .mc-form {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .mc-form__row {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .mc-form-horizontal {
+        $config: mc-typography-config();
+
+        $line-height: mc-line-height($config, body);
+
+        $label-padding-top: calc(($form-field-size-height - $line-height) / 2);
+
+        & .mc-form-row_margin {
+            margin-bottom: var(
+                --mc-forms-size-horizontal-row-margin-bottom, $forms-size-horizontal-row-margin-bottom
+            );
+        }
+
+        & .mc-form__label {
+            padding-top: var(--mc-forms-size-horizontal-label-padding-top, $label-padding-top);
+
+            text-align: start;
+        }
+
+        & .mc-form__control {
+            padding-left: var(
+                --mc-forms-size-horizontal-control-padding-left,
+                $forms-size-horizontal-control-padding-left
+            );
+        }
+
+        & .mc-form__legend {
+            margin-top: var(
+                --mc-forms-size-horizontal-legend-margin-top, $forms-size-horizontal-legend-margin-top
+            );
+            margin-bottom: var(
+                --mc-forms-size-horizontal-legend-margin-bottom,
+                $forms-size-horizontal-legend-margin-bottom
+            );
+        }
+    }
+
+    .mc-form-vertical {
+        & .mc-form__row {
+            flex-direction: column;
+        }
+
+        & .mc-form-row_margin {
+            margin-bottom: var(
+                --mc-forms-size-vertical-row-margin-bottom, $forms-size-vertical-row-margin-bottom
+            );
+        }
+
+        & .mc-form__label {
+            padding-top: var(
+                --mc-forms-size-vertical-label-padding-top, $forms-size-vertical-label-padding-top
+            );
+            padding-bottom: var(
+                --mc-forms-size-vertical-label-padding-bottom, $forms-size-vertical-label-padding-bottom
+            );
+
+            text-align: start;
+        }
+
+        & .mc-form__control {
+            padding-left: 0;
+        }
+
+        & .mc-form__legend {
+            margin-top: var(
+                --mc-forms-size-vertical-legend-margin-top, $forms-size-vertical-legend-margin-top
+            );
+            margin-bottom: var(
+                --mc-forms-size-vertical-legend-margin-bottom, $forms-size-vertical-legend-margin-bottom
+            );
+        }
+    }
+
+    .mc-form__fieldset {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .mc-form__fieldset.mc-horizontal {
+        flex-direction: row;
+
+        & .mc-form__row:not(:first-child) {
+            padding-left: var(
+                --mc-forms-size-vertical-control-padding-left, $forms-size-vertical-control-padding-left
+            );
+        }
+    }
+}
 
 @mixin mc-forms-theme($theme) {
+    @include mc-form-geometry();
+
     $foreground: map-get($theme, foreground);
 
     $forms: map-get(map-get($theme, components), forms);

package/core/forms/_forms-theme.scss

@@ -3,7 +3,11 @@
 
 @use '../styles/typography' as *;
 
+@use './forms' as *;
+
 @mixin mc-forms-theme($theme) {
+    @include mc-form-geometry(map.get($theme, tokens));
+
     $foreground: map.get($theme, foreground);
 
     $forms: map.get(map.get($theme, components), forms);

package/core/forms/_forms.scss

@@ -4,106 +4,113 @@
 @use '../styles/common/vendor-prefixes';
 @use '../styles/typography/typography' as *;
 @use '../styles/typography/typography-utils' as *;
-@use '../styles/tokens';
 
-$tokens: meta.module-variables(tokens) !default;
-
-.mc-form {
-    display: flex;
-    flex-direction: column;
-}
-
-.mc-form__row {
-    display: flex;
-    flex-direction: row;
-}
-
-.mc-form-horizontal {
-    $config: mc-typography-config($tokens);
-
-    $line-height: mc-line-height($config, body);
-
-    $form-field-size-height: map.get($tokens, form-field-size-height);
-
-    $label-padding-top: calc(($form-field-size-height - $line-height) / 2);
-
-    & .mc-form-row_margin {
-        margin-bottom: var(
-            --mc-forms-size-horizontal-row-margin-bottom, #{map.get($tokens, forms-size-horizontal-row-margin-bottom)}
-        );
-    }
-
-    & .mc-form__label {
-        padding-top: var(--mc-forms-size-horizontal-label-padding-top, #{$label-padding-top});
-
-        text-align: start;
-    }
-
-    & .mc-form__control {
-        padding-left: var(
-            --mc-forms-size-horizontal-control-padding-left,
-            #{map.get($tokens, forms-size-horizontal-control-padding-left)}
-        );
-    }
-
-    & .mc-form__legend {
-        margin-top: var(
-            --mc-forms-size-horizontal-legend-margin-top, #{map.get($tokens, forms-size-horizontal-legend-margin-top)}
-        );
-        margin-bottom: var(
-            --mc-forms-size-horizontal-legend-margin-bottom,
-            #{map.get($tokens, forms-size-horizontal-legend-margin-bottom)}
-        );
-    }
-}
-
-.mc-form-vertical {
-    & .mc-form__row {
+@mixin mc-form-geometry($tokens) {
+    .mc-form {
+        display: flex;
         flex-direction: column;
     }
 
-    & .mc-form-row_margin {
-        margin-bottom: var(
-            --mc-forms-size-vertical-row-margin-bottom, #{map.get($tokens, forms-size-vertical-row-margin-bottom)}
-        );
+    .mc-form__row {
+        display: flex;
+        flex-direction: row;
     }
 
-    & .mc-form__label {
-        padding-top: var(
-            --mc-forms-size-vertical-label-padding-top, #{map.get($tokens, forms-size-vertical-label-padding-top)}
-        );
-        padding-bottom: var(
-            --mc-forms-size-vertical-label-padding-bottom, #{map.get($tokens, forms-size-vertical-label-padding-bottom)}
-        );
-
-        text-align: start;
+    .mc-form-horizontal {
+        $config: mc-typography-config($tokens);
+
+        $line-height: mc-line-height($config, body);
+
+        $form-field-size-height: map.get($tokens, form-field-size-height);
+
+        $label-padding-top: calc(($form-field-size-height - $line-height) / 2);
+
+        & .mc-form-row_margin {
+            margin-bottom: var(
+                --mc-forms-size-horizontal-row-margin-bottom,
+                #{map.get($tokens, forms-size-horizontal-row-margin-bottom)}
+            );
+        }
+
+        & .mc-form__label {
+            padding-top: var(--mc-forms-size-horizontal-label-padding-top, #{$label-padding-top});
+
+            text-align: start;
+        }
+
+        & .mc-form__control {
+            padding-left: var(
+                --mc-forms-size-horizontal-control-padding-left,
+                #{map.get($tokens, forms-size-horizontal-control-padding-left)}
+            );
+        }
+
+        & .mc-form__legend {
+            margin-top: var(
+                --mc-forms-size-horizontal-legend-margin-top,
+                #{map.get($tokens, forms-size-horizontal-legend-margin-top)}
+            );
+            margin-bottom: var(
+                --mc-forms-size-horizontal-legend-margin-bottom,
+                #{map.get($tokens, forms-size-horizontal-legend-margin-bottom)}
+            );
+        }
     }
 
-    & .mc-form__control {
-        padding-left: 0;
+    .mc-form-vertical {
+        & .mc-form__row {
+            flex-direction: column;
+        }
+
+        & .mc-form-row_margin {
+            margin-bottom: var(
+                --mc-forms-size-vertical-row-margin-bottom,
+                #{map.get($tokens, forms-size-vertical-row-margin-bottom)}
+            );
+        }
+
+        & .mc-form__label {
+            padding-top: var(
+                --mc-forms-size-vertical-label-padding-top,
+                #{map.get($tokens, forms-size-vertical-label-padding-top)}
+            );
+            padding-bottom: var(
+                --mc-forms-size-vertical-label-padding-bottom,
+                #{map.get($tokens, forms-size-vertical-label-padding-bottom)}
+            );
+
+            text-align: start;
+        }
+
+        & .mc-form__control {
+            padding-left: 0;
+        }
+
+        & .mc-form__legend {
+            margin-top: var(
+                --mc-forms-size-vertical-legend-margin-top,
+                #{map.get($tokens, forms-size-vertical-legend-margin-top)}
+            );
+            margin-bottom: var(
+                --mc-forms-size-vertical-legend-margin-bottom,
+                #{map.get($tokens, forms-size-vertical-legend-margin-bottom)}
+            );
+        }
     }
 
-    & .mc-form__legend {
-        margin-top: var(
-            --mc-forms-size-vertical-legend-margin-top, #{map.get($tokens, forms-size-vertical-legend-margin-top)}
-        );
-        margin-bottom: var(
-            --mc-forms-size-vertical-legend-margin-bottom, #{map.get($tokens, forms-size-vertical-legend-margin-bottom)}
-        );
+    .mc-form__fieldset {
+        display: flex;
+        flex-direction: column;
     }
-}
-
-.mc-form__fieldset {
-    display: flex;
-    flex-direction: column;
-}
 
-.mc-form__fieldset.mc-horizontal {
-    flex-direction: row;
+    .mc-form__fieldset.mc-horizontal {
+        flex-direction: row;
 
-    & .mc-form__row:not(:first-child) {
-        padding-left: var(
-            --mc-forms-size-vertical-control-padding-left, #{map.get($tokens, forms-size-vertical-control-padding-left)}
-        );
+        & .mc-form__row:not(:first-child) {
+            padding-left: var(
+                --mc-forms-size-vertical-control-padding-left,
+                #{map.get($tokens, forms-size-vertical-control-padding-left)}
+            );
+        }
     }
 }

package/core/pop-up/pop-up.d.ts

@@ -7,6 +7,9 @@ export declare abstract class McPopUp implements OnDestroy {
     private changeDetectorRef;
     header: string | TemplateRef<any>;
     content: string | TemplateRef<any>;
+    context: {
+        $implicit: any;
+    } | null;
     classMap: {};
     warning: boolean;
     visibility: PopUpVisibility;

package/core/styles/_core.scss

@@ -3,7 +3,6 @@
 @use 'common/overlay' as *;
 @use 'common/visually-hidden' as *;
 
-
 // Mixin that renders all of the core styles that are not theme-dependent.
 @mixin mc-core() {
     @include a11y-visually-hidden();