@ptsecurity/mosaic 13.0.0 → 13.2.0

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

@@ -37,7 +37,8 @@ export interface FormatterRelativeTemplate {
     TOMORROW: string;
     AFTER_TOMORROW: string;
 }
-export interface AbsoluteDateTimeOptions {
+export interface DateTimeOptions {
+    seconds?: boolean;
     milliseconds?: boolean;
 }
 export interface FormatterConfig {
@@ -73,7 +74,7 @@ export declare class DateFormatter<D> {
      * @param template - template
      * @returns relative date by template
      */
-    relativeDate(date: D, template: FormatterRelativeTemplate): string;
+    relativeDate(date: D, template: FormatterRelativeTemplate, seconds?: boolean, milliseconds?: boolean): string;
     /**
      * @param date - date
      * @returns relative date in short format
@@ -84,14 +85,27 @@ export declare class DateFormatter<D> {
      * @returns relative date in long format
      */
     relativeLongDate(date: D): string;
+    /**
+     * @param date - date
+     * @param options - DateTimeOptions
+     * @returns relative date in short format with time
+     */
+    relativeShortDateTime(date: D, options?: DateTimeOptions): string;
+    /**
+     * @param date - date
+     * @param options - DateTimeOptions
+     * @returns relative date in long format with time
+     */
+    relativeLongDateTime(date: D, options?: DateTimeOptions): string;
     /**
      * @param date - date
      * @param params - parameters
      * @param datetime - should time be shown as well
+     * @param seconds - should time with seconds be shown as well
      * @param milliseconds - should time with milliseconds be shown as well
      * @returns absolute date in common format
      */
-    absoluteDate(date: D, params: FormatterAbsoluteTemplate, datetime?: boolean, milliseconds?: boolean): string;
+    absoluteDate(date: D, params: FormatterAbsoluteTemplate, datetime?: boolean, seconds?: boolean, milliseconds?: boolean): string;
     /**
      * @param date - date
      * @returns absolute date in short format
@@ -99,10 +113,10 @@ export declare class DateFormatter<D> {
     absoluteShortDate(date: D): string;
     /**
      * @param date - date
-     * @param options - AbsoluteDateTimeOptions
+     * @param options - DateTimeOptions
      * @returns absolute date in short format with time
      */
-    absoluteShortDateTime(date: D, options?: AbsoluteDateTimeOptions): string;
+    absoluteShortDateTime(date: D, options?: DateTimeOptions): string;
     /**
      * @param date - date
      * @returns absolute date in long format
@@ -110,10 +124,10 @@ export declare class DateFormatter<D> {
     absoluteLongDate(date: D): string;
     /**
      * @param date - date
-     * @param options - AbsoluteDateTimeOptions
+     * @param options - DateTimeOptions
      * @returns absolute date in long format with time
      */
-    absoluteLongDateTime(date: D, options?: AbsoluteDateTimeOptions): string;
+    absoluteLongDateTime(date: D, options?: DateTimeOptions): string;
     /**
      * @param startDate - start date
      * @param endDate - end date
@@ -125,9 +139,11 @@ export declare class DateFormatter<D> {
      * @param startDate - start date
      * @param endDate - end date
      * @param template - template
+     * @param seconds - should time with seconds be shown as well
+     * @param milliseconds - should time with milliseconds be shown as well
      * @returns opened date
      */
-    openedRangeDateTime(startDate: D | null, endDate: D | null, template: FormatterRangeTemplate): string;
+    openedRangeDateTime(startDate: D | null, endDate: D | null, template: FormatterRangeTemplate, seconds?: boolean, milliseconds?: boolean): string;
     /**
      * @param startDate - start date
      * @param endDate - end date
@@ -141,7 +157,7 @@ export declare class DateFormatter<D> {
      * @param template - template
      * @returns range date in template format with time
      */
-    rangeDateTime(startDate: D, endDate: D, template: FormatterRangeTemplate): string;
+    rangeDateTime(startDate: D, endDate: D, template: FormatterRangeTemplate, seconds?: boolean, milliseconds?: boolean): string;
     /**
      * @param startDate - start date
      * @param endDate - end date
@@ -151,28 +167,36 @@ export declare class DateFormatter<D> {
     /**
      * @param startDate - start date
      * @param endDate - end date
+     * @param options - DateTimeOptions
      * @returns range date in short format with time
      */
-    rangeShortDateTime(startDate: D | null, endDate?: D): string;
+    rangeShortDateTime(startDate: D | null, endDate?: D | null, options?: DateTimeOptions): string;
     /**
      * @param startDate - start date
      * @param endDate - end date
      * @returns range date in long format
      */
-    rangeLongDate(startDate: D | null, endDate?: D): string;
+    rangeLongDate(startDate: D | null, endDate?: D | null): string;
     /**
      * @param startDate - start date
      * @param endDate - end date
+     * @param options - DateTimeOptions
      * @returns range date in long format with time
      */
-    rangeLongDateTime(startDate: D | null, endDate?: D): string;
+    rangeLongDateTime(startDate: D | null, endDate?: D, options?: DateTimeOptions): string;
     /**
      * @param startDate - start date
      * @param endDate - end date
+     * @param options - DateTimeOptions
      * @returns range middle date with time
      */
-    rangeMiddleDateTime(startDate: D, endDate: D): string;
+    rangeMiddleDateTime(startDate: D, endDate: D, options?: DateTimeOptions): string;
     private compileVariables;
+    private isBeforeYesterday;
+    private isYesterday;
+    private isToday;
+    private isTomorrow;
+    private isAfterTomorrow;
     private hasSame;
     static ɵfac: i0.ɵɵFactoryDeclaration<DateFormatter<any>, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<DateFormatter<any>>;

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

@@ -27,6 +27,7 @@ export declare abstract class McPopUp implements OnDestroy {
     /** Returns an observable that notifies when the tooltip has been hidden from view. */
     afterHidden(): Observable<void>;
     markForCheck(): void;
+    detectChanges(): void;
     animationStart(): void;
     animationDone({ toState }: AnimationEvent): void;
     handleBodyInteraction(): void;

package/core/public-api.d.ts

@@ -1,3 +1,4 @@
+export * from './version';
 export * from './utils/index';
 export * from './common-behaviors/index';
 export * from './line/line';

package/core/version.d.ts

@@ -0,0 +1,2 @@
+import { Version } from '@angular/core';
+export declare const VERSION: Version;

package/design-tokens/{tokens → legacy-2017/tokens}/components/badge.json5

@@ -1,43 +1,5 @@
 {
     badge: {
-        size: {
-            default: {
-                'min-width': { value: '10px' },
-                padding: { value: '0 8px' },
-                'border-width': { value: '1px' },
-                'border-radius': { value: '4px' },
-                height: { value: '24px' },
-                font: {
-                    default: { value: 'caption' },
-                    caps: { value: 'caption-caps' },
-                    mono: { value: 'caption-mono'}
-                }
-            },
-            mini: {
-                height: { value: '16px' },
-                'min-width': { value: '10px' },
-                'border-width': { value: '1px' },
-                'border-radius': { value: '2px' },
-                padding: { value: '0 4px' },
-                font: {
-                    default: { value: 'extra-small-text' },
-                    caps: { value: 'extra-small-text-caps' },
-                    mono: { value: 'extra-small-text-mono'}
-                }
-            }
-        },
-        font: {
-            default: {
-                default: { value: 'caption' },
-                caps: { value: 'caption-caps' },
-                mono: { value: 'caption-mono'}
-            },
-            mini: {
-                default: { value: 'extra-small-text' },
-                caps: { value: 'extra-small-text-caps' },
-                mono: { value: 'extra-small-text-mono'}
-            }
-        },
         'light-color-scheme': {
             solid: {
                 primary: {
@@ -180,5 +142,33 @@
                 }
             }
         },
+        size: {
+            default: {
+                height: { value: '{size.xxl}' },
+                'min-width': { value: '10px' },
+                padding: { value: '0 8px' },
+                'border-width': { value: '1px' },
+                'border-radius': { value: '4px' }
+            },
+            mini: {
+                height: { value: '{size.l}' },
+                'min-width': { value: '10px' },
+                'border-width': { value: '1px' },
+                'border-radius': { value: '2px' },
+                padding: { value: '0 4px' }
+            }
+        },
+        font: {
+            default: {
+                default: { value: 'caption' },
+                caps: { value: 'caption-caps' },
+                mono: { value: 'caption-mono'}
+            },
+            mini: {
+                default: { value: 'extra-small-text' },
+                caps: { value: 'extra-small-text-caps' },
+                mono: { value: 'extra-small-text-mono'}
+            }
+        }
     }
 }

package/design-tokens/{tokens → legacy-2017/tokens}/components/checkbox.json5

@@ -9,7 +9,7 @@
                 },
                 focused: {
                     border: { value: '{light-color-scheme.primary.palette.value.600.value}' },
-                    shadow: { value: 'inset 0 0 0 1px {light-color-scheme.background.background.value}, 0 0 0 1px {light-color-scheme.primary.palette.value.600.value}' }
+                    shadow: { value: '0 0 0 1px {light-color-scheme.primary.palette.value.600.value}' }
                 }
             }
         },
@@ -22,7 +22,7 @@
                 },
                 focused: {
                     border: { value: '{dark-color-scheme.primary.palette.value.400.value}' },
-                    shadow: { value: 'inset 0 0 0 1px {dark-color-scheme.background.background.value}, 0 0 0 1px {dark-color-scheme.primary.palette.value.400.value}' }
+                    shadow: { value: '0 0 0 1px {dark-color-scheme.primary.palette.value.400.value}' }
                 }
             }
         },

