ids-enterprise-ng - npm Package Compare versions

Comparing version 4.7.0-alpha.1 to 4.7.0-beta

package.json

 {
   "name": "ids-enterprise-ng",
   "slug": "ids-enterprise-ng",
-  "version": "4.7.0-alpha.1",
+  "version": "4.7.0-beta",
   "description": "Infor Design System (IDS) Enterprise Angular Components",
@@ -15,3 +15,3 @@ "repository": {
   "author": "Hook & Loop",
-  "license": "MIT",
+  "license": "Apache 2.0",
   "bugs": {
@@ -22,6 +22,7 @@ "url": "https://github.com/infor-design/enterprise-ng/issues"
   "scripts": {
+    "prepublishOnly": "cd ../ && npx gulp publish && cd ./publish",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "ids-enterprise": "^4.7.0-dev",
+    "ids-enterprise": "^4.7.0-beta",
     "classlist.js": "^1.1.20150312",
@@ -31,2 +32,1 @@ "jquery": "3.3.1"
 }
-

README.MD

@@ -1,2 +0,3 @@
-# :tada: SoHo XI Directives for Angular Has Moved to Github! :tada:
+# :tada: Infor Design System's Enterprise Components for Angular Has Moved to Github! :tada:
+(formerly "SoHo XI Directives")
 
@@ -17,3 +18,3 @@ Starting at the end of release `4.6.0`, we moved the Soho XI codebase to Github and the Angular repo is following! What this means is now anyone can view and contribute to the codebase.
 
-# Infor Design System's Enterprise Directives for Angular
+# Infor Design System's Enterprise Components for Angular
 
@@ -20,0 +21,0 @@ This repository serves as the central shared location for a crowd-sourced cross-Infor Angular Typescript repo of Xi control wrapped components.

soho/about/soho-about.ref.ts

@@ -1,2 +0,2 @@
-import { Subject } from 'rxjs/Subject';
+import { Subject } from 'rxjs';
 
@@ -3,0 +3,0 @@ /**

soho/busyindicator/soho-busyindicator.directive.ts

@@ -108,10 +108,7 @@ import {
   public set activated(value: boolean) {
-    if (this.busyindicator) {
-      if (value) {
-        this.open();
-      } else {
-        this.close(true);
-      }
+    this.initiallyActive = value;
+    if (value) {
+      this.open();
     } else {
-      this.initiallyActive = value;
+      this.close(true);
     }
@@ -223,7 +220,5 @@ }
 
-      // Initial busy state if set to true
-      if (this.initiallyActive) {
-        // get back into the angular zone so the setTimeout will trigger change detection.
-        this.ngZone.run(() => setTimeout(() => this.activated = true, 1));
-      }
+      // Set initial state
+      // get back into the angular zone so the setTimeout will trigger change detection.
+      this.ngZone.run(() => this.activated = this.initiallyActive);
     });
@@ -230,0 +225,0 @@ }

soho/contextual-action-panel/soho-contextual-action-panel.ref.ts

 import { ComponentRef } from '@angular/core';
-import { Subject } from 'rxjs/Subject';
+import { Subject } from 'rxjs';
 
@@ -4,0 +4,0 @@ /**

soho/datagrid/soho-datagrid.component.ts

@@ -1384,2 +1384,11 @@ import {
   /**
+   * Sets the active cell.
+   * @param idx The index of the row of the cell to set active.
+   * @param idx2 The index of the cell to set active.
+   */
+  public setActiveCell(idx: number, idx2: number): void {
+    this.datagrid.setActiveCell(idx, idx2);
+  }
+
+  /**
    * Scrolls the row at <b>idx</b> into view in the view port.
@@ -1393,2 +1402,11 @@ * @param idx The index of the row to scroll into view.
   /**
+   * Returns an array of row numbers for the rows containing the value for the specified field.
+   * @param fieldName The field name to search.
+   * @param value The value to use in search.
+   */
+  findRowsByValue(fieldName: string, value: any): number[] {
+    return this.datagrid.findRowsByValue(fieldName, value);
+  }
+
+  /**
    * Programmatically trigger a call to the datagrid.settings.source
@@ -1395,0 +1413,0 @@ * function with the given pagerType.

soho/datagrid/soho-datagrid.d.ts

@@ -705,2 +705,5 @@ /**
   selectChildren?: boolean;
+
+  /** Enforce a max length when editing this column */
+  maxLength?: boolean;
 }
@@ -857,2 +860,5 @@
 
+  /** Returns an array of row numbers for the rows containing the value for the specified field */
+  findRowsByValue(fieldName: string, value: any): number[];
+
   renderHeader(): void;
@@ -859,0 +865,0 @@

soho/datagrid/soho-datagrid.service.ts

@@ -1,2 +0,2 @@
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
@@ -3,0 +3,0 @@ /**

soho/datagrid/soho-datagrid.spec.ts

@@ -204,2 +204,3 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
     datagrid = component.datagrid;
+    datagrid.treeGrid = true;
 
@@ -206,0 +207,0 @@ de = fixture.debugElement;

soho/datepicker/soho-datepicker.spec.ts

@@ -5,6 +5,3 @@ import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 
-// https://github.com/ReactiveX/rxjs/issues/2984
-// tslint:disable-next-line:import-blacklist
-import 'rxjs/Rx';
-import { Observable } from 'rxjs/Observable';
+import { map } from 'rxjs/operators';
 
@@ -61,5 +58,5 @@ import { SohoDatePickerModule, SohoDatePickerComponent } from './index';
 
-    comp.changed.map((x: SohoDatePickerEvent) => x.data).subscribe((x) => {
-      expect(x).toBe(date, 'Incorrect value passed to event');
-    });
+    // comp.changed.map((x: SohoDatePickerEvent) => x.data).subscribe((x) => {
+    //   expect(x).toBe(date, 'Incorrect value passed to event');
+    // });
 
@@ -66,0 +63,0 @@ comp.datepicker.setValue(date);

soho/dropdown/soho-dropdown.component.ts

 import {
   AfterViewInit,
-  ChangeDetectionStrategy,
   Component,
@@ -11,12 +10,25 @@ ElementRef,
   Output,
+  NgZone,
+  Self,
+  Host,
+  Optional,
+  InjectionToken,
+  forwardRef,
+  AfterViewChecked,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef
 } from '@angular/core';
-import { NgModel } from '@angular/forms';
 
+import {
+  NgModel,
+  NgControl,
+  ControlValueAccessor
+} from '@angular/forms';
+
 @Component({
   selector: 'select[soho-dropdown]', // tslint:disable-line
   template: '<ng-content></ng-content>',
-  providers: [NgModel],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class SohoDropDownComponent implements AfterViewInit, OnDestroy {
+export class SohoDropDownComponent implements AfterViewInit, AfterViewChecked, OnDestroy {
   /**
@@ -26,3 +38,9 @@ * Used to provide unnamed controls with a unique id.
   private static counter = 0;
+  /**
+ * Flag to force an update of the control after the view is created.
+ */
+  private runUpdatedOnCheck: boolean;
 
+  private valueAccessor: SohoDropDownControlValueAccessorDelegator;
+
   /**
@@ -32,4 +50,5 @@ * Local variables
   private isDisabled: boolean = null;
-  private isReadOnly: boolean =  null;
 
+  private isReadOnly: boolean = null;
+
   /**
@@ -62,3 +81,3 @@ * Selector for originating element.
       this.dropdown.settings.closeOnSelect = closeOnSelect;
-      this.dropdown.updated();
+      this.markForRefresh();
     }
@@ -139,3 +158,3 @@ }
       this.dropdown.settings.moveSelected = moveSelected;
-      this.dropdown.updated();
+      this.markForRefresh();
     }
@@ -153,3 +172,3 @@ }
       this.dropdown.settings.showEmptyGroupHeaders = showEmptyGroupHeaders;
-      this.dropdown.updated();
+      this.markForRefresh();
     }
@@ -167,3 +186,3 @@ }
       this.dropdown.settings.sourceArguments = sourceArguments;
-      this.dropdown.updated();
+      this.markForRefresh();
     }
@@ -181,3 +200,3 @@ }
       this.dropdown.settings.reloadSourceOnOpen = reloadSourceOnOpen;
-      this.dropdown.updated();
+      this.markForRefresh();
     }
@@ -201,3 +220,3 @@ }
       this.dropdown.settings.maxWidth = maxWidth;
-      this.dropdown.updated();
+      this.markForRefresh();
     }
@@ -215,3 +234,3 @@ }
       this.dropdown.settings.filterMode = filterMode;
-      this.dropdown.updated();
+      this.markForRefresh();
     }
@@ -232,3 +251,3 @@ }
       this.dropdown.settings.multiple = multiple;
-      this.dropdown.updated();
+      this.markForRefresh();
     }
@@ -257,3 +276,3 @@ }
       this.dropdown.settings.noSearch = value;
-      this.dropdown.updated();
+      this.markForRefresh();
     }
@@ -327,11 +346,25 @@ }
 
-  constructor(private element: ElementRef, private model?: NgModel) {
-    if (this.model) {
-      this.model.valueChanges.subscribe(() => {
-        // @BUG event causes the dropdown to be closed (even when closeOnSelect = false),
-        // so as a workaround ignore changes if the dialog is open and close disabled.
-        if (this.dropdown && !this.dropdown.isOpen() && this.dropdown.settings.closeOnSelect) {
-          this.dropdown.updated();
-        }
-      });
+  /**
+   * Creates an instance of SohoDropDownComponent.
+   * @param {ElementRef} element the element this component encapsulates.
+   * @param {NgZone} ngZone the angualar zone for this component
+   * @param {NgControl} ngControl any associated form control (optional)
+   * @memberof SohoDropDownComponent
+   */
+  constructor(
+    private element: ElementRef,
+    private ngZone: NgZone,
+    @Self() @Optional() public ngControl: NgControl,
+    public ref: ChangeDetectorRef) {
+
+    // Is the control using a form control and/or ngModel?
+    if (this.ngControl) {
+      // Wrap the accessor to allow updates to be pushed,
+      // but also use the standard accessors provided by angular.
+      this.valueAccessor =
+        new SohoDropDownControlValueAccessorDelegator( // tslint:disable-line
+          this.ngControl.valueAccessor, this); // tslint:disable-line
+
+      // ... change the accessor on the control to use ours.
+      this.ngControl.valueAccessor = this.valueAccessor;
     }
@@ -341,22 +374,104 @@ }
   ngAfterViewInit() {
-    this.jQueryElement = jQuery(this.element.nativeElement);
-    this.jQueryElement.dropdown(this.options);
-    this.jQueryElement
-      .on('change', (event: JQuery.Event) => this.onChange(event))
-      .on('updated', (event: JQuery.Event) => this.updatedEvent.emit(event));
-    this.dropdown = this.jQueryElement.data('dropdown');
+    // call outside the angular zone so change detection
+    // isn't triggered by the soho component.
+    this.ngZone.runOutsideAngular(() => {
+      // assign element to local variable
+      this.jQueryElement = jQuery(this.element.nativeElement);
+
+      // initialise the dropdown control
+      this.jQueryElement.dropdown(this.options);
+
+      // extract the api
+      this.dropdown = this.jQueryElement.data('dropdown');
+
+      // @todo - add event binding control so we don't bind if not required.
+      this.jQueryElement
+        .on('change', (event: JQuery.Event) => this.onChanged(event))
+        .on('updated', (event: JQuery.Event) => this.onUpdated(event))
+        .on('requestend', (event: JQuery.Event, searchTerm: string, data: any[]) => this.onRequestEnd(event, searchTerm, data));
+
+      this.runUpdatedOnCheck = true;
+    });
   }
 
+  ngAfterViewChecked() {
+    if (this.runUpdatedOnCheck) {
+      this.ngZone.runOutsideAngular(() => {
+        // We need to update the control AFTER the model
+        // has been updated (assuming there is one), so
+        // execute updated after angular has generated
+        // the model and the view markup.
+        setTimeout(() => this.updated() );
+        this.runUpdatedOnCheck = false;
+      });
+    }
+  }
+
   ngOnDestroy() {
-    if (this.dropdown) {
+    this.ngZone.runOutsideAngular(() => {
+      if (this.jQueryElement) {
+        // remove the event listeners on this element.
+        this.jQueryElement.off();
+      }
+
+      // Destroy any widget resources.
       this.dropdown.destroy();
       this.dropdown = null;
-    }
+    });
   }
 
-  private onChange(event: any) {
-    this.change.emit(event);
+  /**
+   * Event handler for the 'requestend' event on the dropdown 'component'.
+   *
+   * @private
+   * @param {JQuery.Event} event the standard jQuery event.
+   * @param {*} data any data passed by the dropdown (todo the type)
+   * @memberof SohoDropDownComponent
+   */
+  private onRequestEnd(event: JQuery.Event, searchTerm: string, data: any[]) {
+    // When the request for data has completed, make sure we
+    // update the 'dropdown' control.
+    this.ngZone.run(() => {
+      this.ref.markForCheck();
+    });
+
   }
 
+  private onUpdated(event: JQuery.Event) {
+    // Fire the event, in the angular zone.
+    this.ngZone.run(() => this.updatedEvent.next(event) );
+  }
+
   /**
+   * Event handler for the 'changed' event on the 'dropdown' component.
+   *
+   * @private
+   * @param {*} event the standard jQuery event.
+   * @memberof SohoDropDownComponent
+   */
+  private onChanged(event: any) {
+    // This code does not work properly if run in the angular zone.
+    NgZone.assertNotInAngularZone();
+
+    // Retrieve the value from the 'dropdown' component.
+    const val = this.jQueryElement.val();
+
+    // This value needs to be converted into an options value, which is
+    // generated by the {SelectControlValueAccessor}.
+    const optionValue = this.valueAccessor.convertToOptionValue(val);
+
+    // Make sure calls to angular are made in the right zone.
+    this.ngZone.run(() => {
+      // ... update the model (which will fire change
+      // detection if required).
+      this.valueAccessor.onChangeFn(optionValue);
+
+      // @todo - this wants to be the real value, so we may need to look
+      // that up.
+      event.data = val;
+      this.change.emit(event);
+    });
+  }
+
+  /**
    * In case options are being bound asynchronously, you will need to trigger updated on
@@ -366,3 +481,6 @@ * soho dropdown control so it updates its value labels.
   public updated(): SohoDropDownComponent {
-    this.dropdown.updated();
+    if (this.dropdown) {
+      // Calling updated when an item is selected, looses the selection!
+      this.ngZone.runOutsideAngular( () => this.dropdown.updated() );
+    }
     return this;
@@ -380,6 +498,6 @@ }
       if (value) {
-        this.dropdown.disable();
+        this.ngZone.runOutsideAngular(() => this.dropdown.disable());
         this.isDisabled = true;
       } else {
-        this.dropdown.enable();
+        this.ngZone.runOutsideAngular(() => this.dropdown.enable());
         this.isDisabled = false;
@@ -397,6 +515,6 @@ this.isReadOnly = false;
       if (value) {
-        this.dropdown.readonly();
+        this.ngZone.runOutsideAngular(() => this.dropdown.readonly());
         this.isReadOnly = true;
       } else {
-        this.dropdown.enable();
+        this.ngZone.runOutsideAngular(() => this.dropdown.enable());
         this.isDisabled = false;
@@ -409,2 +527,4 @@ this.isReadOnly = false;
   /**
+   * @description
+   *
    * Soho-dropdown is not a native element - need this to set focus programmatically.
@@ -414,5 +534,135 @@ * 'name' attribute must be set on the control for this to work correctly.
   public setFocus(): void {
-    this.jQueryElement.trigger('activated');
+    if (this.jQueryElement) {
+      this.ngZone.runOutsideAngular(() => {
+        this.jQueryElement.trigger('activated');
+      });
+    }
   }
 
+  /**
+   * @description
+   *
+   * Sets the value of the dropdown.
+   *
+   * @todo this may need to involve mapping from actual value
+   * if ngModel is used.
+   *
+   * This is the model value that is to be set.
+   * @param value - the internal value to select
+   */
+  public selectValue(value: any): void {
+    if (this.dropdown) {
+      this.ngZone.runOutsideAngular(() => {
+        this.dropdown.selectValue(value);
+      });
+    }
+  }
+
+   /**
+   * Marks the components as requiring a rebuild after the next update.
+   *
+   */
+  markForRefresh() {
+    // Run updated on the next updated check.
+    this.runUpdatedOnCheck = true;
+
+    // ... make sure the change detector kicks in, otherwise if the inputs
+    // were change programmatially the component may not be eligible for
+    // updating.
+    this.ref.markForCheck();
+  }
 }
+
+/**
+ * Provides a 'wrapper' around the {ControlValueAccessor} added by
+ * angular when handling `select` elements.
+ *
+ * This class allows the {SohoDropDownComponent} to interoperate with
+ * the {ControlValueAccessor}.  Specifically, providing access to the
+ * onChange function, which we must call when the value of the dropdown
+ * is modified.
+ *
+ * It also exposes the encoding used storing complex objects as
+ * values in the 'option' elements.
+ *
+ * See https://github.com/angular/angular/blob/master/packages/forms/src/directives/select_multiple_control_value_accessor.ts.
+ *
+ * @class SohoDropDownControlValueAccessorDelegator
+ * @implements {ControlValueAccessor}
+ */
+class SohoDropDownControlValueAccessorDelegator implements ControlValueAccessor {
+  /**
+   * The Function to call when the value of the control changes.
+   */
+  public onChangeFn: Function;
+
+  /**
+   * Creates an instance of SohoDropDownControlValueAccessorDelegate.
+   *
+   * @param {ControlValueAccessor} delegate the value accessor
+   * @param {SohoDropDownComponent} dropdown the dropdown linked to the accessor
+   * @memberof SohoDropDownControlValueAccessorDelegate
+   */
+  constructor(
+    private delegate: ControlValueAccessor,
+    private dropdown: SohoDropDownComponent) { }
+
+  writeValue(value: any): void {
+    // Just pass it on.
+    this.delegate.writeValue(value);
+
+    // @todo reduce the number of calls to this!
+    this.dropdown.markForRefresh();
+  }
+
+  registerOnChange(fn: any): void {
+    // Keep a reference to the change function, then we an call it.
+    this.onChangeFn = fn;
+
+    // Give the delegate a chance to store this too.
+    this.delegate.registerOnChange(fn);
+  }
+
+  registerOnTouched(fn: any): void {
+    this.delegate.registerOnTouched(fn);
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    this.delegate.setDisabledState(isDisabled);
+  }
+
+  /**
+   * Convert the 'real' value into the corresponding
+   * option value.
+   *
+   * @private
+   * @param {*} value the value of the option; must not be null.
+   * @returns {string} the string optipnValue of the otion elemen.
+   * @memberof SohoDropDownControlValueAccessorDelegator
+   */
+  convertToOptionValue(value: any): string {
+    const delegate = (this.delegate as any);
+    const id = delegate._getOptionId(value);
+    return this.buildValueString(id, value);
+  }
+
+  /**
+   * Copy of the "valuestring" builder used by the Angular
+   * Select and MultiSelect
+   * @param id option id (ordinal)
+   * @param value the actual value
+   */
+  private buildValueString(id, value) {
+    if (id == null) {
+      return '' + value;
+    }
+    if (typeof value === 'string') {
+      value = '\'' + value + '\'';
+    }
+
+    if (value && typeof value === 'object') {
+      value = 'Object';
+    }
+    return (id + ': ' + value).slice(0, 50);
+  }
+}

soho/dropdown/soho-dropdown.d.ts

@@ -118,3 +118,4 @@ /**
 type SohoDropDownResponseFunction = (
-  data: any[]
+  data: any[],
+  isManagedByTemplate?: boolean
 ) => void;
@@ -166,2 +167,7 @@
   destroy(): void;
+
+  /**
+   * Set the selected option on the dropdown.
+   */
+  selectValue(value: any): void;
 }
@@ -168,0 +174,0 @@

soho/dropdown/soho-dropdown.module.ts

@@ -1,4 +0,1 @@
-/**
- * Created by ppatton on 8/30/2016.
- */
 import { NgModule } from '@angular/core';
@@ -5,0 +2,0 @@ import { CommonModule } from '@angular/common';

soho/expandablearea/soho-expandablearea.component.ts

@@ -18,3 +18,3 @@ import {
 
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
@@ -21,0 +21,0 @@ /**

soho/fileupload/soho-fileupload.spec.ts

@@ -76,13 +76,19 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
   it('@Input() disabled', () => {
+    fixture.detectChanges();
     fileupload.disabled = true;
+    fixture.detectChanges();
     expect(el.hasAttribute('disabled')).toBeTruthy();
     fileupload.disabled = false;
+    fixture.detectChanges();
   });
 
   it('@Input() readonly', () => {
+    fixture.detectChanges();
     fileupload.readonly = true;
+    fixture.detectChanges();
     // sohoxi control sets 'readonly' on textInput and 'disabled' on fileInput
     expect(el.hasAttribute('disabled')).toBeTruthy();
     fileupload.readonly = false;
+    fixture.detectChanges();
   });
 });

soho/icon/index.ts

 export * from './soho-icon.component';
 export * from './soho-icons.component';
 export * from './soho-icons-extended.component';
+export * from './soho-icons-empty.component';
 export * from './soho-icon.module';

soho/icon/soho-icons-empty.component.ts

@@ -9,3 +9,3 @@
   selector: 'soho-icons-empty',
-  templateUrl: '../../../sohoxi/dist/svg/svg-empty.html',
+  templateUrl: '../../../ids-enterprise/dist/svg/svg-empty.html',
 })
@@ -12,0 +12,0 @@ export class SohoIconsEmptyComponent {

soho/icon/soho-icons-extended.component.ts

@@ -9,3 +9,3 @@
   selector: 'soho-icons-ext',
-  templateUrl: '../../../sohoxi/dist/svg/svg-extended.html',
+  templateUrl: '../../../ids-enterprise/dist/svg/svg-extended.html',
 })
@@ -12,0 +12,0 @@ export class SohoIconsExtendedComponent {

soho/icon/soho-icons.component.ts

@@ -9,3 +9,3 @@
   selector: 'soho-icons',
-  templateUrl: '../../../sohoxi/dist/svg/svg.html',
+  templateUrl: '../../../ids-enterprise/dist/svg/svg.html',
 })
@@ -12,0 +12,0 @@ export class SohoIconsComponent {

soho/input-validate/soho-input-validate.d.ts

@@ -17,2 +17,8 @@ /**
 
+  /** Remove the message from the field if there is one and mark the field valid */
+  removeMessage(field, type): void;
+
+  /** Trigger validation of the field */
+  validate(field, showTooltip, event): void;
+  
   destroy(): void;
@@ -19,0 +25,0 @@ }

soho/input-validate/soho-input-validate.directive.ts

@@ -1,2 +0,2 @@
-import { HostBinding, Directive, ElementRef, EventEmitter, Input, Output } from '@angular/core';
+import { AfterViewInit, Attribute, Directive, ElementRef, EventEmitter, HostBinding, Input, Output } from '@angular/core';
 
@@ -12,3 +12,3 @@ /**
 })
-export class SohoInputValidateDirective {
+export class SohoInputValidateDirective implements AfterViewInit {
 
@@ -30,3 +30,4 @@ /**
 
-  constructor(private el: ElementRef) {
+  constructor(private el: ElementRef, @Attribute('data-validate') dataValidateAttr) {   // tslint:disable-line
+    this.dataValidate = dataValidateAttr;
   }
@@ -43,2 +44,4 @@
 
+    this.validator = this.jQueryElement.data('validate');
+
     /**
@@ -84,2 +87,16 @@ * Bind to jQueryElement's events
   }
+
+  /**
+   * Remove the message from the field if there is one and mark the field valid
+   */
+  public removeMessage(type) {
+    this.validator.removeMessage(this.jQueryElement, type);
+  }
+
+  /**
+   * Trigger validation of the field
+   */
+  public validate(event) {
+    this.validator.validate(this.jQueryElement, false, event);
+  }
 }

