@rhtml/modifiers 0.0.111 → 0.0.114

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 +5 -2
  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 +5 -2
  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 +5 -2
  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 -3
  11. package/dist/layout/layout-gap.js +33 -9
  12. package/dist/layout/layout-gap.js.map +1 -1
  13. package/dist/layout/layout.d.ts +5 -2
  14. package/dist/layout/layout.js +18 -1
  15. package/dist/layout/layout.js.map +1 -1
  16. package/package.json +2 -2
  17. package/src/layout/flex-align.ts +21 -2
  18. package/src/layout/flex.ts +21 -2
  19. package/src/layout/layout-align.ts +21 -2
  20. package/src/layout/layout-gap.ts +41 -11
  21. package/src/layout/layout.ts +25 -2
package/dist/layout/flex-align.d.ts CHANGED
@@ -1,11 +1,14 @@
1
- import { Attribute } from '@rhtml/custom-attributes';
1
+ import { MediaQueryAttribute, MediaQueryEvent } 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
+ private prevValue;
6
7
  OnInit(): void;
7
8
  OnDestroy(): void;
8
9
  OnUpdate(): void;
10
+ OnEnterMediaQuery([, attribute]: MediaQueryEvent): void;
11
+ OnExitMediaQuery(): void;
9
12
  private clean;
10
13
  private modify;
11
14
  }
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;IAGxD,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,CAAkB;;QAC9C,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;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;AAnCY,SAAS;IAHrB,4BAAQ,CAAC;QACR,QAAQ,EAAE,aAAa;KACxB,CAAC;GACW,SAAS,CAmCrB;AAnCY,8BAAS"}
package/dist/layout/flex.d.ts CHANGED
@@ -1,13 +1,16 @@
1
- import { Attribute } from '@rhtml/custom-attributes';
1
+ import { MediaQueryAttribute, MediaQueryEvent } 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
+ private prevValue;
8
9
  OnInit(): void;
9
10
  OnDestroy(): void;
10
11
  OnUpdate(): void;
12
+ OnEnterMediaQuery([, attribute]: MediaQueryEvent): void;
13
+ OnExitMediaQuery(): void;
11
14
  private clean;
12
15
  private modify;
13
16
  }
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;IAGnD,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,CAAkB;;QAC9C,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;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;AA3CY,IAAI;IAHhB,4BAAQ,CAAC;QACR,QAAQ,EAAE,QAAQ;KACnB,CAAC;GACW,IAAI,CA2ChB;AA3CY,oBAAI"}
package/dist/layout/layout-align.d.ts CHANGED
@@ -1,13 +1,16 @@
1
- import { Attribute } from '@rhtml/custom-attributes';
1
+ import { MediaQueryAttribute, MediaQueryEvent } 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
+ private prevValue;
8
9
  OnInit(): void;
9
10
  OnDestroy(): void;
10
11
  OnUpdate(): void;
12
+ OnEnterMediaQuery([, attribute]: MediaQueryEvent): void;
13
+ OnExitMediaQuery(): void;
11
14
  private clean;
12
15
  private modify;
13
16
  }
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;IAG1D,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,CAAkB;;QAC9C,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;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;AA9CY,WAAW;IAHvB,4BAAQ,CAAC;QACR,QAAQ,EAAE,eAAe;KAC1B,CAAC;GACW,WAAW,CA8CvB;AA9CY,kCAAW"}
package/dist/layout/layout-gap.d.ts CHANGED
@@ -1,13 +1,16 @@
1
- import { Attribute } from '@rhtml/custom-attributes';
1
+ import { MediaQueryAttribute, MediaQueryEvent } 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> {
7
- private observer;
6
+ export declare class LayoutGap extends MediaQueryAttribute<Styles> {
7
+ private prevValue;
8
8
  OnInit(): void;
9
9
  OnDestroy(): void;
10
10
  OnUpdate(): void;
11
+ OnChange(): void;
12
+ OnEnterMediaQuery([, attribute]: MediaQueryEvent): void;
13
+ OnExitMediaQuery(): void;
11
14
  private clean;
12
15
  private modify;
13
16
  }
package/dist/layout/layout-gap.js CHANGED
@@ -8,22 +8,32 @@ 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
- this.observer = new MutationObserver(() => this.modify());
15
- this.observer.observe(this.element, {
16
- childList: true,
17
- subtree: true
18
- });
14
+ super.OnInit();
19
15
  }
