@rhtml/modifiers 0.0.101 → 0.0.104

package/dist/angular/if.d.ts

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

package/dist/angular/if.js

@@ -1,14 +1,14 @@
 "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.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)
-        };
-    }
+let IfOperator = class IfOperator extends custom_attributes_1.Attribute {
     OnInit() {
         this.setColor();
     }
@@ -26,6 +26,14 @@ class IfOperator extends custom_attributes_1.Attribute {
             this.element.style.display = 'none';
         }
     }
-}
+};
+IfOperator = __decorate([
+    custom_attributes_1.Modifier({
+        selector: 'ngIf',
+        registry() {
+            return new custom_attributes_1.CustomAttributeRegistry(this);
+        }
+    })
+], IfOperator);
 exports.IfOperator = IfOperator;
 //# sourceMappingURL=if.js.map

package/dist/angular/if.js.map

@@ -1 +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"}
+{"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/flex-align.d.ts

@@ -3,9 +3,6 @@ interface Styles {
     'align-self': string;
 }
 export declare class FlexAlign extends Attribute<Styles> {
-    static options(this: HTMLElement): {
-        name: string;
-    };
     OnInit(): void;
     OnDestroy(): void;
     OnUpdate(): void;

package/dist/layout/flex-align.js

@@ -1,13 +1,14 @@
 "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.FlexAlign = void 0;
 const custom_attributes_1 = require("@rhtml/custom-attributes");
-class FlexAlign extends custom_attributes_1.Attribute {
-    static options() {
-        return {
-            name: 'fxFlexAlign'
-        };
-    }
+let FlexAlign = class FlexAlign extends custom_attributes_1.Attribute {
     OnInit() {
         this.modify();
     }
@@ -27,6 +28,11 @@ class FlexAlign extends custom_attributes_1.Attribute {
             'align-self': this.value || null
         })(this.element);
     }
-}
+};
+FlexAlign = __decorate([
+    custom_attributes_1.Modifier({
+        selector: 'fxFlexAlign'
+    })
+], FlexAlign);
 exports.FlexAlign = FlexAlign;
 //# sourceMappingURL=flex-align.js.map

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

@@ -1 +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"}
+{"version":3,"file":"flex-align.js","sourceRoot":"","sources":["../../src/layout/flex-align.ts"],"names":[],"mappings":";;;;;;;;;AAAA,gEAA+D;AAS/D,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,6BAAiB;IAC9C,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,CAAA;AAxBY,SAAS;IAHrB,4BAAQ,CAAC;QACR,QAAQ,EAAE,aAAa;KACxB,CAAC;GACW,SAAS,CAwBrB;AAxBY,8BAAS"}

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

@@ -8,7 +8,7 @@ interface Styles {
 }
 export declare class FlexFill extends Attribute<Styles> {
     static options(this: HTMLElement): {
-        name: string;
+        selector: string;
     };
     value: string;
     OnInit(): void;

package/dist/layout/flex-fill.js

@@ -1,15 +1,21 @@
 "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.FlexFill = void 0;
 const custom_attributes_1 = require("@rhtml/custom-attributes");
-class FlexFill extends custom_attributes_1.Attribute {
+let FlexFill = class FlexFill extends custom_attributes_1.Attribute {
     constructor() {
         super(...arguments);
         this.value = '100%';
     }
     static options() {
         return {
-            name: 'fxFlexFill'
+            selector: 'fxFlexFill'
         };
     }
     OnInit() {
@@ -39,6 +45,11 @@ class FlexFill extends custom_attributes_1.Attribute {
             width: this.value
         })(this.element);
     }
-}
+};
+FlexFill = __decorate([
+    custom_attributes_1.Modifier({
+        selector: 'fxFlexFill'
+    })
+], FlexFill);
 exports.FlexFill = FlexFill;
 //# sourceMappingURL=flex-fill.js.map

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

