novo-elements 5.1.1 → 5.2.3

package/elements/list/List.module.d.ts

@@ -1,2 +1,2 @@
-export declare class NovoListModule {
-}
+export declare class NovoListModule {
+}

package/elements/list/List.scss

@@ -0,0 +1,134 @@
+novo-list {
+  display: flex;
+  &.vertical-list {
+    flex-direction: column;
+  }
+  &.horizontal-list {
+    flex-direction: row;
+  }
+  @each $entity, $color in $entity-colors {
+    &[theme='#{$entity}'] {
+      novo-list-item {
+        background: $color;
+        color: #fff;
+        border-bottom: 1px solid rgba(#fff, 0.1);
+        i {
+          color: #fff;
+        }
+        item-title h6 {
+          color: #fff;
+        }
+        item-content {
+          > * {
+            color: rgba(#fff, 0.65);
+          }
+        }
+      }
+    }
+  }
+  @each $basic, $color in $app-colors {
+    &[theme='#{$basic}'] {
+      novo-list-item {
+        background: $color;
+        color: #fff;
+        border-bottom: 1px solid rgba(#fff, 0.1);
+        i {
+          color: #fff;
+        }
+        item-title h6 {
+          color: #fff;
+        }
+        item-content {
+          > * {
+            color: rgba(#fff, 0.65);
+          }
+        }
+      }
+    }
+  }
+}
+
+novo-list-item {
+  background: #fff;
+  border-bottom: 1px solid #f4f4f4;
+  padding: 15px;
+  display: flex;
+  flex-direction: row;
+  &:last-child {
+    border-bottom: none;
+  }
+  .list-item {
+    display: flex;
+    flex-direction: column;
+    flex: 1 0 0;
+  }
+  item-header {
+    display: flex;
+    align-items: center;
+    item-avatar {
+      margin-right: 0.5em;
+      font-size: 20px;
+      i {
+        @each $entity, $color in $entity-colors {
+          &.#{$entity} {
+            background: $color;
+          }
+        }
+      }
+    }
+    item-title {
+      flex: 2 0 0;
+      h6 {
+        margin: 0;
+        color: #434343;
+        padding: 0;
+      }
+    }
+    item-header-end {
+      flex: 1 0 0;
+      text-align: right;
+    }
+  }
+  .avatar item-content {
+    margin-left: 2.7em;
+  }
+  item-content {
+    display: flex;
+    margin-left: 0.2em;
+    > * {
+      color: rgba(#434343, 0.85);
+    }
+    i {
+      &.positive {
+        color: map-get($analytics-colors, 'grass');
+      }
+      &.negative {
+        color: map-get($analytics-colors, 'grapefruit');
+      }
+      @each $analytic, $color in $analytics-colors {
+        &.#{$analytic} {
+          color: $color;
+        }
+      }
+      @each $entity, $color in $entity-colors {
+        &.#{$entity} {
+          color: $color;
+        }
+      }
+    }
+    &.vertical-list {
+      flex-direction: column;
+    }
+    &.horizontal-list {
+      flex-direction: row;
+    }
+  }
+  item-end {
+    align-self: center;
+    flex: 1;
+    text-align: right;
+    i {
+      line-height: 1.4em;
+    }
+  }
+}

package/elements/loading/Loading.d.ts

@@ -1,26 +1,26 @@
-import { EmbeddedViewRef, QueryList, TemplateRef, ViewContainerRef } from '@angular/core';
-export declare class NovoLoadingElement {
-    theme: string;
-}
-export declare class NovoSpinnerElement {
-    theme: string;
-    inverse: boolean;
-    baseHref: string;
-}
-export declare class NovoSkeletonDirective {
-    skeleton: boolean;
-}
-export declare class NovoLoadedDirective {
-}
-export declare class NovoIsLoadingDirective {
-    private viewContainer;
-    skeletonTemplates: QueryList<TemplateRef<any>>;
-    loadedTemplates: QueryList<TemplateRef<any>>;
-    private hasView;
-    private skeletonViews;
-    private loadedViews;
-    constructor(viewContainer: ViewContainerRef);
-    set isLoading(condition: boolean);
-    createViews(templates: QueryList<TemplateRef<any>>): EmbeddedViewRef<any>[];
-    destroyViews(views: EmbeddedViewRef<any>[]): void;
-}
+import { EmbeddedViewRef, QueryList, TemplateRef, ViewContainerRef } from '@angular/core';
+export declare class NovoLoadingElement {
+    theme: string;
+}
+export declare class NovoSpinnerElement {
+    theme: string;
+    inverse: boolean;
+    baseHref: string;
+}
+export declare class NovoSkeletonDirective {
+    skeleton: boolean;
+}
+export declare class NovoLoadedDirective {
+}
+export declare class NovoIsLoadingDirective {
+    private viewContainer;
+    skeletonTemplates: QueryList<TemplateRef<any>>;
+    loadedTemplates: QueryList<TemplateRef<any>>;
+    private hasView;
+    private skeletonViews;
+    private loadedViews;
+    constructor(viewContainer: ViewContainerRef);
+    set isLoading(condition: boolean);
+    createViews(templates: QueryList<TemplateRef<any>>): EmbeddedViewRef<any>[];
+    destroyViews(views: EmbeddedViewRef<any>[]): void;
+}

package/elements/loading/Loading.module.d.ts

@@ -1,2 +1,2 @@
-export declare class NovoLoadingModule {
-}
+export declare class NovoLoadingModule {
+}

package/elements/loading/Loading.scss

@@ -0,0 +1,56 @@
+novo-loading {
+  padding: 20px;
+  display: flex;
+  flex-direction: row;
+  font-size: 13px;
+
+  span.dot {
+    display: block;
+    border-radius: 50%;
+    margin: 3px;
+    height: 13px;
+    width: 13px;
+    @include enumerate($dot-colors, 'background-color', 'map-val', '');
+    @include animationMapDelay($dot-colors, jump, 1600ms, ease-in-out, 70ms, forward, infinite, '', '');
+  }
+  @each $analytics, $color in $analytics-colors {
+    &.#{$analytics} {
+      span.dot {
+        background-color: $color;
+      }
+    }
+  }
+
+  &.white,
+  &[inverse] {
+    span.dot {
+      background-color: #fff !important;
+    }
+  }
+}
+
+@keyframes jump {
+  0% {
+    transform: translateY(0px);
+  }
+
+  30% {
+    transform: translateY(0px);
+    opacity: 1;
+  }
+
+  45% {
+    transform: translateY(-1.5em);
+    opacity: 0.5;
+  }
+
+  60% {
+    transform: translateY(0.8em);
+    opacity: 0.95;
+  }
+
+  100% {
+    transform: translateY(0px);
+    opacity: 1;
+  }
+}

package/elements/loading/NovoSpinner.scss

@@ -0,0 +1,172 @@
+novo-spinner {
+  display: block;
+
+  svg.bullhornSpinner {
+    transform-origin: center center;
+    animation: spin 3400ms infinite;
+    @each $analytics, $color in $analytics-colors {
+      &.#{$analytics} {
+        .circleGroup circle {
+          fill: $color;
+
+          &:nth-of-type(odd) {
+            fill: lighten($color, 5%);
+          }
+        }
+      }
+    }
+
+    .circleGroup circle {
+      //cx: 47;
+      //cy: 47;
+      //r: 6;
+      fill: $dark;
+
+      &:nth-of-type(odd) {
+        fill: lighten($dark, 5%);
+      }
+      transform-origin: center center;
+      @for $i from 1 through 5 {
+        &:nth-of-type(#{$i}) {
+          //animation: circle#{$i} 3400ms infinite;
+          animation-delay: $i * 70ms;
+        }
+      }
+    }
+
+    &.multicolor {
+      .circleGroup circle {
+        @include enumerate($dot-colors, 'fill', 'map-val', '');
+      }
+    }
+
+    &.white,
+    &[inverse] {
+      .circleGroup circle {
+        fill: white;
+
+        &:nth-of-type(odd) {
+          fill: darken(white, 5%);
+        }
+      }
+    }
+  }
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    75% {
+      transform: rotate(1360deg);
+    }
+
+    100% {
+      transform: rotate(1444deg);
+    }
+  }
+  @keyframes circle1 {
+    0% {
+      cx: 43;
+      cy: 43;
+    }
+
+    25% {
+      cx: 54;
+      cy: 45;
+    }
+
+    75% {
+      cx: 80;
+      cy: 40;
+    }
+
+    100% {
+      cx: 43;
+      cy: 43;
+    }
+  }
+  @keyframes circle2 {
+    0% {
+      cx: 43;
+      cy: 43;
+    }
+
+    25% {
+      cx: 48;
+      cy: 41;
+    }
+
+    75% {
+      cx: 48;
+      cy: 18;
+    }
+
+    100% {
+      cx: 43;
+      cy: 43;
+    }
+  }
+  @keyframes circle3 {
+    0% {
+      cx: 43;
+      cy: 43;
+    }
+
+    25% {
+      cx: 42;
+      cy: 45;
+    }
+
+    75% {
+      cx: 15;
+      cy: 40;
+    }
+
+    100% {
+      cx: 43;
+      cy: 43;
+    }
+  }
+  @keyframes circle4 {
+    0% {
+      cx: 43;
+      cy: 43;
+    }
+
+    25% {
+      cx: 44;
+      cy: 52;
+    }
+
+    75% {
+      cx: 29;
+      cy: 78;
+    }
+
+    100% {
+      cx: 43;
+      cy: 43;
+    }
+  }
+  @keyframes circle5 {
+    0% {
+      cx: 43;
+      cy: 43;
+    }
+
+    25% {
+      cx: 52;
+      cy: 52;
+    }
+
+    75% {
+      cx: 68;
+      cy: 78;
+    }
+
+    100% {
+      cx: 43;
+      cy: 43;
+    }
+  }
+}

