@ptsecurity/mosaic 14.7.1 → 15.0.0

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

@@ -1,270 +1,9 @@
-import { DateAdapter, DurationUnit } from '@ptsecurity/cdk/datetime';
+import { DateAdapter } from '@mosaic-design/date-adapter';
+import { DateFormatter as BaseDateFormatter } from '@mosaic-design/date-formatter';
 import * as i0 from "@angular/core";
-/**
- * interface for absolute date or datetime formatter template
- */
-export interface FormatterAbsoluteTemplate {
-    variables?: {
-        [name: string]: string;
-    };
-    DATE: string;
-    DATETIME: string;
-}
-/**
- * interface for range date or datetime formatter template
- */
-export interface FormatterRangeTemplate {
-    variables?: {
-        [name: string]: string;
-    };
-    START_DATE: string;
-    END_DATE: string;
-    DATE: string;
-    START_DATETIME: string;
-    END_DATETIME: string;
-    DATETIME: string;
-}
-/**
- * interface for relative date or datetime formatter template
- */
-export interface FormatterRelativeTemplate {
-    variables?: {
-        [name: string]: string;
-    };
-    BEFORE_YESTERDAY: string;
-    YESTERDAY: string;
-    TODAY: string;
-    TOMORROW: string;
-    AFTER_TOMORROW: string;
-}
-/**
- * interface for duration of dates numeric formatter template
- */
-export interface FormatterDurationNumbersTemplate {
-    variables?: {
-        [name: string]: string;
-    };
-    FULL: string;
-    ONLY_MINUTES: string;
-}
-/**
- * interface for duration of dates text formatter template
- */
-export interface FormatterDurationTemplate {
-    variables?: {
-        [name: string]: string;
-    };
-    YEARS: string;
-    MONTHS: string;
-    WEEKS: string;
-    DAYS: string;
-    HOURS: string;
-    MINUTES: string;
-    SECONDS: string;
-    SEPARATOR: string;
-    YEARS_FRACTION: string;
-    MONTHS_FRACTION: string;
-}
-export interface DateTimeOptions {
-    seconds?: boolean;
-    milliseconds?: boolean;
-    currYear?: boolean;
-}
-export interface FormatterConfig {
-    relativeTemplates: {
-        short: FormatterRelativeTemplate;
-        long: FormatterRelativeTemplate;
-    };
-    absoluteTemplates: {
-        short: FormatterAbsoluteTemplate;
-        long: FormatterAbsoluteTemplate;
-    };
-    rangeTemplates: {
-        closedRange: {
-            short: FormatterRangeTemplate;
-            middle: FormatterRangeTemplate;
-            long: FormatterRangeTemplate;
-        };
-        openedRange: {
-            short: FormatterRangeTemplate;
-            long: FormatterRangeTemplate;
-        };
-    };
-    durationTemplates: {
-        shortest: FormatterDurationNumbersTemplate;
-        short: FormatterDurationTemplate;
-        long: FormatterDurationTemplate;
-    };
-}
-export declare class DateFormatter<D> {
-    private readonly adapter;
-    config: FormatterConfig;
-    private readonly invalidDateErrorText;
-    private messageFormat;
+export declare class DateFormatter<D> extends BaseDateFormatter<D> {
+    readonly adapter: DateAdapter<D>;
     constructor(adapter: DateAdapter<D>, locale: string);
-    setLocale(locale: string): void;
-    /**
-     * @param date - date
-     * @param template - template
-     * @param seconds - use seconds
-     * @param milliseconds - use milliseconds
-     * @returns relative date by template
-     */
-    relativeDate(date: D, template: FormatterRelativeTemplate, seconds?: boolean, milliseconds?: boolean): string;
-    /**
-     * @param date - date
-     * @returns relative date in short format
-     */
-    relativeShortDate(date: D): string;
-    /**
-     * @param date - date
-     * @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
-     * @param currYear - should current year be shown as well
-     */
-    absoluteDate(date: D, params: FormatterAbsoluteTemplate, datetime?: boolean, seconds?: boolean, milliseconds?: boolean, currYear?: boolean): string;
-    /**
-     * @param date - date
-     * @param currYear - should the year be shown forced
-     * @returns absolute date in short format
-     */
-    absoluteShortDate(date: D, currYear?: boolean): string;
-    /**
-     * @param date - date
-     * @param options - DateTimeOptions
-     * @returns absolute date in short format with time
-     */
-    absoluteShortDateTime(date: D, options?: DateTimeOptions): string;
-    /**
-     * @param date - date
-     * @param currYear - should the year be shown forced
-     * @returns absolute date in long format
-     */
-    absoluteLongDate(date: D, currYear?: boolean): string;
-    /**
-     * @param date - date
-     * @param options - DateTimeOptions
-     * @returns absolute date in long format with time
-     */
-    absoluteLongDateTime(date: D, options?: DateTimeOptions): string;
-    /**
-     * @param startDate - start date
-     * @param endDate - end date
-     * @param template - template
-     * @returns opened date
-     */
-    openedRangeDate(startDate: D | null, endDate: D | null, template: FormatterRangeTemplate): string;
-    /**
-     * @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, seconds?: boolean, milliseconds?: boolean): string;
-    /**
-     * @param startDate - start date
-     * @param endDate - end date
-     * @param template - template
-     * @returns range date in template format
-     */
-    rangeDate(startDate: D, endDate: D, template: FormatterRangeTemplate): string;
-    /**
-     * @param startDate - start date
-     * @param endDate - end date
-     * @param template - template
-     * @param seconds - use seconds
-     * @param milliseconds - use milliseconds
-     * @returns range date in template format with time
-     */
-    rangeDateTime(startDate: D, endDate: D, template: FormatterRangeTemplate, seconds?: boolean, milliseconds?: boolean): string;
-    /**
-     * @param startDate - start date
-     * @param endDate - end date
-     * @returns range date in short format
-     */
-    rangeShortDate(startDate: D | null, endDate?: D): string;
-    /**
-     * @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 | null, options?: DateTimeOptions): string;
-    /**
-     * @param startDate - start date
-     * @param endDate - end date
-     * @returns range date in long format
-     */
-    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, 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, options?: DateTimeOptions): string;
-    /**
-     * @param startDate - start date
-     * @param endDate - end date
-     * @param seconds - add seconds to formatted value
-     * @param milliseconds - add milliseconds to formatted value
-     * @returns formatted duration as string like 48:02:25
-     */
-    durationShortest(startDate: D, endDate: D, seconds?: boolean, milliseconds?: boolean): string;
-    /**
-     * @param startDate - start date
-     * @param endDate - end date
-     * @param units - if defined, units to show will be specified
-     * @param fraction - shows fraction part for years and months
-     * @param template - specify template
-     * @returns formatted duration as string
-     */
-    duration(startDate: D, endDate: D, units: DurationUnit[], fraction: any, template: FormatterDurationTemplate): string;
-    durationLong(startDate: D, endDate: D, units?: DurationUnit[], fraction?: boolean): string;
-    durationShort(startDate: D, endDate: D, units?: DurationUnit[], fraction?: boolean): string;
-    private checkDates;
-    private compileMessage;
-    /**
-     * @param date - date for compile
-     * @param variables - date template variables
-     * @param currYearForced - param for absolute days formatting
-     * @returns compiledVariables
-     */
-    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/formatters/date/formatter.pipe.d.ts

@@ -1,6 +1,7 @@
 import { PipeTransform } from '@angular/core';
-import { DateAdapter } from '@ptsecurity/cdk/datetime';
-import { DateFormatter, DateTimeOptions } from './formatter';
+import { DateTimeOptions } from '@mosaic-design/date-formatter';
+import { DateAdapter } from '../../datetime';
+import { DateFormatter } from './formatter';
 import * as i0 from "@angular/core";
 export declare class AbsoluteDateFormatterPipe<D> implements PipeTransform {
     private adapter;

package/core/forms/_forms-theme.scss

@@ -0,0 +1,32 @@
+@use 'sass:meta';
+@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);
+
+    $forms: map.get(map.get($theme, components), forms);
+
+    .mc-form__label {
+        color: map.get($forms, label);
+    }
+
+    .mc-form__legend {
+        color: map.get($forms, legend);
+    }
+}
+
+@mixin mc-forms-typography($config) {
+    .mc-form__label {
+        @include mc-typography-level-to-styles($config, map.get($tokens, forms-font-default-label));
+    }
+
+    .mc-form__legend {
+        @include mc-typography-level-to-styles($config, map.get($tokens, forms-font-default-legend));
+    }
+}

