1!function(){try{var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{},n=(new e.Error).stack;n&&(e._posthogChunkIds=e._posthogChunkIds||{},e._posthogChunkIds[n]="01a0f932-5333-7ee2-85cc-205b8da52708")}catch(e){}}();import React from 'react'; 2import Button from './Button.js'; 3import CountBadge from './CountBadge.js'; 4import FilterOptionList from './FilterOptionList.js'; 5import Icon from './Icon.js'; 6import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; 7/** 8 * Below the sidebar breakpoint the filter dropdowns collapse into this drawer, 9 * one accordion per filter group. Uses the same `drawer` Stimulus controller as 10 * the `Core:Drawer` Twig component, so the dialog, backdrop and close 11 * animations behave like every other drawer in the app. 12 */ 13export default function FilterDrawer({ 14 filters, 15 sidebarLinks, 16 selections, 17 activeCount, 18 shownCount, 19 onChange, 20 onClear 21}) { 22 if (filters.length === 0 && sidebarLinks.length === 0) { 23 return null; 24 } 25 return /*#__PURE__*/_jsxs("div", { 26 className: "hd-Drawer hd-FilterDrawer", 27 "data-action": "click->drawer#backdropClose", 28 "data-controller": "drawer", 29 "data-testid": "filter-drawer", 30 children: [/*#__PURE__*/_jsxs(Button, { 31 color: "neutral", 32 "data-action": "click->drawer#open", 33 "data-testid": "filter-drawer-trigger", 34 icon: "filter", 35 variant: "secondary", 36 children: ["Filters", activeCount > 0 ? /*#__PURE__*/_jsx(CountBadge, { 37 className: "hd-FilterDrawer__count", 38 count: activeCount, 39 size: "sm" 40 }) : null] 41 }), /*#__PURE__*/_jsx("dialog", { 42 "aria-label": "Select Filters", 43 className: "hd-Drawer__dialog", 44 "data-drawer-target": "dialog", 45 "data-side": "right", 46 children: /*#__PURE__*/_jsxs("div", { 47 className: "hd-Drawer__container", 48 children: [/*#__PURE__*/_jsxs("header", { 49 className: "hd-Drawer__header", 50 children: [/*#__PURE__*/_jsx("div", { 51 className: "hd-Drawer__headerContent", 52 children: /*#__PURE__*/_jsx("h2", { 53 className: "hd-heading-md", 54 style: { 55 transform: 'translateY(var(--hd-font-opticalAlignment-translateY, 0))' 56 }, 57 children: "Select Filters" 58 }) 59 }), /*#__PURE__*/_jsx(Button, { 60 className: "hd-Drawer__close", 61 color: "neutral", 62 "data-action": "drawer#close", 63 icon: "close", 64 iconOnly: true, 65 rounded: true, 66 variant: "tertiary", 67 children: "Close" 68 })] 69 }), /*#__PURE__*/_jsxs("div", { 70 className: "hd-Drawer__content hd-FilterDrawer__content", 71 children: [filters.map(group => /*#__PURE__*/_jsxs("details", { 72 className: "hd-FilterDrawer__group", 73 children: [/*#__PURE__*/_jsxs("summary", { 74 className: "hd-FilterDrawer__summary", 75 children: [/*#__PURE__*/_jsx("span", { 76 style: { 77 transform: 'translateY(var(--hd-font-opticalAlignment-translateY, 0))' 78 }, 79 children: group.label 80 }), /*#__PURE__*/_jsx(Icon, { 81 className: "hd-FilterDrawer__chevron", 82 icon: "chevron-down", 83 size: "sm" 84 })] 85 }), /*#__PURE__*/_jsx(FilterOptionList, { 86 group: group, 87 onChange: nextSelected => onChange(group.key, nextSelected), 88 selected: selections[group.key] ?? [] 89 })] 90 }, group.key)), sidebarLinks.length > 0 ? /*#__PURE__*/_jsxs("details", { 91 className: "hd-FilterDrawer__group", 92 children: [/*#__PURE__*/_jsxs("summary", { 93 className: "hd-FilterDrawer__summary", 94 children: [/*#__PURE__*/_jsx("span", { 95 style: { 96 transform: 'translateY(var(--hd-font-opticalAlignment-translateY, 0))' 97 }, 98 children: "Browse Related Designs" 99 }), /*#__PURE__*/_jsx(Icon, { 100 className: "hd-FilterDrawer__chevron", 101 icon: "chevron-down", 102 size: "sm" 103 })] 104 }), /*#__PURE__*/_jsx("div", { 105 className: "hd-LinkList hd-FilterDrawer__links", 106 children: /*#__PURE__*/_jsx("ul", { 107 className: "hd-LinkList__list", 108 children: sidebarLinks.map(link => /*#__PURE__*/_jsx("li", { 109 className: "hd-LinkListItem", 110 children: /*#__PURE__*/_jsx("a", { 111 "aria-current": link.selected ? 'page' : undefined, 112 className: "hd-LinkListItem__link", 113 "data-selected": link.selected ? 'true' : undefined, 114 "data-testid": "drawer-list-link", 115 href: link.url ?? undefined, 116 children: /*#__PURE__*/_jsx("span", { 117 className: "hd-LinkListItem__label", 118 style: { 119 transform: 'translateY(var(--hd-font-opticalAlignment-translateY, 0))' 120 }, 121 children: link.label 122 }) 123 }) 124 }, `${link.label}:${link.url}`)) 125 }) 126 })] 127 }) : null] 128 }), /*#__PURE__*/_jsxs("footer", { 129 className: "hd-FilterDrawer__actions", 130 children: [/*#__PURE__*/_jsx(Button, { 131 color: "neutral", 132 onClick: onClear, 133 variant: "secondary", 134 children: "Clear All" 135 }), /*#__PURE__*/_jsxs(Button, { 136 "data-action": "drawer#close", 137 children: ["See ", shownCount, " Results"] 138 })] 139 })] 140 }) 141 })] 142 }); 143} 144//# chunkId=01a0f932-5333-7ee2-85cc-205b8da52708
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.