@ptsecurity/mosaic 15.5.0 → 16.0.0

package/_theming.scss

@@ -139,6 +139,7 @@ $light-color-scheme-foreground-text: #19252f;
 $light-color-scheme-foreground-text-less-contrast: #6d7a86;
 $light-color-scheme-foreground-text-disabled: #8c99a5;
 $light-color-scheme-foreground-text-error: #db3c55;
+$light-color-scheme-foreground-text-warning: #a26e0c;
 $light-color-scheme-foreground-text-success: #016b37;
 $light-color-scheme-foreground-divider: #d7dee4;
 $light-color-scheme-foreground-border: #bdc7d1;
@@ -165,6 +166,7 @@ $dark-color-scheme-foreground-text: #d7dee4;
 $dark-color-scheme-foreground-text-less-contrast: #8c99a5;
 $dark-color-scheme-foreground-text-disabled: #6d7a86;
 $dark-color-scheme-foreground-text-error: #ee6f79;
+$dark-color-scheme-foreground-text-warning: #e19f12;
 $dark-color-scheme-foreground-text-success: #4ba96c;
 $dark-color-scheme-foreground-divider: mix(#515e69, transparent, 50%);
 $dark-color-scheme-foreground-border: #515e69;
@@ -1311,7 +1313,7 @@ $list-light-color-scheme-footer-background: white;
 $list-light-color-scheme-footer-divider: #d7dee4;
 $list-dark-color-scheme-footer-background: #19252f;
 $list-dark-color-scheme-footer-divider: mix(#515e69, transparent, 50%);
-$list-size-horizontal-padding: 12px;
+$list-size-horizontal-padding: 10px;
 $list-size-icon-right-margin: 8px;
 $list-size-item-height: 32px;
 $list-size-footer-min-height: 48px;
@@ -1514,9 +1516,9 @@ $navbar-item-size-height-vertical: 56px;
 $navbar-brand-size-padding: 12px;
 $navbar-brand-size-margin-right: 24px;
 $navbar-brand-font-title: title;
-$optgroup-size-padding-left: 17px;
+$optgroup-size-padding-left: 12px;
 $optgroup-font-default: subheading;
-$option-size-horizontal-padding: 12px;
+$option-size-horizontal-padding: 10px;
 $option-size-height: 32px;
 $option-size-border-width: 2px;
 $option-font-default: body;
@@ -1761,7 +1763,7 @@ $timezone-option-light-color-scheme-text: #19252f;
 $timezone-option-light-color-scheme-caption: #6d7a86;
 $timezone-option-dark-color-scheme-text: #d7dee4;
 $timezone-option-dark-color-scheme-caption: #8c99a5;
-$timezone-option-size-padding: 6px 8px 6px 14px;
+$timezone-option-size-padding: 6px 10px;
 $timezone-option-size-column-gap: 16px;
 $timezone-option-size-height: auto;
 $timezone-option-size-max-height: 4em;
@@ -6020,6 +6022,7 @@ $light-warning: mc-palette($light-color-scheme-warning-palette, $light-color-sch
         text-disabled: $light-color-scheme-foreground-text-disabled,
         text-error: $light-color-scheme-foreground-text-error,
         text-success: $light-color-scheme-foreground-text-success,
+        text-warning: $light-color-scheme-foreground-text-warning,
 
         divider: $light-color-scheme-foreground-divider,
         border: $light-color-scheme-foreground-border,
@@ -6097,6 +6100,7 @@ $dark-warning: mc-palette($dark-color-scheme-warning-palette, $dark-color-scheme
         text-disabled: $dark-color-scheme-foreground-text-disabled,
         text-error: $dark-color-scheme-foreground-text-error,
         text-success: $dark-color-scheme-foreground-text-success,
+        text-warning: $dark-color-scheme-foreground-text-warning,
 
         divider: $dark-color-scheme-foreground-divider,
         border: $dark-color-scheme-foreground-border,
@@ -6140,6 +6144,8 @@ $dark-warning: mc-palette($dark-color-scheme-warning-palette, $dark-color-scheme
         text-disabled: map-get($tokens, '#{$scheme}-foreground-text-disabled'),
         text-error: map-get($tokens, '#{$scheme}-foreground-text-error'),
         text-success: map-get($tokens, '#{$scheme}-foreground-text-success'),
+        text-warning: map-get($tokens, '#{$scheme}-foreground-text-warning'),
+
 
         divider: map-get($tokens, '#{$scheme}-foreground-divider'),
         border: map-get($tokens, '#{$scheme}-foreground-border'),
@@ -7155,6 +7161,7 @@ $dark-warning: mc-palette($dark-color-scheme-warning-palette, $dark-color-scheme
             > .mc-icon-button {
                 color: map-get($button-toggle, color);
                 border-color: map-get($button-toggle-group, border);
+                background: inherit;
 
                 & .mc-icon {
                     color: map-get($button-toggle, icon);
@@ -7334,6 +7341,10 @@ $dark-warning: mc-palette($dark-color-scheme-warning-palette, $dark-color-scheme
             }
         }
 
+        & .mc-hint {
+            color: map-get($foreground, text-less-contrast);
+        }
+
         &.mc-primary {
             @include mc-checkbox-color(map-get($checkbox, default));
 
@@ -7992,6 +8003,10 @@ $mc-datepicker-today-fade-amount: 0.2;
             color: map-get($hint, text-color);
         }
 
+        &.mc-warning {
+            color: map-get($foreground, text-warning);
+        }
+
         &.mc-error {
             color: map-get($foreground, text-error);
         }
@@ -8029,7 +8044,7 @@ $mc-datepicker-today-fade-amount: 0.2;
         @include mc-typography-level-to-styles($config, $form-field-font-default);
     }
 
-    .mc-form-field__hint {
+    .mc-form-field__hint, .mc-password-hint {
         @include mc-typography-level-to-styles($config, $form-field-hint-font-default);
     }
 
@@ -8238,9 +8253,13 @@ $mc-datepicker-today-fade-amount: 0.2;
     }
 
     .mc-input.mc-input_monospace,
-    .mc-input.mc-input-password[type="password"] {
+    .mc-input.mc-input-password {
         @include mc-typography-level-to-styles($config, $input-font-monospace);
     }
+
+    .mc-input.mc-input-password::placeholder {
+        @include mc-typography-level-to-styles($config, $input-font-default);
+    }
 }
 
 
@@ -9022,6 +9041,10 @@ button {
     }
 
     .mc-radio-button {
+        & .mc-hint {
+            color: map-get($foreground, text-less-contrast);
+        }
+
         & .mc-radio-button__outer-circle {
             border-color: map-get($radio, outer-circle_border);
             background: map-get($background, background);

package/_visual.scss

@@ -93,6 +93,7 @@ $light-color-scheme-foreground-text: #19252f;
 $light-color-scheme-foreground-text-less-contrast: #6d7a86;
 $light-color-scheme-foreground-text-disabled: #8c99a5;
 $light-color-scheme-foreground-text-error: #db3c55;
+$light-color-scheme-foreground-text-warning: #a26e0c;
 $light-color-scheme-foreground-text-success: #016b37;
 $light-color-scheme-foreground-divider: #d7dee4;
 $light-color-scheme-foreground-border: #bdc7d1;
@@ -119,6 +120,7 @@ $dark-color-scheme-foreground-text: #d7dee4;
 $dark-color-scheme-foreground-text-less-contrast: #8c99a5;
 $dark-color-scheme-foreground-text-disabled: #6d7a86;
 $dark-color-scheme-foreground-text-error: #ee6f79;
+$dark-color-scheme-foreground-text-warning: #e19f12;
 $dark-color-scheme-foreground-text-success: #4ba96c;
 $dark-color-scheme-foreground-divider: mix(#515e69, transparent, 50%);
 $dark-color-scheme-foreground-border: #515e69;
@@ -1265,7 +1267,7 @@ $list-light-color-scheme-footer-background: white;
 $list-light-color-scheme-footer-divider: #d7dee4;
 $list-dark-color-scheme-footer-background: #19252f;
 $list-dark-color-scheme-footer-divider: mix(#515e69, transparent, 50%);
-$list-size-horizontal-padding: 12px;
+$list-size-horizontal-padding: 10px;
 $list-size-icon-right-margin: 8px;
 $list-size-item-height: 32px;
 $list-size-footer-min-height: 48px;
@@ -1468,9 +1470,9 @@ $navbar-item-size-height-vertical: 56px;
 $navbar-brand-size-padding: 12px;
 $navbar-brand-size-margin-right: 24px;
 $navbar-brand-font-title: title;
-$optgroup-size-padding-left: 17px;
+$optgroup-size-padding-left: 12px;
 $optgroup-font-default: subheading;
-$option-size-horizontal-padding: 12px;
+$option-size-horizontal-padding: 10px;
 $option-size-height: 32px;
 $option-size-border-width: 2px;
 $option-font-default: body;
@@ -1715,7 +1717,7 @@ $timezone-option-light-color-scheme-text: #19252f;
 $timezone-option-light-color-scheme-caption: #6d7a86;
 $timezone-option-dark-color-scheme-text: #d7dee4;
 $timezone-option-dark-color-scheme-caption: #8c99a5;
-$timezone-option-size-padding: 6px 8px 6px 14px;
+$timezone-option-size-padding: 6px 10px;
 $timezone-option-size-column-gap: 16px;
 $timezone-option-size-height: auto;
 $timezone-option-size-max-height: 4em;

package/autocomplete/autocomplete-trigger.directive.d.ts

@@ -1,9 +1,9 @@
 import { Directionality } from '@angular/cdk/bidi';
 import { Overlay, ScrollStrategy } from '@angular/cdk/overlay';
 import { ViewportRuler } from '@angular/cdk/scrolling';
-import { ChangeDetectorRef, ElementRef, InjectionToken, NgZone, OnDestroy, ViewContainerRef } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, InjectionToken, NgZone, OnDestroy, ViewContainerRef } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-import { McOption, McOptionSelectionChange } from '@ptsecurity/mosaic/core';
+import { KeyboardNavigationHandler, McOption, McOptionSelectionChange } from '@ptsecurity/mosaic/core';
 import { McFormField } from '@ptsecurity/mosaic/form-field';
 import { Observable } from 'rxjs';
 import { McAutocompleteOrigin } from './autocomplete-origin.directive';
@@ -14,8 +14,6 @@ import * as i0 from "@angular/core";
  * to properly calculate the scrollTop of the panel. Because we are not
  * actually focusing the active item, scroll must be handled manually.
  */
-/** The height of each autocomplete option. */
-export declare const AUTOCOMPLETE_OPTION_HEIGHT = 32;
 /** The total height of the autocomplete panel. */
 export declare const AUTOCOMPLETE_PANEL_HEIGHT = 256;
 export declare const AUTOCOMPLETE_BORDER_WIDTH: number;
@@ -37,7 +35,7 @@ export declare const MAT_AUTOCOMPLETE_VALUE_ACCESSOR: any;
  * @docs-private
  */
 export declare function getMcAutocompleteMissingPanelError(): Error;
-export declare class McAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
+export declare class McAutocompleteTrigger implements AfterViewInit, ControlValueAccessor, OnDestroy, KeyboardNavigationHandler {
     private elementRef;
     private viewContainerRef;
     private changeDetectorRef;
@@ -92,6 +90,7 @@ export declare class McAutocompleteTrigger implements ControlValueAccessor, OnDe
     /** Stream of keyboard events that can close the panel. */
     private readonly closeKeyEventStream;
     constructor(elementRef: ElementRef<HTMLInputElement>, viewContainerRef: ViewContainerRef, changeDetectorRef: ChangeDetectorRef, overlay: Overlay, zone: NgZone, scrollStrategy: any, dir: Directionality, formField: McFormField, document: any, viewportRuler?: ViewportRuler | undefined);
+    ngAfterViewInit(): void;
     ngOnDestroy(): void;
     /** `View -> model callback called when value changes` */
     onChange: (value: any) => void;
@@ -118,6 +117,7 @@ export declare class McAutocompleteTrigger implements ControlValueAccessor, OnDe
     handleInput(event: KeyboardEvent): void;
     handleFocus(): void;
     handleClick($event: MouseEvent): void;
+    scrollActiveOptionIntoView(): void;
     /** Stream of clicks outside of the autocomplete panel. */
     private getOutsideClickStream;
     /**
@@ -125,16 +125,6 @@ export declare class McAutocompleteTrigger implements ControlValueAccessor, OnDe
      * arrow function in order to preserve the context.
      */
     private windowBlurHandler;
-    /**
-     * Given that we are not actually focusing active options, we must manually adjust scroll
-     * to reveal options below the fold. First, we find the offset of the option from the top
-     * of the panel. If that offset is below the fold, the new scrollTop will be the offset -
-     * the panel height + the option height, so the active option will be just visible at the
-     * bottom of the panel. If that offset is above the top of the visible panel, the new scrollTop
-     * will become the offset. If that offset is visible within the panel already, the scrollTop is
-     * not adjusted.
-     */
-    private scrollToOption;
     /**
      * This method listens to a stream of panel closing actions and resets the
      * stream every time the option list changes.
@@ -163,5 +153,5 @@ export declare class McAutocompleteTrigger implements ControlValueAccessor, OnDe
     private resetActiveItem;
     private canOpen;
     static ɵfac: i0.ɵɵFactoryDeclaration<McAutocompleteTrigger, [null, null, null, null, null, null, { optional: true; }, { optional: true; host: true; }, { optional: true; }, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McAutocompleteTrigger, "input[mcAutocomplete], textarea[mcAutocomplete]", ["mcAutocompleteTrigger"], { "autocomplete": "mcAutocomplete"; "connectedTo": "mcAutocompleteConnectedTo"; "autocompleteAttribute": "autocomplete"; "autocompleteDisabled": "mcAutocompleteDisabled"; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McAutocompleteTrigger, "input[mcAutocomplete], textarea[mcAutocomplete]", ["mcAutocompleteTrigger"], { "autocomplete": { "alias": "mcAutocomplete"; "required": false; }; "connectedTo": { "alias": "mcAutocompleteConnectedTo"; "required": false; }; "autocompleteAttribute": { "alias": "autocomplete"; "required": false; }; "autocompleteDisabled": { "alias": "mcAutocompleteDisabled"; "required": false; }; }, {}, never, never, false, never>;
 }

package/autocomplete/autocomplete.component.d.ts

@@ -69,5 +69,5 @@ export declare class McAutocomplete implements AfterContentInit {
     emitSelectEvent(option: McOption): void;
     onKeydown(event: KeyboardEvent): any;
     static ɵfac: i0.ɵɵFactoryDeclaration<McAutocomplete, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McAutocomplete, "mc-autocomplete", ["mcAutocomplete"], { "displayWith": "displayWith"; "panelWidth": "panelWidth"; "classList": "class"; "autoActiveFirstOption": "autoActiveFirstOption"; "openOnFocus": "openOnFocus"; }, { "optionSelected": "optionSelected"; "opened": "opened"; "closed": "closed"; }, ["options", "optionGroups"], ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McAutocomplete, "mc-autocomplete", ["mcAutocomplete"], { "displayWith": { "alias": "displayWith"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "classList": { "alias": "class"; "required": false; }; "autoActiveFirstOption": { "alias": "autoActiveFirstOption"; "required": false; }; "openOnFocus": { "alias": "openOnFocus"; "required": false; }; }, { "optionSelected": "optionSelected"; "opened": "opened"; "closed": "closed"; }, ["options", "optionGroups"], ["*"], false, never>;
 }

package/button/_button-theme.scss

@@ -3,11 +3,6 @@
 
 @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);
@@ -132,6 +127,8 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 @mixin mc-button-typography($config) {
+    $tokens: map.get($config, tokens);
+
     .mc-button,
     .mc-icon-button {
         @include mc-typography-level-to-styles($config, map.get($tokens, button-font-default));

package/button/button.component.d.ts

@@ -46,5 +46,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": { "alias": "color"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["*"], false, never>;
 }

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

@@ -3,11 +3,6 @@
 
 @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);
@@ -80,6 +75,8 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 @mixin mc-button-toggle-typography($config) {
+    $tokens: map.get($config, tokens);
+
     .mc-button-toggle {
         @include mc-typography-level-to-styles($config, map.get($tokens, button-toggle-font-default));
 

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

@@ -5,7 +5,7 @@ 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';
+export type ToggleType = 'checkbox' | 'radio';
 /**
  * Provider Expression that allows mc-button-toggle-group to register as a ControlValueAccessor.
  * This allows it to support [(ngModel)].
@@ -100,7 +100,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, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McButtonToggleGroup, "mc-button-toggle-group", ["mcButtonToggleGroup"], { "vertical": { "alias": "vertical"; "required": false; }; "value": { "alias": "value"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "valueChange": "valueChange"; "change": "change"; }, ["buttonToggles"], never, false, never>;
 }
 /** Single button inside of a toggle group. */
 export declare class McButtonToggle implements OnInit, AfterContentInit, OnDestroy {
@@ -141,5 +141,5 @@ export declare class McButtonToggle implements OnInit, AfterContentInit, OnDestr
      */
     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"; }, ["icons"], ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McButtonToggle, "mc-button-toggle", ["mcButtonToggle"], { "checked": { "alias": "checked"; "required": false; }; "value": { "alias": "value"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "change": "change"; }, ["icons"], ["*"], false, never>;
 }

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, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McCard, "mc-card", never, { "color": { "alias": "color"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "selectedChange": "selectedChange"; }, never, ["*"], false, never>;
 }

package/checkbox/_checkbox-theme.scss

@@ -3,11 +3,6 @@
 
 @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 {
@@ -67,6 +62,10 @@ $tokens: meta.module-variables(tokens) !default;
             }
         }
 
+        & .mc-hint {
+            color: map-get($foreground, text-less-contrast);
+        }
+
         &.mc-primary {
             @include mc-checkbox-color(map.get($checkbox, default));
 
@@ -99,6 +98,8 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 @mixin mc-checkbox-typography($config) {
+    $tokens: map.get($config, tokens);
+
     .mc-checkbox {
         @include mc-typography-level-to-styles($config, map.get($tokens, checkbox-font-default));
     }

package/checkbox/checkbox-config.d.ts

@@ -6,7 +6,7 @@ import { InjectionToken } from '@angular/core';
  * check-indeterminate: Toggle checked status, set indeterminate to false. Default behavior.
  * undefined: Same as `check-indeterminate`.
  */
-export declare type McCheckboxClickAction = 'noop' | 'check' | 'check-indeterminate' | undefined;
+export type McCheckboxClickAction = 'noop' | 'check' | 'check-indeterminate' | undefined;
 /**
  * Injection token that can be used to specify the checkbox click behavior.
  */

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, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McCheckbox, "mc-checkbox", ["mcCheckbox"], { "color": { "alias": "color"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "id": { "alias": "id"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "required": { "alias": "required"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; }, { "change": "change"; "indeterminateChange": "indeterminateChange"; }, never, ["*", "mc-hint"], false, never>;
 }

package/code-block/_code-block-theme.scss

@@ -4,12 +4,6 @@
 
 @use '../core/styles/typography/typography-utils' as *;
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
-
-
 @mixin mc-code-block-theme($theme) {
     $code-block: map.get(map.get($theme, components), code-block);
 
@@ -319,6 +313,8 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 @mixin mc-code-block-typography($config) {
+    $tokens: map.get($config, tokens);
+
     .mc-code-block {
         @include mc-typography-level-to-styles($config, map.get($tokens, code-block-font-default));
 

package/code-block/actionbar.component.d.ts

@@ -18,5 +18,5 @@ export declare class McActionBarComponent implements AfterViewInit {
     ngAfterViewInit(): void;
     onCopy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<McActionBarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McActionBarComponent, "mc-actionbar-block", never, { "config": "config"; "codeFiles": "codeFiles"; "lessContrast": "lessContrast"; "selectedTabIndex": "selectedTabIndex"; "multiLine": "multiLine"; "softWrap": "softWrap"; }, { "toggleSoftWrap": "toggleSoftWrap"; "downloadCode": "downloadCode"; "copyCode": "copyCode"; "openExternalSystem": "openExternalSystem"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McActionBarComponent, "mc-actionbar-block", never, { "config": { "alias": "config"; "required": false; }; "codeFiles": { "alias": "codeFiles"; "required": false; }; "lessContrast": { "alias": "lessContrast"; "required": false; }; "selectedTabIndex": { "alias": "selectedTabIndex"; "required": false; }; "multiLine": { "alias": "multiLine"; "required": false; }; "softWrap": { "alias": "softWrap"; "required": false; }; }, { "toggleSoftWrap": "toggleSoftWrap"; "downloadCode": "downloadCode"; "copyCode": "copyCode"; "openExternalSystem": "openExternalSystem"; }, never, never, false, never>;
 }

package/code-block/code-block.component.d.ts

@@ -70,5 +70,5 @@ export declare class McCodeBlockComponent implements OnDestroy {
     private updateMultiline;
     private getFullFileName;
     static ɵfac: i0.ɵɵFactoryDeclaration<McCodeBlockComponent, [null, null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McCodeBlockComponent, "mc-code-block", ["mcCodeBlock"], { "lineNumbers": "lineNumbers"; "codeFiles": "codeFiles"; "lessContrast": "lessContrast"; "maxHeight": "maxHeight"; "softWrap": "softWrap"; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McCodeBlockComponent, "mc-code-block", ["mcCodeBlock"], { "lineNumbers": { "alias": "lineNumbers"; "required": false; }; "codeFiles": { "alias": "codeFiles"; "required": false; }; "lessContrast": { "alias": "lessContrast"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "softWrap": { "alias": "softWrap"; "required": false; }; }, {}, never, never, false, never>;
 }

package/core/common-behaviors/color.d.ts

@@ -4,7 +4,7 @@ export interface CanColor {
     color: ThemePalette;
 }
 /** @docs-private */
-export declare type CanColorCtor = Constructor<CanColor> & AbstractConstructor<CanColor>;
+export type CanColorCtor = Constructor<CanColor> & AbstractConstructor<CanColor>;
 export interface HasElementRef {
     elementRef: ElementRef;
 }

package/core/common-behaviors/constructor.d.ts

@@ -1,9 +1,9 @@
 /** @docs-private */
-export declare type Constructor<T> = new (...args: any[]) => T;
+export type Constructor<T> = new (...args: any[]) => T;
 /**
  * This is a permissive type for abstract class constructors.
  * @docs-private
  */
-export declare type AbstractConstructor<T> = Function & {
+export type AbstractConstructor<T> = Function & {
     prototype: T;
 };

package/core/common-behaviors/disabled.d.ts

@@ -3,6 +3,6 @@ export interface CanDisable {
     disabled: boolean;
 }
 /** @docs-private */
-export declare type CanDisableCtor = Constructor<CanDisable> & AbstractConstructor<CanDisable>;
+export type CanDisableCtor = Constructor<CanDisable> & AbstractConstructor<CanDisable>;
 /** Mixin to augment a directive with a `disabled` property. */
 export declare function mixinDisabled<T extends AbstractConstructor<{}>>(base: T): CanDisableCtor & T;

package/core/common-behaviors/error-state.d.ts

@@ -12,7 +12,7 @@ export interface CanUpdateErrorState {
     updateErrorState(): void;
 }
 /** @docs-private */
-export declare type CanUpdateErrorStateCtor = Constructor<CanUpdateErrorState>;
+export type CanUpdateErrorStateCtor = Constructor<CanUpdateErrorState>;
 /** @docs-private */
 export interface HasErrorState {
     parentFormGroup: FormGroupDirective;

package/core/common-behaviors/tabindex.d.ts

@@ -3,6 +3,6 @@ import { CanDisable } from './disabled';
 export interface HasTabIndex {
     tabIndex: number;
 }
-export declare type HasTabIndexCtor = Constructor<HasTabIndex> & AbstractConstructor<HasTabIndex>;
+export type HasTabIndexCtor = Constructor<HasTabIndex> & AbstractConstructor<HasTabIndex>;
 /** Mixin to augment a directive with a `tabIndex` property. */
 export declare function mixinTabIndex<T extends AbstractConstructor<CanDisable>>(base: T, defaultTabIndex?: number): HasTabIndexCtor & T;

package/core/datetime/date-formats.d.ts

@@ -1,4 +1,4 @@
 import { InjectionToken } from '@angular/core';
 import { DateFormats } from '@mosaic-design/date-adapter';
 export declare const MC_DATE_FORMATS: InjectionToken<DateFormats>;
-export declare type McDateFormats = DateFormats;
+export type McDateFormats = DateFormats;

package/core/formatters/index.d.ts

@@ -3,7 +3,7 @@ import * as i1 from "./number/formatter";
 import * as i2 from "./date/formatter.pipe";
 export declare class McFormattersModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<McFormattersModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<McFormattersModule, [typeof i1.McDecimalPipe, typeof i2.AbsoluteDateFormatterPipe, typeof i2.AbsoluteDateTimeFormatterPipe, typeof i2.AbsoluteDateShortFormatterPipe, typeof i2.AbsoluteShortDateTimeFormatterPipe, typeof i2.RelativeDateFormatterPipe, typeof i2.RelativeDateTimeFormatterPipe, typeof i2.RelativeShortDateFormatterPipe, typeof i2.RelativeShortDateTimeFormatterPipe, typeof i2.RangeDateFormatterPipe, typeof i2.RangeShortDateFormatterPipe, typeof i2.RangeDateTimeFormatterPipe, typeof i2.RangeShortDateTimeFormatterPipe, typeof i2.RangeMiddleDateTimeFormatterPipe], never, [typeof i1.McDecimalPipe, typeof i2.AbsoluteDateFormatterPipe, typeof i2.AbsoluteDateTimeFormatterPipe, typeof i2.AbsoluteDateShortFormatterPipe, typeof i2.AbsoluteShortDateTimeFormatterPipe, typeof i2.RelativeDateFormatterPipe, typeof i2.RelativeDateTimeFormatterPipe, typeof i2.RelativeShortDateFormatterPipe, typeof i2.RelativeShortDateTimeFormatterPipe, typeof i2.RangeDateFormatterPipe, typeof i2.RangeShortDateFormatterPipe, typeof i2.RangeDateTimeFormatterPipe, typeof i2.RangeShortDateTimeFormatterPipe, typeof i2.RangeMiddleDateTimeFormatterPipe]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<McFormattersModule, [typeof i1.McDecimalPipe, typeof i1.McRoundDecimalPipe, typeof i1.McTableNumberPipe, typeof i2.AbsoluteDateFormatterPipe, typeof i2.AbsoluteDateTimeFormatterPipe, typeof i2.AbsoluteDateShortFormatterPipe, typeof i2.AbsoluteShortDateTimeFormatterPipe, typeof i2.RelativeDateFormatterPipe, typeof i2.RelativeDateTimeFormatterPipe, typeof i2.RelativeShortDateFormatterPipe, typeof i2.RelativeShortDateTimeFormatterPipe, typeof i2.RangeDateFormatterPipe, typeof i2.RangeShortDateFormatterPipe, typeof i2.RangeDateTimeFormatterPipe, typeof i2.RangeShortDateTimeFormatterPipe, typeof i2.RangeMiddleDateTimeFormatterPipe], never, [typeof i1.McDecimalPipe, typeof i1.McRoundDecimalPipe, typeof i1.McTableNumberPipe, typeof i2.AbsoluteDateFormatterPipe, typeof i2.AbsoluteDateTimeFormatterPipe, typeof i2.AbsoluteDateShortFormatterPipe, typeof i2.AbsoluteShortDateTimeFormatterPipe, typeof i2.RelativeDateFormatterPipe, typeof i2.RelativeDateTimeFormatterPipe, typeof i2.RelativeShortDateFormatterPipe, typeof i2.RelativeShortDateTimeFormatterPipe, typeof i2.RangeDateFormatterPipe, typeof i2.RangeShortDateFormatterPipe, typeof i2.RangeDateTimeFormatterPipe, typeof i2.RangeShortDateTimeFormatterPipe, typeof i2.RangeMiddleDateTimeFormatterPipe]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<McFormattersModule>;
 }
 export * from './number/formatter';

package/core/formatters/number/formatter.d.ts

@@ -4,6 +4,17 @@ import * as i0 from "@angular/core";
 export declare const MC_NUMBER_FORMATTER_OPTIONS: InjectionToken<string>;
 export declare const MC_NUMBER_FORMATTER_DEFAULT_OPTIONS: ParsedDigitsInfo;
 export declare const NUMBER_FORMAT_REGEXP: RegExp;
+interface RoundDecimalOptions {
+    separator: string;
+    groupSeparator: string;
+    thousands?: string;
+    tenThousand?: string;
+    million?: string;
+    oneHundredMillions?: string;
+    billion?: string;
+    trillion: string;
+    rtl?: boolean;
+}
 declare class ParsedDigitsInfo {
     useGrouping: boolean;
     minimumIntegerDigits: number;
@@ -30,8 +41,52 @@ export declare class McDecimalPipe implements PipeTransform {
      * When not supplied, uses the value of `MC_LOCALE_ID`, which is `ru` by default.
      */
     transform(value: any, digitsInfo?: string, locale?: string): string | null;
+    isSpecialFormatForRULocale(locale: string, value: number, grouping?: boolean): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<McDecimalPipe, [{ optional: true; }, { optional: true; }, { optional: true; }]>;
     static ɵpipe: i0.ɵɵPipeDeclaration<McDecimalPipe, "mcNumber", false>;
     static ɵprov: i0.ɵɵInjectableDeclaration<McDecimalPipe>;
 }
+export declare class McTableNumberPipe implements PipeTransform {
+    private id;
+    private localeService;
+    private readonly options;
+    constructor(id: string, localeService: McLocaleService, options: ParsedDigitsInfo);
+    /**
+     * @param value The number to be formatted.
+     * @param digitsInfo Decimal representation options, specified by a string
+     * in the following format:<br>
+     * <code>{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}</code>.
+     *   - `minIntegerDigits`: The minimum number of integer digits before the decimal point.
+     * Default is `1`.
+     *   - `minFractionDigits`: The minimum number of digits after the decimal point.
+     * Default is `0`.
+     *   - `maxFractionDigits`: The maximum number of digits after the decimal point.
+     * Default is `3`.
+     * @param locale A locale code for the locale format rules to use.
+     * When not supplied, uses the value of `MC_LOCALE_ID`, which is `ru` by default.
+     */
+    transform(value: any, digitsInfo?: string, locale?: string): string | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McTableNumberPipe, [{ optional: true; }, { optional: true; }, { optional: true; }]>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<McTableNumberPipe, "mcTableNumber", false>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<McTableNumberPipe>;
+}
+export declare function isWithin(startRange: number, endRange: number, valueToCheck: number): boolean;
+export declare class McRoundDecimalPipe implements PipeTransform {
+    private id;
+    private localeService;
+    roundingOptions: RoundDecimalOptions;
+    constructor(id: string, localeService: McLocaleService);
+    transform(value: any, locale?: string): any;
+    private calculateDecimal;
+    /**
+     * 2 * 1000 is a number in the interval of [1500...2500)
+     *
+     * 2,0 * 1000 is a number in the interval of [1950...2050)
+     */
+    private calculatePartsForThousands;
+    private calculateUnit;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McRoundDecimalPipe, [{ optional: true; }, { optional: true; }]>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<McRoundDecimalPipe, "mcRoundNumber", false>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<McRoundDecimalPipe>;
+}
 export {};

package/core/forms/_forms-theme.scss

@@ -2,10 +2,6 @@
 @use 'sass:map';
 
 @use '../styles/typography' as *;
-@use '../styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
 
 @mixin mc-forms-theme($theme) {
     $foreground: map.get($theme, foreground);
@@ -22,6 +18,8 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 @mixin mc-forms-typography($config) {
+    $tokens: map.get($config, tokens);
+
     .mc-form__label {
         @include mc-typography-level-to-styles($config, map.get($tokens, forms-font-default-label));
     }

package/core/label/label-options.d.ts

@@ -2,7 +2,7 @@ import { InjectionToken } from '@angular/core';
 /** InjectionToken that can be used to specify the global label options. */
 export declare const MC_LABEL_GLOBAL_OPTIONS: InjectionToken<LabelOptions>;
 /** Type for the available floatLabel values. */
-export declare type FloatLabelType = 'always' | 'never' | 'auto';
+export type FloatLabelType = 'always' | 'never' | 'auto';
 /** Configurable options for floating labels. */
 export interface LabelOptions {
     /**

package/core/locales/en-US.d.ts

@@ -1,11 +1,22 @@
 export declare const enUSLocaleData: {
-    en: {
+    'en-US': {
         select: {
             hiddenItemsText: string;
         };
         datepicker: {
             placeholder: string;
-            dateInput: string;
+        };
+        formatters: {
+            number: {
+                rounding: {
+                    separator: string;
+                    groupSeparator: string;
+                    thousand: string;
+                    million: string;
+                    billion: string;
+                    trillion: string;
+                };
+            };
         };
     };
 };