@messaia/cdk 0.0.0-CDK

package/lib/common/styles/_layout.scss

@@ -0,0 +1,588 @@
+// @use "sass:math";
+
+// Layout
+// ------------------------------
+
+$baseline-grid: 8px !default;
+$layout-gutter-width: ($baseline-grid * 2) !default;
+
+$layout-breakpoint-xs: 600px !default;
+$layout-breakpoint-sm: 960px !default;
+$layout-breakpoint-md: 1280px !default;
+$layout-breakpoint-lg: 1920px !default;
+
+@-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: $offsets + '[flex-offset#{$suffix}], ';
+        }
+
+        #{$offsets} {
+            margin-left: #{$i * 5 + '%'};
+        }
+    }
+
+    @each $i in 33 {
+        $offsets: '';
+        $suffix: '';
+
+        @each $s in $sizes {
+            @if $s != '' {
+                $suffix: '-#{$s}="#{$i}"';
+            } @else {
+                $suffix: '="#{$i}"';
+            }
+
+            $offsets: '[flex-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: '[flex-offset#{$suffix}]';
+        }
+
+        #{$offsets} {
+            margin-left: calc(200% / 3);
+        }
+    }
+}
+
+@mixin layout-for-name($name: null) {
+    @if $name == null {
+        $name: '';
+    }
+    @if $name != '' {
+        $name: '-#{$name}';
+    }
+
+    [layout#{$name}],
+    [layout#{$name}='column'],
+    [layout#{$name}='row'] {
+        box-sizing: border-box;
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -moz-box;
+        display: -ms-flexbox;
+        display: flex;
+    }
+    [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: '';
+    }
+
+    [#{$flexName}] {
+        flex: 1;
+        box-sizing: border-box;
+    }
+    // === flex: 1 1 0%;
+
+    // IE mediaQuery hack for 8,9,10 to set the flex-basis properly for 'flex' values
+    // Details:
+    // Do not use unitless flex-basis values in the flex shorthand because IE 10-11 will error.
+    // Also use 0% instead of 0px since minifiers will often convert 0px to 0 (which is unitless and will have the same problem).
+    // Safari, however, fails with flex-basis : 0% and requires flex-basis : 0px
+    @media screen\0 {
+        [#{$flexName}] {
+            flex: 1 1 0%;
+        }
+    }
+
+    [#{$flexName}='grow'],
+    [#{$flexName}-grow] {
+        flex: 1 1 100%;
+        box-sizing: border-box;
+    }
+    [#{$flexName}='initial'],
+    [#{$flexName}-initial] {
+        flex: 0 1 auto;
+        box-sizing: border-box;
+    }
+    [#{$flexName}='auto'],
+    [#{$flexName}-auto] {
+        flex: 1 1 auto;
+        box-sizing: border-box;
+    }
+    [#{$flexName}='none'],
+    [#{$flexName}-none] {
+        flex: 0 0 auto;
+        box-sizing: border-box;
+    }
+    [#{$flexName}='noshrink'],
+    [#{$flexName}-noshrink] {
+        flex: 1 0 auto;
+        box-sizing: border-box;
+    }
+    [#{$flexName}='nogrow'],
+    [#{$flexName}-nogrow] {
+        flex: 0 1 auto;
+        box-sizing: border-box;
+    }
+
+    // (1-20) * 5 = 0-100%
+    @for $i from 0 through 20 {
+        $value: #{$i * 5 + '%'};
+
+        [#{$flexName}='#{$i * 5}'] {
+            flex: 1 1 #{$value};
+            max-width: #{$value};
+            max-height: 100%;
+            box-sizing: border-box;
+        }
+
+        [layout='row'] > [#{$flexName}='#{$i * 5}'],
+        [layout#{$name}='row'] > [#{$flexName}='#{$i * 5}'] {
+            flex: 1 1 #{$value};
+            max-width: #{$value};
+            max-height: 100%;
+            box-sizing: border-box;
+        }
+
+        [layout='column'] > [#{$flexName}='#{$i * 5}'],
+        [layout#{$name}='column'] > [#{$flexName}='#{$i * 5}'] {
+            flex: 1 1 #{$value};
+            max-width: 100%;
+            max-height: #{$value};
+            box-sizing: border-box;
+        }
+    }
+
+    [layout='row'],
+    [layout#{$name}='row'] {
+        > [#{$flexName}='33'],
+        > [#{$flexName}='33'] {
+            flex: 1 1 33%;
+            max-width: calc(100% / 3);
+            max-height: 100%;
+            box-sizing: border-box;
+        }
+        > [#{$flexName}='34'],
+        > [#{$flexName}='34'] {
+            flex: 1 1 34%;
+            max-width: 34%;
+            max-height: 100%;
+            box-sizing: border-box;
+        }
+        > [#{$flexName}='66'],
+        > [#{$flexName}='66'] {
+            flex: 1 1 66%;
+            max-width: calc(200% / 3);
+            max-height: 100%;
+            box-sizing: border-box;
+        }
+        > [#{$flexName}='67'],
+        > [#{$flexName}='67'] {
+            flex: 1 1 67%;
+            max-width: 67%;
+            max-height: 100%;
+            box-sizing: border-box;
+        }
+    }
+    [layout='column'],
+    [layout#{$name}='column'] {
+        > [#{$flexName}='33'],
+        > [#{$flexName}='33'] {
+            flex: 1 1 33%;
+            max-width: 100%;
+            max-height: calc(100% / 3);
+            box-sizing: border-box;
+        }
+        > [#{$flexName}='34'],
+        > [#{$flexName}='34'] {
+            flex: 1 1 34%;
+            max-width: 100%;
+            max-height: 34%;
+            box-sizing: border-box;
+        }
+        > [#{$flexName}='66'],
+        > [#{$flexName}='66'] {
+            flex: 1 1 66%;
+            max-width: 100%;
+            max-height: calc(200% / 3);
+            box-sizing: border-box;
+        }
+        > [#{$flexName}='67'],
+        > [#{$flexName}='67'] {
+            flex: 1 1 67%;
+            max-width: 100%;
+            max-height: 67%;
+            box-sizing: border-box;
+        }
+    }
+}
+
+@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"] // defaults
+    {
+        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: start;
+    }
+
+    // Main Axis Center
+    [#{$name}='center'],
+    [#{$name}='center start'],
+    [#{$name}='center center'],
+    [#{$name}='center end'],
+    [#{$name}='center stretch'] {
+        justify-content: center;
+    }
+
+    // Main Axis End
+    [#{$name}="end"], //stretch
+  [#{$name}="end center"],
+  [#{$name}="end start"],
+  [#{$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%;
+
+        // IE11 overflow https://github.com/philipwalton/flexbugs#2-column-flex-items-set-to-align-itemscenter-overflow-their-container
+        & > * {
+            max-width: 100%;
+            box-sizing: border-box;
+        }
+    }
+
+    // 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%;
+        box-sizing: border-box;
+    }
+
+    // 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  stretch
+    [#{$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-padding-margin() {
+    [layout-padding] > [flex-sm],
+    [layout-padding] > [flex-lt-md] {
+        padding: math.div($layout-gutter-width, 4);
+    }
+    [layout-padding],
+    [layout-padding] > [flex],
+    [layout-padding] > [flex-gt-sm],
+    [layout-padding] > [flex-md],
+    [layout-padding] > [flex-lt-lg] {
+        padding: math.div($layout-gutter-width, 2);
+    }
+    [layout-padding] > [flex-gt-md],
+    [layout-padding] > [flex-lg] {
+        padding: math.div($layout-gutter-width, 1);
+    }
+
+    [layout-margin] > [flex-sm],
+    [layout-margin] > [flex-lt-md] {
+        margin: math.div($layout-gutter-width, 4);
+    }
+
+    [layout-margin],
+    [layout-margin] > [flex],
+    [layout-margin] > [flex-gt-sm],
+    [layout-margin] > [flex-md],
+    [layout-margin] > [flex-lt-lg] {
+        margin: math.div($layout-gutter-width, 2);
+    }
+
+    [layout-margin] > [flex-gt-md],
+    [layout-margin] > [flex-lg] {
+        margin: math.div($layout-gutter-width, 1);
+    }
+
+    [layout-wrap] {
+        flex-wrap: wrap;
+    }
+
+    [layout-nowrap] {
+        flex-wrap: nowrap;
+    }
+
+    [layout-fill] {
+        margin: 0;
+        width: 100%;
+        min-height: 100%;
+        height: 100%;
+    }
+}
+
+@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);
+}
+
+@mixin vd-layout() {
+    /*
+    *  Apply Mixins to create Layout/Flexbox styles
+    *
+    */
+    @include layouts_for_breakpoint();
+    @include layout-padding-margin();
+
+    /**
+    * `hide-gt-sm show-gt-lg` should hide from 600px to 1200px
+    * `show-md hide-gt-sm` should show from 0px to 960px and hide at >960px
+    * `hide-gt-md show-gt-sm` should show everywhere (show overrides hide)`
+    *
+    *  hide means hide everywhere
+    *  Sizes:
+    *         $layout-breakpoint-xs:     600px !default;
+    *         $layout-breakpoint-sm:     960px !default;
+    *         $layout-breakpoint-md:     1280px !default;
+    *         $layout-breakpoint-lg:     1920px !default;
+    */
+    @media (max-width: $layout-breakpoint-xs - 1) {
+        // Xtra-SMALL  SCREEN
+        [hide-xs],
+        [hide] {
+            &:not([show-xs]):not([show]) {
+                display: none;
+            }
+        }
+        @include layouts_for_breakpoint(xs);
+    }
+
+    @media (min-width: $layout-breakpoint-xs) {
+        // BIGGER THAN Xtra-SMALL SCREEN
+        @include layouts_for_breakpoint(gt-xs);
+    }
+
+    @media (min-width: $layout-breakpoint-xs) and (max-width: $layout-breakpoint-sm - 1) {
+        // SMALL SCREEN
+        [hide-sm],
+        [hide-gt-xs] {
+            &:not([show-gt-xs]):not([show-sm]):not([show]) {
+                display: none;
+            }
+        }
+        [hide-sm]:not([show-sm]):not([show]) {
+            display: none;
+        }
+        @include layouts_for_breakpoint(sm);
+    }
+
+    @media (min-width: $layout-breakpoint-sm) {
+        // BIGGER THAN SMALL SCREEN
+        @include layouts_for_breakpoint(gt-sm);
+    }
+
+    @media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) {
+        // MEDIUM SCREEN
+        [hide],
+        [hide-gt-xs],
+        [hide-gt-sm] {
+            &:not([show-gt-xs]):not([show-gt-sm]):not([show-md]):not([show]) {
+                display: none;
+            }
+        }
+        [hide-md]:not([show-md]):not([show]) {
+            display: none;
+        }
+        @include layouts_for_breakpoint(md);
+    }
+
+    @media (min-width: $layout-breakpoint-md) {
+        // BIGGER THAN MEDIUM SCREEN
+        @include layouts_for_breakpoint(gt-md);
+    }
+
+    @media (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) {
+        // LARGE SCREEN
+        [hide],
+        [hide-gt-xs],
+        [hide-gt-sm],
+        [hide-gt-md] {
+            &:not([show-gt-xs]):not([show-gt-sm]):not([show-gt-md]):not([show-lg]):not([show]) {
+                display: none;
+            }
+        }
+        [hide-lg]:not([show-lg]):not([show]) {
+            display: none;
+        }
+
+        @include layouts_for_breakpoint(lg);
+    }
+
+    @media (min-width: $layout-breakpoint-lg) {
+        // BIGGER THAN LARGE SCREEN
+        @include layouts_for_breakpoint(gt-lg);
+        @include layouts_for_breakpoint(xl);
+
+        // BIGGER THAN LARGE SCREEN
+        [hide],
+        [hide-gt-xs],
+        [hide-gt-sm],
+        [hide-gt-md],
+        [hide-gt-lg] {
+            &:not([show-gt-xs]):not([show-gt-sm]):not([show-gt-md]):not([show-gt-lg]):not([show-xl]):not([show]) {
+                display: none;
+            }
+        }
+        [hide-xl]:not([show-xl]):not([show-gt-lg]):not([show]) {
+            display: none;
+        }
+    }
+}

package/lib/common/styles/_rtl.scss

@@ -0,0 +1,28 @@
+// mixin definition ; sets LTR and RTL within the same style call
+// @see https://css-tricks.com/almanac/properties/d/direction/
+
+@mixin rtl($prop, $value, $rtl-value) {
+    #{$prop}: $value;
+
+    html[dir='rtl'] & {
+        #{$prop}: $rtl-value;
+        unicode-bidi: embed;
+    }
+    body[dir='rtl'] & {
+        #{$prop}: $rtl-value;
+        unicode-bidi: embed;
+    }
+    [dir='rtl'] & {
+        #{$prop}: $rtl-value;
+        unicode-bidi: embed;
+    }
+
+    bdo[dir='rtl'] {
+        direction: rtl;
+        unicode-bidi: bidi-override;
+    }
+    bdo[dir='ltr'] {
+        direction: ltr;
+        unicode-bidi: bidi-override;
+    }
+}

package/lib/common/styles/_styles.scss

@@ -0,0 +1,12 @@
+// mixin for material-icons
+@import "font/font";
+// mixin for vd-core
+@import "core/core";
+// mixin for vd-typography
+@import "typography";
+// mixin for vd-layout
+@import "layout";
+// mixin for vd-colors
+@import "colors/colors";
+// mixin for vd-utilities
+@import "utilities/utilities";

package/lib/common/styles/_theme-functions.scss

@@ -0,0 +1,27 @@
+// @use '~@angular/material' as mat;
+
+@function rem($multiplier) {
+    $font-size: 10px;
+    @return $multiplier * $font-size;
+}
+
+// Gets a color from a theme palette (the output of mat-palette).
+// The hue can be one of the standard values (500, A400, etc.), one of the three preconfigured
+// hues (default, lighter, darker), or any of the aforementioned prefixed with "-contrast".
+//
+// @param $color-map The theme palette (output of mat-palette).
+// @param $hue The hue from the palette to use. If this is a value between 0 and 1, it will
+//     be treated as opacity.
+// @param $opacity The alpha channel value for the color.
+@function mat-color($palette, $hue: default, $opacity: null) {
+    // If hueKey is a number between zero and one, then it actually contains an
+    // opacity value, so recall this function with the default hue and that given opacity.
+    @if type-of($hue) == number and $hue >= 0 and $hue <= 1 {
+        @return mat.get-color-from-palette($palette, default, $hue);
+    }
+
+    $color: map-get($palette, $hue);
+    $opacity: if($opacity == null, opacity($color), $opacity);
+
+    @return rgba($color, $opacity);
+}

package/lib/common/styles/_typography-functions.scss

@@ -0,0 +1,35 @@
+// Utility for fetching a nested value from a typography config.
+@function _vd-get-type-value($config, $level, $name) {
+    @return map-get(map-get($config, $level), $name);
+}
+
+// Gets the font size for a level inside a typography config.
+@function vd-font-size($config, $level) {
+    @return _vd-get-type-value($config, $level, font-size);
+}
+
+// Gets the line height for a level inside a typography config.
+@function vd-line-height($config, $level) {
+    @return _vd-get-type-value($config, $level, line-height);
+}
+
+// Gets the font weight for a level inside a typography config.
+@function vd-font-weight($config, $level) {
+    @return _vd-get-type-value($config, $level, font-weight);
+}
+
+// Gets the font-family from a typography config and removes the quotes around it.
+@function vd-font-family($config, $level: null) {
+    $font-family: map-get($config, font-family);
+
+    @if $level != null {
+        $font-family: _vd-get-type-value($config, $level, font-family);
+    }
+
+    @return unquote($font-family);
+}
+
+// Represents a typography level from the Material design spec.
+@function vd-typography-level($font-size, $line-height: $font-size, $font-weight: 400) {
+    @return (font-size: $font-size, line-height: $line-height, font-weight: $font-weight);
+}