feat(esl-trigger): no-target attribute support out of the box, no console warning (default 'disabled' styles)

Author: ala-n

packages/esl/src/esl-trigger/core/esl-base-trigger.ts

@@ -134,7 +134,8 @@ export abstract class ESLBaseTrigger extends ESLBaseElement {
   public updateState(): boolean {
     const {active, isTargetActive} = this;
 
-    this.toggleAttribute('active', isTargetActive);
+    this.$$attr('no-target', !this.$target);
+    this.$$attr('active', isTargetActive);
     const clsTarget = ESLTraversingQuery.first(this.activeClassTarget, this) as HTMLElement;
     clsTarget && CSSClassUtils.toggle(clsTarget, this.activeClass, isTargetActive);
 
@@ -159,7 +160,8 @@ export abstract class ESLBaseTrigger extends ESLBaseElement {
   /** Handles ESLToggleable state change */
   @listen({
     event: (that: ESLBaseTrigger) => that.OBSERVED_EVENTS,
-    target: (that: ESLBaseTrigger) => that.$target
+    target: (that: ESLBaseTrigger) => that.$target,
+    condition: (that: ESLBaseTrigger) => !!that.$target
   })
   protected _onTargetStateChange(originalEvent?: Event): void {
     if (!this.updateState()) return;

packages/esl/src/esl-trigger/core/esl-trigger.less

@@ -1,3 +1,9 @@
 esl-trigger {
   cursor: pointer;
+  // Default behaviour if no target is specified
+  &[no-target] {
+    filter: grayscale(100%);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
 }

packages/esl/src/esl-trigger/core/esl-trigger.ts

@@ -62,12 +62,8 @@ export class ESLTrigger extends ESLBaseTrigger {
   /** Update `$target` Toggleable  from `target` selector */
   public updateTargetFromSelector(): void {
     if (!this.target) return;
-    this.$target = ESLTraversingQuery.first(this.target, this) as ESLToggleable;
-
-    if (this.$target instanceof ESLToggleablePlaceholder && this.$target.$origin) {
-      // change target if it is an instance of the placeholder element
-      this.$target = this.$target.$origin;
-    }
+    const $target = ESLTraversingQuery.first(this.target, this) as ESLToggleable | ESLToggleablePlaceholder;
+    this.$target = ($target instanceof ESLToggleablePlaceholder) ? $target.$origin : $target;
   }
 
   /** Check if the event target should be ignored */