@rhtml/modifiers 0.0.89 → 0.0.90

package/dist/angular/index.d.ts

@@ -0,0 +1,9 @@
+import { LitElement, TemplateResult } from '@rxdi/lit-html';
+export declare enum Attributes {
+    NgIf = "ngIf"
+}
+export declare class AngularLayout extends LitElement {
+    self: LitElement;
+    OnUpdate(): void;
+    static modifier(template: TemplateResult): TemplateResult;
+}

package/dist/angular/index.js

@@ -0,0 +1,58 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AngularLayout = exports.Attributes = void 0;
+const lit_html_1 = require("@rxdi/lit-html");
+const helpers_1 = require("../helpers");
+var Attributes;
+(function (Attributes) {
+    Attributes["NgIf"] = "ngIf";
+})(Attributes = exports.Attributes || (exports.Attributes = {}));
+function recursion(div) {
+    const ngIf = div.getAttribute(Attributes.NgIf);
+    if (helpers_1.isAttribute(ngIf)) {
+        helpers_1.subscribeToAttributeChanges(Attributes.NgIf)(element => (element.style.display =
+            element.getAttribute(Attributes.NgIf) === 'true' ? 'block' : 'none'))(div);
+    }
+    const divs = [...div.children];
+    for (const div of divs) {
+        recursion.call(this, div);
+    }
+}
+let AngularLayout = class AngularLayout extends lit_html_1.LitElement {
+    OnUpdate() {
+        const slot = this.shadowRoot.querySelector('slot');
+        for (const div of [...slot === null || slot === void 0 ? void 0 : slot.assignedElements()]) {
+            recursion.call(this.self, div);
+        }
+    }
+    static modifier(template) {
+        return lit_html_1.html `
+      <angular-layout .self=${this}>${template}</angular-layout>
+    `;
+    }
+};
+__decorate([
+    lit_html_1.property(),
+    __metadata("design:type", lit_html_1.LitElement)
+], AngularLayout.prototype, "self", void 0);
+AngularLayout = __decorate([
+    lit_html_1.Component({
+        selector: 'angular-layout',
+        template() {
+            return lit_html_1.html `
+      <slot></slot>
+    `;
+        }
+    })
+], AngularLayout);
+exports.AngularLayout = AngularLayout;
+//# sourceMappingURL=index.js.map

package/dist/angular/index.js.map

@@ -0,0 +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"}

package/dist/helpers/index.d.ts

@@ -0,0 +1,2 @@
+export declare const isAttribute: (attr: string) => boolean | string;
+export declare const subscribeToAttributeChanges: (name: string) => (fn: (element: HTMLElement) => void) => (element: HTMLElement) => void;

package/dist/helpers/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.subscribeToAttributeChanges = exports.isAttribute = void 0;
+exports.isAttribute = (attr) => typeof attr === 'string' && (attr || attr === '');
+exports.subscribeToAttributeChanges = (name) => (fn) => (element) => {
+    fn(element);
+    return new MutationObserver(() => fn(element)).observe(element, {
+        attributeFilter: [name.toLocaleLowerCase()],
+        attributes: true
+    });
+};
+//# sourceMappingURL=index.js.map

package/dist/helpers/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/helpers/index.ts"],"names":[],"mappings":";;;AAAa,QAAA,WAAW,GAAG,CAAC,IAAY,EAAoB,EAAE,CAC5D,OAAO,IAAI,KAAK,QAAQ,IAAI,CAAC,IAAI,IAAI,IAAI,KAAK,EAAE,CAAC,CAAC;AAEvC,QAAA,2BAA2B,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC,CAC3D,EAAkC,EAClC,EAAE,CAAC,CAAC,OAAoB,EAAE,EAAE;IAC5B,EAAE,CAAC,OAAO,CAAC,CAAC;IACZ,OAAO,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,EAAE;QAC9D,eAAe,EAAE,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC3C,UAAU,EAAE,IAAI;KACjB,CAAC,CAAC;AACL,CAAC,CAAC"}

package/dist/index.d.ts

