@rhtml/modifiers 0.0.109 → 0.0.110

package/src/animation/animation.ts

@@ -0,0 +1,56 @@
+import {
+  Attribute,
+  CustomAttributeRegistry,
+  Input,
+  Modifier
+} from '@rhtml/custom-attributes';
+
+import { Animations } from './animate.css';
+import { AnimationsType } from './interfaces';
+
+interface Styles {
+  animationDelay: string;
+}
+
+@Modifier({
+  selector: 'animated',
+  registry(this: HTMLElement) {
+    return new CustomAttributeRegistry(this);
+  }
+})
+export class Animation extends Attribute<Styles> {
+  @Input({ observe: true })
+  delay: string;
+
+  value: AnimationsType;
+
+  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();
+  }
+
+  private modify() {
+    this.element.classList.add('animated', this.value);
+    this.setStyles({ animationDelay: this.delay })(this.element);
+  }
+
+  private pushStylesToParent() {
+    const style = document.createElement('style');
+    style.innerHTML = Animations;
+    const root = this.parent.shadowRoot ?? this.parent;
+    root.prepend(style);
+  }
+}

package/src/animation/index.ts

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

package/src/animation/interfaces.ts

@@ -0,0 +1,79 @@
+export 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/src/index.ts

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