novo-elements 9.0.0-next.1 → 9.0.0

package/elements/form/extras/address/Address.scss

@@ -1,4 +1,6 @@
-novo-address {
+@import "../../../../styles/variables.scss";
+
+:host {
   display: flex;
   flex-flow: row wrap;
   align-items: center;
@@ -10,14 +12,14 @@ novo-address {
     .zip,
     .country-name {
       &.invalid {
-        input,
-        novo-select div[type="button"] {
+        ::ng-deep input,
+        ::ng-deep novo-select div[type="button"] {
           border-bottom: 1px solid $negative !important;
         }
       }
     }
   }
-  novo-picker i {
+  ::ng-deep novo-picker i {
     padding: 0 5px;
   }
   input {
@@ -89,30 +91,30 @@ novo-address {
   }
 }
 
-novo-form .novo-form-container form,
-novo-dynamic-form[layout="vertical"] .novo-form-container form,
-novo-dynamic-form .novo-form-container form {
-  div.novo-form-row
+:host-context(novo-form .novo-form-container form),
+:host-context(novo-dynamic-form[layout="vertical"] .novo-form-container form),
+:host-context(novo-dynamic-form .novo-form-container form) {
+  :host-context(div.novo-form-row
     novo-control
     > div.novo-control-container
     > div.novo-control-outer-container
     .novo-control-inner-container
     .novo-control-inner-input-container
-    novo-address,
-  div.novo-control-group-control
+    novo-address),
+  :host-context(div.novo-control-group-control
     novo-control
     > div.novo-control-container
     > div.novo-control-outer-container
     .novo-control-inner-container
     .novo-control-inner-input-container
-    novo-address,
-  td.novo-form-row
+    novo-address),
+  :host-context(td.novo-form-row
     novo-control
     > div.novo-control-container
     > div.novo-control-outer-container
     .novo-control-inner-container
     .novo-control-inner-input-container
-    novo-address {
+    novo-address) {
     .street-address,
     .apt,
     .city,

package/elements/form/extras/file/FileInput.d.ts

@@ -1,10 +1,11 @@
 import { FocusKeyManager } from '@angular/cdk/a11y';
-import { ElementRef, EventEmitter, OnDestroy, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
+import { CdkDragDrop } from '@angular/cdk/drag-drop';
+import { ElementRef, EventEmitter, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
 import { ControlValueAccessor, FormGroupDirective, NgControl, NgForm } from '@angular/forms';
-import { NovoDragulaService } from 'novo-elements/addons/dragula';
-import { NovoLabelService } from 'novo-elements/services';
 import { CanUpdateErrorStateCtor, ErrorStateMatcher } from 'novo-elements/elements/common';
 import { NovoFieldControl } from 'novo-elements/elements/field';
+import { GlobalRef, NovoLabelService } from 'novo-elements/services';
+import { NovoFile } from './extras/file/File';
 import * as i0 from "@angular/core";
 declare class NovoFileInputBase {
     _defaultErrorStateMatcher: ErrorStateMatcher;
@@ -14,10 +15,9 @@ declare class NovoFileInputBase {
     constructor(_defaultErrorStateMatcher: ErrorStateMatcher, _parentForm: NgForm, _parentFormGroup: FormGroupDirective, ngControl: NgControl);
 }
 declare const NovoFileInputMixins: CanUpdateErrorStateCtor & typeof NovoFileInputBase;
-export declare class NovoFileInputElement extends NovoFileInputMixins implements NovoFieldControl<any>, ControlValueAccessor, OnInit, OnDestroy {
-    private element;
+export declare class NovoFileInputElement extends NovoFileInputMixins implements NovoFieldControl<any>, ControlValueAccessor, OnInit {
     labels: NovoLabelService;
-    private dragula;
+    private globalRef;
     private _uniqueId;
     /** The aria-describedby attribute on the chip list for improved a11y. */
     _ariaDescribedby: string;
@@ -47,7 +47,7 @@ export declare class NovoFileInputElement extends NovoFileInputMixins implements
         edit?: boolean;
         labelStyle?: string;
         draggable?: boolean;
-        customActions: boolean;
+        customActions?: boolean;
         removable?: boolean;
         customValidation?: {
             action: string;
@@ -61,8 +61,7 @@ export declare class NovoFileInputElement extends NovoFileInputMixins implements
     save: EventEmitter<any>;
     delete: EventEmitter<any>;
     upload: EventEmitter<any>;
-    elements: Array<any>;
-    files: Array<any>;
+    files: NovoFile[];
     model: any;
     active: boolean;
     commands: any;
@@ -89,26 +88,26 @@ export declare class NovoFileInputElement extends NovoFileInputMixins implements
     protected _required: boolean;
     protected _disabled: boolean;
     protected _placeholder: string;
-    constructor(element: ElementRef, labels: NovoLabelService, dragula: NovoDragulaService, _defaultErrorStateMatcher: ErrorStateMatcher, _parentForm: NgForm, _parentFormGroup: FormGroupDirective, _ngControl: NgControl);
+    constructor(labels: NovoLabelService, globalRef: GlobalRef, _defaultErrorStateMatcher: ErrorStateMatcher, _parentForm: NgForm, _parentFormGroup: FormGroupDirective, _ngControl: NgControl);
     ngOnInit(): void;
-    ngOnDestroy(): void;
     updateLayout(): void;
     insertTemplatesBasedOnLayout(): any;
-    initializeDragula(): void;
-    setInitialFileList(): void;
+    get outputFileDraggingDisabled(): boolean;
+    private setInitialFileList;
     dragEnterHandler(event: any): void;
     dragLeaveHandler(event: any): void;
     dragOverHandler(event: any): void;
     dropHandler(event: any): void;
+    dropOutputItem(event: CdkDragDrop<NovoFile[]>): void;
     writeValue(model: any): void;
     registerOnChange(fn: Function): void;
     registerOnTouched(fn: Function): void;
     check(event: any): void;
     validate(files: any): boolean;
-    process(filelist: any): void;
+    private process;
     download(file: any): void;
     remove(file: any): void;
-    readFile(file: any): Promise<unknown>;
+    private readFile;
     customEdit(file: any): void;
     customSave(file: any): void;
     customDelete(file: any): void;
@@ -129,7 +128,7 @@ export declare class NovoFileInputElement extends NovoFileInputMixins implements
      * are no eligible chips.
      */
     focus(options?: FocusOptions): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NovoFileInputElement, [null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; self: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NovoFileInputElement, [null, null, null, { optional: true; }, { optional: true; }, { optional: true; self: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<NovoFileInputElement, "novo-file-input", never, { "id": "id"; "tabindex": "tabindex"; "errorStateMatcher": "errorStateMatcher"; "multiple": "multiple"; "layoutOptions": "layoutOptions"; "value": "value"; "dataFeatureId": "dataFeatureId"; "name": "name"; "disabled": "disabled"; "required": "required"; "placeholder": "placeholder"; }, { "edit": "edit"; "save": "save"; "delete": "delete"; "upload": "upload"; }, never, never>;
 }
 export {};

package/elements/form/extras/file/FileInput.scss

@@ -1,3 +1,38 @@
+@import "../../../../styles/variables.scss";
+
+@mixin file-item-style() {
+  background-color: $white;
+  box-shadow: 0 1px 4px rgba(#000, 0.15), 0 2px 10px rgba(#000, 0.09);
+  padding: 4px 12px;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  i.bhi-move {
+    color: $grey;
+    padding-right: 0.75em;
+    padding-bottom: 4px;
+    font-size: 2em;
+    cursor: -webkit-grab;
+    cursor: grab;
+  }
+  label {
+    flex: 1;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    span {
+      margin: 0 8px;
+    }
+  }
+  button {
+    font-size: 1.4rem;
+    width: 42px;
+    height: 42px;
+    padding: 4px;
+    color: $grey;
+  }
+}
+
 novo-file-input {
   display: flex;
   flex-flow: row wrap;
@@ -8,39 +43,10 @@ novo-file-input {
     width: 100%;
     margin-top: 15px;
     .file-item {
-      background-color: $white;
-      box-shadow: 0 1px 4px rgba(#000, 0.15), 0 2px 10px rgba(#000, 0.09);
+      @include file-item-style;
       margin-bottom: 15px;
       position: relative; //border-radius: 3px;
-      display: flex;
-      flex-flow: row nowrap;
-      align-items: center;
-      padding: 4px 12px;
       width: 100%;
-      i.bhi-move {
-        color: $grey;
-        padding-right: 0.75em;
-        padding-bottom: 4px;
-        font-size: 2em;
-        cursor: -webkit-grab;
-        cursor: grab;
-      }
-      label {
-        flex: 1;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        span {
-          margin: 0 8px;
-        }
-      }
-      button {
-        font-size: 1.4rem;
-        width: 42px;
-        height: 42px;
-        padding: 4px;
-        color: $grey;
-      }
       button:hover,
       button:focus,
       button.active {
@@ -52,6 +58,12 @@ novo-file-input {
         border: 2px dashed $grey;
       }
     }
+    &.cdk-drop-list-dragging {
+      cursor: grabbing;
+      .file-item {
+        transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+      }
+    }
   }
   .file-input-group {
     cursor: pointer;
@@ -117,3 +129,21 @@ novo-file-input {
     }
   }
 }
+
+// Configuration for CDK Drag/Drop
+// https://material.angular.io/cdk/drag-drop/overview
+
+.cdk-drag-preview.file-item {
+  cursor: grab;
+  @include file-item-style;
+}
+
+.cdk-drag-placeholder.file-item {
+  opacity: 0;
+}
+
+// This element will be outside of component layout, at the DOM root
+.cdk-drag-animating.file-item {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+

package/elements/form/fieldset-header.scss

@@ -0,0 +1,17 @@
+:host {
+  background: var(--background-muted);
+  box-sizing: content-box;
+  padding: 1rem 1rem 1rem 0.5rem;
+  margin-bottom: 2rem;
+  display: flex;
+  margin-left: -1.5rem;
+  margin-right: -1.5rem;
+  font-size: 1.8rem;
+  ::ng-deep i,
+  ::ng-deep novo-icon {
+    margin: 1px 10px 1px 6px;
+  }
+  &.hidden {
+    display: none;
+  }
+}

package/elements/header/Header.scss

@@ -40,8 +40,15 @@
     div.header-title {
       display: flex;
       align-items: center;
-      max-width: calc(100% - 40px);
       gap: $spacing-sm;
+      // making room for ellipsis
+      padding-inline-end: 2em;
+      // prevent pushing other flex content
+      min-width: 0;
+      flex-shrink: 1;
+      .novo-title {
+        overflow: hidden;
+      }
 
       ::ng-deep novo-icon {
         margin-right: 1rem;
@@ -104,6 +111,8 @@
       }
       ::ng-deep .novo-title {
         color: inherit;
+        overflow: hidden;
+        padding-right: 0.5rem;
       }
       ::ng-deep .novo-action {
         button,

package/elements/index.d.ts

@@ -15,6 +15,7 @@ export * from 'novo-elements/elements/data-table';
 export * from 'novo-elements/elements/date-picker';
 export * from 'novo-elements/elements/date-time-picker';
 export * from 'novo-elements/elements/divider';
+export * from 'novo-elements/elements/drag-drop';
 export * from 'novo-elements/elements/dropdown';
 export * from 'novo-elements/elements/expansion';
 export * from 'novo-elements/elements/field';

package/elements/list/list-item-content.scss

@@ -2,7 +2,7 @@
 
 @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
   :host-context([theme="#{$name}"]) {
-    > ::ng-deep * {
+    &.novo-item-content > ::ng-deep * {
       color: rgba(#fff, 0.65);
     }
   }
@@ -15,10 +15,10 @@
 :host {
   display: flex;
   margin-left: 0.2em;
-  > * {
+  &.novo-item-content > ::ng-deep * {
     color: rgba(#434343, 0.85);
   }
-  ::ng-deep i {
+  &.novo-item-content ::ng-deep i {
     @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
       &.#{$name} {
         color: $color;

package/elements/list/list-item-header-avatar.scss

@@ -2,7 +2,7 @@
 
 :host {
   margin-right: 0.5em;
-  i {
+  ::ng-deep i {
     @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
       &.#{$name} {
         color: $color;

package/elements/list/list-item-header-title.scss

@@ -10,7 +10,8 @@
 }
 
 :host {
-  display: contents;
+  display: block;
   color: inherit;
   font-size: inherit;
+  flex: 2 0 0;
 }

package/elements/modal/modal.component.scss

@@ -33,7 +33,7 @@
     overflow: auto;
   }
 
-  .novo-modal-footer {
+  ::ng-deep .novo-modal-footer {
     display: flex;
     align-items: center;
     justify-content: flex-end;

package/elements/multi-picker/_MultiPicker.scss

@@ -1,7 +1,7 @@
-multi-picker {
-  @extend chips;
-  @extend novo-checkbox;
+@import "../../styles/variables.scss";
+@import "../chips/Chips";
 
+:host {
   .chip-input-container {
     padding-top: 10px;
   }

package/elements/picker/Picker.d.ts

@@ -26,6 +26,7 @@ export declare class NovoPickerElement implements OnInit {
     autoSelectFirstOption: boolean;
     overrideElement: ElementRef;
     maxlength: number;
+    allowCustomValues: boolean;
     set disablePickerInput(v: boolean);
     get disablePickerInput(): boolean;
     private _disablePickerInput;
@@ -68,5 +69,5 @@ export declare class NovoPickerElement implements OnInit {
     registerOnTouched(fn: Function): void;
     setDisabledState(disabled: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NovoPickerElement, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NovoPickerElement, "novo-picker", never, { "config": "config"; "placeholder": "placeholder"; "clearValueOnSelect": "clearValueOnSelect"; "closeOnSelect": "closeOnSelect"; "selected": "selected"; "appendToBody": "appendToBody"; "parentScrollSelector": "parentScrollSelector"; "parentScrollAction": "parentScrollAction"; "containerClass": "containerClass"; "side": "side"; "autoSelectFirstOption": "autoSelectFirstOption"; "overrideElement": "overrideElement"; "maxlength": "maxlength"; "disablePickerInput": "disablePickerInput"; }, { "changed": "changed"; "select": "select"; "focus": "focus"; "blur": "blur"; "typing": "typing"; }, never, ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NovoPickerElement, "novo-picker", never, { "config": "config"; "placeholder": "placeholder"; "clearValueOnSelect": "clearValueOnSelect"; "closeOnSelect": "closeOnSelect"; "selected": "selected"; "appendToBody": "appendToBody"; "parentScrollSelector": "parentScrollSelector"; "parentScrollAction": "parentScrollAction"; "containerClass": "containerClass"; "side": "side"; "autoSelectFirstOption": "autoSelectFirstOption"; "overrideElement": "overrideElement"; "maxlength": "maxlength"; "allowCustomValues": "allowCustomValues"; "disablePickerInput": "disablePickerInput"; }, { "changed": "changed"; "select": "select"; "focus": "focus"; "blur": "blur"; "typing": "typing"; }, never, ["*"]>;
 }