@rhtml/modifiers 0.0.107 → 0.0.110

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rhtml/modifiers",
-  "version": "0.0.107",
+  "version": "0.0.110",
   "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.107"
+    "@rhtml/custom-attributes": "0.0.110"
   },
   "devDependencies": {
     "eslint": "^6.7.2",

package/src/angular/if.ts

@@ -20,9 +20,9 @@ export class IfOperator extends Attribute<Styles> {
 
   private modify() {
     if (this.value === 'true') {
-      this.setStyles({ display: null });
+      this.setStyles({ display: null })(this.element);
     } else {
-      this.setStyles({ display: 'none' });
+      this.setStyles({ display: 'none' })(this.element);
     }
   }
 }