'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-3e5ae956.js');

const popoverFilterCss = ".popover-filter-wrapper{--min-width:300px}.sort-select ion-icon{margin-right:5px;color:var(--ion-text-color);opacity:0.33}.sort-select ion-select{width:100%}";

const PopoverFilter = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.label = undefined;
    this.sort = undefined;
    this.controls = undefined;
  }
  render() {
    var _a;
    return (index.h("ion-content", { style: {
        "--background": "var(--ion-color-base)",
      } }, index.h("fireenjin-form", { disableLoader: true, name: "filter" }, this.label && index.h("ion-item-divider", null, this.label), ((_a = this.controls) === null || _a === void 0 ? void 0 : _a.length)
      ? this.controls.map((control) => index.h("fireenjin-select", { ...control }))
      : null, index.h("ion-item-divider", null, "Sort By"), index.h("ion-item", { class: "sort-select" }, index.h("ion-icon", { slot: "start", name: "swap-vertical" }), index.h("ion-select", { name: "orderBy", value: this.sort.value, okText: "Okay", cancelText: "Dismiss", interfaceOptions: {
        header: this.sort.header,
        subHeader: this.sort.subHeader,
        message: this.sort.message,
      } }, this.sort.options.map((option) => (index.h("ion-select-option", { value: option.value }, option.label))))))));
  }
};
PopoverFilter.style = popoverFilterCss;

exports.popover_filter = PopoverFilter;
