https://www.cfainstitute.org/modules/custom/ep_search_api_coveo/js…/atomic-commerce-sort-dropdownBu29gudN.js

1import { l as e, o as t } from "./commerce.indexBu0Q3kxk.js";
2import { a as n, c as r, i, n as a, o, u as s } from "./decoratorsDgvFPsqQ.js";
3import { t as c } from "./bind-stateHBIU0rdL.js";
4import { t as l } from "./binding-guardBYpyFCsg.js";
5import { t as u } from "./bindingsC1qzP6-H.js";
6import { t as d } from "./with-tailwind-stylesCLrXF-GP.js";
7import { t as f } from "./error-guardDZkUaSL0.js";
8import { d as p } from "./utilsCdZ5ESYt.js";
9import { t as m } from "./mapBA9JtKXU.js";
10import { n as h } from "./atomic-iconCiY76ZLO.js";
11import { n as g, t as _ } from "./optionCfniy3o7.js";
12//#region node_modules/@coveo/atomic/dist/atomic/components/components/common/sort/label.js
13var v = ({ props: { i18n: e, id: t } }) => s`<label
14    class="m-2 cursor-pointer text-sm font-bold"
15    part="label"
16    for=${t}
17  >
18    ${e.t("with-colon", { text: e.t("sort-by") })}
19  </label> `, y = "<svg viewBox=\"0 0 12.6 7.2\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m11.421 7.04c-.3 0-.5-.1-.7-.3l-4.6-4.6-4.6 4.6c-.4.4-1 .4-1.4 0s-.4-1 0-1.4l5.2-5.2c.4-.4 1.2-.4 1.6 0l5.2 5.2c.4.4.4 1 0 1.4-.2.2-.4.3-.7.3\" transform=\"matrix(-1 0 0 -1 12.366 7.086)\"/></svg>", b = ({ props: { i18n: e, id: t, onSelect: n } }) => (r) => s`
20      <div class="relative" part="select-parent">
21        <select
22          id=${t}
23          class="btn-outline-neutral h-10 flex-grow cursor-pointer appearance-none pr-24 pl-3 peer"
24          part="select"
25          aria-label=${e.t("sort-by")}
26          @change=${n}
27        >
28          ${r}
29        </select>
30        <div
31          part="select-separator"
32          class="border-neutral peer-hover:border-primary-light peer-focus-within:border-primary-light peer-hover:text-primary-light peer-focus-within:text-primary-light pointer-events-none absolute top-px right-0 bottom-px flex w-10 items-center justify-center border-l"
33        >
34          <atomic-icon class="w-3" icon=${y}></atomic-icon>
35        </div>
36      </div>
37    `, x = () => s`
38  <div
39    part="placeholder"
40    aria-hidden="true"
41    class="bg-neutral mb-4 h-10 w-64 animate-pulse rounded"
42  ></div>
43`, S = ({ firstSearchExecuted: e, hasError: t, hasResults: n, isLoading: i }, a) => t ? o : e ? i ? r : n ? a() : o : x(), C = function(e, t, n, r) {
44	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
45	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
46	else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
47	return i > 3 && a && Object.defineProperty(t, n, a), a;
48}, w = class extends n {
49	constructor() {
50		super(...arguments), this.dropdownId = p("atomic-commerce-sort-dropdown-");
51	}
52	initialize() {
53		this.bindings.interfaceElement.type === "product-listing" ? this.searchOrListing = e(this.bindings.engine) : this.searchOrListing = t(this.bindings.engine), this.sort = this.searchOrListing.sort();
54	}
55	select(e) {
56		let t = e.composedPath()[0];
57		this.sort.sortBy(_(t.value, this.sortState.availableSorts));
58	}
59	sortLabelTemplate() {
60		return v({ props: {
61			id: this.dropdownId,
62			i18n: this.bindings.i18n
63		} });
64	}
65	sortSelectTemplate() {
66		let { bindings: { i18n: e }, dropdownId: t } = this;
67		return b({ props: {
68			i18n: e,
69			id: t,
70			onSelect: (e) => this.select(e)
71		} })(s`${h([this.sortState], () => m(this.sortState.availableSorts, (t) => g({ props: {
72			i18n: e,
73			selected: this.sort.isSortedBy(t),
74			sort: t
75		} })))}`);
76	}
77	render() {
78		let { responseId: e, error: t, products: n, isLoading: r } = this.searchOrListingState;
79		return s`${S({
80			isLoading: r,
81			firstSearchExecuted: e !== "",
82			hasResults: n.length > 0 && this.sortState.availableSorts.length > 1,
83			hasError: t !== null
84		}, () => s`<div class="text-on-background flex flex-wrap items-center">
85          ${this.sortLabelTemplate()} ${this.sortSelectTemplate()}
86        </div>`)}`;
87	}
88};
89C([a()], w.prototype, "bindings", void 0), C([c("sort"), a()], w.prototype, "sortState", void 0), C([c("searchOrListing"), a()], w.prototype, "searchOrListingState", void 0), C([a()], w.prototype, "error", void 0), C([f(), l()], w.prototype, "render", null), w = C([
90	i("atomic-commerce-sort-dropdown"),
91	u(),
92	d
93], w);
94//#endregion
95export { w as AtomicCommerceSortDropdown };