feat(command): add option handleDisabled

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

@@ -104,6 +104,13 @@ <h1>Command</h1>
  </mat-icon>
  Save
  <small>with [options]</small>
+ <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>

src/command.directive.ts

@@ -3,7 +3,6 @@ import {
  OnInit,
  OnDestroy,
  Input,
- HostBinding,
  HostListener,
  ElementRef,
  Inject,
@@ -60,15 +59,18 @@ import { CommandCreator, ICommand } from "./command.model";
  * ```
  *
  */
+
+const SELECTOR = "ssvCommand";
+
 @Directive({
- selector: "[ssvCommand]",
+ selector: `[${SELECTOR}]`,
  exportAs: "ssvCommand"
 })
 export class CommandDirective implements OnInit, OnDestroy {
 
- @Input("ssvCommand") commandOrCreator: ICommand | CommandCreator | undefined;
+ @Input(SELECTOR) commandOrCreator: ICommand | CommandCreator | undefined;
 
- @Input("ssvCommandOptions")
+ @Input(`${SELECTOR}Options`)
  get commandOptions(): CommandOptions { return this._commandOptions; }
  set commandOptions(value: CommandOptions) {
  if (value === this._commandOptions) {
@@ -80,9 +82,7 @@ export class CommandDirective implements OnInit, OnDestroy {
  };
  }
 
- @Input("ssvCommandParams") commandParams: unknown | unknown[];
-
- @HostBinding("disabled") isDisabled: boolean | undefined;
+ @Input(`${SELECTOR}Params`) commandParams: unknown | unknown[];
 
  get command(): ICommand { return this._command; }
  private _command!: ICommand;
@@ -98,7 +98,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)) {
@@ -129,8 +129,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$),
@@ -176,5 +176,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 SsvCommandModule {
 
- static forRoot(config?: CommandOptions | (() => CommandOptions)): ModuleWithProviders<SsvCommandModule> {
+ static forRoot(config?: Partial<CommandOptions> | (() => Partial<CommandOptions>)): ModuleWithProviders<SsvCommandModule> {
  return {
  ngModule: SsvCommandModule,
  providers: [