Merge pull request #45 from sketch7/release/1.6

release 1.6 - merge from master

Author: stephenlautier

CHANGELOG.md

@@ -1,4 +1,4 @@
-## [vNext](https://github.com/sketch7/ngx.ux/compare/1.5.2...2.0.0) (2020-x-x)
+## [vNext](https://github.com/sketch7/ngx.ux/compare/1.6.0...2.0.0) (2020-x-x)
 
 ### Features
 
@@ -12,6 +12,12 @@
     This was added due to a limitation (which previously was handled via hack and is not supported anymore). [See this issue](https://github.com/angular/angular/issues/8277).
 - **module:** rename module to `SsvCommandModule` from `CommandModule`
 
+## [1.6.0](https://github.com/sketch7/ngx.ux/compare/1.5.2...1.6.0) (2020-11-04)
+
+### Features
+
+- **command:** add option `handleDisabled` which won't update `disabled` attribute and manually have to manage it (as sometimes it doesn't play well with components/directives or pipes)
+
 ## [1.5.2](https://github.com/sketch7/ngx.ux/compare/1.5.1...1.5.2) (2020-10-30)
 
 ### Bug Fixes

examples/projects/example-app/src/app/command/example-command.component.html

@@ -105,10 +105,27 @@ <h1>Command</h1>
         Save
         <small>with [options]</small>
       </button>
+      <button mat-raised-button
+        color="primary"
+        [disabled]="!saveCmd.canExecute"
+        [ssvCommand]="saveCmd"
+        [ssvCommandOptions]="{handleDisabled: false}">
+        Save
+        <small>with [handleDisabled]</small>
+      </button>
+
+      <button mat-raised-button
+        color="primary"
+        [disabled]="!saveCmd.canExecute"
+        [ssvCommand]="saveCmd"
+        [ssvCommandOptions]="{handleDisabled: false}">
+        Save
+        <small>with [handleDisabled]</small>
+      </button>
     </mat-card-actions>
   </mat-card>
 
-  <mat-card>
+  <mat-card *ngIf="true">
     <mat-card-title>Using Command Redux</mat-card-title>
     <mat-card-content>
       <div class="btn-group"

examples/projects/example-app/tsconfig.app.json

@@ -1,3 +1,4 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssv/ngx.command",
-  "version": "1.5.2",
+  "version": "1.6.0",
   "versionSuffix": "",
   "description": "Command pattern implementation for angular. Command used to encapsulate information which is needed to perform an action.",
   "keywords": [

package.json

@@ -3,7 +3,6 @@ import {
 	OnInit,
 	OnDestroy,
 	Input,
-	HostBinding,
 	HostListener,
 	ElementRef,
 	Inject,
@@ -61,21 +60,25 @@ import { CommandCreator, ICommand } from "./command.model";
  * ```
  *
  */
+
+const SELECTOR = "ssvCommand";
+
 @Directive({
-	selector: "[ssvCommand], [command]", // todo: @deprecated - remove `[command]` after next major
+	selector: `[${SELECTOR}], [command]`, // todo: @deprecated - remove `[command]` after next major
 	exportAs: "ssvCommand"
 })
 export class CommandDirective implements OnInit, OnDestroy {
 
-	@Input("ssvCommand") commandOrCreator: ICommand | CommandCreator | undefined;
+	@Input(SELECTOR) commandOrCreator: ICommand | CommandCreator | undefined;
 
 	/** @deprecated Use `commandInput` instead. */
 	@Input("command")
 	get _commandOrCreator(): ICommand | CommandCreator | undefined { return this.commandOrCreator; }
 	set _commandOrCreator(value: ICommand | CommandCreator | undefined) {
 		this.commandOrCreator = value;
 	}
-	@Input("ssvCommandOptions")
+
+	@Input(`${SELECTOR}Options`)
 	get commandOptions(): CommandOptions { return this._commandOptions; }
 	set commandOptions(value: CommandOptions) {
 		if (value === this._commandOptions) {
@@ -94,14 +97,13 @@ export class CommandDirective implements OnInit, OnDestroy {
 		this.commandOptions = value;
 	}
 
-	@Input("ssvCommandParams") commandParams: unknown | unknown[];
+	@Input(`${SELECTOR}Params`) commandParams: unknown | unknown[];
 	/** @deprecated Use `commandParams` instead. */
 	@Input("commandParams")
 	get _commandParams(): unknown | unknown[] { return this.commandParams; }
 	set _commandParams(value: unknown | unknown[]) {
 		this.commandParams = value;
 	}
-	@HostBinding("disabled") isDisabled: boolean | undefined;
 
 	get command(): ICommand { return this._command; }
 	private _command!: ICommand;
@@ -118,7 +120,7 @@ export class CommandDirective implements OnInit, OnDestroy {
 
 	ngOnInit(): void {
 		// console.log("[ssvCommand::init]", this.config);
-		this.isDisabled = true;
+		this.trySetDisabled(true);
 		if (!this.commandOrCreator) {
 			throw new Error("ssvCommand: [ssvCommand] should be defined!");
 		} else if (isCommand(this.commandOrCreator)) {
@@ -148,8 +150,8 @@ export class CommandDirective implements OnInit, OnDestroy {
 		this._command.canExecute$.pipe(
 			delay(1),
 			tap(x => {
-				this.isDisabled = !x;
-				// console.log("[ssvCommand::canExecute$] x2", x, this.isDisabled);
+				this.trySetDisabled(!x);
+				// console.log("[ssvCommand::canExecute$]", { canExecute: x });
 				this.cdr.markForCheck();
 			}),
 			takeUntil(this._destroy$),
@@ -195,5 +197,11 @@ export class CommandDirective implements OnInit, OnDestroy {
 		}
 	}
 
+	private trySetDisabled(disabled: boolean) {
+		if (this.commandOptions.handleDisabled) {
+			this.renderer.setProperty(this.element.nativeElement, "disabled", disabled);
+		}
+	}
+
 }
 

src/command.directive.ts

@@ -5,10 +5,17 @@ export interface CommandOptions {
 	 * Css Class which gets added/removed on the Command element's host while Command `isExecuting$`.
 	 */
 	executingCssClass: string;
+
+	/** Determines whether the disabled will be handled by the directive or not.
+	 * Disable handled by directive's doesn't always play nice when used with other component/pipe/directive and they also handle disabled.
+	 * This disables the handling manually and need to pass explicitly `[disabled]="!saveCmd.canExecute"`.
+	 */
+	handleDisabled: boolean;
 }
 
 export const COMMAND_DEFAULT_CONFIG: Readonly<CommandOptions> = Object.freeze({
 	executingCssClass: "executing",
+	handleDisabled: true,
 });
 
 export const COMMAND_CONFIG = new InjectionToken<CommandOptions>("command-config");

src/config.ts

@@ -14,7 +14,7 @@ export const _MODULE_CONFIG = new InjectionToken<CommandOptions>("_command-confi
 })
 export class CommandModule { // todo: rename to SsvCommandModule
 
-	static forRoot(config?: CommandOptions | (() => CommandOptions)): ModuleWithProviders<CommandModule> {
+	static forRoot(config?: Partial<CommandOptions> | (() => Partial<CommandOptions>)): ModuleWithProviders<CommandModule> {
 		return {
 			ngModule: CommandModule,
 			providers: [