@rhtml/modifiers 0.0.97 → 0.0.100

package/README.md

@@ -6,38 +6,11 @@
 npm i @rhtml/modifiers
 ```
 
-#### Modifiers
+Every modifier is actually `custom attribute` and modifiers is using package [@rhtml/custom-attributes](../custom-attributes)
 
-What is a modifier ?
+#### Usage
 
-In order to apply some logic before current template is loaded like custom directives, we need to wrap current template and pass it along the actual modifier template
-
-```typescript
-@Component({
-  selector: 'my-modifier',
-  template() {
-    return html`
-      <slot></slot>
-    `;
-  }
-})
-export class MyModifier extends LitElement {
-  OnUpdate() {
-    const slot = this.shadowRoot.querySelector('slot');
-    for (const element of [...slot.assignedElements()]) {
-      /// Do something here with element
-    }
-  }
-
-  public static html(template: TemplateResult) {
-    return html`
-      <my-modifier>${template}</my-modifier>
-    `;
-  }
-}
-```
-
-Another real example is to add FlexLayout modifier from `@rhtml/modifiers` which will apply useful directives
+Another real example is to add FlexLayout modifier from `@rhtml/modifiers` which will apply useful attributes
 to be used inside of the html inspired from Angular flex-layout https://github.com/angular/flex-layout/wiki/Declarative-API-Overview
 
 ```typescript