20
16
  OnDestroy() {
21
17
  this.clean();
22
- this.observer.disconnect();
18
+ super.OnDestroy();
23
19
  }
24
20
  OnUpdate() {
25
21
  this.modify();
26
22
  }
23
+ OnChange() {
24
+ this.modify();
25
+ }
26
+ OnEnterMediaQuery([, attribute]) {
27
+ var _a;
28
+ this.prevValue = this.value;
29
+ this.value = (_a = attribute.value) !== null && _a !== void 0 ? _a : this.value;
30
+ this.modify();
31
+ }
32
+ OnExitMediaQuery() {
33
+ var _a;
34
+ this.value = (_a = this.prevValue) !== null && _a !== void 0 ? _a : this.value;
35
+ this.modify();
36
+ }
27
37
  clean() {
28
38
  const divs = [...this.element.children];
29
39
  for (const div of divs) {
@@ -34,18 +44,32 @@ let LayoutGap = class LayoutGap extends custom_attributes_1.Attribute {
34
44
  }
35
45
  }
36
46
  modify() {
47
+ const layout = this.element.getAttribute('fxlayout');
48
+ let margin = `0px ${this.value} ${this.value} 0px`;
49
+ if (layout === 'row') {
50
+ margin = `0px ${this.value} 0px 0px`;
51
+ }
52
+ if (layout === 'column') {
53
+ margin = `0px 0px ${this.value} 0px`;
54
+ }
37
55
  const divs = this.element.children;
38
56
  for (const div of divs) {
39
57
  this.setStyles({
40
58
  flex: '1 1 25%',
41
- margin: `0px ${this.value} ${this.value} 0px`
59
+ margin
42
60
  })(div);
43
61
  }
44
62
  }
45
63
  };
46
64
  LayoutGap = __decorate([
47
65
  custom_attributes_1.Modifier({
48
- selector: 'fxLayoutGap'
66
+ selector: 'fxLayoutGap',
67
+ observe: {
68
+ childList: true,
69
+ subtree: true,
70
+ attributes: true,
71
+ attributeFilter: custom_attributes_1.createFiltersFromSelector('fxlayout')
72
+ }
49
73
  })
50
74
  ], LayoutGap);
51
75
  exports.LayoutGap = LayoutGap;
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;AAgBlC,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,uCAA2B;IAGxD,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,QAAQ;QACN,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAED,iBAAiB,CAAC,CAAC,EAAE,SAAS,CAAkB;;QAC9C,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;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,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;AA3DY,SAAS;IATrB,4BAAQ,CAAC;QACR,QAAQ,EAAE,aAAa;QACvB,OAAO,EAAE;YACP,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,6CAAyB,CAAC,UAAU,CAAC;SACvD;KACF,CAAC;GACW,SAAS,CA2DrB;AA3DY,8BAAS"}
package/dist/layout/layout.d.ts CHANGED
@@ -1,14 +1,17 @@
1
- import { Attribute } from '@rhtml/custom-attributes';
1
+ import { MediaQueryAttribute, MediaQueryEvent } 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
+ private prevValue;
9
10
  OnInit(): void;
10
11
  OnDestroy(): void;
11
12
  OnUpdate(): void;
13
+ OnEnterMediaQuery([, attribute]: MediaQueryEvent): void;
14
+ OnExitMediaQuery(): void;
12
15
  private clean;
13
16
  private modify;
14
17
  }
