ember-container-query 5.0.11 → 5.0.13

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 CHANGED
@@ -359,11 +359,10 @@ For more examples, I encourage you to check out the code for my demo app. It is
359
359
 
360
360
  ## Compatibility
361
361
 
362
- * `ember-auto-import@v2`<sup>1</sup>
363
- * Ember.js v4.4 or above
364
- * Node.js v18 or above
362
+ - Ember.js v4.12 or above<sup>1</sup>
363
+ - Node.js v18 or above
365
364
 
366
- <sup>1. `ember-container-query` is a v2 addon. This means, your project must have `ember-auto-import@v2`. If you are momentarily stuck with `ember-auto-import@v1`, you can use [`ember-container-query@v3.2.0`](https://github.com/ijlee2/ember-container-query/tree/3.2.0) to make container queries.</sup>
365
+ <sup>1. `ember-container-query` may work on older versions of Ember (e.g. `4.4`), but issues that arise from these won't be supported.</sup>
367
366
 
368
367
 
369
368
  ## Contributing
@@ -1 +1 @@
1
- {"version":3,"file":"container-query.js","sources":["../../src/components/container-query.hbs","../../src/components/container-query.ts"],"sourcesContent":["import { precompileTemplate } from \"@ember/template-compilation\";\nexport default precompileTemplate(\"{{#let (element this.tagName) as |Tag|}}\\n <Tag\\n class=\\\"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 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.ts';\n\ninterface ContainerQuerySignature<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: Element;\n}\n\nexport default class ContainerQueryComponent<\n T extends IndexSignatureParameter,\n> extends Component<ContainerQuerySignature<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":["ContainerQueryComponent","Component","g","prototype","tracked","i","void 0","tagName","args","updateState","dimensions","queryResults","n","action","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;;;AACA,eAAe,kBAAkB,CAAC,0YAA0Y;;AC8B7Z,MAAMA,uBAAuB,SAElCC,SAAS,CAA6B;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,YAAA,EAAA,CAC7CC,OAAO,CAAA,CAAA,CAAA;AAAA,GAAA;AAAA,EAAA,WAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,YAAA,CAAA,EAAAC,KAAA,CAAA,EAAA;AAAA,EAAA;IAAAJ,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,cAAA,EAAA,CACPC,OAAO,CAAA,CAAA,CAAA;AAAA,GAAA;AAAA,EAAA,aAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,cAAA,CAAA,EAAAC,KAAA,CAAA,EAAA;AAER;AACAC,EAAAA,OAAO,GAAG,IAAI,CAACC,IAAI,CAACD,OAAO,IAAI,KAAK,CAAA;AAE5BE,EAAAA,WAAWA,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;AAAC,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAT,SAAA,EAAA,aAAA,EAAA,CATAU,MAAM,CAAA,CAAA,CAAA;AAAA,GAAA;AAUT,CAAA;AAACC,oBAAA,CAAAC,QAAA,EAnBoBf,uBAAuB,CAAA;;;;"}
1
+ {"version":3,"file":"container-query.js","sources":["../../src/components/container-query.ts"],"sourcesContent":["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.ts';\n\ninterface ContainerQuerySignature<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: Element;\n}\n\nexport default class ContainerQueryComponent<\n T extends IndexSignatureParameter,\n> extends Component<ContainerQuerySignature<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":["ContainerQueryComponent","Component","g","prototype","tracked","i","void 0","tagName","args","updateState","dimensions","queryResults","n","action","setComponentTemplate","TEMPLATE"],"mappings":";;;;;;;;;;AA+Be,MAAMA,uBAAuB,SAElCC,SAAS,CAA6B;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,YAAA,EAAA,CAC7CC,OAAO,CAAA,CAAA;AAAA;AAAA,EAAA,WAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,YAAA,CAAA,EAAAC,KAAA,CAAA;AAAA,EAAA;IAAAJ,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,cAAA,EAAA,CACPC,OAAO,CAAA,CAAA;AAAA;AAAA,EAAA,aAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,cAAA,CAAA,EAAAC,KAAA,CAAA;AAER;AACAC,EAAAA,OAAO,GAAG,IAAI,CAACC,IAAI,CAACD,OAAO,IAAI,KAAK;AAE5BE,EAAAA,WAAWA,CAAC;IAClBC,UAAU;AACVC,IAAAA;AAIF,GAAC,EAAQ;IACP,IAAI,CAACD,UAAU,GAAGA,UAAU;IAC5B,IAAI,CAACC,YAAY,GAAGA,YAAY;AAClC;AAAC,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAT,SAAA,EAAA,aAAA,EAAA,CATAU,MAAM,CAAA,CAAA;AAAA;AAUT;AAACC,oBAAA,CAAAC,QAAA,EAnBoBf,uBAAuB,CAAA;;;;"}
@@ -1 +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.ts';\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,CACF;;;;"}
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.ts';\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;AAC/B,EAAA,MAAMC,GAAG,GAAGF,KAAK,CAACE,GAAG,IAAIC,QAAQ;AACjC,EAAA,MAAMC,GAAG,GAAGJ,KAAK,CAACI,GAAG,IAAI,CAAC;EAE1B,OAAO;IAAEH,SAAS;IAAEC,GAAG;AAAEE,IAAAA;GAAK;AAChC,CACF;;;;"}
@@ -1 +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.ts';\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
+ {"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.ts';\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;AAC1B,EAAA,MAAMC,GAAG,GAAGF,KAAK,CAACE,GAAG,IAAIC,QAAQ;AACjC,EAAA,MAAMC,GAAG,GAAGJ,KAAK,CAACI,GAAG,IAAI,CAAC;EAE1B,OAAO;IAAEH,SAAS;IAAEC,GAAG;AAAEE,IAAAA;GAAK;AAChC,CAAC;;;;"}
@@ -1 +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.ts';\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;;;;"}
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.ts';\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;AACzB,EAAA,MAAMC,GAAG,GAAGF,KAAK,CAACE,GAAG,IAAIC,QAAQ;AACjC,EAAA,MAAMC,GAAG,GAAGJ,KAAK,CAACI,GAAG,IAAI,CAAC;EAE1B,OAAO;IAAEH,SAAS;IAAEC,GAAG;AAAEE,IAAAA;GAAK;AAChC,CAAC;;;;"}
@@ -1 +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 type Owner from '@ember/owner';\nimport { debounce as _debounce } from '@ember/runloop';\nimport { inject as service } from '@ember/service';\nimport type { ArgsFor, NamedArgs, PositionalArgs } from 'ember-modifier';\nimport Modifier from 'ember-modifier';\n\ntype IndexSignatureParameter = string | number | symbol;\ntype ObjectEntry<T> = [keyof T, T[keyof T]];\ntype ObjectEntries<T> = 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: 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(owner: Owner, args: ArgsFor<ContainerQueryModifierSignature<T>>) {\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 // eslint-disable-next-line ember/no-runloop\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 type {\n Dimensions,\n Features,\n IndexSignatureParameter,\n Metadata,\n QueryResults,\n};\n"],"names":["ContainerQueryModifier","Modifier","g","prototype","service","i","void 0","dimensions","queryResults","_dataAttributes","_element","_named","dataAttributePrefix","debounce","features","constructor","owner","args","registerDestructor","resizeObserver","unobserve","onResize","modify","element","_positional","named","registerResizeObserver","queryContainer","resizeObserverEntry","target","_debounce","n","action","observe","measureDimensions","evaluateQueries","resetDataAttributes","setDataAttributes","onQuery","height","clientHeight","width","clientWidth","aspectRatio","featureName","metadata","Object","entries","dimension","min","max","value","forEach","dataAttribute","removeAttribute","prefix","meetsFeature","String","setAttribute","push"],"mappings":"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"}
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 type Owner from '@ember/owner';\nimport { debounce as _debounce } from '@ember/runloop';\nimport { inject as service } from '@ember/service';\nimport type { ArgsFor, NamedArgs, PositionalArgs } from 'ember-modifier';\nimport Modifier from 'ember-modifier';\n\ntype IndexSignatureParameter = string | number | symbol;\ntype ObjectEntry<T> = [keyof T, T[keyof T]];\ntype ObjectEntries<T> = 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 declare private readonly resizeObserver;\n\n dimensions!: Dimensions;\n queryResults!: QueryResults<T>;\n\n private _dataAttributes: 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(owner: Owner, args: ArgsFor<ContainerQueryModifierSignature<T>>) {\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 // eslint-disable-next-line ember/no-runloop\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 type {\n Dimensions,\n Features,\n IndexSignatureParameter,\n Metadata,\n QueryResults,\n};\n"],"names":["ContainerQueryModifier","Modifier","g","prototype","service","i","void 0","dimensions","queryResults","_dataAttributes","_element","_named","dataAttributePrefix","debounce","features","constructor","owner","args","registerDestructor","resizeObserver","unobserve","onResize","modify","element","_positional","named","registerResizeObserver","queryContainer","resizeObserverEntry","target","_debounce","n","action","observe","measureDimensions","evaluateQueries","resetDataAttributes","setDataAttributes","onQuery","height","clientHeight","width","clientWidth","aspectRatio","featureName","metadata","Object","entries","dimension","min","max","value","forEach","dataAttribute","removeAttribute","prefix","meetsFeature","String","setAttribute","push"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ember-container-query",
3
- "version": "5.0.11",
3
+ "version": "5.0.13",
4
4
  "description": "Make container queries that harness the power of Ember",
5
5
  "keywords": [
6
6
  "container-queries",
@@ -48,37 +48,37 @@
48
48
  "dist"
49
49
  ],
50
50
  "dependencies": {
51
- "@embroider/addon-shim": "^1.8.9",
52
- "decorator-transforms": "^2.0.0",
51
+ "@embroider/addon-shim": "^1.9.0",
52
+ "decorator-transforms": "^2.3.0",
53
53
  "ember-element-helper": "^0.8.6",
54
54
  "ember-modifier": "^3.2.7 || ^4.2.0",
55
55
  "ember-resize-observer-service": "^1.1.0"
56
56
  },
57
57
  "devDependencies": {
58
- "@babel/core": "^7.25.2",
59
- "@babel/plugin-transform-typescript": "^7.25.2",
60
- "@babel/runtime": "^7.25.0",
61
- "@embroider/addon-dev": "^5.0.0",
62
- "@glimmer/component": "^1.1.2",
58
+ "@babel/core": "^7.26.0",
59
+ "@babel/plugin-transform-typescript": "^7.26.3",
60
+ "@babel/runtime": "^7.26.0",
61
+ "@embroider/addon-dev": "^7.0.0",
62
+ "@glimmer/component": "^2.0.0",
63
63
  "@glimmer/tracking": "^1.1.2",
64
- "@glint/core": "^1.4.0",
65
- "@glint/environment-ember-loose": "^1.4.0",
66
- "@glint/environment-ember-template-imports": "^1.4.0",
67
- "@glint/template": "^1.4.0",
64
+ "@glint/core": "^1.5.0",
65
+ "@glint/environment-ember-loose": "^1.5.0",
66
+ "@glint/environment-ember-template-imports": "^1.5.0",
67
+ "@glint/template": "^1.5.0",
68
68
  "@rollup/plugin-babel": "^6.0.4",
69
- "babel-plugin-ember-template-compilation": "^2.2.5",
70
- "concurrently": "^8.2.2",
71
- "ember-source": "^5.10.2",
69
+ "babel-plugin-ember-template-compilation": "^2.3.0",
70
+ "concurrently": "^9.1.0",
71
+ "ember-source": "^6.0.1",
72
72
  "ember-template-lint": "^6.0.0",
73
- "eslint": "^8.57.0",
74
- "prettier": "^3.3.3",
75
- "rollup": "^4.20.0",
73
+ "eslint": "^8.57.1",
74
+ "prettier": "^3.4.2",
75
+ "rollup": "^4.28.1",
76
76
  "rollup-plugin-copy": "^3.5.0",
77
- "typescript": "^5.5.4",
77
+ "typescript": "^5.7.2",
78
78
  "@shared-configs/ember-template-lint": "0.0.0",
79
- "@shared-configs/prettier": "0.0.0",
79
+ "@shared-configs/typescript": "0.0.0",
80
80
  "@shared-configs/eslint-config-ember": "0.0.0",
81
- "@shared-configs/typescript": "0.0.0"
81
+ "@shared-configs/prettier": "0.0.0"
82
82
  },
83
83
  "engines": {
84
84
  "node": "18.* || >= 20"