@@ -51,15 +24,16 @@ import { FlexLayout } from '@rhtml/modifiers';
 @Component({
   selector: 'home-component',
   style: css`
+    .container {
+      height: 200px;
+    }
+
     .block {
       background: red;
       flex: 1;
     }
-    .container {
-      height: 200px;
-    }
   `,
-  modifiers: [FlexLayout],
+  modifiers: [...FlexLayout],
   template(this: HomeComponent) {
     return html`
       <div class="container" fxLayout="row" fxLayoutGap="10px">
@@ -81,3 +55,38 @@ import { FlexLayout } from '@rhtml/modifiers';
 })
 export class HomeComponent extends LitElement {}
 ```
+
+#### Angular Layout
+
+`ngIf` attribute available at the moment to test the logic which represents
+
+```typescript
+import { Component, html, LitElement, state } from '@rxdi/lit-html';
+
+import { AngularLayout } from '@rhtml/modifiers';
+
+/**
+ * @customElement home-component
+ */
+@Component({
+  selector: 'home-component',
+  modifiers: [...AngularLayout],
+  template(this: HomeComponent) {
+    return html`
+      <div ngIf=${this.show}>
+        My Content
+      </div>
+
+      <button @click=${() => this.toggle()}>Toggle</button>
+    `;
+  }
+})
+export class HomeComponent extends LitElement {
+  @state()
+  show: boolean;
+
+  toggle() {
+    this.show = !this.show;
+  }
+}
+```

package/dist/angular/if.d.ts

@@ -0,0 +1,11 @@
+import { Attribute, CustomAttributeRegistry } from '@rhtml/custom-attributes';
+export declare class IfOperator extends Attribute {
+    static options(this: HTMLElement): {
+        name: string;
+        registry: CustomAttributeRegistry;
+    };
+    OnInit(): void;
+    OnDestroy(): void;
+    OnUpdate(): void;
+    setColor(): void;
+}

package/dist/angular/if.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IfOperator = void 0;
+const custom_attributes_1 = require("@rhtml/custom-attributes");
+class IfOperator extends custom_attributes_1.Attribute {
+    static options() {
+        return {
+            name: 'ngIf',
+            registry: new custom_attributes_1.CustomAttributeRegistry(this.shadowRoot)
+        };
+    }
+    OnInit() {
+        this.setColor();
+    }
+    OnDestroy() {
+        this.element.style.display = null;
+    }
+    OnUpdate() {
+        this.setColor();
+    }
+    setColor() {
+        if (this.value === 'true') {
+            this.element.style.display = null;
+        }
+        else {
+            this.element.style.display = 'none';
+        }
+    }
+}
+exports.IfOperator = IfOperator;
+//# sourceMappingURL=if.js.map

package/dist/angular/if.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"if.js","sourceRoot":"","sources":["../../src/angular/if.ts"],"names":[],"mappings":";;;AAAA,gEAA8E;AAE9E,MAAa,UAAW,SAAQ,6BAAS;IACvC,MAAM,CAAC,OAAO;QACZ,OAAO;YACL,IAAI,EAAE,MAAM;YACZ,QAAQ,EAAE,IAAI,2CAAuB,CAAC,IAAI,CAAC,UAAU,CAAC;SACvD,CAAC;IACJ,CAAC;IACD,MAAM;QACJ,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAED,SAAS;QACP,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC;IACpC,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAED,QAAQ;QACN,IAAI,IAAI,CAAC,KAAK,KAAK,MAAM,EAAE;YACzB,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC;SACnC;aAAM;YACL,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;SACrC;IACH,CAAC;CACF;AA1BD,gCA0BC"}

package/dist/angular/index.d.ts

@@ -1,14 +1,2 @@
-import { LitElement, OnDestroy, OnUpdateFirst, TemplateResult } from '@rxdi/lit-html';
-export declare enum Attributes {
-    NgIf = "ngIf"
-}
-export declare class AngularLayout extends LitElement implements OnUpdateFirst, OnDestroy {
-    static modifier(template: TemplateResult): TemplateResult;
-    parent: LitElement;
-    private container;
-    private observer;
-    OnUpdateFirst(): void;
-    OnDestroy(): void;
-    private listenForTreeChanges;
-    private triggerChanges;
-}
+import { IfOperator } from './if';
+export declare const AngularLayout: (typeof IfOperator)[];

package/dist/angular/index.js

@@ -1,76 +1,6 @@
 "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 {
-    /* Keep in mind that `this` here is the parent component where modifier will be used */
-    static modifier(template) {
-        return lit_html_1.html `
-      <angular-layout .parent=${this}>${template}</angular-layout>
-    `;
-    }
-    OnUpdateFirst() {
-        this.triggerChanges();
-        this.listenForTreeChanges();
-    }
-    OnDestroy() {
-        this.observer.disconnect();
-    }
-    listenForTreeChanges() {
-        this.observer = new MutationObserver(() => this.triggerChanges());
-        this.observer.observe(this.parent.shadowRoot, {
-            subtree: true,
-            childList: true
-        });
-    }
-    triggerChanges() {
-        for (const div of this.container.assignedElements()) {
-            recursion.call(this.parent, div);
-        }
-    }
-};
-__decorate([
-    lit_html_1.property(),
-    __metadata("design:type", lit_html_1.LitElement)
-], AngularLayout.prototype, "parent", void 0);
-__decorate([
-    lit_html_1.query('slot'),
-    __metadata("design:type", HTMLSlotElement)
-], AngularLayout.prototype, "container", void 0);
-AngularLayout = __decorate([
-    lit_html_1.Component({
-        selector: 'angular-layout',
-        template() {
-            return lit_html_1.html `
-      <slot></slot>
-    `;
-        }
-    })
-], AngularLayout);
-exports.AngularLayout = AngularLayout;
+exports.AngularLayout = void 0;
+const if_1 = require("./if");
+exports.AngularLayout = [if_1.IfOperator];
 //# sourceMappingURL=index.js.map

package/dist/angular/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/angular/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,6CASwB;AAExB,wCAAsE;AAEtE,IAAY,UAEX;AAFD,WAAY,UAAU;IACpB,2BAAa,CAAA;AACf,CAAC,EAFW,UAAU,GAAV,kBAAU,KAAV,kBAAU,QAErB;AAED,SAAS,SAAS,CAAC,GAAgB;IACjC,MAAM,IAAI,GAAG,GAAG,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IAE/C,IAAI,qBAAW,CAAC,IAAI,CAAC,EAAE;QACrB,qCAA2B,CAAC,UAAU,CAAC,IAAI,CAAC,CAC1C,OAAO,CAAC,EAAE,CACR,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO;YACpB,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CACzE,CAAC,GAAG,CAAC,CAAC;KACR;IAED,MAAM,IAAI,GAAG,CAAC,GAAG,GAAG,CAAC,QAAQ,CAAkB,CAAC;IAChD,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE;QACtB,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;KAC3B;AACH,CAAC;AAUD,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,qBAAU;IAE3C,uFAAuF;IAChF,MAAM,CAAC,QAAQ,CAAC,QAAwB;QAC7C,OAAO,eAAI,CAAA;gCACiB,IAAI,IAAI,QAAQ;KAC3C,CAAC;IACJ,CAAC;IAUD,aAAa;QACX,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAED,SAAS;QACP,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IAC7B,CAAC;IAEO,oBAAoB;QAC1B,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;QAClE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE;YAC5C,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,IAAI;SAChB,CAAC,CAAC;IACL,CAAC;IAEO,cAAc;QACpB,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,SAAS,CAAC,gBAAgB,EAAE,EAAE;YACnD,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;SAClC;IACH,CAAC;CACF,CAAA;AA7BC;IADC,mBAAQ,EAAE;8BACI,qBAAU;6CAAC;AAG1B;IADC,gBAAK,CAAC,MAAM,CAAC;8BACK,eAAe;gDAAC;AAbxB,aAAa;IARzB,oBAAS,CAAC;QACT,QAAQ,EAAE,gBAAgB;QAC1B,QAAQ;YACN,OAAO,eAAI,CAAA;;KAEV,CAAC;QACJ,CAAC;KACF,CAAC;GACW,aAAa,CAuCzB;AAvCY,sCAAa"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/angular/index.ts"],"names":[],"mappings":";;;AAAA,6BAAkC;AAErB,QAAA,aAAa,GAAG,CAAC,eAAU,CAAC,CAAC"}

