feat(esl-toggleable): add id auto-creation feature for toggleable ins…

…tances
exadel-inc · Dec 29, 2021 · eaf02dc · eaf02dc
1 parent 5faeb1a
commit eaf02dc
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 0 deletions.
diff --git a/src/modules/esl-toggleable/README.md b/src/modules/esl-toggleable/README.md
@@ -21,6 +21,7 @@ Use `ESLToggleableDispatcher.init()` to initialize (and bind) ESLToggleableDispa
  - `body-class` - CSS class to add on the body element
  - `active-class` - CSS class to add when the Toggleable is active
  - `group` (`groupName`) - Toggleable group meta information to organize groups
+ - `no-auto-id` - Not to allow auto id
  - `close-on` (`closeTrigger`) - Selector to mark inner close triggers
  - `close-on-esc` - Close the Toggleable on ESC keyboard event
  - `close-on-outside-action` - Close the Toggleable on a click/tap outside

diff --git a/src/modules/esl-toggleable/core/esl-toggleable.shape.ts b/src/modules/esl-toggleable/core/esl-toggleable.shape.ts
@@ -17,6 +17,8 @@ export interface ESLToggleableTagShape<T extends ESLToggleable = ESLToggleable>
   /** Define Toggleable group meta information to organize groups */
   'group'?: string;
 
+  /** Disable auto id */
+  'no-auto-id'?: boolean;
   /** Define selector to mark inner close triggers */
   'close-on'?: string;
   /** Enable close the Toggleable on ESC keyboard event */

diff --git a/src/modules/esl-toggleable/core/esl-toggleable.ts b/src/modules/esl-toggleable/core/esl-toggleable.ts
@@ -3,6 +3,7 @@ import {ESC} from '../../esl-utils/dom/keys';
 import {CSSClassUtils} from '../../esl-utils/dom/class';
 import {bind} from '../../esl-utils/decorators/bind';
 import {defined, copyDefinedKeys} from '../../esl-utils/misc/object';
+import {sequentialUID} from '../../esl-utils/misc/uid';
 import {DeviceDetector} from '../../esl-utils/environment/device-detector';
 import {DelayedTask} from '../../esl-utils/async/delayed-task';
 import {ESLBaseElement, attr, jsonAttr, boolAttr} from '../../esl-base-element/core';
@@ -57,6 +58,8 @@ export class ESLToggleable extends ESLBaseElement {
   /** Selector to mark inner close triggers */
   @attr({name: 'close-on'}) public closeTrigger: string;
 
+  /** Not to allow auto id */
+  @boolAttr() public noAutoId: boolean;
   /** Close the Toggleable on ESC keyboard event */
   @boolAttr() public closeOnEsc: boolean;
   /** Close the Toggleable on a click/tap outside */
@@ -87,6 +90,9 @@ export class ESLToggleable extends ESLBaseElement {
 
   protected connectedCallback() {
     super.connectedCallback();
+    if (!this.id && !this.noAutoId) {
+      this.id = sequentialUID(ESLToggleable.is, 'esl-toggleable-');
+    }
     this.initiallyOpened = this.hasAttribute('open');
     this.bindEvents();
     this.setInitialState();