package/design-tokens/legacy-2017/tokens/components/dl.json5

@@ -0,0 +1,38 @@
+{
+    'description-list': {
+        'light-color-scheme': {
+            dt: { value: '{light-color-scheme.foreground.text-less-contrast.value}' },
+            dd: { value: '{light-color-scheme.foreground.text.value}' }
+        },
+        'dark-color-scheme': {
+            dt: { value: '{dark-color-scheme.foreground.text-less-contrast.value}' },
+            dd: { value: '{dark-color-scheme.foreground.text.value}' }
+        },
+        size: {
+            'grid-template-columns': { value: 'repeat(4, 1fr)' },
+
+            'dt-grid-column': { value: '1' },
+            'dd-grid-column': { value: '2 / span 3' },
+
+            horizontal: {
+                'column-gap': { value: '16px' },
+                'row-gap': { value: '12px' }
+            },
+            vertical: {
+                'column-gap': { value: '0' },
+                'row-gap': { value: '2px' },
+                'dd-margin-bottom': { value: '16px' }
+            },
+        },
+        font: {
+            horizontal: {
+                dt: { value: 'body' },
+                dd: { value: 'body' },
+            },
+            vertical: {
+                dt: { value: 'caption' },
+                dd: { value: 'body' }
+            },
+        }
+    }
+}

