novo-elements 5.1.1 → 5.2.3

package/elements/time-picker/TimePickerInput.d.ts

@@ -1,52 +1,52 @@
-import { ChangeDetectorRef, ElementRef, OnInit, EventEmitter } from '@angular/core';
-import { ControlValueAccessor } from '@angular/forms';
-import { NovoOverlayTemplateComponent } from '../overlay/Overlay';
-import { NovoLabelService } from '../../services/novo-label-service';
-import { DateFormatService } from '../../services/date-format/DateFormat';
-export declare class NovoTimePickerInputElement implements OnInit, ControlValueAccessor {
-    element: ElementRef;
-    labels: NovoLabelService;
-    dateFormatService: DateFormatService;
-    protected _changeDetectorRef: ChangeDetectorRef;
-    value: any;
-    formattedValue: string;
-    /** View -> model callback called when value changes */
-    _onChange: (value: any) => void;
-    /** View -> model callback called when autocomplete has been touched */
-    _onTouched: () => void;
-    name: string;
-    placeholder: string;
-    military: boolean;
-    maskOptions: any;
-    disabled: boolean;
-    blurEvent: EventEmitter<FocusEvent>;
-    focusEvent: EventEmitter<FocusEvent>;
-    /** Element for the panel containing the autocomplete options. */
-    overlay: NovoOverlayTemplateComponent;
-    constructor(element: ElementRef, labels: NovoLabelService, dateFormatService: DateFormatService, _changeDetectorRef: ChangeDetectorRef);
-    ngOnInit(): void;
-    /** BEGIN: Convenient Panel Methods. */
-    openPanel(): void;
-    closePanel(): void;
-    get panelOpen(): boolean;
-    /** END: Convenient Panel Methods. */
-    _handleKeydown(event: KeyboardEvent): void;
-    _handleInput(event: KeyboardEvent): void;
-    _handleBlur(event: FocusEvent): void;
-    _handleFocus(event: FocusEvent): void;
-    writeValue(value: any): void;
-    registerOnChange(fn: (value: any) => {}): void;
-    registerOnTouched(fn: () => {}): void;
-    setDisabledState(disabled: boolean): void;
-    dispatchOnChange(newValue?: any, skip?: boolean): void;
-    private _setTriggerValue;
-    setValue(event: any | null): void;
-    setValueAndClose(event: any | null): void;
-    /**
-     * Clear any previous selected option and emit a selection change event for this option
-     */
-    clearValue(): void;
-    formatDateValue(value: any): string;
-    get hasValue(): boolean;
-    scrollToIndex(index: number): void;
-}
+import { ChangeDetectorRef, ElementRef, OnInit, EventEmitter } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { NovoOverlayTemplateComponent } from '../overlay/Overlay';
+import { NovoLabelService } from '../../services/novo-label-service';
+import { DateFormatService } from '../../services/date-format/DateFormat';
+export declare class NovoTimePickerInputElement implements OnInit, ControlValueAccessor {
+    element: ElementRef;
+    labels: NovoLabelService;
+    dateFormatService: DateFormatService;
+    protected _changeDetectorRef: ChangeDetectorRef;
+    value: any;
+    formattedValue: string;
+    /** View -> model callback called when value changes */
+    _onChange: (value: any) => void;
+    /** View -> model callback called when autocomplete has been touched */
+    _onTouched: () => void;
+    name: string;
+    placeholder: string;
+    military: boolean;
+    maskOptions: any;
+    disabled: boolean;
+    blurEvent: EventEmitter<FocusEvent>;
+    focusEvent: EventEmitter<FocusEvent>;
+    /** Element for the panel containing the autocomplete options. */
+    overlay: NovoOverlayTemplateComponent;
+    constructor(element: ElementRef, labels: NovoLabelService, dateFormatService: DateFormatService, _changeDetectorRef: ChangeDetectorRef);
+    ngOnInit(): void;
+    /** BEGIN: Convenient Panel Methods. */
+    openPanel(): void;
+    closePanel(): void;
+    get panelOpen(): boolean;
+    /** END: Convenient Panel Methods. */
+    _handleKeydown(event: KeyboardEvent): void;
+    _handleInput(event: KeyboardEvent): void;
+    _handleBlur(event: FocusEvent): void;
+    _handleFocus(event: FocusEvent): void;
+    writeValue(value: any): void;
+    registerOnChange(fn: (value: any) => {}): void;
+    registerOnTouched(fn: () => {}): void;
+    setDisabledState(disabled: boolean): void;
+    dispatchOnChange(newValue?: any, skip?: boolean): void;
+    private _setTriggerValue;
+    setValue(event: any | null): void;
+    setValueAndClose(event: any | null): void;
+    /**
+     * Clear any previous selected option and emit a selection change event for this option
+     */
+    clearValue(): void;
+    formatDateValue(value: any): string;
+    get hasValue(): boolean;
+    scrollToIndex(index: number): void;
+}

package/elements/tip-well/TipWell.d.ts

@@ -1,23 +1,23 @@
-import { OnInit, EventEmitter } from '@angular/core';
-import { NovoLabelService } from '../../services/novo-label-service';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-export declare class NovoTipWellElement implements OnInit {
-    private labels;
-    private sanitizer;
-    name: string | number;
-    tip: string;
-    buttonText: string;
-    button: boolean;
-    icon: string;
-    sanitize: boolean;
-    confirmed: EventEmitter<any>;
-    isActive: boolean;
-    isLocalStorageEnabled: any;
-    localStorageKey: string;
-    private _tipWithStyles;
-    private _lastTipStyled;
-    constructor(labels: NovoLabelService, sanitizer: DomSanitizer);
-    get tipWithStyles(): SafeHtml;
-    ngOnInit(): void;
-    hideTip(): void;
-}
+import { OnInit, EventEmitter } from '@angular/core';
+import { NovoLabelService } from '../../services/novo-label-service';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+export declare class NovoTipWellElement implements OnInit {
+    private labels;
+    private sanitizer;
+    name: string | number;
+    tip: string;
+    buttonText: string;
+    button: boolean;
+    icon: string;
+    sanitize: boolean;
+    confirmed: EventEmitter<any>;
+    isActive: boolean;
+    isLocalStorageEnabled: any;
+    localStorageKey: string;
+    private _tipWithStyles;
+    private _lastTipStyled;
+    constructor(labels: NovoLabelService, sanitizer: DomSanitizer);
+    get tipWithStyles(): SafeHtml;
+    ngOnInit(): void;
+    hideTip(): void;
+}

package/elements/tip-well/TipWell.module.d.ts

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

package/elements/tip-well/TipWell.scss

@@ -0,0 +1,31 @@
+novo-tip-well {
+  &.active {
+    display: inline-block;
+    margin-bottom: 1em;
+  }
+  > div {
+    display: inline-block;
+    border-radius: 0.25em;
+    background-color: $off-white;
+    color: $dark;
+    padding: 1em;
+    text-align: right;
+    > div {
+      display: flex;
+      > i {
+        flex-shrink: 0;
+        text-align: center;
+        margin-top: 0.3em;
+        margin-right: 10px;
+        color: #aaaaaa;
+      }
+      > p {
+        width: 100%;
+        max-width: 33em;
+        text-align: left;
+        padding-top: 6px;
+        white-space: pre-line;
+      }
+    }
+  }
+}

package/elements/toast/Toast.d.ts

@@ -1,28 +1,28 @@
-import { OnInit, OnChanges, SimpleChanges, EventEmitter } from '@angular/core';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-export declare class NovoToastElement implements OnInit, OnChanges {
-    private sanitizer;
-    theme: string;
-    icon: string;
-    title: string;
-    hasDialogue: boolean;
-    link: string;
-    isCloseable: boolean;
-    set message(m: string);
-    closed: EventEmitter<any>;
-    _message: SafeHtml;
-    show: boolean;
-    animate: boolean;
-    parent: any;
-    launched: boolean;
-    position: any;
-    time: any;
-    iconClass: string;
-    alertTheme: string;
-    embedded: any;
-    constructor(sanitizer: DomSanitizer);
-    ngOnInit(): void;
-    ngOnChanges(changes?: SimpleChanges): void;
-    clickHandler(event: any): void;
-    close(event: any): void;
-}
+import { OnInit, OnChanges, SimpleChanges, EventEmitter } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+export declare class NovoToastElement implements OnInit, OnChanges {
+    private sanitizer;
+    theme: string;
+    icon: string;
+    title: string;
+    hasDialogue: boolean;
+    link: string;
+    isCloseable: boolean;
+    set message(m: string);
+    closed: EventEmitter<any>;
+    _message: SafeHtml;
+    show: boolean;
+    animate: boolean;
+    parent: any;
+    launched: boolean;
+    position: any;
+    time: any;
+    iconClass: string;
+    alertTheme: string;
+    embedded: any;
+    constructor(sanitizer: DomSanitizer);
+    ngOnInit(): void;
+    ngOnChanges(changes?: SimpleChanges): void;
+    clickHandler(event: any): void;
+    close(event: any): void;
+}

package/elements/toast/Toast.module.d.ts

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

