@rhtml/modifiers 0.0.109 → 0.0.112

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';

package/src/layout/flex-align.ts

@@ -1,4 +1,8 @@
-import { Attribute, Modifier } from '@rhtml/custom-attributes';
+import {
+  EnterMediaQueryAttributes,
+  MediaQueryAttribute,
+  Modifier
+} from '@rhtml/custom-attributes';
 
 interface Styles {
   alignSelf: string;
@@ -7,24 +11,37 @@ interface Styles {
 @Modifier({
   selector: 'fxFlexAlign'
 })
-export class FlexAlign extends Attribute<Styles> {
+export class FlexAlign extends MediaQueryAttribute<Styles> {
   OnInit() {
     this.modify();
+    super.OnInit();
   }
 
   OnDestroy() {
     this.clean();
+    super.OnDestroy();
   }
 
   OnUpdate() {
     this.modify();
   }
 
-  private clean() {
+  OnEnterMediaQuery([, attribute]: EnterMediaQueryAttributes) {
+    this.prevValue = this.value;
+    this.value = attribute.value ?? this.value;
+    this.modify();
+  }
+
+  OnExitMediaQuery() {
+    this.value = this.prevValue ?? this.value;
+    this.modify();
+  }
+
+  clean() {
     this.setStyles({ alignSelf: null })(this.element);
   }
 
-  private modify() {
+  modify() {
     this.setStyles({ alignSelf: this.value || null })(this.element);
   }
 }

package/src/layout/flex.ts

@@ -1,4 +1,8 @@
-import { Attribute, Modifier } from '@rhtml/custom-attributes';
+import {
+  EnterMediaQueryAttributes,
+  MediaQueryAttribute,
+  Modifier
+} from '@rhtml/custom-attributes';
 
 interface Styles {
   flex: string;
@@ -9,20 +13,33 @@ interface Styles {
 @Modifier({
   selector: 'fxFlex'
 })
-export class Flex extends Attribute<Styles> {
+export class Flex extends MediaQueryAttribute<Styles> {
   OnInit() {
     this.modify();
+    super.OnInit();
   }
 
   OnDestroy() {
     this.clean();
+    super.OnDestroy();
   }
 
   OnUpdate() {
     this.modify();
   }
 
-  private clean() {
+  OnEnterMediaQuery([, attribute]: EnterMediaQueryAttributes) {
+    this.prevValue = this.value;
+    this.value = attribute.value ?? this.value;
+    this.modify();
+  }
+
+  OnExitMediaQuery() {
+    this.value = this.prevValue ?? this.value;
+    this.modify();
+  }
+
+  clean() {
     this.setStyles({
       boxSizing: null,
       maxWidth: null,
@@ -30,7 +47,7 @@ export class Flex extends Attribute<Styles> {
     })(this.element);
   }
 
-  private modify() {
+  modify() {
     this.setStyles({
       boxSizing: 'border-box',
       maxWidth: this.value || null,

package/src/layout/layout-align.ts

@@ -1,4 +1,8 @@
-import { Attribute, Modifier } from '@rhtml/custom-attributes';
+import {
+  EnterMediaQueryAttributes,
+  MediaQueryAttribute,
+  Modifier
+} from '@rhtml/custom-attributes';
 
 interface Styles {
   placeContent: string;
@@ -9,20 +13,33 @@ interface Styles {
 @Modifier({
   selector: 'fxLayoutAlign'
 })
-export class LayoutAlign extends Attribute<Styles> {
+export class LayoutAlign extends MediaQueryAttribute<Styles> {
   OnInit() {
     this.modify();
+    super.OnInit();
   }
 
   OnDestroy() {
     this.clean();
+    super.OnDestroy();
   }
 
   OnUpdate() {
     this.modify();
   }
 
-  private clean() {
+  OnEnterMediaQuery([, attribute]: EnterMediaQueryAttributes) {
+    this.prevValue = this.value;
+    this.value = attribute.value ?? this.value;
+    this.modify();
+  }
+
+  OnExitMediaQuery() {
+    this.value = this.prevValue ?? this.value;
+    this.modify();
+  }
+
+  clean() {
     this.setStyles({
       alignItems: null,
       placeContent: null,
@@ -30,7 +47,7 @@ export class LayoutAlign extends Attribute<Styles> {
     })(this.element);
   }
 
-  private modify() {
+  modify() {
     const [mainAxis, crossAxis] = this.value.split(' ');
     this.setStyles({
       alignItems: crossAxis ? crossAxis : mainAxis,

package/src/layout/layout-gap.ts

@@ -1,4 +1,9 @@
-import { Attribute, Modifier } from '@rhtml/custom-attributes';
+import {
+  createFiltersFromSelector,
+  EnterMediaQueryAttributes,
+  MediaQueryAttribute,
+  Modifier
+} from '@rhtml/custom-attributes';
 
 interface Styles {
   margin: string;
@@ -8,7 +13,7 @@ interface Styles {
 @Modifier({
   selector: 'fxLayoutGap'
 })
-export class LayoutGap extends Attribute<Styles> {
+export class LayoutGap extends MediaQueryAttribute<Styles> {
   private observer: MutationObserver;
 
   OnInit() {
@@ -16,20 +21,39 @@ export class LayoutGap extends Attribute<Styles> {
     this.observer = new MutationObserver(() => this.modify());
     this.observer.observe(this.element, {
       childList: true,
-      subtree: true
+      subtree: true,
+      attributes: true,
+      attributeFilter: createFiltersFromSelector('fxlayout')
     });
+    super.OnInit();
   }
 
   OnDestroy() {
     this.clean();
     this.observer.disconnect();
+    super.OnDestroy();
   }
 
   OnUpdate() {
     this.modify();
   }
 
-  private clean() {
+  OnEnterMediaQuery([, attribute]: EnterMediaQueryAttributes) {
+    this.prevValue = this.value;
+    this.value = attribute.value ?? this.value;
+    this.modify();
+  }
+
+  OnExitMediaQuery() {
+    this.value = this.prevValue ?? this.value;
+    this.modify();
+  }
+
+  // OnElementAttributeChange() {
+
+  // }
+
+  clean() {
     const divs = [...this.element.children] as HTMLElement[];
     for (const div of divs) {
       this.setStyles({
@@ -39,12 +63,20 @@ export class LayoutGap extends Attribute<Styles> {
     }
   }
 
-  private modify() {
+  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/src/layout/layout.ts

@@ -1,4 +1,8 @@
-import { Attribute, Modifier } from '@rhtml/custom-attributes';
+import {
+  EnterMediaQueryAttributes,
+  MediaQueryAttribute,
+  Modifier
+} from '@rhtml/custom-attributes';
 
 interface Styles {
   flexFlow: string;
@@ -9,29 +13,48 @@ interface Styles {
 @Modifier({
   selector: 'fxLayout'
 })
-export class Layout extends Attribute<Styles> {
+export class Layout extends MediaQueryAttribute<Styles> {
   value = 'row';
 
   OnInit() {
     this.modify();
+    super.OnInit();
   }
 
   OnDestroy() {
     this.clean();
+    super.OnDestroy();
   }
 
   OnUpdate() {
     this.modify();
   }
 
-  private clean() {
+  OnEnterMediaQuery([, attribute]: EnterMediaQueryAttributes) {
+    this.prevValue = this.value;
+    this.value = attribute.value ?? this.value;
+    this.modify();
+    this.element.setAttribute('fxlayout', this.value);
+  }
+
+  OnExitMediaQuery() {
+    this.value = this.prevValue ?? this.value;
+    this.modify();
+    this.element.setAttribute('fxlayout', this.value);
+  }
+
+  clean() {
     this.setStyles({
       boxSizing: null,
       flexFlow: null,
       display: null
     })(this.element);
   }
-  private modify() {
+
+  modify() {
+    if (!this.value) {
+      return;
+    }
     const splitted = this.value.split(' ');
     const [mainAxis, crossAxis] = splitted;
     this.setStyles({