@rhtml/modifiers 0.0.96 → 0.0.99

package/src/layout/index.ts

@@ -1,60 +1,21 @@
-import {
-  Component,
-  html,
-  LitElement,
-  OnDestroy,
-  OnUpdateFirst,
-  property,
-  query,
-  TemplateResult
-} from '@rxdi/lit-html';
-
-import { recursion } from './modifiers';
-
-@Component({
-  selector: 'flex-layout',
-  template() {
-    return html`
-      <slot></slot>
-    `;
-  }
-})
-export class FlexLayout extends LitElement implements OnUpdateFirst, OnDestroy {
-  /* Keep in mind that `this` here is the parent component where modifier will be used */
-  public static modifier(template: TemplateResult): TemplateResult {
-    return html`
-      <flex-layout .parent=${this}>${template}</flex-layout>
-    `;
-  }
-
-  @property()
-  public parent: LitElement;
-
-  @query('slot')
-  private container: HTMLSlotElement;
-
-  private observer: MutationObserver;
-
-  OnUpdateFirst() {
-    this.triggerChanges();
-    this.listenForTreeChanges();
-  }
-
-  OnDestroy() {
-    this.observer.disconnect();
-  }
-
-  private listenForTreeChanges() {
-    this.observer = new MutationObserver(() => this.triggerChanges());
-    this.observer.observe(this.parent.shadowRoot, {
-      subtree: true,
-      childList: true
-    });
-  }
-
-  private triggerChanges() {
-    for (const div of this.container.assignedElements()) {
-      recursion.call(this.parent, div);
-    }
-  }
-}
+import { Flex } from './flex';
+import { FlexAlign } from './flex-align';
+import { FlexFill } from './flex-fill';
+import { FlexOffset } from './flex-offset';
+import { FlexOrder } from './flex-order';
+import { Layout } from './layout';
+import { LayoutAlign } from './layout-align';
+import { LayoutGap } from './layout-gap';
+
+export * from './layout';
+
+export const FlexLayout = [
+  Layout,
+  LayoutAlign,
+  LayoutGap,
+  FlexFill,
+  Flex,
+  FlexAlign,
+  FlexOffset,
+  FlexOrder
+];

package/src/layout/layout-align.ts

@@ -0,0 +1,46 @@
+import { Attribute } from '@rhtml/custom-attributes';
+
+interface Styles {
+  'place-content': string;
+  'align-items': string;
+  display: string;
+}
+
+export class LayoutAlign extends Attribute<Styles> {
+  static options(this: HTMLElement) {
+    return {
+      name: 'fxLayoutAlign'
+    };
+  }
+
+  OnInit() {
+    this.modify();
+  }
+
+  OnDestroy() {
+    this.clean();
+  }
+
+  OnUpdate() {
+    this.modify();
+  }
+
+  private clean() {
+    this.setStyles({
+      'align-items': null,
+      'place-content': null,
+      display: null
+    })(this.element);
+  }
+
+  private modify() {
+    const [mainAxis, crossAxis] = this.value.split(' ');
+    this.setStyles({
+      'align-items': crossAxis ? crossAxis : mainAxis,
+      'place-content': crossAxis
+        ? `${crossAxis} ${mainAxis}`
+        : `${mainAxis} ${mainAxis}`,
+      display: 'flex'
+    })(this.element);
+  }
+}

package/src/layout/layout-gap.ts

