novo-elements 5.1.1 → 5.2.3

package/elements/stepper/stepper.module.d.ts

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

package/elements/switch/Switch.d.ts

@@ -1,19 +1,19 @@
-import { EventEmitter, ChangeDetectorRef } from '@angular/core';
-import { ControlValueAccessor } from '@angular/forms';
-export declare class NovoSwitchElement implements ControlValueAccessor {
-    private ref;
-    theme: string;
-    onChange: EventEmitter<any>;
-    _disabled: boolean;
-    model: boolean;
-    onModelChange: Function;
-    onModelTouched: Function;
-    get disabled(): boolean;
-    set disabled(value: boolean);
-    constructor(ref: ChangeDetectorRef);
-    onKeydown(event: any): void;
-    toggle(event: any): void;
-    writeValue(model: boolean): void;
-    registerOnChange(fn: Function): void;
-    registerOnTouched(fn: Function): void;
-}
+import { EventEmitter, ChangeDetectorRef } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+export declare class NovoSwitchElement implements ControlValueAccessor {
+    private ref;
+    theme: string;
+    onChange: EventEmitter<any>;
+    _disabled: boolean;
+    model: boolean;
+    onModelChange: Function;
+    onModelTouched: Function;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    constructor(ref: ChangeDetectorRef);
+    onKeydown(event: any): void;
+    toggle(event: any): void;
+    writeValue(model: boolean): void;
+    registerOnChange(fn: Function): void;
+    registerOnTouched(fn: Function): void;
+}

package/elements/switch/Switch.module.d.ts

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

package/elements/switch/Switch.scss

@@ -0,0 +1,143 @@
+$switch-width: 36px !default;
+$switch-height: 24px !default;
+$switch-bar-height: 14px !default;
+$switch-thumb-size: 20px !default;
+@mixin novo-switch-style($thumb, $track) {
+  .novo-switch-thumb {
+    background-color: $light;
+  }
+  .novo-switch-bar {
+    background-color: lighten($light, 10%);
+  } // Can make the checked version style different (same for now)
+  &[aria-checked='true'] {
+    .novo-switch-thumb {
+      background-color: $thumb;
+    }
+    .novo-switch-bar {
+      background-color: $track;
+    }
+  }
+}
+
+novo-switch {
+  display: flex;
+  align-items: center;
+  margin: 15px;
+  white-space: nowrap;
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+  @include ease('all', 'swift-ease-in-out');
+  * {
+    box-sizing: border-box;
+  }
+  > div {
+    display: flex;
+    align-items: center;
+  }
+  .novo-switch-container {
+    cursor: grab;
+    width: $switch-width;
+    height: $switch-height;
+    position: relative;
+    user-select: none;
+    margin-right: 8px;
+  }
+  &:not([disabled]) {
+    &.novo-switch-dragging .novo-switch-container,
+    .novo-switch-dragging {
+      cursor: grabbing;
+    }
+  }
+  .novo-switch-label {
+    border: 0 transparent;
+  }
+  .novo-switch-bar {
+    left: 1px;
+    width: $switch-width - 2px;
+    top: $switch-height / 2 - $switch-bar-height / 2;
+    height: $switch-bar-height;
+    border-radius: 8px;
+    position: absolute;
+  }
+  .novo-switch-thumb-container {
+    top: $switch-height / 2 - $switch-thumb-size / 2;
+    left: 0;
+    width: $switch-width - $switch-thumb-size;
+    position: absolute;
+    transform: translate3d(0, 0, 0);
+    z-index: 1;
+  }
+  &[aria-checked='true'] .novo-switch-thumb-container {
+    transform: translate3d(100%, 0, 0);
+  }
+  .novo-switch-thumb {
+    position: absolute;
+    margin: 0;
+    left: 0;
+    top: 0;
+    outline: none;
+    height: $switch-thumb-size;
+    width: $switch-thumb-size;
+    border-radius: 50%;
+    box-shadow: $whiteframe-shadow-z1; // todo
+    .bh-ripple-container {
+      position: absolute;
+      display: block;
+      width: auto;
+      height: auto;
+      left: -$switch-thumb-size;
+      top: -$switch-thumb-size;
+      right: -$switch-thumb-size;
+      bottom: -$switch-thumb-size;
+    }
+  }
+  &:not(.novo-switch-dragging) {
+    .novo-switch-bar,
+    .novo-switch-thumb,
+    .novo-switch-thumb-container {
+      @include ease('all', 'swift-ease-in-out');
+      transition-property: transform, background-color;
+    }
+    .novo-switch-bar,
+    .novo-switch-thumb {
+      transition-delay: 0.05s;
+    }
+  }
+  &[disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+    .novo-switch-container {
+      cursor: not-allowed;
+    }
+  }
+}
+
+novo-switch {
+  // Base color: $ocean
+  @include novo-switch-style($ocean, lighten($ocean, 18%)); // Loop through analytics colors and make a switch color class for each
+  @each $analytic, $color in $analytics-colors {
+    &.#{$analytic} {
+      @include novo-switch-style($color, lighten($color, 18%));
+    }
+  }
+  &.dark {
+    @include novo-switch-style($dark, darken($dark, 5%));
+  }
+  &.light {
+    @include novo-switch-style(darken($light, 3%), $light);
+  }
+  &[disabled] {
+    .novo-switch-thumb {
+      background-color: darken($light, 20%);
+    }
+    .novo-switch-bar {
+      background-color: $light;
+    }
+  }
+  &:focus {
+    .novo-switch-label:not(:empty) {
+      border: 1px dotted $light;
+    }
+  }
+}

