@rhtml/modifiers 0.0.111 → 0.0.112

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/dist/layout/flex-align.d.ts +6 -4
  2. package/dist/layout/flex-align.js +14 -1
  3. package/dist/layout/flex-align.js.map +1 -1
  4. package/dist/layout/flex.d.ts +6 -4
  5. package/dist/layout/flex.js +14 -1
  6. package/dist/layout/flex.js.map +1 -1
  7. package/dist/layout/layout-align.d.ts +6 -4
  8. package/dist/layout/layout-align.js +14 -1
  9. package/dist/layout/layout-align.js.map +1 -1
  10. package/dist/layout/layout-gap.d.ts +6 -4
  11. package/dist/layout/layout-gap.js +28 -3
  12. package/dist/layout/layout-gap.js.map +1 -1
  13. package/dist/layout/layout.d.ts +6 -4
  14. package/dist/layout/layout.js +19 -1
  15. package/dist/layout/layout.js.map +1 -1
  16. package/package.json +2 -2
  17. package/src/layout/flex-align.ts +21 -4
  18. package/src/layout/flex.ts +21 -4
  19. package/src/layout/layout-align.ts +21 -4
  20. package/src/layout/layout-gap.ts +38 -6
  21. package/src/layout/layout.ts +27 -4
package/dist/layout/flex-align.d.ts CHANGED
@@ -1,12 +1,14 @@
1
- import { Attribute } from '@rhtml/custom-attributes';
1
+ import { EnterMediaQueryAttributes, MediaQueryAttribute } from '@rhtml/custom-attributes';
2
2
  interface Styles {
3
3
  alignSelf: string;
4
4
  }
