@rhtml/custom-attributes 0.0.113 → 0.0.116
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.
- package/README.md +4 -2
- package/dist/attribute.d.ts +1 -1
- package/dist/custom-registry.d.ts +1 -1
- package/dist/custom-registry.js +4 -4
- package/dist/custom-registry.js.map +1 -1
- package/dist/decorators/index.d.ts +3 -3
- package/dist/decorators/index.js +7 -5
- package/dist/decorators/index.js.map +1 -1
- package/dist/helpers/index.js +5 -3
- package/dist/helpers/index.js.map +1 -1
- package/dist/index.js +6 -2
- package/dist/index.js.map +1 -1
- package/dist/media-attribute.d.ts +6 -10
- package/dist/media-attribute.js +7 -7
- package/dist/media-attribute.js.map +1 -1
- package/package.json +2 -11
- package/src/attribute.ts +1 -1
- package/src/custom-registry.ts +3 -3
- package/src/decorators/index.ts +27 -29
- package/src/helpers/index.ts +4 -4
- package/src/media-attribute.ts +16 -18
- package/.eslintrc.js +0 -26
- package/.prettierrc +0 -4
- package/jest.config.js +0 -16
package/README.md
CHANGED
|
@@ -317,7 +317,7 @@ Extending `MediaQueryAttribute` will help you to track values from specific reso
|
|
|
317
317
|
|
|
318
318
|
```typescript
|
|
319
319
|
import {
|
|
320
|
-
|
|
320
|
+
MediaQueryEvent,
|
|
321
321
|
ExitMediaQueryAttributes,
|
|
322
322
|
MediaQueryAttribute,
|
|
323
323
|
Modifier
|
|
@@ -331,6 +331,8 @@ interface Styles {
|
|
|
331
331
|
selector: 'color'
|
|
332
332
|
})
|
|
333
333
|
export class Color extends MediaQueryAttribute<Styles> {
|
|
334
|
+
private prevValue: string;
|
|
335
|
+
|
|
334
336
|
OnInit() {
|
|
335
337
|
this.modify();
|
|
336
338
|
/* Executing media matcher init */
|
|
@@ -347,7 +349,7 @@ export class Color extends MediaQueryAttribute<Styles> {
|
|
|
347
349
|
this.modify();
|
|
348
350
|
}
|
|
349
351
|
|
|
350
|
-
OnEnterMediaQuery([event, attribute]:
|
|
352
|
+
OnEnterMediaQuery([event, attribute]: MediaQueryEvent) {
|
|
351
353
|
console.log(event, attribute.value);
|
|
352
354
|
this.prevValue = this.value;
|
|
353
355
|
this.value = attribute.value ?? this.value;
|
package/dist/attribute.d.ts
CHANGED
|
@@ -7,7 +7,7 @@ export declare class CustomAttributeRegistry {
|
|
|
7
7
|
private observer;
|
|
8
8
|
constructor(parent: HTMLElement);
|
|
9
9
|
define(attrName: string, Constructor: Constructor<Attribute>): void;
|
|
10
|
-
get(element: HTMLElement, attrName: string): Attribute<
|
|
10
|
+
get(element: HTMLElement, attrName: string): Attribute<Record<string, unknown>>;
|
|
11
11
|
private getConstructor;
|
|
12
12
|
private observe;
|
|
13
13
|
unsubscribe(): void;
|
package/dist/custom-registry.js
CHANGED
|
@@ -27,7 +27,7 @@ class CustomAttributeRegistry {
|
|
|
27
27
|
}
|
|
28
28
|
observe() {
|
|
29
29
|
var _a, _b;
|
|
30
|
-
this.observer = new MutationObserver(mutations => {
|
|
30
|
+
this.observer = new MutationObserver((mutations) => {
|
|
31
31
|
for (const mutation of mutations) {
|
|
32
32
|
if (mutation.type === 'attributes') {
|
|
33
33
|
const attr = this.getConstructor(mutation.attributeName);
|
|
@@ -49,7 +49,7 @@ class CustomAttributeRegistry {
|
|
|
49
49
|
childList: true,
|
|
50
50
|
subtree: true,
|
|
51
51
|
attributes: true,
|
|
52
|
-
attributeOldValue: true
|
|
52
|
+
attributeOldValue: true,
|
|
53
53
|
});
|
|
54
54
|
}
|
|
55
55
|
unsubscribe() {
|
|
@@ -114,7 +114,7 @@ class CustomAttributeRegistry {
|
|
|
114
114
|
modifier = new Modifier();
|
|
115
115
|
if ((_b = (_a = Modifier.options) === null || _a === void 0 ? void 0 : _a.observedAttributes) === null || _b === void 0 ? void 0 : _b.length) {
|
|
116
116
|
for (const observedAttribute of Modifier.options.observedAttributes) {
|
|
117
|
-
helpers_1.observe(modifier, observedAttribute);
|
|
117
|
+
(0, helpers_1.observe)(modifier, observedAttribute);
|
|
118
118
|
}
|
|
119
119
|
}
|
|
120
120
|
modifier.element = el;
|
|
@@ -125,7 +125,7 @@ class CustomAttributeRegistry {
|
|
|
125
125
|
modifier.OnInit();
|
|
126
126
|
}
|
|
127
127
|
if (Modifier.options.observe) {
|
|
128
|
-
modifier.observer = new MutationObserver(records => modifier.OnChange(records));
|
|
128
|
+
modifier.observer = new MutationObserver((records) => modifier.OnChange(records));
|
|
129
129
|
modifier.observer.observe(modifier.element, Modifier.options.observe);
|
|
130
130
|
}
|
|
131
131
|
map.set(attributeName, modifier);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"custom-registry.js","sourceRoot":"","sources":["../src/custom-registry.ts"],"names":[],"mappings":";;;AACA,uCAAoC;AAGpC,MAAa,uBAAuB;IAKlC,YAAoB,MAAmB;QAAnB,WAAM,GAAN,MAAM,CAAa;QAJ/B,aAAQ,GAAwC,IAAI,GAAG,EAAE,CAAC;QAC1D,gBAAW,GAA6C,IAAI,GAAG,EAAE,CAAC;QAIxE,IAAI,CAAC,MAAM,EAAE;YACX,MAAM,IAAI,KAAK,CAAC,gCAAgC,CAAC,CAAC;SACnD;QACD,IAAI,CAAC,OAAO,EAAE,CAAC;IACjB,CAAC;IAED,MAAM,CAAC,QAAgB,EAAE,WAAmC;QAC1D,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC,WAAW,EAAE,EAAE,WAAW,CAAC,CAAC;QACvD,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAClC,CAAC;IAED,GAAG,CAAC,OAAoB,EAAE,QAAgB;QACxC,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAC1C,IAAI,CAAC,GAAG;YAAE,OAAO;QACjB,OAAO,GAAG,CAAC,GAAG,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAC;IACzC,CAAC;IAEO,cAAc,CAAC,QAAgB;QACrC,OAAO,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAC;IACnD,CAAC;IAEO,OAAO;;QACb,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,SAAS,
|
|
1
|
+
{"version":3,"file":"custom-registry.js","sourceRoot":"","sources":["../src/custom-registry.ts"],"names":[],"mappings":";;;AACA,uCAAoC;AAGpC,MAAa,uBAAuB;IAKlC,YAAoB,MAAmB;QAAnB,WAAM,GAAN,MAAM,CAAa;QAJ/B,aAAQ,GAAwC,IAAI,GAAG,EAAE,CAAC;QAC1D,gBAAW,GAA6C,IAAI,GAAG,EAAE,CAAC;QAIxE,IAAI,CAAC,MAAM,EAAE;YACX,MAAM,IAAI,KAAK,CAAC,gCAAgC,CAAC,CAAC;SACnD;QACD,IAAI,CAAC,OAAO,EAAE,CAAC;IACjB,CAAC;IAED,MAAM,CAAC,QAAgB,EAAE,WAAmC;QAC1D,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC,WAAW,EAAE,EAAE,WAAW,CAAC,CAAC;QACvD,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAClC,CAAC;IAED,GAAG,CAAC,OAAoB,EAAE,QAAgB;QACxC,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAC1C,IAAI,CAAC,GAAG;YAAE,OAAO;QACjB,OAAO,GAAG,CAAC,GAAG,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAC;IACzC,CAAC;IAEO,cAAc,CAAC,QAAgB;QACrC,OAAO,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAC;IACnD,CAAC;IAEO,OAAO;;QACb,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,CAAC,SAAS,EAAE,EAAE;YACjD,KAAK,MAAM,QAAQ,IAAI,SAAS,EAAE;gBAChC,IAAI,QAAQ,CAAC,IAAI,KAAK,YAAY,EAAE;oBAClC,MAAM,IAAI,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;oBACzD,IAAI,IAAI,EAAE;wBACR,IAAI,CAAC,KAAK,CACR,QAAQ,CAAC,aAAa,EACtB,QAAQ,CAAC,MAAe,EACxB,QAAQ,CAAC,QAAQ,CAClB,CAAC;qBACH;iBACF;qBAAM;oBACL,KAAK,MAAM,IAAI,IAAI,QAAQ,CAAC,YAAY,EAAE;wBACxC,IAAI,CAAC,SAAS,CAAC,IAAa,CAAC,CAAC;qBAC/B;oBACD,KAAK,MAAM,IAAI,IAAI,QAAQ,CAAC,UAAU,EAAE;wBACtC,IAAI,CAAC,cAAc,CAAC,IAAa,CAAC,CAAC;qBACpC;iBACF;aACF;QACH,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,MAAA,MAAA,IAAI,CAAC,MAAM,0CAAG,YAAY,CAAC,mCAAI,IAAI,CAAC,MAAM,EAAE;YAChE,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI;YAChB,iBAAiB,EAAE,IAAI;SACxB,CAAC,CAAC;IACL,CAAC;IAED,WAAW;;QACT,MAAA,IAAI,CAAC,QAAQ,0CAAE,UAAU,EAAE,CAAC;QAC5B,MAAM,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC;QAC9C,KAAK,MAAM,WAAW,IAAI,MAAM,EAAE;YAChC,MAAM,SAAS,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC;YAC5C,KAAK,MAAM,QAAQ,IAAI,SAAS,EAAE;gBAChC,QAAQ,CAAC,SAAS,EAAE,CAAC;gBACrB,IAAI,QAAQ,CAAC,QAAQ,EAAE;oBACrB,QAAQ,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;iBAChC;aACF;YACD,WAAW,CAAC,KAAK,EAAE,CAAC;SACrB;QACD,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;IAC3B,CAAC;IAEO,gBAAgB,CAAC,QAAgB,EAAE,GAAiB;QAC1D,MAAM,MAAM,GAAG,GAAG,IAAI,IAAI,CAAC,MAAM,CAAC;QAElC,MAAM,OAAO,GAAG,MAAM,CAAC,gBAAgB,CAAC,GAAG,GAAG,QAAQ,GAAG,GAAG,CAAC,CAAC;QAE9D,KAAK,MAAM,KAAK,IAAI,CAAC,GAAG,OAAO,CAAC,EAAE;YAChC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,KAAc,CAAC,CAAC;SACtC;IACH,CAAC;IAEO,cAAc,CAAC,OAAoB;QACzC,IAAI,OAAO,CAAC,QAAQ,KAAK,CAAC,EAAE;YAC1B,OAAO;SACR;QACD,KAAK,MAAM,IAAI,IAAI,OAAO,CAAC,UAAU,EAAE;YACrC,IAAI,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;gBAClC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;aAChC;SACF;QACD,KAAK,MAAM,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE;YAClC,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;SACtC;IACH,CAAC;IAEO,SAAS,CAAC,OAAoB;QACpC,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAC1C,IAAI,CAAC,GAAG,EAAE;YACR,OAAO;SACR;QACD,KAAK,MAAM,CAAC,EAAE,QAAQ,CAAC,IAAI,GAAG,EAAE;YAC9B,IAAI,QAAQ,CAAC,SAAS,EAAE;gBACtB,QAAQ,CAAC,SAAS,EAAE,CAAC;aACtB;SACF;QACD,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACnC,CAAC;IAEO,KAAK,CAAC,aAAqB,EAAE,EAAe,EAAE,MAAe;;QACnE,IAAI,GAAG,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QACnC,IAAI,CAAC,GAAG,EAAE;YACR,GAAG,GAAG,IAAI,GAAG,EAAE,CAAC;YAChB,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC;SAC/B;QAED,IAAI,QAAQ,GAAG,GAAG,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;QACtC,MAAM,SAAS,GAAG,EAAE,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;QAEjD,IAAI,CAAC,QAAQ,EAAE;YACb,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;YACpD,QAAQ,GAAG,IAAI,QAAQ,EAAE,CAAC;YAC1B,IAAI,MAAA,MAAA,QAAQ,CAAC,OAAO,0CAAE,kBAAkB,0CAAE,MAAM,EAAE;gBAChD,KAAK,MAAM,iBAAiB,IAAI,QAAQ,CAAC,OAAO,CAAC,kBAAkB,EAAE;oBACnE,IAAA,iBAAO,EAAC,QAAQ,EAAE,iBAAiB,CAAC,CAAC;iBACtC;aACF;YACD,QAAQ,CAAC,OAAO,GAAG,EAAE,CAAC;YACtB,QAAQ,CAAC,QAAQ,GAAG,aAAa,CAAC;YAElC,QAAQ,CAAC,KAAK,GAAG,SAAS,IAAI,QAAQ,CAAC,KAAK,CAAC;YAC7C,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;YAE9B,IAAI,QAAQ,CAAC,MAAM,EAAE;gBACnB,QAAQ,CAAC,MAAM,EAAE,CAAC;aACnB;YACD,IAAI,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE;gBAC5B,QAAQ,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,CAAC,OAAO,EAAE,EAAE,CACnD,QAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC,CAC3B,CAAC;gBACF,QAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAO,EAAE,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;aACvE;YACD,GAAG,CAAC,GAAG,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;YACjC,OAAO;SACR;QAED,IAAI,SAAS,IAAI,IAAI,IAAI,CAAC,CAAC,QAAQ,CAAC,KAAK,EAAE;YACzC,QAAQ,CAAC,KAAK,GAAG,SAAS,CAAC;YAC3B,IAAI,QAAQ,CAAC,SAAS,EAAE;gBACtB,QAAQ,CAAC,SAAS,EAAE,CAAC;aACtB;YACD,IAAI,QAAQ,CAAC,QAAQ,EAAE;gBACrB,QAAQ,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;aAChC;YACD,GAAG,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;YAC1B,OAAO;SACR;QACD,IAAI,SAAS,KAAK,QAAQ,CAAC,KAAK,EAAE;YAChC,QAAQ,CAAC,KAAK,GAAG,SAAS,CAAC;YAC3B,IAAI,QAAQ,CAAC,QAAQ,EAAE;gBACrB,QAAQ,CAAC,QAAQ,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;aACtC;YACD,OAAO;SACR;IACH,CAAC;CACF;AAtKD,0DAsKC"}
|
|
@@ -8,14 +8,14 @@ export declare const Input: (options?: InputOptions) => (target: any, memberName
|
|
|
8
8
|
* Decorator @Modifier
|
|
9
9
|
* Accepts parameter options with selector and registry
|
|
10
10
|
*/
|
|
11
|
-
export declare const Modifier: (options: ModifierOptions) => (target:
|
|
11
|
+
export declare const Modifier: (options: ModifierOptions) => (target: any) => void;
|
|
12
12
|
/**
|
|
13
13
|
* Decorator @CustomAttribute
|
|
14
14
|
* Accepts parameter options with selector and registry
|
|
15
15
|
*/
|
|
16
|
-
export declare const CustomAttribute: (options: ModifierOptions) => (target:
|
|
16
|
+
export declare const CustomAttribute: (options: ModifierOptions) => (target: any) => void;
|
|
17
17
|
/**
|
|
18
18
|
* Decorator @Directive
|
|
19
19
|
* Accepts parameter options with selector and registry
|
|
20
20
|
*/
|
|
21
|
-
export declare const Directive: (options: ModifierOptions) => (target:
|
|
21
|
+
export declare const Directive: (options: ModifierOptions) => (target: any) => void;
|
package/dist/decorators/index.js
CHANGED
|
@@ -6,7 +6,7 @@ const helpers_1 = require("../helpers");
|
|
|
6
6
|
* Decorator @Input
|
|
7
7
|
* Used to get attribute from element
|
|
8
8
|
*/
|
|
9
|
-
|
|
9
|
+
const Input = (options) => (target, memberName) => {
|
|
10
10
|
const OnInit = target.OnInit || helpers_1.noop;
|
|
11
11
|
Object.defineProperty(target, 'OnInit', {
|
|
12
12
|
value() {
|
|
@@ -22,25 +22,27 @@ exports.Input = (options) => (target, memberName) => {
|
|
|
22
22
|
element.setAttribute(memberName.toLowerCase(), value);
|
|
23
23
|
originalValue = value;
|
|
24
24
|
},
|
|
25
|
-
configurable: true
|
|
25
|
+
configurable: true,
|
|
26
26
|
});
|
|
27
27
|
return OnInit.call(this);
|
|
28
28
|
},
|
|
29
|
-
configurable: true
|
|
29
|
+
configurable: true,
|
|
30
30
|
});
|
|
31
31
|
if (options === null || options === void 0 ? void 0 : options.observe) {
|
|
32
|
-
helpers_1.observe(target, memberName);
|
|
32
|
+
(0, helpers_1.observe)(target, memberName);
|
|
33
33
|
}
|
|
34
34
|
};
|
|
35
|
+
exports.Input = Input;
|
|
35
36
|
/**
|
|
36
37
|
* Decorator @Modifier
|
|
37
38
|
* Accepts parameter options with selector and registry
|
|
38
39
|
*/
|
|
39
|
-
|
|
40
|
+
const Modifier = (options) => {
|
|
40
41
|
return (target) => {
|
|
41
42
|
target['options'] = options;
|
|
42
43
|
};
|
|
43
44
|
};
|
|
45
|
+
exports.Modifier = Modifier;
|
|
44
46
|
/**
|
|
45
47
|
* Decorator @CustomAttribute
|
|
46
48
|
* Accepts parameter options with selector and registry
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/decorators/index.ts"],"names":[],"mappings":";;;AAAA,wCAA2C;AAG3C;;;GAGG;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/decorators/index.ts"],"names":[],"mappings":";;;AAAA,wCAA2C;AAG3C;;;GAGG;AACI,MAAM,KAAK,GAChB,CAAC,OAAsB,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,UAAkB,EAAE,EAAE;IACzD,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,IAAI,cAAI,CAAC;IACrC,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,QAAQ,EAAE;QACtC,KAAK;;YACH,IAAI,aAAa,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC;YAErC,MAAM,OAAO,GAAG,MAAA,IAAI,CAAC,OAAO,mCAAI,IAAI,CAAC;YACrC,MAAM,CAAC,cAAc,CAAC,IAAI,EAAE,UAAU,EAAE;gBACtC,GAAG,EAAE;oBACH,aAAa,GAAG,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC,CAAC;oBAC/D,OAAO,aAAa,CAAC;gBACvB,CAAC;gBACD,GAAG,CAAC,KAAK;oBACP,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,WAAW,EAAE,EAAE,KAAK,CAAC,CAAC;oBACtD,aAAa,GAAG,KAAK,CAAC;gBACxB,CAAC;gBACD,YAAY,EAAE,IAAI;aACnB,CAAC,CAAC;YACH,OAAO,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC3B,CAAC;QACD,YAAY,EAAE,IAAI;KACnB,CAAC,CAAC;IAEH,IAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,EAAE;QACpB,IAAA,iBAAO,EAAC,MAAM,EAAE,UAAU,CAAC,CAAC;KAC7B;AACH,CAAC,CAAC;AA3BS,QAAA,KAAK,SA2Bd;AAEJ;;;GAGG;AACI,MAAM,QAAQ,GAAG,CAAC,OAAwB,EAAE,EAAE;IACnD,OAAO,CAAC,MAAM,EAAE,EAAE;QAChB,MAAM,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC;IAC9B,CAAC,CAAC;AACJ,CAAC,CAAC;AAJW,QAAA,QAAQ,YAInB;AAEF;;;GAGG;AACU,QAAA,eAAe,GAAG,gBAAQ,CAAC;AACxC;;;GAGG;AACU,QAAA,SAAS,GAAG,gBAAQ,CAAC"}
|
package/dist/helpers/index.js
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.observe = exports.noop = void 0;
|
|
4
|
-
|
|
4
|
+
const noop = function () {
|
|
5
5
|
/* */
|
|
6
6
|
};
|
|
7
|
-
exports.
|
|
7
|
+
exports.noop = noop;
|
|
8
|
+
const observe = (target, memberName) => {
|
|
8
9
|
const prototype = target.constructor.prototype;
|
|
9
10
|
const OnInit = prototype.OnInit || exports.noop;
|
|
10
11
|
const OnDestroy = prototype.OnDestroy || exports.noop;
|
|
@@ -22,7 +23,7 @@ exports.observe = (target, memberName) => {
|
|
|
22
23
|
});
|
|
23
24
|
observer.observe(element, {
|
|
24
25
|
attributeFilter: [memberName],
|
|
25
|
-
attributes: true
|
|
26
|
+
attributes: true,
|
|
26
27
|
});
|
|
27
28
|
return OnInit.call(this);
|
|
28
29
|
};
|
|
@@ -31,4 +32,5 @@ exports.observe = (target, memberName) => {
|
|
|
31
32
|
return OnDestroy.call(this);
|
|
32
33
|
};
|
|
33
34
|
};
|
|
35
|
+
exports.observe = observe;
|
|
34
36
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/helpers/index.ts"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/helpers/index.ts"],"names":[],"mappings":";;;AAAO,MAAM,IAAI,GAAG;IAClB,MAAM;AACR,CAAC,CAAC;AAFW,QAAA,IAAI,QAEf;AAEK,MAAM,OAAO,GAAG,CAAC,MAAe,EAAE,UAAkB,EAAE,EAAE;IAC7D,MAAM,SAAS,GAAG,MAAM,CAAC,WAAW,CAAC,SAAS,CAAC;IAC/C,MAAM,MAAM,GAAG,SAAS,CAAC,MAAM,IAAI,YAAI,CAAC;IACxC,MAAM,SAAS,GAAG,SAAS,CAAC,SAAS,IAAI,YAAI,CAAC;IAC9C,MAAM,iBAAiB,GAAG,SAAS,CAAC,iBAAiB,IAAI,YAAI,CAAC;IAE9D,IAAI,QAA0B,CAAC;IAC/B,SAAS,CAAC,MAAM,GAAG;;QACjB,MAAM,OAAO,GAAG,MAAA,IAAI,CAAC,OAAO,mCAAI,IAAI,CAAC;QACrC,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,UAAU,EAAE,CAAC;SACvB;QACD,QAAQ,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;YACnC,iBAAiB,CAAC,IAAI,CACpB,IAAI,EACJ,UAAU,EACV,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,CACjC,CAAC;YACF,MAAM,CAAC,UAAU,CAAC,GAAG,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;QACxD,CAAC,CAAC,CAAC;QACH,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE;YACxB,eAAe,EAAE,CAAC,UAAU,CAAC;YAC7B,UAAU,EAAE,IAAI;SACjB,CAAC,CAAC;QACH,OAAO,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC,CAAC;IACF,SAAS,CAAC,SAAS,GAAG;QACpB,QAAQ,CAAC,UAAU,EAAE,CAAC;QACtB,OAAO,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC,CAAC;AACJ,CAAC,CAAC;AA9BW,QAAA,OAAO,WA8BlB"}
|
package/dist/index.js
CHANGED
|
@@ -1,13 +1,17 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
3
|
if (k2 === undefined) k2 = k;
|
|
4
|
-
Object.
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
5
9
|
}) : (function(o, m, k, k2) {
|
|
6
10
|
if (k2 === undefined) k2 = k;
|
|
7
11
|
o[k2] = m[k];
|
|
8
12
|
}));
|
|
9
13
|
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
10
|
-
for (var p in m) if (p !== "default" && !
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
11
15
|
};
|
|
12
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
13
17
|
__exportStar(require("./attribute"), exports);
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,8CAA4B;AAC5B,oDAAkC;AAClC,+CAA6B;AAC7B,4CAA0B;AAC1B,oDAAkC;AAClC,0CAAwB"}
|
|
@@ -4,24 +4,20 @@ import { Attribute } from './attribute';
|
|
|
4
4
|
* for performance reasons it is key value pair
|
|
5
5
|
*/
|
|
6
6
|
export declare const MediaMatchers: Map<string, string>;
|
|
7
|
-
declare type MediaEvent = MediaQueryList | MediaQueryListEvent;
|
|
8
|
-
export declare type
|
|
9
|
-
export declare type ExitMediaQueryAttributes = [MediaEvent, string];
|
|
7
|
+
export declare type MediaEvent = MediaQueryList | MediaQueryListEvent;
|
|
8
|
+
export declare type MediaQueryEvent = [MediaEvent, Attr];
|
|
10
9
|
export interface OnUpdateMediaQuery {
|
|
11
|
-
OnEnterMediaQuery(tuple:
|
|
12
|
-
OnExitMediaQuery(tuple:
|
|
10
|
+
OnEnterMediaQuery(tuple: MediaQueryEvent): void;
|
|
11
|
+
OnExitMediaQuery(tuple: MediaQueryEvent): void;
|
|
13
12
|
}
|
|
14
13
|
export declare const Breakpoints: string[];
|
|
15
14
|
export declare const createFiltersFromSelector: (selector: string) => string[];
|
|
16
15
|
export declare abstract class MediaQueryAttribute<T> extends Attribute<T> implements OnUpdateMediaQuery {
|
|
17
|
-
prevValue: string;
|
|
18
|
-
originalValue: string;
|
|
19
16
|
private matchers;
|
|
20
17
|
private cachedAttributes;
|
|
21
18
|
listener: (event: MediaQueryList | MediaQueryListEvent) => void;
|
|
22
19
|
OnInit(): void;
|
|
23
20
|
OnDestroy(): void;
|
|
24
|
-
abstract OnEnterMediaQuery(tuple:
|
|
25
|
-
abstract OnExitMediaQuery(tuple:
|
|
21
|
+
abstract OnEnterMediaQuery(tuple: MediaQueryEvent): void;
|
|
22
|
+
abstract OnExitMediaQuery(tuple: MediaQueryEvent): void;
|
|
26
23
|
}
|
|
27
|
-
export {};
|
package/dist/media-attribute.js
CHANGED
|
@@ -18,13 +18,14 @@ exports.MediaMatchers = new Map([
|
|
|
18
18
|
['screen and (min-width: 600px)', 'gt-xs'],
|
|
19
19
|
['screen and (min-width: 960px)', 'gt-sm'],
|
|
20
20
|
['screen and (min-width: 1280px)', 'gt-md'],
|
|
21
|
-
['screen and (min-width: 1920px)', 'gt-lg']
|
|
21
|
+
['screen and (min-width: 1920px)', 'gt-lg'],
|
|
22
22
|
]);
|
|
23
23
|
exports.Breakpoints = [...exports.MediaMatchers.values()];
|
|
24
|
-
|
|
25
|
-
...exports.Breakpoints.map(breakpoint => `${selector}.${breakpoint}`),
|
|
26
|
-
selector
|
|
24
|
+
const createFiltersFromSelector = (selector) => [
|
|
25
|
+
...exports.Breakpoints.map((breakpoint) => `${selector}.${breakpoint}`),
|
|
26
|
+
selector,
|
|
27
27
|
];
|
|
28
|
+
exports.createFiltersFromSelector = createFiltersFromSelector;
|
|
28
29
|
class MediaQueryAttribute extends attribute_1.Attribute {
|
|
29
30
|
constructor() {
|
|
30
31
|
super(...arguments);
|
|
@@ -36,15 +37,14 @@ class MediaQueryAttribute extends attribute_1.Attribute {
|
|
|
36
37
|
if (event.matches && attribute) {
|
|
37
38
|
return this.OnEnterMediaQuery([event, attribute]);
|
|
38
39
|
}
|
|
39
|
-
return this.OnExitMediaQuery([event,
|
|
40
|
+
return this.OnExitMediaQuery([event, attribute]);
|
|
40
41
|
};
|
|
41
42
|
}
|
|
42
43
|
OnInit() {
|
|
43
44
|
if (this.OnEnterMediaQuery || this.OnExitMediaQuery) {
|
|
44
|
-
this.originalValue = this.value;
|
|
45
45
|
for (const query of exports.MediaMatchers.keys()) {
|
|
46
46
|
const matcher = window.matchMedia(query);
|
|
47
|
-
const attr = Object.values(this.element.attributes).find(v => v.name ===
|
|
47
|
+
const attr = Object.values(this.element.attributes).find((v) => v.name ===
|
|
48
48
|
`${this.selector.toLowerCase()}.${exports.MediaMatchers.get(query)}`);
|
|
49
49
|
if (attr) {
|
|
50
50
|
this.cachedAttributes.set(attr.name, attr);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"media-attribute.js","sourceRoot":"","sources":["../src/media-attribute.ts"],"names":[],"mappings":";;;AAAA,2CAAwC;AAExC;;;GAGG;AACU,QAAA,aAAa,GAAG,IAAI,GAAG,CAAC;IACnC,CAAC,+BAA+B,EAAE,IAAI,CAAC;IACvC,CAAC,sDAAsD,EAAE,IAAI,CAAC;IAC9D,CAAC,uDAAuD,EAAE,IAAI,CAAC;IAC/D,CAAC,wDAAwD,EAAE,IAAI,CAAC;IAChE,CAAC,wDAAwD,EAAE,IAAI,CAAC;IAChE,CAAC,+BAA+B,EAAE,OAAO,CAAC;IAC1C,CAAC,gCAAgC,EAAE,OAAO,CAAC;IAC3C,CAAC,gCAAgC,EAAE,OAAO,CAAC;IAC3C,CAAC,+BAA+B,EAAE,OAAO,CAAC;IAC1C,CAAC,+BAA+B,EAAE,OAAO,CAAC;IAC1C,CAAC,gCAAgC,EAAE,OAAO,CAAC;IAC3C,CAAC,gCAAgC,EAAE,OAAO,CAAC;CAC5C,CAAC,CAAC;AAUU,QAAA,WAAW,GAAG,CAAC,GAAG,qBAAa,CAAC,MAAM,EAAE,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"media-attribute.js","sourceRoot":"","sources":["../src/media-attribute.ts"],"names":[],"mappings":";;;AAAA,2CAAwC;AAExC;;;GAGG;AACU,QAAA,aAAa,GAAG,IAAI,GAAG,CAAC;IACnC,CAAC,+BAA+B,EAAE,IAAI,CAAC;IACvC,CAAC,sDAAsD,EAAE,IAAI,CAAC;IAC9D,CAAC,uDAAuD,EAAE,IAAI,CAAC;IAC/D,CAAC,wDAAwD,EAAE,IAAI,CAAC;IAChE,CAAC,wDAAwD,EAAE,IAAI,CAAC;IAChE,CAAC,+BAA+B,EAAE,OAAO,CAAC;IAC1C,CAAC,gCAAgC,EAAE,OAAO,CAAC;IAC3C,CAAC,gCAAgC,EAAE,OAAO,CAAC;IAC3C,CAAC,+BAA+B,EAAE,OAAO,CAAC;IAC1C,CAAC,+BAA+B,EAAE,OAAO,CAAC;IAC1C,CAAC,gCAAgC,EAAE,OAAO,CAAC;IAC3C,CAAC,gCAAgC,EAAE,OAAO,CAAC;CAC5C,CAAC,CAAC;AAUU,QAAA,WAAW,GAAG,CAAC,GAAG,qBAAa,CAAC,MAAM,EAAE,CAAC,CAAC;AAEhD,MAAM,yBAAyB,GAAG,CAAC,QAAgB,EAAE,EAAE,CAAC;IAC7D,GAAG,mBAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,GAAG,QAAQ,IAAI,UAAU,EAAE,CAAC;IAC/D,QAAQ;CACT,CAAC;AAHW,QAAA,yBAAyB,6BAGpC;AAEF,MAAsB,mBACpB,SAAQ,qBAAY;IADtB;;QAIU,aAAQ,GAAwC,IAAI,GAAG,EAAE,CAAC;QAC1D,qBAAgB,GAAsB,IAAI,GAAG,EAAE,CAAC;QAExD,aAAQ,GAAG,CAAC,KAA2C,EAAE,EAAE;YACzD,MAAM,GAAG,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,IAAI,qBAAa,CAAC,GAAG,CAC7D,KAAK,CAAC,KAAK,CACZ,EAAE,CAAC;YACJ,MAAM,SAAS,GAAG,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;YAEjD,IAAI,KAAK,CAAC,OAAO,IAAI,SAAS,EAAE;gBAC9B,OAAO,IAAI,CAAC,iBAAiB,CAAC,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC;aACnD;YACD,OAAO,IAAI,CAAC,gBAAgB,CAAC,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC;QACnD,CAAC,CAAC;IAoCJ,CAAC;IAlCC,MAAM;QACJ,IAAI,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,gBAAgB,EAAE;YACnD,KAAK,MAAM,KAAK,IAAI,qBAAa,CAAC,IAAI,EAAE,EAAE;gBACxC,MAAM,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;gBAEzC,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,IAAI,CACtD,CAAC,CAAC,EAAE,EAAE,CACJ,CAAC,CAAC,IAAI;oBACN,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,IAAI,qBAAa,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAC/D,CAAC;gBAEF,IAAI,IAAI,EAAE;oBACR,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;oBAC3C,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;iBACnD;gBAED,IAAI,IAAI,IAAI,OAAO,CAAC,OAAO,EAAE;oBAC3B,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;iBACxB;gBACD,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;aACrC;SACF;IACH,CAAC;IAED,SAAS;QACP,KAAK,MAAM,OAAO,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,EAAE;YAC5C,OAAO,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;SACtD;QACD,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,CAAC;QAC9B,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;IACxB,CAAC;CAIF;AArDD,kDAqDC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rhtml/custom-attributes",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.116",
|
|
4
4
|
"description": "Custom Attribute Registry",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"start": "npx parcel ./examples/index.html --out-dir build/examples",
|
|
@@ -16,16 +16,7 @@
|
|
|
16
16
|
"url": "git@github.com:rhtml/rhtml.git"
|
|
17
17
|
},
|
|
18
18
|
"dependencies": {},
|
|
19
|
-
"devDependencies": {
|
|
20
|
-
"eslint": "^6.7.2",
|
|
21
|
-
"eslint-config-prettier": "^6.7.0",
|
|
22
|
-
"eslint-plugin-prettier": "^3.1.1",
|
|
23
|
-
"eslint-plugin-simple-import-sort": "^5.0.0",
|
|
24
|
-
"@typescript-eslint/eslint-plugin": "^2.10.0",
|
|
25
|
-
"@typescript-eslint/parser": "^2.10.0",
|
|
26
|
-
"prettier": "^1.19.1",
|
|
27
|
-
"ts-jest": "25.2.1"
|
|
28
|
-
},
|
|
19
|
+
"devDependencies": {},
|
|
29
20
|
"author": "Kristiyan Tachev",
|
|
30
21
|
"license": "MIT",
|
|
31
22
|
"browserslist": [
|
package/src/attribute.ts
CHANGED
package/src/custom-registry.ts
CHANGED
|
@@ -30,7 +30,7 @@ export class CustomAttributeRegistry {
|
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
private observe() {
|
|
33
|
-
this.observer = new MutationObserver(mutations => {
|
|
33
|
+
this.observer = new MutationObserver((mutations) => {
|
|
34
34
|
for (const mutation of mutations) {
|
|
35
35
|
if (mutation.type === 'attributes') {
|
|
36
36
|
const attr = this.getConstructor(mutation.attributeName);
|
|
@@ -55,7 +55,7 @@ export class CustomAttributeRegistry {
|
|
|
55
55
|
childList: true,
|
|
56
56
|
subtree: true,
|
|
57
57
|
attributes: true,
|
|
58
|
-
attributeOldValue: true
|
|
58
|
+
attributeOldValue: true,
|
|
59
59
|
});
|
|
60
60
|
}
|
|
61
61
|
|
|
@@ -140,7 +140,7 @@ export class CustomAttributeRegistry {
|
|
|
140
140
|
modifier.OnInit();
|
|
141
141
|
}
|
|
142
142
|
if (Modifier.options.observe) {
|
|
143
|
-
modifier.observer = new MutationObserver(records =>
|
|
143
|
+
modifier.observer = new MutationObserver((records) =>
|
|
144
144
|
modifier.OnChange(records)
|
|
145
145
|
);
|
|
146
146
|
modifier.observer.observe(modifier.element, Modifier.options.observe);
|
package/src/decorators/index.ts
CHANGED
|
@@ -5,43 +5,41 @@ import { InputOptions, ModifierOptions } from '../types';
|
|
|
5
5
|
* Decorator @Input
|
|
6
6
|
* Used to get attribute from element
|
|
7
7
|
*/
|
|
8
|
-
export const Input =
|
|
9
|
-
target,
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
value() {
|
|
15
|
-
let originalValue = this[memberName];
|
|
8
|
+
export const Input =
|
|
9
|
+
(options?: InputOptions) => (target, memberName: string) => {
|
|
10
|
+
const OnInit = target.OnInit || noop;
|
|
11
|
+
Object.defineProperty(target, 'OnInit', {
|
|
12
|
+
value() {
|
|
13
|
+
let originalValue = this[memberName];
|
|
16
14
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
15
|
+
const element = this.element ?? this;
|
|
16
|
+
Object.defineProperty(this, memberName, {
|
|
17
|
+
get: function () {
|
|
18
|
+
originalValue = element.getAttribute(memberName.toLowerCase());
|
|
19
|
+
return originalValue;
|
|
20
|
+
},
|
|
21
|
+
set(value) {
|
|
22
|
+
element.setAttribute(memberName.toLowerCase(), value);
|
|
23
|
+
originalValue = value;
|
|
24
|
+
},
|
|
25
|
+
configurable: true,
|
|
26
|
+
});
|
|
27
|
+
return OnInit.call(this);
|
|
28
|
+
},
|
|
29
|
+
configurable: true,
|
|
30
|
+
});
|
|
33
31
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
};
|
|
32
|
+
if (options?.observe) {
|
|
33
|
+
observe(target, memberName);
|
|
34
|
+
}
|
|
35
|
+
};
|
|
38
36
|
|
|
39
37
|
/**
|
|
40
38
|
* Decorator @Modifier
|
|
41
39
|
* Accepts parameter options with selector and registry
|
|
42
40
|
*/
|
|
43
41
|
export const Modifier = (options: ModifierOptions) => {
|
|
44
|
-
return (target
|
|
42
|
+
return (target) => {
|
|
45
43
|
target['options'] = options;
|
|
46
44
|
};
|
|
47
45
|
};
|
package/src/helpers/index.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export const noop = function() {
|
|
1
|
+
export const noop = function () {
|
|
2
2
|
/* */
|
|
3
3
|
};
|
|
4
4
|
|
|
@@ -9,7 +9,7 @@ export const observe = (target: unknown, memberName: string) => {
|
|
|
9
9
|
const OnUpdateAttribute = prototype.OnUpdateAttribute || noop;
|
|
10
10
|
|
|
11
11
|
let observer: MutationObserver;
|
|
12
|
-
prototype.OnInit = function() {
|
|
12
|
+
prototype.OnInit = function () {
|
|
13
13
|
const element = this.element ?? this;
|
|
14
14
|
if (observer) {
|
|
15
15
|
observer.disconnect();
|
|
@@ -24,11 +24,11 @@ export const observe = (target: unknown, memberName: string) => {
|
|
|
24
24
|
});
|
|
25
25
|
observer.observe(element, {
|
|
26
26
|
attributeFilter: [memberName],
|
|
27
|
-
attributes: true
|
|
27
|
+
attributes: true,
|
|
28
28
|
});
|
|
29
29
|
return OnInit.call(this);
|
|
30
30
|
};
|
|
31
|
-
prototype.OnDestroy = function() {
|
|
31
|
+
prototype.OnDestroy = function () {
|
|
32
32
|
observer.disconnect();
|
|
33
33
|
return OnDestroy.call(this);
|
|
34
34
|
};
|
package/src/media-attribute.ts
CHANGED
|
@@ -16,29 +16,28 @@ export const MediaMatchers = new Map([
|
|
|
16
16
|
['screen and (min-width: 600px)', 'gt-xs'],
|
|
17
17
|
['screen and (min-width: 960px)', 'gt-sm'],
|
|
18
18
|
['screen and (min-width: 1280px)', 'gt-md'],
|
|
19
|
-
['screen and (min-width: 1920px)', 'gt-lg']
|
|
19
|
+
['screen and (min-width: 1920px)', 'gt-lg'],
|
|
20
20
|
]);
|
|
21
|
-
|
|
22
|
-
export type
|
|
23
|
-
export type
|
|
21
|
+
|
|
22
|
+
export type MediaEvent = MediaQueryList | MediaQueryListEvent;
|
|
23
|
+
export type MediaQueryEvent = [MediaEvent, Attr];
|
|
24
24
|
|
|
25
25
|
export interface OnUpdateMediaQuery {
|
|
26
|
-
OnEnterMediaQuery(tuple:
|
|
27
|
-
OnExitMediaQuery(tuple:
|
|
26
|
+
OnEnterMediaQuery(tuple: MediaQueryEvent): void;
|
|
27
|
+
OnExitMediaQuery(tuple: MediaQueryEvent): void;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
export const Breakpoints = [...MediaMatchers.values()];
|
|
31
31
|
|
|
32
32
|
export const createFiltersFromSelector = (selector: string) => [
|
|
33
|
-
...Breakpoints.map(breakpoint => `${selector}.${breakpoint}`),
|
|
34
|
-
selector
|
|
33
|
+
...Breakpoints.map((breakpoint) => `${selector}.${breakpoint}`),
|
|
34
|
+
selector,
|
|
35
35
|
];
|
|
36
36
|
|
|
37
|
-
export abstract class MediaQueryAttribute<T>
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
37
|
+
export abstract class MediaQueryAttribute<T>
|
|
38
|
+
extends Attribute<T>
|
|
39
|
+
implements OnUpdateMediaQuery
|
|
40
|
+
{
|
|
42
41
|
private matchers: Map<MediaQueryList, MediaQueryList> = new Map();
|
|
43
42
|
private cachedAttributes: Map<string, Attr> = new Map();
|
|
44
43
|
|
|
@@ -51,17 +50,16 @@ export abstract class MediaQueryAttribute<T> extends Attribute<T>
|
|
|
51
50
|
if (event.matches && attribute) {
|
|
52
51
|
return this.OnEnterMediaQuery([event, attribute]);
|
|
53
52
|
}
|
|
54
|
-
return this.OnExitMediaQuery([event,
|
|
53
|
+
return this.OnExitMediaQuery([event, attribute]);
|
|
55
54
|
};
|
|
56
55
|
|
|
57
56
|
OnInit() {
|
|
58
57
|
if (this.OnEnterMediaQuery || this.OnExitMediaQuery) {
|
|
59
|
-
this.originalValue = this.value;
|
|
60
58
|
for (const query of MediaMatchers.keys()) {
|
|
61
59
|
const matcher = window.matchMedia(query);
|
|
62
60
|
|
|
63
61
|
const attr = Object.values(this.element.attributes).find(
|
|
64
|
-
v =>
|
|
62
|
+
(v) =>
|
|
65
63
|
v.name ===
|
|
66
64
|
`${this.selector.toLowerCase()}.${MediaMatchers.get(query)}`
|
|
67
65
|
);
|
|
@@ -87,6 +85,6 @@ export abstract class MediaQueryAttribute<T> extends Attribute<T>
|
|
|
87
85
|
this.matchers.clear();
|
|
88
86
|
}
|
|
89
87
|
|
|
90
|
-
abstract OnEnterMediaQuery(tuple:
|
|
91
|
-
abstract OnExitMediaQuery(tuple:
|
|
88
|
+
abstract OnEnterMediaQuery(tuple: MediaQueryEvent): void;
|
|
89
|
+
abstract OnExitMediaQuery(tuple: MediaQueryEvent): void;
|
|
92
90
|
}
|
package/.eslintrc.js
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
module.exports = {
|
|
2
|
-
// Specifies the ESLint parser
|
|
3
|
-
parser: "@typescript-eslint/parser",
|
|
4
|
-
extends: [
|
|
5
|
-
// Uses the recommended rules from the @typescript-eslint/eslint-plugin
|
|
6
|
-
"plugin:@typescript-eslint/recommended",
|
|
7
|
-
// Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
|
|
8
|
-
"prettier/@typescript-eslint",
|
|
9
|
-
// Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
|
|
10
|
-
"plugin:prettier/recommended"
|
|
11
|
-
],
|
|
12
|
-
parserOptions: {
|
|
13
|
-
// Allows for the parsing of modern ECMAScript features
|
|
14
|
-
ecmaVersion: 2018,
|
|
15
|
-
// Allows for the use of imports
|
|
16
|
-
sourceType: "module"
|
|
17
|
-
},
|
|
18
|
-
rules: {
|
|
19
|
-
"@typescript-eslint/explicit-function-return-type": 0,
|
|
20
|
-
"simple-import-sort/sort": "error",
|
|
21
|
-
"sort-imports": "off",
|
|
22
|
-
"import/order": "off",
|
|
23
|
-
"@typescript-eslint/camelcase": 0
|
|
24
|
-
},
|
|
25
|
-
plugins: ["simple-import-sort"]
|
|
26
|
-
};
|
package/.prettierrc
DELETED
package/jest.config.js
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
module.exports = {
|
|
2
|
-
testEnvironment: 'node',
|
|
3
|
-
testPathIgnorePatterns: ['/node_modules/'],
|
|
4
|
-
coverageReporters: ['lcov', 'html'],
|
|
5
|
-
rootDir: './',
|
|
6
|
-
moduleFileExtensions: ['ts', 'tsx', 'js', 'json', 'node'],
|
|
7
|
-
globals: {
|
|
8
|
-
__DEV__: true
|
|
9
|
-
},
|
|
10
|
-
transform: {
|
|
11
|
-
'\\.(ts|tsx)$': 'ts-jest'
|
|
12
|
-
},
|
|
13
|
-
testRegex: '/src/.*\\.spec.(ts|tsx|js)$',
|
|
14
|
-
verbose: true,
|
|
15
|
-
collectCoverage: true
|
|
16
|
-
};
|