package/dist/layout/layout.js CHANGED
@@ -8,20 +8,33 @@ 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
+ }
33
+ OnExitMediaQuery() {
34
+ var _a;
35
+ this.value = (_a = this.prevValue) !== null && _a !== void 0 ? _a : this.value;
36
+ this.modify();
37
+ }
25
38
  clean() {
26
39
  this.setStyles({
27
40
  boxSizing: null,
@@ -30,6 +43,10 @@ let Layout = class Layout extends custom_attributes_1.Attribute {
30
43
  })(this.element);
31
44
  }
32
45
  modify() {
46
+ if (!this.value) {
47
+ return;
48
+ }
49
+ this.element.setAttribute(this.selector, this.value);
33
50
  const splitted = this.value.split(' ');
34
51
  const [mainAxis, crossAxis] = splitted;
35
52
  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;IA9CC,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,CAAkB;;QAC9C,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;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;IAEO,MAAM;QACZ,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACf,OAAO;SACR;QACD,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QACrD,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.114",
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.114"
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
+ MediaQueryAttribute,
3
+ MediaQueryEvent,
4
+ Modifier
5
+ } from '@rhtml/custom-attributes';
2
6
 
3
7
  interface Styles {
4
8
  alignSelf: string;
@@ -7,19 +11,34 @@ 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> {
15
+ private prevValue: string;
16
+
11
17
  OnInit() {
12
18
  this.modify();
19
+ super.OnInit();
13
20
  }
14
21
 
15
22
  OnDestroy() {
16
23
  this.clean();
24
+ super.OnDestroy();
17
25
  }
18
26
 
19
27
  OnUpdate() {
20
28
  this.modify();
21
29
  }
22
30
 
31
+ OnEnterMediaQuery([, attribute]: MediaQueryEvent) {
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
+
23
42
  private clean() {
24
43
  this.setStyles({ alignSelf: null })(this.element);
25
44
  }
package/src/layout/flex.ts CHANGED
@@ -1,4 +1,8 @@
1
- import { Attribute, Modifier } from '@rhtml/custom-attributes';
1
+ import {
2
+ MediaQueryAttribute,
3
+ MediaQueryEvent,
4
+ Modifier
5
+ } from '@rhtml/custom-attributes';
2
6
 
3
7
  interface Styles {
4
8
  flex: string;
@@ -9,19 +13,34 @@ 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> {
17
+ private prevValue: string;
18
+
13
19
  OnInit() {
14
20
  this.modify();
21
+ super.OnInit();
15
22
  }
16
23
 
17
24
  OnDestroy() {
18
25
  this.clean();
26
+ super.OnDestroy();
19
27
  }
20
28
 
21
29
  OnUpdate() {
22
30
  this.modify();
23
31
  }
24
32
 
33
+ OnEnterMediaQuery([, attribute]: MediaQueryEvent) {
34
+ this.prevValue = this.value;
35
+ this.value = attribute.value ?? this.value;
36
+ this.modify();
37
+ }
38
+
39
+ OnExitMediaQuery() {
40
+ this.value = this.prevValue ?? this.value;
41
+ this.modify();
42
+ }
43
+
25
44
  private clean() {
26
45
  this.setStyles({
27
46
  boxSizing: null,
package/src/layout/layout-align.ts CHANGED
@@ -1,4 +1,8 @@
1
- import { Attribute, Modifier } from '@rhtml/custom-attributes';
1
+ import {
2
+ MediaQueryAttribute,
3
+ MediaQueryEvent,
4
+ Modifier
5
+ } from '@rhtml/custom-attributes';
2
6
 
3
7
  interface Styles {
4
8
  placeContent: string;
@@ -9,19 +13,34 @@ 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> {
17
+ private prevValue: string;
18
+
13
19
  OnInit() {
14
20
  this.modify();
21
+ super.OnInit();
15
22
  }
16
23
 
17
24
  OnDestroy() {
18
25
  this.clean();
26
+ super.OnDestroy();
19
27
  }
20
28
 
21
29
  OnUpdate() {
22
30
  this.modify();
23
31
  }
24
32
 
33
+ OnEnterMediaQuery([, attribute]: MediaQueryEvent) {
34
+ this.prevValue = this.value;
35
+ this.value = attribute.value ?? this.value;
36
+ this.modify();
37
+ }
38
+
39
+ OnExitMediaQuery() {
40
+ this.value = this.prevValue ?? this.value;
41
+ this.modify();
42
+ }
43
+
25
44
  private clean() {
26
45
  this.setStyles({
27
46
  alignItems: null,
package/src/layout/layout-gap.ts CHANGED
@@ -1,4 +1,9 @@
1
- import { Attribute, Modifier } from '@rhtml/custom-attributes';
1
+ import {
2
+ createFiltersFromSelector,
3
+ MediaQueryAttribute,
4
+ MediaQueryEvent,
5
+ Modifier
6
+ } from '@rhtml/custom-attributes';
2
7
 
3
8
  interface Styles {
4
9
  margin: string;
@@ -6,29 +11,46 @@ interface Styles {
6
11
  }
7
12
 
8
13
  @Modifier({
9
- selector: 'fxLayoutGap'
14
+ selector: 'fxLayoutGap',
15
+ observe: {
16
+ childList: true,
17
+ subtree: true,
18
+ attributes: true,
19
+ attributeFilter: createFiltersFromSelector('fxlayout')
20
+ }
10
21
  })
11
- export class LayoutGap extends Attribute<Styles> {
12
- private observer: MutationObserver;
22
+ export class LayoutGap extends MediaQueryAttribute<Styles> {
23
+ private prevValue: string;
13
24
 
14
25
  OnInit() {
15
26
  this.modify();
16
- this.observer = new MutationObserver(() => this.modify());
17
- this.observer.observe(this.element, {
18
- childList: true,
19
- subtree: true
20
- });
27
+ super.OnInit();
21
28
  }
22
29
 
23
30
  OnDestroy() {
24
31
  this.clean();
25
- this.observer.disconnect();
32
+ super.OnDestroy();
26
33
  }
27
34
 
28
35
  OnUpdate() {
29
36
  this.modify();
30
37
  }
31
38
 
39
+ OnChange() {
40
+ this.modify();
41
+ }
42
+
43
+ OnEnterMediaQuery([, attribute]: MediaQueryEvent) {
44
+ this.prevValue = this.value;
45
+ this.value = attribute.value ?? this.value;
46
+ this.modify();
47
+ }
48
+
49
+ OnExitMediaQuery() {
50
+ this.value = this.prevValue ?? this.value;
51
+ this.modify();
52
+ }
53
+
32
54
  private clean() {
33
55
  const divs = [...this.element.children] as HTMLElement[];
34
56
  for (const div of divs) {
@@ -40,11 +62,19 @@ export class LayoutGap extends Attribute<Styles> {
40
62
  }
41
63
 
42
64
  private modify() {
65
+ const layout = this.element.getAttribute('fxlayout');
66
+ let margin = `0px ${this.value} ${this.value} 0px`;
67
+ if (layout === 'row') {
68
+ margin = `0px ${this.value} 0px 0px`;
69
+ }
70
+ if (layout === 'column') {
71
+ margin = `0px 0px ${this.value} 0px`;
72
+ }
43
73
  const divs = this.element.children;
44
74
  for (const div of divs) {
45
75
  this.setStyles({
46
76
  flex: '1 1 25%',
47
- margin: `0px ${this.value} ${this.value} 0px`
77
+ margin
48
78
  })(div);
49
79
  }
50
80
  }
package/src/layout/layout.ts CHANGED
@@ -1,4 +1,8 @@
1
- import { Attribute, Modifier } from '@rhtml/custom-attributes';
1
+ import {
2
+ MediaQueryAttribute,
3
+ MediaQueryEvent,
4
+ Modifier
5
+ } from '@rhtml/custom-attributes';
2
6
 
3
7
  interface Styles {
4
8
  flexFlow: string;
@@ -9,21 +13,35 @@ 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';
18
+ private prevValue: string;
14
19
 
15
20
  OnInit() {
16
21
  this.modify();
22
+ super.OnInit();
17
23
  }
18
24
 
19
25
  OnDestroy() {
20
26
  this.clean();
27
+ super.OnDestroy();
21
28
  }
22
29
 
23
30
  OnUpdate() {
24
31
  this.modify();
25
32
  }
26
33
 
34
+ OnEnterMediaQuery([, attribute]: MediaQueryEvent) {
35
+ this.prevValue = this.value;
36
+ this.value = attribute.value ?? this.value;
37
+ this.modify();
38
+ }
39
+
40
+ OnExitMediaQuery() {
41
+ this.value = this.prevValue ?? this.value;
42
+ this.modify();
43
+ }
44
+
27
45
  private clean() {
28
46
  this.setStyles({
29
47
  boxSizing: null,
@@ -31,7 +49,12 @@ export class Layout extends Attribute<Styles> {
31
49
  display: null
32
50
  })(this.element);
33
51
  }
52
+
34
53
  private modify() {
54
+ if (!this.value) {
55
+ return;
56
+ }
57
+ this.element.setAttribute(this.selector, this.value);
35
58
  const splitted = this.value.split(' ');
36
59
  const [mainAxis, crossAxis] = splitted;
37
60
  this.setStyles({