@@ -1,12 +1,3 @@
-import { LitElement, TemplateResult } from '@rxdi/lit-html';
-import { AsyncDirective } from '@rxdi/lit-html/dist/lit-html/async-directive';
-import { AttributePart } from '@rxdi/lit-html/dist/lit-html/directive';
-export declare class LayoutDirective extends AsyncDirective {
-    render(): symbol;
-    update(part: AttributePart): symbol;
-}
-export declare class FlexLayout extends LitElement {
-    OnUpdate(): void;
-    static modifier(template: TemplateResult): TemplateResult;
-}
-export declare const layout: import("@rxdi/lit-html/dist/lit-html/directive").DirectiveResult<typeof LayoutDirective>;
+export * from './angular';
+export * from './helpers';
+export * from './layout';

package/dist/index.js

@@ -1,52 +1,16 @@
 "use strict";
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.layout = exports.FlexLayout = exports.LayoutDirective = void 0;
-const lit_html_1 = require("@rxdi/lit-html");
-const async_directive_1 = require("@rxdi/lit-html/dist/lit-html/async-directive");
-const directive_1 = require("@rxdi/lit-html/dist/lit-html/directive");
-const modifiers_1 = require("./modifiers");
-class LayoutDirective extends async_directive_1.AsyncDirective {
-    render() {
-        return lit_html_1.noChange;
-    }
-    update(part) {
-        const divs = [...part.element.children];
-        for (const div of divs) {
-            modifiers_1.recursion(div);
-        }
-        return this.render();
-    }
-}
-exports.LayoutDirective = LayoutDirective;
-let FlexLayout = class FlexLayout extends lit_html_1.LitElement {
-    OnUpdate() {
-        const slot = this.shadowRoot.querySelector('slot');
-        for (const div of [...slot === null || slot === void 0 ? void 0 : slot.assignedElements()]) {
-            modifiers_1.recursion(div);
-        }
-    }
-    static modifier(template) {
-        return lit_html_1.html `
-      <flex-layout>${template}</flex-layout>
-    `;
-    }
-};
-FlexLayout = __decorate([
-    lit_html_1.Component({
-        selector: 'flex-layout',
-        template() {
-            return lit_html_1.html `
-      <slot></slot>
-    `;
-        }
-    })
-], FlexLayout);
-exports.FlexLayout = FlexLayout;
-exports.layout = directive_1.directive(LayoutDirective)();
+__exportStar(require("./angular"), exports);
+__exportStar(require("./helpers"), exports);
+__exportStar(require("./layout"), exports);
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,6CAMwB;AACxB,kFAA8E;AAC9E,sEAGgD;AAEhD,2CAAwC;AAExC,MAAa,eAAgB,SAAQ,gCAAc;IACjD,MAAM;QACJ,OAAO,mBAAQ,CAAC;IAClB,CAAC;IACD,MAAM,CAAC,IAAmB;QACxB,MAAM,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAkB,CAAC;QACzD,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE;YACtB,qBAAS,CAAC,GAAG,CAAC,CAAC;SAChB;QACD,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC;IACvB,CAAC;CACF;AAXD,0CAWC;AAUD,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,qBAAU;IACxC,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,GAAY,CAAC,CAAC;SACzB;IACH,CAAC;IAEM,MAAM,CAAC,QAAQ,CAAC,QAAwB;QAC7C,OAAO,eAAI,CAAA;qBACM,QAAQ;KACxB,CAAC;IACJ,CAAC;CACF,CAAA;AAbY,UAAU;IARtB,oBAAS,CAAC;QACT,QAAQ,EAAE,aAAa;QACvB,QAAQ;YACN,OAAO,eAAI,CAAA;;KAEV,CAAC;QACJ,CAAC;KACF,CAAC;GACW,UAAU,CAatB;AAbY,gCAAU;AAeV,QAAA,MAAM,GAAG,qBAAS,CAAC,eAAe,CAAC,EAAE,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,4CAA0B;AAC1B,4CAA0B;AAC1B,2CAAyB"}

package/dist/layout/index.d.ts

@@ -0,0 +1,6 @@
+import { LitElement, TemplateResult } from '@rxdi/lit-html';
+export declare class FlexLayout extends LitElement {
+    self: LitElement;
+    OnUpdate(): void;
+    static modifier(template: TemplateResult): TemplateResult;
+}

package/dist/layout/index.js