package/dist/index.d.ts

@@ -1,3 +1,2 @@
 export * from './angular';
-export * from './helpers';
 export * from './layout';

package/dist/index.js

@@ -11,6 +11,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __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,4CAA0B;AAC1B,4CAA0B;AAC1B,2CAAyB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,4CAA0B;AAC1B,2CAAyB"}

package/dist/layout/flex-align.d.ts

@@ -0,0 +1,15 @@
+import { Attribute } from '@rhtml/custom-attributes';
+interface Styles {
+    'align-self': string;
+}
+export declare class FlexAlign extends Attribute<Styles> {
+    static options(this: HTMLElement): {
+        name: string;
+    };
+    OnInit(): void;
+    OnDestroy(): void;
+    OnUpdate(): void;
+    private clean;
+    private modify;
+}
+export {};

package/dist/layout/flex-align.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlexAlign = void 0;
+const custom_attributes_1 = require("@rhtml/custom-attributes");
+class FlexAlign extends custom_attributes_1.Attribute {
+    static options() {
+        return {
+            name: 'fxFlexAlign'
+        };
+    }
+    OnInit() {
+        this.modify();
+    }
+    OnDestroy() {
+        this.clean();
+    }
+    OnUpdate() {
+        this.modify();
+    }
+    clean() {
+        this.setStyles({
+            'align-self': null
+        })(this.element);
+    }
+    modify() {
+        this.setStyles({
+            'align-self': this.value || null
+        })(this.element);
+    }
+}
+exports.FlexAlign = FlexAlign;
+//# sourceMappingURL=flex-align.js.map

