novo-elements 5.1.1 → 5.2.3

package/services/options/OptionsService.d.ts

@@ -1,9 +1,9 @@
-import { HttpClient } from '@angular/common/http';
-export declare class OptionsService {
-    constructor();
-    getOptionsConfig(http: HttpClient, field: any, config: {
-        token?: string;
-        restUrl?: string;
-        military?: boolean;
-    }): any;
-}
+import { HttpClient } from '@angular/common/http';
+export declare class OptionsService {
+    constructor();
+    getOptionsConfig(http: HttpClient, field: any, config: {
+        token?: string;
+        restUrl?: string;
+        military?: boolean;
+    }): any;
+}

package/services/security/Security.d.ts

@@ -1,19 +1,19 @@
-import { EventEmitter } from '@angular/core';
-export declare class Security {
-    credentials: string[];
-    change: EventEmitter<any>;
-    grant(data: any[] | Object): void;
-    has(value: any): boolean;
-    revoke(value: any): void;
-    clear(): void;
-    subscribe(fn: any): void;
-    checkRoutes(routes: {
-        entities?: any[];
-        permissions?: any[] | Function;
-        path?: string;
-        label?: string;
-        canDisable?: Boolean;
-    }[], options: {
-        entityType?: string;
-    }): any;
-}
+import { EventEmitter } from '@angular/core';
+export declare class Security {
+    credentials: string[];
+    change: EventEmitter<any>;
+    grant(data: any[] | Object): void;
+    has(value: any): boolean;
+    revoke(value: any): void;
+    clear(): void;
+    subscribe(fn: any): void;
+    checkRoutes(routes: {
+        entities?: any[];
+        permissions?: any[] | Function;
+        path?: string;
+        label?: string;
+        canDisable?: Boolean;
+    }[], options: {
+        entityType?: string;
+    }): any;
+}

package/services/storage/storage.service.d.ts

@@ -1,5 +1,5 @@
-export declare class LocalStorageService {
-    setItem(key: any, value: any): any;
-    getItem(key: any): any;
-    removeItem(key: any): any;
-}
+export declare class LocalStorageService {
+    setItem(key: any, value: any): any;
+    getItem(key: any): any;
+    removeItem(key: any): any;
+}

package/services/template/NovoTemplateService.d.ts

@@ -1,7 +1,7 @@
-export declare class NovoTemplateService {
-    templates: any;
-    constructor();
-    getAll(): any;
-    addDefault(key: string, template: any): void;
-    addCustom(key: string, template: any): void;
-}
+export declare class NovoTemplateService {
+    templates: any;
+    constructor();
+    getAll(): any;
+    addDefault(key: string, template: any): void;
+    addCustom(key: string, template: any): void;
+}

package/styles/content/typography.scss

