feat(command): add option handleDisabled

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);
+		}
+	}
+
 }
 

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");

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