package/elements/tabbed-group-picker/TabbedGroupPicker.d.ts

@@ -1,122 +1,122 @@
-import { ChangeDetectorRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
-import { BehaviorSubject, Subscription } from 'rxjs';
-import { NovoLabelService } from '../../services/novo-label-service';
-export declare type TabbedGroupPickerTab = {
-    typeName: string;
-    typeLabel: string;
-    valueField: string;
-    labelField: string;
-    scrollOffset?: number;
-    icon?: string;
-} & (ParentTab | ChildTab);
-export declare type ParentTab = {
-    childTypeName: string;
-    data: Array<ParentOption>;
-};
-declare type ParentOption = {
-    selected?: boolean;
-    indeterminate?: boolean;
-    children: Array<{
-        selected?: boolean;
-    }>;
-} & {
-    [key: string]: any;
-};
-export declare type ChildTab = {
-    data: Array<{
-        selected?: boolean;
-    } & {
-        [key: string]: any;
-    }>;
-};
-export declare type TabbedGroupPickerQuickSelect = {
-    label: string;
-    selected?: boolean;
-    childTypeName?: string;
-    children?: (({
-        selected?: boolean;
-    } & {
-        [key: string]: any;
-    }) | (number))[];
-    all?: boolean;
-};
-export declare type QuickSelectConfig = {
-    label: string;
-    items: TabbedGroupPickerQuickSelect[];
-};
-export declare type TabbedGroupPickerButtonConfig = {
-    theme: string;
-    side: string;
-    icon: string;
-    label: string;
-};
-export declare class NovoTabbedGroupPickerElement implements OnDestroy, OnInit {
-    labelService: NovoLabelService;
-    private ref;
-    private scrollableInstance;
-    buttonConfig: TabbedGroupPickerButtonConfig;
-    tabs: TabbedGroupPickerTab[];
-    quickSelectConfig: QuickSelectConfig;
-    selectionChange: EventEmitter<any>;
-    displayTabs: TabbedGroupPickerTab[];
-    displayTabIndex: number;
-    filterText: BehaviorSubject<string>;
-    filterTextSubscription: Subscription;
-    loading: boolean;
-    showClearAll: boolean;
-    scrollViewportHeight: number;
-    virtualScrollItemSize: number;
-    constructor(labelService: NovoLabelService, ref: ChangeDetectorRef);
-    get displayTab(): TabbedGroupPickerTab;
-    set displayTab(tab: TabbedGroupPickerTab);
-    get minBufferPx(): number;
-    get maxBufferPx(): number;
-    ngOnInit(): void;
-    ngOnDestroy(): void;
-    changeTab(tab: TabbedGroupPickerTab): void;
-    getPixelHeight(element: HTMLElement): number;
-    setupDisplayData(): void;
-    createChildrenReferences(): void;
-    makeCompareFunction<T>(key: string): (a: T | {
-        [key: string]: T;
-    }, b: T | {
-        [key: string]: T;
-    }) => 1 | -1 | 0 | undefined;
-    replaceChildrenWithReferences(parent: {
-        children: any[];
-    }, sortedData: ChildTab['data'], compareFunction: (a: any, b: any) => 1 | -1 | 0, warnFunction: (child: any) => void): void;
-    makeWarningFunction(parentLabel: string, childLabel: string, childValueField: any): (child: any) => void;
-    onDropdownToggle(event: any): void;
-    onItemToggled(item: {
-        selected?: boolean;
-        children?: Array<{
-            selected?: boolean;
-            children?: Array<{
-                selected?: boolean;
-            }>;
-        }>;
-    }): void;
-    initializeDescendantSelection(): void;
-    updateDescendants(parentIsSelected: boolean, children: Array<{
-        selected?: boolean;
-        children?: Array<{
-            selected?: boolean;
-        }>;
-    }>): void;
-    updateClearAll(itemWasJustSelected?: boolean): void;
-    updateParentsAndQuickSelect(): void;
-    getSelectedState: (childArray: {
-        selected?: boolean;
-        indeterminate?: boolean;
-    }[]) => 'selected' | 'indeterminate' | undefined;
-    emitSelectedValues(): void;
-    deselectEverything(event: any): void;
-    onClearFilter(event: any): void;
-    onFilter(event: {
-        target: {
-            value: string;
-        };
-    }): void;
-    filter: (searchTerm: string) => void;
-}
-export {};
+import { ChangeDetectorRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { BehaviorSubject, Subscription } from 'rxjs';
+import { NovoLabelService } from '../../services/novo-label-service';
+export declare type TabbedGroupPickerTab = {
+    typeName: string;
+    typeLabel: string;
+    valueField: string;
+    labelField: string;
+    scrollOffset?: number;
+    icon?: string;
+} & (ParentTab | ChildTab);
+export declare type ParentTab = {
+    childTypeName: string;
+    data: Array<ParentOption>;
+};
+declare type ParentOption = {
+    selected?: boolean;
+    indeterminate?: boolean;
+    children: Array<{
+        selected?: boolean;
+    }>;
+} & {
+    [key: string]: any;
+};
+export declare type ChildTab = {
+    data: Array<{
+        selected?: boolean;
+    } & {
+        [key: string]: any;
+    }>;
+};
+export declare type TabbedGroupPickerQuickSelect = {
+    label: string;
+    selected?: boolean;
+    childTypeName?: string;
+    children?: (({
+        selected?: boolean;
+    } & {
+        [key: string]: any;
+    }) | (number))[];
+    all?: boolean;
+};
+export declare type QuickSelectConfig = {
+    label: string;
+    items: TabbedGroupPickerQuickSelect[];
+};
+export declare type TabbedGroupPickerButtonConfig = {
+    theme: string;
+    side: string;
+    icon: string;
+    label: string;
+};
+export declare class NovoTabbedGroupPickerElement implements OnDestroy, OnInit {
+    labelService: NovoLabelService;
+    private ref;
+    private scrollableInstance;
+    buttonConfig: TabbedGroupPickerButtonConfig;
+    tabs: TabbedGroupPickerTab[];
+    quickSelectConfig: QuickSelectConfig;
+    selectionChange: EventEmitter<any>;
+    displayTabs: TabbedGroupPickerTab[];
+    displayTabIndex: number;
+    filterText: BehaviorSubject<string>;
+    filterTextSubscription: Subscription;
+    loading: boolean;
+    showClearAll: boolean;
+    scrollViewportHeight: number;
+    virtualScrollItemSize: number;
+    constructor(labelService: NovoLabelService, ref: ChangeDetectorRef);
+    get displayTab(): TabbedGroupPickerTab;
+    set displayTab(tab: TabbedGroupPickerTab);
+    get minBufferPx(): number;
+    get maxBufferPx(): number;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    changeTab(tab: TabbedGroupPickerTab): void;
+    getPixelHeight(element: HTMLElement): number;
+    setupDisplayData(): void;
+    createChildrenReferences(): void;
+    makeCompareFunction<T>(key: string): (a: T | {
+        [key: string]: T;
+    }, b: T | {
+        [key: string]: T;
+    }) => 1 | -1 | 0 | undefined;
+    replaceChildrenWithReferences(parent: {
+        children: any[];
+    }, sortedData: ChildTab['data'], compareFunction: (a: any, b: any) => 1 | -1 | 0, warnFunction: (child: any) => void): void;
+    makeWarningFunction(parentLabel: string, childLabel: string, childValueField: any): (child: any) => void;
+    onDropdownToggle(event: any): void;
+    onItemToggled(item: {
+        selected?: boolean;
+        children?: Array<{
+            selected?: boolean;
+            children?: Array<{
+                selected?: boolean;
+            }>;
+        }>;
+    }): void;
+    initializeDescendantSelection(): void;
+    updateDescendants(parentIsSelected: boolean, children: Array<{
+        selected?: boolean;
+        children?: Array<{
+            selected?: boolean;
+        }>;
+    }>): void;
+    updateClearAll(itemWasJustSelected?: boolean): void;
+    updateParentsAndQuickSelect(): void;
+    getSelectedState: (childArray: {
+        selected?: boolean;
+        indeterminate?: boolean;
+    }[]) => 'selected' | 'indeterminate' | undefined;
+    emitSelectedValues(): void;
+    deselectEverything(event: any): void;
+    onClearFilter(event: any): void;
+    onFilter(event: {
+        target: {
+            value: string;
+        };
+    }): void;
+    filter: (searchTerm: string) => void;
+}
+export {};

package/elements/tabbed-group-picker/TabbedGroupPicker.module.d.ts

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

package/elements/tabbed-group-picker/TabbedGroupPicker.scss

@@ -0,0 +1,186 @@
+@import '../../styles/global/variables';
+
+.tabbed-group-picker-button {
+  .tabbed-group-picker-button-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 100px;
+    width: 100%;
+  }
+}
+
+.tabbed-group-picker-search {
+  width: 100%;
+  padding: 0.5em;
+  border-bottom: 0.1em solid #ccc;
+  position: relative;
+  input {
+    font-size: 1em;
+    background: transparent;
+    border: none;
+    border-radius: 0;
+    outline: none;
+    height: 2rem;
+    width: 95%;
+    margin: 0 0 0 1em;
+    padding: 0;
+    box-shadow: none;
+    box-sizing: content-box;
+    transition: all 300ms;
+    color: $dark;
+    &::-webkit-input-placeholder {
+      color: $grey;
+    }
+  }
+  i.bhi-search,
+  i.bhi-times {
+    position: absolute;
+    bottom: 1em;
+    right: 0.5em;
+    color: $grey;
+    font-size: 1em;
+    margin-right: 1em;
+  }
+  i.bhi-times {
+    cursor: pointer;
+    font-size: 1em;
+  }
+}
+
+.tabbed-group-picker-column-container {
+  display: flex;
+  flex-direction: row;
+
+  .tabbed-group-picker-column {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    &.left {
+      border-right: 1px solid $light;
+      justify-content: space-between;
+
+      .clear-all-button {
+        margin-bottom: .5em;
+      }
+
+      novo-nav {
+        overflow: auto;
+
+        > novo-tab {
+          min-height: 3em;
+
+          > .novo-tab-link {
+            max-width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+          }
+          &.active {
+            .novo-tab-link {
+              font-weight: 400;
+            }
+            &:hover {
+              .novo-tab-link {
+                font-weight: 400;
+                color: $positive;
+              }
+            }
+          }
+          &:hover {
+            .novo-tab-link {
+              font-weight: 400;
+              color: $black;
+              opacity: 1;
+            }
+          }
+        }
+      }
+    }
+
+    &.right {
+      display: block;
+      width: 23em;
+      overflow: hidden;
+
+      .quick-select {
+        font-weight: 500;
+
+        .quick-select-label {
+          padding: 0.7em 1.9em 0 1.9em;
+          background: lighten($light, 10%);
+          text-transform: uppercase;
+          font-size: 0.8em;
+        }
+
+        .quick-select-list {
+          .quick-select-item {
+            background: lighten($light, 10%);
+            padding: 0.5em 1.75em;
+            border-bottom: none;
+          }
+          novo-list-item:last-of-type {
+            padding-bottom: 1em;
+          }
+        }
+      }
+      novo-list {
+
+        cdk-virtual-scroll-viewport {
+          height: 27em;
+          overflow-x: hidden;
+          @media (max-height: 720px) {
+            height: 18em;
+          }
+
+          novo-list-item {
+            padding: 0.75em 1.75em;
+            cursor: pointer;
+            border-bottom: none;
+            align-items: center;
+
+            &:focus,
+            &:hover {
+              background: lighten($light, 10%);
+              color: darken($light, 55%);
+            }
+
+            novo-checkbox .check-box-group {
+              margin-right: 0;
+              label span {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                width: 16.23em;
+              }
+            }
+          }
+        }
+      }
+
+      .tabbed-group-picker-empty-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        color: $grey;
+        width: 100%;
+        height: 27em;
+
+        i {
+          padding-bottom: 0.2em;
+          font-size: 3em;
+        }
+        .empty-item-main-message {
+          font-weight: 500;
+          color: $dark;
+        }
+        .empty-item-sub-message {
+          font-size: 0.9em;
+        }
+      }
+    }
+  }
+}