novo-elements 9.0.0-next.1 → 9.0.0-next.2

package/addons/ace-editor/AceEditor.d.ts

@@ -1,10 +1,12 @@
 import { ElementRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-import 'brace/index';
+import 'brace/ext/language_tools.js';
 import 'brace/mode/javascript';
 import 'brace/theme/chrome';
-import 'brace/ext/language_tools.js';
 import * as i0 from "@angular/core";
+/**
+ * @deprecated Use NovoCodeEditor instead
+ */
 export declare class NovoAceEditor implements ControlValueAccessor, OnInit, OnDestroy {
     private elementRef;
     set theme(theme: any);

package/addons/ace-editor/AceEditor.scss

@@ -1,4 +1,4 @@
-novo-ace-editor {
+:host {
   display: block;
   width: 100%;
   min-height: 200px;

package/addons/ckeditor/CKEditor.scss

@@ -1,5 +1,8 @@
-novo-editor {
-  .cke {
+@import "../../styles/variables.scss";
+
+// novo-editor {
+:host {
+  ::ng-deep .cke {
     font: inherit !important;
     box-shadow: none;
     border-color: var(--background-muted);
@@ -36,11 +39,11 @@ novo-editor {
   }
 }
 
-.theme-dark {
-  .cke_button {
+:host-context(.theme-dark) {
+  ::ng-deep .cke_button {
     filter: invert(1);
   }
-  .cke_combo {
+  ::ng-deep .cke_combo {
     a.cke_combo_button {
       &:hover,
       &:active,

package/addons/code-editor/CodeEditor.d.ts

@@ -0,0 +1,31 @@
+import { AfterViewInit, ElementRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { EditorView } from '@codemirror/view';
+import * as i0 from "@angular/core";
+export declare class NovoCodeEditor implements ControlValueAccessor, OnInit, OnDestroy, AfterViewInit {
+    private elementRef;
+    theme: string;
+    lineNumbers: boolean;
+    name: string;
+    blur: EventEmitter<any>;
+    focus: EventEmitter<any>;
+    private changed;
+    mode: string;
+    editorRoot: ElementRef<HTMLElement>;
+    editorView: EditorView;
+    initialValue: string;
+    private disabled;
+    constructor(elementRef: ElementRef);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    ngAfterViewInit(): void;
+    createEditorView(): void;
+    onFocus(): void;
+    onBlur(): void;
+    writeValue(value: any): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NovoCodeEditor, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NovoCodeEditor, "novo-code-editor", never, { "theme": "theme"; "lineNumbers": "lineNumbers"; "name": "name"; "mode": "mode"; }, { "blur": "blur"; "focus": "focus"; }, never, never>;
+}

package/addons/code-editor/CodeEditor.module.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./CodeEditor";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/forms";
+export declare class NovoCodeEditorModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<NovoCodeEditorModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NovoCodeEditorModule, [typeof i1.NovoCodeEditor], [typeof i2.CommonModule, typeof i3.FormsModule], [typeof i1.NovoCodeEditor]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<NovoCodeEditorModule>;
+}

package/addons/code-editor/CodeEditor.scss

@@ -0,0 +1,5 @@
+:host {
+    height: 200px;
+    display: block;
+    overflow: auto;
+}

package/addons/code-editor/index.d.ts

@@ -0,0 +1,2 @@
+export * from './CodeEditor';
+export * from './CodeEditor.module';

package/addons/code-editor/novo-elements-addons-code-editor.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="novo-elements/addons/code-editor" />
+export * from './index';

package/addons/code-editor/package.json

@@ -0,0 +1,10 @@
+{
+  "module": "../../fesm2015/novo-elements-addons-code-editor.mjs",
+  "es2020": "../../fesm2020/novo-elements-addons-code-editor.mjs",
+  "esm2020": "../../esm2020/addons/code-editor/novo-elements-addons-code-editor.mjs",
+  "fesm2020": "../../fesm2020/novo-elements-addons-code-editor.mjs",
+  "fesm2015": "../../fesm2015/novo-elements-addons-code-editor.mjs",
+  "typings": "novo-elements-addons-code-editor.d.ts",
+  "sideEffects": false,
+  "name": "novo-elements/addons/code-editor"
+}

package/addons/index.d.ts

@@ -1,3 +1,4 @@
 export * from './ace-editor';
 export * from './ckeditor';
+export * from './code-editor';
 export * from './dragula';

package/elements/aside/aside.component.scss

@@ -1,4 +1,4 @@
-@import "~novo-design-tokens/scss";
+@import "novo-design-tokens/scss";
 
 :host {
   .aside-panel {

package/elements/calendar/Calendar.module.d.ts

@@ -7,10 +7,9 @@ import * as i5 from "@angular/common";
 import * as i6 from "@angular/forms";
 import * as i7 from "novo-elements/elements/button";
 import * as i8 from "novo-elements/pipes";
-import * as i9 from "angular2-text-mask";
-import * as i10 from "novo-elements/elements/icon";
+import * as i9 from "novo-elements/elements/icon";
 export declare class NovoCalendarModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<NovoCalendarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NovoCalendarModule, [typeof i1.NovoMonthViewElement, typeof i2.NovoMonthSelectElement, typeof i3.NovoYearSelectElement, typeof i4.NovoCalendarElement], [typeof i5.CommonModule, typeof i6.FormsModule, typeof i7.NovoButtonModule, typeof i8.NovoPipesModule, typeof i9.TextMaskModule, typeof i10.NovoIconModule], [typeof i1.NovoMonthViewElement, typeof i2.NovoMonthSelectElement, typeof i3.NovoYearSelectElement, typeof i4.NovoCalendarElement]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NovoCalendarModule, [typeof i1.NovoMonthViewElement, typeof i2.NovoMonthSelectElement, typeof i3.NovoYearSelectElement, typeof i4.NovoCalendarElement], [typeof i5.CommonModule, typeof i6.FormsModule, typeof i7.NovoButtonModule, typeof i8.NovoPipesModule, typeof i9.NovoIconModule], [typeof i1.NovoMonthViewElement, typeof i2.NovoMonthSelectElement, typeof i3.NovoYearSelectElement, typeof i4.NovoCalendarElement]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<NovoCalendarModule>;
 }

package/elements/category-dropdown/CategoryDropdown.scss

@@ -1,4 +1,6 @@
-novo-category-dropdown {
+@import "../../styles/variables.scss";
+
+:host {
   display: block;
   position: relative;
   button {

package/elements/checkbox/CheckList.scss

@@ -1,4 +1,4 @@
-@import "~novo-design-tokens/scss";
+@import "novo-design-tokens/scss";
 
 :host {
   display: flex;

package/elements/checkbox/Checkbox.scss

@@ -1,4 +1,4 @@
-@import "~novo-design-tokens/scss";
+@import "novo-design-tokens/scss";
 
 :host {
   display: flex;

package/elements/chips/Chip.scss

@@ -41,15 +41,10 @@ $chip-spacing: (
   box-sizing: border-box;
   -webkit-tap-highlight-color: transparent;
   // Chips could be set on buttons so we need to reset the user agent styles.
-  border: none;
   -webkit-appearance: none;
   -moz-appearance: none;
-}
-
-.novo-chip {
   @include novo-body-text();
   background: var(--background-main);
-  box-sizing: border-box;
   border: 1px solid transparent;
   transition: all 200ms ease-in-out;
   display: inline-flex;
@@ -106,22 +101,6 @@ $chip-spacing: (
     }
   }
 
-  // &.novo-chip-with-trailing-icon.novo-chip-with-avatar,
-  // &.novo-chip-with-avatar {
-  //   padding-top: $novo-chip-avatar-vertical-padding;
-  //   padding-bottom: $novo-chip-avatar-vertical-padding;
-  // }
-
-  // &.novo-chip-with-trailing-icon.novo-chip-with-avatar {
-  //   padding-right: $novo-chip-remove-after-padding;
-  //   padding-left: $novo-chip-avatar-before-padding;
-  // }
-
-  // &.novo-chip-with-avatar {
-  //   padding-left: $novo-chip-avatar-before-padding;
-  //   padding-right: $novo-chip-horizontal-padding;
-  // }
-
   .novo-chip-avatar::not(novo-icon) {
     width: $novo-chip-avatar-size;
     height: $novo-chip-avatar-size;

package/elements/chips/Chips.d.ts

@@ -12,6 +12,7 @@ export declare class NovoChipsElement implements OnInit, ControlValueAccessor {
     source: any;
     maxlength: any;
     type: any;
+    allowCustomValues: boolean;
     set disablePickerInput(v: boolean);
     get disablePickerInput(): boolean;
     private _disablePickerInput;
@@ -72,5 +73,5 @@ export declare class NovoChipsElement implements OnInit, ControlValueAccessor {
      */
     hidePreview(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NovoChipsElement, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NovoChipsElement, "chips,novo-chips", never, { "closeOnSelect": "closeOnSelect"; "placeholder": "placeholder"; "source": "source"; "maxlength": "maxlength"; "type": "type"; "disablePickerInput": "disablePickerInput"; "value": "value"; }, { "changed": "changed"; "focus": "focus"; "blur": "blur"; "typing": "typing"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NovoChipsElement, "chips,novo-chips", never, { "closeOnSelect": "closeOnSelect"; "placeholder": "placeholder"; "source": "source"; "maxlength": "maxlength"; "type": "type"; "allowCustomValues": "allowCustomValues"; "disablePickerInput": "disablePickerInput"; "value": "value"; }, { "changed": "changed"; "focus": "focus"; "blur": "blur"; "typing": "typing"; }, never, never>;
 }

package/elements/chips/Chips.scss

@@ -1,10 +1,6 @@
-@import "./ChipList.scss";
 @import "../common/typography/text.mixins.scss";
 
-chips,
-novo-chips,
-entity-chips,
-novo-entity-chips {
+:host {
   width: 100%;
   display: flex;
   align-items: center;
@@ -13,7 +9,7 @@ novo-entity-chips {
   border-bottom: 1px solid lighten($dark, 45%);
   transition: all 200ms ease-in-out;
   position: relative;
-  padding: 5px 20px 5px 0;
+  padding: 2px 0;
   &.with-value {
     margin-bottom: 20px;
   }
@@ -47,15 +43,6 @@ novo-entity-chips {
     flex-flow: row wrap;
     gap: 0.4rem;
   }
-  novo-picker {
-    position: inherit;
-    > i {
-      display: none;
-    }
-    div.picker-results-container {
-      left: 0;
-    }
-  }
   label.clear-all {
     flex: 1 100%;
     position: absolute;
@@ -82,37 +69,34 @@ novo-entity-chips {
     //   bottom: 14px;
     // }
   }
-}
 
-chips,
-novo-chips,
-entity-chips,
-novo-entity-chips {
   & + i {
     position: absolute;
     right: 0;
     bottom: 7px;
   }
-  padding: 2px 0;
+  &.with-value {
+    margin-bottom: 0;
+  }
+
   novo-picker {
+    position: inherit;
     padding-bottom: 0;
-    > input {
+    > ::ng-deep input {
       border: none;
       border-bottom: none !important;
       &:disabled {
         border-bottom: none !important;
       }
     }
+    > ::ng-deep i {
+      display: none;
+    }
+    div.picker-results-container {
+      left: 0;
+    }
   }
-  &.with-value {
-    margin-bottom: 0;
-  }
-}
 
-chips,
-novo-chips,
-entity-chips,
-novo-entity-chips {
   picker-results {
     position: absolute;
     color: black;
@@ -212,71 +196,3 @@ novo-entity-chips {
 entity-chip-results {
   max-width: none !important;
 }
-
-novo-row-chips {
-  display: flex;
-  flex-flow: column;
-  gap: 0.8rem;
-
-  .novo-row-chips-columns {
-    display: flex;
-    align-items: flex-end;
-    margin-bottom: 1em;
-    .column-label {
-      @include novo-label-text();
-      display: flex;
-      flex: 1;
-      margin-right: 1em;
-      &:first-of-type {
-        flex: 0 0 275px;
-      }
-    }
-    .column-data {
-      display: flex;
-      align-items: center;
-      background: transparent !important;
-      border: none;
-      border-bottom: 1px dashed lighten($dark, 30%);
-      border-radius: 0;
-      outline: none;
-      height: 2em;
-      width: 100%;
-      margin: 0 1em 0 0;
-      &.editable {
-        border-bottom: none;
-        input {
-          background: none;
-          border: none;
-        }
-      }
-      &:first-of-type {
-        flex: 0 0 275px;
-      }
-      span {
-        color: inherit;
-        align-items: flex-start;
-        display: flex;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        -webkit-line-clamp: 2;
-        line-clamp: 2;
-        line-height: 1em;
-        max-height: 2em;
-        min-height: 1em;
-      }
-    }
-    i.bhi-delete-o {
-      color: $negative;
-    }
-  }
-  .novo-chip.novo-row-chip {
-    padding: 0;
-  }
-  .novo-row-chips-empty-message {
-    font-style: italic;
-    color: $grey;
-  }
-  i {
-    cursor: pointer;
-  }
-}

package/elements/chips/RowChips.scss

@@ -0,0 +1,70 @@
+@import "../../styles/variables.scss";
+@import "../common/typography/text.mixins.scss";
+
+:host {
+  display: flex;
+  flex-flow: column;
+  gap: 0.8rem;
+
+  ::ng-deep .novo-row-chips-columns {
+    display: flex;
+    align-items: flex-end;
+    margin-bottom: 1em;
+    .column-label {
+      @include novo-label-text();
+      display: flex;
+      flex: 1;
+      margin-right: 1em;
+      &:first-of-type {
+        flex: 0 0 275px;
+      }
+    }
+    .column-data {
+      display: flex;
+      align-items: center;
+      background: transparent !important;
+      border: none;
+      border-bottom: 1px dashed lighten($dark, 30%);
+      border-radius: 0;
+      outline: none;
+      height: 2em;
+      width: 100%;
+      margin: 0 1em 0 0;
+      &.editable {
+        border-bottom: none;
+        input {
+          background: none;
+          border: none;
+        }
+      }
+      &:first-of-type {
+        flex: 0 0 275px;
+      }
+      span {
+        color: inherit;
+        align-items: flex-start;
+        display: flex;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+        line-height: 1em;
+        max-height: 2em;
+        min-height: 1em;
+      }
+    }
+    i.bhi-delete-o {
+      color: $negative;
+    }
+  }
+  .novo-chip.novo-row-chip {
+    padding: 0;
+  }
+  .novo-row-chips-empty-message {
+    font-style: italic;
+    color: $grey;
+  }
+  i {
+    cursor: pointer;
+  }
+}

package/elements/common/overlay/Overlay.d.ts

@@ -58,6 +58,7 @@ export declare class NovoOverlayTemplateComponent implements OnDestroy {
     protected getConnectedElement(): ElementRef;
     protected elementIsInNestedOverlay(el: any): boolean;
     protected getHostWidth(): number;
+    isBlurRecipient(event: FocusEvent): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<NovoOverlayTemplateComponent, [null, null, null, null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<NovoOverlayTemplateComponent, "novo-overlay-template", never, { "position": "position"; "scrollStrategy": "scrollStrategy"; "width": "width"; "height": "height"; "closeOnSelect": "closeOnSelect"; "hasBackdrop": "hasBackdrop"; "parent": "parent"; }, { "select": "select"; "opening": "opening"; "closing": "closing"; }, never, ["*"]>;
 }

package/elements/data-table/data-table.component.scss

@@ -1,3 +1,6 @@
+@import "../../styles/variables.scss";
+@import "../../styles/reset";
+
 $table-bg-accent: var(--background-bright, $off-white);
 $novo-row-horizontal-padding: 20px;
 $table-header-font-weight: 400;
@@ -516,127 +519,6 @@ novo-data-table {
   }
 }
 
-novo-data-table-pagination {
-  &.basic,
-  &.basic-wide {
-    display: flex;
-    align-items: center;
-    flex: 1;
-    novo-tiles > .tile-container .tile {
-      padding: 7px 10px;
-    }
-    > .novo-data-table-pagination-size {
-      padding-right: 10px;
-    }
-    > .novo-data-table-range-label-long,
-    > .novo-data-table-range-label-short {
-      padding-right: 10px;
-      white-space: nowrap;
-    }
-    > .novo-data-table-range-label-long {
-      display: none;
-      @media (min-width: $breakpoint) {
-        display: block;
-      }
-    }
-    > .novo-data-table-spacer {
-      width: 100%;
-    }
-    > .novo-data-table-range-label-short {
-      display: block;
-      @media (min-width: $breakpoint) {
-        display: none;
-      }
-    }
-    > button:first-of-type {
-      margin-right: 5px;
-    }
-    > button {
-      span {
-        display: none;
-        @media (min-width: $breakpoint) {
-          display: block;
-        }
-      }
-    }
-    > button[theme][theme="dialogue"][icon][side="left"] {
-      padding: 5px;
-      @media (min-width: $breakpoint) {
-        padding: 5px 15px 5px 5px;
-      }
-    }
-    > button[theme][theme="dialogue"][icon][side="right"] {
-      padding: 5px;
-      @media (min-width: $breakpoint) {
-        padding: 5px 5px 5px 15px;
-      }
-    }
-  }
-  &.standard {
-    display: flex;
-    flex-flow: row nowrap;
-    flex: 1;
-    > * {
-      margin: auto 5px;
-    }
-    h5.rows {
-      padding: 0;
-      font-size: 12px;
-      opacity: 0.75;
-      letter-spacing: 0.1px;
-    }
-    span.spacer {
-      flex: 1;
-    }
-    novo-select {
-      max-width: 100px;
-      min-width: 100px;
-      div[type="button"] {
-        &:hover {
-          i {
-            opacity: 0.75;
-          }
-        }
-        &:active,
-        &:focus {
-          i {
-            opacity: 1;
-          }
-        }
-        i {
-          opacity: 0.45;
-        }
-      }
-    }
-    .pager {
-      list-style-type: none;
-      user-select: none;
-      display: flex;
-      .page {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 2.4rem;
-        height: 2.4rem;
-        font-size: var(--font-size-text);
-        border-radius: 2px;
-        list-style-type: none;
-        cursor: pointer;
-        color: $company;
-        &.disabled {
-          opacity: 0.3;
-          pointer-events: none;
-        }
-      }
-      .page.active {
-        color: $company;
-        background-color: rgba($black, 0.1);
-        opacity: 1;
-      }
-    }
-  }
-}
-
 .dropdown-container.data-table-dropdown {
   min-width: 220px;
   max-width: 280px;