5
- export declare class FlexAlign extends Attribute<Styles> {
5
+ export declare class FlexAlign extends MediaQueryAttribute<Styles> {
6
6
  OnInit(): void;
7
7
  OnDestroy(): void;
8
8
  OnUpdate(): void;
9
- private clean;
10
- private modify;
9
+ OnEnterMediaQuery([, attribute]: EnterMediaQueryAttributes): void;
10
+ OnExitMediaQuery(): void;
11
+ clean(): void;
12
+ modify(): void;
11
13
  }
12
14
  export {};
package/dist/layout/flex-align.js CHANGED
@@ -8,16 +8,29 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
8
8
  Object.defineProperty(exports, "__esModule", { value: true });
9
9
  exports.FlexAlign = void 0;
10
10
  const custom_attributes_1 = require("@rhtml/custom-attributes");
11
- let FlexAlign = class FlexAlign extends custom_attributes_1.Attribute {
11
+ let FlexAlign = class FlexAlign extends custom_attributes_1.MediaQueryAttribute {
12
12
  OnInit() {
13
13
  this.modify();
14
+ super.OnInit();
14
15
  }
15
16
  OnDestroy() {
16
17
  this.clean();
18
+ super.OnDestroy();
17
19
  }
18
20
  OnUpdate() {
19
21
  this.modify();
20
22
  }
23
+ OnEnterMediaQuery([, attribute]) {
24
+ var _a;
25
+ this.prevValue = this.value;
26
+ this.value = (_a = attribute.value) !== null && _a !== void 0 ? _a : this.value;
27
+ this.modify();
28
+ }
29
+ OnExitMediaQuery() {
30
+ var _a;
31
+ this.value = (_a = this.prevValue) !== null && _a !== void 0 ? _a : this.value;
32
+ this.modify();
33
+ }
21
34
  clean() {
22
35
  this.setStyles({ alignSelf: null })(this.element);
23
36
  }
package/dist/layout/flex-align.js.map CHANGED
@@ -1 +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"}
1
+ {"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 CHANGED
@@ -1,14 +1,16 @@
1
- import { Attribute } from '@rhtml/custom-attributes';
1
+ import { EnterMediaQueryAttributes, MediaQueryAttribute } from '@rhtml/custom-attributes';
2
2
  interface Styles {
3
3
  flex: string;
4
4
  boxSizing: string;
5
5
  maxWidth: string;
6
6
  }
7
- export declare class Flex extends Attribute<Styles> {
7
+ export declare class Flex extends MediaQueryAttribute<Styles> {
8
8
  OnInit(): void;
9
9
  OnDestroy(): void;
10
10
  OnUpdate(): void;
11
- private clean;
12
- private modify;
11
+ OnEnterMediaQuery([, attribute]: EnterMediaQueryAttributes): void;
12
+ OnExitMediaQuery(): void;
13
+ clean(): void;
14
+ modify(): void;
13
15
  }
14
16
  export {};
package/dist/layout/flex.js CHANGED
@@ -8,16 +8,29 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
8
8
  Object.defineProperty(exports, "__esModule", { value: true });
9
9
  exports.Flex = void 0;
10
10
  const custom_attributes_1 = require("@rhtml/custom-attributes");
11
- let Flex = class Flex extends custom_attributes_1.Attribute {
11
+ let Flex = class Flex extends custom_attributes_1.MediaQueryAttribute {
12
12
  OnInit() {
13
13
  this.modify();
14
+ super.OnInit();
14
15
  }
15
16
  OnDestroy() {
16
17
  this.clean();
18
+ super.OnDestroy();
17
19
  }
18
20
  OnUpdate() {
19
21
  this.modify();
20
22
  }
23
+ OnEnterMediaQuery([, attribute]) {
24
+ var _a;
25
+ this.prevValue = this.value;
26
+ this.value = (_a = attribute.value) !== null && _a !== void 0 ? _a : this.value;
27
+ this.modify();
28
+ }
29
+ OnExitMediaQuery() {
30
+ var _a;
31
+ this.value = (_a = this.prevValue) !== null && _a !== void 0 ? _a : this.value;
32
+ this.modify();
33
+ }
21
34
  clean() {
22
35
  this.setStyles({
23
36
  boxSizing: null,
package/dist/layout/flex.js.map CHANGED
@@ -1 +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"}
1
+ {"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 CHANGED
@@ -1,14 +1,16 @@
1
- import { Attribute } from '@rhtml/custom-attributes';
1
+ import { EnterMediaQueryAttributes, MediaQueryAttribute } from '@rhtml/custom-attributes';
2
2
  interface Styles {
3
3
  placeContent: string;
4
4
  alignItems: string;
5
5
  display: string;
6
6
  }
7
- export declare class LayoutAlign extends Attribute<Styles> {
7
+ export declare class LayoutAlign extends MediaQueryAttribute<Styles> {
8
8
  OnInit(): void;
9
9
  OnDestroy(): void;
10
10
  OnUpdate(): void;
11
- private clean;
12
- private modify;
11
+ OnEnterMediaQuery([, attribute]: EnterMediaQueryAttributes): void;
12
+ OnExitMediaQuery(): void;
13
+ clean(): void;
14
+ modify(): void;
13
15
  }
14
16
  export {};
package/dist/layout/layout-align.js CHANGED
@@ -8,16 +8,29 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
8
8
  Object.defineProperty(exports, "__esModule", { value: true });
9
9
  exports.LayoutAlign = void 0;
10
10
  const custom_attributes_1 = require("@rhtml/custom-attributes");
11
- let LayoutAlign = class LayoutAlign extends custom_attributes_1.Attribute {
11
+ let LayoutAlign = class LayoutAlign extends custom_attributes_1.MediaQueryAttribute {
12
12
  OnInit() {
13
13
  this.modify();
14
+ super.OnInit();
14
15
  }
15
16
  OnDestroy() {
16
17
  this.clean();
18
+ super.OnDestroy();
17
19
  }
18
20
  OnUpdate() {
19
21
  this.modify();
20
22
  }
23
+ OnEnterMediaQuery([, attribute]) {
24
+ var _a;
25
+ this.prevValue = this.value;
26
+ this.value = (_a = attribute.value) !== null && _a !== void 0 ? _a : this.value;
27
+ this.modify();
28
+ }
29
+ OnExitMediaQuery() {
30
+ var _a;
31
+ this.value = (_a = this.prevValue) !== null && _a !== void 0 ? _a : this.value;
32
+ this.modify();
33
+ }
21
34
  clean() {
22
35
  this.setStyles({
23
36
  alignItems: null,
package/dist/layout/layout-align.js.map CHANGED
@@ -1 +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"}
1
+ {"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 CHANGED
@@ -1,14 +1,16 @@
1
- import { Attribute } from '@rhtml/custom-attributes';
1
+ import { EnterMediaQueryAttributes, MediaQueryAttribute } from '@rhtml/custom-attributes';
2
2
  interface Styles {
3
3
  margin: string;
4
4
  flex: string;
5
5
  }
6
- export declare class LayoutGap extends Attribute<Styles> {
6
+ export declare class LayoutGap extends MediaQueryAttribute<Styles> {
7
7
  private observer;
8
8
  OnInit(): void;
9
9
  OnDestroy(): void;
10
10
  OnUpdate(): void;
11
- private clean;
12
- private modify;
11
+ OnEnterMediaQuery([, attribute]: EnterMediaQueryAttributes): void;
12
+ OnExitMediaQuery(): void;
13
+ clean(): void;
14
+ modify(): void;
13
15
  }
14
16
  export {};
package/dist/layout/layout-gap.js CHANGED
@@ -8,22 +8,39 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
8
8
  Object.defineProperty(exports, "__esModule", { value: true });
9
9
  exports.LayoutGap = void 0;
10
10
  const custom_attributes_1 = require("@rhtml/custom-attributes");
11
- let LayoutGap = class LayoutGap extends custom_attributes_1.Attribute {
11
+ let LayoutGap = class LayoutGap extends custom_attributes_1.MediaQueryAttribute {
12
12
  OnInit() {
13
13
  this.modify();
14
14
  this.observer = new MutationObserver(() => this.modify());
15
15
  this.observer.observe(this.element, {
16
16
  childList: true,
17
- subtree: true
17
+ subtree: true,
18
+ attributes: true,
19
+ attributeFilter: custom_attributes_1.createFiltersFromSelector('fxlayout')
18
20
  });
21
+ super.OnInit();
19
22
  }
20
23
  OnDestroy() {
21
24
  this.clean();
22
25
  this.observer.disconnect();
26
+ super.OnDestroy();
23
27
  }
24
28
  OnUpdate() {
25
29
  this.modify();
26
30
  }
31
+ OnEnterMediaQuery([, attribute]) {
32
+ var _a;
33
+ this.prevValue = this.value;
34
+ this.value = (_a = attribute.value) !== null && _a !== void 0 ? _a : this.value;
35
+ this.modify();
36
+ }
37
+ OnExitMediaQuery() {
38
+ var _a;
39
+ this.value = (_a = this.prevValue) !== null && _a !== void 0 ? _a : this.value;
40
+ this.modify();
41
+ }
42
+ // OnElementAttributeChange() {
43
+ // }
27
44
  clean() {
28
45
  const divs = [...this.element.children];
29
46
  for (const div of divs) {
@@ -34,11 +51,19 @@ let LayoutGap = class LayoutGap extends custom_attributes_1.Attribute {
34
51
  }
35
52
  }
36
53
  modify() {
54
+ const layout = this.element.getAttribute('fxlayout');
55
+ let margin = `0px ${this.value} ${this.value} 0px`;
56
+ if (layout === 'row') {
57
+ margin = `0px ${this.value} 0px 0px`;
58
+ }
59
+ if (layout === 'column') {
60
+ margin = `0px 0px ${this.value} 0px`;
61
+ }
37
62
  const divs = this.element.children;
38
63
  for (const div of divs) {
39
64
  this.setStyles({
40
65
  flex: '1 1 25%',
41
- margin: `0px ${this.value} ${this.value} 0px`
66
+ margin
42
67
  })(div);
43
68
  }
44
69
  }
package/dist/layout/layout-gap.js.map CHANGED
@@ -1 +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"}
1
+ {"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 CHANGED
@@ -1,15 +1,17 @@
1
- import { Attribute } from '@rhtml/custom-attributes';
1
+ import { EnterMediaQueryAttributes, MediaQueryAttribute } from '@rhtml/custom-attributes';
2
2
  interface Styles {
3
3
  flexFlow: string;
4
4
  boxSizing: string;
5
5
  display: string;
6
6
  }
7
- export declare class Layout extends Attribute<Styles> {
7
+ export declare class Layout extends MediaQueryAttribute<Styles> {
8
8
  value: string;
9
9
  OnInit(): void;
10
10
  OnDestroy(): void;
11
11
  OnUpdate(): void;
12
- private clean;
13
- private modify;
12
+ OnEnterMediaQuery([, attribute]: EnterMediaQueryAttributes): void;
13
+ OnExitMediaQuery(): void;
14
+ clean(): void;
15
+ modify(): void;
14
16
  }
15
17
  export {};
package/dist/layout/layout.js CHANGED
@@ -8,20 +8,35 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
8
8
  Object.defineProperty(exports, "__esModule", { value: true });
9
9
  exports.Layout = void 0;
10
10
  const custom_attributes_1 = require("@rhtml/custom-attributes");
11
- let Layout = class Layout extends custom_attributes_1.Attribute {
11
+ let Layout = class Layout extends custom_attributes_1.MediaQueryAttribute {
12
12
  constructor() {
13
13
  super(...arguments);
14
14
  this.value = 'row';
15
15
  }
16
16
  OnInit() {
17
17
  this.modify();
18
+ super.OnInit();
18
19
  }
19
20
  OnDestroy() {
20
21
  this.clean();
22
+ super.OnDestroy();
21
23
  }
22
24
  OnUpdate() {
23
25
  this.modify();
24
26
  }
27
+ OnEnterMediaQuery([, attribute]) {
28
+ var _a;
29
+ this.prevValue = this.value;
30
+ this.value = (_a = attribute.value) !== null && _a !== void 0 ? _a : this.value;
31
+ this.modify();
32
+ this.element.setAttribute('fxlayout', this.value);
33
+ }
34
+ OnExitMediaQuery() {
35
+ var _a;
36
+ this.value = (_a = this.prevValue) !== null && _a !== void 0 ? _a : this.value;
37
+ this.modify();
38
+ this.element.setAttribute('fxlayout', this.value);
39
+ }
25
40
  clean() {
26
41
  this.setStyles({
27
42
  boxSizing: null,
@@ -30,6 +45,9 @@ let Layout = class Layout extends custom_attributes_1.Attribute {
30
45
  })(this.element);
31
46
  }
32
47
  modify() {
48
+ if (!this.value) {
49
+ return;
50
+ }
33
51
  const splitted = this.value.split(' ');
34
52
  const [mainAxis, crossAxis] = splitted;
35
53
  this.setStyles({
package/dist/layout/layout.js.map CHANGED
@@ -1 +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"}
1
+ {"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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rhtml/modifiers",
3
- "version": "0.0.111",
3
+ "version": "0.0.112",
4
4
  "description": "Reactive HyperText Markup Language",
5
5
  "scripts": {
6
6
  "start": "npx parcel ./examples/index.html --out-dir build/examples",
@@ -17,7 +17,7 @@
17
17
  },
18
18
  "dependencies": {
19
19
  "@rxdi/lit-html": "^0.7.133",
20
- "@rhtml/custom-attributes": "0.0.111"
20
+ "@rhtml/custom-attributes": "0.0.112"
21
21
  },
22
22
  "devDependencies": {
23
23
  "eslint": "^6.7.2",
package/src/layout/flex-align.ts CHANGED
@@ -1,4 +1,8 @@
1
- import { Attribute, Modifier } from '@rhtml/custom-attributes';
1
+ import {
2
+ EnterMediaQueryAttributes,
3
+ MediaQueryAttribute,
4
+ Modifier
5
+ } from '@rhtml/custom-attributes';
2
6
 
3
7
  interface Styles {
4
8
  alignSelf: string;
@@ -7,24 +11,37 @@ interface Styles {
7
11
  @Modifier({
8
12
  selector: 'fxFlexAlign'
9
13
  })
10
- export class FlexAlign extends Attribute<Styles> {
14
+ export class FlexAlign extends MediaQueryAttribute<Styles> {
11
15
  OnInit() {
12
16
  this.modify();
17
+ super.OnInit();
13
18
  }
14
19
 
15
20
  OnDestroy() {
16
21
  this.clean();
22
+ super.OnDestroy();
17
23
  }
18
24
 
19
25
  OnUpdate() {
20
26
  this.modify();
21
27
  }
22
28
 
23
- private clean() {
29
+ OnEnterMediaQuery([, attribute]: EnterMediaQueryAttributes) {
30
+ this.prevValue = this.value;
31
+ this.value = attribute.value ?? this.value;
32
+ this.modify();
33
+ }
34
+
35
+ OnExitMediaQuery() {
36
+ this.value = this.prevValue ?? this.value;
37
+ this.modify();
38
+ }
39
+
40
+ clean() {
24
41
  this.setStyles({ alignSelf: null })(this.element);
25
42
  }
26
43
 
27
- private modify() {
44
+ modify() {
28
45
  this.setStyles({ alignSelf: this.value || null })(this.element);
29
46
  }
30
47
  }
package/src/layout/flex.ts CHANGED
@@ -1,4 +1,8 @@
1
- import { Attribute, Modifier } from '@rhtml/custom-attributes';
1
+ import {
2
+ EnterMediaQueryAttributes,
3
+ MediaQueryAttribute,
4
+ Modifier
5
+ } from '@rhtml/custom-attributes';
2
6
 
3
7
  interface Styles {
4
8
  flex: string;
@@ -9,20 +13,33 @@ interface Styles {
9
13
  @Modifier({
10
14
  selector: 'fxFlex'
11
15
  })
12
- export class Flex extends Attribute<Styles> {
16
+ export class Flex extends MediaQueryAttribute<Styles> {
13
17
  OnInit() {
14
18
  this.modify();
19
+ super.OnInit();
15
20
  }
16
21
 
17
22
  OnDestroy() {
18
23
  this.clean();
24
+ super.OnDestroy();
19
25
  }
20
26
 
21
27
  OnUpdate() {
22
28
  this.modify();
23
29
  }
24
30
 
25
- private clean() {
31
+ OnEnterMediaQuery([, attribute]: EnterMediaQueryAttributes) {
32
+ this.prevValue = this.value;
33
+ this.value = attribute.value ?? this.value;
34
+ this.modify();
35
+ }
36
+
37
+ OnExitMediaQuery() {
38
+ this.value = this.prevValue ?? this.value;
39
+ this.modify();
40
+ }
41
+
42
+ clean() {
26
43
  this.setStyles({
27
44
  boxSizing: null,
28
45
  maxWidth: null,
@@ -30,7 +47,7 @@ export class Flex extends Attribute<Styles> {
30
47
  })(this.element);
31
48
  }
32
49
 
33
- private modify() {
50
+ modify() {
34
51
  this.setStyles({
35
52
  boxSizing: 'border-box',
36
53
  maxWidth: this.value || null,
package/src/layout/layout-align.ts CHANGED
@@ -1,4 +1,8 @@
1
- import { Attribute, Modifier } from '@rhtml/custom-attributes';
1
+ import {
2
+ EnterMediaQueryAttributes,
3
+ MediaQueryAttribute,
4
+ Modifier
5
+ } from '@rhtml/custom-attributes';
2
6
 
3
7
  interface Styles {
4
8
  placeContent: string;
@@ -9,20 +13,33 @@ interface Styles {
9
13
  @Modifier({
10
14
  selector: 'fxLayoutAlign'
11
15
  })
12
- export class LayoutAlign extends Attribute<Styles> {
16
+ export class LayoutAlign extends MediaQueryAttribute<Styles> {
13
17
  OnInit() {
14
18
  this.modify();
19
+ super.OnInit();
15
20
  }
16
21
 
17
22
  OnDestroy() {
18
23
  this.clean();
24
+ super.OnDestroy();
19
25
  }
20
26
 
21
27
  OnUpdate() {
22
28
  this.modify();
23
29
  }
24
30
 
25
- private clean() {
31
+ OnEnterMediaQuery([, attribute]: EnterMediaQueryAttributes) {
32
+ this.prevValue = this.value;
33
+ this.value = attribute.value ?? this.value;
34
+ this.modify();
35
+ }
36
+
37
+ OnExitMediaQuery() {
38
+ this.value = this.prevValue ?? this.value;
39
+ this.modify();
40
+ }
41
+
42
+ clean() {
26
43
  this.setStyles({
27
44
  alignItems: null,
28
45
  placeContent: null,
@@ -30,7 +47,7 @@ export class LayoutAlign extends Attribute<Styles> {
30
47
  })(this.element);
31
48
  }
32
49
 
33
- private modify() {
50
+ modify() {
34
51
  const [mainAxis, crossAxis] = this.value.split(' ');
35
52
  this.setStyles({
36
53
  alignItems: crossAxis ? crossAxis : mainAxis,
package/src/layout/layout-gap.ts CHANGED
@@ -1,4 +1,9 @@
1
- import { Attribute, Modifier } from '@rhtml/custom-attributes';
1
+ import {
2
+ createFiltersFromSelector,
3
+ EnterMediaQueryAttributes,
4
+ MediaQueryAttribute,
5
+ Modifier
6
+ } from '@rhtml/custom-attributes';
2
7
 
3
8
  interface Styles {
4
9
  margin: string;
@@ -8,7 +13,7 @@ interface Styles {
8
13
  @Modifier({
9
14
  selector: 'fxLayoutGap'
10
15
  })
11
- export class LayoutGap extends Attribute<Styles> {
16
+ export class LayoutGap extends MediaQueryAttribute<Styles> {
12
17
  private observer: MutationObserver;
13
18
 
14
19
  OnInit() {
@@ -16,20 +21,39 @@ export class LayoutGap extends Attribute<Styles> {
16
21
  this.observer = new MutationObserver(() => this.modify());
17
22
  this.observer.observe(this.element, {
18
23
  childList: true,
19
- subtree: true
24
+ subtree: true,
25
+ attributes: true,
26
+ attributeFilter: createFiltersFromSelector('fxlayout')
20
27
  });
28
+ super.OnInit();
21
29
  }
22
30
 
23
31
  OnDestroy() {
24
32
  this.clean();
25
33
  this.observer.disconnect();
34
+ super.OnDestroy();
26
35
  }
27
36
 
28
37
  OnUpdate() {
29
38
  this.modify();
30
39
  }
31
40
 
32
- private clean() {
41
+ OnEnterMediaQuery([, attribute]: EnterMediaQueryAttributes) {
42
+ this.prevValue = this.value;
43
+ this.value = attribute.value ?? this.value;
44
+ this.modify();
45
+ }
46
+
47
+ OnExitMediaQuery() {
48
+ this.value = this.prevValue ?? this.value;
49
+ this.modify();
50
+ }
51
+
52
+ // OnElementAttributeChange() {
53
+
54
+ // }
55
+
56
+ clean() {
33
57
  const divs = [...this.element.children] as HTMLElement[];
34
58
  for (const div of divs) {
35
59
  this.setStyles({
@@ -39,12 +63,20 @@ export class LayoutGap extends Attribute<Styles> {
39
63
  }
40
64
  }
41
65
 
42
- private modify() {
66
+ modify() {
67
+ const layout = this.element.getAttribute('fxlayout');
68
+ let margin = `0px ${this.value} ${this.value} 0px`;
69
+ if (layout === 'row') {
70
+ margin = `0px ${this.value} 0px 0px`;
71
+ }
72
+ if (layout === 'column') {
73
+ margin = `0px 0px ${this.value} 0px`;
74
+ }
43
75
  const divs = this.element.children;
44
76
  for (const div of divs) {
45
77
  this.setStyles({
46
78
  flex: '1 1 25%',
47
- margin: `0px ${this.value} ${this.value} 0px`
79
+ margin
48
80
  })(div);
49
81
  }
50
82
  }
package/src/layout/layout.ts CHANGED
@@ -1,4 +1,8 @@
1
- import { Attribute, Modifier } from '@rhtml/custom-attributes';
1
+ import {
2
+ EnterMediaQueryAttributes,
3
+ MediaQueryAttribute,
4
+ Modifier
5
+ } from '@rhtml/custom-attributes';
2
6
 
3
7
  interface Styles {
4
8
  flexFlow: string;
@@ -9,29 +13,48 @@ interface Styles {
9
13
  @Modifier({
10
14
  selector: 'fxLayout'
11
15
  })
12
- export class Layout extends Attribute<Styles> {
16
+ export class Layout extends MediaQueryAttribute<Styles> {
13
17
  value = 'row';
14
18
 
15
19
  OnInit() {
16
20
  this.modify();
21
+ super.OnInit();
17
22
  }
18
23
 
19
24
  OnDestroy() {
20
25
  this.clean();
26
+ super.OnDestroy();
21
27
  }
22
28
 
23
29
  OnUpdate() {
24
30
  this.modify();
25
31
  }
26
32
 
27
- private clean() {
33
+ OnEnterMediaQuery([, attribute]: EnterMediaQueryAttributes) {
34
+ this.prevValue = this.value;
35
+ this.value = attribute.value ?? this.value;
36
+ this.modify();
37
+ this.element.setAttribute('fxlayout', this.value);
38
+ }
39
+
40
+ OnExitMediaQuery() {
41
+ this.value = this.prevValue ?? this.value;
42
+ this.modify();
43
+ this.element.setAttribute('fxlayout', this.value);
44
+ }
45
+
46
+ clean() {
28
47
  this.setStyles({
29
48
  boxSizing: null,
30
49
  flexFlow: null,
31
50
  display: null
32
51
  })(this.element);
33
52
  }
34
- private modify() {
53
+
54
+ modify() {
55
+ if (!this.value) {
56
+ return;
57
+ }
35
58
  const splitted = this.value.split(' ');
36
59
  const [mainAxis, crossAxis] = splitted;
37
60
  this.setStyles({