@@ -1 +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"}
+{"version":3,"file":"flex-fill.js","sourceRoot":"","sources":["../../src/layout/flex-fill.ts"],"names":[],"mappings":";;;;;;;;;AAAA,gEAA+D;AAa/D,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,6BAAiB;IAA/C;;QAOE,UAAK,GAAG,MAAM,CAAC;IAiCjB,CAAC;IAvCC,MAAM,CAAC,OAAO;QACZ,OAAO;YACL,QAAQ,EAAE,YAAY;SACvB,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,CAAA;AAxCY,QAAQ;IAHpB,4BAAQ,CAAC;QACR,QAAQ,EAAE,YAAY;KACvB,CAAC;GACW,QAAQ,CAwCpB;AAxCY,4BAAQ"}

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

@@ -3,9 +3,6 @@ interface Styles {
     'margin-left': string;
 }
 export declare class FlexOffset extends Attribute<Styles> {
-    static options(this: HTMLElement): {
-        name: string;
-    };
     OnInit(): void;
     OnDestroy(): void;
     OnUpdate(): void;

package/dist/layout/flex-offset.js

@@ -1,13 +1,14 @@
 "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.FlexOffset = void 0;
 const custom_attributes_1 = require("@rhtml/custom-attributes");
-class FlexOffset extends custom_attributes_1.Attribute {
-    static options() {
-        return {
-            name: 'fxFlexOffset'
-        };
-    }
+let FlexOffset = class FlexOffset extends custom_attributes_1.Attribute {
     OnInit() {
         this.modify();
     }
@@ -27,6 +28,11 @@ class FlexOffset extends custom_attributes_1.Attribute {
             'margin-left': this.value || null
         })(this.element);
     }
-}
+};
+FlexOffset = __decorate([
+    custom_attributes_1.Modifier({
+        selector: 'fxFlexOffset'
+    })
+], FlexOffset);
 exports.FlexOffset = FlexOffset;
 //# sourceMappingURL=flex-offset.js.map

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

@@ -1 +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"}
+{"version":3,"file":"flex-offset.js","sourceRoot":"","sources":["../../src/layout/flex-offset.ts"],"names":[],"mappings":";;;;;;;;;AAAA,gEAA+D;AAS/D,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,6BAAiB;IAC/C,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,CAAA;AAxBY,UAAU;IAHtB,4BAAQ,CAAC;QACR,QAAQ,EAAE,cAAc;KACzB,CAAC;GACW,UAAU,CAwBtB;AAxBY,gCAAU"}

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

@@ -4,7 +4,7 @@ interface Styles {
 }
 export declare class FlexOrder extends Attribute<Styles> {
     static options(this: HTMLElement): {
-        name: string;
+        selector: string;
     };
     OnInit(): void;
     OnDestroy(): void;

package/dist/layout/flex-order.js

@@ -1,11 +1,17 @@
 "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.FlexOrder = void 0;
 const custom_attributes_1 = require("@rhtml/custom-attributes");
-class FlexOrder extends custom_attributes_1.Attribute {
+let FlexOrder = class FlexOrder extends custom_attributes_1.Attribute {
     static options() {
         return {
-            name: 'fxFlexOrder'
+            selector: 'fxFlexOrder'
         };
     }
     OnInit() {
@@ -27,6 +33,11 @@ class FlexOrder extends custom_attributes_1.Attribute {
             order: this.value || null
         })(this.element);
     }
-}
+};
+FlexOrder = __decorate([
+    custom_attributes_1.Modifier({
+        selector: 'fxFlexOrder'
+    })
+], FlexOrder);
 exports.FlexOrder = FlexOrder;
 //# sourceMappingURL=flex-order.js.map

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

@@ -1 +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"}
+{"version":3,"file":"flex-order.js","sourceRoot":"","sources":["../../src/layout/flex-order.ts"],"names":[],"mappings":";;;;;;;;;AAAA,gEAA+D;AAS/D,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,6BAAiB;IAC9C,MAAM,CAAC,OAAO;QACZ,OAAO;YACL,QAAQ,EAAE,aAAa;SACxB,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,CAAA;AA9BY,SAAS;IAHrB,4BAAQ,CAAC;QACR,QAAQ,EAAE,aAAa;KACxB,CAAC;GACW,SAAS,CA8BrB;AA9BY,8BAAS"}

