Repository: exadel-inc/esl
Pull request #78 (2021-03-02 23:50:54)

fix: deepCompare null check fix


Patch:
diff --git a/src/modules/esl-alert/core/esl-alert.ts b/src/modules/esl-alert/core/esl-alert.ts
index daf0fbb9f..04d5c0389 100644
--- a/src/modules/esl-alert/core/esl-alert.ts
+++ b/src/modules/esl-alert/core/esl-alert.ts
@@ -41,7 +41,6 @@ export class ESLAlert extends ESLToggleable {
   protected activeCls?: string;
 
   private _$target: EventTarget;
-  private _clearTimeout: number;
 
   /** Create global alert instance */
   public static init() {
@@ -101,7 +100,6 @@ export class ESLAlert extends ESLToggleable {
   }
 
   protected onShow(params: AlertActionParams) {
-    if (this._clearTimeout) window.clearTimeout(this._clearTimeout);
     if (params.html || params.text) {
       this.render(params);
       super.onShow(params);
@@ -110,7 +108,7 @@ export class ESLAlert extends ESLToggleable {
   }
   protected onHide(params: AlertActionParams) {
     super.onHide(params);
-    this._clearTimeout = window.setTimeout(() => this.clear(), params.hideTime);
+    setTimeout(() => this.clear(), params.hideTime);
   }
 
   protected render({text, html, cls}: AlertActionParams) {
diff --git a/src/modules/esl-forms/esl-select-list/core/esl-select-wrapper.ts b/src/modules/esl-forms/esl-select-list/core/esl-select-wrapper.ts
index ef3d63274..50dc8ad5e 100644
--- a/src/modules/esl-forms/esl-select-list/core/esl-select-wrapper.ts
+++ b/src/modules/esl-forms/esl-select-list/core/esl-select-wrapper.ts
@@ -6,7 +6,6 @@ export interface ESLSelectOption {
   text: string;
   value: string;
   selected: boolean;
-  defaultSelected: boolean;
 }
 
 export interface ESLSelectModel {
@@ -31,16 +30,7 @@ export interface ESLSelectModel {
 }
 
 export abstract class ESLSelectWrapper extends ESLBaseElement implements ESLSelectModel {
-  protected static observationConfig: MutationObserverInit = {
-    subtree: true,
-    attributes: true,
-    attributeFilter: ['value', 'selected', 'disabled'],
-    childList: true,
-    characterData: true
-  };
-
   private _$select: HTMLSelectElement;
-  private _mutationObserver = new MutationObserver(this._onTargetMutation.bind(this));
 
   public get $select() {
     return this._$select;
@@ -59,8 +49,7 @@ export abstract class ESLSelectWrapper extends ESLBaseElement implements ESLSele
   protected disconnectedCallback() {
     super.disconnectedCallback();
     this.ownerDocument.removeEventListener('reset', this._onReset);
-    this._mutationObserver.disconnect();
-    this._$select && this._$select.removeEventListener('change', this._onChange);
+    if (this._$select) this._$select.removeEventListener('change', this._onChange);
   }
 
   protected _onChange(event?: Event) {}
@@ -68,12 +57,6 @@ export abstract class ESLSelectWrapper extends ESLBaseElement implements ESLSele
                             oldTarget: HTMLSelectElement | undefined) {
     if (oldTarget) oldTarget.removeEventListener('change', this._onChange);
     if (newTarget) newTarget.addEventListener('change', this._onChange);
-    this._mutationObserver.disconnect();
-    const type = (this.constructor as typeof ESLSelectWrapper);
-    if (newTarget) this._mutationObserver.observe(newTarget, type.observationConfig);
-  }
-  protected _onTargetMutation(changes: MutationRecord[]) {
-    this._onChange();
   }
 
   @bind
diff --git a/src/modules/esl-forms/esl-select/core/esl-select.ts b/src/modules/esl-forms/esl-select/core/esl-select.ts
index c426133a4..f138da9fa 100644
--- a/src/modules/esl-forms/esl-select/core/esl-select.ts
+++ b/src/modules/esl-forms/esl-select/core/esl-select.ts
@@ -73,12 +73,6 @@ export class ESLSelect extends ESLSelectWrapper {
   public focus(options?: FocusOptions) {
     this.$select.focus(options);
   }
-  public update(valueChanged = true) {
-    this._onUpdate();
-    if (!valueChanged) return;
-    // TODO: silent updates
-    EventUtils.dispatch(this, 'esl:change:value', {detail: {event: null}});
-  }
 
   protected bindEvents() {
     this.addEventListener('click', this._onClick);
diff --git a/src/modules/esl-media/core/esl-media.less b/src/modules/esl-media/core/esl-media.less
index dc54b2b11..1984ec7f0 100644
--- a/src/modules/esl-media/core/esl-media.less
+++ b/src/modules/esl-media/core/esl-media.less
@@ -34,11 +34,8 @@
 
     &[fill-mode='cover'],
     &[fill-mode='inscribe'] {
-      position: relative;
       overflow: hidden;
 
-      height: 100%;
-
       .esl-media-inner {
         position: absolute;
         top: 50%;
diff --git a/src/modules/esl-panel/core/esl-panel-group.ts b/src/modules/esl-panel/core/esl-panel-group.ts
index 3177c2284..bb680f2b2 100644
--- a/src/modules/esl-panel/core/esl-panel-group.ts
+++ b/src/modules/esl-panel/core/esl-panel-group.ts
@@ -58,28 +58,26 @@ export class ESLPanelGroup extends ESLBaseElement {
   }
 
   /** Get all panels for which there is no specified group */
-  public get $panels(): ESLPanel[] {
-    const els = Array.from(this.querySelectorAll(ESLPanel.is));
-    return els.filter((el) => this.includesPanel(el)) as ESLPanel[];
+  public get panels(): ESLPanel[] {
+    const els = Array.from(this.children);
+    return els.filter((el) => (el instanceof ESLPanel) && !el.groupName) as ESLPanel[];
   }
 
-  /** Get all active panels */
-  public get $activePanels() {
-    return this.$panels.filter((el: ESLPanel) => el.open) as ESLPanel[];
+  /** Get panel that is opened or undefined if all panels are closed */
+  public get activePanel(): ESLPanel | undefined {
+    return this.panels.find((el: ESLPanel) => el.open);
   }
 
   /** Condition-guard to check if the target is controlled panel */
   public includesPanel(target: any): target is ESLPanel {
-    if(!(target instanceof ESLPanel)) return false;
-    return target.$group === this;
+    return this.panels.includes(target);
   }
 
   /** Hide opened panel before a new one will be shown */
   @bind
   protected _onBeforeShow(e: CustomEvent) {
-    const panel = e.target;
-    if (!this.includesPanel(panel)) return;
-    this.$activePanels.forEach((el) => (el !== panel) && el.hide());
+    if (!this.includesPanel(e.target)) return;
+    this.activePanel?.hide();
   }
 
   @bind
diff --git a/src/modules/esl-panel/core/esl-panel.ts b/src/modules/esl-panel/core/esl-panel.ts
index 10f9d0557..216a926af 100644
--- a/src/modules/esl-panel/core/esl-panel.ts
+++ b/src/modules/esl-panel/core/esl-panel.ts
@@ -33,7 +33,6 @@ export class ESLPanel extends ESLToggleable {
   }
 
   public get $group(): ESLPanelGroup | null {
-    if (this.groupName === 'none' || this.groupName) return null;
     return this.closest(ESLPanelGroup.is);
   }
 
diff --git a/src/modules/esl-tab/core/esl-tabs.less b/src/modules/esl-tab/core/esl-tabs.less
index 6bab3d655..c2a9ac6a4 100644
--- a/src/modules/esl-tab/core/esl-tabs.less
+++ b/src/modules/esl-tab/core/esl-tabs.less
@@ -1,5 +1,4 @@
 esl-tabs {
-  display: block;
   .esl-tab-container {
     display: flex;
     flex-direction: row;
diff --git a/src/modules/esl-utils/misc/object.ts b/src/modules/esl-utils/misc/object.ts
index 7bc08aa5c..4dbc0eeea 100644
--- a/src/modules/esl-utils/misc/object.ts
+++ b/src/modules/esl-utils/misc/object.ts
@@ -5,7 +5,7 @@ export const isObjectLike = (obj: any) => isObject(obj) || typeof obj === 'funct
 export function deepCompare(obj1: any, obj2: any): boolean {
   if (Object.is(obj1, obj2)) return true;
   if (typeof obj1 !== typeof obj2) return false;
-  if (typeof obj1 === 'object') {
+  if (isObject(obj1) && isObject(obj2)) {
     const keys1 = Object.keys(obj1);
     const keys2 = Object.keys(obj2);
     if (keys1.length !== keys2.length) return false;


Test patch:
diff --git a/src/modules/esl-utils/misc/test/object.test.ts b/src/modules/esl-utils/misc/test/object.test.ts
index 0f8260022..04dd49cdb 100644
--- a/src/modules/esl-utils/misc/test/object.test.ts
+++ b/src/modules/esl-utils/misc/test/object.test.ts
@@ -26,6 +26,8 @@ describe('misc/object', () => {
       [1, 2],
       ['a', 'b'],
       [{a: 1}, {b: 2}],
+      [{a: null}, {a: {}}],
+      [{a: {}}, {a: null}],
       [{b: 1}, {b: 2}],
       [{b: undefined}, {b: null}],
       [{a: {c: {b: 1}}}, {a: {b: {c: 1}}}],
diff --git a/test-server/views/pages/esl-tab.html b/test-server/views/pages/esl-tab.html
index 39519f1a5..c5581d677 100644
--- a/test-server/views/pages/esl-tab.html
+++ b/test-server/views/pages/esl-tab.html
@@ -129,8 +129,7 @@ title: ESL Tabs <span class="badge badge-warning">Beta</span>
                 <li class="nav-item">
                   <esl-tab class="esl-tab nav-link"
                            active-class="active"
-                           mode="toggle"
-
+                           mode="show"
                            target="::parent(.tabs)::find(.tab-21)">
                     <h5 class="mb-0">Tab #1 Lorem ipsum dolor sit amet, consectetur adipiscing elit</h5>
                   </esl-tab>
@@ -200,8 +199,7 @@ title: ESL Tabs <span class="badge badge-warning">Beta</span>
                            tabindex="0">
                 <h5 class="mb-0">Toggle Accordion #1</h5>
               </esl-trigger>
-              <esl-panel group="none"
-                         class="tab tab-21"
+              <esl-panel class="tab tab-21"
                          tabindex="0">
                 <div class="tab-body">
                   <p>1 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson