@rhtml/modifiers 0.0.96 → 0.0.99

package/dist/layout/index.js

@@ -1,61 +1,33 @@
 "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);
+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.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 {
-    /* Keep in mind that `this` here is the parent component where modifier will be used */
-    static modifier(template) {
-        return lit_html_1.html `
-      <flex-layout .parent=${this}>${template}</flex-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()) {
-            modifiers_1.recursion.call(this.parent, div);
-        }
-    }
-};
-__decorate([
-    lit_html_1.property(),
-    __metadata("design:type", lit_html_1.LitElement)
-], FlexLayout.prototype, "parent", void 0);
-__decorate([
-    lit_html_1.query('slot'),
-    __metadata("design:type", HTMLSlotElement)
-], FlexLayout.prototype, "container", void 0);
-FlexLayout = __decorate([
-    lit_html_1.Component({
-        selector: 'flex-layout',
-        template() {
-            return lit_html_1.html `
-      <slot></slot>
-    `;
-        }
-    })
-], FlexLayout);
-exports.FlexLayout = FlexLayout;
+const flex_1 = require("./flex");
+const flex_align_1 = require("./flex-align");
+const flex_fill_1 = require("./flex-fill");
+const flex_offset_1 = require("./flex-offset");
+const flex_order_1 = require("./flex-order");
+const layout_1 = require("./layout");
+const layout_align_1 = require("./layout-align");
+const layout_gap_1 = require("./layout-gap");
+__exportStar(require("./layout"), exports);
+exports.FlexLayout = [
+    layout_1.Layout,
+    layout_align_1.LayoutAlign,
+    layout_gap_1.LayoutGap,
+    flex_fill_1.FlexFill,
+    flex_1.Flex,
+    flex_align_1.FlexAlign,
+    flex_offset_1.FlexOffset,
+    flex_order_1.FlexOrder
+];
 //# sourceMappingURL=index.js.map

package/dist/layout/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,6CASwB;AAExB,2CAAwC;AAUxC,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,qBAAU;IACxC,uFAAuF;IAChF,MAAM,CAAC,QAAQ,CAAC,QAAwB;QAC7C,OAAO,eAAI,CAAA;6BACc,IAAI,IAAI,QAAQ;KACxC,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,qBAAS,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;SAClC;IACH,CAAC;CACF,CAAA;AA7BC;IADC,mBAAQ,EAAE;8BACI,qBAAU;0CAAC;AAG1B;IADC,gBAAK,CAAC,MAAM,CAAC;8BACK,eAAe;6CAAC;AAZxB,UAAU;IARtB,oBAAS,CAAC;QACT,QAAQ,EAAE,aAAa;QACvB,QAAQ;YACN,OAAO,eAAI,CAAA;;KAEV,CAAC;QACJ,CAAC;KACF,CAAC;GACW,UAAU,CAsCtB;AAtCY,gCAAU"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,iCAA8B;AAC9B,6CAAyC;AACzC,2CAAuC;AACvC,+CAA2C;AAC3C,6CAAyC;AACzC,qCAAkC;AAClC,iDAA6C;AAC7C,6CAAyC;AAEzC,2CAAyB;AAEZ,QAAA,UAAU,GAAG;IACxB,eAAM;IACN,0BAAW;IACX,sBAAS;IACT,oBAAQ;IACR,WAAI;IACJ,sBAAS;IACT,wBAAU;IACV,sBAAS;CACV,CAAC"}

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

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

package/dist/layout/layout-align.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LayoutAlign = void 0;
+const custom_attributes_1 = require("@rhtml/custom-attributes");
+class LayoutAlign extends custom_attributes_1.Attribute {
+    static options() {
+        return {
+            name: 'fxLayoutAlign'
+        };
+    }
+    OnInit() {
+        this.modify();
+    }
+    OnDestroy() {
+        this.clean();
+    }
+    OnUpdate() {
+        this.modify();
+    }
+    clean() {
+        this.setStyles({
+            'align-items': null,
+            'place-content': null,
+            display: null
+        })(this.element);
+    }
+    modify() {
+        const [mainAxis, crossAxis] = this.value.split(' ');
+        this.setStyles({
+            'align-items': crossAxis ? crossAxis : mainAxis,
+            'place-content': crossAxis
+                ? `${crossAxis} ${mainAxis}`
+                : `${mainAxis} ${mainAxis}`,
+            display: 'flex'
+        })(this.element);
+    }
+}
+exports.LayoutAlign = LayoutAlign;
+//# sourceMappingURL=layout-align.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"layout-align.js","sourceRoot":"","sources":["../../src/layout/layout-align.ts"],"names":[],"mappings":";;;AAAA,gEAAqD;AAQrD,MAAa,WAAY,SAAQ,6BAAiB;IAChD,MAAM,CAAC,OAAO;QACZ,OAAO;YACL,IAAI,EAAE,eAAe;SACtB,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;YACnB,eAAe,EAAE,IAAI;YACrB,OAAO,EAAE,IAAI;SACd,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnB,CAAC;IAEO,MAAM;QACZ,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QACpD,IAAI,CAAC,SAAS,CAAC;YACb,aAAa,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;YAC/C,eAAe,EAAE,SAAS;gBACxB,CAAC,CAAC,GAAG,SAAS,IAAI,QAAQ,EAAE;gBAC5B,CAAC,CAAC,GAAG,QAAQ,IAAI,QAAQ,EAAE;YAC7B,OAAO,EAAE,MAAM;SAChB,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnB,CAAC;CACF;AArCD,kCAqCC"}

package/dist/layout/layout-gap.d.ts

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

package/dist/layout/layout-gap.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LayoutGap = void 0;
+const custom_attributes_1 = require("@rhtml/custom-attributes");
+class LayoutGap extends custom_attributes_1.Attribute {
+    static options() {
+        return {
+            name: 'fxLayoutGap'
+        };
+    }
+    OnInit() {
+        this.modify();
+        this.observer = new MutationObserver(() => this.modify());
+        this.observer.observe(this.element, {
+            childList: true,
+            subtree: true
+        });
+    }
+    OnDestroy() {
+        this.clean();
+        this.observer.disconnect();
+    }
+    OnUpdate() {
+        this.modify();
+    }
+    clean() {
+        const divs = [...this.element.children];
+        for (const div of divs) {
+            this.setStyles({
+                flex: null,
+                margin: null
+            })(div);
+        }
+    }
+    modify() {
+        const divs = this.element.children;
+        for (const div of divs) {
+            this.setStyles({
+                flex: '1 1 25%',
+                margin: `0px ${this.value} ${this.value} 0px`
+            })(div);
+        }
+    }
+}
+exports.LayoutGap = LayoutGap;
+//# sourceMappingURL=layout-gap.js.map

package/dist/layout/layout-gap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-gap.js","sourceRoot":"","sources":["../../src/layout/layout-gap.ts"],"names":[],"mappings":";;;AAAA,gEAAqD;AAOrD,MAAa,SAAU,SAAQ,6BAAiB;IAC9C,MAAM,CAAC,OAAO;QACZ,OAAO;YACL,IAAI,EAAE,aAAa;SACpB,CAAC;IACJ,CAAC;IAID,MAAM;QACJ,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QAC1D,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE;YAClC,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;IACL,CAAC;IAED,SAAS;QACP,IAAI,CAAC,KAAK,EAAE,CAAC;QACb,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IAC7B,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAEO,KAAK;QACX,MAAM,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAkB,CAAC;QACzD,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE;YACtB,IAAI,CAAC,SAAS,CAAC;gBACb,IAAI,EAAE,IAAI;gBACV,MAAM,EAAE,IAAI;aACb,CAAC,CAAC,GAAG,CAAC,CAAC;SACT;IACH,CAAC;IAEO,MAAM;QACZ,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC;QACnC,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE;YACtB,IAAI,CAAC,SAAS,CAAC;gBACb,IAAI,EAAE,SAAS;gBACf,MAAM,EAAE,OAAO,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,MAAM;aAC9C,CAAC,CAAC,GAAG,CAAC,CAAC;SACT;IACH,CAAC;CACF;AA9CD,8BA8CC"}

package/dist/layout/layout.d.ts

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

package/dist/layout/layout.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Layout = void 0;
+const custom_attributes_1 = require("@rhtml/custom-attributes");
+class Layout extends custom_attributes_1.Attribute {
+    constructor() {
+        super(...arguments);
+        this.value = 'row';
+    }
+    static options() {
+        return {
+            name: 'fxLayout',
+            registry: new custom_attributes_1.CustomAttributeRegistry(this.shadowRoot)
+        };
+    }
+    OnInit() {
+        this.modify();
+    }
+    OnDestroy() {
+        this.clean();
+    }
+    OnUpdate() {
+        this.modify();
+    }
+    clean() {
+        this.setStyles({
+            'box-sizing': null,
+            'flex-flow': null,
+            display: null
+        })(this.element);
+    }
+    modify() {
+        const splitted = this.value.split(' ');
+        const [mainAxis, crossAxis] = splitted;
+        this.setStyles({
+            'box-sizing': 'flex',
+            'flex-flow': splitted.length > 1 ? `${mainAxis} ${crossAxis}` : mainAxis,
+            display: 'flex'
+        })(this.element);
+    }
+}
+exports.Layout = Layout;
+//# sourceMappingURL=layout.js.map

package/dist/layout/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../src/layout/layout.ts"],"names":[],"mappings":";;;AAAA,gEAA8E;AAQ9E,MAAa,MAAO,SAAQ,6BAAiB;IAA7C;;QACE,UAAK,GAAG,KAAK,CAAC;IAoChB,CAAC;IAnCC,MAAM,CAAC,OAAO;QACZ,OAAO;YACL,IAAI,EAAE,UAAU;YAChB,QAAQ,EAAE,IAAI,2CAAuB,CAAC,IAAI,CAAC,UAAU,CAAC;SACvD,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,OAAO,EAAE,IAAI;SACd,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnB,CAAC;IACO,MAAM;QACZ,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QACvC,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC;QACvC,IAAI,CAAC,SAAS,CAAC;YACb,YAAY,EAAE,MAAM;YACpB,WAAW,EAAE,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,QAAQ,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,QAAQ;YACxE,OAAO,EAAE,MAAM;SAChB,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnB,CAAC;CACF;AArCD,wBAqCC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rhtml/modifiers",
-  "version": "0.0.96",
+  "version": "0.0.99",
   "description": "Reactive HyperText Markup Language",
   "scripts": {
     "start": "npx parcel ./examples/index.html --out-dir build/examples",
@@ -16,7 +16,8 @@
     "url": "git@github.com:rhtml/rhtml.git"
   },
   "dependencies": {
-    "@rxdi/lit-html": "^0.7.133"
+    "@rxdi/lit-html": "^0.7.133",
+    "@rhtml/custom-attributes": "0.0.99"
   },
   "devDependencies": {
     "eslint": "^6.7.2",

package/src/angular/if.ts

@@ -0,0 +1,29 @@
+import { Attribute, CustomAttributeRegistry } from '@rhtml/custom-attributes';
+
+export class IfOperator extends Attribute {
+  static options(this: HTMLElement) {
+    return {
+      name: 'ngIf',
+      registry: new 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';
+    }
+  }
+}

package/src/angular/index.ts

@@ -1,82 +1,3 @@
-import {
-  Component,
-  html,
-  LitElement,
-  OnDestroy,
-  OnUpdateFirst,
-  property,
-  query,
-  TemplateResult
-} from '@rxdi/lit-html';
+import { IfOperator } from './if';
 
-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
-  implements OnUpdateFirst, OnDestroy {
-  /* Keep in mind that `this` here is the parent component where modifier will be used */
-  public static modifier(template: TemplateResult): TemplateResult {
-    return html`
-      <angular-layout .parent=${this}>${template}</angular-layout>
-    `;
-  }
-
-  @property()
-  public parent: LitElement;
-
-  @query('slot')
-  private container: HTMLSlotElement;
-
-  private observer: MutationObserver;
-
-  OnUpdateFirst() {
-    this.triggerChanges();
-    this.listenForTreeChanges();
-  }
-
-  OnDestroy() {
-    this.observer.disconnect();
-  }
-
-  private listenForTreeChanges() {
-    this.observer = new MutationObserver(() => this.triggerChanges());
-    this.observer.observe(this.parent.shadowRoot, {
-      subtree: true,
-      childList: true
-    });
-  }
-
-  private triggerChanges() {
-    for (const div of this.container.assignedElements()) {
-      recursion.call(this.parent, div);
-    }
-  }
-}
+export const AngularLayout = [IfOperator];

package/src/index.ts

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

package/src/layout/flex-align.ts

@@ -0,0 +1,36 @@
+import { Attribute } from '@rhtml/custom-attributes';
+
+interface Styles {
+  'align-self': string;
+}
+export class FlexAlign extends Attribute<Styles> {
+  static options(this: HTMLElement) {
+    return {
+      name: 'fxFlexAlign'
+    };
+  }
+
+  OnInit() {
+    this.modify();
+  }
+
+  OnDestroy() {
+    this.clean();
+  }
+
+  OnUpdate() {
+    this.modify();
+  }
+
+  private clean() {
+    this.setStyles({
+      'align-self': null
+    })(this.element);
+  }
+
+  private modify() {
+    this.setStyles({
+      'align-self': this.value || null
+    })(this.element);
+  }
+}

package/src/layout/flex-fill.ts

@@ -0,0 +1,51 @@
+import { Attribute } from '@rhtml/custom-attributes';
+
+interface Styles {
+  margin: string;
+  width: string;
+  height: string;
+  'min-width': string;
+  'min-height': string;
+}
+
+export class FlexFill extends Attribute<Styles> {
+  static options(this: HTMLElement) {
+    return {
+      name: 'fxFlexFill'
+    };
+  }
+
+  value = '100%';
+
+  OnInit() {
+    this.modify();
+  }
+
+  OnDestroy() {
+    this.clean();
+  }
+
+  OnUpdate() {
+    this.modify();
+  }
+
+  private clean() {
+    this.setStyles({
+      height: null,
+      margin: null,
+      'min-height': null,
+      'min-width': null,
+      width: null
+    })(this.element);
+  }
+
+  private modify() {
+    this.setStyles({
+      margin: '0',
+      height: this.value,
+      'min-height': this.value,
+      'min-width': this.value,
+      width: this.value
+    })(this.element);
+  }
+}

package/src/layout/flex-offset.ts

@@ -0,0 +1,37 @@
+import { Attribute } from '@rhtml/custom-attributes';
+
+interface Styles {
+  'margin-left': string;
+}
+
+export class FlexOffset extends Attribute<Styles> {
+  static options(this: HTMLElement) {
+    return {
+      name: 'fxFlexOffset'
+    };
+  }
+
+  OnInit() {
+    this.modify();
+  }
+
+  OnDestroy() {
+    this.clean();
+  }
+
+  OnUpdate() {
+    this.modify();
+  }
+
+  private clean() {
+    this.setStyles({
+      'margin-left': null
+    })(this.element);
+  }
+
+  private modify() {
+    this.setStyles({
+      'margin-left': this.value || null
+    })(this.element);
+  }
+}

package/src/layout/flex-order.ts

@@ -0,0 +1,37 @@
+import { Attribute } from '@rhtml/custom-attributes';
+
+interface Styles {
+  order: string;
+}
+
+export class FlexOrder extends Attribute<Styles> {
+  static options(this: HTMLElement) {
+    return {
+      name: 'fxFlexOrder'
+    };
+  }
+
+  OnInit() {
+    this.modify();
+  }
+
+  OnDestroy() {
+    this.clean();
+  }
+
+  OnUpdate() {
+    this.modify();
+  }
+
+  private clean() {
+    this.setStyles({
+      order: null
+    })(this.element);
+  }
+
+  private modify() {
+    this.setStyles({
+      order: this.value || null
+    })(this.element);
+  }
+}

package/src/layout/flex.ts

@@ -0,0 +1,43 @@
+import { Attribute } from '@rhtml/custom-attributes';
+
+interface Styles {
+  flex: string;
+  'box-sizing': string;
+  'max-width': string;
+}
+
+export class Flex extends Attribute<Styles> {
+  static options(this: HTMLElement) {
+    return {
+      name: 'fxFlex'
+    };
+  }
+
+  OnInit() {
+    this.modify();
+  }
+
+  OnDestroy() {
+    this.clean();
+  }
+
+  OnUpdate() {
+    this.modify();
+  }
+
+  private clean() {
+    this.setStyles({
+      'box-sizing': null,
+      'max-width': null,
+      flex: null
+    })(this.element);
+  }
+
+  private modify() {
+    this.setStyles({
+      'box-sizing': 'border-box',
+      'max-width': this.value || null,
+      flex: '1 1 100%'
+    })(this.element);
+  }
+}