@@ -0,0 +1,54 @@
+import { Attribute } from '@rhtml/custom-attributes';
+
+interface Styles {
+  margin: string;
+  flex: string;
+}
+
+export class LayoutGap extends Attribute<Styles> {
+  static options(this: HTMLElement) {
+    return {
+      name: 'fxLayoutGap'
+    };
+  }
+
+  private observer: MutationObserver;
+
+  OnInit() {
+    this.modify();
+    this.observer = new MutationObserver(() => this.modify());
+    this.observer.observe(this.element, {
+      childList: true,
+      subtree: true
+    });
+  }
+
+  OnDestroy() {
+    this.clean();
+    this.observer.disconnect();
+  }
+
+  OnUpdate() {
+    this.modify();
+  }
+
+  private clean() {
+    const divs = [...this.element.children] as HTMLElement[];
+    for (const div of divs) {
+      this.setStyles({
+        flex: null,
+        margin: null
+      })(div);
+    }
+  }
+
+  private modify() {
+    const divs = this.element.children;
+    for (const div of divs) {
+      this.setStyles({
+        flex: '1 1 25%',
+        margin: `0px ${this.value} ${this.value} 0px`
+      })(div);
+    }
+  }
+}

package/src/layout/layout.ts

@@ -0,0 +1,46 @@
+import { Attribute, CustomAttributeRegistry } from '@rhtml/custom-attributes';
+
+interface Styles {
+  'flex-flow': string;
+  'box-sizing': string;
+  display: string;
+}
+
+export class Layout extends Attribute<Styles> {
+  value = 'row';
+  static options(this: HTMLElement) {
+    return {
+      name: 'fxLayout',
+      registry: new CustomAttributeRegistry(this.shadowRoot)
+    };
+  }
+
+  OnInit() {
+    this.modify();
+  }
+
+  OnDestroy() {
+    this.clean();
+  }
+
+  OnUpdate() {
+    this.modify();
+  }
+
+  private clean() {
+    this.setStyles({
+      'box-sizing': null,
+      'flex-flow': null,
+      display: null
+    })(this.element);
+  }
+  private modify() {
+    const splitted = this.value.split(' ');
+    const [mainAxis, crossAxis] = splitted;
+    this.setStyles({
+      'box-sizing': 'flex',
+      'flex-flow': splitted.length > 1 ? `${mainAxis} ${crossAxis}` : mainAxis,
+      display: 'flex'
+    })(this.element);
+  }
+}

package/dist/helpers/index.d.ts

@@ -1,2 +0,0 @@
-export declare const isAttribute: (attr: string) => boolean | string;
-export declare const subscribeToAttributeChanges: (name: string) => (fn: (element: HTMLElement) => void) => (element: HTMLElement) => void;

package/dist/helpers/index.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.subscribeToAttributeChanges = exports.isAttribute = void 0;
-exports.isAttribute = (attr) => typeof attr === 'string' && (attr || attr === '');
-exports.subscribeToAttributeChanges = (name) => (fn) => (element) => {
-    fn(element);
-    return new MutationObserver(() => fn(element)).observe(element, {
-        attributeFilter: [name.toLocaleLowerCase()],
-        attributes: true
-    });
-};
-//# sourceMappingURL=index.js.map

package/dist/helpers/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/helpers/index.ts"],"names":[],"mappings":";;;AAAa,QAAA,WAAW,GAAG,CAAC,IAAY,EAAoB,EAAE,CAC5D,OAAO,IAAI,KAAK,QAAQ,IAAI,CAAC,IAAI,IAAI,IAAI,KAAK,EAAE,CAAC,CAAC;AAEvC,QAAA,2BAA2B,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC,CAC3D,EAAkC,EAClC,EAAE,CAAC,CAAC,OAAoB,EAAE,EAAE;IAC5B,EAAE,CAAC,OAAO,CAAC,CAAC;IACZ,OAAO,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,EAAE;QAC9D,eAAe,EAAE,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC3C,UAAU,EAAE,IAAI;KACjB,CAAC,CAAC;AACL,CAAC,CAAC"}

package/dist/layout/modifiers.d.ts

