ember-container-query/dist/components/container-query.js

Make container queries that harness the power of Ember

import "./container-query.css"
import { hash } from '@ember/helper';
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { element } from 'ember-element-helper';
import ContainerQuery$1 from '../modifiers/container-query.js';
import { precompileTemplate } from '@ember/template-compilation';
import { setComponentTemplate } from '@ember/component';
import { g, i } from 'decorator-transforms/runtime-esm';

;

class ContainerQuery extends Component {
  static {
    g(this.prototype, "dimensions", [tracked]);
  }
  #dimensions = (i(this, "dimensions"), void 0);
  static {
    g(this.prototype, "queryResults", [tracked]);
  }
  #queryResults = (i(this, "queryResults"), void 0);
  // The dynamic tag is restricted to be immutable
  tagName = this.args.tagName ?? 'div';
  updateState = ({
    dimensions,
    queryResults
  }) => {
    this.dimensions = dimensions;
    this.queryResults = queryResults;
  };
  static {
    setComponentTemplate(precompileTemplate("\n    {{#let (element this.tagName) as |Tag|}}\n      <Tag class=\"container-query\" {{containerQuery dataAttributePrefix=@dataAttributePrefix debounce=@debounce features=@features onQuery=this.updateState}} ...attributes>\n        {{yield (hash dimensions=this.dimensions features=this.queryResults)}}\n      </Tag>\n    {{/let}}\n  ", {
      strictMode: true,
      scope: () => ({
        element,
        containerQuery: ContainerQuery$1,
        hash
      })
    }), this);
  }
}

export { ContainerQuery as default };
//# sourceMappingURL=container-query.js.map