@@ -0,0 +1,200 @@
+// HTML Root
+// --------------------------------------------------
+html {
+  font-family: $base-font-family;
+  font-size: $base-font-size;
+  color: $base-font-color;
+}
+
+// Headers
+// --------------------------------------------------
+h1 {
+  font-size: 2.5em;
+  font-weight: 400;
+  margin: 0;
+  padding: 0.45em 0 0.35em;
+}
+
+h2 {
+  font-size: 2em;
+  font-weight: 500;
+  margin: 0;
+  padding: 0.75em 0 0.3em;
+}
+
+h3 {
+  font-size: 1.75em;
+  font-weight: 300;
+  margin: 0;
+  padding: 0.6em 0 0.4em;
+}
+
+h4 {
+  font-size: 1.375em;
+  font-weight: 400;
+  margin: 0;
+  padding: 0.75em 0 0.5em;
+}
+
+h5 {
+  font-size: 1.125em;
+  font-weight: 700;
+  margin: 0;
+  padding: 0.75em 0 0.25em;
+  text-transform: uppercase;
+  color: rgba(0, 0, 0, 0.45);
+}
+
+h6 {
+  font-size: 1.125em;
+  font-weight: 500;
+  margin: 0;
+  padding: 0.75em 0 0.25em;
+}
+
+// Body And Paragraph
+// --------------------------------------------------
+p {
+  font-size: 1em;
+  line-height: 1.7em;
+  margin: 0;
+  padding: 0.25em 0 0.55em;
+  // max-width: 33em;  // @bkimball removed this on 9/7/2018
+}
+
+// Special Classes
+// --------------------------------------------------
+.caption {
+  font-size: 1.125em;
+  font-weight: 700;
+  text-transform: uppercase;
+  opacity: 0.55;
+  letter-spacing: 0.1px;
+}
+
+h1.novo-section-header,
+h2.novo-section-header,
+h3.novo-section-header,
+h4.novo-section-header,
+h5.novo-section-header,
+h6.novo-section-header {
+  background: $off-white;
+  box-sizing: content-box;
+  font-weight: 400;
+  display: flex;
+  width: 100%;
+  padding: 1em 0.5em 1em 1.5em;
+  margin-left: -1.5em;
+  margin-right: -1.5em;
+  > i {
+    display: flex;
+    margin-right: 10px;
+    &.bhi-section {
+      // Special case for icons that are not vertically centered
+      margin-top: -0.2em;
+    }
+  }
+}
+
+// Iconography
+// --------------------------------------------------
+$icon-height: 1.7em; // 24px Base background size
+$icon-width: 1.7em; // 24px Base background size
+$base-icon-size: 1.4em; //18px Base font-size
+i {
+  font-size: $base-icon-size;
+  display: inline-block;
+  &[theme] {
+    &[theme='contained'] {
+      font-size: 0.8em;
+      border-radius: 0.55em;
+      height: $icon-height;
+      width: $icon-width;
+      text-align: center;
+      &:before {
+        vertical-align: baseline;
+        line-height: 1.8;
+      }
+      @each $entity, $color in $entity-colors {
+        &.#{$entity} {
+          color: $white;
+          background: $color;
+        }
+      }
+      @each $key, $color in $analytics-colors {
+        &.#{$key} {
+          color: $white;
+          background: $color;
+        }
+      }
+      &.large {
+        font-size: 1.2em;
+      }
+    }
+    &[theme='entity'] {
+      @each $entity, $color in $entity-colors {
+        &.#{$entity} {
+          color: $color;
+          background: transparent;
+        }
+      }
+    }
+  }
+}
+
+// Nested icons
+figcaption,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+span {
+  i {
+    margin: 0 0.45em 0 0;
+    padding: 0;
+    &:before {
+      vertical-align: middle !important;
+    }
+    &[theme] {
+      &[theme='contained'] {
+        font-size: 0.8em;
+        vertical-align: 0.1em;
+        &:before {
+          vertical-align: baseline;
+          line-height: $icon-width;
+          display: block;
+        }
+      }
+    }
+  }
+}
+
+// Hyperlinks
+// --------------------------------------------------
+a {
+  color: $positive;
+  font-weight: 600;
+  text-decoration: none;
+  cursor: pointer;
+  transition: color 200ms ease-in-out;
+  &:visited {
+    color: $positive;
+  }
+  &:active,
+  &:hover {
+    color: darken($positive, 10%);
+  }
+}
+
+// Code
+// --------------------------------------------------
+code {
+  font-size: 0.8em;
+  background: #f8f8f8;
+  border: 1px solid #e9eaea;
+  color: #4c545a;
+  padding: 2px 4px;
+}

package/styles/global/cdk.scss