@@ -1,23 +0,0 @@
-export declare type FxLayout = 'row' | 'column' | 'row-reverse' | 'column-reverse';
-export declare type MainAxis = 'start' | 'center' | 'end' | 'space-around' | 'space-between' | 'space-evenly';
-export declare type CrossAxis = 'start' | 'center' | 'end' | 'stretch' | 'space-between' | 'space-around' | 'baseline';
-export declare enum Attributes {
-    FxLayout = "fxLayout",
-    FxFlex = "fxFlex",
-    FxFlexFill = "fxFlexFill",
-    FxLayoutAlign = "fxLayoutAlign",
-    FxLayoutGap = "fxLayoutGap",
-    FxFlexAlign = "fxFlexAlign",
-    FxFlexOffset = "fxFlexOffset",
-    FxFlexOrder = "fxFlexOrder"
-}
-export declare const isAttribute: (attr: string) => boolean | string;
-export declare const setFxLayoutAlign: (element: HTMLElement) => void;
-export declare const setChildrensFlexFill: (div: HTMLElement) => void;
-export declare const setChildrensFlex: (div: HTMLElement) => void;
-export declare const setFlexAlign: (div: HTMLElement) => void;
-export declare const setFlexOffset: (div: HTMLElement) => void;
-export declare const setFlexOrder: (div: HTMLElement) => void;
-export declare const subscribeToAttributeChanges: (name: string) => (fn: (element: HTMLElement) => void) => (element: HTMLElement) => void;
-export declare const setFxLayout: (element: HTMLElement) => void;
-export declare function recursion(div: HTMLElement): void;

package/dist/layout/modifiers.js

