ember-container-query 3.2.0 → 4.0.0-alpha.2
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 +1 -1
- package/addon-main.cjs +5 -0
- package/dist/_app_/components/container-query.js +1 -0
- package/dist/_app_/helpers/aspect-ratio.js +1 -0
- package/dist/_app_/helpers/height.js +1 -0
- package/dist/_app_/helpers/width.js +1 -0
- package/dist/_app_/modifiers/container-query.js +1 -0
- package/dist/applyDecoratedDescriptor-fa858ac4.js +77 -0
- package/dist/applyDecoratedDescriptor-fa858ac4.js.map +1 -0
- package/{addon/styles → dist/components}/container-query.css +0 -0
- package/{components → dist/components}/container-query.d.ts +4 -4
- package/dist/components/container-query.d.ts.map +1 -0
- package/dist/components/container-query.js +40 -0
- package/dist/components/container-query.js.map +1 -0
- package/{helpers → dist/helpers}/aspect-ratio.d.ts +3 -3
- package/dist/helpers/aspect-ratio.js +15 -0
- package/dist/helpers/aspect-ratio.js.map +1 -0
- package/{helpers → dist/helpers}/height.d.ts +3 -3
- package/dist/helpers/height.js +15 -0
- package/dist/helpers/height.js.map +1 -0
- package/{helpers → dist/helpers}/width.d.ts +3 -3
- package/dist/helpers/width.js +15 -0
- package/dist/helpers/width.js.map +1 -0
- package/dist/index.d.ts +5 -0
- package/dist/index.js +6 -0
- package/dist/index.js.map +1 -0
- package/{modifiers → dist/modifiers}/container-query.d.ts +5 -5
- package/dist/modifiers/container-query.js +106 -0
- package/dist/modifiers/container-query.js.map +1 -0
- package/dist/template-registry.d.ts +13 -0
- package/dist/template-registry.js +2 -0
- package/dist/template-registry.js.map +1 -0
- package/package.json +54 -104
- package/.netlifyredirects +0 -1
- package/.stylelintcache +0 -1
- package/.stylelintrc.js +0 -64
- package/CHANGELOG.md +0 -425
- package/addon/components/container-query.hbs +0 -21
- package/addon/components/container-query.ts +0 -49
- package/addon/helpers/aspect-ratio.ts +0 -26
- package/addon/helpers/height.ts +0 -24
- package/addon/helpers/width.ts +0 -24
- package/addon/index.ts +0 -5
- package/addon/modifiers/container-query.ts +0 -179
- package/addon/template-registry.ts +0 -16
- package/app/components/container-query.js +0 -1
- package/app/helpers/aspect-ratio.js +0 -1
- package/app/helpers/cq-aspect-ratio.js +0 -18
- package/app/helpers/cq-height.js +0 -18
- package/app/helpers/cq-width.js +0 -18
- package/app/helpers/height.js +0 -1
- package/app/helpers/width.js +0 -1
- package/app/modifiers/container-query.js +0 -1
- package/index.d.ts +0 -6
- package/index.js +0 -5
- package/template-registry.d.ts +0 -16
- package/tsconfig.json +0 -47
- package/types/dummy/index.d.ts +0 -33
- package/types/global.d.ts +0 -6
package/README.md
CHANGED
|
@@ -330,7 +330,7 @@ Let's look at the code that created the video demo above.
|
|
|
330
330
|
|
|
331
331
|
You can see that the album page uses 2 `<ContainerQuery>` components. Rest assured, they act independently of each other. When you pair `<ContainerQuery>` with some CSS, you can create layouts beyond the dreams of others! 🙌
|
|
332
332
|
|
|
333
|
-
For more examples, I encourage you to check out the code for my demo app. It is located under [`
|
|
333
|
+
For more examples, I encourage you to check out the code for my demo app. It is located under [`test-app/app`](https://github.com/ijlee2/ember-container-query/tree/main/test-app/app) folder and is structured like a typical Ember app.
|
|
334
334
|
|
|
335
335
|
|
|
336
336
|
Compatibility
|
package/addon-main.cjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "ember-container-query/components/container-query";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "ember-container-query/helpers/aspect-ratio";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "ember-container-query/helpers/height";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "ember-container-query/helpers/width";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "ember-container-query/modifiers/container-query";
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
function _initializerDefineProperty(target, property, descriptor, context) {
|
|
2
|
+
if (!descriptor) return;
|
|
3
|
+
Object.defineProperty(target, property, {
|
|
4
|
+
enumerable: descriptor.enumerable,
|
|
5
|
+
configurable: descriptor.configurable,
|
|
6
|
+
writable: descriptor.writable,
|
|
7
|
+
value: descriptor.initializer ? descriptor.initializer.call(context) : void 0
|
|
8
|
+
});
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
function _typeof(obj) {
|
|
12
|
+
"@babel/helpers - typeof";
|
|
13
|
+
|
|
14
|
+
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
|
|
15
|
+
return typeof obj;
|
|
16
|
+
} : function (obj) {
|
|
17
|
+
return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
|
|
18
|
+
}, _typeof(obj);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
function _toPrimitive(input, hint) {
|
|
22
|
+
if (_typeof(input) !== "object" || input === null) return input;
|
|
23
|
+
var prim = input[Symbol.toPrimitive];
|
|
24
|
+
if (prim !== undefined) {
|
|
25
|
+
var res = prim.call(input, hint || "default");
|
|
26
|
+
if (_typeof(res) !== "object") return res;
|
|
27
|
+
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
28
|
+
}
|
|
29
|
+
return (hint === "string" ? String : Number)(input);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
function _toPropertyKey(arg) {
|
|
33
|
+
var key = _toPrimitive(arg, "string");
|
|
34
|
+
return _typeof(key) === "symbol" ? key : String(key);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
function _defineProperty(obj, key, value) {
|
|
38
|
+
key = _toPropertyKey(key);
|
|
39
|
+
if (key in obj) {
|
|
40
|
+
Object.defineProperty(obj, key, {
|
|
41
|
+
value: value,
|
|
42
|
+
enumerable: true,
|
|
43
|
+
configurable: true,
|
|
44
|
+
writable: true
|
|
45
|
+
});
|
|
46
|
+
} else {
|
|
47
|
+
obj[key] = value;
|
|
48
|
+
}
|
|
49
|
+
return obj;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) {
|
|
53
|
+
var desc = {};
|
|
54
|
+
Object.keys(descriptor).forEach(function (key) {
|
|
55
|
+
desc[key] = descriptor[key];
|
|
56
|
+
});
|
|
57
|
+
desc.enumerable = !!desc.enumerable;
|
|
58
|
+
desc.configurable = !!desc.configurable;
|
|
59
|
+
if ('value' in desc || desc.initializer) {
|
|
60
|
+
desc.writable = true;
|
|
61
|
+
}
|
|
62
|
+
desc = decorators.slice().reverse().reduce(function (desc, decorator) {
|
|
63
|
+
return decorator(target, property, desc) || desc;
|
|
64
|
+
}, desc);
|
|
65
|
+
if (context && desc.initializer !== void 0) {
|
|
66
|
+
desc.value = desc.initializer ? desc.initializer.call(context) : void 0;
|
|
67
|
+
desc.initializer = undefined;
|
|
68
|
+
}
|
|
69
|
+
if (desc.initializer === void 0) {
|
|
70
|
+
Object.defineProperty(target, property, desc);
|
|
71
|
+
desc = null;
|
|
72
|
+
}
|
|
73
|
+
return desc;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
export { _applyDecoratedDescriptor as _, _initializerDefineProperty as a, _defineProperty as b };
|
|
77
|
+
//# sourceMappingURL=applyDecoratedDescriptor-fa858ac4.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"applyDecoratedDescriptor-fa858ac4.js","sources":["../../node_modules/@babel/runtime/helpers/esm/initializerDefineProperty.js","../../node_modules/@babel/runtime/helpers/esm/typeof.js","../../node_modules/@babel/runtime/helpers/esm/toPrimitive.js","../../node_modules/@babel/runtime/helpers/esm/toPropertyKey.js","../../node_modules/@babel/runtime/helpers/esm/defineProperty.js","../../node_modules/@babel/runtime/helpers/esm/applyDecoratedDescriptor.js"],"sourcesContent":["export default function _initializerDefineProperty(target, property, descriptor, context) {\n if (!descriptor) return;\n Object.defineProperty(target, property, {\n enumerable: descriptor.enumerable,\n configurable: descriptor.configurable,\n writable: descriptor.writable,\n value: descriptor.initializer ? descriptor.initializer.call(context) : void 0\n });\n}","export default function _typeof(obj) {\n \"@babel/helpers - typeof\";\n\n return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) {\n return typeof obj;\n } : function (obj) {\n return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj;\n }, _typeof(obj);\n}","import _typeof from \"./typeof.js\";\nexport default function _toPrimitive(input, hint) {\n if (_typeof(input) !== \"object\" || input === null) return input;\n var prim = input[Symbol.toPrimitive];\n if (prim !== undefined) {\n var res = prim.call(input, hint || \"default\");\n if (_typeof(res) !== \"object\") return res;\n throw new TypeError(\"@@toPrimitive must return a primitive value.\");\n }\n return (hint === \"string\" ? String : Number)(input);\n}","import _typeof from \"./typeof.js\";\nimport toPrimitive from \"./toPrimitive.js\";\nexport default function _toPropertyKey(arg) {\n var key = toPrimitive(arg, \"string\");\n return _typeof(key) === \"symbol\" ? key : String(key);\n}","import toPropertyKey from \"./toPropertyKey.js\";\nexport default function _defineProperty(obj, key, value) {\n key = toPropertyKey(key);\n if (key in obj) {\n Object.defineProperty(obj, key, {\n value: value,\n enumerable: true,\n configurable: true,\n writable: true\n });\n } else {\n obj[key] = value;\n }\n return obj;\n}","export default function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) {\n var desc = {};\n Object.keys(descriptor).forEach(function (key) {\n desc[key] = descriptor[key];\n });\n desc.enumerable = !!desc.enumerable;\n desc.configurable = !!desc.configurable;\n if ('value' in desc || desc.initializer) {\n desc.writable = true;\n }\n desc = decorators.slice().reverse().reduce(function (desc, decorator) {\n return decorator(target, property, desc) || desc;\n }, desc);\n if (context && desc.initializer !== void 0) {\n desc.value = desc.initializer ? desc.initializer.call(context) : void 0;\n desc.initializer = undefined;\n }\n if (desc.initializer === void 0) {\n Object.defineProperty(target, property, desc);\n desc = null;\n }\n return desc;\n}"],"names":["_initializerDefineProperty","target","property","descriptor","context","Object","defineProperty","enumerable","configurable","writable","value","initializer","call","_typeof","obj","Symbol","iterator","constructor","prototype","_toPrimitive","input","hint","prim","toPrimitive","undefined","res","TypeError","String","Number","_toPropertyKey","arg","key","_defineProperty","toPropertyKey","_applyDecoratedDescriptor","decorators","desc","keys","forEach","slice","reverse","reduce","decorator"],"mappings":"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"}
|
|
File without changes
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import Component from '@glimmer/component';
|
|
2
|
-
import
|
|
2
|
+
import { Dimensions, Features, IndexSignatureParameter, QueryResults } from "../modifiers/container-query";
|
|
3
3
|
interface ContainerQueryComponentSignature<T extends IndexSignatureParameter> {
|
|
4
4
|
Args: {
|
|
5
5
|
dataAttributePrefix?: string;
|
|
@@ -17,7 +17,7 @@ interface ContainerQueryComponentSignature<T extends IndexSignatureParameter> {
|
|
|
17
17
|
};
|
|
18
18
|
Element: HTMLElement;
|
|
19
19
|
}
|
|
20
|
-
|
|
20
|
+
declare class ContainerQueryComponent<T extends IndexSignatureParameter> extends Component<ContainerQueryComponentSignature<T>> {
|
|
21
21
|
dimensions?: Dimensions;
|
|
22
22
|
queryResults?: QueryResults<T>;
|
|
23
23
|
tagName: string;
|
|
@@ -26,5 +26,5 @@ export default class ContainerQueryComponent<T extends IndexSignatureParameter>
|
|
|
26
26
|
queryResults: QueryResults<T>;
|
|
27
27
|
}): void;
|
|
28
28
|
}
|
|
29
|
-
export {};
|
|
30
|
-
//# sourceMappingURL=container-query.d.ts.map
|
|
29
|
+
export { ContainerQueryComponent as default };
|
|
30
|
+
//# sourceMappingURL=components/container-query.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"components/container-query.d.ts","sourceRoot":"","sources":["../src/components/container-query.ts"],"names":[],"mappings":"AAGA,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAG3C,OAAO,+DAKN,qCAAqC;AAEtC,UAAU,gCAAgC,CAAC,CAAC,SAAS,uBAAuB;IAC1E,IAAI,EAAE;QACJ,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;QACvB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,MAAM,EAAE;QACN,OAAO,EAAE;YACP;gBACE,UAAU,CAAC,EAAE,UAAU,CAAC;gBACxB,QAAQ,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;aAC5B;SACF,CAAC;KACH,CAAC;IACF,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,cAAqB,uBAAuB,CAC1C,CAAC,SAAS,uBAAuB,CACjC,SAAQ,SAAS,CAAC,gCAAgC,CAAC,CAAC,CAAC,CAAC;IAC7C,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAGxC,OAAO,SAA8B;IAE7B,WAAW,CAAC,EAClB,UAAU,EACV,YAAY,GACb,EAAE;QACD,UAAU,EAAE,UAAU,CAAC;QACvB,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;KAC/B,GAAG,IAAI;CAIT"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { _ as _applyDecoratedDescriptor, a as _initializerDefineProperty, b as _defineProperty } from '../applyDecoratedDescriptor-fa858ac4.js';
|
|
2
|
+
import { setComponentTemplate } from '@ember/component';
|
|
3
|
+
import { precompileTemplate } from '@ember/template-compilation';
|
|
4
|
+
import './container-query.css';
|
|
5
|
+
import { action } from '@ember/object';
|
|
6
|
+
import Component from '@glimmer/component';
|
|
7
|
+
import { tracked } from '@glimmer/tracking';
|
|
8
|
+
|
|
9
|
+
var TEMPLATE = precompileTemplate("{{! @glint-ignore: ember-element-helper needs to provide Glint signature }}\n{{#let (element this.tagName) as |Tag|}}\n <Tag\n class=\"container-query\"\n data-test-container-query\n {{container-query\n dataAttributePrefix=@dataAttributePrefix\n debounce=@debounce\n features=@features\n onQuery=this.updateState\n }}\n ...attributes\n >\n {{yield\n (hash\n dimensions=this.dimensions\n features=this.queryResults\n )\n }}\n </Tag>\n{{/let}}");
|
|
10
|
+
|
|
11
|
+
var _class, _descriptor, _descriptor2;
|
|
12
|
+
let ContainerQueryComponent = (_class = class ContainerQueryComponent extends Component {
|
|
13
|
+
constructor(...args) {
|
|
14
|
+
super(...args);
|
|
15
|
+
_initializerDefineProperty(this, "dimensions", _descriptor, this);
|
|
16
|
+
_initializerDefineProperty(this, "queryResults", _descriptor2, this);
|
|
17
|
+
_defineProperty(this, "tagName", this.args.tagName ?? 'div');
|
|
18
|
+
}
|
|
19
|
+
updateState({
|
|
20
|
+
dimensions,
|
|
21
|
+
queryResults
|
|
22
|
+
}) {
|
|
23
|
+
this.dimensions = dimensions;
|
|
24
|
+
this.queryResults = queryResults;
|
|
25
|
+
}
|
|
26
|
+
}, (_descriptor = _applyDecoratedDescriptor(_class.prototype, "dimensions", [tracked], {
|
|
27
|
+
configurable: true,
|
|
28
|
+
enumerable: true,
|
|
29
|
+
writable: true,
|
|
30
|
+
initializer: null
|
|
31
|
+
}), _descriptor2 = _applyDecoratedDescriptor(_class.prototype, "queryResults", [tracked], {
|
|
32
|
+
configurable: true,
|
|
33
|
+
enumerable: true,
|
|
34
|
+
writable: true,
|
|
35
|
+
initializer: null
|
|
36
|
+
}), _applyDecoratedDescriptor(_class.prototype, "updateState", [action], Object.getOwnPropertyDescriptor(_class.prototype, "updateState"), _class.prototype)), _class);
|
|
37
|
+
setComponentTemplate(TEMPLATE, ContainerQueryComponent);
|
|
38
|
+
|
|
39
|
+
export { ContainerQueryComponent as default };
|
|
40
|
+
//# sourceMappingURL=container-query.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"container-query.js","sources":["../../src/components/container-query.hbs.js","../../src/components/container-query.ts"],"sourcesContent":["import { precompileTemplate } from \"@ember/template-compilation\";\nexport default precompileTemplate(\"{{! @glint-ignore: ember-element-helper needs to provide Glint signature }}\\n{{#let (element this.tagName) as |Tag|}}\\n <Tag\\n class=\\\"container-query\\\"\\n data-test-container-query\\n {{container-query\\n dataAttributePrefix=@dataAttributePrefix\\n debounce=@debounce\\n features=@features\\n onQuery=this.updateState\\n }}\\n ...attributes\\n >\\n {{yield\\n (hash\\n dimensions=this.dimensions\\n features=this.queryResults\\n )\\n }}\\n </Tag>\\n{{/let}}\")","import './container-query.css';\n\nimport { action } from '@ember/object';\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\n\nimport type {\n Dimensions,\n Features,\n IndexSignatureParameter,\n QueryResults,\n} from '../modifiers/container-query';\n\ninterface ContainerQueryComponentSignature<T extends IndexSignatureParameter> {\n Args: {\n dataAttributePrefix?: string;\n debounce?: number;\n features?: Features<T>;\n tagName?: string;\n };\n Blocks: {\n default: [\n {\n dimensions?: Dimensions;\n features?: QueryResults<T>;\n }\n ];\n };\n Element: HTMLElement;\n}\n\nexport default class ContainerQueryComponent<\n T extends IndexSignatureParameter\n> extends Component<ContainerQueryComponentSignature<T>> {\n @tracked dimensions?: Dimensions;\n @tracked queryResults?: QueryResults<T>;\n\n // The dynamic tag is restricted to be immutable\n tagName = this.args.tagName ?? 'div';\n\n @action updateState({\n dimensions,\n queryResults,\n }: {\n dimensions: Dimensions;\n queryResults: QueryResults<T>;\n }): void {\n this.dimensions = dimensions;\n this.queryResults = queryResults;\n }\n}\n"],"names":["precompileTemplate","ContainerQueryComponent","Component","args","tagName","updateState","dimensions","queryResults","tracked","action"],"mappings":";;;;;;;;AACA,eAAeA,kBAAkB,CAAC,+fAA+f,CAAC;;;ACGtf,IA2BvBC,uBAAuB,IAA7B,MAAA,GAAA,MAAMA,uBAAuB,SAElCC,SAAS,CAAsC;AAAA,EAAA,WAAA,CAAA,GAAA,IAAA,EAAA;AAAA,IAAA,KAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,IAAA,0BAAA,CAAA,IAAA,EAAA,YAAA,EAAA,WAAA,EAAA,IAAA,CAAA,CAAA;AAAA,IAAA,0BAAA,CAAA,IAAA,EAAA,cAAA,EAAA,YAAA,EAAA,IAAA,CAAA,CAAA;AAAA,IAAA,eAAA,CAAA,IAAA,EAAA,SAAA,EAK7C,IAAI,CAACC,IAAI,CAACC,OAAO,IAAI,KAAK,CAAA,CAAA;AAAA,GAAA;AAE5BC,EAAAA,WAAW,CAAC;IAClBC,UAAU;AACVC,IAAAA,YAAAA;AAIF,GAAC,EAAQ;IACP,IAAI,CAACD,UAAU,GAAGA,UAAU,CAAA;IAC5B,IAAI,CAACC,YAAY,GAAGA,YAAY,CAAA;AAClC,GAAA;AACF,CAAC,4EAhBEC,OAAO,CAAA,EAAA;AAAA,EAAA,YAAA,EAAA,IAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,QAAA,EAAA,IAAA;AAAA,EAAA,WAAA,EAAA,IAAA;AAAA,CAAA,CAAA,EAAA,YAAA,GAAA,yBAAA,CAAA,MAAA,CAAA,SAAA,EAAA,cAAA,EAAA,CACPA,OAAO,CAAA,EAAA;AAAA,EAAA,YAAA,EAAA,IAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,QAAA,EAAA,IAAA;AAAA,EAAA,WAAA,EAAA,IAAA;AAAA,CAAA,CAAA,EAAA,yBAAA,CAAA,MAAA,CAAA,SAAA,EAAA,aAAA,EAAA,CAKPC,MAAM,CAAA,EAAA,MAAA,CAAA,wBAAA,CAAA,MAAA,CAAA,SAAA,EAAA,aAAA,CAAA,EAAA,MAAA,CAAA,SAAA,CAAA,GAAA,MAAA,EAAA;AATmC,oBAAA,CAAA,QAAA,EAAA,uBAAA,CAAA;;;;"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="ember__component" />
|
|
2
|
+
import { Metadata } from "../modifiers/container-query";
|
|
2
3
|
declare const AspectRatioHelper: import("@ember/component/helper").FunctionBasedHelper<{
|
|
3
4
|
Args: {
|
|
4
5
|
Positional: [];
|
|
@@ -9,5 +10,4 @@ declare const AspectRatioHelper: import("@ember/component/helper").FunctionBased
|
|
|
9
10
|
};
|
|
10
11
|
Return: Metadata;
|
|
11
12
|
}>;
|
|
12
|
-
export default
|
|
13
|
-
//# sourceMappingURL=aspect-ratio.d.ts.map
|
|
13
|
+
export { AspectRatioHelper as default };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { helper } from '@ember/component/helper';
|
|
2
|
+
|
|
3
|
+
const AspectRatioHelper = helper((_positional, named) => {
|
|
4
|
+
const dimension = 'aspectRatio';
|
|
5
|
+
const max = named.max ?? Infinity;
|
|
6
|
+
const min = named.min ?? 0;
|
|
7
|
+
return {
|
|
8
|
+
dimension,
|
|
9
|
+
max,
|
|
10
|
+
min
|
|
11
|
+
};
|
|
12
|
+
});
|
|
13
|
+
|
|
14
|
+
export { AspectRatioHelper as default };
|
|
15
|
+
//# sourceMappingURL=aspect-ratio.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"aspect-ratio.js","sources":["../../src/helpers/aspect-ratio.ts"],"sourcesContent":["import { helper } from '@ember/component/helper';\n\nimport type { Metadata } from '../modifiers/container-query';\n\ninterface AspectRatioHelperSignature {\n Args: {\n Named: {\n max?: number;\n min?: number;\n };\n Positional: [];\n };\n Return: Metadata;\n}\n\nconst AspectRatioHelper = helper<AspectRatioHelperSignature>(\n (_positional, named) => {\n const dimension = 'aspectRatio';\n const max = named.max ?? Infinity;\n const min = named.min ?? 0;\n\n return { dimension, max, min };\n }\n);\n\nexport default AspectRatioHelper;\n"],"names":["AspectRatioHelper","helper","_positional","named","dimension","max","Infinity","min"],"mappings":";;AAeMA,MAAAA,iBAAiB,GAAGC,MAAM,CAC9B,CAACC,WAAW,EAAEC,KAAK,KAAK;EACtB,MAAMC,SAAS,GAAG,aAAa,CAAA;AAC/B,EAAA,MAAMC,GAAG,GAAGF,KAAK,CAACE,GAAG,IAAIC,QAAQ,CAAA;AACjC,EAAA,MAAMC,GAAG,GAAGJ,KAAK,CAACI,GAAG,IAAI,CAAC,CAAA;EAE1B,OAAO;IAAEH,SAAS;IAAEC,GAAG;AAAEE,IAAAA,GAAAA;GAAK,CAAA;AAChC,CAAC;;;;"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="ember__component" />
|
|
2
|
+
import { Metadata } from "../modifiers/container-query";
|
|
2
3
|
declare const HeightHelper: import("@ember/component/helper").FunctionBasedHelper<{
|
|
3
4
|
Args: {
|
|
4
5
|
Positional: [];
|
|
@@ -9,5 +10,4 @@ declare const HeightHelper: import("@ember/component/helper").FunctionBasedHelpe
|
|
|
9
10
|
};
|
|
10
11
|
Return: Metadata;
|
|
11
12
|
}>;
|
|
12
|
-
export default
|
|
13
|
-
//# sourceMappingURL=height.d.ts.map
|
|
13
|
+
export { HeightHelper as default };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { helper } from '@ember/component/helper';
|
|
2
|
+
|
|
3
|
+
const HeightHelper = helper((_positional, named) => {
|
|
4
|
+
const dimension = 'height';
|
|
5
|
+
const max = named.max ?? Infinity;
|
|
6
|
+
const min = named.min ?? 0;
|
|
7
|
+
return {
|
|
8
|
+
dimension,
|
|
9
|
+
max,
|
|
10
|
+
min
|
|
11
|
+
};
|
|
12
|
+
});
|
|
13
|
+
|
|
14
|
+
export { HeightHelper as default };
|
|
15
|
+
//# sourceMappingURL=height.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"height.js","sources":["../../src/helpers/height.ts"],"sourcesContent":["import { helper } from '@ember/component/helper';\n\nimport type { Metadata } from '../modifiers/container-query';\n\ninterface HeightHelperSignature {\n Args: {\n Named: {\n max?: number;\n min?: number;\n };\n Positional: [];\n };\n Return: Metadata;\n}\n\nconst HeightHelper = helper<HeightHelperSignature>((_positional, named) => {\n const dimension = 'height';\n const max = named.max ?? Infinity;\n const min = named.min ?? 0;\n\n return { dimension, max, min };\n});\n\nexport default HeightHelper;\n"],"names":["HeightHelper","helper","_positional","named","dimension","max","Infinity","min"],"mappings":";;AAeMA,MAAAA,YAAY,GAAGC,MAAM,CAAwB,CAACC,WAAW,EAAEC,KAAK,KAAK;EACzE,MAAMC,SAAS,GAAG,QAAQ,CAAA;AAC1B,EAAA,MAAMC,GAAG,GAAGF,KAAK,CAACE,GAAG,IAAIC,QAAQ,CAAA;AACjC,EAAA,MAAMC,GAAG,GAAGJ,KAAK,CAACI,GAAG,IAAI,CAAC,CAAA;EAE1B,OAAO;IAAEH,SAAS;IAAEC,GAAG;AAAEE,IAAAA,GAAAA;GAAK,CAAA;AAChC,CAAC;;;;"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="ember__component" />
|
|
2
|
+
import { Metadata } from "../modifiers/container-query";
|
|
2
3
|
declare const WidthHelper: import("@ember/component/helper").FunctionBasedHelper<{
|
|
3
4
|
Args: {
|
|
4
5
|
Positional: [];
|
|
@@ -9,5 +10,4 @@ declare const WidthHelper: import("@ember/component/helper").FunctionBasedHelper
|
|
|
9
10
|
};
|
|
10
11
|
Return: Metadata;
|
|
11
12
|
}>;
|
|
12
|
-
export default
|
|
13
|
-
//# sourceMappingURL=width.d.ts.map
|
|
13
|
+
export { WidthHelper as default };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { helper } from '@ember/component/helper';
|
|
2
|
+
|
|
3
|
+
const WidthHelper = helper((_positional, named) => {
|
|
4
|
+
const dimension = 'width';
|
|
5
|
+
const max = named.max ?? Infinity;
|
|
6
|
+
const min = named.min ?? 0;
|
|
7
|
+
return {
|
|
8
|
+
dimension,
|
|
9
|
+
max,
|
|
10
|
+
min
|
|
11
|
+
};
|
|
12
|
+
});
|
|
13
|
+
|
|
14
|
+
export { WidthHelper as default };
|
|
15
|
+
//# sourceMappingURL=width.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"width.js","sources":["../../src/helpers/width.ts"],"sourcesContent":["import { helper } from '@ember/component/helper';\n\nimport type { Metadata } from '../modifiers/container-query';\n\ninterface WidthHelperSignature {\n Args: {\n Named: {\n max?: number;\n min?: number;\n };\n Positional: [];\n };\n Return: Metadata;\n}\n\nconst WidthHelper = helper<WidthHelperSignature>((_positional, named) => {\n const dimension = 'width';\n const max = named.max ?? Infinity;\n const min = named.min ?? 0;\n\n return { dimension, max, min };\n});\n\nexport default WidthHelper;\n"],"names":["WidthHelper","helper","_positional","named","dimension","max","Infinity","min"],"mappings":";;AAeMA,MAAAA,WAAW,GAAGC,MAAM,CAAuB,CAACC,WAAW,EAAEC,KAAK,KAAK;EACvE,MAAMC,SAAS,GAAG,OAAO,CAAA;AACzB,EAAA,MAAMC,GAAG,GAAGF,KAAK,CAACE,GAAG,IAAIC,QAAQ,CAAA;AACjC,EAAA,MAAMC,GAAG,GAAGJ,KAAK,CAACI,GAAG,IAAI,CAAC,CAAA;EAE1B,OAAO;IAAEH,SAAS;IAAEC,GAAG;AAAEE,IAAAA,GAAAA;GAAK,CAAA;AAChC,CAAC;;;;"}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export { default as ContainerQuery } from "./components/container-query";
|
|
2
|
+
export { default as aspectRatio } from "./helpers/aspect-ratio";
|
|
3
|
+
export { default as height } from "./helpers/height";
|
|
4
|
+
export { default as width } from "./helpers/width";
|
|
5
|
+
export { default as containerQuery } from "./modifiers/container-query";
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export { default as ContainerQuery } from './components/container-query.js';
|
|
2
|
+
export { default as aspectRatio } from './helpers/aspect-ratio.js';
|
|
3
|
+
export { default as height } from './helpers/height.js';
|
|
4
|
+
export { default as width } from './helpers/width.js';
|
|
5
|
+
export { default as containerQuery } from './modifiers/container-query.js';
|
|
6
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import Modifier
|
|
1
|
+
import Modifier from 'ember-modifier';
|
|
2
|
+
import { ArgsFor, NamedArgs, PositionalArgs } from "ember-modifier";
|
|
2
3
|
type IndexSignatureParameter = string | number | symbol;
|
|
3
4
|
type Dimensions = {
|
|
4
5
|
aspectRatio: number;
|
|
@@ -6,7 +7,7 @@ type Dimensions = {
|
|
|
6
7
|
width: number;
|
|
7
8
|
};
|
|
8
9
|
type Metadata = {
|
|
9
|
-
dimension:
|
|
10
|
+
dimension: keyof Dimensions;
|
|
10
11
|
max: number;
|
|
11
12
|
min: number;
|
|
12
13
|
};
|
|
@@ -27,7 +28,7 @@ interface ContainerQueryModifierSignature<T extends IndexSignatureParameter> {
|
|
|
27
28
|
};
|
|
28
29
|
Element: Element;
|
|
29
30
|
}
|
|
30
|
-
|
|
31
|
+
declare class ContainerQueryModifier<T extends IndexSignatureParameter> extends Modifier<ContainerQueryModifierSignature<T>> {
|
|
31
32
|
private readonly resizeObserver;
|
|
32
33
|
dimensions: Dimensions;
|
|
33
34
|
queryResults: QueryResults<T>;
|
|
@@ -47,5 +48,4 @@ export default class ContainerQueryModifier<T extends IndexSignatureParameter> e
|
|
|
47
48
|
private resetDataAttributes;
|
|
48
49
|
private setDataAttributes;
|
|
49
50
|
}
|
|
50
|
-
export { Dimensions, Features, IndexSignatureParameter, Metadata, QueryResults
|
|
51
|
-
//# sourceMappingURL=container-query.d.ts.map
|
|
51
|
+
export { ContainerQueryModifier as default, Dimensions, Features, IndexSignatureParameter, Metadata, QueryResults };
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
import { _ as _applyDecoratedDescriptor, a as _initializerDefineProperty, b as _defineProperty } from '../applyDecoratedDescriptor-fa858ac4.js';
|
|
2
|
+
import { registerDestructor } from '@ember/destroyable';
|
|
3
|
+
import { action } from '@ember/object';
|
|
4
|
+
import { debounce } from '@ember/runloop';
|
|
5
|
+
import { inject } from '@ember/service';
|
|
6
|
+
import Modifier from 'ember-modifier';
|
|
7
|
+
|
|
8
|
+
var _class, _descriptor;
|
|
9
|
+
let ContainerQueryModifier = (_class = class ContainerQueryModifier extends Modifier {
|
|
10
|
+
get dataAttributePrefix() {
|
|
11
|
+
return this._named.dataAttributePrefix ?? 'container-query';
|
|
12
|
+
}
|
|
13
|
+
get debounce() {
|
|
14
|
+
return this._named.debounce ?? 0;
|
|
15
|
+
}
|
|
16
|
+
get features() {
|
|
17
|
+
return this._named.features ?? {};
|
|
18
|
+
}
|
|
19
|
+
constructor(owner, args) {
|
|
20
|
+
super(owner, args);
|
|
21
|
+
_initializerDefineProperty(this, "resizeObserver", _descriptor, this);
|
|
22
|
+
_defineProperty(this, "dimensions", void 0);
|
|
23
|
+
_defineProperty(this, "queryResults", void 0);
|
|
24
|
+
_defineProperty(this, "_dataAttributes", []);
|
|
25
|
+
_defineProperty(this, "_element", void 0);
|
|
26
|
+
_defineProperty(this, "_named", void 0);
|
|
27
|
+
registerDestructor(this, () => {
|
|
28
|
+
this.resizeObserver.unobserve(this._element, this.onResize);
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
modify(element, _positional, named) {
|
|
32
|
+
this._named = named;
|
|
33
|
+
this.registerResizeObserver(element);
|
|
34
|
+
this.queryContainer(element);
|
|
35
|
+
}
|
|
36
|
+
onResize(resizeObserverEntry) {
|
|
37
|
+
const element = resizeObserverEntry.target;
|
|
38
|
+
if (this.debounce > 0) {
|
|
39
|
+
debounce(this, this.queryContainer, element, this.debounce);
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
42
|
+
this.queryContainer(element);
|
|
43
|
+
}
|
|
44
|
+
registerResizeObserver(element) {
|
|
45
|
+
this.resizeObserver.unobserve(this._element, this.onResize);
|
|
46
|
+
this._element = element;
|
|
47
|
+
this.resizeObserver.observe(this._element, this.onResize);
|
|
48
|
+
}
|
|
49
|
+
queryContainer(element) {
|
|
50
|
+
this.measureDimensions(element);
|
|
51
|
+
this.evaluateQueries();
|
|
52
|
+
this.resetDataAttributes(element);
|
|
53
|
+
this.setDataAttributes(element);
|
|
54
|
+
this._named.onQuery?.({
|
|
55
|
+
dimensions: this.dimensions,
|
|
56
|
+
queryResults: this.queryResults
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
measureDimensions(element) {
|
|
60
|
+
const height = element.clientHeight;
|
|
61
|
+
const width = element.clientWidth;
|
|
62
|
+
this.dimensions = {
|
|
63
|
+
aspectRatio: width / height,
|
|
64
|
+
height,
|
|
65
|
+
width
|
|
66
|
+
};
|
|
67
|
+
}
|
|
68
|
+
evaluateQueries() {
|
|
69
|
+
const queryResults = {};
|
|
70
|
+
for (const [featureName, metadata] of Object.entries(this.features)) {
|
|
71
|
+
const {
|
|
72
|
+
dimension,
|
|
73
|
+
min,
|
|
74
|
+
max
|
|
75
|
+
} = metadata;
|
|
76
|
+
const value = this.dimensions[dimension];
|
|
77
|
+
queryResults[featureName] = min <= value && value < max;
|
|
78
|
+
}
|
|
79
|
+
this.queryResults = queryResults;
|
|
80
|
+
}
|
|
81
|
+
resetDataAttributes(element) {
|
|
82
|
+
this._dataAttributes.forEach(dataAttribute => {
|
|
83
|
+
element.removeAttribute(dataAttribute);
|
|
84
|
+
});
|
|
85
|
+
this._dataAttributes = [];
|
|
86
|
+
}
|
|
87
|
+
setDataAttributes(element) {
|
|
88
|
+
const prefix = this.dataAttributePrefix;
|
|
89
|
+
for (const [featureName, meetsFeature] of Object.entries(this.queryResults)) {
|
|
90
|
+
if (!meetsFeature) {
|
|
91
|
+
continue;
|
|
92
|
+
}
|
|
93
|
+
const dataAttribute = prefix ? `data-${prefix}-${String(featureName)}` : `data-${String(featureName)}`;
|
|
94
|
+
element.setAttribute(dataAttribute, '');
|
|
95
|
+
this._dataAttributes.push(dataAttribute);
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}, (_descriptor = _applyDecoratedDescriptor(_class.prototype, "resizeObserver", [inject], {
|
|
99
|
+
configurable: true,
|
|
100
|
+
enumerable: true,
|
|
101
|
+
writable: true,
|
|
102
|
+
initializer: null
|
|
103
|
+
}), _applyDecoratedDescriptor(_class.prototype, "onResize", [action], Object.getOwnPropertyDescriptor(_class.prototype, "onResize"), _class.prototype)), _class);
|
|
104
|
+
|
|
105
|
+
export { ContainerQueryModifier as default };
|
|
106
|
+
//# sourceMappingURL=container-query.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"container-query.js","sources":["../../src/modifiers/container-query.ts"],"sourcesContent":["import { registerDestructor } from '@ember/destroyable';\nimport { action } from '@ember/object';\nimport { debounce as _debounce } from '@ember/runloop';\nimport { inject as service } from '@ember/service';\nimport Modifier, { ArgsFor, NamedArgs, PositionalArgs } from 'ember-modifier';\n\ntype IndexSignatureParameter = string | number | symbol;\ntype ObjectEntry<T> = [keyof T, T[keyof T]];\ntype ObjectEntries<T> = Array<ObjectEntry<T>>;\n\ntype Dimensions = {\n aspectRatio: number;\n height: number;\n width: number;\n};\n\ntype Metadata = {\n dimension: keyof Dimensions;\n max: number;\n min: number;\n};\n\ntype Features<T extends IndexSignatureParameter> = Record<T, Metadata>;\n\ntype QueryResults<T extends IndexSignatureParameter> = Record<T, boolean>;\n\ninterface ContainerQueryModifierSignature<T extends IndexSignatureParameter> {\n Args: {\n Named: {\n dataAttributePrefix?: string;\n debounce?: number;\n features?: Features<T>;\n onQuery?: ({\n dimensions,\n queryResults,\n }: {\n dimensions: Dimensions;\n queryResults: QueryResults<T>;\n }) => void;\n };\n Positional: [];\n };\n Element: Element;\n}\n\nexport default class ContainerQueryModifier<\n T extends IndexSignatureParameter\n> extends Modifier<ContainerQueryModifierSignature<T>> {\n @service private declare readonly resizeObserver;\n\n dimensions!: Dimensions;\n queryResults!: QueryResults<T>;\n\n private _dataAttributes: Array<string> = [];\n private _element?: Element;\n private _named!: NamedArgs<ContainerQueryModifierSignature<T>>;\n\n get dataAttributePrefix(): string {\n return this._named.dataAttributePrefix ?? 'container-query';\n }\n\n get debounce(): number {\n return this._named.debounce ?? 0;\n }\n\n get features(): Features<T> {\n return this._named.features ?? ({} as Features<T>);\n }\n\n constructor(\n owner: unknown,\n args: ArgsFor<ContainerQueryModifierSignature<T>>\n ) {\n super(owner, args);\n\n registerDestructor(this, () => {\n this.resizeObserver.unobserve(this._element, this.onResize);\n });\n }\n\n modify(\n element: Element,\n _positional: PositionalArgs<ContainerQueryModifierSignature<T>>,\n named: NamedArgs<ContainerQueryModifierSignature<T>>\n ): void {\n this._named = named;\n\n this.registerResizeObserver(element);\n this.queryContainer(element);\n }\n\n @action private onResize(resizeObserverEntry: ResizeObserverEntry): void {\n const element = resizeObserverEntry.target;\n\n if (this.debounce > 0) {\n _debounce(this, this.queryContainer, element, this.debounce);\n return;\n }\n\n this.queryContainer(element);\n }\n\n private registerResizeObserver(element: Element): void {\n this.resizeObserver.unobserve(this._element, this.onResize);\n\n this._element = element;\n this.resizeObserver.observe(this._element, this.onResize);\n }\n\n private queryContainer(element: Element): void {\n this.measureDimensions(element);\n this.evaluateQueries();\n this.resetDataAttributes(element);\n this.setDataAttributes(element);\n\n this._named.onQuery?.({\n dimensions: this.dimensions,\n queryResults: this.queryResults,\n });\n }\n\n private measureDimensions(element: Element): void {\n const height = element.clientHeight;\n const width = element.clientWidth;\n\n this.dimensions = {\n aspectRatio: width / height,\n height,\n width,\n };\n }\n\n private evaluateQueries(): void {\n const queryResults = {} as QueryResults<T>;\n\n for (const [featureName, metadata] of Object.entries(\n this.features\n ) as ObjectEntries<Features<T>>) {\n const { dimension, min, max } = metadata;\n const value = this.dimensions[dimension];\n\n queryResults[featureName] = min <= value && value < max;\n }\n\n this.queryResults = queryResults;\n }\n\n private resetDataAttributes(element: Element): void {\n this._dataAttributes.forEach((dataAttribute) => {\n element.removeAttribute(dataAttribute);\n });\n\n this._dataAttributes = [];\n }\n\n private setDataAttributes(element: Element): void {\n const prefix = this.dataAttributePrefix;\n\n for (const [featureName, meetsFeature] of Object.entries(\n this.queryResults\n ) as ObjectEntries<QueryResults<T>>) {\n if (!meetsFeature) {\n continue;\n }\n\n const dataAttribute = prefix\n ? `data-${prefix}-${String(featureName)}`\n : `data-${String(featureName)}`;\n\n element.setAttribute(dataAttribute, '');\n\n this._dataAttributes.push(dataAttribute);\n }\n }\n}\n\nexport {\n Dimensions,\n Features,\n IndexSignatureParameter,\n Metadata,\n QueryResults,\n};\n"],"names":["ContainerQueryModifier","Modifier","dataAttributePrefix","_named","debounce","features","constructor","owner","args","registerDestructor","resizeObserver","unobserve","_element","onResize","modify","element","_positional","named","registerResizeObserver","queryContainer","resizeObserverEntry","target","_debounce","observe","measureDimensions","evaluateQueries","resetDataAttributes","setDataAttributes","onQuery","dimensions","queryResults","height","clientHeight","width","clientWidth","aspectRatio","featureName","metadata","Object","entries","dimension","min","max","value","_dataAttributes","forEach","dataAttribute","removeAttribute","prefix","meetsFeature","String","setAttribute","push","service","action"],"mappings":"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"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import ContainerQueryComponent from "./components/container-query";
|
|
2
|
+
import AspectRatioHelper from "./helpers/aspect-ratio";
|
|
3
|
+
import HeightHelper from "./helpers/height";
|
|
4
|
+
import WidthHelper from "./helpers/width";
|
|
5
|
+
import ContainerQueryModifier from "./modifiers/container-query";
|
|
6
|
+
interface EmberContainerQueryRegistry {
|
|
7
|
+
ContainerQuery: typeof ContainerQueryComponent;
|
|
8
|
+
'aspect-ratio': typeof AspectRatioHelper;
|
|
9
|
+
'container-query': typeof ContainerQueryModifier;
|
|
10
|
+
height: typeof HeightHelper;
|
|
11
|
+
width: typeof WidthHelper;
|
|
12
|
+
}
|
|
13
|
+
export { EmberContainerQueryRegistry as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"template-registry.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|