@@ -0,0 +1,43 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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 {
+    OnUpdate() {
+        const slot = this.shadowRoot.querySelector('slot');
+        for (const div of [...slot === null || slot === void 0 ? void 0 : slot.assignedElements()]) {
+            modifiers_1.recursion.call(this.self, div);
+        }
+    }
+    static modifier(template) {
+        return lit_html_1.html `
+      <flex-layout .self=${this}>${template}</flex-layout>
+    `;
+    }
+};
+__decorate([
+    lit_html_1.property(),
+    __metadata("design:type", lit_html_1.LitElement)
+], FlexLayout.prototype, "self", void 0);
+FlexLayout = __decorate([
+    lit_html_1.Component({
+        selector: 'flex-layout',
+        template() {
+            return lit_html_1.html `
+      <slot></slot>
+    `;
+        }
+    })
+], FlexLayout);
+exports.FlexLayout = FlexLayout;
+//# sourceMappingURL=index.js.map

package/dist/layout/index.js.map

@@ -0,0 +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,IAAI,EAAE,GAAY,CAAC,CAAC;SACzC;IACH,CAAC;IAEM,MAAM,CAAC,QAAQ,CAAC,QAAwB;QAC7C,OAAO,eAAI,CAAA;2BACY,IAAI,IAAI,QAAQ;KACtC,CAAC;IACJ,CAAC;CACF,CAAA;AAdC;IADC,mBAAQ,EAAE;8BACL,qBAAU;wCAAC;AAFN,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"}

package/dist/{modifiers.d.ts → layout/modifiers.d.ts}

@@ -14,4 +14,4 @@ export declare const setChildrensFlexFill: (div: HTMLElement) => void;
 export declare const setChildrensFlex: (div: HTMLElement) => void;
 export declare const subscribeToAttributeChanges: (name: string) => (fn: (element: HTMLElement) => void) => (element: HTMLElement) => void;
 export declare const setFxLayout: (element: HTMLElement) => void;
-export declare const recursion: (div: HTMLElement) => void;
+export declare function recursion(div: HTMLElement): void;

package/dist/{modifiers.js → layout/modifiers.js}

@@ -59,7 +59,7 @@ exports.setFxLayout = (element) => {
         element.style['display'] = 'flex';
     }
 };
-exports.recursion = (div) => {
+function recursion(div) {
     const fxFlex = div.getAttribute(Attributes.FxFlex);
     const fxFlexFill = div.getAttribute(Attributes.FxFlexFill);
     const fxLayout = div.getAttribute(Attributes.FxLayout);
@@ -86,7 +86,8 @@ exports.recursion = (div) => {
     }
     const divs = [...div.children];
     for (const div of divs) {
-        exports.recursion(div);
+        recursion.call(this, div);
     }
-};
+}
+exports.recursion = recursion;
 //# sourceMappingURL=modifiers.js.map

package/dist/layout/modifiers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modifiers.js","sourceRoot":"","sources":["../../src/layout/modifiers.ts"],"names":[],"mappings":"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"}

package/package.json

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

package/src/angular/index.ts

@@ -0,0 +1,56 @@
+import {
+  Component,
+  html,
+  LitElement,
+  property,
+  TemplateResult
+} from '@rxdi/lit-html';
+
+import { isAttribute, subscribeToAttributeChanges } from '../helpers';
+
+export enum Attributes {
+  NgIf = 'ngIf'
+}
+
+function recursion(div: HTMLElement) {
+  const ngIf = div.getAttribute(Attributes.NgIf);
+
+  if (isAttribute(ngIf)) {
+    subscribeToAttributeChanges(Attributes.NgIf)(
+      element =>
+        (element.style.display =
+          element.getAttribute(Attributes.NgIf) === 'true' ? 'block' : 'none')
+    )(div);
+  }
+
+  const divs = [...div.children] as HTMLElement[];
+  for (const div of divs) {
+    recursion.call(this, div);
+  }
+}
+
+@Component({
+  selector: 'angular-layout',
+  template() {
+    return html`
+      <slot></slot>
+    `;
+  }
+})
+export class AngularLayout extends LitElement {
+  @property()
+  self: LitElement;
+
+  OnUpdate(): void {
+    const slot = this.shadowRoot.querySelector('slot');
+    for (const div of [...slot?.assignedElements()]) {
+      recursion.call(this.self, div as never);
+    }
+  }
+
+  public static modifier(template: TemplateResult): TemplateResult {
+    return html`
+      <angular-layout .self=${this}>${template}</angular-layout>
+    `;
+  }
+}