package/core/forms/_forms.scss

@@ -0,0 +1,109 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@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: end;
+    }
+
+    & .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)}
+        );
+    }
+}

package/core/forms/forms.directive.d.ts

@@ -11,12 +11,12 @@ export declare class McFormElement implements AfterContentInit {
     constructor(element: ElementRef<HTMLElement>);
     ngAfterContentInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<McFormElement, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McFormElement, ".mc-form__row, .mc-form__fieldset, .mc-form__legend", ["mcFormElement"], {}, {}, ["elements"], never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McFormElement, ".mc-form__row, .mc-form__fieldset, .mc-form__legend", ["mcFormElement"], {}, {}, ["elements"], never, false, never>;
 }
 export declare class McForm implements AfterContentInit {
     elements: QueryList<McFormElement>;
     ngAfterContentInit(): void;
     handleElements(elements: QueryList<McFormElement>): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<McForm, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McForm, ".mc-form-vertical, .mc-form-horizontal", ["mcForm"], {}, {}, ["elements"], never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McForm, ".mc-form-vertical, .mc-form-horizontal", ["mcForm"], {}, {}, ["elements"], never, false, never>;
 }

package/core/highlight/_highlight-theme.scss

@@ -0,0 +1,10 @@
+
+
+@mixin mc-highlight-theme($theme) {
+    .mc-highlight {
+        color: inherit;
+
+        font-weight: bold;
+        background-color: transparent;
+    }
+}