package/dist/layout/flex.d.ts

@@ -6,7 +6,7 @@ interface Styles {
 }
 export declare class Flex extends Attribute<Styles> {
     static options(this: HTMLElement): {
-        name: string;
+        selector: string;
     };
     OnInit(): void;
     OnDestroy(): void;

package/dist/layout/flex.js

@@ -1,11 +1,17 @@
 "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.Flex = void 0;
 const custom_attributes_1 = require("@rhtml/custom-attributes");
-class Flex extends custom_attributes_1.Attribute {
+let Flex = class Flex extends custom_attributes_1.Attribute {
     static options() {
         return {
-            name: 'fxFlex'
+            selector: 'fxFlex'
         };
     }
     OnInit() {
@@ -31,6 +37,11 @@ class Flex extends custom_attributes_1.Attribute {
             flex: '1 1 100%'
         })(this.element);
     }
-}
+};
+Flex = __decorate([
+    custom_attributes_1.Modifier({
+        selector: 'fxFlex'
+    })
+], Flex);
 exports.Flex = Flex;
 //# sourceMappingURL=flex.js.map

package/dist/layout/flex.js.map

@@ -1 +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"}
+{"version":3,"file":"flex.js","sourceRoot":"","sources":["../../src/layout/flex.ts"],"names":[],"mappings":";;;;;;;;;AAAA,gEAA+D;AAW/D,IAAa,IAAI,GAAjB,MAAa,IAAK,SAAQ,6BAAiB;IACzC,MAAM,CAAC,OAAO;QACZ,OAAO;YACL,QAAQ,EAAE,QAAQ;SACnB,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,CAAA;AAlCY,IAAI;IAHhB,4BAAQ,CAAC;QACR,QAAQ,EAAE,QAAQ;KACnB,CAAC;GACW,IAAI,CAkChB;AAlCY,oBAAI"}

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-align.d.ts

@@ -5,9 +5,6 @@ interface Styles {
     display: string;
 }
 export declare class LayoutAlign extends Attribute<Styles> {
-    static options(this: HTMLElement): {
-        name: string;
-    };
     OnInit(): void;
     OnDestroy(): void;
     OnUpdate(): void;

package/dist/layout/layout-align.js

@@ -1,13 +1,14 @@
 "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.LayoutAlign = void 0;
 const custom_attributes_1 = require("@rhtml/custom-attributes");
-class LayoutAlign extends custom_attributes_1.Attribute {
-    static options() {
-        return {
-            name: 'fxLayoutAlign'
-        };
-    }
+let LayoutAlign = class LayoutAlign extends custom_attributes_1.Attribute {
     OnInit() {
         this.modify();
     }
@@ -34,6 +35,11 @@ class LayoutAlign extends custom_attributes_1.Attribute {
             display: 'flex'
         })(this.element);
     }
-}
+};
+LayoutAlign = __decorate([
+    custom_attributes_1.Modifier({
+        selector: 'fxLayoutAlign'
+    })
+], LayoutAlign);
 exports.LayoutAlign = LayoutAlign;
 //# sourceMappingURL=layout-align.js.map

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

@@ -1 +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"}
+{"version":3,"file":"layout-align.js","sourceRoot":"","sources":["../../src/layout/layout-align.ts"],"names":[],"mappings":";;;;;;;;;AAAA,gEAA+D;AAW/D,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,6BAAiB;IAChD,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,CAAA;AA/BY,WAAW;IAHvB,4BAAQ,CAAC;QACR,QAAQ,EAAE,eAAe;KAC1B,CAAC;GACW,WAAW,CA+BvB;AA/BY,kCAAW"}

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

