@ptsecurity/mosaic 14.7.2 → 15.0.0

package/core/styles/visual/_layout.scss

@@ -0,0 +1,527 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../../styles/common/rtl';
+
+@use '../tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+/*
+*  Responsive attributes
+*
+*  References:
+*  1) https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties#flex
+*  2) https://css-tricks.com/almanac/properties/f/flex/
+*  3) https://css-tricks.com/snippets/css/a-guide-to-flexbox/
+*  4) https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items
+*  5) http://godban.com.ua/projects/flexgrid
+*/
+@-moz-document url-prefix() {
+    .layout-fill {
+        margin: 0;
+        width: 100%;
+        min-height: 100%;
+        height: 100%;
+    }
+}
+
+@mixin flex-order-for-name($sizes: null) {
+    @if $sizes == null {
+        $sizes: '';
+
+        .flex-order {
+            order: 0;
+        }
+    }
+
+    @for $i from -20 through 20 {
+        $order: '';
+        $suffix: '';
+
+        @each $s in $sizes {
+            @if $s != '' {
+                $suffix: '#{$s}-#{$i}';
+            } @else {
+                $suffix: '#{$i}';
+            }
+
+            $order: '.flex-order-#{$suffix}';
+        }
+
+        #{$order} {
+            order: #{$i};
+        }
+    }
+}
+
+@mixin offset-for-name($sizes:null) {
+    @if $sizes == null {
+        $sizes: '';
+    }
+
+    @for $i from 0 through 19 {
+        $offsets: '';
+        $suffix: '';
+
+        @each $s in $sizes {
+            @if $s != '' {
+                $suffix: '#{$s}-#{$i * 5}';
+            } @else {
+                $suffix: '#{$i * 5}';
+            }
+
+            $offsets:
+                '.offset-#{$suffix}, ' +
+                '.flex-offset-#{$suffix}, ' +
+                '.layout-margin .flex-offset-#{$suffix}, ' +
+                '.layout-margin .offset-#{$suffix}';
+        }
+
+        #{$offsets} {
+            @if $i != 0 {
+                @include rtl.rtl-prop(margin-left, margin-right, #{$i * 5 + '%'}, auto);
+            } @else {
+                @include rtl.rtl-prop(margin-left, margin-right, 0, auto);
+            }
+        }
+    }
+
+    @each $i in 33 {
+        $offsets: '';
+        $suffix: '';
+
+        @each $s in $sizes {
+            @if $s != '' {
+                $suffix: '#{$s}-#{$i}';
+            } @else {
+                $suffix: '#{$i}';
+            }
+
+            $offsets:
+                '.offset-#{$suffix}, ' +
+                '.flex-offset-#{$suffix}, ' +
+                '.layout-margin .flex-offset-#{$suffix}, ' +
+                '.layout-margin .offset-#{$suffix}';
+        }
+
+        #{$offsets} {
+            margin-left: calc(100% / 3);
+        }
+    }
+
+    @each $i in 66 {
+        $offsets: '';
+        $suffix: '';
+
+        @each $s in $sizes {
+            @if $s != '' {
+                $suffix: '#{$s}-#{$i}';
+            } @else {
+                $suffix: '#{$i}';
+            }
+
+            $offsets:
+                '.offset-#{$suffix}, ' +
+                '.flex-offset-#{$suffix}, ' +
+                '.layout-margin .flex-offset-#{$suffix}, ' +
+                '.layout-margin .offset-#{$suffix}';
+        }
+
+        #{$offsets} {
+            @include rtl.rtl-prop(margin-left, margin-right, calc(200% / 3), auto);
+        }
+    }
+}
+
+@mixin layout-for-name($name: null) {
+    @if $name == null {
+        $name: '';
+    }
+
+    @if $name != '' {
+        $name: '-#{$name}';
+    }
+
+    .layout#{$name},
+    .layout#{$name}-column,
+    .layout#{$name}-row {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -moz-box;
+        display: -ms-flexbox;
+        display: flex;
+
+        min-width: 0;
+        min-height: 0;
+    }
+
+    .layout#{$name}-column {
+        flex-direction: column;
+    }
+
+    .layout#{$name}-row {
+        flex-direction: row;
+    }
+}
+
+@mixin flex-properties-for-name($name: null) {
+    $flexName: 'flex';
+
+    @if $name != null {
+        $flexName: 'flex-#{$name}';
+        $name: '-#{$name}';
+    } @else {
+        $name: '';
+    }
+
+    // === flex: 1 1 0%;
+    .#{$flexName}             { flex: 1; }
+    .#{$flexName}-grow        { flex: 1 1 100%; }
+    .#{$flexName}-initial     { flex: 0 1 auto; }
+    .#{$flexName}-auto        { flex: 1 1 auto; }
+    .#{$flexName}-none        { flex: 0 0 auto; }
+    .#{$flexName}-no-shrink    { flex: 1 0 auto; }
+    .#{$flexName}-no-grow      { flex: 0 1 auto; }
+
+    // (1-20) * 5 = 0-100%
+    @for $i from 0 through 20 {
+        $value: #{$i * 5 + '%'};
+
+        .#{$flexName}-#{$i * 5} {
+            flex: 1 1 100%;
+            max-width: #{$value};
+            max-height: 100%;
+        }
+
+        .layout-row > .#{$flexName}-#{$i * 5} {
+            flex: 1 1 100%;
+            max-width: #{$value};
+            max-height: 100%;
+
+            // Required by Chrome M48+ due to http://crbug.com/546034
+            @if $i == 0 {
+                min-width: 0;
+            }
+        }
+
+        .layout-column > .#{$flexName}-#{$i * 5} {
+            flex: 1 1 100%;
+            max-width: 100%;
+            max-height: #{$value};
+        }
+
+        .layout#{$name}-row > .#{$flexName}-#{$i * 5} {
+            flex: 1 1 100%;
+            max-width: #{$value};
+            max-height: 100%;
+
+            // Required by Chrome M48+ due to http://crbug.com/546034
+            @if $i == 0 {
+                min-width: 0;
+            }
+        }
+
+        .layout#{$name}-column > .#{$flexName}-#{$i * 5} {
+            flex: 1 1 100%;
+            max-width: 100%;
+            max-height: #{$value};
+
+            // Required by Chrome M48+ due to http://crbug.com/546034
+            @if $i == 0 {
+                min-height: 0;
+            }
+        }
+    }
+
+    @if ($name == '') {
+        .flex-33 {
+            flex: 1 1 100%;
+            max-width: 33.33%;
+            max-height: 100%;
+        }
+
+        .flex-66 {
+            flex: 1 1 100%;
+            max-width: 66.66%;
+            max-height: 100%;
+        }
+    }
+
+    .layout-row {
+        > .#{$flexName}-33 {
+            flex: 1 1 33.33%;
+            max-width: 33.33%;
+            max-height: 100%;
+        }
+
+        > .#{$flexName}-66 {
+            flex: 1 1 66.66%;
+            max-width: 66.66%;
+            max-height: 100%;
+        }
+    }
+
+    .layout-column {
+        > .#{$flexName}-33 {
+            flex: 1 1 33.33%;
+            max-width: 100%;
+            max-height: 33.33%;
+        }
+
+        > .#{$flexName}-66 {
+            flex: 1 1 66.66%;
+            max-width: 100%;
+            max-height: 66.66%;
+        }
+    }
+
+    .layout#{$name}-row {
+        > .#{$flexName}-33 {
+            flex: 1 1 100%;
+            max-width: 33.33%;
+            max-height: 100%;
+        }
+
+        > .#{$flexName}-66 {
+            flex: 1 1 100%;
+            max-width: 66.66%;
+            max-height: 100%;
+        }
+
+        // Required by Chrome M48+ due to http://crbug.com/546034
+        > .flex {
+            min-width: 0;
+        }
+    }
+
+    .layout#{$name}-column {
+        > .#{$flexName}-33 {
+            flex: 1 1 100%;
+            max-width: 100%;
+            max-height: 33.33%;
+        }
+
+        > .#{$flexName}-66 {
+            flex: 1 1 100%;
+            max-width: 100%;
+            max-height: 66.66%;
+        }
+
+        // Required by Chrome M48+ due to http://crbug.com/546034
+        > .flex {
+            min-height: 0;
+        }
+    }
+
+    .layout-wrap {
+        flex-wrap: wrap;
+    }
+
+    .layout-nowrap {
+        flex-wrap: nowrap;
+    }
+
+    .layout-fill {
+        margin: 0;
+
+        width: 100%;
+
+        min-height: 100%;
+        height: 100%;
+    }
+}
+
+@mixin layout-align-for-name($suffix: null) {
+
+    // Alignment attributes for layout containers' children
+    // Arrange on the Main Axis
+    // center, start, end, space-between, space-around
+    // flex-start is the default for justify-content
+    // ------------------------------
+
+    $name: 'layout-align';
+    @if $suffix != null {
+        $name: 'layout-align-#{$suffix}';
+    }
+
+    .#{$name},
+    .#{$name}-start-stretch {
+        justify-content: flex-start;
+        align-content: stretch;
+        align-items: stretch;
+    }
+
+    // Main Axis Center
+    .#{$name}-start,
+    .#{$name}-start-start,
+    .#{$name}-start-center,
+    .#{$name}-start-end,
+    .#{$name}-start-stretch {
+        justify-content: flex-start;
+    }
+
+    // Main Axis Center
+    .#{$name}-center, //stretch
+    .#{$name}-center-start,
+    .#{$name}-center-center,
+    .#{$name}-center-end,
+    .#{$name}-center-stretch {
+        justify-content: center;
+    }
+
+    // Main Axis End
+    .#{$name}-end, //stretch
+    .#{$name}-end-start,
+    .#{$name}-end-center,
+    .#{$name}-end-end,
+    .#{$name}-end-stretch {
+        justify-content: flex-end;
+    }
+
+    // Main Axis Space Around
+    .#{$name}-space-around, //stretch
+    .#{$name}-space-around-center,
+    .#{$name}-space-around-start,
+    .#{$name}-space-around-end,
+    .#{$name}-space-around-stretch {
+        justify-content: space-around;
+    }
+
+    // Main Axis Space Between
+    .#{$name}-space-between, //stretch
+    .#{$name}-space-between-center,
+    .#{$name}-space-between-start,
+    .#{$name}-space-between-end,
+    .#{$name}-space-between-stretch {
+        justify-content: space-between;
+    }
+
+    // Arrange on the Cross Axis
+    // center, start, end
+    // stretch is the default for align-items
+    // ------------------------------
+
+    // Cross Axis Start
+    .#{$name}-start-start,
+    .#{$name}-center-start,
+    .#{$name}-end-start,
+    .#{$name}-space-between-start,
+    .#{$name}-space-around-start {
+        align-items: flex-start;
+        align-content: flex-start;
+    }
+
+    // Cross Axis Center
+    .#{$name}-start-center,
+    .#{$name}-center-center,
+    .#{$name}-end-center,
+    .#{$name}-space-between-center,
+    .#{$name}-space-around-center {
+        align-items: center;
+        align-content: center;
+        max-width: 100%;
+    }
+
+    // Cross Axis Center IE overflow fix
+    .#{$name}-start-center > *,
+    .#{$name}-center-center > *,
+    .#{$name}-end-center > *,
+    .#{$name}-space-between-center > *,
+    .#{$name}-space-around-center > * {
+        max-width: 100%;
+    }
+
+    // Cross Axis End
+    .#{$name}-start-end,
+    .#{$name}-center-end,
+    .#{$name}-end-end,
+    .#{$name}-space-between-end,
+    .#{$name}-space-around-end {
+        align-items: flex-end;
+        align-content: flex-end;
+    }
+
+    // Cross Axis Start
+    .#{$name}-start-stretch,
+    .#{$name}-center-stretch,
+    .#{$name}-end-stretch,
+    .#{$name}-space-between-stretch,
+    .#{$name}-space-around-stretch {
+        align-items: stretch;
+        align-content: stretch;
+    }
+}
+
+@mixin layout-indents() {
+    $sizes: (
+        '3xs': map.get($tokens, size-3xs),
+        'xxs': map.get($tokens, size-xxs),
+        'xs': map.get($tokens, size-xs),
+        's': map.get($tokens, size-s),
+        'm': map.get($tokens, size-m),
+        'l': map.get($tokens, size-l),
+        'xl': map.get($tokens, size-xl),
+        'xxl': map.get($tokens, size-xxl),
+        '3xl': map.get($tokens, size-3xl),
+        '4xl': map.get($tokens, size-4xl),
+        '5xl': map.get($tokens, size-5xl),
+        '6xl': map.get($tokens, size-6xl),
+        '7xl': map.get($tokens, size-7xl)
+    );
+
+    $indents: 'padding', 'margin';
+
+    @each $indent in $indents {
+        @each $name, $value in $sizes {
+            .layout-#{$indent}-#{$name} {
+                #{$indent}: $value !important;
+            }
+
+            .layout-#{$indent}-top-#{$name} {
+                #{$indent}-top: $value !important;
+            }
+
+            .layout-#{$indent}-right-#{$name} {
+                #{$indent}-right: $value !important;
+            }
+
+            .layout-#{$indent}-bottom-#{$name} {
+                #{$indent}-bottom: $value !important;
+            }
+
+            .layout-#{$indent}-left-#{$name} {
+                #{$indent}-left: $value !important;
+            }
+        }
+
+        .layout-#{$indent}-no-top {
+            #{$indent}-top: 0 !important;
+        }
+
+        .layout-#{$indent}-no-right {
+            #{$indent}-right: 0 !important;
+        }
+
+        .layout-#{$indent}-no-bottom {
+            #{$indent}-bottom: 0 !important;
+        }
+
+        .layout-#{$indent}-no-left {
+            #{$indent}-left: 0 !important;
+        }
+    }
+}
+
+@mixin layouts-for-breakpoint($name: null) {
+    @include flex-order-for-name($name);
+    @include offset-for-name($name);
+    @include layout-align-for-name($name);
+
+    @include flex-properties-for-name($name);
+    @include layout-for-name($name);
+
+    @include layout-indents();
+}
+

