novo-elements 5.1.1 → 5.2.3

package/elements/slider/Slider.d.ts

@@ -1,18 +1,18 @@
-import { ElementRef, OnDestroy, OnInit } from '@angular/core';
-import { NovoLabelService } from '../../services/novo-label-service';
-export declare class NovoSliderElement implements OnInit, OnDestroy {
-    private element;
-    labels: NovoLabelService;
-    slides: any;
-    currentSlide: number;
-    start: boolean;
-    end: boolean;
-    currSlides: Array<any>;
-    handleKeyDownFunc: any;
-    currentClass: string;
-    constructor(element: ElementRef, labels: NovoLabelService);
-    ngOnInit(): void;
-    ngOnDestroy(): void;
-    handleKeyDown(event: any): void;
-    changeSlide(direction: any): void;
-}
+import { ElementRef, OnDestroy, OnInit } from '@angular/core';
+import { NovoLabelService } from '../../services/novo-label-service';
+export declare class NovoSliderElement implements OnInit, OnDestroy {
+    private element;
+    labels: NovoLabelService;
+    slides: any;
+    currentSlide: number;
+    start: boolean;
+    end: boolean;
+    currSlides: Array<any>;
+    handleKeyDownFunc: any;
+    currentClass: string;
+    constructor(element: ElementRef, labels: NovoLabelService);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    handleKeyDown(event: any): void;
+    changeSlide(direction: any): void;
+}

package/elements/slider/Slider.module.d.ts

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

package/elements/slider/Slider.scss

