@rhtml/modifiers 0.0.109 → 0.0.112

package/dist/animation/animate.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animate.css.js","sourceRoot":"","sources":["../../src/animation/animate.css.ts"],"names":[],"mappings":";;;AAAa,QAAA,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+xGzB,CAAC"}

package/dist/animation/animation.d.ts

@@ -0,0 +1,16 @@
+import { Attribute } from '@rhtml/custom-attributes';
+import { AnimationsType } from './interfaces';
+interface Styles {
+    animationDelay: string;
+}
+export declare class Animation extends Attribute<Styles> {
+    delay: string;
+    value: AnimationsType;
+    OnInit(): void;
+    OnDestroy(): void;
+    OnUpdate(): void;
+    OnUpdateAttribute(): void;
+    private modify;
+    private pushStylesToParent;
+}
+export {};

package/dist/animation/animation.js

@@ -0,0 +1,55 @@
+"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.Animation = void 0;
+const custom_attributes_1 = require("@rhtml/custom-attributes");
+const animate_css_1 = require("./animate.css");
+let Animation = class Animation extends custom_attributes_1.Attribute {
+    OnInit() {
+        this.pushStylesToParent();
+        this.modify();
+    }
+    OnDestroy() {
+        this.element.classList.remove('animated', this.value);
+        this.setStyles({ animationDelay: null })(this.element);
+    }
+    OnUpdate() {
+        this.modify();
+    }
+    OnUpdateAttribute() {
+        this.modify();
+    }
+    modify() {
+        this.element.classList.add('animated', this.value);
+        this.setStyles({ animationDelay: this.delay })(this.element);
+    }
+    pushStylesToParent() {
+        var _a;
+        const style = document.createElement('style');
+        style.innerHTML = animate_css_1.Animations;
+        const root = (_a = this.parent.shadowRoot) !== null && _a !== void 0 ? _a : this.parent;
+        root.prepend(style);
+    }
+};
+__decorate([
+    custom_attributes_1.Input({ observe: true }),
+    __metadata("design:type", String)
+], Animation.prototype, "delay", void 0);
+Animation = __decorate([
+    custom_attributes_1.Modifier({
+        selector: 'animated',
+        registry() {
+            return new custom_attributes_1.CustomAttributeRegistry(this);
+        }
+    })
+], Animation);
+exports.Animation = Animation;
+//# sourceMappingURL=animation.js.map

package/dist/animation/animation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animation.js","sourceRoot":"","sources":["../../src/animation/animation.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,gEAKkC;AAElC,+CAA2C;AAa3C,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,6BAAiB;IAM9C,MAAM;QACJ,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAED,SAAS;QACP,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QACtD,IAAI,CAAC,SAAS,CAAC,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACzD,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAEO,MAAM;QACZ,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QACnD,IAAI,CAAC,SAAS,CAAC,EAAE,cAAc,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC/D,CAAC;IAEO,kBAAkB;;QACxB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC9C,KAAK,CAAC,SAAS,GAAG,wBAAU,CAAC;QAC7B,MAAM,IAAI,SAAG,IAAI,CAAC,MAAM,CAAC,UAAU,mCAAI,IAAI,CAAC,MAAM,CAAC;QACnD,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC;CACF,CAAA;AAjCC;IADC,yBAAK,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;;wCACX;AAFH,SAAS;IANrB,4BAAQ,CAAC;QACR,QAAQ,EAAE,UAAU;QACpB,QAAQ;YACN,OAAO,IAAI,2CAAuB,CAAC,IAAI,CAAC,CAAC;QAC3C,CAAC;KACF,CAAC;GACW,SAAS,CAmCrB;AAnCY,8BAAS"}

package/dist/animation/index.d.ts

@@ -0,0 +1,3 @@
+export * from './animate.css';
+export * from './animation';
+export * from './interfaces';

package/dist/animation/index.js

@@ -0,0 +1,16 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./animate.css"), exports);
+__exportStar(require("./animation"), exports);
+__exportStar(require("./interfaces"), exports);
+//# sourceMappingURL=index.js.map

package/dist/animation/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/animation/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,gDAA8B;AAC9B,8CAA4B;AAC5B,+CAA6B"}

package/dist/animation/interfaces.d.ts

