@coolon/angular-ui-powerups 3.3.1 → 3.3.3

package/fesm2015/coolon-angular-ui-powerups.js

@@ -1,5 +1,5 @@
 import { DOCUMENT, CommonModule, Location } from '@angular/common';
-import { Directive, ElementRef, Inject, Input, HostListener, NgZone, ɵɵdefineInjectable, ɵɵinject, Injectable, NgModule, Component, ContentChild, EventEmitter, Optional, SkipSelf, ViewChild, Output, ViewChildren, HostBinding, ViewEncapsulation, Self, TemplateRef, ChangeDetectorRef, ContentChildren, ViewContainerRef, InjectionToken, Injector, ComponentFactoryResolver } from '@angular/core';
+import { Directive, ElementRef, Inject, Host, Optional, Input, HostListener, NgZone, ɵɵdefineInjectable, ɵɵinject, Injectable, NgModule, Component, ContentChild, EventEmitter, SkipSelf, ViewChild, Output, ViewChildren, HostBinding, ViewEncapsulation, Self, TemplateRef, ChangeDetectorRef, ContentChildren, ViewContainerRef, InjectionToken, Injector, ComponentFactoryResolver } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
@@ -9,11 +9,11 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ComponentPortal, TemplatePortal, PortalModule } from '@angular/cdk/portal';
 import { CdkScrollableModule } from '@angular/cdk/scrolling';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatButtonModule } from '@angular/material/button';