@@ -4,9 +4,6 @@ interface Styles {
     flex: string;
 }
 export declare class LayoutGap extends Attribute<Styles> {
-    static options(this: HTMLElement): {
-        name: string;
-    };
     private observer;
     OnInit(): void;
     OnDestroy(): void;

package/dist/layout/layout-gap.js

@@ -1,13 +1,14 @@
 "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.LayoutGap = void 0;
 const custom_attributes_1 = require("@rhtml/custom-attributes");
-class LayoutGap extends custom_attributes_1.Attribute {
-    static options() {
-        return {
-            name: 'fxLayoutGap'
-        };
-    }
+let LayoutGap = class LayoutGap extends custom_attributes_1.Attribute {
     OnInit() {
         this.modify();
         this.observer = new MutationObserver(() => this.modify());
@@ -41,6 +42,11 @@ class LayoutGap extends custom_attributes_1.Attribute {
             })(div);
         }
     }
-}
+};
+LayoutGap = __decorate([
+    custom_attributes_1.Modifier({
+        selector: 'fxLayoutGap'
+    })
+], LayoutGap);
 exports.LayoutGap = LayoutGap;
 //# sourceMappingURL=layout-gap.js.map

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

@@ -1 +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"}
+{"version":3,"file":"layout-gap.js","sourceRoot":"","sources":["../../src/layout/layout-gap.ts"],"names":[],"mappings":";;;;;;;;;AAAA,gEAA+D;AAU/D,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,6BAAiB;IAG9C,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,CAAA;AAxCY,SAAS;IAHrB,4BAAQ,CAAC;QACR,QAAQ,EAAE,aAAa;KACxB,CAAC;GACW,SAAS,CAwCrB;AAxCY,8BAAS"}

package/dist/layout/layout.d.ts

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

package/dist/layout/layout.js

@@ -1,18 +1,18 @@
 "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.Layout = void 0;
 const custom_attributes_1 = require("@rhtml/custom-attributes");
-class Layout extends custom_attributes_1.Attribute {
+let Layout = 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();
     }
@@ -38,6 +38,11 @@ class Layout extends custom_attributes_1.Attribute {
             display: 'flex'
         })(this.element);
     }
-}
+};
+Layout = __decorate([
+    custom_attributes_1.Modifier({
+        selector: 'fxLayout'
+    })
+], Layout);
 exports.Layout = Layout;
 //# sourceMappingURL=layout.js.map

package/dist/layout/layout.js.map