package/elements/modal/Modal.d.ts

@@ -1,45 +1,45 @@
-import { ViewContainerRef, AfterViewInit, EventEmitter, OnInit } from '@angular/core';
-import { ComponentUtils } from '../../utils/component-utils/ComponentUtils';
-/**
- * Params that can be passed to the Modal
- */
-export interface ModalParams {
-    [propName: string]: any;
-}
-export declare class NovoModalParams implements ModalParams {
-}
-/**
- * Reference to an opened dialog.
- */
-export declare class NovoModalRef {
-    component: any;
-    contentRef: any;
-    containerRef: any;
-    isClosed: boolean;
-    _onClosed: any;
-    get onClosed(): any;
-    open(): void;
-    close(result?: any): void;
-}
-export declare class NovoModalContainerElement implements AfterViewInit {
-    private modalRef;
-    private componentUtils;
-    container: ViewContainerRef;
-    constructor(modalRef: NovoModalRef, componentUtils: ComponentUtils);
-    ngAfterViewInit(): void;
-}
-export declare class NovoModalElement {
-    private modalRef;
-    constructor(modalRef: NovoModalRef);
-    close(): void;
-}
-export declare class NovoModalNotificationElement implements OnInit {
-    private modalRef;
-    type: string;
-    icon: string;
-    cancel: EventEmitter<any>;
-    iconType: string;
-    constructor(modalRef: NovoModalRef);
-    close(): void;
-    ngOnInit(): void;
-}
+import { ViewContainerRef, AfterViewInit, EventEmitter, OnInit } from '@angular/core';
+import { ComponentUtils } from '../../utils/component-utils/ComponentUtils';
+/**
+ * Params that can be passed to the Modal
+ */
+export interface ModalParams {
+    [propName: string]: any;
+}
+export declare class NovoModalParams implements ModalParams {
+}
+/**
+ * Reference to an opened dialog.
+ */
+export declare class NovoModalRef {
+    component: any;
+    contentRef: any;
+    containerRef: any;
+    isClosed: boolean;
+    _onClosed: any;
+    get onClosed(): any;
+    open(): void;
+    close(result?: any): void;
+}
+export declare class NovoModalContainerElement implements AfterViewInit {
+    private modalRef;
+    private componentUtils;
+    container: ViewContainerRef;
+    constructor(modalRef: NovoModalRef, componentUtils: ComponentUtils);
+    ngAfterViewInit(): void;
+}
+export declare class NovoModalElement {
+    private modalRef;
+    constructor(modalRef: NovoModalRef);
+    close(): void;
+}
+export declare class NovoModalNotificationElement implements OnInit {
+    private modalRef;
+    type: string;
+    icon: string;
+    cancel: EventEmitter<any>;
+    iconType: string;
+    constructor(modalRef: NovoModalRef);
+    close(): void;
+    ngOnInit(): void;
+}