@@ -0,0 +1,106 @@
+// We want overlays to always appear over user content, so set a baseline
+// very high z-index for the overlay container, which is where we create the new
+// stacking context for all overlays.
+$cdk-z-index-overlay-container: 1000;
+$cdk-z-index-overlay: 1000;
+$cdk-z-index-overlay-backdrop: 1000;
+
+// Background color for all of the backdrops
+$cdk-overlay-dark-backdrop-background: rgba(0, 0, 0, 0.6);
+
+// Default backdrop animation is based on the Material Design swift-ease-out.
+$backdrop-animation-duration: 400ms !default;
+$backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
+
+@mixin cdk-overlay() {
+  .cdk-overlay-container,
+  .cdk-global-overlay-wrapper {
+    // Disable events from being captured on the overlay container.
+    pointer-events: none;
+
+    // The container should be the size of the viewport.
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+  }
+
+  // The overlay-container is an invisible element which contains all individual overlays.
+  .cdk-overlay-container {
+    position: fixed;
+    z-index: $cdk-z-index-overlay-container;
+
+    &:empty {
+      // Hide the element when it doesn't have any child nodes. This doesn't
+      // include overlays that have been detached, rather than disposed.
+      display: none;
+    }
+  }
+
+  // We use an extra wrapper element in order to use make the overlay itself a flex item.
+  // This makes centering the overlay easy without running into the subpixel rendering
+  // problems tied to using `transform` and without interfering with the other position
+  // strategies.
+  .cdk-global-overlay-wrapper {
+    display: flex;
+    position: absolute;
+    z-index: $cdk-z-index-overlay;
+  }
+
+  // A single overlay pane.
+  .cdk-overlay-pane {
+    position: absolute;
+    pointer-events: auto;
+    box-sizing: border-box;
+    z-index: $cdk-z-index-overlay;
+  }
+
+  .cdk-overlay-backdrop {
+    // TODO(jelbourn): reuse sidenav fullscreen mixin.
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    z-index: $cdk-z-index-overlay-backdrop;
+    pointer-events: auto;
+    -webkit-tap-highlight-color: transparent;
+    transition: opacity $backdrop-animation-duration $backdrop-animation-timing-function;
+    opacity: 0;
+
+    &.cdk-overlay-backdrop-showing {
+      opacity: 0.48;
+    }
+  }
+
+  .cdk-overlay-dark-backdrop {
+    background: $cdk-overlay-dark-backdrop-background;
+  }
+
+  .cdk-overlay-transparent-backdrop {
+    // Note: as of Firefox 57, having the backdrop be `background: none` will prevent it from
+    // capturing the user's mouse scroll events. Since we also can't use something like
+    // `rgba(0, 0, 0, 0)`, we work around the inconsistency by not setting the background at
+    // all and using `opacity` to make the element transparent.
+    &,
+    &.cdk-overlay-backdrop-showing {
+      opacity: 0;
+    }
+  }
+
+  // Used when disabling global scrolling.
+  .cdk-global-scrollblock {
+    position: fixed;
+
+    // Necessary for the content not to lose its width. Note that we're using 100%, instead of
+    // 100vw, because 100vw includes the width plus the scrollbar, whereas 100% is the width
+    // that the element had before we made it `fixed`.
+    width: 100%;
+
+    // Note: this will always add a scrollbar to whatever element it is on, which can
+    // potentially result in double scrollbars. It shouldn't be an issue, because we won't
+    // block scrolling on a page that doesn't have a scrollbar in the first place.
+    overflow-y: scroll;
+  }
+}

package/styles/global/flex-grid.scss

