@rhtml/modifiers 0.0.89 → 0.0.92

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,12 @@
+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

@@ -0,0 +1,75 @@
+"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 {
+    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 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>
+    `;
+    }
+};
+__decorate([
+    lit_html_1.property(),
+    __metadata("design:type", lit_html_1.LitElement)
+], FlexLayout.prototype, "child", 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,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/dist/{modifiers.d.ts → layout/modifiers.d.ts}

@@ -6,12 +6,18 @@ export declare enum Attributes {
     FxFlex = "fxFlex",
     FxFlexFill = "fxFlexFill",
     FxLayoutAlign = "fxLayoutAlign",
-    FxLayoutGap = "fxLayoutGap"
+    FxLayoutGap = "fxLayoutGap",
+    FxFlexAlign = "fxFlexAlign",
+    FxFlexOffset = "fxFlexOffset",
+    FxFlexOrder = "fxFlexOrder"
 }
 export declare const isAttribute: (attr: string) => boolean | string;
 export declare const setFxLayoutAlign: (element: HTMLElement) => void;
 export declare const setChildrensFlexFill: (div: HTMLElement) => void;
 export declare const setChildrensFlex: (div: HTMLElement) => void;
+export declare const setFlexAlign: (div: HTMLElement) => void;
+export declare const setFlexOffset: (div: HTMLElement) => void;
+export declare const setFlexOrder: (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}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.recursion = exports.setFxLayout = exports.subscribeToAttributeChanges = exports.setChildrensFlex = exports.setChildrensFlexFill = exports.setFxLayoutAlign = exports.isAttribute = exports.Attributes = void 0;
+exports.recursion = exports.setFxLayout = exports.subscribeToAttributeChanges = exports.setFlexOrder = exports.setFlexOffset = exports.setFlexAlign = exports.setChildrensFlex = exports.setChildrensFlexFill = exports.setFxLayoutAlign = exports.isAttribute = exports.Attributes = void 0;
 var Attributes;
 (function (Attributes) {
     Attributes["FxLayout"] = "fxLayout";
@@ -8,6 +8,9 @@ var Attributes;
     Attributes["FxFlexFill"] = "fxFlexFill";
     Attributes["FxLayoutAlign"] = "fxLayoutAlign";
     Attributes["FxLayoutGap"] = "fxLayoutGap";
+    Attributes["FxFlexAlign"] = "fxFlexAlign";
+    Attributes["FxFlexOffset"] = "fxFlexOffset";
+    Attributes["FxFlexOrder"] = "fxFlexOrder";
 })(Attributes = exports.Attributes || (exports.Attributes = {}));
 /* TODO we need to update to typescript 4 */
 // export type FxLayoutAlign = `${MainAxis} ${CrossAxis}`;
@@ -16,8 +19,10 @@ exports.setFxLayoutAlign = (element) => {
     const fxLayoutAlign = element.getAttribute(Attributes.FxLayoutAlign);
     if (exports.isAttribute(fxLayoutAlign)) {
         const [mainAxis, crossAxis] = fxLayoutAlign.split(' ');
-        element.style['place-content'] = `${crossAxis} ${mainAxis}`;
-        element.style['align-items'] = crossAxis;
+        element.style['place-content'] = crossAxis
+            ? `${crossAxis} ${mainAxis}`
+            : `${mainAxis} ${mainAxis}`;
+        element.style['align-items'] = crossAxis ? crossAxis : mainAxis;
     }
     element.style['display'] = 'flex';
 };
@@ -41,6 +46,27 @@ exports.setChildrensFlex = (div) => {
         }
     }
 };
+exports.setFlexAlign = (div) => {
+    const fxFlexAlign = div.getAttribute(Attributes.FxFlexAlign);
+    if (exports.isAttribute(fxFlexAlign)) {
+        div.style['align-self'] = fxFlexAlign;
+    }
+};
+exports.setFlexOffset = (div) => {
+    const fxFlexOffset = div.getAttribute(Attributes.FxFlexOffset);
+    if (exports.isAttribute(fxFlexOffset)) {
+        div.style['margin-left'] = fxFlexOffset;
+    }
+};
+exports.setFlexOrder = (div) => {
+    const fxFlexOrder = div.getAttribute(Attributes.FxFlexOrder);
+    if (exports.isAttribute(fxFlexOrder)) {
+        div.style['order'] = fxFlexOrder;
+    }
+    else {
+        div.style['order'] = '0';
+    }
+};
 exports.subscribeToAttributeChanges = (name) => (fn) => (element) => {
     fn(element);
     return new MutationObserver(() => fn(element)).observe(element, {
@@ -59,12 +85,24 @@ 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);
     const fxLayoutAlign = div.getAttribute(Attributes.FxLayoutAlign);
     const fxLayoutGap = div.getAttribute(Attributes.FxLayoutGap);
+    const fxFlexAlign = div.getAttribute(Attributes.FxFlexAlign);
+    const fxFlexOffset = div.getAttribute(Attributes.FxFlexOffset);
+    const fxFlexOrder = div.getAttribute(Attributes.FxFlexOrder);
+    if (exports.isAttribute(fxFlexOrder)) {
+        exports.subscribeToAttributeChanges(Attributes.FxFlexOrder)(exports.setFlexOrder)(div);
+    }
+    if (exports.isAttribute(fxFlexOffset)) {
+        exports.subscribeToAttributeChanges(Attributes.FxFlexAlign)(exports.setFlexOffset)(div);
+    }
+    if (exports.isAttribute(fxFlexAlign)) {
+        exports.subscribeToAttributeChanges(Attributes.FxFlexAlign)(exports.setFlexAlign)(div);
+    }
     if (exports.isAttribute(fxFlex)) {
         exports.subscribeToAttributeChanges(Attributes.FxFlex)(exports.setChildrensFlex)(div);
     }
@@ -86,7 +124,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.92",
   "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,72 @@
+import {
+  Component,
+  html,
+  LitElement,
+  OnDestroy,
+  OnUpdate,
+  property,
+  TemplateResult
+} from '@rxdi/lit-html';
+
+import { Attributes, recursion } from './modifiers';
+
+@Component({
+  selector: 'flex-layout',
+  template() {
+    return html`
+      <slot></slot>
+    `;
+  }
+})
+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 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>
+    `;
+  }
+}

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

