Merge pull request #45 from sketch7/release/1.6

release 1.6 - merge from master

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.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": [

src/command.directive.ts

@@ -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/config.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/module.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: [