@rhtml/modifiers 0.0.91 → 0.0.92

package/dist/layout/index.d.ts

@@ -1,6 +1,12 @@
-import { LitElement, TemplateResult } from '@rxdi/lit-html';
-export declare class FlexLayout extends LitElement {
+import { LitElement, OnDestroy, OnUpdate, TemplateResult } from '@rxdi/lit-html';
+export declare class FlexLayout extends LitElement implements OnUpdate, OnDestroy {
     child: LitElement;
+    private observables;
     OnUpdate(): void;
+    OnDestroy(): void;
+    private unsubscribe;
+    private updateAttributes;
+    private isFxLayout;
+    private subscribe;
     static modifier(template: TemplateResult): TemplateResult;
 }

package/dist/layout/index.js

@@ -13,12 +13,44 @@ exports.FlexLayout = void 0;
 const lit_html_1 = require("@rxdi/lit-html");
 const modifiers_1 = require("./modifiers");
 let FlexLayout = class FlexLayout extends lit_html_1.LitElement {
+    constructor() {
+        super(...arguments);
+        this.observables = [];
+    }
     OnUpdate() {
+        this.updateAttributes();
+    }
+    OnDestroy() {
+        this.unsubscribe();
+    }
+    unsubscribe() {
+        for (const observable of this.observables) {
+            observable.disconnect();
+        }
+        this.observables = [];
+    }
+    updateAttributes() {
         const slot = this.shadowRoot.querySelector('slot');
-        for (const div of [...slot === null || slot === void 0 ? void 0 : slot.assignedElements()]) {
-            modifiers_1.recursion.call(this.child, div);
+        for (const element of [...slot === null || slot === void 0 ? void 0 : slot.assignedElements()]) {
+            if (this.isFxLayout(element)) {
+                this.unsubscribe();
+                this.subscribe(element);
+            }
+            modifiers_1.recursion.call(this.child, element);
         }
     }
+    isFxLayout(element) {
+        return element.getAttribute(modifiers_1.Attributes.FxLayout.toLowerCase());
+    }
+    subscribe(element) {
+        this.unsubscribe();
+        const observer = new MutationObserver(() => this.updateAttributes());
+        observer.observe(element, {
+            subtree: true,
+            childList: true
+        });
+        this.observables.push(observer);
+    }
     static modifier(template) {
         return lit_html_1.html `
       <flex-layout .child=${this}>${template}</flex-layout>

package/dist/layout/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,6CAMwB;AAExB,2CAAwC;AAUxC,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,qBAAU;IAIxC,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,qBAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,GAAY,CAAC,CAAC;SAC1C;IACH,CAAC;IAEM,MAAM,CAAC,QAAQ,CAAC,QAAwB;QAC7C,OAAO,eAAI,CAAA;4BACa,IAAI,IAAI,QAAQ;KACvC,CAAC;IACJ,CAAC;CACF,CAAA;AAdC;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,CAgBtB;AAhBY,gCAAU"}
+{"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rhtml/modifiers",
-  "version": "0.0.91",
+  "version": "0.0.92",
   "description": "Reactive HyperText Markup Language",
   "scripts": {
     "start": "npx parcel ./examples/index.html --out-dir build/examples",

package/src/layout/index.ts

@@ -2,11 +2,13 @@ import {
   Component,
   html,
   LitElement,
+  OnDestroy,
+  OnUpdate,
   property,
   TemplateResult
 } from '@rxdi/lit-html';
 
-import { recursion } from './modifiers';
+import { Attributes, recursion } from './modifiers';
 
 @Component({
   selector: 'flex-layout',
@@ -16,17 +18,52 @@ import { recursion } from './modifiers';
     `;
   }
 })
-export class FlexLayout extends LitElement {
+export class FlexLayout extends LitElement implements OnUpdate, OnDestroy {
   @property()
   child: LitElement;
 
+  private observables: MutationObserver[] = [];
+
   OnUpdate(): void {
+    this.updateAttributes();
+  }
+
+  OnDestroy() {
+    this.unsubscribe();
+  }
+
+  private unsubscribe() {
+    for (const observable of this.observables) {
+      observable.disconnect();
+    }
+    this.observables = [];
+  }
+
+  private updateAttributes() {
     const slot = this.shadowRoot.querySelector('slot');
-    for (const div of [...slot?.assignedElements()]) {
-      recursion.call(this.child, div as never);
+    for (const element of [...slot?.assignedElements()]) {
+      if (this.isFxLayout(element)) {
+        this.unsubscribe();
+        this.subscribe(element);
+      }
+      recursion.call(this.child, element);
     }
   }
 
+  private isFxLayout(element: Element) {
+    return element.getAttribute(Attributes.FxLayout.toLowerCase());
+  }
+
+  private subscribe(element: Element) {
+    this.unsubscribe();
+    const observer = new MutationObserver(() => this.updateAttributes());
+    observer.observe(element, {
+      subtree: true,
+      childList: true
+    });
+    this.observables.push(observer);
+  }
+
   public static modifier(template: TemplateResult): TemplateResult {
     return html`
       <flex-layout .child=${this}>${template}</flex-layout>