@@ -21,7 +21,10 @@ export enum Attributes {
   FxFlex = 'fxFlex',
   FxFlexFill = 'fxFlexFill',
   FxLayoutAlign = 'fxLayoutAlign',
-  FxLayoutGap = 'fxLayoutGap'
+  FxLayoutGap = 'fxLayoutGap',
+  FxFlexAlign = 'fxFlexAlign',
+  FxFlexOffset = 'fxFlexOffset',
+  FxFlexOrder = 'fxFlexOrder'
 }
 /* TODO we need to update to typescript 4 */
 // export type FxLayoutAlign = `${MainAxis} ${CrossAxis}`;
@@ -33,8 +36,10 @@ export const setFxLayoutAlign = (element: HTMLElement) => {
   const fxLayoutAlign = element.getAttribute(Attributes.FxLayoutAlign);
   if (isAttribute(fxLayoutAlign)) {
     const [mainAxis, crossAxis] = fxLayoutAlign.split(' ');
-    element.style['place-content'] = `${crossAxis} ${mainAxis}`;
-    element.style['align-items'] = crossAxis;
+    element.style['place-content'] = crossAxis
+      ? `${crossAxis} ${mainAxis}`
+      : `${mainAxis} ${mainAxis}`;
+    element.style['align-items'] = crossAxis ? crossAxis : mainAxis;
   }
   element.style['display'] = 'flex';
 };
@@ -61,6 +66,29 @@ export const setChildrensFlex = (div: HTMLElement) => {
   }
 };
 
+export const setFlexAlign = (div: HTMLElement) => {
+  const fxFlexAlign = div.getAttribute(Attributes.FxFlexAlign);
+  if (isAttribute(fxFlexAlign)) {
+    div.style['align-self'] = fxFlexAlign;
+  }
+};
+
+export const setFlexOffset = (div: HTMLElement) => {
+  const fxFlexOffset = div.getAttribute(Attributes.FxFlexOffset);
+  if (isAttribute(fxFlexOffset)) {
+    div.style['margin-left'] = fxFlexOffset;
+  }
+};
+
+export const setFlexOrder = (div: HTMLElement) => {
+  const fxFlexOrder = div.getAttribute(Attributes.FxFlexOrder);
+  if (isAttribute(fxFlexOrder)) {
+    div.style['order'] = fxFlexOrder;
+  } else {
+    div.style['order'] = '0';
+  }
+};
+
 export const subscribeToAttributeChanges = (name: string) => (
   fn: (element: HTMLElement) => void
 ) => (element: HTMLElement) => {
@@ -83,12 +111,26 @@ 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);
+  const fxFlexAlign = div.getAttribute(Attributes.FxFlexAlign);
+  const fxFlexOffset = div.getAttribute(Attributes.FxFlexOffset);
+  const fxFlexOrder = div.getAttribute(Attributes.FxFlexOrder);
+
+  if (isAttribute(fxFlexOrder)) {
+    subscribeToAttributeChanges(Attributes.FxFlexOrder)(setFlexOrder)(div);
+  }
+  if (isAttribute(fxFlexOffset)) {
+    subscribeToAttributeChanges(Attributes.FxFlexAlign)(setFlexOffset)(div);
+  }
+
+  if (isAttribute(fxFlexAlign)) {
+    subscribeToAttributeChanges(Attributes.FxFlexAlign)(setFlexAlign)(div);
+  }
 
   if (isAttribute(fxFlex)) {
     subscribeToAttributeChanges(Attributes.FxFlex)(setChildrensFlex)(div);
@@ -120,6 +162,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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"}