@rhtml/modifiers 0.0.92 → 0.0.95

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/angular/index.d.ts +9 -4
  2. package/dist/angular/index.js +26 -8
  3. package/dist/angular/index.js.map +1 -1
  4. package/dist/layout/index.d.ts +9 -10
  5. package/dist/layout/index.js +21 -35
  6. package/dist/layout/index.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/angular/index.ts +37 -11
  9. package/src/layout/index.ts +27 -39
package/dist/angular/index.d.ts CHANGED
@@ -1,9 +1,14 @@
1
- import { LitElement, TemplateResult } from '@rxdi/lit-html';
1
+ import { LitElement, OnDestroy, OnUpdateFirst, TemplateResult } from '@rxdi/lit-html';
2
2
  export declare enum Attributes {
3
3
  NgIf = "ngIf"
4
4
  }
5
- export declare class AngularLayout extends LitElement {
6
- self: LitElement;
7
- OnUpdate(): void;
5
+ export declare class AngularLayout extends LitElement implements OnUpdateFirst, OnDestroy {
8
6
  static modifier(template: TemplateResult): TemplateResult;
7
+ parent: LitElement;
8
+ private container;
9
+ private observer;
10
+ OnUpdateFirst(): void;
11
+ OnDestroy(): void;
12
+ private listenForTreeChanges;
13
+ private triggerChanges;
9
14
  }
package/dist/angular/index.js CHANGED
@@ -28,22 +28,40 @@ function recursion(div) {
28
28
  }
29
29
  }
30
30
  let AngularLayout = class AngularLayout extends lit_html_1.LitElement {
31
- OnUpdate() {
32
- const slot = this.shadowRoot.querySelector('slot');
33
- for (const div of [...slot === null || slot === void 0 ? void 0 : slot.assignedElements()]) {
34
- recursion.call(this.self, div);
35
- }
36
- }
31
+ /* Keep in mind that `this` here is the parent component where modifier will be used */
37
32
  static modifier(template) {
38
33
  return lit_html_1.html `
39
- <angular-layout .self=${this}>${template}</angular-layout>
34
+ <angular-layout .parent=${this}>${template}</angular-layout>
40
35
  `;
41
36
  }
37
+ OnUpdateFirst() {
38
+ this.triggerChanges();
39
+ this.listenForTreeChanges();
40
+ }
41
+ OnDestroy() {
42
+ this.observer.disconnect();
43
+ }
44
+ listenForTreeChanges() {
45
+ this.observer = new MutationObserver(() => this.triggerChanges());
46
+ this.observer.observe(this.parent.shadowRoot, {
47
+ subtree: true,
48
+ childList: true
49
+ });
50
+ }
51
+ triggerChanges() {
52
+ for (const div of this.container.assignedElements()) {
53
+ recursion.call(this.parent, div);
54
+ }
55
+ }
42
56
  };
