@nnc-digital/nnc-design-system 1.0.0-beta17 → 1.0.0-beta18

package/build/index.js

@@ -33716,6 +33716,819 @@ var DirectoryDocumentList = function (_a) {
                     React__default.default.createElement(Column, { small: "full", medium: "full", large: "full" }, !isLoading && (React__default.default.createElement(Pagination, { currentPage: pageNumber, totalResults: totalResults, resultsPerPage: perPage, postTo: directoryPath, buttonClickOverride: setPageNumber }))))))));
 };
 
+var Event = function (_a) {
+    var _b, _c;
+    var id = _a.id, name = _a.name, description = _a.description, descriptionElement = _a.descriptionElement, startDateTime = _a.startDateTime, endDateTime = _a.endDateTime, eventType = _a.eventType, audience = _a.audience, organization = _a.organization, location = _a.location, email = _a.email, fees = _a.fees, url = _a.url, websiteUrlTitle = _a.websiteUrlTitle, contacts = _a.contacts, uploads = _a.uploads, socialProfiles = _a.socialProfiles, shortListPath = _a.shortListPath, isRecurring = _a.isRecurring, recurrencePattern = _a.recurrencePattern, registrationDeadline = _a.registrationDeadline, capacity = _a.capacity, currentAttendees = _a.currentAttendees;
+    var labelLetters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'];
+    var _d = React.useState(false), notServer = _d[0], setNotServer = _d[1];
+    var themeContext = React.useContext(styled.ThemeContext);
+    var favourites = useDirectoryShortListContext().favourites.favourites;
+    React.useEffect(function () {
+        setNotServer(true);
+    }, []);
+    var formatEventDateTime = function (startDateTime, endDateTime) {
+        var startDate = new Date(startDateTime);
+        var options = {
+            weekday: 'long',
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+        };
+        var formatted = startDate.toLocaleDateString('en-GB', options);
+        if (endDateTime) {
+            var endDate = new Date(endDateTime);
+            var endTime = endDate.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' });
+            formatted += " - ".concat(endTime);
+        }
+        return formatted;
+    };
+    var transformEventDetails = function () {
+        var details = [];
+        if (fees) {
+            details.push({
+                term: 'Cost',
+                definition: fees,
+            });
+        }
+        if (eventType) {
+            details.push({
+                term: 'Event type',
+                definition: eventType,
+            });
+        }
+        if (audience && audience.length > 0) {
+            details.push({
+                term: 'Target audience',
+                definition: audience.join(', '),
+            });
+        }
+        if (isRecurring && recurrencePattern) {
+            details.push({
+                term: 'Recurrence',
+                definition: recurrencePattern,
+            });
+        }
+        if (registrationDeadline) {
+            var deadline = new Date(registrationDeadline);
+            details.push({
+                term: 'Registration deadline',
+                definition: deadline.toLocaleDateString('en-GB', {
+                    weekday: 'long',
+                    year: 'numeric',
+                    month: 'long',
+                    day: 'numeric',
+                }),
+            });
+        }
+        if (capacity && currentAttendees !== undefined) {
+            details.push({
+                term: 'Availability',
+                definition: "".concat(currentAttendees, " / ").concat(capacity, " registered"),
+            });
+        }
+        else if (capacity) {
+            details.push({
+                term: 'Capacity',
+                definition: "".concat(capacity, " spaces"),
+            });
+        }
+        return details;
+    };
+    return (React__default.default.createElement(Container$7, { "data-testid": "Event" },
+        React__default.default.createElement(Row$1, null,
+            React__default.default.createElement(Column, { small: "full", medium: "full", large: "full" },
+                React__default.default.createElement(Row$1, null,
+                    React__default.default.createElement(Column, { small: "full", medium: "full", large: "full" },
+                        React__default.default.createElement(ServiceHeader$1, null,
+                            React__default.default.createElement(Heading, { level: 1, text: name }),
+                            (organization === null || organization === void 0 ? void 0 : organization.logo) && (React__default.default.createElement(ServiceImageOuter, null,
+                                React__default.default.createElement(ServiceImageContainer$1, null,
+                                    React__default.default.createElement(ServiceImage$1, { src: organization.logo, alt: name + ' logo', loading: "lazy" })))))),
+                    React__default.default.createElement(Column, { small: "full", medium: "full", large: "full" }, notServer && (React__default.default.createElement(ShortListLinks, null,
+                        shortListPath && (React__default.default.createElement(Favourites$1, { href: shortListPath },
+                            React__default.default.createElement(HeartIcon, { colourFill: themeContext.theme_vars.colours.action }),
+                            " Shortlist (",
+                            favourites.length,
+                            ")")),
+                        React__default.default.createElement(DirectoryAddToShortList, { id: id, name: name, snippet: transformSnippet(description, 350), email: email, website: url, phone: (_c = (_b = contacts === null || contacts === void 0 ? void 0 : contacts[0]) === null || _b === void 0 ? void 0 : _b.phones) === null || _c === void 0 ? void 0 : _c.flatMap(function (phone) { return phone.number; }).join(', '), addresses: (location === null || location === void 0 ? void 0 : location.address) ? [{
+                                    id: location.address.id,
+                                    address_1: location.address.address1,
+                                    city: location.address.city,
+                                    state_province: location.address.county,
+                                    postal_code: location.address.postcode,
+                                    country: location.address.country
+                                }] : [], fees: fees })))))),
+            React__default.default.createElement(Column, { small: "full", medium: "full", large: "full", classes: "striped-column" },
+                React__default.default.createElement(Heading, { level: 2, text: "Event date and time" }),
+                React__default.default.createElement("div", { style: { fontSize: '1.2rem', fontWeight: 'bold', marginBottom: '1rem' } }, formatEventDateTime(startDateTime, endDateTime)),
+                organization && (React__default.default.createElement("p", null,
+                    React__default.default.createElement("strong", null, "Organised by:"),
+                    " ",
+                    organization.name))),
+            location && (location.address || location.isVirtual) && (React__default.default.createElement(Column, { small: "full", medium: "full", large: "full", classes: "striped-column" },
+                React__default.default.createElement(Row$1, null,
+                    React__default.default.createElement(Column, { small: "full", medium: "full", large: "one-third" }, location.isVirtual ? (React__default.default.createElement("div", null,
+                        React__default.default.createElement(Heading, { level: 2, text: "Virtual event" }),
+                        React__default.default.createElement("p", null, "This is an online event."),
+                        location.virtualMeetingInfo && (React__default.default.createElement("div", null,
+                            React__default.default.createElement("strong", null, "Meeting details:"),
+                            React__default.default.createElement("div", { dangerouslySetInnerHTML: { __html: location.virtualMeetingInfo } }))))) : (React__default.default.createElement("div", null,
+                        React__default.default.createElement(Heading, { level: 2, text: location.name || 'Event location' }),
+                        location.address && (React__default.default.createElement(PhysicalAddress, null,
+                            React__default.default.createElement("p", { dangerouslySetInnerHTML: {
+                                    __html: Object.values(location.address)
+                                        .filter(function (item) { var _a; return item !== '' && item !== ((_a = location.address) === null || _a === void 0 ? void 0 : _a.id); })
+                                        .join(' <br />'),
+                                } }),
+                            location.latitude && location.longitude && (React__default.default.createElement(Button$4, { url: "https://google.com/maps/dir//".concat(location.latitude, ",").concat(location.longitude), text: "Get directions" })))),
+                        location.accessibility && location.accessibility.length > 0 && (React__default.default.createElement(React__default.default.Fragment, null,
+                            React__default.default.createElement(Heading, { level: 3, text: "Accessibility" }),
+                            React__default.default.createElement("ul", null, location.accessibility.map(function (accessibility) { return (React__default.default.createElement("li", { key: accessibility.id }, accessibility.accessibility)); }))))))),
+                    React__default.default.createElement(Column, { small: "full", medium: "full", large: "two-thirds" }, !location.isVirtual &&
+                        location.latitude &&
+                        location.longitude && (React__default.default.createElement(React__default.default.Fragment, null,
+                        notServer && (React__default.default.createElement(DirectoryMap, { mapProps: {
+                                centre: "".concat(location.latitude, ",").concat(location.longitude),
+                                imageAltText: "".concat(location.name || 'Event location', " shown on a map"),
+                                zoom: 14,
+                                size: '640x320',
+                                mapMarkers: [
+                                    {
+                                        lat: parseFloat(location.latitude),
+                                        lng: parseFloat(location.longitude),
+                                        label: labelLetters[0],
+                                        title: location.name || 'Event location',
+                                    },
+                                ],
+                            } })),
+                        React__default.default.createElement(MapLink, { href: "https://www.google.com/maps/search/?api=1&query=".concat(location.latitude, "%2C").concat(location.longitude) }, "View in Google Maps"))))))),
+            (email || url || (contacts === null || contacts === void 0 ? void 0 : contacts.length) > 0) && (React__default.default.createElement(Column, { small: "full", medium: "full", large: "full", classes: "striped-column" },
+                React__default.default.createElement(Heading, { level: 2, text: "How to contact about this event" }),
+                React__default.default.createElement(ServiceContact, { email: email, website: url, websiteTitle: websiteUrlTitle, contacts: contacts }))),
+            React__default.default.createElement(Column, { small: "full", medium: "full", large: "full", classes: "striped-column" },
+                React__default.default.createElement(Heading, { level: 2, text: "About this event" }),
+                React__default.default.createElement("div", null,
+                    React__default.default.createElement(React__default.default.Fragment, null, descriptionElement)),
+                React__default.default.createElement(SummaryList, { terms: transformEventDetails(), hasMargin: false })),
+            (uploads === null || uploads === void 0 ? void 0 : uploads.length) > 0 && (React__default.default.createElement(Column, { small: "full", medium: "full", large: "full", classes: "striped-column" },
+                React__default.default.createElement(Heading, { level: 2, text: "Event resources" }),
+                React__default.default.createElement(DownloadableFiles, { files: uploads }))),
+            (socialProfiles === null || socialProfiles === void 0 ? void 0 : socialProfiles.length) > 0 && (React__default.default.createElement(Column, { small: "full", medium: "full", large: "full", classes: "striped-column" },
+                React__default.default.createElement(Heading, { level: 2, text: "Follow this event" }),
+                React__default.default.createElement(ServiceSocialLinks, { profiles: socialProfiles }))))));
+};
+
+({
+    id: 'event-1',
+    name: 'Family Fun Day at Wicksteed Park',
+    description: 'Join us for an exciting family fun day with activities for all ages. There will be face painting, balloon animals, live music, and special discounts on park rides. A perfect day out for families with children of all ages.',
+    descriptionElement: (React__default.default.createElement("div", null,
+        React__default.default.createElement("p", null, "Join us for an exciting family fun day with activities for all ages. There will be face painting, balloon animals, live music, and special discounts on park rides."),
+        React__default.default.createElement("p", null, "A perfect day out for families with children of all ages. Food and refreshments will be available throughout the day."))),
+    startDateTime: '2025-07-15T10:00:00',
+    endDateTime: '2025-07-15T16:00:00',
+    eventType: 'Family Event',
+    audience: ['Families', 'Children', 'Young People'],
+    organization: {
+        id: 'org-1',
+        name: 'Wicksteed Park',
+        description: 'A family theme park and nature reserve in Kettering',
+        logo: 'https://via.placeholder.com/200x100?text=Wicksteed+Park',
+        url: 'https://www.wicksteedpark.co.uk',
+    },
+    location: {
+        id: 1,
+        name: 'Wicksteed Park',
+        description: 'Main entrance and activities area',
+        isVisitable: true,
+        latitude: '52.3991',
+        longitude: '-0.7358',
+        address: {
+            id: 1,
+            address1: 'Barton Road',
+            city: 'Kettering',
+            county: 'Northamptonshire',
+            postcode: 'NN15 6NJ',
+            country: 'United Kingdom',
+        },
+        accessibility: [
+            {
+                id: 1,
+                accessibility: 'Wheelchair accessible paths',
+            },
+            {
+                id: 2,
+                accessibility: 'Accessible toilets',
+            },
+            {
+                id: 3,
+                accessibility: 'Disabled parking available',
+            },
+        ],
+    },
+    email: 'events@wicksteedpark.co.uk',
+    fees: 'Free entry to event activities. Park entry charges apply.',
+    url: 'https://www.wicksteedpark.co.uk/events/family-fun-day',
+    websiteUrlTitle: 'Book tickets online',
+    contacts: [
+        {
+            id: 1,
+            name: 'Event Information',
+            title: 'General Enquiries',
+            phones: [
+                {
+                    id: 1,
+                    number: '01536 512475',
+                },
+            ],
+        },
+    ],
+    uploads: [
+        {
+            title: 'Event Programme',
+            url: '/files/family-fun-day-programme.pdf',
+            size: '2.5MB',
+            type: 'PDF',
+            archived: false,
+        },
+        {
+            title: 'Activity Map',
+            url: '/files/activity-map.pdf',
+            size: '1.2MB',
+            type: 'PDF',
+            archived: false,
+        },
+    ],
+    socialProfiles: [
+        {
+            id: 1,
+            name: 'Wicksteed Park Facebook',
+            social_network: 'facebook',
+            link: 'https://facebook.com/wicksteedpark',
+        },
+        {
+            id: 2,
+            name: 'Wicksteed Park Twitter',
+            social_network: 'twitter',
+            link: 'https://twitter.com/wicksteedpark',
+        },
+    ],
+    updatedAt: '2025-01-15',
+    shortListPath: '/events/shortlist',
+    isRecurring: false,
+    registrationDeadline: '2025-07-10T23:59:59',
+    capacity: 500,
+    currentAttendees: 342,
+});
+({
+    id: 'event-2',
+    name: 'Online Parenting Workshop: Managing Screen Time',
+    description: 'A comprehensive online workshop for parents and carers about managing children\'s screen time effectively. Learn practical strategies, understand the latest research, and connect with other parents.',
+    descriptionElement: (React__default.default.createElement("div", null,
+        React__default.default.createElement("p", null, "A comprehensive online workshop for parents and carers about managing children's screen time effectively."),
+        React__default.default.createElement("p", null, "During this 2-hour session, you'll learn:"),
+        React__default.default.createElement("ul", null,
+            React__default.default.createElement("li", null, "Evidence-based strategies for healthy screen time limits"),
+            React__default.default.createElement("li", null, "How to create engaging offline activities"),
+            React__default.default.createElement("li", null, "Understanding age-appropriate content"),
+            React__default.default.createElement("li", null, "Building family media agreements")),
+        React__default.default.createElement("p", null, "There will be time for Q&A and connecting with other parents."))),
+    startDateTime: '2025-03-20T19:00:00',
+    endDateTime: '2025-03-20T21:00:00',
+    eventType: 'Workshop',
+    audience: ['Parents', 'Carers'],
+    organization: {
+        id: 'org-2',
+        name: 'Northamptonshire Family Support',
+        description: 'Supporting families across Northamptonshire',
+        logo: 'https://via.placeholder.com/200x100?text=Family+Support',
+        url: 'https://www.northantsfamilysupport.org.uk',
+    },
+    location: {
+        id: 2,
+        name: 'Online Event',
+        description: 'Join from the comfort of your own home',
+        isVirtual: true,
+        virtualMeetingInfo: 'Zoom link will be sent 24 hours before the event. Please ensure you have a stable internet connection and a quiet space.',
+    },
+    email: 'workshops@northantsfamilysupport.org.uk',
+    fees: 'Free',
+    url: 'https://www.northantsfamilysupport.org.uk/workshops/screen-time',
+    websiteUrlTitle: 'Register for this workshop',
+    contacts: [
+        {
+            id: 1,
+            name: 'Workshop Team',
+            title: 'Registration Support',
+            phones: [
+                {
+                    id: 1,
+                    number: '01604 123456',
+                },
+            ],
+        },
+    ],
+    uploads: [
+        {
+            title: 'Workshop Preparation Guide',
+            url: '/files/screen-time-prep-guide.pdf',
+            size: '800KB',
+            type: 'PDF',
+            archived: false,
+        },
+    ],
+    updatedAt: '2025-01-10',
+    shortListPath: '/events/shortlist',
+    isRecurring: true,
+    recurrencePattern: 'Monthly on the third Thursday',
+    registrationDeadline: '2025-03-18T23:59:59',
+    capacity: 50,
+    currentAttendees: 23,
+});
+
+var EventList = function (_a) {
+    var eventsPath = _a.eventsPath, shortListPath = _a.shortListPath, events = _a.events, _b = _a.search, search = _b === void 0 ? '' : _b, setSearch = _a.setSearch, _c = _a.proximity, proximity = _c === void 0 ? 2 : _c, _d = _a.showPostcodeSearch, showPostcodeSearch = _d === void 0 ? true : _d, _e = _a.postcode, postcode = _e === void 0 ? '' : _e, setPostcode = _a.setPostcode, _f = _a.totalResults, totalResults = _f === void 0 ? 0 : _f, _g = _a.pageNumber, pageNumber = _g === void 0 ? 1 : _g, setPageNumber = _a.setPageNumber, _h = _a.perPage, perPage = _h === void 0 ? 5 : _h, _j = _a.extractLength, extractLength = _j === void 0 ? 300 : _j, _k = _a.eventTypes, eventTypes = _k === void 0 ? [] : _k, setEventTypes = _a.setEventTypes, _l = _a.audiences, audiences = _l === void 0 ? [] : _l, setAudiences = _a.setAudiences, selectedMonth = _a.selectedMonth, setSelectedMonth = _a.setSelectedMonth, selectedYear = _a.selectedYear, setSelectedYear = _a.setSelectedYear, _m = _a.mapCenter, mapCenter = _m === void 0 ? '52.40410666556486,-0.7237065995821512' : _m, _o = _a.mapZoom, mapZoom = _o === void 0 ? 9 : _o, _p = _a.isLoading, isLoading = _p === void 0 ? false : _p, _q = _a.isError, isError = _q === void 0 ? false : _q; _a.hideOldEvents;
+    var _s = useLocalStorage("".concat(eventsPath.replace(/\//g, ''), "-accordion"), []), accordions = _s[0], setAccordions = _s[1];
+    var _t = useLocalStorage("".concat(eventsPath.replace(/\//g, ''), "-accordion-all"), true), openAll = _t[0], setOpenAll = _t[1];
+    var _u = useLocalStorage("".concat(eventsPath.replace(/\//g, ''), "-show-map"), false), showMap = _u[0], setShowMap = _u[1];
+    var _v = React.useState(false), showFilters = _v[0], setShowFilters = _v[1];
+    var _w = useDirectoryShortListContext(), _x = _w.favourites, favourites = _x.favourites; _x.setFavourites; _w.toggleFavourites; _w.isFavourite;
+    var _y = React.useState(false), notServer = _y[0], setNotServer = _y[1];
+    var _z = React.useState(search), searchTerm = _z[0], setSearchTerm = _z[1];
+    var _0 = React.useState(postcode), postcodeSearch = _0[0], setPostcodeSearch = _0[1];
+    var themeContext = React.useContext(styled.ThemeContext);
+    var _1 = React.useState(false), filtersActive = _1[0], setFiltersActive = _1[1];
+    React.useEffect(function () {
+        setNotServer(true);
+        setFiltersActive(hasActiveFilters());
+    }, []);
+    React.useEffect(function () {
+        setFiltersActive(hasActiveFilters());
+    }, [selectedMonth, selectedYear, eventTypes, audiences, search, postcode]);
+    // Initialize accordions
+    if (accordions.length === 0) {
+        var tempAccordions_1 = [];
+        // Date filter
+        tempAccordions_1.push(false);
+        // Event types
+        eventTypes === null || eventTypes === void 0 ? void 0 : eventTypes.forEach(function () {
+            tempAccordions_1.push(false);
+        });
+        // Audiences
+        audiences === null || audiences === void 0 ? void 0 : audiences.forEach(function () {
+            tempAccordions_1.push(false);
+        });
+        setAccordions(tempAccordions_1);
+    }
+    var optionChecked = function (e, categoryIndex, singleSelection, isEventType) {
+        if (isEventType === void 0) { isEventType = true; }
+        var categories = isEventType ? eventTypes : audiences;
+        var setCategories = isEventType ? setEventTypes : setAudiences;
+        var newCategories = __spreadArray([], categories, true);
+        if (singleSelection) {
+            newCategories[categoryIndex].options.forEach(function (option) {
+                option.checked = false;
+            });
+        }
+        newCategories[categoryIndex].options.find(function (option) {
+            if (option.id === e.target.value) {
+                option.checked = !option.checked;
+            }
+        });
+        setCategories(newCategories);
+    };
+    var clearCategory = function (categoryIndex, isEventType) {
+        if (isEventType === void 0) { isEventType = true; }
+        var categories = isEventType ? eventTypes : audiences;
+        var setCategories = isEventType ? setEventTypes : setAudiences;
+        var newCategories = __spreadArray([], categories, true);
+        newCategories[categoryIndex].options.forEach(function (option) {
+            option.checked = false;
+        });
+        setCategories(newCategories);
+    };
+    var clearDateFilter = function () {
+        setSelectedMonth(undefined);
+        setSelectedYear(undefined);
+    };
+    var from = pageNumber * perPage - (perPage - 1);
+    var to = from + ((events === null || events === void 0 ? void 0 : events.length) ? events.length - 1 : 0);
+    var clearSearch = function () {
+        window.location.href = eventsPath;
+    };
+    var toggleAccordion = function (index) {
+        var updatedAccordions = __spreadArray([], accordions, true);
+        updatedAccordions[index] = !updatedAccordions[index];
+        setAccordions(updatedAccordions);
+    };
+    var toggleAll = function () {
+        setOpenAll(!openAll);
+        var updatedAccordions = accordions.map(function () {
+            return openAll;
+        });
+        setAccordions(updatedAccordions);
+    };
+    var submitSearch = function (e) {
+        e.preventDefault();
+        setSearch(searchTerm);
+        setPostcode(postcodeSearch);
+    };
+    var letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
+    var labelLetters = letters.split('');
+    var mapProps = {
+        centre: mapCenter,
+        zoom: mapZoom,
+        size: '640x320',
+        imageAltText: 'Event search results displayed on a map',
+        mapMarkers: events
+            .filter(function (event) {
+            var _a, _b;
+            return ((_a = event.location) === null || _a === void 0 ? void 0 : _a.latitude) && ((_b = event.location) === null || _b === void 0 ? void 0 : _b.longitude);
+        })
+            .map(function (event, index) {
+            var _a, _b;
+            return {
+                lat: parseFloat(((_a = event.location) === null || _a === void 0 ? void 0 : _a.latitude) || '0'),
+                lng: parseFloat(((_b = event.location) === null || _b === void 0 ? void 0 : _b.longitude) || '0'),
+                label: labelLetters[index],
+                title: "<a href=".concat(event.id, ">").concat(event.name, "</a>"),
+            };
+        }),
+    };
+    var hasActiveFilters = function () {
+        return (search !== '' ||
+            postcode !== '' ||
+            selectedMonth !== undefined ||
+            selectedYear !== undefined ||
+            eventTypes.some(function (category) {
+                return category.options.some(function (option) {
+                    return option.checked == true;
+                });
+            }) ||
+            audiences.some(function (category) {
+                return category.options.some(function (option) {
+                    return option.checked == true;
+                });
+            }));
+    };
+    var formatEventDateTime = function (startDateTime, endDateTime) {
+        var startDate = new Date(startDateTime);
+        var options = {
+            weekday: 'long',
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+        };
+        var formatted = startDate.toLocaleDateString('en-GB', options);
+        if (endDateTime) {
+            var endDate = new Date(endDateTime);
+            var endTime = endDate.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' });
+            formatted += " - ".concat(endTime);
+        }
+        return formatted;
+    };
+    var monthNames = [
+        'January', 'February', 'March', 'April', 'May', 'June',
+        'July', 'August', 'September', 'October', 'November', 'December'
+    ];
+    var currentYear = new Date().getFullYear();
+    var years = Array.from({ length: 5 }, function (_, i) { return currentYear + i; });
+    return (React__default.default.createElement(Container$3, { "data-testid": "EventList" },
+        React__default.default.createElement(Row$1, null,
+            React__default.default.createElement(Column, { small: "full", medium: "full", large: "full" },
+                React__default.default.createElement(SearchHeader$1, null,
+                    React__default.default.createElement(FormWithLine, { hideLine: true, onSubmit: submitSearch },
+                        React__default.default.createElement(Row$1, null,
+                            React__default.default.createElement(Column, { small: "full", medium: "one-half", large: "one-third" },
+                                React__default.default.createElement(Label$1, { htmlFor: "eventSearch" }, "What events are you looking for?"),
+                                React__default.default.createElement(HintText, { text: "Enter the name of a specific event or organisation" }),
+                                React__default.default.createElement(Input, { name: "eventSearch", type: "text", defaultValue: searchTerm, id: "eventSearch", onChange: function (e) {
+                                        setSearchTerm(e.target.value);
+                                    } })),
+                            showPostcodeSearch && (React__default.default.createElement(Column, { small: "full", medium: "one-half", large: "one-third" },
+                                React__default.default.createElement(Label$1, { htmlFor: "postcode" }, "Postcode (optional)"),
+                                React__default.default.createElement(HintText, { text: "Enter a postcode to see results within ".concat(proximity, " miles") }),
+                                React__default.default.createElement(Input, { name: "postcode", type: "text", defaultValue: postcodeSearch, id: "postcode", onChange: function (e) { return setPostcodeSearch(e.target.value); }, autocomplete: "postal-code" }))),
+                            React__default.default.createElement(Column, { small: "full", medium: "one-half", large: "one-third" },
+                                React__default.default.createElement(ButtonContainer$2, null,
+                                    React__default.default.createElement(Button$1, { size: "large", onClick: submitSearch, type: "submit" },
+                                        React__default.default.createElement(ButtonText$1, null, "Search"),
+                                        React__default.default.createElement(IconDownload, { colourFill: "#fff" })),
+                                    filtersActive && (React__default.default.createElement(Button$1, { size: "large", onClick: clearSearch, type: "button", "$isWarning": true },
+                                        React__default.default.createElement(ButtonText$1, null, "Clear search"))))))))),
+            React__default.default.createElement(Column, { small: "full", medium: "one-third", large: "one-third" },
+                React__default.default.createElement(FilterToggle, { type: "button", onClick: function (e) { return setShowFilters(!showFilters); } }, showFilters ? "Hide Filters" : "Show Filters"),
+                React__default.default.createElement(FilterContainer, { "$showFilters": showFilters },
+                    React__default.default.createElement(Row$1, null,
+                        React__default.default.createElement(Column, { small: "full", medium: "full", large: "full" },
+                            React__default.default.createElement(ResultInfo$1, null, "Refine your search")),
+                        notServer && (React__default.default.createElement(React__default.default.Fragment, null,
+                            React__default.default.createElement(Column, { small: "full", medium: "full", large: "full" },
+                                React__default.default.createElement(AccordionControls, null,
+                                    filtersActive ? (React__default.default.createElement(TextLink$1, { onClick: clearSearch, type: "button" },
+                                        React__default.default.createElement(ButtonText$1, null, "Clear all filters"))) : (React__default.default.createElement("div", null)),
+                                    React__default.default.createElement(TextLink$1, { onClick: toggleAll, type: "button", "aria-expanded": !openAll },
+                                        openAll ? 'Open all' : 'Close all',
+                                        React__default.default.createElement(VisuallyHidden, null, " sections")))),
+                            React__default.default.createElement(Column, { small: "full", medium: "full", large: "full" },
+                                React__default.default.createElement(Fieldset$1, null,
+                                    React__default.default.createElement(Legend$1, { onClick: function (e) { return toggleAccordion(0); } },
+                                        React__default.default.createElement(LegendButton, { onClick: function (e) { return toggleAccordion(0); }, type: "button" },
+                                            "Select date range",
+                                            React__default.default.createElement(AccordionIcon, { "$isOpen": accordions[0] }))),
+                                    React__default.default.createElement(Accordion, { "$isOpen": accordions[0] },
+                                        React__default.default.createElement(ClearFilter$1, null,
+                                            React__default.default.createElement(TextLink$1, { onClick: clearDateFilter }, "Clear filter")),
+                                        React__default.default.createElement(Row$1, null,
+                                            React__default.default.createElement(Column, { small: "full", medium: "one-half", large: "one-half" },
+                                                React__default.default.createElement(DropDownSelect, { id: "event_month", label: "Month", selected: (selectedMonth === null || selectedMonth === void 0 ? void 0 : selectedMonth.toString()) || '', onChange: function (e) { return setSelectedMonth(e.target.value ? parseInt(e.target.value) : undefined); }, options: __spreadArray([
+                                                        { title: 'All months', value: '' }
+                                                    ], monthNames.map(function (month, index) { return ({
+                                                        title: month,
+                                                        value: (index + 1).toString(),
+                                                    }); }), true) })),
+                                            React__default.default.createElement(Column, { small: "full", medium: "one-half", large: "one-half" },
+                                                React__default.default.createElement(DropDownSelect, { id: "event_year", label: "Year", selected: (selectedYear === null || selectedYear === void 0 ? void 0 : selectedYear.toString()) || '', onChange: function (e) { return setSelectedYear(e.target.value ? parseInt(e.target.value) : undefined); }, options: __spreadArray([
+                                                        { title: 'All years', value: '' }
+                                                    ], years.map(function (year) { return ({
+                                                        title: year.toString(),
+                                                        value: year.toString(),
+                                                    }); }), true) })))))), eventTypes === null || eventTypes === void 0 ? void 0 :
+                            eventTypes.map(function (category, categoryIndex) { return (React__default.default.createElement(Column, { small: "full", medium: "full", large: "full", key: category.label },
+                                React__default.default.createElement(Fieldset$1, null,
+                                    React__default.default.createElement(Legend$1, null,
+                                        React__default.default.createElement(LegendButton, { onClick: function (e) { return toggleAccordion(categoryIndex + 1); }, type: "button" },
+                                            category.label,
+                                            React__default.default.createElement(AccordionIcon, { "$isOpen": accordions[categoryIndex + 1] }))),
+                                    React__default.default.createElement(Accordion, { "$isOpen": accordions[categoryIndex + 1] },
+                                        React__default.default.createElement(ClearFilter$1, null,
+                                            React__default.default.createElement(TextLink$1, { onClick: function (e) { return clearCategory(categoryIndex, true); } }, "Clear filter")),
+                                        category.options.map(function (taxonomy) { return (React__default.default.createElement(Category$2, { key: taxonomy.id },
+                                            React__default.default.createElement(RadioCheckboxInput, { name: taxonomy.vocabulary, value: taxonomy.id, label: taxonomy.name, singleSelection: category.singleSelection, checked: taxonomy.checked, onChange: function (e) { return optionChecked(e, categoryIndex, category.singleSelection, true); } }))); }))))); }), audiences === null || audiences === void 0 ? void 0 :
+                            audiences.map(function (category, categoryIndex) { return (React__default.default.createElement(Column, { small: "full", medium: "full", large: "full", key: category.label },
+                                React__default.default.createElement(Fieldset$1, null,
+                                    React__default.default.createElement(Legend$1, null,
+                                        React__default.default.createElement(LegendButton, { onClick: function (e) { return toggleAccordion(eventTypes.length + categoryIndex + 1); }, type: "button" },
+                                            category.label,
+                                            React__default.default.createElement(AccordionIcon, { "$isOpen": accordions[eventTypes.length + categoryIndex + 1] }))),
+                                    React__default.default.createElement(Accordion, { "$isOpen": accordions[eventTypes.length + categoryIndex + 1] },
+                                        React__default.default.createElement(ClearFilter$1, null,
+                                            React__default.default.createElement(TextLink$1, { onClick: function (e) { return clearCategory(categoryIndex, false); } }, "Clear filter")),
+                                        category.options.map(function (taxonomy) { return (React__default.default.createElement(Category$2, { key: taxonomy.id },
+                                            React__default.default.createElement(RadioCheckboxInput, { name: taxonomy.vocabulary, value: taxonomy.id, label: taxonomy.name, singleSelection: category.singleSelection, checked: taxonomy.checked, onChange: function (e) { return optionChecked(e, categoryIndex, category.singleSelection, false); } }))); }))))); })))))),
+            React__default.default.createElement(Column, { small: "full", medium: "two-thirds", large: "two-thirds" },
+                React__default.default.createElement(Row$1, null, isError ? (React__default.default.createElement(Column, { small: "full", medium: "full", large: "full" },
+                    React__default.default.createElement(AlertBannerService, null,
+                        React__default.default.createElement("p", null, "Sorry, there was a problem fetching events. Please try again later.")))) : isLoading ? (React__default.default.createElement(LoadingContainer$1, null,
+                    React__default.default.createElement(LoadingSpinner, null),
+                    React__default.default.createElement("p", null, "Loading"))) : (React__default.default.createElement(React__default.default.Fragment, null,
+                    React__default.default.createElement(Column, { small: "full", medium: "full", large: "full" },
+                        (events === null || events === void 0 ? void 0 : events.length) > 0 ? (React__default.default.createElement(ResultInfo$1, null,
+                            "Showing ",
+                            from,
+                            " to ",
+                            to,
+                            " out of ",
+                            totalResults.toLocaleString())) : (React__default.default.createElement(ResultInfo$1, null, "No events found")),
+                        React__default.default.createElement(FavouritesContainer, null,
+                            (events === null || events === void 0 ? void 0 : events.length) > 0 && (React__default.default.createElement(MapToggle, { type: "button", size: "large", onClick: function (e) { return setShowMap(!showMap); } }, showMap ? "Hide Map" : "Show Map")),
+                            React__default.default.createElement(Favourites, { href: shortListPath },
+                                React__default.default.createElement(HeartIcon, { colourFill: themeContext.theme_vars.colours.action }),
+                                " Shortlist (",
+                                favourites.length,
+                                ")"))),
+                    React__default.default.createElement(Column, { small: "full", medium: "full", large: "full" },
+                        React__default.default.createElement(Pagination, { currentPage: pageNumber, totalResults: totalResults, resultsPerPage: perPage, postTo: eventsPath, buttonClickOverride: setPageNumber })),
+                    React__default.default.createElement(Column, { small: "full", medium: "full", large: "full" }, notServer && React__default.default.createElement(React__default.default.Fragment, null, (events === null || events === void 0 ? void 0 : events.length) > 0 && showMap && React__default.default.createElement(DirectoryMap, { mapProps: mapProps }))),
+                    events.map(function (event, index) {
+                        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+                        var snippet = transformSnippet(event.description, extractLength);
+                        return (React__default.default.createElement(Column, { small: "full", medium: "full", large: "full", key: event.id },
+                            React__default.default.createElement(ServiceContainer, { "$resultNumber": index },
+                                React__default.default.createElement(Row$1, null,
+                                    React__default.default.createElement(Column, { small: "full", medium: "full", large: "full" },
+                                        React__default.default.createElement(ServiceHeader, null,
+                                            React__default.default.createElement(ServiceLink$1, { href: "".concat(event.id) }, event.name),
+                                            showMap && ((_a = event.location) === null || _a === void 0 ? void 0 : _a.latitude) && ((_b = event.location) === null || _b === void 0 ? void 0 : _b.longitude) && (React__default.default.createElement(MarkerContainer, null,
+                                                React__default.default.createElement("span", null, labelLetters[index]),
+                                                React__default.default.createElement(PinIcon, { colourFill: themeContext.theme_vars.colours.action_dark }))))),
+                                    React__default.default.createElement(Column, { small: "full", medium: "full", large: "full" },
+                                        React__default.default.createElement(Age, null, formatEventDateTime(event.startDateTime, event.endDateTime)),
+                                        event.organization && (React__default.default.createElement("p", { style: { fontSize: '0.9rem', color: '#666', marginBottom: '8px' } },
+                                            "Organised by: ",
+                                            React__default.default.createElement("strong", null, event.organization.name))),
+                                        event.eventType && (React__default.default.createElement("p", { style: { fontSize: '0.9rem', color: '#666', marginBottom: '8px' } },
+                                            "Event type: ",
+                                            React__default.default.createElement("strong", null, event.eventType))),
+                                        event.audience && event.audience.length > 0 && (React__default.default.createElement("p", { style: { fontSize: '0.9rem', color: '#666', marginBottom: '8px' } },
+                                            "Audience: ",
+                                            React__default.default.createElement("strong", null, event.audience.join(', '))))),
+                                    React__default.default.createElement(Column, { small: "full", medium: ((_c = event.organization) === null || _c === void 0 ? void 0 : _c.logo) ? 'two-thirds' : 'full', large: ((_d = event.organization) === null || _d === void 0 ? void 0 : _d.logo) ? 'two-thirds' : 'full' },
+                                        React__default.default.createElement("div", null, snippet)),
+                                    ((_e = event.organization) === null || _e === void 0 ? void 0 : _e.logo) && (React__default.default.createElement(Column, { small: "full", medium: "one-third", large: "one-third" },
+                                        React__default.default.createElement(ServiceImageContainer, null,
+                                            React__default.default.createElement(ServiceImage, { src: event.organization.logo, alt: event.name + ' logo', loading: "lazy" })))),
+                                    React__default.default.createElement(Column, { small: "full", medium: "full", large: "full" },
+                                        React__default.default.createElement(DirectoryAddToShortList, { id: event.id, name: event.name, snippet: snippet, email: event.email, website: event.url, phone: (_h = (_g = (_f = event.contacts) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.phones) === null || _h === void 0 ? void 0 : _h.flatMap(function (phone) { return phone.number; }).join(', '), addresses: ((_j = event.location) === null || _j === void 0 ? void 0 : _j.address) ? [{
+                                                    id: event.location.address.id,
+                                                    address_1: event.location.address.address1,
+                                                    city: event.location.address.city,
+                                                    state_province: event.location.address.county,
+                                                    postal_code: event.location.address.postcode,
+                                                    country: event.location.address.country
+                                                }] : [], fees: event.fees }))))));
+                    }),
+                    React__default.default.createElement(Column, { small: "full", medium: "full", large: "full" },
+                        React__default.default.createElement(Pagination, { currentPage: pageNumber, totalResults: totalResults, resultsPerPage: perPage, postTo: eventsPath, buttonClickOverride: setPageNumber })))))))));
+};
+
+/**
+ * Filters out events that have already ended based on their end date/time
+ * @param events Array of events to filter
+ * @param hideOldEvents Whether to hide old events (defaults to true)
+ * @returns Filtered array of events
+ */
+var filterOldEvents = function (events, hideOldEvents) {
+    if (hideOldEvents === void 0) { hideOldEvents = true; }
+    if (!hideOldEvents) {
+        return events;
+    }
+    var now = new Date();
+    return events.filter(function (event) {
+        // Use end date if available, otherwise use start date
+        var eventEndDate = new Date(event.endDateTime || event.startDateTime);
+        // Keep events that haven't ended yet
+        return eventEndDate > now;
+    });
+};
+/**
+ * Filters events by month and year
+ * @param events Array of events to filter
+ * @param selectedMonth Month (1-12) or undefined for all months
+ * @param selectedYear Year or undefined for all years
+ * @returns Filtered array of events
+ */
+var filterEventsByDate = function (events, selectedMonth, selectedYear) {
+    if (!selectedMonth && !selectedYear) {
+        return events;
+    }
+    return events.filter(function (event) {
+        var eventDate = new Date(event.startDateTime);
+        var eventMonth = eventDate.getMonth() + 1; // JavaScript months are 0-indexed
+        var eventYear = eventDate.getFullYear();
+        var monthMatches = !selectedMonth || eventMonth === selectedMonth;
+        var yearMatches = !selectedYear || eventYear === selectedYear;
+        return monthMatches && yearMatches;
+    });
+};
+/**
+ * Filters events by event type
+ * @param events Array of events to filter
+ * @param selectedEventTypes Array of selected event type IDs
+ * @returns Filtered array of events
+ */
+var filterEventsByType = function (events, selectedEventTypes) {
+    if (selectedEventTypes.length === 0) {
+        return events;
+    }
+    return events.filter(function (event) {
+        if (!event.eventType) {
+            return false;
+        }
+        return selectedEventTypes.includes(event.eventType);
+    });
+};
+/**
+ * Filters events by audience
+ * @param events Array of events to filter
+ * @param selectedAudiences Array of selected audience IDs
+ * @returns Filtered array of events
+ */
+var filterEventsByAudience = function (events, selectedAudiences) {
+    if (selectedAudiences.length === 0) {
+        return events;
+    }
+    return events.filter(function (event) {
+        if (!event.audience || event.audience.length === 0) {
+            return false;
+        }
+        // Check if any of the event's audiences match the selected audiences
+        return event.audience.some(function (audience) { return selectedAudiences.includes(audience); });
+    });
+};
+/**
+ * Filters events by search term (searches in name and description)
+ * @param events Array of events to filter
+ * @param searchTerm Search term to look for
+ * @returns Filtered array of events
+ */
+var filterEventsBySearch = function (events, searchTerm) {
+    if (!searchTerm.trim()) {
+        return events;
+    }
+    var lowercaseSearch = searchTerm.toLowerCase();
+    return events.filter(function (event) {
+        var _a, _b;
+        var nameMatch = event.name.toLowerCase().includes(lowercaseSearch);
+        var descriptionMatch = event.description.toLowerCase().includes(lowercaseSearch);
+        var organizationMatch = ((_b = (_a = event.organization) === null || _a === void 0 ? void 0 : _a.name) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(lowercaseSearch)) || false;
+        return nameMatch || descriptionMatch || organizationMatch;
+    });
+};
+/**
+ * Sorts events by date (earliest first)
+ * @param events Array of events to sort
+ * @returns Sorted array of events
+ */
+var sortEventsByDate = function (events) {
+    return __spreadArray([], events, true).sort(function (a, b) {
+        var dateA = new Date(a.startDateTime);
+        var dateB = new Date(b.startDateTime);
+        return dateA.getTime() - dateB.getTime();
+    });
+};
+/**
+ * Comprehensive filter function that applies all filters
+ * @param events Array of events to filter
+ * @param filters Object containing all filter criteria
+ * @returns Filtered and sorted array of events
+ */
+var applyAllEventFilters = function (events, filters) {
+    var filteredEvents = events;
+    // Apply old events filter
+    filteredEvents = filterOldEvents(filteredEvents, filters.hideOldEvents);
+    // Apply date filter
+    filteredEvents = filterEventsByDate(filteredEvents, filters.selectedMonth, filters.selectedYear);
+    // Apply event type filter
+    if (filters.selectedEventTypes && filters.selectedEventTypes.length > 0) {
+        filteredEvents = filterEventsByType(filteredEvents, filters.selectedEventTypes);
+    }
+    // Apply audience filter
+    if (filters.selectedAudiences && filters.selectedAudiences.length > 0) {
+        filteredEvents = filterEventsByAudience(filteredEvents, filters.selectedAudiences);
+    }
+    // Apply search filter
+    if (filters.searchTerm) {
+        filteredEvents = filterEventsBySearch(filteredEvents, filters.searchTerm);
+    }
+    // Sort by date
+    return sortEventsByDate(filteredEvents);
+};
+
+var defaultBreadcrumbs = [
+    {
+        title: 'Home',
+        url: '/',
+    },
+    {
+        title: 'Events',
+        url: '/events',
+    },
+];
+var defaultFooterLinks = [
+    {
+        title: 'About',
+        url: '/',
+    },
+    {
+        title: 'Accessibility',
+        url: '/',
+    },
+    {
+        title: 'Cookies',
+        url: '/',
+    },
+    {
+        title: 'Contact us',
+        url: '/',
+    },
+    {
+        title: 'Jobs',
+        url: '/',
+    },
+    {
+        title: 'Newsletter',
+        url: '/',
+    },
+];
+var EventPage = function (_a) {
+    var event = _a.event, _b = _a.breadcrumbs, breadcrumbs = _b === void 0 ? defaultBreadcrumbs : _b, _c = _a.footerLinks, footerLinks = _c === void 0 ? defaultFooterLinks : _c;
+    return (React__default.default.createElement(React__default.default.Fragment, null,
+        React__default.default.createElement(Header, null),
+        React__default.default.createElement(MaxWidthContainer, null,
+            React__default.default.createElement(PageMain, null,
+                React__default.default.createElement(Breadcrumbs, { breadcrumbsArray: breadcrumbs, hasMargin: true }),
+                React__default.default.createElement(DirectoryShortListProvider, null,
+                    React__default.default.createElement(Event, __assign$2({}, event))),
+                event.updatedAt && (React__default.default.createElement("p", null,
+                    React__default.default.createElement(DisplayDate, { preText: "Last updated ", text: event.updatedAt, format: "YYYY-MM-DD" }))))),
+        React__default.default.createElement(Footer, { footerLinksArray: footerLinks })));
+};
+
 exports.AccessibleLinks = AccessibleLink;
 exports.Accordion = Accordion$1;
 exports.AlertBanner = AlertBanner;
@@ -33744,6 +34557,9 @@ exports.Divider = Divider;
 exports.DownloadableFiles = DownloadableFiles;
 exports.DropDownFilter = DropDownFilter;
 exports.DynamicIcon = DynamicIcon;
+exports.Event = Event;
+exports.EventList = EventList;
+exports.EventPage = EventPage;
 exports.Footer = Footer;
 exports.FullWidthContainer = FullWidthContainer;
 exports.GDS_theme = GDS_theme;
@@ -33796,9 +34612,16 @@ exports.TextInput = TextInput;
 exports.Video = Video;
 exports.WarningText = WarningText;
 exports.WarningTextDisclaimer = WarningTextDisclaimer;
+exports.applyAllEventFilters = applyAllEventFilters;
+exports.filterEventsByAudience = filterEventsByAudience;
+exports.filterEventsByDate = filterEventsByDate;
+exports.filterEventsBySearch = filterEventsBySearch;
+exports.filterEventsByType = filterEventsByType;
+exports.filterOldEvents = filterOldEvents;
 exports.lb_theme_north = lb_theme_north;
 exports.lb_theme_west = lb_theme_west;
 exports.north_theme = north_theme;
+exports.sortEventsByDate = sortEventsByDate;
 exports.useDirectoryShortListContext = useDirectoryShortListContext;
 exports.west_theme = west_theme;
 //# sourceMappingURL=index.js.map