@@ -0,0 +1 @@
+export declare type AnimationsType = 'slideOutDown' | 'slideOutLeft' | 'slideOutRight' | 'slideOutUp' | 'slideInUp' | 'slideInRight' | 'slideInLeft' | 'slideInDown' | 'zoomOutUp' | 'zoomOutRight' | 'zoomOutLeft' | 'zoomOutDown' | 'zoomOut' | 'zoomInUp' | 'zoomInRight' | 'zoomInLeft' | 'zoomInDown' | 'zoomIn' | 'rollOut' | 'rollIn' | 'jackInTheBox' | 'hinge' | 'rotateOutUpRight' | 'rotateOutUpLeft' | 'rotateOutDownRight' | 'rotateOutDownLeft' | 'rotateOut' | 'rotateInUpRight' | 'rotateInUpLeft' | 'rotateInDownRight' | 'rotateInDownLeft' | 'rotateIn' | 'lightSpeedOut' | 'lightSpeedIn' | 'flipOutY' | 'flipOutX' | 'flipInY' | 'flipInX' | 'flip' | 'fadeOutUpBig' | 'fadeOutUp' | 'fadeOutRightBig' | 'fadeOutRight' | 'fadeOutLeftBig' | 'fadeOutLeft' | 'fadeOutDownBig' | 'fadeOutDown' | 'fadeOut' | 'fadeInUpBig' | 'fadeInUp' | 'fadeInRightBig' | 'fadeInRight' | 'fadeInLeftBig' | 'fadeInLeft' | 'fadeInDownBig' | 'fadeInDown' | 'fadeIn' | 'bounceOutUp' | 'bounceOutRight' | 'bounceOutLeft' | 'bounceOutDown' | 'bounceOut' | 'bounceInUp' | 'bounceInRight' | 'bounceInLeft' | 'bounceInDown' | 'bounceIn' | 'heartBeat' | 'jello' | 'wobble' | 'tada' | 'swing' | 'headShake' | 'shake' | 'rubberBand' | 'pulse' | 'flash' | 'bounce';

package/dist/animation/interfaces.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=interfaces.js.map

package/dist/animation/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../src/animation/interfaces.ts"],"names":[],"mappings":""}

package/dist/index.d.ts

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

package/dist/index.js

@@ -12,4 +12,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./angular"), exports);
 __exportStar(require("./layout"), exports);
+__exportStar(require("./animation"), exports);
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,4CAA0B;AAC1B,2CAAyB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,4CAA0B;AAC1B,2CAAyB;AACzB,8CAA4B"}

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

@@ -1,12 +1,14 @@
-import { Attribute } from '@rhtml/custom-attributes';
+import { EnterMediaQueryAttributes, MediaQueryAttribute } from '@rhtml/custom-attributes';
 interface Styles {
     alignSelf: string;
 }