package/dist/layout/flex-align.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flex-align.js","sourceRoot":"","sources":["../../src/layout/flex-align.ts"],"names":[],"mappings":";;;AAAA,gEAAqD;AAKrD,MAAa,SAAU,SAAQ,6BAAiB;IAC9C,MAAM,CAAC,OAAO;QACZ,OAAO;YACL,IAAI,EAAE,aAAa;SACpB,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAED,SAAS;QACP,IAAI,CAAC,KAAK,EAAE,CAAC;IACf,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAEO,KAAK;QACX,IAAI,CAAC,SAAS,CAAC;YACb,YAAY,EAAE,IAAI;SACnB,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnB,CAAC;IAEO,MAAM;QACZ,IAAI,CAAC,SAAS,CAAC;YACb,YAAY,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI;SACjC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnB,CAAC;CACF;AA9BD,8BA8BC"}

package/dist/layout/flex-fill.d.ts

@@ -0,0 +1,20 @@
+import { Attribute } from '@rhtml/custom-attributes';
+interface Styles {
+    margin: string;
+    width: string;
+    height: string;
+    'min-width': string;
+    'min-height': string;
+}
+export declare class FlexFill extends Attribute<Styles> {
+    static options(this: HTMLElement): {
+        name: string;
+    };
+    value: string;
+    OnInit(): void;
+    OnDestroy(): void;
+    OnUpdate(): void;
+    private clean;
+    private modify;
+}
+export {};

package/dist/layout/flex-fill.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlexFill = void 0;
+const custom_attributes_1 = require("@rhtml/custom-attributes");
+class FlexFill extends custom_attributes_1.Attribute {
+    constructor() {
+        super(...arguments);
+        this.value = '100%';
+    }
+    static options() {
+        return {
+            name: 'fxFlexFill'
+        };
+    }
+    OnInit() {
+        this.modify();
+    }
+    OnDestroy() {
+        this.clean();
+    }
+    OnUpdate() {
+        this.modify();
+    }
+    clean() {
+        this.setStyles({
+            height: null,
+            margin: null,
+            'min-height': null,
+            'min-width': null,
+            width: null
+        })(this.element);
+    }
+    modify() {
+        this.setStyles({
+            margin: '0',
+            height: this.value,
+            'min-height': this.value,
+            'min-width': this.value,
+            width: this.value
+        })(this.element);
+    }
+}
+exports.FlexFill = FlexFill;
+//# sourceMappingURL=flex-fill.js.map

package/dist/layout/flex-fill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flex-fill.js","sourceRoot":"","sources":["../../src/layout/flex-fill.ts"],"names":[],"mappings":";;;AAAA,gEAAqD;AAUrD,MAAa,QAAS,SAAQ,6BAAiB;IAA/C;;QAOE,UAAK,GAAG,MAAM,CAAC;IAiCjB,CAAC;IAvCC,MAAM,CAAC,OAAO;QACZ,OAAO;YACL,IAAI,EAAE,YAAY;SACnB,CAAC;IACJ,CAAC;IAID,MAAM;QACJ,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAED,SAAS;QACP,IAAI,CAAC,KAAK,EAAE,CAAC;IACf,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAEO,KAAK;QACX,IAAI,CAAC,SAAS,CAAC;YACb,MAAM,EAAE,IAAI;YACZ,MAAM,EAAE,IAAI;YACZ,YAAY,EAAE,IAAI;YAClB,WAAW,EAAE,IAAI;YACjB,KAAK,EAAE,IAAI;SACZ,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnB,CAAC;IAEO,MAAM;QACZ,IAAI,CAAC,SAAS,CAAC;YACb,MAAM,EAAE,GAAG;YACX,MAAM,EAAE,IAAI,CAAC,KAAK;YAClB,YAAY,EAAE,IAAI,CAAC,KAAK;YACxB,WAAW,EAAE,IAAI,CAAC,KAAK;YACvB,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnB,CAAC;CACF;AAxCD,4BAwCC"}

package/dist/layout/flex-offset.d.ts