@@ -0,0 +1,89 @@
+novo-slider {
+  display: block;
+  width: 100%;
+  max-width: 1000px;
+  margin: 0 auto;
+  position: relative;
+  overflow: hidden;
+
+  @for $i from 0 through 100 {
+    $offset: (#{$i * 100%});
+    $dist: (#{$i * -100%});
+
+    & > [slide='#{$i}'] {
+      left: $offset;
+    }
+
+    &.slide-#{$i} {
+      .slides {
+        transform: translateX($dist);
+      }
+    }
+  }
+
+  .slides {
+    min-height: 250px;
+    transition: all 200ms ease-in-out;
+    width: 100%;
+    display: flex;
+    flex: 1 0 100%;
+
+    & > [slide] {
+      display: flex;
+      flex: 1 0 100%;
+      justify-content: center;
+      align-items: center;
+      flex-wrap: wrap;
+      flex-direction: column;
+    }
+
+    img {
+      display: block;
+      margin: auto;
+    }
+  }
+
+  .controls {
+    width: 100%;
+    position: absolute;
+    bottom: 10px;
+
+    button {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+
+      &[icon='previous'] {
+        left: 10px;
+      }
+      &[icon='next'],
+      &[icon='check'] {
+        right: 10px;
+      }
+    }
+  }
+
+  .indicators {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    background: rgba(#fff, 0.05);
+    padding: 20px;
+
+    .indicator-circle {
+      width: 8px;
+      height: 8px;
+      margin: 0 5px;
+      border-radius: 50%;
+      background: #d8d8d8;
+      opacity: 0.2;
+      transition: all 200ms ease-in-out;
+
+      &.active {
+        opacity: 1;
+      }
+    }
+  }
+}

package/elements/stepper/step-header.component.d.ts

@@ -1,45 +1,45 @@
-import { FocusMonitor } from '@angular/cdk/a11y';
-import { ElementRef, OnDestroy, TemplateRef } from '@angular/core';
-import { NovoStepLabel } from './step-label.component';
-import { CdkStepHeader } from '@angular/cdk/stepper';
-export declare class NovoStepHeader extends CdkStepHeader implements OnDestroy {
-    private _focusMonitor;
-    private _element;
-    theme: string;
-    color: string;
-    icon: string;
-    /** State of the given step. */
-    state: string;
-    /** Label of the given step. */
-    label: NovoStepLabel | string;
-    /** Overrides for the header icons, passed in via the stepper. */
-    iconOverrides: {
-        [key: string]: TemplateRef<any>;
-    };
-    /** Index of the given step. */
-    get index(): number;
-    set index(value: number);
-    private _index;
-    /** Whether the given step is selected. */
-    get selected(): boolean;
-    set selected(value: boolean);
-    private _selected;
-    /** Whether the given step label is active. */
-    get active(): boolean;
-    set active(value: boolean);
-    private _active;
-    /** Whether the given step label is active. */
-    get touched(): boolean;
-    /** Whether the given step is optional. */
-    get optional(): boolean;
-    set optional(value: boolean);
-    private _optional;
-    constructor(_focusMonitor: FocusMonitor, _element: ElementRef);
-    ngOnDestroy(): void;
-    /** Returns string label of given step if it is a text label. */
-    _stringLabel(): string | null;
-    /** Returns NovoStepLabel if the label of given step is a template label. */
-    _templateLabel(): NovoStepLabel | null;
-    /** Returns the host HTML element. */
-    _getHostElement(): any;
-}
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { ElementRef, OnDestroy, TemplateRef } from '@angular/core';
+import { NovoStepLabel } from './step-label.component';
+import { CdkStepHeader } from '@angular/cdk/stepper';
+export declare class NovoStepHeader extends CdkStepHeader implements OnDestroy {
+    private _focusMonitor;
+    private _element;
+    theme: string;
+    color: string;
+    icon: string;
+    /** State of the given step. */
+    state: string;
+    /** Label of the given step. */
+    label: NovoStepLabel | string;
+    /** Overrides for the header icons, passed in via the stepper. */
+    iconOverrides: {
+        [key: string]: TemplateRef<any>;
+    };
+    /** Index of the given step. */
+    get index(): number;
+    set index(value: number);
+    private _index;
+    /** Whether the given step is selected. */
+    get selected(): boolean;
+    set selected(value: boolean);
+    private _selected;
+    /** Whether the given step label is active. */
+    get active(): boolean;
+    set active(value: boolean);
+    private _active;
+    /** Whether the given step label is active. */
+    get touched(): boolean;
+    /** Whether the given step is optional. */
+    get optional(): boolean;
+    set optional(value: boolean);
+    private _optional;
+    constructor(_focusMonitor: FocusMonitor, _element: ElementRef);
+    ngOnDestroy(): void;
+    /** Returns string label of given step if it is a text label. */
+    _stringLabel(): string | null;
+    /** Returns NovoStepLabel if the label of given step is a template label. */
+    _templateLabel(): NovoStepLabel | null;
+    /** Returns the host HTML element. */
+    _getHostElement(): any;
+}

package/elements/stepper/step-header.component.scss

@@ -0,0 +1,78 @@
+@import '../../styles/global/variables';
+
+$novo-stepper-label-header-height: 24px !default;
+$novo-stepper-label-min-width: 50px !default;
+$novo-stepper-side-gap: 24px !default;
+$novo-vertical-stepper-content-margin: 36px !default;
+$novo-stepper-line-gap: 8px !default;
+$novo-step-optional-font-size: 12px;
+$novo-step-header-icon-size: 1em !default;
+
+.novo-step-header {
+  overflow: visible;
+  outline: none;
+  cursor: pointer;
+  position: relative;
+  //box-sizing: border-box;
+}
+
+.novo-step-optional {
+  font-size: $novo-step-optional-font-size;
+}
+
+.novo-step-icon,
+.novo-step-icon-not-touched {
+  border-radius: 50%;
+  height: $novo-stepper-label-header-height;
+  width: $novo-stepper-label-header-height;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+
+  .novo-step-number {
+    font-size: $novo-step-header-icon-size;
+    min-width: 1.6em;
+    height: 1.6em;
+    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+  }
+}
+
+.novo-step-icon {
+  .novo-step-number {
+    background: $positive;
+    color: $white;
+  }
+}
+.novo-step-icon-not-touched {
+  .novo-step-number {
+    background: $submission;
+    color: $white;
+  }
+}
+
+// .novo-step-icon .novo-icon {
+//   font-size: $novo-step-header-icon-size;
+//   height: $novo-step-header-icon-size;
+//   width: $novo-step-header-icon-size;
+// }
+
+.novo-step-label {
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: $novo-stepper-label-min-width;
+  vertical-align: middle;
+  text-align: center;
+  padding: 4px 0px;
+}
+
+.novo-step-text-label {
+  text-align: center;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}

package/elements/stepper/step-label.component.d.ts

@@ -1,5 +1,5 @@
-import { TemplateRef } from '@angular/core';
-import { CdkStepLabel } from '@angular/cdk/stepper';
-export declare class NovoStepLabel extends CdkStepLabel {
-    constructor(template: TemplateRef<any>);
-}
+import { TemplateRef } from '@angular/core';
+import { CdkStepLabel } from '@angular/cdk/stepper';
+export declare class NovoStepLabel extends CdkStepLabel {
+    constructor(template: TemplateRef<any>);
+}

package/elements/stepper/step-status.component.d.ts

@@ -1,6 +1,6 @@
-import { NovoStepper } from './stepper.component';
-import { NovoStepHeader } from './step-header.component';
-export declare class NovoStepStatus {
-    state: string;
-    constructor(stepper: NovoStepper, step: NovoStepHeader);
-}
+import { NovoStepper } from './stepper.component';
+import { NovoStepHeader } from './step-header.component';
+export declare class NovoStepStatus {
+    state: string;
+    constructor(stepper: NovoStepper, step: NovoStepHeader);
+}

package/elements/stepper/stepper.animations.d.ts

@@ -1,6 +1,6 @@
-import { AnimationTriggerMetadata } from '@angular/animations';
-/** Animations used by the Novo steppers. */
-export declare const novoStepperAnimations: {
-    readonly horizontalStepTransition: AnimationTriggerMetadata;
-    readonly verticalStepTransition: AnimationTriggerMetadata;
-};
+import { AnimationTriggerMetadata } from '@angular/animations';
+/** Animations used by the Novo steppers. */
+export declare const novoStepperAnimations: {
+    readonly horizontalStepTransition: AnimationTriggerMetadata;
+    readonly verticalStepTransition: AnimationTriggerMetadata;
+};

package/elements/stepper/stepper.component.d.ts

@@ -1,39 +1,39 @@
-import { FocusableOption } from '@angular/cdk/a11y';
-import { Directionality } from '@angular/cdk/bidi';
-import { CdkStep, CdkStepper } from '@angular/cdk/stepper';
-import { AfterContentInit, ChangeDetectorRef, QueryList, TemplateRef } from '@angular/core';
-import { NovoIconComponent } from '../icon/Icon';
-import { NovoStepLabel } from './step-label.component';
-export declare const _NovoStep: typeof CdkStep;
-export declare const _NovoStepper: typeof CdkStepper;
-export declare class NovoStep extends CdkStep {
-    /** Content for step label given by `<ng-template novoStepLabel>`. */
-    stepLabel: NovoStepLabel;
-    theme: string;
-    color: string;
-    icon: string;
-    constructor(stepper: CdkStepper);
-}
-export declare class NovoStepper extends CdkStepper implements AfterContentInit {
-    /** The list of step headers of the steps in the stepper. */
-    _stepHeader: QueryList<FocusableOption>;
-    /** Steps that the stepper holds. */
-    _steps: QueryList<NovoStep>;
-    /** Custom icon overrides passed in by the consumer. */
-    _icons: QueryList<NovoIconComponent>;
-    /** Consumer-specified template-refs to be used to override the header icons. */
-    _iconOverrides: {
-        [key: string]: TemplateRef<any>;
-    };
-    get completed(): boolean;
-    ngAfterContentInit(): void;
-    complete(): void;
-    getIndicatorType(index: number): 'none' | '' | 'edit' | 'done';
-}
-export declare class NovoHorizontalStepper extends NovoStepper {
-    selectedIndex: number;
-}
-export declare class NovoVerticalStepper extends NovoStepper {
-    selectedIndex: number;
-    constructor(dir: Directionality, changeDetectorRef: ChangeDetectorRef);
-}
+import { FocusableOption } from '@angular/cdk/a11y';
+import { Directionality } from '@angular/cdk/bidi';
+import { CdkStep, CdkStepper } from '@angular/cdk/stepper';
+import { AfterContentInit, ChangeDetectorRef, QueryList, TemplateRef } from '@angular/core';
+import { NovoIconComponent } from '../icon/Icon';
+import { NovoStepLabel } from './step-label.component';
+export declare const _NovoStep: typeof CdkStep;
+export declare const _NovoStepper: typeof CdkStepper;
+export declare class NovoStep extends CdkStep {
+    /** Content for step label given by `<ng-template novoStepLabel>`. */
+    stepLabel: NovoStepLabel;
+    theme: string;
+    color: string;
+    icon: string;
+    constructor(stepper: CdkStepper);
+}
+export declare class NovoStepper extends CdkStepper implements AfterContentInit {
+    /** The list of step headers of the steps in the stepper. */
+    _stepHeader: QueryList<FocusableOption>;
+    /** Steps that the stepper holds. */
+    _steps: QueryList<NovoStep>;
+    /** Custom icon overrides passed in by the consumer. */
+    _icons: QueryList<NovoIconComponent>;
+    /** Consumer-specified template-refs to be used to override the header icons. */
+    _iconOverrides: {
+        [key: string]: TemplateRef<any>;
+    };
+    get completed(): boolean;
+    ngAfterContentInit(): void;
+    complete(): void;
+    getIndicatorType(index: number): 'none' | '' | 'edit' | 'done';
+}
+export declare class NovoHorizontalStepper extends NovoStepper {
+    selectedIndex: number;
+}
+export declare class NovoVerticalStepper extends NovoStepper {
+    selectedIndex: number;
+    constructor(dir: Directionality, changeDetectorRef: ChangeDetectorRef);
+}

package/elements/stepper/stepper.component.scss

@@ -0,0 +1,200 @@
+@import '../../styles/global/variables';
+
+$novo-horizontal-stepper-header-height: 80px !default;
+$novo-stepper-label-header-height: 24px !default;
+$novo-stepper-side-gap: 24px !default;
+$novo-vertical-stepper-content-margin: 36px !default;
+$novo-stepper-line-width: 1px !default;
+$novo-stepper-line-gap: 8px !default;
+
+.novo-stepper-vertical,
+.novo-stepper-horizontal {
+  display: block;
+}
+
+.novo-horizontal-stepper-header-container {
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 1em;
+  background: $background;
+}
+
+.novo-stepper-horizontal-line {
+  border-bottom: $novo-stepper-line-width solid $light;
+  flex: auto;
+  min-width: 0px;
+  height: $novo-horizontal-stepper-header-height;
+  &.complete {
+    border-bottom: $novo-stepper-line-width solid $positive;
+  }
+}
+
+.novo-horizontal-stepper-header {
+  display: flex;
+  height: $novo-horizontal-stepper-header-height;
+  flex-flow: column;
+  overflow: visible;
+  align-items: center;
+  justify-content: center;
+  padding: 0 $novo-stepper-side-gap;
+
+  .novo-step-status {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    height: 1px;
+    bottom: 0px;
+
+    .novo-stepper-status-line {
+      width: 100%;
+      position: absolute;
+      &:before {
+        content: '';
+        display: block;
+        width: calc(50% - 8px);
+        margin-right: 8px;
+        border-bottom: 1px solid $light;
+      }
+      &:after {
+        content: '';
+        display: block;
+        width: calc(50% - 8px);
+        margin-left: calc(50% + 8px);
+        margin-top: -1px;
+        border-top: 1px solid $light;
+      }
+      &.edit {
+        &:before {
+          border-bottom: 1px solid $positive;
+        }
+      }
+      &.done {
+        &:before {
+          border-bottom: 1px solid $positive;
+        }
+        &:after {
+          border-top: 1px solid $positive;
+        }
+      }
+    }
+    .novo-stepper-status-icon {
+      position: relative;
+      &:before {
+        content: '';
+        display: block;
+        background: $white;
+        border-radius: 50%;
+        position: absolute;
+        z-index: 0;
+        top: 1px;
+        left: 1px;
+        bottom: 1px;
+        right: 1px;
+      }
+      & > * {
+        position: relative;
+        z-index: 1;
+      }
+    }
+  }
+}
+
+.novo-vertical-stepper-header {
+  display: flex;
+  align-items: center;
+  padding: $novo-stepper-side-gap;
+  max-height: $novo-stepper-label-header-height;
+
+  .novo-step-icon,
+  .novo-step-icon-not-touched {
+    margin-right: $novo-vertical-stepper-content-margin - $novo-stepper-side-gap;
+
+    [dir='rtl'] & {
+      margin-right: 0;
+      margin-left: $novo-vertical-stepper-content-margin - $novo-stepper-side-gap;
+    }
+  }
+}
+
+.novo-horizontal-stepper-content {
+  overflow: hidden;
+
+  &[aria-expanded='false'] {
+    height: 0;
+  }
+}
+
+.novo-horizontal-content-container {
+  overflow: hidden;
+  padding: 0 $novo-stepper-side-gap $novo-stepper-side-gap $novo-stepper-side-gap;
+}
+
+.novo-vertical-content-container {
+  margin-left: $novo-vertical-stepper-content-margin;
+  border: 0;
+  position: relative;
+
+  [dir='rtl'] & {
+    margin-left: 0;
+    margin-right: $novo-vertical-stepper-content-margin;
+  }
+}
+
+.novo-stepper-vertical-line {
+  &:before {
+    content: '';
+    position: absolute;
+    top: $novo-stepper-line-gap - $novo-stepper-side-gap;
+    bottom: $novo-stepper-line-gap - $novo-stepper-side-gap;
+    left: 0;
+    z-index: -1;
+    border-left-width: $novo-stepper-line-width;
+    border-left-style: solid;
+    border-left-color: $light;
+
+    [dir='rtl'] & {
+      left: auto;
+      right: 0;
+    }
+  }
+  &.edit {
+    &:before {
+      border-left-color: 1px solid $positive;
+    }
+  }
+  &.done {
+    &:before {
+      border-left-color: 1px solid $positive;
+    }
+    &:after {
+      border-left-color: 1px solid $positive;
+    }
+  }
+}
+
+.novo-stepper-vertical {
+  novo-step-status {
+    position: absolute;
+    left: 35px;
+    top: 25px;
+    transform: scale(0.8);
+  }
+}
+
+.novo-vertical-stepper-content {
+  overflow: hidden;
+}
+
+.novo-vertical-content {
+  padding: 0 $novo-stepper-side-gap $novo-stepper-side-gap $novo-stepper-side-gap;
+}
+
+.novo-step:last-child {
+  .novo-vertical-content-container {
+    border: none;
+  }
+}