@@ -1 +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"}
+{"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.101",
+  "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.100"
+    "@rhtml/custom-attributes": "0.0.104"
   },
   "devDependencies": {
     "eslint": "^6.7.2",

package/src/angular/if.ts

@@ -1,12 +1,16 @@
-import { Attribute, CustomAttributeRegistry } from '@rhtml/custom-attributes';
+import {
+  Attribute,
+  CustomAttributeRegistry,
+  Modifier
+} from '@rhtml/custom-attributes';
 
-export class IfOperator extends Attribute {
-  static options(this: HTMLElement) {
-    return {
-      name: 'ngIf',
-      registry: new CustomAttributeRegistry(this.shadowRoot)
-    };
+@Modifier({
+  selector: 'ngIf',
+  registry(this) {
+    return new CustomAttributeRegistry(this);
   }
+})
+export class IfOperator extends Attribute {
   OnInit() {
     this.setColor();
   }

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/flex-align.ts

@@ -1,15 +1,13 @@
-import { Attribute } from '@rhtml/custom-attributes';
+import { Attribute, Modifier } from '@rhtml/custom-attributes';
 
 interface Styles {
   'align-self': string;
 }
-export class FlexAlign extends Attribute<Styles> {
-  static options(this: HTMLElement) {
-    return {
-      name: 'fxFlexAlign'
-    };
-  }
 
+@Modifier({
+  selector: 'fxFlexAlign'
+})
+export class FlexAlign extends Attribute<Styles> {
   OnInit() {
     this.modify();
   }

package/src/layout/flex-fill.ts

@@ -1,4 +1,4 @@
-import { Attribute } from '@rhtml/custom-attributes';
+import { Attribute, Modifier } from '@rhtml/custom-attributes';
 
 interface Styles {
   margin: string;
@@ -8,10 +8,13 @@ interface Styles {
   'min-height': string;
 }
 
+@Modifier({
+  selector: 'fxFlexFill'
+})
 export class FlexFill extends Attribute<Styles> {
   static options(this: HTMLElement) {
     return {
-      name: 'fxFlexFill'
+      selector: 'fxFlexFill'
     };
   }
 

package/src/layout/flex-offset.ts

@@ -1,16 +1,13 @@
-import { Attribute } from '@rhtml/custom-attributes';
+import { Attribute, Modifier } from '@rhtml/custom-attributes';
 
 interface Styles {
   'margin-left': string;
 }
 
+@Modifier({
+  selector: 'fxFlexOffset'
+})
 export class FlexOffset extends Attribute<Styles> {
-  static options(this: HTMLElement) {
-    return {
-      name: 'fxFlexOffset'
-    };
-  }
-
   OnInit() {
     this.modify();
   }

package/src/layout/flex-order.ts

@@ -1,13 +1,16 @@
-import { Attribute } from '@rhtml/custom-attributes';
+import { Attribute, Modifier } from '@rhtml/custom-attributes';
 
 interface Styles {
   order: string;
 }
 
+@Modifier({
+  selector: 'fxFlexOrder'
+})
 export class FlexOrder extends Attribute<Styles> {
   static options(this: HTMLElement) {
     return {
-      name: 'fxFlexOrder'
+      selector: 'fxFlexOrder'
     };
   }
 

package/src/layout/flex.ts

@@ -1,4 +1,4 @@
-import { Attribute } from '@rhtml/custom-attributes';
+import { Attribute, Modifier } from '@rhtml/custom-attributes';
 
 interface Styles {
   flex: string;
@@ -6,10 +6,13 @@ interface Styles {
   'max-width': string;
 }
 
+@Modifier({
+  selector: 'fxFlex'
+})
 export class Flex extends Attribute<Styles> {
   static options(this: HTMLElement) {
     return {
-      name: 'fxFlex'
+      selector: 'fxFlex'
     };
   }
 

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-align.ts

@@ -1,4 +1,4 @@
-import { Attribute } from '@rhtml/custom-attributes';
+import { Attribute, Modifier } from '@rhtml/custom-attributes';
 
 interface Styles {
   'place-content': string;
@@ -6,13 +6,10 @@ interface Styles {
   display: string;
 }
 
+@Modifier({
+  selector: 'fxLayoutAlign'
+})
 export class LayoutAlign extends Attribute<Styles> {
-  static options(this: HTMLElement) {
-    return {
-      name: 'fxLayoutAlign'
-    };
-  }
-
   OnInit() {
     this.modify();
   }

package/src/layout/layout-gap.ts

@@ -1,17 +1,14 @@
-import { Attribute } from '@rhtml/custom-attributes';
+import { Attribute, Modifier } from '@rhtml/custom-attributes';
 
 interface Styles {
   margin: string;
   flex: string;
 }
 
+@Modifier({
+  selector: 'fxLayoutGap'
+})
 export class LayoutGap extends Attribute<Styles> {
-  static options(this: HTMLElement) {
-    return {
-      name: 'fxLayoutGap'
-    };
-  }
-
   private observer: MutationObserver;
 
   OnInit() {

package/src/layout/layout.ts

@@ -1,4 +1,4 @@
-import { Attribute, CustomAttributeRegistry } from '@rhtml/custom-attributes';
+import { Attribute, Modifier } from '@rhtml/custom-attributes';
 
 interface Styles {
   'flex-flow': string;
@@ -6,14 +6,11 @@ interface Styles {
   display: string;
 }
 
+@Modifier({
+  selector: 'fxLayout'
+})
 export class Layout extends Attribute<Styles> {
   value = 'row';
-  static options(this: HTMLElement) {
-    return {
-      name: 'fxLayout',
-      registry: new CustomAttributeRegistry(this.shadowRoot)
-    };
-  }
 
   OnInit() {
     this.modify();

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 {}