package/elements/toast/Toast.scss

@@ -0,0 +1,413 @@
+novo-toast {
+  display: flex;
+  flex-shrink: 0;
+  position: relative;
+  background: $navy;
+  color: $white;
+  padding: 15px 15px 15px 25px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+  &.show {
+    display: block;
+  }
+  p {
+    white-space: pre-line;
+  }
+}
+
+novo-toast.launched {
+  display: none;
+  position: fixed;
+  z-index: 9999;
+}
+
+novo-toast.toast-container {
+  display: flex;
+  justify-content: flex-start;
+  align-content: center;
+  align-items: center;
+}
+
+novo-toast.toast-container > .toast-icon {
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+  float: left;
+  width: 32px;
+  height: 32px;
+  background: rgba(0, 0, 0, 0.15);
+  border-radius: 3px;
+  margin-right: 15px;
+  i {
+    display: flex;
+    position: relative;
+    top: 0;
+    font-size: 16px;
+    line-height: 16px;
+  }
+}
+
+novo-toast.toast-container > .close-icon {
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+  align-self: flex-start;
+  cursor: pointer;
+  i {
+    display: flex;
+    position: relative;
+    top: 0;
+    font-size: 16px;
+    line-height: 16px;
+  }
+}
+
+novo-toast.toast-container .toast-content {
+  float: left;
+  width: calc(100% - 47px);
+  flex-direction: column;
+  display: flex;
+  h5 + p {
+    top: 0;
+  }
+  p {
+    position: relative;
+    top: -1px;
+  }
+  .link-generated {
+    width: 100%;
+    position: relative;
+    input {
+      font-size: 1em;
+      background: transparent !important;
+      border: none;
+      border-bottom: 1px solid lighten($dark, 45%);
+      border-radius: 0;
+      outline: none;
+      height: 2rem;
+      width: 95%;
+      margin: 0;
+      padding: 0;
+      box-shadow: none;
+      box-sizing: content-box;
+      transition: all 300ms;
+      color: $white;
+      text-overflow: ellipsis;
+      &:focus {
+        background-color: $positive;
+      }
+      &:hover {
+        border-bottom: 1px solid lighten($dark, 15%);
+      }
+    }
+  }
+}
+
+novo-toast .toast-content > h5 {
+  display: block;
+  color: $white;
+  margin: 0 0 5px;
+  font-size: 14px;
+}
+
+novo-toast:not(.default) .toast-content > h5 {
+  color: $white;
+}
+
+novo-toast .toast-content > p {
+  font-size: 14px;
+  line-height: 20px;
+  margin: 0;
+  max-width: inherit;
+  &.message-only {
+    top: 0;
+    font-size: 16px;
+    line-height: 22px;
+    padding: 0;
+  }
+}
+
+novo-toast.warning-outline,
+novo-toast.success-outline,
+novo-toast.info-outline,
+novo-toast.danger-outline {
+  color: $base-font-color;
+  .toast-content > h5 {
+    color: $base-font-color;
+  }
+  .toast-container .toast-content .link-generated input {
+    color: $base-font-color;
+  }
+}
+
+novo-toast.danger,
+novo-toast.info,
+novo-toast.success,
+novo-toast.warning {
+  i,
+  p {
+    color: $white;
+  }
+}
+
+novo-toast.success {
+  background: $grass;
+}
+
+novo-toast.success-outline {
+  border: 1px solid $grass;
+  background: white;
+}
+
+novo-toast.info {
+  background: $ocean;
+}
+
+novo-toast.info-outline {
+  border: 1px solid $ocean;
+  background: white;
+}
+
+novo-toast.warning {
+  background: $sunflower;
+}
+
+novo-toast.warning-outline {
+  border: 1px solid $sunflower;
+  background: white;
+}
+
+novo-toast.danger {
+  background: $grapefruit;
+}
+
+novo-toast.danger-outline {
+  border: 1px solid $grapefruit;
+  background: white;
+}
+
+novo-toast {
+  @each $analytics, $color in $analytics-colors {
+    &.#{$analytics} {
+      background: $color;
+    }
+  }
+  @each $entity, $color in $entity-colors {
+    &.#{$entity} {
+      background: $color;
+    }
+  }
+  @each $entity, $color in $app-colors {
+    &.#{$entity} {
+      background: $color;
+    }
+  }
+  &.text {
+    background: $dark;
+  }
+  &.neutral {
+    background: $neutral;
+  }
+  &.background {
+    background: $off-white;
+    .toast-content > h5 {
+      color: $dark !important;
+    }
+    i,
+    p {
+      color: $dark;
+    }
+  }
+}
+
+novo-toast.fixedBottom,
+novo-toast.fixedTop {
+  left: 0;
+  right: 0;
+}
+
+novo-toast.fixedTop {
+  top: -100%;
+  padding-top: 20px;
+  @include ease('all', 'swift-ease-in-out');
+  &.animate {
+    padding-top: 20px;
+    top: -6px;
+  }
+}
+
+novo-toast.fixedBottom {
+  bottom: -100%;
+  padding-bottom: 20px;
+  @include ease('all', 'swift-ease-in-out');
+  &.animate {
+    padding-bottom: 20px;
+    bottom: -6px;
+  }
+}
+
+novo-toast[class*='growl'] {
+  border-radius: 3px;
+  max-width: 350px;
+  .toast-content h5 {
+    display: block;
+    color: #fff;
+    margin: 0 0 5px;
+    font-size: 14px;
+  }
+  .toast-content p {
+    font-size: 14px;
+    width: 100%;
+  }
+}
+
+novo-toast.growlBottomLeft,
+novo-toast.growlTopLeft {
+  left: -100%;
+  right: auto;
+  width: calc(100% - 30px);
+  @include ease('all', 'swift-ease-in-out');
+  &.animate {
+    left: 15px;
+  }
+}
+
+novo-toast.growlTopLeft,
+novo-toast.growlTopRight {
+  top: 15px;
+}
+
+novo-toast.growlBottomLeft,
+novo-toast.growlBottomRight {
+  bottom: 15px;
+}
+
+novo-toast.growlBottomRight,
+novo-toast.growlTopRight {
+  right: -100%;
+  left: auto;
+  width: calc(100% - 30px);
+  @include ease('all', 'swift-ease-in-out');
+  &.animate {
+    right: 15px;
+  }
+}
+
+novo-toast.fixedTop {
+  @for $i from 2 through 100 {
+    &:nth-last-of-type(#{$i}) {
+      top: (25px * ($i - 1));
+      z-index: 9999 - $i;
+      filter: brightness(1- (1/7));
+    }
+  }
+}
+
+novo-toast.fixedBottom {
+  @for $i from 2 through 100 {
+    &:nth-last-of-type(#{$i}) {
+      bottom: (25px * ($i - 1));
+      z-index: 9999 - $i;
+      filter: brightness(1- (1/7));
+    }
+  }
+}
+
+novo-toast.growlTopLeft,
+novo-toast.growlTopRight {
+  @for $i from 2 through 100 {
+    &:nth-last-of-type(#{$i}) {
+      top: (25px * $i);
+      transform: scale(1- (1/25));
+      z-index: 9999 - $i;
+      filter: brightness(1- (1/7));
+    }
+  }
+}
+
+novo-toast.growlBottomLeft,
+novo-toast.growlBottomRight {
+  @for $i from 2 through 100 {
+    &:nth-last-of-type(#{$i}) {
+      bottom: (25px * $i);
+      transform: scale(1- (1/25));
+      z-index: 9999 - $i;
+      filter: brightness(1- (1/7));
+    }
+  }
+}
+
+novo-toast.growlBottomLeft,
+novo-toast.growlBottomRight,
+novo-toast.growlTopLeft,
+novo-toast.growlTopRight {
+  &:last-of-type {
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+  }
+}
+
+novo-toast.embedded.fixedBottom,
+novo-toast.embedded.fixedTop {
+  top: auto;
+  left: auto;
+  right: auto;
+  width: inherit;
+  margin: -1em -3em;
+  &.animate {
+    top: auto;
+  }
+}
+
+novo-toast:not(.launched) {
+  animation: embedded-slide-in 200ms ease-in-out;
+}
+
+novo-toast.dialogue {
+  .toast-content {
+    display: flex;
+    flex-direction: row !important;
+    align-items: center;
+  }
+  p.message-only {
+    flex: 3 0 0;
+  }
+  .dialogue {
+    display: inherit;
+  }
+}
+
+@keyframes embedded-slide-in {
+  from {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@media screen and (min-width: 350px) {
+  novo-toast[class*='growl-'] {
+    min-width: 350px;
+  }
+  novo-toast.growlBottomLeft,
+  novo-toast.growlTopLeft {
+    left: -100%;
+    right: auto;
+    @include ease('all', 'swift-ease-in-out');
+    &.animate {
+      left: 15px;
+    }
+  }
+  novo-toast.growlBottomRight,
+  novo-toast.growlTopRight {
+    right: -100%;
+    left: auto;
+    @include ease('all', 'swift-ease-in-out');
+    &.animate {
+      right: 15px;
+    }
+  }
+}