novo-elements 5.1.1 → 5.2.3

package/elements/select/Select.d.ts

@@ -1,62 +1,62 @@
-import { FocusMonitor } from '@angular/cdk/a11y';
-import { ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
-import { ControlValueAccessor } from '@angular/forms';
-import { NovoLabelService } from '../../services/novo-label-service';
-import { NovoOverlayTemplateComponent } from '../overlay/Overlay';
-export declare class NovoSelectElement implements OnInit, OnChanges, OnDestroy, ControlValueAccessor {
-    element: ElementRef;
-    labels: NovoLabelService;
-    ref: ChangeDetectorRef;
-    private focusMonitor;
-    private ngZone;
-    name: string;
-    options: Array<any>;
-    placeholder: string;
-    readonly: boolean;
-    headerConfig: any;
-    onSelect: EventEmitter<any>;
-    selectedIndex: number;
-    empty: boolean;
-    header: any;
-    createdItem: any;
-    selected: any;
-    model: any;
-    onModelChange: Function;
-    onModelTouched: Function;
-    filterTerm: string;
-    filterTermTimeout: any;
-    filteredOptions: any;
-    disabled: boolean;
-    /** Element for the panel containing the autocomplete options. */
-    overlay: NovoOverlayTemplateComponent;
-    dropdown: ElementRef;
-    constructor(element: ElementRef, labels: NovoLabelService, ref: ChangeDetectorRef, focusMonitor: FocusMonitor, ngZone: NgZone);
-    ngOnInit(): void;
-    ngOnChanges(changes?: SimpleChanges): void;
-    ngOnDestroy(): void;
-    /** BEGIN: Convienient Panel Methods. */
-    openPanel(): void;
-    closePanel(): void;
-    togglePanel(): void;
-    get panelOpen(): boolean;
-    /** END: Convenient Panel Methods. */
-    /**
-     * This method closes the panel, and if a value is specified, also sets the associated
-     * control to that value. It will also mark the control as dirty if this interaction
-     * stemmed from the user.
-     */
-    setValueAndClose(event: any | null): void;
-    select(option: any, i: any, fireEvents?: boolean): void;
-    clear(): void;
-    onKeyDown(event: KeyboardEvent): void;
-    scrollToSelected(): void;
-    scrollToIndex(index: number): void;
-    toggleHeader(event: any, forceValue?: boolean): void;
-    highlight(match: any, query: any): any;
-    escapeRegexp(queryToEscape: any): any;
-    saveHeader(): void;
-    writeValue(model: any): void;
-    registerOnChange(fn: Function): void;
-    registerOnTouched(fn: Function): void;
-    setDisabledState(disabled: boolean): void;
-}
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { NovoLabelService } from '../../services/novo-label-service';
+import { NovoOverlayTemplateComponent } from '../overlay/Overlay';
+export declare class NovoSelectElement implements OnInit, OnChanges, OnDestroy, ControlValueAccessor {
+    element: ElementRef;
+    labels: NovoLabelService;
+    ref: ChangeDetectorRef;
+    private focusMonitor;
+    private ngZone;
+    name: string;
+    options: Array<any>;
+    placeholder: string;
+    readonly: boolean;
+    headerConfig: any;
+    onSelect: EventEmitter<any>;
+    selectedIndex: number;
+    empty: boolean;
+    header: any;
+    createdItem: any;
+    selected: any;
+    model: any;
+    onModelChange: Function;
+    onModelTouched: Function;
+    filterTerm: string;
+    filterTermTimeout: any;
+    filteredOptions: any;
+    disabled: boolean;
+    /** Element for the panel containing the autocomplete options. */
+    overlay: NovoOverlayTemplateComponent;
+    dropdown: ElementRef;
+    constructor(element: ElementRef, labels: NovoLabelService, ref: ChangeDetectorRef, focusMonitor: FocusMonitor, ngZone: NgZone);
+    ngOnInit(): void;
+    ngOnChanges(changes?: SimpleChanges): void;
+    ngOnDestroy(): void;
+    /** BEGIN: Convienient Panel Methods. */
+    openPanel(): void;
+    closePanel(): void;
+    togglePanel(): void;
+    get panelOpen(): boolean;
+    /** END: Convenient Panel Methods. */
+    /**
+     * If the item is not disabled, this method closes the panel, and if a value is specified,
+     * also sets the associated control to that value. It will also mark the control as dirty
+     * if this interaction stemmed from the user.
+     */
+    setValueAndClose(event: any | null): void;
+    select(option: any, i: any, fireEvents?: boolean): void;
+    clear(): void;
+    onKeyDown(event: KeyboardEvent): void;
+    scrollToSelected(): void;
+    scrollToIndex(index: number): void;
+    toggleHeader(event: any, forceValue?: boolean): void;
+    highlight(match: any, query: any): any;
+    escapeRegexp(queryToEscape: any): any;
+    saveHeader(): void;
+    writeValue(model: any): void;
+    registerOnChange(fn: Function): void;
+    registerOnTouched(fn: Function): void;
+    setDisabledState(disabled: boolean): void;
+}

package/elements/select/Select.module.d.ts

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

package/elements/select/Select.scss

@@ -0,0 +1,226 @@
+novo-select {
+  display: block;
+  position: relative;
+  width: 100%;
+  max-width: 800px;
+  min-width: 180px;
+  cursor: pointer;
+  font-size: 1rem;
+  div[type='button'] {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: transparent;
+    border: none;
+    border-bottom: 1px solid lighten($dark, 45%);
+    color: $dark;
+    height: 2.05rem;
+    position: relative;
+    text-align: left;
+    text-shadow: none;
+    width: 100%;
+    z-index: 1;
+    cursor: pointer;
+    text-transform: none;
+    padding: 0 10px 0 0;
+    font-size: 1rem;
+    &.empty {
+      color: #a9a9a9;
+    }
+    &:focus,
+    &:hover {
+      outline: none;
+    }
+    &:hover {
+      border-bottom: 1px solid lighten($dark, 15%);
+    }
+    &:focus {
+      border-bottom: 1px solid $positive;
+      i {
+        color: rgba(0, 0, 0, 0.73);
+      }
+    }
+    i {
+      font-size: 0.8em;
+      color: $dark;
+      position: absolute;
+      right: 10px;
+    }
+  }
+  &[disabled] {
+    pointer-events: none;
+    div[type='button'] {
+      color: $grey;
+    }
+  }
+}
+
+.novo-select-list {
+  &.active {
+    z-index: 1000;
+    max-height: 219px;
+    min-width: 200px;
+    width: 100%;
+    max-width: 800px;
+    width: inherit;
+    overflow: auto;
+    opacity: 1;
+  }
+  background-color: white;
+  cursor: default;
+  list-style: none;
+  line-height: 26px;
+  overflow: auto;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  box-shadow: 0 -1px 3px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  font-size: 1rem;
+  z-index: -1;
+  opacity: 0;
+  li {
+    cursor: pointer;
+    height: 30px;
+    margin: 0;
+    padding: 5px 16px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: darken($light, 45%);
+    font-size: 1rem;
+    span {
+      display: inline-block;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+    i {
+      height: 30px !important;
+      width: 15px !important;
+      border-radius: 0;
+      margin: 0 !important;
+      color: $positive;
+      line-height: 1.4em;
+    }
+    &.disabled {
+      cursor: not-allowed;
+      color: $grey;
+    }
+    &:not(.disabled) {
+      &:focus,
+      &:hover {
+        background: lighten($light, 10%);
+        color: darken($light, 55%);
+      }
+    }
+    &.active {
+      color: darken($light, 55%);
+      font-weight: 500;
+    }
+    &.open.select-header {
+      background: lighten($light, 10%);
+      padding: 10px 0 0;
+      line-height: 28px;
+      height: 60px;
+      border-bottom: 1px solid #e9e9e9;
+    }
+  }
+  &:focus {
+    outline: none;
+  }
+  &.header {
+    max-height: 240px;
+    min-width: 200px;
+    padding: 0;
+  }
+}
+
+.select-header {
+  button {
+    text-transform: uppercase;
+    &.header {
+      color: $positive;
+      position: relative;
+      text-align: left;
+      cursor: pointer;
+      height: 30px;
+      margin: 0;
+      padding: 5px 16px 0 0;
+      box-sizing: border-box;
+      border: none;
+      display: block;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 1rem;
+      &:focus,
+      &:hover {
+        color: darken($light, 55%);
+      }
+      i {
+        color: $positive;
+        padding-right: 10px;
+      }
+      span {
+        text-align: left;
+      }
+    }
+  }
+  div.active {
+    width: 100%;
+    float: right;
+    padding: 5px;
+    footer {
+      float: right;
+    }
+    button {
+      display: inline-block;
+      border: none;
+      float: left;
+      width: auto;
+      font-weight: 500;
+      font-size: 0.8rem;
+      color: #acacac;
+      &:hover {
+        color: darken(#acacac, 15%);
+      }
+    }
+    button.primary {
+      color: $positive;
+      &:hover {
+        color: darken($positive, 15%);
+      }
+    }
+    input {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      background-color: transparent;
+      border: none;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+      color: rgba(0, 0, 0, 0.73);
+      height: 2.05rem;
+      position: relative;
+      text-align: left;
+      text-shadow: none;
+      width: 100%;
+      z-index: 1;
+      cursor: pointer;
+      text-transform: none;
+      padding-top: 10px;
+      font-size: 1rem;
+      &.empty {
+        color: #a9a9a9;
+      }
+      &:focus {
+        outline: none;
+      }
+      &:hover {
+        border-bottom: 1px solid $positive;
+      }
+      &.invalid {
+        border-bottom: 1px solid #da4453;
+      }
+    }
+  }
+}

package/elements/simple-table/activity-table-renderers.d.ts

@@ -1,4 +1,4 @@
-export declare class ActivityTableRenderers {
-    static propertyRenderer<T>(prop: string): Function;
-    static dateRenderer<T>(prop: string): Function;
-}
+export declare class ActivityTableRenderers {
+    static propertyRenderer<T>(prop: string): Function;
+    static dateRenderer<T>(prop: string): Function;
+}

package/elements/simple-table/cell-header.d.ts

@@ -1,62 +1,62 @@
-import { AfterViewInit, ChangeDetectorRef, ElementRef, OnDestroy, OnInit } from '@angular/core';
-import { CdkColumnDef } from '@angular/cdk/table';
-import { NovoDropdownElement } from '../dropdown/Dropdown';
-import { NovoSimpleSortFilter, SimpleTableColumnFilterConfig } from './interfaces';
-import { NovoSortFilter } from './sort';
-import { NovoLabelService } from '../../services/novo-label-service';
-import { NovoActivityTableState } from './state';
-export declare class NovoSimpleFilterFocus implements AfterViewInit {
-    private element;
-    constructor(element: ElementRef);
-    ngAfterViewInit(): void;
-}
-export declare class NovoSimpleCellHeader implements NovoSimpleSortFilter, OnInit, OnDestroy {
-    private changeDetectorRef;
-    labels: NovoLabelService;
-    private state;
-    _sort: NovoSortFilter;
-    _cdkColumnDef: CdkColumnDef;
-    dropdown: NovoDropdownElement;
-    defaultSort: {
-        id: string;
-        value: string;
-    };
-    get config(): {
-        sortable: boolean;
-        filterable: boolean;
-        transforms?: {
-            filter?: Function;
-            sort?: Function;
-        };
-        filterConfig: SimpleTableColumnFilterConfig;
-    };
-    set config(v: {
-        sortable: boolean;
-        filterable: boolean;
-        transforms?: {
-            filter?: Function;
-            sort?: Function;
-        };
-        filterConfig: SimpleTableColumnFilterConfig;
-    });
-    private _config;
-    private _rerenderSubscription;
-    private changeTimeout;
-    icon: string;
-    id: string;
-    filter: string | boolean;
-    direction: string;
-    filterActive: boolean;
-    sortActive: boolean;
-    showCustomRange: boolean;
-    activeDateFilter: string;
-    constructor(changeDetectorRef: ChangeDetectorRef, labels: NovoLabelService, state: NovoActivityTableState, _sort: NovoSortFilter, _cdkColumnDef: CdkColumnDef);
-    ngOnInit(): void;
-    ngOnDestroy(): void;
-    sort(): void;
-    toggleCustomRange(event: Event, value: boolean): void;
-    filterData(filter?: any): void;
-    clearFilter(): void;
-    private getNextSortDirection;
-    private getDefaultDateFilterOptions;
-}
+import { AfterViewInit, ChangeDetectorRef, ElementRef, OnDestroy, OnInit } from '@angular/core';
+import { CdkColumnDef } from '@angular/cdk/table';
+import { NovoDropdownElement } from '../dropdown/Dropdown';
+import { NovoSimpleSortFilter, SimpleTableColumnFilterConfig } from './interfaces';
+import { NovoSortFilter } from './sort';
+import { NovoLabelService } from '../../services/novo-label-service';
+import { NovoActivityTableState } from './state';
+export declare class NovoSimpleFilterFocus implements AfterViewInit {
+    private element;
+    constructor(element: ElementRef);
+    ngAfterViewInit(): void;
+}
+export declare class NovoSimpleCellHeader implements NovoSimpleSortFilter, OnInit, OnDestroy {
+    private changeDetectorRef;
+    labels: NovoLabelService;
+    private state;
+    _sort: NovoSortFilter;
+    _cdkColumnDef: CdkColumnDef;
+    dropdown: NovoDropdownElement;
+    defaultSort: {
+        id: string;
+        value: string;
+    };
+    get config(): {
+        sortable: boolean;
+        filterable: boolean;
+        transforms?: {
+            filter?: Function;
+            sort?: Function;
+        };
+        filterConfig: SimpleTableColumnFilterConfig;
+    };
+    set config(v: {
+        sortable: boolean;
+        filterable: boolean;
+        transforms?: {
+            filter?: Function;
+            sort?: Function;
+        };
+        filterConfig: SimpleTableColumnFilterConfig;
+    });
+    private _config;
+    private _rerenderSubscription;
+    private changeTimeout;
+    icon: string;
+    id: string;
+    filter: string | boolean;
+    direction: string;
+    filterActive: boolean;
+    sortActive: boolean;
+    showCustomRange: boolean;
+    activeDateFilter: string;
+    constructor(changeDetectorRef: ChangeDetectorRef, labels: NovoLabelService, state: NovoActivityTableState, _sort: NovoSortFilter, _cdkColumnDef: CdkColumnDef);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    sort(): void;
+    toggleCustomRange(event: Event, value: boolean): void;
+    filterData(filter?: any): void;
+    clearFilter(): void;
+    private getNextSortDirection;
+    private getDefaultDateFilterOptions;
+}