43
57
  __decorate([
44
58
  lit_html_1.property(),
45
59
  __metadata("design:type", lit_html_1.LitElement)
46
- ], AngularLayout.prototype, "self", void 0);
60
+ ], AngularLayout.prototype, "parent", void 0);
61
+ __decorate([
62
+ lit_html_1.query('slot'),
63
+ __metadata("design:type", HTMLSlotElement)
64
+ ], AngularLayout.prototype, "container", void 0);
47
65
  AngularLayout = __decorate([
48
66
  lit_html_1.Component({
49
67
  selector: 'angular-layout',
package/dist/angular/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/angular/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,6CAMwB;AAExB,wCAAsE;AAEtE,IAAY,UAEX;AAFD,WAAY,UAAU;IACpB,2BAAa,CAAA;AACf,CAAC,EAFW,UAAU,GAAV,kBAAU,KAAV,kBAAU,QAErB;AAED,SAAS,SAAS,CAAC,GAAgB;IACjC,MAAM,IAAI,GAAG,GAAG,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IAE/C,IAAI,qBAAW,CAAC,IAAI,CAAC,EAAE;QACrB,qCAA2B,CAAC,UAAU,CAAC,IAAI,CAAC,CAC1C,OAAO,CAAC,EAAE,CACR,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO;YACpB,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CACzE,CAAC,GAAG,CAAC,CAAC;KACR;IAED,MAAM,IAAI,GAAG,CAAC,GAAG,GAAG,CAAC,QAAQ,CAAkB,CAAC;IAChD,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE;QACtB,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;KAC3B;AACH,CAAC;AAUD,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,qBAAU;IAI3C,QAAQ;QACN,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACnD,KAAK,MAAM,GAAG,IAAI,CAAC,GAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,EAAE,CAAC,EAAE;YAC/C,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,GAAY,CAAC,CAAC;SACzC;IACH,CAAC;IAEM,MAAM,CAAC,QAAQ,CAAC,QAAwB;QAC7C,OAAO,eAAI,CAAA;8BACe,IAAI,IAAI,QAAQ;KACzC,CAAC;IACJ,CAAC;CACF,CAAA;AAdC;IADC,mBAAQ,EAAE;8BACL,qBAAU;2CAAC;AAFN,aAAa;IARzB,oBAAS,CAAC;QACT,QAAQ,EAAE,gBAAgB;QAC1B,QAAQ;YACN,OAAO,eAAI,CAAA;;KAEV,CAAC;QACJ,CAAC;KACF,CAAC;GACW,aAAa,CAgBzB;AAhBY,sCAAa"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/angular/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,6CASwB;AAExB,wCAAsE;AAEtE,IAAY,UAEX;AAFD,WAAY,UAAU;IACpB,2BAAa,CAAA;AACf,CAAC,EAFW,UAAU,GAAV,kBAAU,KAAV,kBAAU,QAErB;AAED,SAAS,SAAS,CAAC,GAAgB;IACjC,MAAM,IAAI,GAAG,GAAG,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IAE/C,IAAI,qBAAW,CAAC,IAAI,CAAC,EAAE;QACrB,qCAA2B,CAAC,UAAU,CAAC,IAAI,CAAC,CAC1C,OAAO,CAAC,EAAE,CACR,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO;YACpB,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CACzE,CAAC,GAAG,CAAC,CAAC;KACR;IAED,MAAM,IAAI,GAAG,CAAC,GAAG,GAAG,CAAC,QAAQ,CAAkB,CAAC;IAChD,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE;QACtB,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;KAC3B;AACH,CAAC;AAUD,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,qBAAU;IAE3C,uFAAuF;IAChF,MAAM,CAAC,QAAQ,CAAC,QAAwB;QAC7C,OAAO,eAAI,CAAA;gCACiB,IAAI,IAAI,QAAQ;KAC3C,CAAC;IACJ,CAAC;IAUD,aAAa;QACX,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAED,SAAS;QACP,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IAC7B,CAAC;IAEO,oBAAoB;QAC1B,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;QAClE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE;YAC5C,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,IAAI;SAChB,CAAC,CAAC;IACL,CAAC;IAEO,cAAc;QACpB,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,SAAS,CAAC,gBAAgB,EAAE,EAAE;YACnD,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;SAClC;IACH,CAAC;CACF,CAAA;AA7BC;IADC,mBAAQ,EAAE;8BACI,qBAAU;6CAAC;AAG1B;IADC,gBAAK,CAAC,MAAM,CAAC;8BACK,eAAe;gDAAC;AAbxB,aAAa;IARzB,oBAAS,CAAC;QACT,QAAQ,EAAE,gBAAgB;QAC1B,QAAQ;YACN,OAAO,eAAI,CAAA;;KAEV,CAAC;QACJ,CAAC;KACF,CAAC;GACW,aAAa,CAuCzB;AAvCY,sCAAa"}
package/dist/layout/index.d.ts CHANGED
@@ -1,12 +1,11 @@
1
- import { LitElement, OnDestroy, OnUpdate, TemplateResult } from '@rxdi/lit-html';
2
- export declare class FlexLayout extends LitElement implements OnUpdate, OnDestroy {
3
- child: LitElement;
4
- private observables;
5
- OnUpdate(): void;
6
- OnDestroy(): void;
7
- private unsubscribe;
8
- private updateAttributes;
9
- private isFxLayout;
10
- private subscribe;
1
+ import { LitElement, OnDestroy, OnUpdateFirst, TemplateResult } from '@rxdi/lit-html';
2
+ export declare class FlexLayout extends LitElement implements OnUpdateFirst, OnDestroy {
11
3
  static modifier(template: TemplateResult): TemplateResult;
4
+ parent: LitElement;
5
+ private container;
6
+ private observer;
7
+ OnUpdateFirst(): void;
8
+ OnDestroy(): void;
9
+ private listenForTreeChanges;
10
+ private triggerChanges;
12
11
  }
package/dist/layout/index.js CHANGED
@@ -13,54 +13,40 @@ exports.FlexLayout = void 0;
13
13
  const lit_html_1 = require("@rxdi/lit-html");
14
14
  const modifiers_1 = require("./modifiers");
15
15
  let FlexLayout = class FlexLayout extends lit_html_1.LitElement {
16
- constructor() {
17
- super(...arguments);
18
- this.observables = [];
16
+ /* Keep in mind that `this` here is the parent component where modifier will be used */
17
+ static modifier(template) {
18
+ return lit_html_1.html `
19
+ <flex-layout .parent=${this}>${template}</flex-layout>
20
+ `;
19
21
  }
20
- OnUpdate() {
21
- this.updateAttributes();
22
+ OnUpdateFirst() {
23
+ this.triggerChanges();
24
+ this.listenForTreeChanges();
22
25
  }
23
26
  OnDestroy() {
24
- this.unsubscribe();
25
- }
26
- unsubscribe() {
27
- for (const observable of this.observables) {
28
- observable.disconnect();
29
- }
30
- this.observables = [];
31
- }
32
- updateAttributes() {
33
- const slot = this.shadowRoot.querySelector('slot');
34
- for (const element of [...slot === null || slot === void 0 ? void 0 : slot.assignedElements()]) {
35
- if (this.isFxLayout(element)) {
36
- this.unsubscribe();
37
- this.subscribe(element);
38
- }
39
- modifiers_1.recursion.call(this.child, element);
40
- }
27
+ this.observer.disconnect();
41
28
  }
42
- isFxLayout(element) {
43
- return element.getAttribute(modifiers_1.Attributes.FxLayout.toLowerCase());
44
- }
45
- subscribe(element) {
46
- this.unsubscribe();
47
- const observer = new MutationObserver(() => this.updateAttributes());
48
- observer.observe(element, {
29
+ listenForTreeChanges() {
30
+ this.observer = new MutationObserver(() => this.triggerChanges());
31
+ this.observer.observe(this.parent.shadowRoot, {
49
32
  subtree: true,
50
33
  childList: true
51
34
  });
52
- this.observables.push(observer);
53
35
  }
54
- static modifier(template) {
55
- return lit_html_1.html `
56
- <flex-layout .child=${this}>${template}</flex-layout>
57
- `;
36
+ triggerChanges() {
37
+ for (const div of this.container.assignedElements()) {
38
+ modifiers_1.recursion.call(this.parent, div);
39
+ }
58
40
  }
59
41
  };
60
42
  __decorate([
61
43
  lit_html_1.property(),
62
44
  __metadata("design:type", lit_html_1.LitElement)
63
- ], FlexLayout.prototype, "child", void 0);
45
+ ], FlexLayout.prototype, "parent", void 0);
46
+ __decorate([
47
+ lit_html_1.query('slot'),
48
+ __metadata("design:type", HTMLSlotElement)
49
+ ], FlexLayout.prototype, "container", void 0);
64
50
  FlexLayout = __decorate([
65
51
  lit_html_1.Component({
66
52
  selector: 'flex-layout',
package/dist/layout/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,6CAQwB;AAExB,2CAAoD;AAUpD,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,qBAAU;IAA1C;;QAIU,gBAAW,GAAuB,EAAE,CAAC;IA+C/C,CAAC;IA7CC,QAAQ;QACN,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAED,SAAS;QACP,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAEO,WAAW;QACjB,KAAK,MAAM,UAAU,IAAI,IAAI,CAAC,WAAW,EAAE;YACzC,UAAU,CAAC,UAAU,EAAE,CAAC;SACzB;QACD,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;IACxB,CAAC;IAEO,gBAAgB;QACtB,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACnD,KAAK,MAAM,OAAO,IAAI,CAAC,GAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,EAAE,CAAC,EAAE;YACnD,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;gBAC5B,IAAI,CAAC,WAAW,EAAE,CAAC;gBACnB,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;aACzB;YACD,qBAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;SACrC;IACH,CAAC;IAEO,UAAU,CAAC,OAAgB;QACjC,OAAO,OAAO,CAAC,YAAY,CAAC,sBAAU,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAC;IACjE,CAAC;IAEO,SAAS,CAAC,OAAgB;QAChC,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;QACrE,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE;YACxB,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,IAAI;SAChB,CAAC,CAAC;QACH,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAClC,CAAC;IAEM,MAAM,CAAC,QAAQ,CAAC,QAAwB;QAC7C,OAAO,eAAI,CAAA;4BACa,IAAI,IAAI,QAAQ;KACvC,CAAC;IACJ,CAAC;CACF,CAAA;AAjDC;IADC,mBAAQ,EAAE;8BACJ,qBAAU;yCAAC;AAFP,UAAU;IARtB,oBAAS,CAAC;QACT,QAAQ,EAAE,aAAa;QACvB,QAAQ;YACN,OAAO,eAAI,CAAA;;KAEV,CAAC;QACJ,CAAC;KACF,CAAC;GACW,UAAU,CAmDtB;AAnDY,gCAAU"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,6CASwB;AAExB,2CAAwC;AAUxC,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,qBAAU;IACxC,uFAAuF;IAChF,MAAM,CAAC,QAAQ,CAAC,QAAwB;QAC7C,OAAO,eAAI,CAAA;6BACc,IAAI,IAAI,QAAQ;KACxC,CAAC;IACJ,CAAC;IAUD,aAAa;QACX,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAED,SAAS;QACP,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IAC7B,CAAC;IAEO,oBAAoB;QAC1B,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;QAClE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE;YAC5C,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,IAAI;SAChB,CAAC,CAAC;IACL,CAAC;IAEO,cAAc;QACpB,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,SAAS,CAAC,gBAAgB,EAAE,EAAE;YACnD,qBAAS,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;SAClC;IACH,CAAC;CACF,CAAA;AA7BC;IADC,mBAAQ,EAAE;8BACI,qBAAU;0CAAC;AAG1B;IADC,gBAAK,CAAC,MAAM,CAAC;8BACK,eAAe;6CAAC;AAZxB,UAAU;IARtB,oBAAS,CAAC;QACT,QAAQ,EAAE,aAAa;QACvB,QAAQ;YACN,OAAO,eAAI,CAAA;;KAEV,CAAC;QACJ,CAAC;KACF,CAAC;GACW,UAAU,CAsCtB;AAtCY,gCAAU"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rhtml/modifiers",
3
- "version": "0.0.92",
3
+ "version": "0.0.95",
4
4
  "description": "Reactive HyperText Markup Language",
5
5
  "scripts": {
6
6
  "start": "npx parcel ./examples/index.html --out-dir build/examples",
package/src/angular/index.ts CHANGED
@@ -2,7 +2,10 @@ import {
2
2
  Component,
3
3
  html,
4
4
  LitElement,
5
+ OnDestroy,
6
+ OnUpdateFirst,
5
7
  property,
8
+ query,
6
9
  TemplateResult
7
10
  } from '@rxdi/lit-html';
8
11
 
@@ -37,20 +40,43 @@ function recursion(div: HTMLElement) {
37
40
  `;
38
41
  }
39
42
  })
40
- export class AngularLayout extends LitElement {
43
+ export class AngularLayout extends LitElement
44
+ implements OnUpdateFirst, OnDestroy {
45
+ /* Keep in mind that `this` here is the parent component where modifier will be used */
46
+ public static modifier(template: TemplateResult): TemplateResult {
47
+ return html`
48
+ <angular-layout .parent=${this}>${template}</angular-layout>
49
+ `;
50
+ }
51
+
41
52
  @property()
42
- self: LitElement;
53
+ public parent: LitElement;
43
54
 
44
- OnUpdate(): void {
45
- const slot = this.shadowRoot.querySelector('slot');
46
- for (const div of [...slot?.assignedElements()]) {
47
- recursion.call(this.self, div as never);
48
- }
55
+ @query('slot')
56
+ private container: HTMLSlotElement;
57
+
58
+ private observer: MutationObserver;
59
+
60
+ OnUpdateFirst() {
61
+ this.triggerChanges();
62
+ this.listenForTreeChanges();
49
63
  }
50
64
 
51
- public static modifier(template: TemplateResult): TemplateResult {
52
- return html`
53
- <angular-layout .self=${this}>${template}</angular-layout>
54
- `;
65
+ OnDestroy() {
66
+ this.observer.disconnect();
67
+ }
68
+
69
+ private listenForTreeChanges() {
70
+ this.observer = new MutationObserver(() => this.triggerChanges());
71
+ this.observer.observe(this.parent.shadowRoot, {
72
+ subtree: true,
73
+ childList: true
74
+ });
75
+ }
76
+
77
+ private triggerChanges() {
78
+ for (const div of this.container.assignedElements()) {
79
+ recursion.call(this.parent, div);
80
+ }
55
81
  }
56
82
  }
package/src/layout/index.ts CHANGED
@@ -3,12 +3,13 @@ import {
3
3
  html,
4
4
  LitElement,
5
5
  OnDestroy,
6
- OnUpdate,
6
+ OnUpdateFirst,
7
7
  property,
8
+ query,
8
9
  TemplateResult
9
10
  } from '@rxdi/lit-html';
10
11
 
11
- import { Attributes, recursion } from './modifiers';
12
+ import { recursion } from './modifiers';
12
13
 
13
14
  @Component({
14
15
  selector: 'flex-layout',
@@ -18,55 +19,42 @@ import { Attributes, recursion } from './modifiers';
18
19
  `;
19
20
  }
20
21
  })
21
- export class FlexLayout extends LitElement implements OnUpdate, OnDestroy {
22
- @property()
23
- child: LitElement;
24
-
25
- private observables: MutationObserver[] = [];
26
-
27
- OnUpdate(): void {
28
- this.updateAttributes();
22
+ export class FlexLayout extends LitElement implements OnUpdateFirst, OnDestroy {
23
+ /* Keep in mind that `this` here is the parent component where modifier will be used */
24
+ public static modifier(template: TemplateResult): TemplateResult {
25
+ return html`
26
+ <flex-layout .parent=${this}>${template}</flex-layout>
27
+ `;
29
28
  }
30
29
 
31
- OnDestroy() {
32
- this.unsubscribe();
33
- }
30
+ @property()
31
+ public parent: LitElement;
34
32
 
35
- private unsubscribe() {
36
- for (const observable of this.observables) {
37
- observable.disconnect();
38
- }
39
- this.observables = [];
40
- }
33
+ @query('slot')
34
+ private container: HTMLSlotElement;
41
35
 
42
- private updateAttributes() {
43
- const slot = this.shadowRoot.querySelector('slot');
44
- for (const element of [...slot?.assignedElements()]) {
45
- if (this.isFxLayout(element)) {
46
- this.unsubscribe();
47
- this.subscribe(element);
48
- }
49
- recursion.call(this.child, element);
50
- }
36
+ private observer: MutationObserver;
37
+
38
+ OnUpdateFirst() {
39
+ this.triggerChanges();
40
+ this.listenForTreeChanges();
51
41
  }
52
42
 
53
- private isFxLayout(element: Element) {
54
- return element.getAttribute(Attributes.FxLayout.toLowerCase());
43
+ OnDestroy() {
44
+ this.observer.disconnect();
55
45
  }
56
46
 
57
- private subscribe(element: Element) {
58
- this.unsubscribe();
59
- const observer = new MutationObserver(() => this.updateAttributes());
60
- observer.observe(element, {
47
+ private listenForTreeChanges() {
48
+ this.observer = new MutationObserver(() => this.triggerChanges());
49
+ this.observer.observe(this.parent.shadowRoot, {
61
50
  subtree: true,
62
51
  childList: true
63
52
  });
64
- this.observables.push(observer);
65
53
  }
66
54
 
67
- public static modifier(template: TemplateResult): TemplateResult {
68
- return html`
69
- <flex-layout .child=${this}>${template}</flex-layout>
70
- `;
55
+ private triggerChanges() {
56
+ for (const div of this.container.assignedElements()) {
57
+ recursion.call(this.parent, div);
58
+ }
71
59
  }
72
60
  }