@@ -0,0 +1,15 @@
+import { Attribute } from '@rhtml/custom-attributes';
+interface Styles {
+    'margin-left': string;
+}
+export declare class FlexOffset extends Attribute<Styles> {
+    static options(this: HTMLElement): {
+        name: string;
+    };
+    OnInit(): void;
+    OnDestroy(): void;
+    OnUpdate(): void;
+    private clean;
+    private modify;
+}
+export {};

package/dist/layout/flex-offset.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlexOffset = void 0;
+const custom_attributes_1 = require("@rhtml/custom-attributes");
+class FlexOffset extends custom_attributes_1.Attribute {
+    static options() {
+        return {
+            name: 'fxFlexOffset'
+        };
+    }
+    OnInit() {
+        this.modify();
+    }
+    OnDestroy() {
+        this.clean();
+    }
+    OnUpdate() {
+        this.modify();
+    }
+    clean() {
+        this.setStyles({
+            'margin-left': null
+        })(this.element);
+    }
+    modify() {
+        this.setStyles({
+            'margin-left': this.value || null
+        })(this.element);
+    }
+}
+exports.FlexOffset = FlexOffset;
+//# sourceMappingURL=flex-offset.js.map

package/dist/layout/flex-offset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flex-offset.js","sourceRoot":"","sources":["../../src/layout/flex-offset.ts"],"names":[],"mappings":";;;AAAA,gEAAqD;AAMrD,MAAa,UAAW,SAAQ,6BAAiB;IAC/C,MAAM,CAAC,OAAO;QACZ,OAAO;YACL,IAAI,EAAE,cAAc;SACrB,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAED,SAAS;QACP,IAAI,CAAC,KAAK,EAAE,CAAC;IACf,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAEO,KAAK;QACX,IAAI,CAAC,SAAS,CAAC;YACb,aAAa,EAAE,IAAI;SACpB,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnB,CAAC;IAEO,MAAM;QACZ,IAAI,CAAC,SAAS,CAAC;YACb,aAAa,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI;SAClC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnB,CAAC;CACF;AA9BD,gCA8BC"}

package/dist/layout/flex-order.d.ts

@@ -0,0 +1,15 @@
+import { Attribute } from '@rhtml/custom-attributes';
+interface Styles {
+    order: string;
+}
+export declare class FlexOrder extends Attribute<Styles> {
+    static options(this: HTMLElement): {
+        name: string;
+    };
+    OnInit(): void;
+    OnDestroy(): void;
+    OnUpdate(): void;
+    private clean;
+    private modify;
+}
+export {};

package/dist/layout/flex-order.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlexOrder = void 0;
+const custom_attributes_1 = require("@rhtml/custom-attributes");
+class FlexOrder extends custom_attributes_1.Attribute {
+    static options() {
+        return {
+            name: 'fxFlexOrder'
+        };
+    }
+    OnInit() {
+        this.modify();
+    }
+    OnDestroy() {
+        this.clean();
+    }
+    OnUpdate() {
+        this.modify();
+    }
+    clean() {
+        this.setStyles({
+            order: null
+        })(this.element);
+    }
+    modify() {
+        this.setStyles({
+            order: this.value || null
+        })(this.element);
+    }
+}
+exports.FlexOrder = FlexOrder;
+//# sourceMappingURL=flex-order.js.map

package/dist/layout/flex-order.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flex-order.js","sourceRoot":"","sources":["../../src/layout/flex-order.ts"],"names":[],"mappings":";;;AAAA,gEAAqD;AAMrD,MAAa,SAAU,SAAQ,6BAAiB;IAC9C,MAAM,CAAC,OAAO;QACZ,OAAO;YACL,IAAI,EAAE,aAAa;SACpB,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAED,SAAS;QACP,IAAI,CAAC,KAAK,EAAE,CAAC;IACf,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAEO,KAAK;QACX,IAAI,CAAC,SAAS,CAAC;YACb,KAAK,EAAE,IAAI;SACZ,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnB,CAAC;IAEO,MAAM;QACZ,IAAI,CAAC,SAAS,CAAC;YACb,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI;SAC1B,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnB,CAAC;CACF;AA9BD,8BA8BC"}