-export declare class FlexAlign extends Attribute<Styles> {
+export declare class FlexAlign extends MediaQueryAttribute<Styles> {
     OnInit(): void;
     OnDestroy(): void;
     OnUpdate(): void;
-    private clean;
-    private modify;
+    OnEnterMediaQuery([, attribute]: EnterMediaQueryAttributes): void;
+    OnExitMediaQuery(): void;
+    clean(): void;
+    modify(): void;
 }
 export {};

package/dist/layout/flex-align.js

@@ -8,16 +8,29 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FlexAlign = void 0;
 const custom_attributes_1 = require("@rhtml/custom-attributes");
-let FlexAlign = class FlexAlign extends custom_attributes_1.Attribute {
+let FlexAlign = class FlexAlign extends custom_attributes_1.MediaQueryAttribute {
     OnInit() {
         this.modify();
+        super.OnInit();
     }
     OnDestroy() {
         this.clean();
+        super.OnDestroy();
     }
     OnUpdate() {
         this.modify();
     }
+    OnEnterMediaQuery([, attribute]) {
+        var _a;
+        this.prevValue = this.value;
+        this.value = (_a = attribute.value) !== null && _a !== void 0 ? _a : this.value;
+        this.modify();
+    }
+    OnExitMediaQuery() {
+        var _a;
+        this.value = (_a = this.prevValue) !== null && _a !== void 0 ? _a : this.value;
+        this.modify();
+    }
     clean() {
         this.setStyles({ alignSelf: null })(this.element);
     }

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,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"}
+{"version":3,"file":"flex-align.js","sourceRoot":"","sources":["../../src/layout/flex-align.ts"],"names":[],"mappings":";;;;;;;;;AAAA,gEAIkC;AASlC,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,uCAA2B;IACxD,MAAM;QACJ,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,KAAK,CAAC,MAAM,EAAE,CAAC;IACjB,CAAC;IAED,SAAS;QACP,IAAI,CAAC,KAAK,EAAE,CAAC;QACb,KAAK,CAAC,SAAS,EAAE,CAAC;IACpB,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAED,iBAAiB,CAAC,CAAC,EAAE,SAAS,CAA4B;;QACxD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC;QAC5B,IAAI,CAAC,KAAK,SAAG,SAAS,CAAC,KAAK,mCAAI,IAAI,CAAC,KAAK,CAAC;QAC3C,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAED,gBAAgB;;QACd,IAAI,CAAC,KAAK,SAAG,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,KAAK,CAAC;QAC1C,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAED,KAAK;QACH,IAAI,CAAC,SAAS,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACpD,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,SAAS,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAClE,CAAC;CACF,CAAA;AAjCY,SAAS;IAHrB,4BAAQ,CAAC;QACR,QAAQ,EAAE,aAAa;KACxB,CAAC;GACW,SAAS,CAiCrB;AAjCY,8BAAS"}

package/dist/layout/flex.d.ts

@@ -1,14 +1,16 @@
-import { Attribute } from '@rhtml/custom-attributes';
+import { EnterMediaQueryAttributes, MediaQueryAttribute } from '@rhtml/custom-attributes';
 interface Styles {
     flex: string;
     boxSizing: string;
     maxWidth: string;
 }
-export declare class Flex extends Attribute<Styles> {
+export declare class Flex extends MediaQueryAttribute<Styles> {
     OnInit(): void;
     OnDestroy(): void;
     OnUpdate(): void;
-    private clean;
-    private modify;
+    OnEnterMediaQuery([, attribute]: EnterMediaQueryAttributes): void;
+    OnExitMediaQuery(): void;
+    clean(): void;
+    modify(): void;
 }
 export {};

package/dist/layout/flex.js

@@ -8,16 +8,29 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 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 {
+let Flex = class Flex extends custom_attributes_1.MediaQueryAttribute {
     OnInit() {
         this.modify();
+        super.OnInit();
     }
     OnDestroy() {
         this.clean();
+        super.OnDestroy();
     }
     OnUpdate() {
         this.modify();
     }
+    OnEnterMediaQuery([, attribute]) {
+        var _a;
+        this.prevValue = this.value;
+        this.value = (_a = attribute.value) !== null && _a !== void 0 ? _a : this.value;
+        this.modify();
+    }
+    OnExitMediaQuery() {
+        var _a;
+        this.value = (_a = this.prevValue) !== null && _a !== void 0 ? _a : this.value;
+        this.modify();
+    }
     clean() {
         this.setStyles({
             boxSizing: null,

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;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"}
+{"version":3,"file":"flex.js","sourceRoot":"","sources":["../../src/layout/flex.ts"],"names":[],"mappings":";;;;;;;;;AAAA,gEAIkC;AAWlC,IAAa,IAAI,GAAjB,MAAa,IAAK,SAAQ,uCAA2B;IACnD,MAAM;QACJ,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,KAAK,CAAC,MAAM,EAAE,CAAC;IACjB,CAAC;IAED,SAAS;QACP,IAAI,CAAC,KAAK,EAAE,CAAC;QACb,KAAK,CAAC,SAAS,EAAE,CAAC;IACpB,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAED,iBAAiB,CAAC,CAAC,EAAE,SAAS,CAA4B;;QACxD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC;QAC5B,IAAI,CAAC,KAAK,SAAG,SAAS,CAAC,KAAK,mCAAI,IAAI,CAAC,KAAK,CAAC;QAC3C,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAED,gBAAgB;;QACd,IAAI,CAAC,KAAK,SAAG,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,KAAK,CAAC;QAC1C,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAED,KAAK;QACH,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;IAED,MAAM;QACJ,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;AAzCY,IAAI;IAHhB,4BAAQ,CAAC;QACR,QAAQ,EAAE,QAAQ;KACnB,CAAC;GACW,IAAI,CAyChB;AAzCY,oBAAI"}

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

@@ -1,14 +1,16 @@
-import { Attribute } from '@rhtml/custom-attributes';
+import { EnterMediaQueryAttributes, MediaQueryAttribute } from '@rhtml/custom-attributes';
 interface Styles {
     placeContent: string;
     alignItems: string;
     display: string;
 }
-export declare class LayoutAlign extends Attribute<Styles> {
+export declare class LayoutAlign extends MediaQueryAttribute<Styles> {
     OnInit(): void;
     OnDestroy(): void;
     OnUpdate(): void;
-    private clean;
-    private modify;
+    OnEnterMediaQuery([, attribute]: EnterMediaQueryAttributes): void;
+    OnExitMediaQuery(): void;
+    clean(): void;
+    modify(): void;
 }
 export {};

package/dist/layout/layout-align.js

@@ -8,16 +8,29 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LayoutAlign = void 0;
 const custom_attributes_1 = require("@rhtml/custom-attributes");
-let LayoutAlign = class LayoutAlign extends custom_attributes_1.Attribute {
+let LayoutAlign = class LayoutAlign extends custom_attributes_1.MediaQueryAttribute {
     OnInit() {
         this.modify();
+        super.OnInit();
     }
     OnDestroy() {
         this.clean();
+        super.OnDestroy();
     }
     OnUpdate() {
         this.modify();
     }
+    OnEnterMediaQuery([, attribute]) {
+        var _a;
+        this.prevValue = this.value;
+        this.value = (_a = attribute.value) !== null && _a !== void 0 ? _a : this.value;
+        this.modify();
+    }
+    OnExitMediaQuery() {
+        var _a;
+        this.value = (_a = this.prevValue) !== null && _a !== void 0 ? _a : this.value;
+        this.modify();
+    }
     clean() {
         this.setStyles({
             alignItems: null,

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,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"}
+{"version":3,"file":"layout-align.js","sourceRoot":"","sources":["../../src/layout/layout-align.ts"],"names":[],"mappings":";;;;;;;;;AAAA,gEAIkC;AAWlC,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,uCAA2B;IAC1D,MAAM;QACJ,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,KAAK,CAAC,MAAM,EAAE,CAAC;IACjB,CAAC;IAED,SAAS;QACP,IAAI,CAAC,KAAK,EAAE,CAAC;QACb,KAAK,CAAC,SAAS,EAAE,CAAC;IACpB,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAED,iBAAiB,CAAC,CAAC,EAAE,SAAS,CAA4B;;QACxD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC;QAC5B,IAAI,CAAC,KAAK,SAAG,SAAS,CAAC,KAAK,mCAAI,IAAI,CAAC,KAAK,CAAC;QAC3C,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAED,gBAAgB;;QACd,IAAI,CAAC,KAAK,SAAG,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,KAAK,CAAC;QAC1C,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAED,KAAK;QACH,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;IAED,MAAM;QACJ,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;AA5CY,WAAW;IAHvB,4BAAQ,CAAC;QACR,QAAQ,EAAE,eAAe;KAC1B,CAAC;GACW,WAAW,CA4CvB;AA5CY,kCAAW"}

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

@@ -1,14 +1,16 @@
-import { Attribute } from '@rhtml/custom-attributes';
+import { EnterMediaQueryAttributes, MediaQueryAttribute } from '@rhtml/custom-attributes';
 interface Styles {
     margin: string;
     flex: string;
 }
-export declare class LayoutGap extends Attribute<Styles> {
+export declare class LayoutGap extends MediaQueryAttribute<Styles> {
     private observer;
     OnInit(): void;
     OnDestroy(): void;
     OnUpdate(): void;
-    private clean;
-    private modify;
+    OnEnterMediaQuery([, attribute]: EnterMediaQueryAttributes): void;
+    OnExitMediaQuery(): void;
+    clean(): void;
+    modify(): void;
 }
 export {};

package/dist/layout/layout-gap.js

@@ -8,22 +8,39 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LayoutGap = void 0;
 const custom_attributes_1 = require("@rhtml/custom-attributes");
-let LayoutGap = class LayoutGap extends custom_attributes_1.Attribute {
+let LayoutGap = class LayoutGap extends custom_attributes_1.MediaQueryAttribute {
     OnInit() {
         this.modify();
         this.observer = new MutationObserver(() => this.modify());
         this.observer.observe(this.element, {
             childList: true,
-            subtree: true
+            subtree: true,
+            attributes: true,
+            attributeFilter: custom_attributes_1.createFiltersFromSelector('fxlayout')
         });
+        super.OnInit();
     }
     OnDestroy() {
         this.clean();
         this.observer.disconnect();
+        super.OnDestroy();
     }
     OnUpdate() {
         this.modify();
     }
+    OnEnterMediaQuery([, attribute]) {
+        var _a;
+        this.prevValue = this.value;
+        this.value = (_a = attribute.value) !== null && _a !== void 0 ? _a : this.value;
+        this.modify();
+    }
+    OnExitMediaQuery() {
+        var _a;
+        this.value = (_a = this.prevValue) !== null && _a !== void 0 ? _a : this.value;
+        this.modify();
+    }
+    // OnElementAttributeChange() {
+    // }
     clean() {
         const divs = [...this.element.children];
         for (const div of divs) {
@@ -34,11 +51,19 @@ let LayoutGap = class LayoutGap extends custom_attributes_1.Attribute {
         }
     }
     modify() {
+        const layout = this.element.getAttribute('fxlayout');
+        let margin = `0px ${this.value} ${this.value} 0px`;
+        if (layout === 'row') {
+            margin = `0px ${this.value} 0px 0px`;
+        }
+        if (layout === 'column') {
+            margin = `0px 0px ${this.value} 0px`;
+        }
         const divs = this.element.children;
         for (const div of divs) {
             this.setStyles({
                 flex: '1 1 25%',
-                margin: `0px ${this.value} ${this.value} 0px`
+                margin
             })(div);
         }
     }

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,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"}
+{"version":3,"file":"layout-gap.js","sourceRoot":"","sources":["../../src/layout/layout-gap.ts"],"names":[],"mappings":";;;;;;;;;AAAA,gEAKkC;AAUlC,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,uCAA2B;IAGxD,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;YACb,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,6CAAyB,CAAC,UAAU,CAAC;SACvD,CAAC,CAAC;QACH,KAAK,CAAC,MAAM,EAAE,CAAC;IACjB,CAAC;IAED,SAAS;QACP,IAAI,CAAC,KAAK,EAAE,CAAC;QACb,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;QAC3B,KAAK,CAAC,SAAS,EAAE,CAAC;IACpB,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAED,iBAAiB,CAAC,CAAC,EAAE,SAAS,CAA4B;;QACxD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC;QAC5B,IAAI,CAAC,KAAK,SAAG,SAAS,CAAC,KAAK,mCAAI,IAAI,CAAC,KAAK,CAAC;QAC3C,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAED,gBAAgB;;QACd,IAAI,CAAC,KAAK,SAAG,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,KAAK,CAAC;QAC1C,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAED,+BAA+B;IAE/B,IAAI;IAEJ,KAAK;QACH,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;IAED,MAAM;QACJ,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;QACrD,IAAI,MAAM,GAAG,OAAO,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,MAAM,CAAC;QACnD,IAAI,MAAM,KAAK,KAAK,EAAE;YACpB,MAAM,GAAG,OAAO,IAAI,CAAC,KAAK,UAAU,CAAC;SACtC;QACD,IAAI,MAAM,KAAK,QAAQ,EAAE;YACvB,MAAM,GAAG,WAAW,IAAI,CAAC,KAAK,MAAM,CAAC;SACtC;QACD,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;aACP,CAAC,CAAC,GAAG,CAAC,CAAC;SACT;IACH,CAAC;CACF,CAAA;AAnEY,SAAS;IAHrB,4BAAQ,CAAC;QACR,QAAQ,EAAE,aAAa;KACxB,CAAC;GACW,SAAS,CAmErB;AAnEY,8BAAS"}

package/dist/layout/layout.d.ts

@@ -1,15 +1,17 @@
-import { Attribute } from '@rhtml/custom-attributes';
+import { EnterMediaQueryAttributes, MediaQueryAttribute } from '@rhtml/custom-attributes';
 interface Styles {
     flexFlow: string;
     boxSizing: string;
     display: string;
 }
-export declare class Layout extends Attribute<Styles> {
+export declare class Layout extends MediaQueryAttribute<Styles> {
     value: string;
     OnInit(): void;
     OnDestroy(): void;
     OnUpdate(): void;
-    private clean;
-    private modify;
+    OnEnterMediaQuery([, attribute]: EnterMediaQueryAttributes): void;
+    OnExitMediaQuery(): void;
+    clean(): void;
+    modify(): void;
 }
 export {};

package/dist/layout/layout.js

@@ -8,20 +8,35 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Layout = void 0;
 const custom_attributes_1 = require("@rhtml/custom-attributes");
-let Layout = class Layout extends custom_attributes_1.Attribute {
+let Layout = class Layout extends custom_attributes_1.MediaQueryAttribute {
     constructor() {
         super(...arguments);
         this.value = 'row';
     }
     OnInit() {
         this.modify();
+        super.OnInit();
     }
     OnDestroy() {
         this.clean();
+        super.OnDestroy();
     }
     OnUpdate() {
         this.modify();
     }
+    OnEnterMediaQuery([, attribute]) {
+        var _a;
+        this.prevValue = this.value;
+        this.value = (_a = attribute.value) !== null && _a !== void 0 ? _a : this.value;
+        this.modify();
+        this.element.setAttribute('fxlayout', this.value);
+    }
+    OnExitMediaQuery() {
+        var _a;
+        this.value = (_a = this.prevValue) !== null && _a !== void 0 ? _a : this.value;
+        this.modify();
+        this.element.setAttribute('fxlayout', this.value);
+    }
     clean() {
         this.setStyles({
             boxSizing: null,
@@ -30,6 +45,9 @@ let Layout = class Layout extends custom_attributes_1.Attribute {
         })(this.element);
     }
     modify() {
+        if (!this.value) {
+            return;
+        }
         const splitted = this.value.split(' ');
         const [mainAxis, crossAxis] = splitted;
         this.setStyles({

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,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"}
+{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../src/layout/layout.ts"],"names":[],"mappings":";;;;;;;;;AAAA,gEAIkC;AAWlC,IAAa,MAAM,GAAnB,MAAa,MAAO,SAAQ,uCAA2B;IAAvD;;QACE,UAAK,GAAG,KAAK,CAAC;IAiDhB,CAAC;IA/CC,MAAM;QACJ,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,KAAK,CAAC,MAAM,EAAE,CAAC;IACjB,CAAC;IAED,SAAS;QACP,IAAI,CAAC,KAAK,EAAE,CAAC;QACb,KAAK,CAAC,SAAS,EAAE,CAAC;IACpB,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAED,iBAAiB,CAAC,CAAC,EAAE,SAAS,CAA4B;;QACxD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC;QAC5B,IAAI,CAAC,KAAK,SAAG,SAAS,CAAC,KAAK,mCAAI,IAAI,CAAC,KAAK,CAAC;QAC3C,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IACpD,CAAC;IAED,gBAAgB;;QACd,IAAI,CAAC,KAAK,SAAG,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,KAAK,CAAC;QAC1C,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IACpD,CAAC;IAED,KAAK;QACH,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;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACf,OAAO;SACR;QACD,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;AAlDY,MAAM;IAHlB,4BAAQ,CAAC;QACR,QAAQ,EAAE,UAAU;KACrB,CAAC;GACW,MAAM,CAkDlB;AAlDY,wBAAM"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rhtml/modifiers",
-  "version": "0.0.109",
+  "version": "0.0.112",
   "description": "Reactive HyperText Markup Language",
   "scripts": {
     "start": "npx parcel ./examples/index.html --out-dir build/examples",
@@ -9,7 +9,7 @@
     "clean": "git clean -dxf",
     "lint": "npx eslint . --ext .ts",
     "lint-fix": "npx eslint . --fix --ext .ts",
-    "build": "rm -rf dist && npx npx tsc"
+    "build": "rm -rf dist && npx tsc"
   },
   "repository": {
     "type": "git",
@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@rxdi/lit-html": "^0.7.133",
-    "@rhtml/custom-attributes": "0.0.109"
+    "@rhtml/custom-attributes": "0.0.112"
   },
   "devDependencies": {
     "eslint": "^6.7.2",