@@ -1,131 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.recursion = exports.setFxLayout = exports.subscribeToAttributeChanges = exports.setFlexOrder = exports.setFlexOffset = exports.setFlexAlign = exports.setChildrensFlex = exports.setChildrensFlexFill = exports.setFxLayoutAlign = exports.isAttribute = exports.Attributes = void 0;
-var Attributes;
-(function (Attributes) {
-    Attributes["FxLayout"] = "fxLayout";
-    Attributes["FxFlex"] = "fxFlex";
-    Attributes["FxFlexFill"] = "fxFlexFill";
-    Attributes["FxLayoutAlign"] = "fxLayoutAlign";
-    Attributes["FxLayoutGap"] = "fxLayoutGap";
-    Attributes["FxFlexAlign"] = "fxFlexAlign";
-    Attributes["FxFlexOffset"] = "fxFlexOffset";
-    Attributes["FxFlexOrder"] = "fxFlexOrder";
-})(Attributes = exports.Attributes || (exports.Attributes = {}));
-/* TODO we need to update to typescript 4 */
-// export type FxLayoutAlign = `${MainAxis} ${CrossAxis}`;
-exports.isAttribute = (attr) => typeof attr === 'string' && (attr || attr === '');
-exports.setFxLayoutAlign = (element) => {
-    const fxLayoutAlign = element.getAttribute(Attributes.FxLayoutAlign);
-    if (exports.isAttribute(fxLayoutAlign)) {
-        const [mainAxis, crossAxis] = fxLayoutAlign.split(' ');
-        element.style['place-content'] = crossAxis
-            ? `${crossAxis} ${mainAxis}`
-            : `${mainAxis} ${mainAxis}`;
-        element.style['align-items'] = crossAxis ? crossAxis : mainAxis;
-    }
-    element.style['display'] = 'flex';
-};
-exports.setChildrensFlexFill = (div) => {
-    const fxFlexFill = div.getAttribute(Attributes.FxFlexFill);
-    if (exports.isAttribute(fxFlexFill)) {
-        div.style['margin'] = '0';
-        div.style['width'] = '100%';
-        div.style['height'] = '100%';
-        div.style['min-width'] = '100%';
-        div.style['min-height	'] = '100%';
-    }
-};
-exports.setChildrensFlex = (div) => {
-    const fxFlex = div.getAttribute(Attributes.FxFlex);
-    if (exports.isAttribute(fxFlex)) {
-        div.style['flex'] = '1 1 100%';
-        div.style['box-sizing'] = 'border-box';
-        if (fxFlex) {
-            div.style['max-width'] = fxFlex;
-        }
-    }
-};
-exports.setFlexAlign = (div) => {
-    const fxFlexAlign = div.getAttribute(Attributes.FxFlexAlign);
-    if (exports.isAttribute(fxFlexAlign)) {
-        div.style['align-self'] = fxFlexAlign;
-    }
-};
-exports.setFlexOffset = (div) => {
-    const fxFlexOffset = div.getAttribute(Attributes.FxFlexOffset);
-    if (exports.isAttribute(fxFlexOffset)) {
-        div.style['margin-left'] = fxFlexOffset;
-    }
-};
-exports.setFlexOrder = (div) => {
-    const fxFlexOrder = div.getAttribute(Attributes.FxFlexOrder);
-    if (exports.isAttribute(fxFlexOrder)) {
-        div.style['order'] = fxFlexOrder;
-    }
-    else {
-        div.style['order'] = '0';
-    }
-};
-exports.subscribeToAttributeChanges = (name) => (fn) => (element) => {
-    fn(element);
-    return new MutationObserver(() => fn(element)).observe(element, {
-        attributeFilter: [name.toLocaleLowerCase()],
-        attributes: true
-    });
-};
-exports.setFxLayout = (element) => {
-    const layout = element.getAttribute(Attributes.FxLayout);
-    if (exports.isAttribute(layout)) {
-        const splitted = layout.split(' ');
-        const [mainAxis, crossAxis] = splitted;
-        element.style['flex-flow'] =
-            splitted.length > 1 ? `${mainAxis} ${crossAxis}` : mainAxis;
-        element.style['box-sizing'] = 'flex';
-        element.style['display'] = 'flex';
-    }
-};
-function recursion(div) {
-    const fxFlex = div.getAttribute(Attributes.FxFlex);
-    const fxFlexFill = div.getAttribute(Attributes.FxFlexFill);
-    const fxLayout = div.getAttribute(Attributes.FxLayout);
-    const fxLayoutAlign = div.getAttribute(Attributes.FxLayoutAlign);
-    const fxLayoutGap = div.getAttribute(Attributes.FxLayoutGap);
-    const fxFlexAlign = div.getAttribute(Attributes.FxFlexAlign);
-    const fxFlexOffset = div.getAttribute(Attributes.FxFlexOffset);
-    const fxFlexOrder = div.getAttribute(Attributes.FxFlexOrder);
-    if (exports.isAttribute(fxFlexOrder)) {
-        exports.subscribeToAttributeChanges(Attributes.FxFlexOrder)(exports.setFlexOrder)(div);
-    }
-    if (exports.isAttribute(fxFlexOffset)) {
-        exports.subscribeToAttributeChanges(Attributes.FxFlexAlign)(exports.setFlexOffset)(div);
-    }
-    if (exports.isAttribute(fxFlexAlign)) {
-        exports.subscribeToAttributeChanges(Attributes.FxFlexAlign)(exports.setFlexAlign)(div);
-    }
-    if (exports.isAttribute(fxFlex)) {
-        exports.subscribeToAttributeChanges(Attributes.FxFlex)(exports.setChildrensFlex)(div);
-    }
-    if (exports.isAttribute(fxFlexFill)) {
-        exports.subscribeToAttributeChanges(Attributes.FxFlexFill)(exports.setChildrensFlexFill)(div);
-    }
-    if (exports.isAttribute(fxLayout)) {
-        exports.subscribeToAttributeChanges(Attributes.FxLayout)(exports.setFxLayout)(div);
-    }
-    if (exports.isAttribute(fxLayoutAlign)) {
-        exports.subscribeToAttributeChanges(Attributes.FxLayoutAlign)(exports.setFxLayoutAlign)(div);
-    }
-    if (exports.isAttribute(fxLayoutGap)) {
-        const divs = [...div.children];
-        for (const div of divs) {
-            div.style['margin'] = `0px ${fxLayoutGap} ${fxLayoutGap} 0px`;
-            div.style.flex = '1 1 25%';
-        }
-    }
-    const divs = [...div.children];
-    for (const div of divs) {
-        recursion.call(this, div);
-    }
-}
-exports.recursion = recursion;
-//# sourceMappingURL=modifiers.js.map