@@ -0,0 +1,156 @@
+/**
+ * Flex Grid -
+ * Version: 0.3.2
+ *
+ * Simple grid built with flex box and sass.
+ *
+ * Matthew Simo - matthew.a.simo@gmail.com
+ */
+
+/**
+ * Grid setup
+ *
+ * The grid will calculate dimensions based on these two variables:
+ * $fg-columns will inform the grid loops how many columns there should be.
+ * $fg-gutter will inform the grid loops how big eac column's gutters should be.
+ *
+ * The grid will name columns, rows, offsets based on these three variables:
+ * $fg-class-row string used for the row class
+ * $fg-class-col string used for the column class
+ * $fg-class-off string used for the offset class
+ */
+$fg-columns: 12 !default;
+$fg-gutter: 0.5rem !default;
+$fg-class-row: 'row' !default;
+$fg-class-col: 'col' !default;
+$fg-class-off: 'off' !default;
+
+/**
+ * Break point namespace object
+ *
+ * Set the default namespace object with these defaults with the
+ * understanding that you can pass in whatever you might require for your site.
+ *
+ * $fg-breakpoints is a Sass list with nested lists inside. Each sub list defines two things.
+ * 1. The namespace for that breakpoint. (Required) (i.e. xs, sm, md, lg)
+ * 2. The min-width measurement for the breakpoint for that namespace. (i.e. 48em, 62em, 75em)
+ *
+ * Note: These should be in the proper order (at least till libsass handles map keys properly).
+ *
+ * Note: If the measurement is left out then it will be skipped when generating
+ * the grid and applied to global styles.
+ *
+ */
+$fg-breakpoints: ((xs), (sm, 768px), (md, 992px), (lg, 1200px)) !default;
+
+/**
+ * Class Name Defaults
+ *
+ * Define class names for columns, rows and offsets in case compatibility with other
+ * libraries is necessary.
+
+/**
+ * Calculate column size percentage
+ */
+@function get-col-percent($column-num) {
+  @return $column-num / $fg-columns * 100%;
+}
+
+/**
+ * Spacing mixin to create uniform margin/padding
+ */
+@mixin spacing($value, $type: margin, $orientation: vertical) {
+  @if $orientation == vertical {
+    #{ $type }-top: $value;
+    #{ $type }-bottom: $value;
+  } @else {
+    #{ $type }-left: $value;
+    #{ $type }-right: $value;
+  }
+}
+
+/**
+ * Row wrapper class, flex box parent.
+ */
+.#{ $fg-class-row } {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  @include spacing((-$fg-gutter), margin, horizontal);
+}
+
+%#{ $fg-class-col } {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 0;
+  flex-shrink: 0;
+  @include spacing(($fg-gutter), padding, horizontal);
+}
+
+%#{ $fg-class-col }-flex {
+  @extend %#{ $fg-class-col };
+  flex-grow: 1;
+  flex-basis: 0;
+  max-width: 100%;
+}
+
+/**
+ * Generate a set of grid column classes using a namespace
+ *
+ * .#{ $fg-class-col }-[namespace] for intelligent column division
+ * .#{ $fg-class-col }-[namespace]-[number] for a column that covers a specific number of columns (e.g. 1-12 by default)
+ * .#{ $fg-class-off }-[namespace]-[number] for pushing a col a specific number of columns (e.g. 1-11 by default)
+ */
+@mixin grid-base($namespace) {
+  .#{ $fg-class-col }-#{$namespace} {
+    @extend %#{ $fg-class-col }-flex;
+  }
+  @for $i from 1 through $fg-columns {
+    .#{ $fg-class-col }-#{$namespace}-#{$i} {
+      @extend %#{ $fg-class-col };
+    }
+  }
+}
+
+@mixin grid-sizes($namespace) {
+  // Run the loop for as many columns as speficied
+  @for $i from 1 through $fg-columns {
+    .#{ $fg-class-col }-#{$namespace}-#{$i} {
+      flex-basis: get-col-percent($i);
+      max-width: get-col-percent($i);
+    }
+  }
+  @for $i from 1 through $fg-columns {
+    // Don't include the .off class for the last column
+    @if ($i != $fg-columns) {
+      .#{ $fg-class-off }-#{$namespace}-#{$i} {
+        margin-left: get-col-percent($i);
+      }
+    }
+  }
+}
+
+/**
+ * Build the grid in two steps, to help minimize file size
+ * Step 1, for each namespace, create the grid-base
+ * Step 2, for each namespace, wrap the col width/offset measurements in their breakpoint media query
+ */
+@each $val in $fg-breakpoints {
+  $namespace: nth($val, 1);
+  @include grid-base($namespace);
+}
+
+@each $val in $fg-breakpoints {
+  @if length($val) == 1 {
+    $namespace: nth($val, 1);
+    @include grid-sizes($namespace);
+  } @else {
+    $namespace: nth($val, 1);
+    $size: nth($val, 2);
+    @media only screen and (min-width: #{$size}) {
+      @include grid-sizes($namespace);
+    }
+  }
+}