+import { MatButton, MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
-import { MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
+import { MatMenuItem, MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
 import { MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
@@ -38,11 +38,14 @@ import { style, query, group, animate, trigger, transition } from '@angular/anim
 import { Observable } from 'rxjs';
 
 class CommandDirective extends GarbageCollector {
-    constructor(elementRef) {
+    constructor(elementRef, matButton, matMenuItem) {
         super();
         this.elementRef = elementRef;
         this._commandEnabled = new DelegatingValueModel().withDefault(false);
         this._commandParameterProvided = false;
+        // Material buttons and menu items don't respond to the disabled binding so we
+        // need to inject them from our host element and handle them manually.
+        this.matControl = matButton || matMenuItem;
     }
     set pectinCommand(command) {
         this._command = command;
@@ -72,23 +75,35 @@ class CommandDirective extends GarbageCollector {
         }
     }
     ngAfterViewInit() {
-        // for some reason mat-buttons kills the disabled host binding.  It works on a regular button but for now
-        // we need to do this.
         const { when } = Dsl.disposeWith(this);
-        when.valueOf(this._commandEnabled).changes(enabled => {
-            if (enabled) {
-                this.elementRef.nativeElement.removeAttribute('disabled');
-                if (this.elementRef.nativeElement.tagName === 'A') {
-                    this.elementRef.nativeElement.setAttribute('href', 'javascript:void');
-                }
+        when(this._commandEnabled).changes(enabled => this.updateEnabledState(enabled), {
+            initialValue: 'triggerChange'
+        });
+    }
+    updateEnabledState(enabled) {
+        // for some reason mat-buttons kills the disabled host binding.  It works on a regular button but for now
+        // we need to do this. The set timeout is required to prevent the button getting a expression changed
+        // when it's clicked.
+        if (this.matControl) {
+            setTimeout(() => {
+                this.matControl.disabled = !enabled;
+            }, 0);
+        }
+        if (!enabled) {
+            // Note:
+            // We can't use a host binding here for disabled as the directive can be used on arbitrary
+            // components (e.g. divs) and the compiler will barf if we use the host binding.
+            this.elementRef.nativeElement.setAttribute('disabled', 'disabled');
+            if (this.elementRef.nativeElement.tagName === 'A') {
+                this.elementRef.nativeElement.removeAttribute('href');
             }
-            else {
-                this.elementRef.nativeElement.setAttribute('disabled', 'disabled');
-                if (this.elementRef.nativeElement.tagName === 'A') {
-                    this.elementRef.nativeElement.removeAttribute('href');
-                }
+        }
+        else {
+            this.elementRef.nativeElement.removeAttribute('disabled');
+            if (this.elementRef.nativeElement.tagName === 'A') {
+                this.elementRef.nativeElement.setAttribute('href', 'javascript:void');
             }
-        }, { initialValue: 'triggerChange' });
+        }
     }
     ngOnDestroy() {
         this.dispose();
@@ -116,7 +131,9 @@ CommandDirective.decorators = [
             },] }
 ];
 CommandDirective.ctorParameters = () => [
-    { type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] }
+    { type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] },
+    { type: MatButton, decorators: [{ type: Host }, { type: Optional }] },
+    { type: MatMenuItem, decorators: [{ type: Host }, { type: Optional }] }
 ];
 CommandDirective.propDecorators = {
     pectinCommand: [{ type: Input }],
@@ -144,7 +161,7 @@ class FocusBinding extends GarbageCollector {
         this.document = document;
         // TODO: Make this also track the current enabled/disabled state.
         const { when } = Dsl.disposeWith(this);
-        when.valueOf(this.focusContext.focused).changes((focused) => {
+        when(this.focusContext.focused).changes((focused) => {
             if (focused && !this.alreadyHasFocus()) {
                 this.tryAndFocus();
             }
@@ -1834,7 +1851,7 @@ class SwitchCaseComponent extends DisposableComponent {
         const subscription = this.switchCaseOptions.changes.subscribe(change => this.updateSelection());
         this.onDispose(() => subscription.unsubscribe());
         const { chain, when } = Dsl.disposeWith(this);
-        when.valueOf(this.switchModel).changes(() => this.updateSelection(), { initialValue: 'triggerChange' });
+        when(this.switchModel).changes(() => this.updateSelection(), { initialValue: 'triggerChange' });
         this.cdr.detectChanges();
     }
     updateSelection() {
@@ -2608,7 +2625,7 @@ let TableModel = TableModel_1 = class TableModel {
         else {
             const editSession = new EditSession(rowId, row, this._createForm(row), this.saveCommand);
             const { when } = Dsl.disposeWith(editSession);
-            when.valueOf(editSession.liveRowValue).changes((editedValue) => {
+            when(editSession.liveRowValue).changes((editedValue) => {
                 this._rowsBeingEdited.replaceOrPush(editedValue);
             }, { initialValue: 'triggerChangeUnlessNil' });
             this._editorSessions.push(editSession);
@@ -2891,12 +2908,12 @@ TableRowMenuComponent.decorators = [
                 template: `
       <aup-tool-bar>
           <aup-command *ngFor="let action of actions" [command]="action.factory.create(value)"
-                       [face]="action.faceModel"></aup-command>
+                       [face]="action.face"></aup-command>
       </aup-tool-bar>
       <ng-container *ngIf="moreActions.length > 0">
           <aup-more-menu>
               <aup-command *ngFor="let action of moreActions" [command]="action.factory.create(value)"
-                           [face]="action.faceModel"></aup-command>
+                           [face]="action.face"></aup-command>
           </aup-more-menu>
       </ng-container>
   `,
@@ -3924,7 +3941,7 @@ class PopupInteractionContextComponent extends DisposableComponent {
         const componentRef = overlayRef.attach(this.outputPortal);
         this.interactionContext = componentRef.instance;
         return new Promise((resolve, reject) => {
-            // HACK: afterViewInit won't have been called yet.  Need to add when.valueOf(interactionContext.ready).becomesTruthy(...)
+            // HACK: afterViewInit won't have been called yet.  Need to add when(interactionContext.ready).becomesTruthy(...)
             setTimeout(() => {
                 this.interactionContext.startActivity(activityType, data)
                     .then(resolve)
@@ -4520,7 +4537,7 @@ class PlaceComponent extends DisposableComponent {
         this.visitModel.value = visit;
         DebugContext.getOrCreate(this.visitModel).tag(`${this.placeDefinition.component.name}.visitModel`);
         this.placeDefinition.getVisitParameterDefs().forEach(parameterDef => this.installBinding(parameterDef));
-        when.valueOf(this.visitModel).changes((current, previous) => {
+        when(this.visitModel).changes((current, previous) => {
             notifyVisitChanged(current, previous);
         }, { unless: this._inVisitUpdate });
     }
@@ -6162,7 +6179,7 @@ class PlaceOutletComponent extends DisposableComponent {
             this.onAnimationFinishedJob = finishPlaceLoad;
         }
         const { when, chain, valueOf } = Dsl.disposeWith(activePlace);
-        when.valueOf(this.routerVisitModel)
+        when(this.routerVisitModel)
             .changes(visit => {
             activePlace.updateVisit(visit);
         }, {
@@ -6247,7 +6264,7 @@ class AbstractPlaceNavigationComponent extends DisposableComponent {
         this.commandFactory = Command.createFactory((placeDefinition) => {
             this.placeOutlet.navigate(new Visit(placeDefinition));
         });
-        when.valueOf(this.placeOutletModel).changes(outlet => {
+        when(this.placeOutletModel).changes(outlet => {
             // NOTE: this updates during a change cycle and causes our isActiveMethod to return 2 different
             // values in the one change detection cycle. So instead we delay the update to a different
             // tick.