package/src/helpers/index.ts

@@ -0,0 +1,12 @@
+export const isAttribute = (attr: string): boolean | string =>
+  typeof attr === 'string' && (attr || attr === '');
+
+export const subscribeToAttributeChanges = (name: string) => (
+  fn: (element: HTMLElement) => void
+) => (element: HTMLElement) => {
+  fn(element);
+  return new MutationObserver(() => fn(element)).observe(element, {
+    attributeFilter: [name.toLocaleLowerCase()],
+    attributes: true
+  });
+};

package/src/index.ts

@@ -1,52 +1,3 @@
-import {
-  Component,
-  html,
-  LitElement,
-  noChange,
-  TemplateResult
-} from '@rxdi/lit-html';
-import { AsyncDirective } from '@rxdi/lit-html/dist/lit-html/async-directive';
-import {
-  AttributePart,
-  directive
-} from '@rxdi/lit-html/dist/lit-html/directive';
-
-import { recursion } from './modifiers';
-
-export class LayoutDirective extends AsyncDirective {
-  render(): symbol {
-    return noChange;
-  }
-  update(part: AttributePart): symbol {
-    const divs = [...part.element.children] as HTMLElement[];
-    for (const div of divs) {
-      recursion(div);
-    }
-    return this.render();
-  }
-}
-
-@Component({
-  selector: 'flex-layout',
-  template() {
-    return html`
-      <slot></slot>
-    `;
-  }
-})
-export class FlexLayout extends LitElement {
-  OnUpdate(): void {
-    const slot = this.shadowRoot.querySelector('slot');
-    for (const div of [...slot?.assignedElements()]) {
-      recursion(div as never);
-    }
-  }
-
-  public static modifier(template: TemplateResult): TemplateResult {
-    return html`
-      <flex-layout>${template}</flex-layout>
-    `;
-  }
-}
-
-export const layout = directive(LayoutDirective)();
+export * from './angular';
+export * from './helpers';
+export * from './layout';

package/src/layout/index.ts

@@ -0,0 +1,35 @@
+import {
+  Component,
+  html,
+  LitElement,
+  property,
+  TemplateResult
+} from '@rxdi/lit-html';
+
+import { recursion } from './modifiers';
+
+@Component({
+  selector: 'flex-layout',
+  template() {
+    return html`
+      <slot></slot>
+    `;
+  }
+})
+export class FlexLayout extends LitElement {
+  @property()
+  self: LitElement;
+
+  OnUpdate(): void {
+    const slot = this.shadowRoot.querySelector('slot');
+    for (const div of [...slot?.assignedElements()]) {
+      recursion.call(this.self, div as never);
+    }
+  }
+
+  public static modifier(template: TemplateResult): TemplateResult {
+    return html`
+      <flex-layout .self=${this}>${template}</flex-layout>
+    `;
+  }
+}

package/src/{modifiers.ts → layout/modifiers.ts}

@@ -83,13 +83,12 @@ export const setFxLayout = (element: HTMLElement) => {
   }
 };
 
-export const recursion = (div: HTMLElement): void => {
+export function recursion(div: HTMLElement) {
   const fxFlex = div.getAttribute(Attributes.FxFlex);
   const fxFlexFill = div.getAttribute(Attributes.FxFlexFill);
   const fxLayout = div.getAttribute(Attributes.FxLayout);
   const fxLayoutAlign = div.getAttribute(Attributes.FxLayoutAlign);
   const fxLayoutGap = div.getAttribute(Attributes.FxLayoutGap);
-
   if (isAttribute(fxFlex)) {
     subscribeToAttributeChanges(Attributes.FxFlex)(setChildrensFlex)(div);
   }
@@ -120,6 +119,6 @@ export const recursion = (div: HTMLElement): void => {
 
   const divs = [...div.children] as HTMLElement[];
   for (const div of divs) {
-    recursion(div);
+    recursion.call(this, div);
   }
-};
+}

package/dist/modifiers.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"modifiers.js","sourceRoot":"","sources":["../src/modifiers.ts"],"names":[],"mappings":"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"}