package/dist/layout/modifiers.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"modifiers.js","sourceRoot":"","sources":["../../src/layout/modifiers.ts"],"names":[],"mappings":"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"}

package/src/helpers/index.ts

@@ -1,12 +0,0 @@
-export const isAttribute = (attr: string): boolean | string =>
-  typeof attr === 'string' && (attr || attr === '');
-
-export const subscribeToAttributeChanges = (name: string) => (
-  fn: (element: HTMLElement) => void
-) => (element: HTMLElement) => {
-  fn(element);
-  return new MutationObserver(() => fn(element)).observe(element, {
-    attributeFilter: [name.toLocaleLowerCase()],
-    attributes: true
-  });
-};

package/src/layout/modifiers.ts

@@ -1,167 +0,0 @@
-export type FxLayout = 'row' | 'column' | 'row-reverse' | 'column-reverse';
-
-export type MainAxis =
-  | 'start'
-  | 'center'
-  | 'end'
-  | 'space-around'
-  | 'space-between'
-  | 'space-evenly';
-export type CrossAxis =
-  | 'start'
-  | 'center'
-  | 'end'
-  | 'stretch'
-  | 'space-between'
-  | 'space-around'
-  | 'baseline';
-
-export enum Attributes {
-  FxLayout = 'fxLayout',
-  FxFlex = 'fxFlex',
-  FxFlexFill = 'fxFlexFill',
-  FxLayoutAlign = 'fxLayoutAlign',
-  FxLayoutGap = 'fxLayoutGap',
-  FxFlexAlign = 'fxFlexAlign',
-  FxFlexOffset = 'fxFlexOffset',
-  FxFlexOrder = 'fxFlexOrder'
-}
-/* TODO we need to update to typescript 4 */
-// export type FxLayoutAlign = `${MainAxis} ${CrossAxis}`;
-
-export const isAttribute = (attr: string): boolean | string =>
-  typeof attr === 'string' && (attr || attr === '');
-
-export const setFxLayoutAlign = (element: HTMLElement) => {
-  const fxLayoutAlign = element.getAttribute(Attributes.FxLayoutAlign);
-  if (isAttribute(fxLayoutAlign)) {
-    const [mainAxis, crossAxis] = fxLayoutAlign.split(' ');
-    element.style['place-content'] = crossAxis
-      ? `${crossAxis} ${mainAxis}`
-      : `${mainAxis} ${mainAxis}`;
-    element.style['align-items'] = crossAxis ? crossAxis : mainAxis;
-  }
-  element.style['display'] = 'flex';
-};
-
-export const setChildrensFlexFill = (div: HTMLElement): void => {
-  const fxFlexFill = div.getAttribute(Attributes.FxFlexFill);
-  if (isAttribute(fxFlexFill)) {
-    div.style['margin'] = '0';
-    div.style['width'] = '100%';
-    div.style['height'] = '100%';
-    div.style['min-width'] = '100%';
-    div.style['min-height	'] = '100%';
-  }
-};
-
-export const setChildrensFlex = (div: HTMLElement) => {
-  const fxFlex = div.getAttribute(Attributes.FxFlex);
-  if (isAttribute(fxFlex)) {
-    div.style['flex'] = '1 1 100%';
-    div.style['box-sizing'] = 'border-box';
-    if (fxFlex) {
-      div.style['max-width'] = fxFlex;
-    }
-  }
-};
-
-export const setFlexAlign = (div: HTMLElement) => {
-  const fxFlexAlign = div.getAttribute(Attributes.FxFlexAlign);
-  if (isAttribute(fxFlexAlign)) {
-    div.style['align-self'] = fxFlexAlign;
-  }
-};
-
-export const setFlexOffset = (div: HTMLElement) => {
-  const fxFlexOffset = div.getAttribute(Attributes.FxFlexOffset);
-  if (isAttribute(fxFlexOffset)) {
-    div.style['margin-left'] = fxFlexOffset;
-  }
-};
-
-export const setFlexOrder = (div: HTMLElement) => {
-  const fxFlexOrder = div.getAttribute(Attributes.FxFlexOrder);
-  if (isAttribute(fxFlexOrder)) {
-    div.style['order'] = fxFlexOrder;
-  } else {
-    div.style['order'] = '0';
-  }
-};
-
-export const subscribeToAttributeChanges = (name: string) => (
-  fn: (element: HTMLElement) => void
-) => (element: HTMLElement) => {
-  fn(element);
-  return new MutationObserver(() => fn(element)).observe(element, {
-    attributeFilter: [name.toLocaleLowerCase()],
-    attributes: true
-  });
-};
-
-export const setFxLayout = (element: HTMLElement) => {
-  const layout = element.getAttribute(Attributes.FxLayout);
-  if (isAttribute(layout)) {
-    const splitted = layout.split(' ');
-    const [mainAxis, crossAxis] = splitted;
-    element.style['flex-flow'] =
-      splitted.length > 1 ? `${mainAxis} ${crossAxis}` : mainAxis;
-    element.style['box-sizing'] = 'flex';
-    element.style['display'] = 'flex';
-  }
-};
-
-export function recursion(div: HTMLElement) {
-  const fxFlex = div.getAttribute(Attributes.FxFlex);
-  const fxFlexFill = div.getAttribute(Attributes.FxFlexFill);
-  const fxLayout = div.getAttribute(Attributes.FxLayout);
-  const fxLayoutAlign = div.getAttribute(Attributes.FxLayoutAlign);
-  const fxLayoutGap = div.getAttribute(Attributes.FxLayoutGap);
-  const fxFlexAlign = div.getAttribute(Attributes.FxFlexAlign);
-  const fxFlexOffset = div.getAttribute(Attributes.FxFlexOffset);
-  const fxFlexOrder = div.getAttribute(Attributes.FxFlexOrder);
-
-  if (isAttribute(fxFlexOrder)) {
-    subscribeToAttributeChanges(Attributes.FxFlexOrder)(setFlexOrder)(div);
-  }
-  if (isAttribute(fxFlexOffset)) {
-    subscribeToAttributeChanges(Attributes.FxFlexAlign)(setFlexOffset)(div);
-  }
-
-  if (isAttribute(fxFlexAlign)) {
-    subscribeToAttributeChanges(Attributes.FxFlexAlign)(setFlexAlign)(div);
-  }
-
-  if (isAttribute(fxFlex)) {
-    subscribeToAttributeChanges(Attributes.FxFlex)(setChildrensFlex)(div);
-  }
-
-  if (isAttribute(fxFlexFill)) {
-    subscribeToAttributeChanges(Attributes.FxFlexFill)(setChildrensFlexFill)(
-      div
-    );
-  }
-
-  if (isAttribute(fxLayout)) {
-    subscribeToAttributeChanges(Attributes.FxLayout)(setFxLayout)(div);
-  }
-
-  if (isAttribute(fxLayoutAlign)) {
-    subscribeToAttributeChanges(Attributes.FxLayoutAlign)(setFxLayoutAlign)(
-      div
-    );
-  }
-
-  if (isAttribute(fxLayoutGap)) {
-    const divs = [...div.children] as HTMLElement[];
-    for (const div of divs) {
-      div.style['margin'] = `0px ${fxLayoutGap} ${fxLayoutGap} 0px`;
-      div.style.flex = '1 1 25%';
-    }
-  }
-
-  const divs = [...div.children] as HTMLElement[];
-  for (const div of divs) {
-    recursion.call(this, div);
-  }
-}