@rhtml/modifiers 0.0.103 → 0.0.104

package/dist/angular/if.js

@@ -31,7 +31,7 @@ IfOperator = __decorate([
     custom_attributes_1.Modifier({
         selector: 'ngIf',
         registry() {
-            return new custom_attributes_1.CustomAttributeRegistry(this.shadowRoot);
+            return new custom_attributes_1.CustomAttributeRegistry(this);
         }
     })
 ], IfOperator);

package/dist/angular/if.js.map

@@ -1 +1 @@
-{"version":3,"file":"if.js","sourceRoot":"","sources":["../../src/angular/if.ts"],"names":[],"mappings":";;;;;;;;;AAAA,gEAIkC;AAQlC,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,6BAAS;IACvC,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,CAAA;AApBY,UAAU;IANtB,4BAAQ,CAAC;QACR,QAAQ,EAAE,MAAM;QAChB,QAAQ;YACN,OAAO,IAAI,2CAAuB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACtD,CAAC;KACF,CAAC;GACW,UAAU,CAoBtB;AApBY,gCAAU"}
+{"version":3,"file":"if.js","sourceRoot":"","sources":["../../src/angular/if.ts"],"names":[],"mappings":";;;;;;;;;AAAA,gEAIkC;AAQlC,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,6BAAS;IACvC,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,CAAA;AApBY,UAAU;IANtB,4BAAQ,CAAC;QACR,QAAQ,EAAE,MAAM;QAChB,QAAQ;YACN,OAAO,IAAI,2CAAuB,CAAC,IAAI,CAAC,CAAC;QAC3C,CAAC;KACF,CAAC;GACW,UAAU,CAoBtB;AApBY,gCAAU"}

package/dist/angular/index.d.ts

@@ -1,2 +1,2 @@
-import { IfOperator } from './if';
-export declare const AngularLayout: (typeof IfOperator)[];
+import { Registry } from './registry';
+export declare const AngularLayout: (typeof Registry)[];

package/dist/angular/index.js

@@ -2,5 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AngularLayout = void 0;
 const if_1 = require("./if");
-exports.AngularLayout = [if_1.IfOperator];
+const ng_for_1 = require("./ng-for");
+const registry_1 = require("./registry");
+exports.AngularLayout = [registry_1.Registry, if_1.IfOperator, ng_for_1.NgFor];
 //# 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,6BAAkC;AAErB,QAAA,aAAa,GAAG,CAAC,eAAU,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/angular/index.ts"],"names":[],"mappings":";;;AAAA,6BAAkC;AAClC,qCAAiC;AACjC,yCAAsC;AAEzB,QAAA,aAAa,GAAG,CAAC,mBAAQ,EAAE,eAAU,EAAE,cAAK,CAAC,CAAC"}

package/dist/angular/ng-for.d.ts

@@ -0,0 +1,10 @@
+import { Attribute } from '@rhtml/custom-attributes';
+export declare class NgFor extends Attribute {
+    ngFor: string;
+    regexes: RegExp[];
+    OnInit(): void;
+    OnDestroy(): void;
+    OnUpdate(): void;
+    private interpolate;
+    modify(): void;
+}

package/dist/angular/ng-for.js

