import { r as registerInstance, h } from './index-26447f8a.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) {
    registerInstance(this, hostRef);
    this.label = undefined;
    this.sort = undefined;
    this.controls = undefined;
  }
  render() {
    var _a;
    return (h("ion-content", { style: {
        "--background": "var(--ion-color-base)",
      } }, h("fireenjin-form", { disableLoader: true, name: "filter" }, this.label && h("ion-item-divider", null, this.label), ((_a = this.controls) === null || _a === void 0 ? void 0 : _a.length)
      ? this.controls.map((control) => h("fireenjin-select", { ...control }))
      : null, h("ion-item-divider", null, "Sort By"), h("ion-item", { class: "sort-select" }, h("ion-icon", { slot: "start", name: "swap-vertical" }), 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) => (h("ion-select-option", { value: option.value }, option.label))))))));
  }
};
PopoverFilter.style = popoverFilterCss;

export { PopoverFilter as popover_filter };