package/design-tokens/legacy-2017/tokens/components/form-field.json5

@@ -0,0 +1,91 @@
+{
+    'form-field': {
+        'light-color-scheme': {
+            border: { value: '{light-color-scheme.second.default.value}' },
+            background: { value: '{light-color-scheme.background.background.value}' },
+
+            states: {
+                hover: {
+                    border: { value: '{light-color-scheme.second.palette.value.400.value}' }
+                },
+                invalid: {
+                    border: { value: '{light-color-scheme.error.default.value}' },
+                    background: { value: 'transparent' }
+                }
+            }
+        },
+        'dark-color-scheme': {
+            border: { value: '{dark-color-scheme.second.default.value}' },
+            background: { value: '{dark-color-scheme.background.background.value}' },
+
+            states: {
+                hover: {
+                    border: { value: '{dark-color-scheme.second.palette.value.200.value}' }
+                },
+                invalid: {
+                    border: { value: '{dark-color-scheme.error.default.value}' },
+                    background: { value: 'transparent' }
+                }
+            }
+        },
+        size: {
+            border: {
+                width: { value: '1px' },
+                radius: { value: '3px' }
+            },
+            button: {
+                width: { value: '32px' }
+            }
+        },
+        font: {
+            default: { value: 'body' }
+        }
+    },
+    'form-field-hint': {
+        size: {
+            'margin-top': { value: '4px' }
+        },
+        font: {
+            default: { value: 'caption' }
+        }
+    },
+    'form-field-password-hint': {
+        'light-color-scheme': {
+            'text-color': { value: '{light-color-scheme.foreground.text.value}' },
+            'icon-color': { value: '{light-color-scheme.foreground.text.value}' },
+
+            states: {
+                invalid: {
+                    'icon-color': { value: '{light-color-scheme.foreground.text-error.value}' },
+                    'text-color': { value: '{light-color-scheme.foreground.text.value}' }
+                },
+                valid: {
+                    'text-color': { value: '{light-color-scheme.foreground.text-success.value}' },
+                    'icon-color': { value: '{light-color-scheme.foreground.text-success.value}' }
+                }
+            }
+        },
+        'dark-color-scheme': {
+            'text-color': { value: '{dark-color-scheme.foreground.text.value}' },
+            'icon-color': { value: '{dark-color-scheme.foreground.text.value}' },
+
+            states: {
+                invalid: {
+                    'icon-color': { value: '{dark-color-scheme.foreground.text-error.value}' },
+                    'text-color': { value: '{dark-color-scheme.foreground.text.value}' }
+                },
+                valid: {
+                    'text-color': { value: '{dark-color-scheme.foreground.text-success.value}' },
+                    'icon-color': { value: '{dark-color-scheme.foreground.text-success.value}' }
+                }
+            }
+        },
+        size: {
+            'margin-top': { value: '8px' },
+            'icon-margin': { value: '4px' }
+        },
+        font: {
+            default: { value: 'caption' }
+        }
+    }
+}

