@rhtml/modifiers 0.0.105 → 0.0.108

package/dist/angular/if.d.ts

@@ -1,7 +1,11 @@
 import { Attribute } from '@rhtml/custom-attributes';
-export declare class IfOperator extends Attribute {
+interface Styles {
+    display: string;
+}
+export declare class IfOperator extends Attribute<Styles> {
     OnInit(): void;
     OnDestroy(): void;
     OnUpdate(): void;
-    setColor(): void;
+    private modify;
 }
+export {};

package/dist/angular/if.js

@@ -10,29 +10,26 @@ exports.IfOperator = void 0;
 const custom_attributes_1 = require("@rhtml/custom-attributes");
 let IfOperator = class IfOperator extends custom_attributes_1.Attribute {
     OnInit() {
-        this.setColor();
+        this.modify();
     }
     OnDestroy() {
         this.element.style.display = null;
     }
     OnUpdate() {
-        this.setColor();
+        this.modify();
     }
-    setColor() {
+    modify() {
         if (this.value === 'true') {
-            this.element.style.display = null;
+            this.setStyles({ display: null })(this.element);
         }
         else {
-            this.element.style.display = 'none';
+            this.setStyles({ display: 'none' })(this.element);
         }
     }
 };
 IfOperator = __decorate([
     custom_attributes_1.Modifier({
-        selector: 'ngIf',
-        registry() {
-            return new custom_attributes_1.CustomAttributeRegistry(this);
-        }
+        selector: 'ngIf'
     })
 ], IfOperator);
 exports.IfOperator = 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,CAAC;QAC3C,CAAC;KACF,CAAC;GACW,UAAU,CAoBtB;AApBY,gCAAU"}
+{"version":3,"file":"if.js","sourceRoot":"","sources":["../../src/angular/if.ts"],"names":[],"mappings":";;;;;;;;;AAAA,gEAA+D;AAO/D,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,6BAAiB;IAC/C,MAAM;QACJ,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAED,SAAS;QACP,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC;IACpC,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAEO,MAAM;QACZ,IAAI,IAAI,CAAC,KAAK,KAAK,MAAM,EAAE;YACzB,IAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;SACjD;aAAM;YACL,IAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;SACnD;IACH,CAAC;CACF,CAAA;AApBY,UAAU;IAHtB,4BAAQ,CAAC;QACR,QAAQ,EAAE,MAAM;KACjB,CAAC;GACW,UAAU,CAoBtB;AApBY,gCAAU"}

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

@@ -6,5 +6,5 @@ export declare class NgFor extends Attribute {
     OnDestroy(): void;
     OnUpdate(): void;
     private interpolate;
-    modify(): void;
+    private modify;
 }

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

@@ -1 +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"}
+{"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;IAEO,MAAM;QACZ,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.js

@@ -12,7 +12,7 @@ let Registry = class Registry extends custom_attributes_1.Attribute {
 };
 Registry = __decorate([
     custom_attributes_1.Modifier({
-        selector: 'registry',
+        selector: 'angular-layout-registry',
         registry() {
             return new custom_attributes_1.CustomAttributeRegistry(this);
         }

package/dist/angular/registry.js.map

@@ -1 +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"}
+{"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,yBAAyB;QACnC,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

@@ -1,6 +1,6 @@
 import { Attribute } from '@rhtml/custom-attributes';
 interface Styles {
-    'align-self': string;
+    alignSelf: string;
 }
 export declare class FlexAlign extends Attribute<Styles> {
     OnInit(): void;

package/dist/layout/flex-align.js

@@ -19,14 +19,10 @@ let FlexAlign = class FlexAlign extends custom_attributes_1.Attribute {
         this.modify();
     }
     clean() {
-        this.setStyles({
-            'align-self': null
-        })(this.element);
+        this.setStyles({ alignSelf: null })(this.element);
     }
     modify() {
-        this.setStyles({
-            'align-self': this.value || null
-        })(this.element);
+        this.setStyles({ alignSelf: this.value || null })(this.element);
     }
 };
 FlexAlign = __decorate([

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,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"}
+{"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,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACpD,CAAC;IAEO,MAAM;QACZ,IAAI,CAAC,SAAS,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAClE,CAAC;CACF,CAAA;AApBY,SAAS;IAHrB,4BAAQ,CAAC;QACR,QAAQ,EAAE,aAAa;KACxB,CAAC;GACW,SAAS,CAoBrB;AApBY,8BAAS"}

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

@@ -3,13 +3,10 @@ interface Styles {
     margin: string;
     width: string;
     height: string;
-    'min-width': string;
-    'min-height': string;
+    minWidth: string;
+    minHeight: string;
 }
 export declare class FlexFill extends Attribute<Styles> {
-    static options(this: HTMLElement): {
-        selector: string;
-    };
     value: string;
     OnInit(): void;
     OnDestroy(): void;

package/dist/layout/flex-fill.js

@@ -13,11 +13,6 @@ let FlexFill = class FlexFill extends custom_attributes_1.Attribute {
         super(...arguments);
         this.value = '100%';
     }
-    static options() {
-        return {
-            selector: 'fxFlexFill'
-        };
-    }
     OnInit() {
         this.modify();
     }
@@ -31,8 +26,8 @@ let FlexFill = class FlexFill extends custom_attributes_1.Attribute {
         this.setStyles({
             height: null,
             margin: null,
-            'min-height': null,
-            'min-width': null,
+            minHeight: null,
+            minWidth: null,
             width: null
         })(this.element);
     }
@@ -40,8 +35,8 @@ let FlexFill = class FlexFill extends custom_attributes_1.Attribute {
         this.setStyles({
             margin: '0',
             height: this.value,
-            'min-height': this.value,
-            'min-width': this.value,
+            minHeight: this.value,
+            minWidth: this.value,
             width: this.value
         })(this.element);
     }

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,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"}
+{"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;;QACE,UAAK,GAAG,MAAM,CAAC;IAiCjB,CAAC;IA/BC,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,SAAS,EAAE,IAAI;YACf,QAAQ,EAAE,IAAI;YACd,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,SAAS,EAAE,IAAI,CAAC,KAAK;YACrB,QAAQ,EAAE,IAAI,CAAC,KAAK;YACpB,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnB,CAAC;CACF,CAAA;AAlCY,QAAQ;IAHpB,4BAAQ,CAAC;QACR,QAAQ,EAAE,YAAY;KACvB,CAAC;GACW,QAAQ,CAkCpB;AAlCY,4BAAQ"}

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

@@ -1,6 +1,6 @@
 import { Attribute } from '@rhtml/custom-attributes';
 interface Styles {
-    'margin-left': string;
+    marginLeft: string;
 }
 export declare class FlexOffset extends Attribute<Styles> {
     OnInit(): void;

package/dist/layout/flex-offset.js

@@ -20,12 +20,12 @@ let FlexOffset = class FlexOffset extends custom_attributes_1.Attribute {
     }
     clean() {
         this.setStyles({
-            'margin-left': null
+            marginLeft: null
         })(this.element);
     }
     modify() {
         this.setStyles({
-            'margin-left': this.value || null
+            marginLeft: this.value || null
         })(this.element);
     }
 };

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,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"}
+{"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,UAAU,EAAE,IAAI;SACjB,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnB,CAAC;IAEO,MAAM;QACZ,IAAI,CAAC,SAAS,CAAC;YACb,UAAU,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI;SAC/B,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

@@ -3,9 +3,6 @@ interface Styles {
     order: string;
 }
 export declare class FlexOrder extends Attribute<Styles> {
-    static options(this: HTMLElement): {
-        selector: string;
-    };
     OnInit(): void;
     OnDestroy(): void;
     OnUpdate(): void;

package/dist/layout/flex-order.js

@@ -9,11 +9,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FlexOrder = void 0;
 const custom_attributes_1 = require("@rhtml/custom-attributes");
 let FlexOrder = class FlexOrder extends custom_attributes_1.Attribute {
-    static options() {
-        return {
-            selector: 'fxFlexOrder'
-        };
-    }
     OnInit() {
         this.modify();
     }

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,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"}
+{"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;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;AAxBY,SAAS;IAHrB,4BAAQ,CAAC;QACR,QAAQ,EAAE,aAAa;KACxB,CAAC;GACW,SAAS,CAwBrB;AAxBY,8BAAS"}

package/dist/layout/flex.d.ts

@@ -1,13 +1,10 @@
 import { Attribute } from '@rhtml/custom-attributes';
 interface Styles {
     flex: string;
-    'box-sizing': string;
-    'max-width': string;
+    boxSizing: string;
+    maxWidth: string;
 }
 export declare class Flex extends Attribute<Styles> {
-    static options(this: HTMLElement): {
-        selector: string;
-    };
     OnInit(): void;
     OnDestroy(): void;
     OnUpdate(): void;

package/dist/layout/flex.js

@@ -9,11 +9,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Flex = void 0;
 const custom_attributes_1 = require("@rhtml/custom-attributes");
 let Flex = class Flex extends custom_attributes_1.Attribute {
-    static options() {
-        return {
-            selector: 'fxFlex'
-        };
-    }
     OnInit() {
         this.modify();
     }
@@ -25,15 +20,15 @@ let Flex = class Flex extends custom_attributes_1.Attribute {
     }
     clean() {
         this.setStyles({
-            'box-sizing': null,
-            'max-width': null,
+            boxSizing: null,
+            maxWidth: null,
             flex: null
         })(this.element);
     }
     modify() {
         this.setStyles({
-            'box-sizing': 'border-box',
-            'max-width': this.value || null,
+            boxSizing: 'border-box',
+            maxWidth: this.value || null,
             flex: '1 1 100%'
         })(this.element);
     }

package/dist/layout/flex.js.map

@@ -1 +1 @@
-{"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"}
+{"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;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,SAAS,EAAE,IAAI;YACf,QAAQ,EAAE,IAAI;YACd,IAAI,EAAE,IAAI;SACX,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnB,CAAC;IAEO,MAAM;QACZ,IAAI,CAAC,SAAS,CAAC;YACb,SAAS,EAAE,YAAY;YACvB,QAAQ,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI;YAC5B,IAAI,EAAE,UAAU;SACjB,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnB,CAAC;CACF,CAAA;AA5BY,IAAI;IAHhB,4BAAQ,CAAC;QACR,QAAQ,EAAE,QAAQ;KACnB,CAAC;GACW,IAAI,CA4BhB;AA5BY,oBAAI"}

package/dist/layout/index.d.ts

@@ -1,6 +1,3 @@
-import { Flex } from './flex';
-import { FlexFill } from './flex-fill';
-import { FlexOrder } from './flex-order';
 import { Registry } from './registry';
 export * from './layout';
-export declare const FlexLayout: (typeof Flex | typeof FlexFill | typeof FlexOrder | typeof Registry)[];
+export declare const FlexLayout: (typeof Registry)[];

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

@@ -1,7 +1,7 @@
 import { Attribute } from '@rhtml/custom-attributes';
 interface Styles {
-    'place-content': string;
-    'align-items': string;
+    placeContent: string;
+    alignItems: string;
     display: string;
 }
 export declare class LayoutAlign extends Attribute<Styles> {

package/dist/layout/layout-align.js

@@ -20,16 +20,16 @@ let LayoutAlign = class LayoutAlign extends custom_attributes_1.Attribute {
     }
     clean() {
         this.setStyles({
-            'align-items': null,
-            'place-content': null,
+            alignItems: null,
+            placeContent: null,
             display: null
         })(this.element);
     }
     modify() {
         const [mainAxis, crossAxis] = this.value.split(' ');
         this.setStyles({
-            'align-items': crossAxis ? crossAxis : mainAxis,
-            'place-content': crossAxis
+            alignItems: crossAxis ? crossAxis : mainAxis,
+            placeContent: crossAxis
                 ? `${crossAxis} ${mainAxis}`
                 : `${mainAxis} ${mainAxis}`,
             display: 'flex'

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,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"}
+{"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,UAAU,EAAE,IAAI;YAChB,YAAY,EAAE,IAAI;YAClB,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,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;YAC5C,YAAY,EAAE,SAAS;gBACrB,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.d.ts

@@ -1,7 +1,7 @@
 import { Attribute } from '@rhtml/custom-attributes';
 interface Styles {
-    'flex-flow': string;
-    'box-sizing': string;
+    flexFlow: string;
+    boxSizing: string;
     display: string;
 }
 export declare class Layout extends Attribute<Styles> {

package/dist/layout/layout.js

@@ -24,8 +24,8 @@ let Layout = class Layout extends custom_attributes_1.Attribute {
     }
     clean() {
         this.setStyles({
-            'box-sizing': null,
-            'flex-flow': null,
+            boxSizing: null,
+            flexFlow: null,
             display: null
         })(this.element);
     }
@@ -33,8 +33,8 @@ let Layout = class Layout extends custom_attributes_1.Attribute {
         const splitted = this.value.split(' ');
         const [mainAxis, crossAxis] = splitted;
         this.setStyles({
-            'box-sizing': 'flex',
-            'flex-flow': splitted.length > 1 ? `${mainAxis} ${crossAxis}` : mainAxis,
+            boxSizing: 'flex',
+            flexFlow: splitted.length > 1 ? `${mainAxis} ${crossAxis}` : mainAxis,
             display: 'flex'
         })(this.element);
     }

package/dist/layout/layout.js.map

@@ -1 +1 @@
-{"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"}
+{"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,SAAS,EAAE,IAAI;YACf,QAAQ,EAAE,IAAI;YACd,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,SAAS,EAAE,MAAM;YACjB,QAAQ,EAAE,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,QAAQ,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,QAAQ;YACrE,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.js

@@ -12,7 +12,7 @@ let Registry = class Registry extends custom_attributes_1.Attribute {
 };
 Registry = __decorate([
     custom_attributes_1.Modifier({
-        selector: 'registry',
+        selector: 'flex-layout-registry',
         registry() {
             return new custom_attributes_1.CustomAttributeRegistry(this);
         }

package/dist/layout/registry.js.map

@@ -1 +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"}
+{"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,sBAAsB;QAChC,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.105",
+  "version": "0.0.108",
   "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.105"
+    "@rhtml/custom-attributes": "0.0.108"
   },
   "devDependencies": {
     "eslint": "^6.7.2",

package/src/angular/if.ts

@@ -1,18 +1,13 @@
-import {
-  Attribute,
-  CustomAttributeRegistry,
-  Modifier
-} from '@rhtml/custom-attributes';
-
+import { Attribute, Modifier } from '@rhtml/custom-attributes';
+interface Styles {
+  display: string;
+}
 @Modifier({
-  selector: 'ngIf',
-  registry(this) {
-    return new CustomAttributeRegistry(this);
-  }
+  selector: 'ngIf'
 })
-export class IfOperator extends Attribute {
+export class IfOperator extends Attribute<Styles> {
   OnInit() {
-    this.setColor();
+    this.modify();
   }
 
   OnDestroy() {
@@ -20,14 +15,14 @@ export class IfOperator extends Attribute {
   }
 
   OnUpdate() {
-    this.setColor();
+    this.modify();
   }
 
-  setColor() {
+  private modify() {
     if (this.value === 'true') {
-      this.element.style.display = null;
+      this.setStyles({ display: null })(this.element);
     } else {
-      this.element.style.display = 'none';
+      this.setStyles({ display: 'none' })(this.element);
     }
   }
 }

package/src/angular/ng-for.ts

@@ -32,7 +32,7 @@ export class NgFor extends Attribute {
     );
   }
 
-  modify() {
+  private modify() {
     const [, , , items] = this.ngFor.split(' ');
     const template = this.element.innerHTML;
     this.element.innerHTML = '';

package/src/angular/registry.ts

@@ -5,7 +5,7 @@ import {
 } from '@rhtml/custom-attributes';
 
 @Modifier({
-  selector: 'registry',
+  selector: 'angular-layout-registry',
   registry(this) {
     return new CustomAttributeRegistry(this);
   }

package/src/layout/flex-align.ts

@@ -1,7 +1,7 @@
 import { Attribute, Modifier } from '@rhtml/custom-attributes';
 
 interface Styles {
-  'align-self': string;
+  alignSelf: string;
 }
 
 @Modifier({
@@ -21,14 +21,10 @@ export class FlexAlign extends Attribute<Styles> {
   }
 
   private clean() {
-    this.setStyles({
-      'align-self': null
-    })(this.element);
+    this.setStyles({ alignSelf: null })(this.element);
   }
 
   private modify() {
-    this.setStyles({
-      'align-self': this.value || null
-    })(this.element);
+    this.setStyles({ alignSelf: this.value || null })(this.element);
   }
 }

package/src/layout/flex-fill.ts

@@ -4,20 +4,14 @@ interface Styles {
   margin: string;
   width: string;
   height: string;
-  'min-width': string;
-  'min-height': string;
+  minWidth: string;
+  minHeight: string;
 }
 
 @Modifier({
   selector: 'fxFlexFill'
 })
 export class FlexFill extends Attribute<Styles> {
-  static options(this: HTMLElement) {
-    return {
-      selector: 'fxFlexFill'
-    };
-  }
-
   value = '100%';
 
   OnInit() {
@@ -36,8 +30,8 @@ export class FlexFill extends Attribute<Styles> {
     this.setStyles({
       height: null,
       margin: null,
-      'min-height': null,
-      'min-width': null,
+      minHeight: null,
+      minWidth: null,
       width: null
     })(this.element);
   }
@@ -46,8 +40,8 @@ export class FlexFill extends Attribute<Styles> {
     this.setStyles({
       margin: '0',
       height: this.value,
-      'min-height': this.value,
-      'min-width': this.value,
+      minHeight: this.value,
+      minWidth: this.value,
       width: this.value
     })(this.element);
   }

package/src/layout/flex-offset.ts

@@ -1,7 +1,7 @@
 import { Attribute, Modifier } from '@rhtml/custom-attributes';
 
 interface Styles {
-  'margin-left': string;
+  marginLeft: string;
 }
 
 @Modifier({
@@ -22,13 +22,13 @@ export class FlexOffset extends Attribute<Styles> {
 
   private clean() {
     this.setStyles({
-      'margin-left': null
+      marginLeft: null
     })(this.element);
   }
 
   private modify() {
     this.setStyles({
-      'margin-left': this.value || null
+      marginLeft: this.value || null
     })(this.element);
   }
 }

package/src/layout/flex-order.ts

@@ -8,12 +8,6 @@ interface Styles {
   selector: 'fxFlexOrder'
 })
 export class FlexOrder extends Attribute<Styles> {
-  static options(this: HTMLElement) {
-    return {
-      selector: 'fxFlexOrder'
-    };
-  }
-
   OnInit() {
     this.modify();
   }

package/src/layout/flex.ts

@@ -2,20 +2,14 @@ import { Attribute, Modifier } from '@rhtml/custom-attributes';
 
 interface Styles {
   flex: string;
-  'box-sizing': string;
-  'max-width': string;
+  boxSizing: string;
+  maxWidth: string;
 }
 
 @Modifier({
   selector: 'fxFlex'
 })
 export class Flex extends Attribute<Styles> {
-  static options(this: HTMLElement) {
-    return {
-      selector: 'fxFlex'
-    };
-  }
-
   OnInit() {
     this.modify();
   }
@@ -30,16 +24,16 @@ export class Flex extends Attribute<Styles> {
 
   private clean() {
     this.setStyles({
-      'box-sizing': null,
-      'max-width': null,
+      boxSizing: null,
+      maxWidth: null,
       flex: null
     })(this.element);
   }
 
   private modify() {
     this.setStyles({
-      'box-sizing': 'border-box',
-      'max-width': this.value || null,
+      boxSizing: 'border-box',
+      maxWidth: this.value || null,
       flex: '1 1 100%'
     })(this.element);
   }

package/src/layout/layout-align.ts

@@ -1,8 +1,8 @@
 import { Attribute, Modifier } from '@rhtml/custom-attributes';
 
 interface Styles {
-  'place-content': string;
-  'align-items': string;
+  placeContent: string;
+  alignItems: string;
   display: string;
 }
 
@@ -24,8 +24,8 @@ export class LayoutAlign extends Attribute<Styles> {
 
   private clean() {
     this.setStyles({
-      'align-items': null,
-      'place-content': null,
+      alignItems: null,
+      placeContent: null,
       display: null
     })(this.element);
   }
@@ -33,8 +33,8 @@ export class LayoutAlign extends Attribute<Styles> {
   private modify() {
     const [mainAxis, crossAxis] = this.value.split(' ');
     this.setStyles({
-      'align-items': crossAxis ? crossAxis : mainAxis,
-      'place-content': crossAxis
+      alignItems: crossAxis ? crossAxis : mainAxis,
+      placeContent: crossAxis
         ? `${crossAxis} ${mainAxis}`
         : `${mainAxis} ${mainAxis}`,
       display: 'flex'

package/src/layout/layout.ts

@@ -1,8 +1,8 @@
 import { Attribute, Modifier } from '@rhtml/custom-attributes';
 
 interface Styles {
-  'flex-flow': string;
-  'box-sizing': string;
+  flexFlow: string;
+  boxSizing: string;
   display: string;
 }
 
@@ -26,8 +26,8 @@ export class Layout extends Attribute<Styles> {
 
   private clean() {
     this.setStyles({
-      'box-sizing': null,
-      'flex-flow': null,
+      boxSizing: null,
+      flexFlow: null,
       display: null
     })(this.element);
   }
@@ -35,8 +35,8 @@ export class Layout extends Attribute<Styles> {
     const splitted = this.value.split(' ');
     const [mainAxis, crossAxis] = splitted;
     this.setStyles({
-      'box-sizing': 'flex',
-      'flex-flow': splitted.length > 1 ? `${mainAxis} ${crossAxis}` : mainAxis,
+      boxSizing: 'flex',
+      flexFlow: splitted.length > 1 ? `${mainAxis} ${crossAxis}` : mainAxis,
       display: 'flex'
     })(this.element);
   }

package/src/layout/registry.ts

@@ -5,7 +5,7 @@ import {
 } from '@rhtml/custom-attributes';
 
 @Modifier({
-  selector: 'registry',
+  selector: 'flex-layout-registry',
   registry(this) {
     return new CustomAttributeRegistry(this);
   }