package/datepicker/_datepicker-theme.scss

@@ -0,0 +1,103 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/common/popup';
+@use '../core/styles/theming/theming';
+@use '../core/styles/typography/typography-utils' as *;
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+$mc-datepicker-selected-fade-amount: 0.6;
+$mc-datepicker-today-fade-amount: 0.2;
+
+@mixin mc-datepicker-theme($theme) {
+    $foreground: map.get($theme, foreground);
+    $background: map.get($theme, background);
+
+    $primary: map.get($theme, primary);
+    $secondary: map.get($theme, secondary);
+
+    $datepicker: map.get(map.get($theme, components), datepicker);
+
+    .mc-calendar__table-header {
+        color: theming.mc-color($secondary, 400);
+    }
+
+    .mc-datepicker-toggle__button.mc-icon-button {
+        border-color: transparent;
+        border-radius: 0;
+        background: transparent;
+        opacity: 1;
+
+        .mc-icon {
+            color: theming.mc-color($foreground, icon);
+        }
+    }
+
+    .mc-calendar__table-header-divider::after {
+        background: map.get($foreground, divider);
+    }
+
+    .mc-calendar__body-cell-content {
+        color: map.get($foreground, text);
+        border-color: transparent;
+    }
+
+    .mc-calendar__body_disabled > .mc-calendar__body-cell-content:not(.mc-selected) {
+        color: map.get($foreground, text-disabled);
+    }
+
+    .cdk-keyboard-focused .mc-calendar__body_active,
+    .cdk-program-focused .mc-calendar__body_active {
+        & > .mc-calendar__body-cell-content {
+            border-color: map.get(map.get($theme, states), focused-color);
+            box-shadow: 0 0 0 1px map.get(map.get($theme, states), focused-color);
+        }
+    }
+
+    .mc-calendar__body-cell:not(.mc-calendar__body_disabled):hover {
+        & > .mc-calendar__body-cell-content:not(.mc-selected) {
+            background-color: theming.mc-color($secondary, A60);
+        }
+    }
+
+    .mc-calendar__body-today {
+        color: map.get($datepicker, state-selected-today-color);
+    }
+
+    .mc-calendar__body_disabled > .mc-calendar__body-today:not(.mc-selected) {
+        border-color: map.get($background, background-disabled);
+    }
+
+    .mc-calendar__body-cell-content.mc-selected {
+        background: map.get($datepicker, state-selected-background);
+        color: map.get($datepicker, state-selected-color);
+    }
+
+    .mc-calendar__body_disabled > .mc-selected {
+        background-color: map.get($datepicker, state-selected-background);
+    }
+
+    .mc-datepicker__content {
+        @include popup.popup-params($theme);
+
+        color: map.get($foreground, text);
+    }
+}
+
+@mixin mc-datepicker-typography($config) {
+    .mc-calendar {
+        @include mc-typography-level-to-styles($config, map.get($tokens, datepicker-calendar-font-default));
+    }
+
+    .mc-calendar__table-header th {
+        @include mc-typography-level-to-styles($config, map.get($tokens, datepicker-calendar-font-header));
+    }
+
+    .mc-calendar__body-today {
+        @include mc-typography-level-to-styles($config, map.get($tokens, datepicker-body-font-today));
+    }
+}