package/core/line/line.d.ts

@@ -7,7 +7,7 @@ import * as i0 from "@angular/core";
  */
 export declare class McLine {
     static ɵfac: i0.ɵɵFactoryDeclaration<McLine, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McLine, "[mc-line], [mcLine]", never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McLine, "[mc-line], [mcLine]", never, {}, {}, never, never, false, never>;
 }
 /**
  * Helper that takes a query list of lines and sets the correct class on the host.

package/core/option/_optgroup-theme.scss

@@ -0,0 +1,26 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../styles/typography' as *;
+@use '../styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+@mixin mc-optgroup-theme($theme) {
+    $foreground: map.get($theme, foreground);
+
+    .mc-optgroup-label {
+        color: map.get($foreground, text);
+    }
+
+    .mc-disabled .mc-optgroup-label {
+        color: map.get($foreground, text-disabled);
+    }
+}
+
+@mixin mc-optgroup-typography($config) {
+    .mc-optgroup-label {
+        @include mc-typography-level-to-styles($config, map.get($tokens, optgroup-font-default));
+    }
+}

package/core/option/_option-action-theme.scss

@@ -0,0 +1,41 @@
+@use 'sass:map';
+
+@use '../styles/theming/theming' as *;
+@use '../styles/typography/typography-utils' as *;
+
+
+@mixin mc-option-action-theme($theme) {
+    $foreground: map.get($theme, foreground);
+    $background: map.get($theme, background);
+
+    $secondary: map.get($theme, secondary);
+
+    $is-dark: map.get($theme, is-dark);
+
+    .mc-option-action {
+        &.cdk-keyboard-focused {
+            border-color: map.get(map.get($theme, states), focused-color);
+        }
+
+        &:active,
+        &.mc-pressed {
+            & .mc-icon {
+                color: mc-color($secondary, if($is-dark, 300, 700));
+            }
+
+            background-color: mc-color($secondary, A100);
+        }
+
+        &:hover .mc-icon {
+            color: mc-color($secondary, if($is-dark, 300, 700));
+        }
+
+        &[disabled] {
+            & .mc-icon {
+                color: mc-color($secondary, if($is-dark, 700, 300));
+            }
+
+            background-color: transparent;
+        }
+    }
+}

package/core/option/_option-theme.scss

@@ -0,0 +1,46 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../styles/typography' as *;
+
+@use '../styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+@mixin mc-option-theme($theme) {
+    $foreground: map.get($theme, foreground);
+    $background: map.get($theme, background);
+
+    $primary: map.get($theme, primary);
+
+    .mc-option {
+        color: map.get($foreground, text);
+
+        &:hover:not(.mc-disabled) {
+            .mc-option-overlay {
+                background: map.get($background, overlay-hover);
+            }
+        }
+
+        &.mc-active {
+            border-color: map.get(map.get($theme, states), focused-color);
+        }
+
+        &.mc-selected {
+            background: map.get(map.get($theme, states), selected-color);
+        }
+
+        &.mc-disabled {
+            background: transparent;
+
+            color: map.get($foreground, text-disabled);
+        }
+    }
+}
+
+@mixin mc-option-typography($config) {
+    .mc-option {
+        @include mc-typography-level-to-styles($config, map.get($tokens, option-font-default));
+    }
+}

package/core/option/action.d.ts

@@ -40,5 +40,5 @@ export declare class McOptionActionComponent extends McOptionActionMixinBase imp
     onKeyDown($event: any): void;
     private preventShowingTooltip;
     static ɵfac: i0.ɵɵFactoryDeclaration<McOptionActionComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McOptionActionComponent, "mc-option-action", ["mcOptionAction"], { "disabled": "disabled"; }, {}, ["customIcon"], ["[mc-icon]"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McOptionActionComponent, "mc-option-action", ["mcOptionAction"], { "disabled": "disabled"; }, {}, ["customIcon"], ["[mc-icon]"], false, never>;
 }

package/core/option/action.scss

@@ -0,0 +1,28 @@
+.mc-option-action {
+    box-sizing: unset;
+
+    position: relative;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+
+    margin-right: -2px;
+
+    //width 28px for total width 32px (left border + right border);
+    width: 28px;
+    height: 100%;
+
+    cursor: pointer;
+
+    outline: none;
+
+    border: 2px solid transparent;
+
+    background: transparent;
+
+    &[disabled] {
+        cursor: default;
+    }
+}

package/core/option/optgroup.d.ts

@@ -12,5 +12,5 @@ export declare class McOptgroup extends McOptgroupMixinBase implements CanDisabl
     /** Unique id for the underlying label. */
     labelId: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<McOptgroup, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McOptgroup, "mc-optgroup", ["mcOptgroup"], { "disabled": "disabled"; "label": "label"; }, {}, never, ["mc-option, mc-list-option, mc-timezone-option, ng-container"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McOptgroup, "mc-optgroup", ["mcOptgroup"], { "disabled": "disabled"; "label": "label"; }, {}, never, ["mc-option, mc-list-option, mc-timezone-option, ng-container"], false, never>;
 }

package/core/option/optgroup.scss

@@ -0,0 +1,16 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../styles/common/vendor-prefixes';
+@use '../styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.mc-optgroup-label {
+    padding-left: var(--mc-optgroup-size-padding-left, map.get($tokens, optgroup-size-padding-left));
+
+    @include vendor-prefixes.user-select(none);
+
+    cursor: default;
+}

package/core/option/option.d.ts

@@ -94,7 +94,7 @@ export declare class McOption implements AfterViewChecked, OnDestroy {
     /** Emits the selection change event. */
     private emitSelectionChangeEvent;
     static ɵfac: i0.ɵɵFactoryDeclaration<McOption, [null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McOption, "mc-option", ["mcOption"], { "value": "value"; "showCheckbox": "showCheckbox"; "disabled": "disabled"; }, { "onSelectionChange": "onSelectionChange"; }, never, ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McOption, "mc-option", ["mcOption"], { "value": "value"; "showCheckbox": "showCheckbox"; "disabled": "disabled"; }, { "onSelectionChange": "onSelectionChange"; }, never, ["*"], false, never>;
 }
 /**
  * Counts the amount of option group labels that precede the specified option.