package/design-tokens/{tokens → legacy-2017/tokens}/components/modal.json5

@@ -36,6 +36,12 @@
         }
     },
     'modal-header': {
+        'light-color-scheme': {
+            border: { value: '{light-color-scheme.foreground.divider.value}' }
+        },
+        'dark-color-scheme': {
+            border: { value: '{dark-color-scheme.foreground.divider.value}' }
+        },
         size: {
             'border-radius': { value: '4px 4px 0 0' },
             padding: { value: '14px 16px' }
@@ -54,6 +60,12 @@
         }
     },
     'modal-footer': {
+        'light-color-scheme': {
+            border: { value: '{light-color-scheme.foreground.divider.value}' }
+        },
+        'dark-color-scheme': {
+            border: { value: '{dark-color-scheme.foreground.divider.value}' }
+        },
         size: {
             'border-radius': { value: '0 0 4px 4px' },
             padding: { value: '16px {padding.headerFooter-horizontal}' }

package/design-tokens/{tokens → legacy-2017/tokens}/components/navbar.json5

@@ -33,6 +33,7 @@
 
             states: {
                 active: { value: 'rgba(0, 0, 0, 0.1)' },
+                selected: { value: '{light-color-scheme.second.palette.value.700.value}' },
                 hover: { value: 'rgba(255, 255, 255, 0.1)' },
                 progress: { value: '{light-color-scheme.primary.palette.value.800.value}' },
                 'disabled-opacity': { value: 0.3 }
@@ -44,6 +45,7 @@
 
             states: {
                 active: { value: 'rgba(0, 0, 0, 0.1)' },
+                selected: { value: '{dark-color-scheme.second.palette.value.600.value}' },
                 hover: { value: 'rgba(255, 255, 255, 0.1)' },
                 progress: { value: '{dark-color-scheme.primary.palette.value.800.value}' },
                 'disabled-opacity': { value: 0.3 }

package/design-tokens/{tokens → legacy-2017/tokens}/components/radio.json5

@@ -8,7 +8,6 @@
                 checked: {
                     'outer-circle-border': { value: '{light-color-scheme.primary.palette.value.500.value}' },
                     'inner-circle-border': { value: '{light-color-scheme.primary.palette.value.500.value}' }
-
                 },
                 focused: {
                     'outer-circle-border': { value: '{light-color-scheme.states.focused-color.value}' },

package/design-tokens/legacy-2017/tokens/components/tabs.json5

@@ -0,0 +1,101 @@
+{
+    tabs: {
+        'light-color-scheme': {
+            border: { value: '{light-color-scheme.second.palette.value.300.value}' },
+
+            state: {
+                normal: {
+                    icon: { value: '{light-color-scheme.foreground.icon.value}' },
+                    text: { value: '{light-color-scheme.foreground.text.value}' }
+                },
+                hover: {
+                    icon: { value: '{light-color-scheme.foreground.text.value}' },
+                    text: { value: '{light-color-scheme.foreground.text.value}' }
+                },
+                active: {
+                    'marker-color': { value: '{light-color-scheme.primary.default.value}' }
+                },
+                empty: {
+                    icon: { value: '{light-color-scheme.foreground.text-disabled.value}' },
+                    text: { value: '{light-color-scheme.foreground.text-disabled.value}' }
+                },
+                disabled: {
+                    icon: { value: '{light-color-scheme.foreground.text-disabled.value}' },
+                    text: { value: '{light-color-scheme.foreground.text-disabled.value}' },
+                    'marker-opacity': { value: '0.3' }
+                }
+            }
+        },
+        'dark-color-scheme': {
+            border: { value: '{dark-color-scheme.second.palette.value.300.value}' },
+
+            state: {
+                normal: {
+                    icon: { value: '{dark-color-scheme.foreground.icon.value}' },
+                    text: { value: '{dark-color-scheme.foreground.text.value}' }
+                },
+                hover: {
+                    icon: { value: '{dark-color-scheme.foreground.text.value}' },
+                    text: { value: '{dark-color-scheme.foreground.text.value}' }
+                },
+                active: {
+                    'marker-color': { value: '{dark-color-scheme.primary.default.value}' }
+                },
+                empty: {
+                    icon: { value: '{dark-color-scheme.foreground.text-disabled.value}' },
+                    text: { value: '{dark-color-scheme.foreground.text-disabled.value}' }
+                },
+                disabled: {
+                    icon: { value: '{dark-color-scheme.foreground.text-disabled.value}' },
+                    text: { value: '{dark-color-scheme.foreground.text-disabled.value}' },
+                    'marker-opacity': { value: '0.3' }
+                }
+            }
+        },
+        size: {
+            height: { value: '40px' },
+            'highlight-height': { value: '4px' },
+            'padding-horizontal': { value: '16px' },
+            'border-width': { value: '1px' },
+            'border-radius': { value: '3px' },
+            'label-icon-margin': { value: '{margin.iconText_M-horizontal}' }
+        },
+        font: {
+            default: { value: 'body' }
+        }
+    },
+    'vertical-tabs': {
+        'light-color-scheme': {
+            state: {
+                normal: {
+                    background: { value: 'transparent' },
+                },
+                selected: {
+                    background: { value: '{light-color-scheme.states.selected-color.value}' },
+                },
+                hover: {
+                    background: { value: '{light-color-scheme.background.overlay-hover.value}' },
+                },
+                'hover-selected': {
+                    background: { value: 'adjust-color({light-color-scheme.states.selected-color.value}, $saturation:-22%, $lightness:-5%)' },
+                }
+            }
+        },
+        'dark-color-scheme': {
+            state: {
+                normal: {
+                    background: { value: 'transparent' },
+                },
+                selected: {
+                    background: { value: '{dark-color-scheme.states.selected-color.value}' },
+                },
+                hover: {
+                    background: { value: '{dark-color-scheme.background.overlay-hover.value}' },
+                },
+                'hover-selected': {
+                    background: { value: 'adjust-color({dark-color-scheme.states.selected-color.value}, $lightness:-1%)' },
+                }
+            }
+        }
+    }
+}

package/design-tokens/{tokens → legacy-2017/tokens}/components/tags.json5

@@ -4,6 +4,7 @@
             primary: {
                 background: { value: '{light-color-scheme.primary.palette.value.100.value}' },
                 border: { value: '{light-color-scheme.primary.palette.value.100.value}' },
+                text: { value: '{light-color-scheme.primary.default.value}' },
                 icon: { value: 'mix({light-color-scheme.primary.palette.value.400.value}, {light-color-scheme.background.overlay-hover.value})' },
                 states:  {
                     hover: {
@@ -19,6 +20,7 @@
             second: {
                 background: { value: '{light-color-scheme.second.palette.value.100.value}' },
                 border: { value: '{light-color-scheme.second.palette.value.100.value}' },
+                text: { value: '{light-color-scheme.foreground.text.value}' },
                 icon: { value: 'mix({light-color-scheme.second.palette.value.400.value}, {light-color-scheme.background.overlay-hover.value})' },
                 states: {
                     hover: {
@@ -34,6 +36,7 @@
             error: {
                 background: { value: '{light-color-scheme.error.palette.value.100.value}' },
                 border: { value: '{light-color-scheme.error.palette.value.100.value}' },
+                text: { value: '{light-color-scheme.error.default.value}' },
                 icon: { value: 'mix({light-color-scheme.error.palette.value.400.value}, {light-color-scheme.background.overlay-hover.value})' },
                 states: {
                     hover: {
@@ -51,6 +54,7 @@
             primary: {
                 background: { value: '{dark-color-scheme.primary.palette.value.700.value}' },
                 border: { value: '{dark-color-scheme.primary.palette.value.700.value}' },
+                text: { value: '{dark-color-scheme.primary.palette.value.200.value}' },
                 icon: { value: 'mix({dark-color-scheme.primary.palette.value.400.value}, {dark-color-scheme.background.overlay-hover.value})' },
                 states: {
                     hover: {
@@ -66,6 +70,7 @@
             second: {
                 background: { value: '{dark-color-scheme.second.palette.value.700.value}' },
                 border: { value: '{dark-color-scheme.second.palette.value.700.value}' },
+                text: { value: '{dark-color-scheme.second.palette.value.200.value}' },
                 icon: { value: 'mix({dark-color-scheme.second.palette.value.400.value}, {dark-color-scheme.background.overlay-hover.value})' },
                 states: {
                     hover: {
@@ -81,6 +86,7 @@
             error: {
                 background: { value: '{dark-color-scheme.error.palette.value.700.value}' },
                 border: { value: '{dark-color-scheme.error.palette.value.700.value}' },
+                text: { value: '{dark-color-scheme.error.palette.value.200.value}' },
                 icon: { value: 'mix({dark-color-scheme.error.palette.value.400.value}, {dark-color-scheme.background.overlay-hover.value})' },
                 states: {
                     hover: {