soho/lookup/soho-lookup.component.ts

@@ -8,2 +8,3 @@ import {
   HostBinding,
+  HostListener,
   Input,
@@ -116,2 +117,8 @@ OnDestroy,
 
+  @HostListener('keyup', ['$event'])
+  onKeyUp(event: KeyboardEvent, val) {
+    // This is required, otherwise the the form binding does not see updates.
+    this.internalValue = this.jQueryElement.val() as string;
+  }
+
   ngAfterViewInit() {
@@ -118,0 +125,0 @@ this.jQueryElement = jQuery(this.element.nativeElement);

soho/mask/soho-mask.spec.ts

@@ -18,3 +18,3 @@ import {
 import { SohoMaskModule } from './soho-mask.module';
-import { SohoInputModule } from 'soho/input';
+import { SohoInputModule } from '../input';
 
@@ -21,0 +21,0 @@ @Component({

soho/message/soho-message.ref.ts

@@ -1,2 +0,2 @@
-import { Subject } from 'rxjs/Subject';
+import { Subject } from 'rxjs';
 
@@ -3,0 +3,0 @@ import { SohoModalDialogVetoableEventGuard } from '../modal-dialog/soho-modal-dialog.ref';

soho/modal-dialog/soho-modal-dialog.ref.ts

 import { ComponentRef } from '@angular/core';
-import { Subject } from 'rxjs/Subject';
+import { Subject } from 'rxjs';
 
@@ -4,0 +4,0 @@ /**

soho/rating/soho-rating.component.ts

@@ -41,2 +41,3 @@ import {
       this.rating.destroy();
+      this.jQueryElement.off();
       this.rating = null;
@@ -43,0 +44,0 @@ }

soho/soho-components.d.ts

@@ -63,2 +63,3 @@ /**
 /// <reference path="./tabs/soho-tabs.d.ts" />
+/// <reference path="./tag/soho-tag.d.ts" />
 /// <reference path="./textarea/soho-textarea.d.ts" />
@@ -65,0 +66,0 @@ /// <reference path="./timepicker/soho-timepicker.d.ts" />

soho/soho-components.module.ts

@@ -61,2 +61,3 @@ import { NgModule } from '@angular/core';
 import { SohoTabsModule } from './tabs/soho-tabs.module';
+import { SohoTagModule } from './tag/soho-tag.module';
 import { SohoTextAreaModule } from './textarea/soho-textarea.module';
@@ -133,2 +134,3 @@ import { SohoTimePickerModule } from './timepicker/soho-timepicker.module';
     SohoTabsModule,
+    SohoTagModule,
     SohoTextAreaModule,
@@ -144,4 +146,3 @@ SohoTimePickerModule,
   ],
-  declarations: [
-  ],
+  declarations: [],
   exports: [
@@ -206,2 +207,3 @@ SohoAboutModule,
     SohoTabsModule,
+    SohoTagModule,
     SohoTextAreaModule,
@@ -208,0 +210,0 @@ SohoTimePickerModule,

soho/stepprocess/soho-stepprocess.component.ts

@@ -5,6 +5,7 @@ import {
   ElementRef,
+  EventEmitter,
   HostBinding,
   Input,
-  OnDestroy, Output, EventEmitter,
-} from '@angular/core';
+  OnDestroy,
+  Output } from '@angular/core';
 
@@ -165,2 +166,8 @@ /**************************************************************
 
+  @Input() set nextButtonLabel(label: string) {
+    if (this.jQueryElement) {
+      this.jQueryElement.find('.js-step-link-next').html(label);
+    }
+  }
+
   @Input() set nextButtonEnable(enabled: boolean) {
@@ -178,2 +185,8 @@ if (this.jQueryElement) {
 
+  @Input() set saveCloseButtonEnable(enabled: boolean) {
+    if (this.jQueryElement) {
+      this.jQueryElement.find('.js-btn-save-changes').prop('disabled', !enabled);
+    }
+  }
+
   // ------------------------------------------------------------------------
@@ -184,2 +197,3 @@ // @Outputs
   @Output() beforeSelectStep = new EventEmitter<BeforeSelectStepEvent>();
+  @Output() onSaveClose: EventEmitter<SohoStepSaveCloseEvent> = new EventEmitter<SohoStepSaveCloseEvent>();
 
@@ -209,2 +223,4 @@ // ------------------------------------------------------------------------
     this.stepprocess = this.jQueryElement.data('stepprocess');
+    this.jQueryElement.find('.js-btn-save-changes').
+    on('click', (e: JQuery.Event) => { this.fireOnSaveClose(); });
   }
@@ -234,3 +250,8 @@
 
-      beforeSelectStepEvent.targetStepId = $(args.stepLink).attr('href').substring(1);
+      if (args.stepLink) {
+        beforeSelectStepEvent.targetStepId = $(args.stepLink).attr('href').substring(1);
+      } else {
+        beforeSelectStepEvent.targetStepId = beforeSelectStepEvent.currentStepId;
+      }
+
       beforeSelectStepEvent.isStepping = args.isStepping;
@@ -254,2 +275,9 @@ beforeSelectStepEvent.response = this.beforeSelectStepResponse;
 
+  private fireOnSaveClose(): void {
+    const $selectedStep = this.stepprocess.getSelectedStep();
+    const currentStepId = $selectedStep.children('a').attr('href').substring(1);
+    const event: SohoStepSaveCloseEvent = {currentStepId: currentStepId};
+    this.onSaveClose.emit(event);
+  }
+
   ngOnDestroy() {
@@ -256,0 +284,0 @@ if (this.stepprocess) {

soho/stepprocess/soho-stepprocess.d.ts

@@ -76,2 +76,6 @@ /**
 
+interface SohoStepSaveCloseEvent {
+  currentStepId?: string;
+}
+
 type StepDirection = 'prev' | 'next' | 'none';
@@ -78,0 +82,0 @@

soho/swaplist/soho-swaplist.service.ts

@@ -1,2 +0,2 @@
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
@@ -3,0 +3,0 @@ /**

soho/swaplist/soho-swaplist.spec.ts

@@ -17,6 +17,6 @@ import {
 
-import { Observable } from 'rxjs/Observable';
-import { of } from 'rxjs/observable/of';
+import { Observable, of } from 'rxjs';
 
 import { FormsModule } from '@angular/forms';
+
 import { SohoSwapListModule } from './soho-swaplist.module';
@@ -38,3 +38,3 @@ import { SohoSwapListComponent } from './soho-swaplist.component';
     // console.log(this.options.available);
-    return Observable.of(this.options);
+    return of(this.options);
   }
@@ -309,3 +309,3 @@
     spy = spyOn(service, 'getData')
-      .and.returnValue(Observable.of(options));
+      .and.returnValue(of(options));
 
@@ -312,0 +312,0 @@ com = component.swaplist;

soho/timepicker/soho-timepicker.spec.ts

@@ -5,5 +5,7 @@ import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 
-import { SohoTimePickerModule, SohoTimePickerComponent } from 'soho/timepicker';
+import { SohoTimePickerModule, SohoTimePickerComponent } from '../timepicker';
 import { By } from '@angular/platform-browser';
 
+import { map } from 'rxjs/operators';
+
 @Component({
@@ -51,5 +53,5 @@ template: `
 
-    comp.changed.map((x: SohoTimePickerEvent) => x.data).subscribe((x) => {
-      expect(x).toBe(time, 'Incorrect value passed to event');
-    });
+    // comp.changed.map((x: SohoTimePickerEvent) => x.data).subscribe((x) => {
+    //   expect(x).toBe(time, 'Incorrect value passed to event');
+    // });
 
@@ -56,0 +58,0 @@ // Emulate setting the time field.

soho/tree/soho-tree.service.ts

@@ -1,2 +0,2 @@
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 
@@ -3,0 +3,0 @@ /**

soho/treemap/soho-treemap.component.ts

@@ -27,3 +27,3 @@ import {
   /** Defines the data to use, must be specified for this component. */
-  @Input() set dataset(dataset: Array<any>) {
+  @Input() set dataset(dataset: Object) {
     this.options.dataset = dataset;
@@ -30,0 +30,0 @@

soho/treemap/soho-treemap.d.ts

@@ -16,3 +16,3 @@ /**
   /** Defines the data to use, must be specified for this component. */
-  dataset?: Object[];
+  dataset?: Object;
 
@@ -19,0 +19,0 @@ /** If false, the component will not resize when resizing the page. */

soho/treemap/soho-treemap.spec.ts

@@ -40,3 +40,3 @@ import {} from 'jasmine';
   public data = [{
-    data: [{
+    data: {
       'name': 'Storage Utilization (78 GB)',
@@ -84,3 +84,3 @@ 'children': [
       }]
-    }]
+    }
   }];
@@ -108,2 +108,3 @@ }
     el = de.query(By.css('[soho-treemap]')).nativeElement;
+    fixture.detectChanges();
 
@@ -110,0 +111,0 @@ });

soho/utils/base-control-value-accessor.ts

@@ -11,2 +11,4 @@ import {
 
+export const NOOP: any = () => {};
+
 /**
@@ -21,6 +23,6 @@ * Base class for new components that need to support NgForms.
   /** ControlValueAccessor method called when the attached control has changed, */
-  private _onChangeCallback: (_: T) => void = () => {};
+  protected _onChangeCallback: (_: T) => void = NOOP;
 
   /** ControlValueAccessor method called when the attached control has touched. */
-  private _onTouchedCallback: () => void = () => {};
+  private _onTouchedCallback: () => void = NOOP;
 
@@ -57,4 +59,3 @@ /** Gets the value for the control. */
   writeValue(value: T) {
-      this._value = value;
-      this._onChangeCallback(value);
+    this._value = value;
   }
@@ -66,3 +67,5 @@
   registerOnChange(fn: (_: T) => void): void {
-    this._onChangeCallback = fn;
+    this._onChangeCallback = () => {
+      fn(this.internalValue);
+    };
   }
@@ -69,0 +72,0 @@

Fixed alerts

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

855865

increased by2.75%

Number of package files

371

increased by0.82%

Lines of code

24696

increased by2.69%

Number of medium maintenance alerts

0

decreased by-100%

Number of lines in readme file

212

increased by0.47%

Dependency changes

• + Addedids-enterprise@4.103.2(transitive)

• - Removedids-enterprise@4.103.1(transitive)

• Updatedids-enterprise@^4.7.0-beta