@@ -0,0 +1,59 @@
+"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.NgFor = void 0;
+const custom_attributes_1 = require("@rhtml/custom-attributes");
+const lit_html_1 = require("@rxdi/lit-html");
+let NgFor = class NgFor extends custom_attributes_1.Attribute {
+    constructor() {
+        super(...arguments);
+        this.regexes = [/\${[^{]+}/g, /\@\{(.*?)(?!\@\{)\}/g, /{([^}]+)}/g];
+    }
+    OnInit() {
+        this.modify();
+    }
+    OnDestroy() {
+        //
+    }
+    OnUpdate() {
+        this.modify();
+    }
+    interpolate(object, string) {
+        return string.replace(this.regexes[2], match => match
+            .slice(2, -1)
+            .trim()
+            .split('.')
+            .reduce((el, k) => String(el[k]), object));
+    }
+    modify() {
+        const [, , , items] = this.ngFor.split(' ');
+        const template = this.element.innerHTML;
+        this.element.innerHTML = '';
+        lit_html_1.render(lit_html_1.html `
+        <r-for .of=${this.parent[items]}>
+          <r-let
+            .item=${i => lit_html_1.unsafeHTML(this.interpolate(i, template))}
+          ></r-let>
+        </r-for>
+      `, this.element);
+    }
+};
+__decorate([
+    custom_attributes_1.Input(),
+    __metadata("design:type", String)
+], NgFor.prototype, "ngFor", void 0);
+NgFor = __decorate([
+    custom_attributes_1.Modifier({
+        selector: 'ngFor'
+    })
+], NgFor);
+exports.NgFor = NgFor;
+//# sourceMappingURL=ng-for.js.map

package/dist/angular/ng-for.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ng-for.js","sourceRoot":"","sources":["../../src/angular/ng-for.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,gEAAsE;AACtE,6CAA0D;AAK1D,IAAa,KAAK,GAAlB,MAAa,KAAM,SAAQ,6BAAS;IAApC;;QAIE,YAAO,GAAG,CAAC,YAAY,EAAE,sBAAsB,EAAE,YAAY,CAAC,CAAC;IAuCjE,CAAC;IArCC,MAAM;QACJ,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAED,SAAS;QACP,EAAE;IACJ,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAEO,WAAW,CAAC,MAAM,EAAE,MAAc;QACxC,OAAO,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,CAC7C,KAAK;aACF,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;aACZ,IAAI,EAAE;aACN,KAAK,CAAC,GAAG,CAAC;aACV,MAAM,CAAC,CAAC,EAAE,EAAE,CAAS,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CACpD,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,CAAC,EAAE,AAAD,EAAG,AAAD,EAAG,KAAK,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAC5C,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC;QACxC,IAAI,CAAC,OAAO,CAAC,SAAS,GAAG,EAAE,CAAC;QAC5B,iBAAM,CACJ,eAAI,CAAA;qBACW,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;;oBAEnB,CAAC,CAAC,EAAE,CAAC,qBAAU,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC;;;OAG3D,EACD,IAAI,CAAC,OAAO,CACb,CAAC;IACJ,CAAC;CACF,CAAA;AAzCC;IADC,yBAAK,EAAE;;oCACM;AAFH,KAAK;IAHjB,4BAAQ,CAAC;QACR,QAAQ,EAAE,OAAO;KAClB,CAAC;GACW,KAAK,CA2CjB;AA3CY,sBAAK"}

package/dist/angular/registry.d.ts

@@ -0,0 +1,3 @@
+import { Attribute } from '@rhtml/custom-attributes';
+export declare class Registry extends Attribute {
+}

package/dist/angular/registry.js

@@ -0,0 +1,22 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Registry = void 0;
+const custom_attributes_1 = require("@rhtml/custom-attributes");
+let Registry = class Registry extends custom_attributes_1.Attribute {
+};
+Registry = __decorate([
+    custom_attributes_1.Modifier({
+        selector: 'registry',
+        registry() {
+            return new custom_attributes_1.CustomAttributeRegistry(this);
+        }
+    })
+], Registry);
+exports.Registry = Registry;
+//# sourceMappingURL=registry.js.map

package/dist/angular/registry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.js","sourceRoot":"","sources":["../../src/angular/registry.ts"],"names":[],"mappings":";;;;;;;;;AAAA,gEAIkC;AAQlC,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,6BAAS;CAAG,CAAA;AAA7B,QAAQ;IANpB,4BAAQ,CAAC;QACR,QAAQ,EAAE,UAAU;QACpB,QAAQ;YACN,OAAO,IAAI,2CAAuB,CAAC,IAAI,CAAC,CAAC;QAC3C,CAAC;KACF,CAAC;GACW,QAAQ,CAAqB;AAA7B,4BAAQ"}

package/dist/layout/index.d.ts

@@ -1,10 +1,6 @@
 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';
+import { Registry } from './registry';
 export * from './layout';
-export declare const FlexLayout: (typeof Flex | typeof FlexAlign | typeof FlexFill | typeof FlexOffset | typeof FlexOrder | typeof Layout | typeof LayoutAlign | typeof LayoutGap)[];
+export declare const FlexLayout: (typeof Flex | typeof FlexFill | typeof FlexOrder | typeof Registry)[];

package/dist/layout/index.js

@@ -19,8 +19,10 @@ 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");
+const registry_1 = require("./registry");
 __exportStar(require("./layout"), exports);
 exports.FlexLayout = [
+    registry_1.Registry,
     layout_1.Layout,
     layout_align_1.LayoutAlign,
     layout_gap_1.LayoutGap,

package/dist/layout/index.js.map

@@ -1 +1 @@
-{"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"}
+{"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;AACzC,yCAAsC;AAEtC,2CAAyB;AAEZ,QAAA,UAAU,GAAG;IACxB,mBAAQ;IACR,eAAM;IACN,0BAAW;IACX,sBAAS;IACT,oBAAQ;IACR,WAAI;IACJ,sBAAS;IACT,wBAAU;IACV,sBAAS;CACV,CAAC"}

package/dist/layout/layout.js

@@ -41,10 +41,7 @@ let Layout = class Layout extends custom_attributes_1.Attribute {
 };
 Layout = __decorate([
     custom_attributes_1.Modifier({
-        selector: 'fxLayout',
-        registry() {
-            return new custom_attributes_1.CustomAttributeRegistry(this.shadowRoot);
-        }
+        selector: 'fxLayout'
     })
 ], Layout);
 exports.Layout = Layout;

package/dist/layout/layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../src/layout/layout.ts"],"names":[],"mappings":";;;;;;;;;AAAA,gEAIkC;AAclC,IAAa,MAAM,GAAnB,MAAa,MAAO,SAAQ,6BAAiB;IAA7C;;QACE,UAAK,GAAG,KAAK,CAAC;IA8BhB,CAAC;IA5BC,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,CAAA;AA/BY,MAAM;IANlB,4BAAQ,CAAC;QACR,QAAQ,EAAE,UAAU;QACpB,QAAQ;YACN,OAAO,IAAI,2CAAuB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACtD,CAAC;KACF,CAAC;GACW,MAAM,CA+BlB;AA/BY,wBAAM"}
+{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../src/layout/layout.ts"],"names":[],"mappings":";;;;;;;;;AAAA,gEAA+D;AAW/D,IAAa,MAAM,GAAnB,MAAa,MAAO,SAAQ,6BAAiB;IAA7C;;QACE,UAAK,GAAG,KAAK,CAAC;IA8BhB,CAAC;IA5BC,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,CAAA;AA/BY,MAAM;IAHlB,4BAAQ,CAAC;QACR,QAAQ,EAAE,UAAU;KACrB,CAAC;GACW,MAAM,CA+BlB;AA/BY,wBAAM"}

package/dist/layout/registry.d.ts

@@ -0,0 +1,3 @@
+import { Attribute } from '@rhtml/custom-attributes';
+export declare class Registry extends Attribute {
+}

package/dist/layout/registry.js

@@ -0,0 +1,22 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Registry = void 0;
+const custom_attributes_1 = require("@rhtml/custom-attributes");
+let Registry = class Registry extends custom_attributes_1.Attribute {
+};
+Registry = __decorate([
+    custom_attributes_1.Modifier({
+        selector: 'registry',
+        registry() {
+            return new custom_attributes_1.CustomAttributeRegistry(this);
+        }
+    })
+], Registry);
+exports.Registry = Registry;
+//# sourceMappingURL=registry.js.map

package/dist/layout/registry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.js","sourceRoot":"","sources":["../../src/layout/registry.ts"],"names":[],"mappings":";;;;;;;;;AAAA,gEAIkC;AAQlC,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,6BAAS;CAAG,CAAA;AAA7B,QAAQ;IANpB,4BAAQ,CAAC;QACR,QAAQ,EAAE,UAAU;QACpB,QAAQ;YACN,OAAO,IAAI,2CAAuB,CAAC,IAAI,CAAC,CAAC;QAC3C,CAAC;KACF,CAAC;GACW,QAAQ,CAAqB;AAA7B,4BAAQ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rhtml/modifiers",
-  "version": "0.0.103",
+  "version": "0.0.104",
   "description": "Reactive HyperText Markup Language",
   "scripts": {
     "start": "npx parcel ./examples/index.html --out-dir build/examples",
@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@rxdi/lit-html": "^0.7.133",
-    "@rhtml/custom-attributes": "0.0.103"
+    "@rhtml/custom-attributes": "0.0.104"
   },
   "devDependencies": {
     "eslint": "^6.7.2",

package/src/angular/if.ts

@@ -7,7 +7,7 @@ import {
 @Modifier({
   selector: 'ngIf',
   registry(this) {
-    return new CustomAttributeRegistry(this.shadowRoot);
+    return new CustomAttributeRegistry(this);
   }
 })
 export class IfOperator extends Attribute {

package/src/angular/index.ts

@@ -1,3 +1,5 @@
 import { IfOperator } from './if';
+import { NgFor } from './ng-for';
+import { Registry } from './registry';
 
-export const AngularLayout = [IfOperator];
+export const AngularLayout = [Registry, IfOperator, NgFor];

package/src/angular/ng-for.ts

@@ -0,0 +1,50 @@
+import { Attribute, Input, Modifier } from '@rhtml/custom-attributes';
+import { html, render, unsafeHTML } from '@rxdi/lit-html';
+
+@Modifier({
+  selector: 'ngFor'
+})
+export class NgFor extends Attribute {
+  @Input()
+  ngFor: string;
+
+  regexes = [/\${[^{]+}/g, /\@\{(.*?)(?!\@\{)\}/g, /{([^}]+)}/g];
+
+  OnInit() {
+    this.modify();
+  }
+
+  OnDestroy() {
+    //
+  }
+
+  OnUpdate() {
+    this.modify();
+  }
+
+  private interpolate(object, string: string) {
+    return string.replace(this.regexes[2], match =>
+      match
+        .slice(2, -1)
+        .trim()
+        .split('.')
+        .reduce((el, k: string) => String(el[k]), object)
+    );
+  }
+
+  modify() {
+    const [, , , items] = this.ngFor.split(' ');
+    const template = this.element.innerHTML;
+    this.element.innerHTML = '';
+    render(
+      html`
+        <r-for .of=${this.parent[items]}>
+          <r-let
+            .item=${i => unsafeHTML(this.interpolate(i, template))}
+          ></r-let>
+        </r-for>
+      `,
+      this.element
+    );
+  }
+}

package/src/angular/registry.ts

@@ -0,0 +1,13 @@
+import {
+  Attribute,
+  CustomAttributeRegistry,
+  Modifier
+} from '@rhtml/custom-attributes';
+
+@Modifier({
+  selector: 'registry',
+  registry(this) {
+    return new CustomAttributeRegistry(this);
+  }
+})
+export class Registry extends Attribute {}

package/src/layout/index.ts

@@ -6,10 +6,12 @@ import { FlexOrder } from './flex-order';
 import { Layout } from './layout';
 import { LayoutAlign } from './layout-align';
 import { LayoutGap } from './layout-gap';
+import { Registry } from './registry';
 
 export * from './layout';
 
 export const FlexLayout = [
+  Registry,
   Layout,
   LayoutAlign,
   LayoutGap,

package/src/layout/layout.ts

@@ -1,8 +1,4 @@
-import {
-  Attribute,
-  CustomAttributeRegistry,
-  Modifier
-} from '@rhtml/custom-attributes';
+import { Attribute, Modifier } from '@rhtml/custom-attributes';
 
 interface Styles {
   'flex-flow': string;
@@ -11,10 +7,7 @@ interface Styles {
 }
 
 @Modifier({
-  selector: 'fxLayout',
-  registry(this) {
-    return new CustomAttributeRegistry(this.shadowRoot);
-  }
+  selector: 'fxLayout'
 })
 export class Layout extends Attribute<Styles> {
   value = 'row';

package/src/layout/registry.ts

@@ -0,0 +1,13 @@
+import {
+  Attribute,
+  CustomAttributeRegistry,
+  Modifier
+} from '@rhtml/custom-attributes';
+
+@Modifier({
+  selector: 'registry',
+  registry(this) {
+    return new CustomAttributeRegistry(this);
+  }
+})
+export class Registry extends Attribute {}