package/dist/layout/flex.d.ts

@@ -0,0 +1,17 @@
+import { Attribute } from '@rhtml/custom-attributes';
+interface Styles {
+    flex: string;
+    'box-sizing': string;
+    'max-width': string;
+}
+export declare class Flex extends Attribute<Styles> {
+    static options(this: HTMLElement): {
+        name: string;
+    };
+    OnInit(): void;
+    OnDestroy(): void;
+    OnUpdate(): void;
+    private clean;
+    private modify;
+}
+export {};

package/dist/layout/flex.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Flex = void 0;
+const custom_attributes_1 = require("@rhtml/custom-attributes");
+class Flex extends custom_attributes_1.Attribute {
+    static options() {
+        return {
+            name: 'fxFlex'
+        };
+    }
+    OnInit() {
+        this.modify();
+    }
+    OnDestroy() {
+        this.clean();
+    }
+    OnUpdate() {
+        this.modify();
+    }
+    clean() {
+        this.setStyles({
+            'box-sizing': null,
+            'max-width': null,
+            flex: null
+        })(this.element);
+    }
+    modify() {
+        this.setStyles({
+            'box-sizing': 'border-box',
+            'max-width': this.value || null,
+            flex: '1 1 100%'
+        })(this.element);
+    }
+}
+exports.Flex = Flex;
+//# sourceMappingURL=flex.js.map

package/dist/layout/flex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flex.js","sourceRoot":"","sources":["../../src/layout/flex.ts"],"names":[],"mappings":";;;AAAA,gEAAqD;AAQrD,MAAa,IAAK,SAAQ,6BAAiB;IACzC,MAAM,CAAC,OAAO;QACZ,OAAO;YACL,IAAI,EAAE,QAAQ;SACf,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAED,SAAS;QACP,IAAI,CAAC,KAAK,EAAE,CAAC;IACf,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAEO,KAAK;QACX,IAAI,CAAC,SAAS,CAAC;YACb,YAAY,EAAE,IAAI;YAClB,WAAW,EAAE,IAAI;YACjB,IAAI,EAAE,IAAI;SACX,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnB,CAAC;IAEO,MAAM;QACZ,IAAI,CAAC,SAAS,CAAC;YACb,YAAY,EAAE,YAAY;YAC1B,WAAW,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI;YAC/B,IAAI,EAAE,UAAU;SACjB,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnB,CAAC;CACF;AAlCD,oBAkCC"}

package/dist/layout/index.d.ts

@@ -1,11 +1,10 @@
-import { LitElement, OnDestroy, OnUpdateFirst, TemplateResult } from '@rxdi/lit-html';
-export declare class FlexLayout extends LitElement implements OnUpdateFirst, OnDestroy {
-    static modifier(template: TemplateResult): TemplateResult;
-    parent: LitElement;
-    private container;
-    private observer;
-    OnUpdateFirst(): void;
-    OnDestroy(): void;
-    private listenForTreeChanges;
-    private triggerChanges;
-}
+import { Flex } from './flex';
+import { FlexAlign } from './flex-align';
+import { FlexFill } from './flex-fill';
+import { FlexOffset } from './flex-offset';
+import { FlexOrder } from './flex-order';
+import { Layout } from './layout';
+import { LayoutAlign } from './layout-align';
+import { LayoutGap } from './layout-gap';
+export * from './layout';
+export declare const FlexLayout: (typeof Flex | typeof FlexAlign | typeof FlexFill | typeof FlexOffset | typeof FlexOrder | typeof Layout | typeof LayoutAlign | typeof LayoutGap)[];