@rhtml/modifiers 0.0.88 → 0.0.91

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 {
+    child: 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.child, div);
+        }
+    }
+    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,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"}

package/dist/layout/modifiers.d.ts

@@ -0,0 +1,23 @@
+export declare type FxLayout = 'row' | 'column' | 'row-reverse' | 'column-reverse';
+export declare type MainAxis = 'start' | 'center' | 'end' | 'space-around' | 'space-between' | 'space-evenly';
+export declare type CrossAxis = 'start' | 'center' | 'end' | 'stretch' | 'space-between' | 'space-around' | 'baseline';
+export declare enum Attributes {
+    FxLayout = "fxLayout",
+    FxFlex = "fxFlex",
+    FxFlexFill = "fxFlexFill",
+    FxLayoutAlign = "fxLayoutAlign",
+    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 function recursion(div: HTMLElement): void;

package/dist/layout/modifiers.js

@@ -0,0 +1,131 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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";
+    Attributes["FxFlex"] = "fxFlex";
+    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}`;
+exports.isAttribute = (attr) => typeof attr === 'string' && (attr || attr === '');
+exports.setFxLayoutAlign = (element) => {
+    const fxLayoutAlign = element.getAttribute(Attributes.FxLayoutAlign);
+    if (exports.isAttribute(fxLayoutAlign)) {
+        const [mainAxis, crossAxis] = fxLayoutAlign.split(' ');
+        element.style['place-content'] = crossAxis
+            ? `${crossAxis} ${mainAxis}`
+            : `${mainAxis} ${mainAxis}`;
+        element.style['align-items'] = crossAxis ? crossAxis : mainAxis;
+    }
+    element.style['display'] = 'flex';
+};
+exports.setChildrensFlexFill = (div) => {
+    const fxFlexFill = div.getAttribute(Attributes.FxFlexFill);
+    if (exports.isAttribute(fxFlexFill)) {
+        div.style['margin'] = '0';
+        div.style['width'] = '100%';
+        div.style['height'] = '100%';
+        div.style['min-width'] = '100%';
+        div.style['min-height	'] = '100%';
+    }
+};
+exports.setChildrensFlex = (div) => {
+    const fxFlex = div.getAttribute(Attributes.FxFlex);
+    if (exports.isAttribute(fxFlex)) {
+        div.style['flex'] = '1 1 100%';
+        div.style['box-sizing'] = 'border-box';
+        if (fxFlex) {
+            div.style['max-width'] = fxFlex;
+        }
+    }
+};
+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, {
+        attributeFilter: [name.toLocaleLowerCase()],
+        attributes: true
+    });
+};
+exports.setFxLayout = (element) => {
+    const layout = element.getAttribute(Attributes.FxLayout);
+    if (exports.isAttribute(layout)) {
+        const splitted = layout.split(' ');
+        const [mainAxis, crossAxis] = splitted;
+        element.style['flex-flow'] =
+            splitted.length > 1 ? `${mainAxis} ${crossAxis}` : mainAxis;
+        element.style['box-sizing'] = 'flex';
+        element.style['display'] = 'flex';
+    }
+};
+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);
+    }
+    if (exports.isAttribute(fxFlexFill)) {
+        exports.subscribeToAttributeChanges(Attributes.FxFlexFill)(exports.setChildrensFlexFill)(div);
+    }
+    if (exports.isAttribute(fxLayout)) {
+        exports.subscribeToAttributeChanges(Attributes.FxLayout)(exports.setFxLayout)(div);
+    }
+    if (exports.isAttribute(fxLayoutAlign)) {
+        exports.subscribeToAttributeChanges(Attributes.FxLayoutAlign)(exports.setFxLayoutAlign)(div);
+    }
+    if (exports.isAttribute(fxLayoutGap)) {
+        const divs = [...div.children];
+        for (const div of divs) {
+            div.style['margin'] = `0px ${fxLayoutGap} ${fxLayoutGap} 0px`;
+            div.style.flex = '1 1 25%';
+        }
+    }
+    const divs = [...div.children];
+    for (const div of divs) {
+        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.88",
+  "version": "0.0.91",
   "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()
+  child: LitElement;
+
+  OnUpdate(): void {
+    const slot = this.shadowRoot.querySelector('slot');
+    for (const div of [...slot?.assignedElements()]) {
+      recursion.call(this.child, div as never);
+    }
+  }
+
+  public static modifier(template: TemplateResult): TemplateResult {
+    return html`
+      <flex-layout .child=${this}>${template}</flex-layout>
+    `;
+  }
+}

package/src/layout/modifiers.ts

@@ -0,0 +1,167 @@
+export type FxLayout = 'row' | 'column' | 'row-reverse' | 'column-reverse';
+
+export type MainAxis =
+  | 'start'
+  | 'center'
+  | 'end'
+  | 'space-around'
+  | 'space-between'
+  | 'space-evenly';
+export type CrossAxis =
+  | 'start'
+  | 'center'
+  | 'end'
+  | 'stretch'
+  | 'space-between'
+  | 'space-around'
+  | 'baseline';
+
+export enum Attributes {
+  FxLayout = 'fxLayout',
+  FxFlex = 'fxFlex',
+  FxFlexFill = 'fxFlexFill',
+  FxLayoutAlign = 'fxLayoutAlign',
+  FxLayoutGap = 'fxLayoutGap',
+  FxFlexAlign = 'fxFlexAlign',
+  FxFlexOffset = 'fxFlexOffset',
+  FxFlexOrder = 'fxFlexOrder'
+}
+/* TODO we need to update to typescript 4 */
+// export type FxLayoutAlign = `${MainAxis} ${CrossAxis}`;
+
+export const isAttribute = (attr: string): boolean | string =>
+  typeof attr === 'string' && (attr || attr === '');
+
+export const setFxLayoutAlign = (element: HTMLElement) => {
+  const fxLayoutAlign = element.getAttribute(Attributes.FxLayoutAlign);
+  if (isAttribute(fxLayoutAlign)) {
+    const [mainAxis, crossAxis] = fxLayoutAlign.split(' ');
+    element.style['place-content'] = crossAxis
+      ? `${crossAxis} ${mainAxis}`
+      : `${mainAxis} ${mainAxis}`;
+    element.style['align-items'] = crossAxis ? crossAxis : mainAxis;
+  }
+  element.style['display'] = 'flex';
+};
+
+export const setChildrensFlexFill = (div: HTMLElement): void => {
+  const fxFlexFill = div.getAttribute(Attributes.FxFlexFill);
+  if (isAttribute(fxFlexFill)) {
+    div.style['margin'] = '0';
+    div.style['width'] = '100%';
+    div.style['height'] = '100%';
+    div.style['min-width'] = '100%';
+    div.style['min-height	'] = '100%';
+  }
+};
+
+export const setChildrensFlex = (div: HTMLElement) => {
+  const fxFlex = div.getAttribute(Attributes.FxFlex);
+  if (isAttribute(fxFlex)) {
+    div.style['flex'] = '1 1 100%';
+    div.style['box-sizing'] = 'border-box';
+    if (fxFlex) {
+      div.style['max-width'] = fxFlex;
+    }
+  }
+};
+
+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) => {
+  fn(element);
+  return new MutationObserver(() => fn(element)).observe(element, {
+    attributeFilter: [name.toLocaleLowerCase()],
+    attributes: true
+  });
+};
+
+export const setFxLayout = (element: HTMLElement) => {
+  const layout = element.getAttribute(Attributes.FxLayout);
+  if (isAttribute(layout)) {
+    const splitted = layout.split(' ');
+    const [mainAxis, crossAxis] = splitted;
+    element.style['flex-flow'] =
+      splitted.length > 1 ? `${mainAxis} ${crossAxis}` : mainAxis;
+    element.style['box-sizing'] = 'flex';
+    element.style['display'] = 'flex';
+  }
+};
+
+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);
+  }
+
+  if (isAttribute(fxFlexFill)) {
+    subscribeToAttributeChanges(Attributes.FxFlexFill)(setChildrensFlexFill)(
+      div
+    );
+  }
+
+  if (isAttribute(fxLayout)) {
+    subscribeToAttributeChanges(Attributes.FxLayout)(setFxLayout)(div);
+  }
+
+  if (isAttribute(fxLayoutAlign)) {
+    subscribeToAttributeChanges(Attributes.FxLayoutAlign)(setFxLayoutAlign)(
+      div
+    );
+  }
+
+  if (isAttribute(fxLayoutGap)) {
+    const divs = [...div.children] as HTMLElement[];
+    for (const div of divs) {
+      div.style['margin'] = `0px ${fxLayoutGap} ${fxLayoutGap} 0px`;
+      div.style.flex = '1 1 25%';
+    }
+  }
+
+  const divs = [...div.children] as HTMLElement[];
+  for (const div of divs) {
+    recursion.call(this, div);
+  }
+}

package/dist/modifiers.d.ts

@@ -1,9 +0,0 @@
-export declare type FxLayout = 'row' | 'column' | 'row-reverse' | 'column-reverse';
-export declare type MainAxis = 'start' | 'center' | 'end' | 'space-around' | 'space-between' | 'space-evenly';
-export declare type CrossAxis = 'start' | 'center' | 'end' | 'stretch' | 'space-between' | 'space-around' | 'baseline';
-export declare const isAttribute: (attr: string) => boolean | string;
-export declare const setFxLayoutAlign: (element: HTMLElement) => (fxLayoutAlign?: string) => void;
-export declare const setChildrensFlexFill: (div: HTMLElement) => void;
-export declare const setChildrensFlex: (div: HTMLElement) => (fxFlex: string) => void;
-export declare const setFxLayout: (element: HTMLElement) => (fxLayout?: string) => void;
-export declare const recursion: (div: HTMLElement) => void;

package/dist/modifiers.js

@@ -1,72 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.recursion = exports.setFxLayout = exports.setChildrensFlex = exports.setChildrensFlexFill = exports.setFxLayoutAlign = exports.isAttribute = void 0;
-/* TODO we need to update to typescript 4 */
-// export type FxLayoutAlign = `${MainAxis} ${CrossAxis}`;
-exports.isAttribute = (attr) => typeof attr === 'string' && (attr || attr === '');
-exports.setFxLayoutAlign = (element) => {
-    return (fxLayoutAlign = '') => {
-        const [mainAxis, crossAxis] = fxLayoutAlign.split(' ');
-        element.style['place-content'] = `${crossAxis} ${mainAxis}`;
-        element.style['align-items'] = crossAxis;
-        element.style['display'] = 'flex';
-    };
-};
-exports.setChildrensFlexFill = (div) => {
-    div.style['margin'] = '0';
-    div.style['width'] = '100%';
-    div.style['height'] = '100%';
-    div.style['min-width'] = '100%';
-    div.style['min-height	'] = '100%';
-};
-exports.setChildrensFlex = (div) => {
-    return (fxFlex) => {
-        div.style['flex'] = '1 1 100%';
-        div.style['box-sizing'] = 'border-box';
-        if (fxFlex) {
-            div.style['max-width'] = fxFlex;
-        }
-    };
-};
-exports.setFxLayout = (element) => {
-    return (fxLayout = 'row') => {
-        // element.style['flex-direction'] = fxLayout;
-        const splitted = fxLayout.split(' ');
-        const [mainAxis, crossAxis] = splitted;
-        element.style['box-sizing'] = 'flex';
-        element.style['display'] = 'flex';
-        element.style['flex-flow'] =
-            splitted.length > 1 ? `${mainAxis} ${crossAxis}` : mainAxis;
-    };
-};
-exports.recursion = (div) => {
-    const fxFlex = div.getAttribute('fxFlex');
-    const fxFlexFill = div.getAttribute('fxFlexFill');
-    const fxLayout = div.getAttribute('fxLayout');
-    const fxLayoutAlign = div.getAttribute('fxLayoutAlign');
-    const fxLayoutGap = div.getAttribute('fxLayoutGap');
-    if (exports.isAttribute(fxFlex)) {
-        exports.setChildrensFlex(div)(fxFlex);
-    }
-    if (exports.isAttribute(fxFlexFill)) {
-        exports.setChildrensFlexFill(div);
-    }
-    if (exports.isAttribute(fxLayout)) {
-        exports.setFxLayout(div)(fxLayout);
-    }
-    if (exports.isAttribute(fxLayoutAlign)) {
-        exports.setFxLayoutAlign(div)(fxLayoutAlign);
-    }
-    if (exports.isAttribute(fxLayoutGap)) {
-        const divs = [...div.children];
-        for (const div of divs) {
-            div.style['margin'] = `0px ${fxLayoutGap} ${fxLayoutGap} 0px`;
-            div.style.flex = '1 1 25%';
-        }
-    }
-    const divs = [...div.children];
-    for (const div of divs) {
-        exports.recursion(div);
-    }
-};
-//# sourceMappingURL=modifiers.js.map

package/dist/modifiers.js.map

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

package/src/modifiers.ts

@@ -1,99 +0,0 @@
-export type FxLayout = 'row' | 'column' | 'row-reverse' | 'column-reverse';
-
-export type MainAxis =
-  | 'start'
-  | 'center'
-  | 'end'
-  | 'space-around'
-  | 'space-between'
-  | 'space-evenly';
-export type CrossAxis =
-  | 'start'
-  | 'center'
-  | 'end'
-  | 'stretch'
-  | 'space-between'
-  | 'space-around'
-  | 'baseline';
-/* TODO we need to update to typescript 4 */
-// export type FxLayoutAlign = `${MainAxis} ${CrossAxis}`;
-
-export const isAttribute = (attr: string): boolean | string =>
-  typeof attr === 'string' && (attr || attr === '');
-
-export const setFxLayoutAlign = (element: HTMLElement) => {
-  return (fxLayoutAlign = ''): void => {
-    const [mainAxis, crossAxis] = fxLayoutAlign.split(' ');
-    element.style['place-content'] = `${crossAxis} ${mainAxis}`;
-    element.style['align-items'] = crossAxis;
-    element.style['display'] = 'flex';
-  };
-};
-
-export const setChildrensFlexFill = (div: HTMLElement): void => {
-  div.style['margin'] = '0';
-  div.style['width'] = '100%';
-  div.style['height'] = '100%';
-  div.style['min-width'] = '100%';
-  div.style['min-height	'] = '100%';
-};
-
-export const setChildrensFlex = (div: HTMLElement) => {
-  return (fxFlex: string): void => {
-    div.style['flex'] = '1 1 100%';
-    div.style['box-sizing'] = 'border-box';
-    if (fxFlex) {
-      div.style['max-width'] = fxFlex;
-    }
-  };
-};
-
-export const setFxLayout = (element: HTMLElement) => {
-  return (fxLayout = 'row'): void => {
-    // element.style['flex-direction'] = fxLayout;
-    const splitted = fxLayout.split(' ');
-    const [mainAxis, crossAxis] = splitted;
-
-    element.style['box-sizing'] = 'flex';
-    element.style['display'] = 'flex';
-    element.style['flex-flow'] =
-      splitted.length > 1 ? `${mainAxis} ${crossAxis}` : mainAxis;
-  };
-};
-
-export const recursion = (div: HTMLElement): void => {
-  const fxFlex = div.getAttribute('fxFlex');
-  const fxFlexFill = div.getAttribute('fxFlexFill');
-  const fxLayout = div.getAttribute('fxLayout');
-  const fxLayoutAlign = div.getAttribute('fxLayoutAlign');
-  const fxLayoutGap = div.getAttribute('fxLayoutGap');
-
-  if (isAttribute(fxFlex)) {
-    setChildrensFlex(div)(fxFlex);
-  }
-
-  if (isAttribute(fxFlexFill)) {
-    setChildrensFlexFill(div);
-  }
-
-  if (isAttribute(fxLayout)) {
-    setFxLayout(div)(fxLayout);
-  }
-
-  if (isAttribute(fxLayoutAlign)) {
-    setFxLayoutAlign(div)(fxLayoutAlign);
-  }
-
-  if (isAttribute(fxLayoutGap)) {
-    const divs = [...div.children] as HTMLElement[];
-    for (const div of divs) {
-      div.style['margin'] = `0px ${fxLayoutGap} ${fxLayoutGap} 0px`;
-      div.style.flex = '1 1 25%';
-    }
-  }
-
-  const divs = [...div.children] as HTMLElement[];
-  for (const div of divs) {
-    recursion(div);
-  }
-};