package/datepicker/calendar-body.component.d.ts

@@ -51,5 +51,5 @@ export declare class McCalendarBody implements OnChanges {
     ngOnChanges(changes: SimpleChanges): void;
     isActiveCell(rowIndex: number, colIndex: number): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<McCalendarBody, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McCalendarBody, "[mc-calendar-body]", ["mcCalendarBody"], { "rows": "rows"; "todayValue": "todayValue"; "selectedValue": "selectedValue"; "labelMinRequiredCells": "labelMinRequiredCells"; "numCols": "numCols"; "activeCell": "activeCell"; "cellAspectRatio": "cellAspectRatio"; }, { "selectedValueChange": "selectedValueChange"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McCalendarBody, "[mc-calendar-body]", ["mcCalendarBody"], { "rows": "rows"; "todayValue": "todayValue"; "selectedValue": "selectedValue"; "labelMinRequiredCells": "labelMinRequiredCells"; "numCols": "numCols"; "activeCell": "activeCell"; "cellAspectRatio": "cellAspectRatio"; }, { "selectedValueChange": "selectedValueChange"; }, never, never, false, never>;
 }

package/datepicker/calendar-body.scss

@@ -0,0 +1,61 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+$mc-calendar-body-cell-content-size: 100% - map.get($tokens, datepicker-body-size-cell-margin) * 2;
+
+.mc-calendar__body {
+    min-width: calc(
+        7 * var(--mc-datepicker-body-size-cell-min-size, map.get($tokens, datepicker-body-size-cell-min-size))
+    );
+}
+
+.mc-calendar__body-cell {
+    position: relative;
+    height: 0;
+    line-height: 0;
+    text-align: center;
+    outline: none;
+    cursor: pointer;
+}
+
+.mc-calendar__body_disabled {
+    cursor: default;
+}
+
+.mc-calendar__body-cell-content {
+    position: absolute;
+    top: var(--mc-datepicker-body-size-cell-margin, map.get($tokens, datepicker-body-size-cell-margin));
+    left: var(--mc-datepicker-body-size-cell-margin, map.get($tokens, datepicker-body-size-cell-margin));
+
+    padding: var(--mc-datepicker-body-size-cell-padding, map.get($tokens, datepicker-body-size-cell-padding));
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    box-sizing: border-box;
+    width: $mc-calendar-body-cell-content-size;
+    height: $mc-calendar-body-cell-content-size;
+
+    // Prevents text being off-center on Android.
+    line-height: 1;
+
+    border-width: var(
+        --mc-datepicker-body-size-cell-border-width, map.get($tokens, datepicker-body-size-cell-border-width)
+    );
+    border-radius: var(
+        --mc-datepicker-body-size-cell-border-radius, map.get($tokens, datepicker-body-size-cell-border-radius)
+    );
+    border-style: solid;
+}
+
+mc-month-view {
+    .mc-calendar__body-cell-content {
+        justify-content: flex-end;
+    }
+}

package/datepicker/calendar-header.component.d.ts

@@ -1,5 +1,5 @@
 import { AfterContentInit, EventEmitter } from '@angular/core';
-import { DateAdapter } from '@ptsecurity/cdk/datetime';
+import { DateAdapter } from '@ptsecurity/mosaic/core';
 import * as i0 from "@angular/core";
 /** Default header for McCalendar */
 export declare class McCalendarHeader<D> implements AfterContentInit {
@@ -41,5 +41,5 @@ export declare class McCalendarHeader<D> implements AfterContentInit {
     private updateSelectedValues;
     private updateYearsArray;
     static ɵfac: i0.ɵɵFactoryDeclaration<McCalendarHeader<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McCalendarHeader<any>, "mc-calendar-header", ["mcCalendarHeader"], { "activeDate": "activeDate"; "maxDate": "maxDate"; "minDate": "minDate"; }, { "activeDateChange": "activeDateChange"; "monthSelected": "monthSelected"; "yearSelected": "yearSelected"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McCalendarHeader<any>, "mc-calendar-header", ["mcCalendarHeader"], { "activeDate": "activeDate"; "maxDate": "maxDate"; "minDate": "minDate"; }, { "activeDateChange": "activeDateChange"; "monthSelected": "monthSelected"; "yearSelected": "yearSelected"; }, never, never, false, never>;
 }