@kickstartds/ds-agency-premium 1.7.0--canary.46.1837.0 → 1.7.0--canary.43.2352.0

package/dist/components/search-filter/search-filter.schema.dereffed.json

@@ -0,0 +1,66 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/search-filter.schema.json",
+  "title": "Search Filter",
+  "type": "object",
+  "properties": {
+    "title": {
+      "type": "string",
+      "description": "The title of the search filter.",
+      "examples": [
+        "Search by category"
+      ]
+    },
+    "categories": {
+      "type": "array",
+      "description": "The categories to filter by.",
+      "examples": [
+        [
+          {
+            "title": "Pages",
+            "amount": "10"
+          },
+          {
+            "title": "News",
+            "amount": "5"
+          },
+          {
+            "title": "Blog Posts",
+            "amount": "8"
+          }
+        ]
+      ],
+      "items": {
+        "type": "object",
+        "properties": {
+          "title": {
+            "type": "string",
+            "description": "The name of the category.",
+            "examples": [
+              "Pages",
+              "News"
+            ]
+          },
+          "amount": {
+            "type": "string",
+            "description": "The number of items in the category.",
+            "examples": [
+              "10",
+              "5"
+            ]
+          },
+          "url": {
+            "type": "string",
+            "format": "uri",
+            "description": "The URL to filter by this category.",
+            "examples": [
+              "#"
+            ]
+          }
+        },
+        "additionalProperties": false
+      }
+    }
+  },
+  "additionalProperties": false
+}

package/dist/components/search-filter/search-filter.schema.json

@@ -0,0 +1,46 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/search-filter.schema.json",
+  "title": "Search Filter",
+  "type": "object",
+  "properties": {
+    "title": {
+      "type": "string",
+      "description": "The title of the search filter.",
+      "examples": ["Search by category"]
+    },
+    "categories": {
+      "type": "array",
+      "description": "The categories to filter by.",
+      "examples": [
+        [
+          { "title": "Pages", "amount": "10" },
+          { "title": "News", "amount": "5" },
+          { "title": "Blog Posts", "amount": "8" }
+        ]
+      ],
+      "items": {
+        "type": "object",
+        "properties": {
+          "title": {
+            "type": "string",
+            "description": "The name of the category.",
+            "examples": ["Pages", "News"]
+          },
+          "amount": {
+            "type": "string",
+            "description": "The number of items in the category.",
+            "examples": ["10", "5"]
+          },
+          "url": {
+            "type": "string",
+            "format": "uri",
+            "description": "The URL to filter by this category.",
+            "examples": ["#"]
+          }
+        }
+      }
+    }
+  },
+  "additionalProperties": false
+}

package/dist/components/search-form/SearchForm.client.d.ts

@@ -0,0 +1,25 @@
+declare class SearchForm {
+    static identifier: string;
+    constructor(element: any);
+    lazyResults: WeakMap<object, any>;
+    resultsPerPage: number;
+    state: {
+        term: any;
+        page: any;
+        results: any;
+    };
+    loadEngine(): Promise<void>;
+    $searchInput: any;
+    $resultTemplate: any;
+    $subresultTemplate: any;
+    $paginationLinkTemplate: any;
+    $pagination: any;
+    $results: any;
+    $moreButton: any;
+    updateFromHash(): void;
+    renderResults(results: any): void;
+    onRadio(topic: any, fn: any): () => void;
+    on(element: any, type: any, fn: any): () => any;
+    $(selector: any, element?: any): any;
+}
+export { SearchForm as default };

package/dist/components/search-form/SearchForm.client.js

@@ -0,0 +1,228 @@
+import { define, Component } from '@kickstartds/core/lib/component';
+import { events } from '@kickstartds/core/lib/core';
+import { debounce } from '@kickstartds/core/lib/utils';
+
+const parser = new DOMParser();
+const renderPagination = ($pagination, $linkTemplate, totalPages, currentPageIndex, hrefPrefix) => {
+    const [$first, $prev, $pages, $next, $last] = $pagination.children;
+    $pages.textContent = "";
+    for (let i = 0; i < totalPages; i++) {
+        const $link = $linkTemplate.cloneNode(true);
+        $link.textContent = i + 1;
+        $link.href = hrefPrefix + (i + 1);
+        $link.setAttribute("aria-current", i === currentPageIndex ? "page" : "false");
+        $pages.appendChild($link);
+    }
+    $first.href = hrefPrefix + 1;
+    $prev.href = hrefPrefix + (currentPageIndex + 1 - 1);
+    $next.href = hrefPrefix + (currentPageIndex + 1 + 1);
+    $last.href = hrefPrefix + totalPages;
+    if (currentPageIndex === 0) {
+        $first.setAttribute("hidden", "");
+        $prev.setAttribute("hidden", "");
+    }
+    else {
+        $first.removeAttribute("hidden", "");
+        $prev.removeAttribute("hidden", "");
+    }
+    if (currentPageIndex === totalPages - 1) {
+        $next.setAttribute("hidden", "");
+        $last.setAttribute("hidden", "");
+    }
+    else {
+        $next.removeAttribute("hidden", "");
+        $last.removeAttribute("hidden", "");
+    }
+    $pagination.removeAttribute("hidden");
+};
+const renderMoreButton = ($button, totalResults) => {
+    $button.removeAttribute("hidden");
+    const $count = $button.children[0].children[0];
+    $count.textContent = totalResults;
+};
+const renderResult = (result, element) => {
+    const $ = element.querySelector.bind(element), $$ = element.querySelectorAll.bind(element);
+    if (result.title) {
+        const title = $("[data-result-title]");
+        if (title)
+            title.textContent = result.title;
+    }
+    if (result.excerpt) {
+        const doc = parser.parseFromString(result.excerpt, "text/html");
+        const excerpt = $("[data-result-excerpt]");
+        if (excerpt)
+            excerpt.replaceChildren(...doc.body.childNodes);
+    }
+    if (result.url) {
+        const url = $("[data-result-url]");
+        if (url)
+            url.textContent = result.url;
+        const links = $$("[data-result-link]");
+        for (const link of links) {
+            link.setAttribute("href", result.url);
+        }
+    }
+    if (result.image) {
+        const image = $("[data-result-image]");
+        if (image)
+            image.src = result.image;
+    }
+};
+const limitSubResults = (subResults, limit) => {
+    if (subResults.length <= limit)
+        return subResults;
+    const topUrls = [...subResults]
+        .sort((a, b) => b.locations.length - a.locations.length)
+        .slice(0, limit)
+        .map((r) => r.url);
+    return subResults.filter((r) => topUrls.includes(r.url));
+};
+const parseNumber = (value, fallback) => {
+    const number = Number(value);
+    return isNaN(number) ? fallback : number;
+};
+const debouncedSearch = debounce((term) => window._ks.radio.emit("dsa.search.search", { term }), 300);
+class SearchForm extends Component {
+    async loadEngine() {
+        throw new Error("please connect a search engine");
+    }
+    constructor(element) {
+        super(element);
+        this.lazyResults = new WeakMap();
+        this.resultsPerPage = 10;
+        this.state = {
+            term: undefined,
+            page: undefined,
+            results: undefined,
+        };
+        this.$searchInput = this.$(".dsa-search-bar__input");
+        this.$resultTemplate = this.$("[data-template=result]");
+        this.$subresultTemplate = this.$("[data-template=subresult]");
+        this.$paginationLinkTemplate = this.$("[data-template=pagination-link]");
+        this.$pagination = this.$(".dsa-pagination");
+        this.$results = this.$(".dsa-search-form__results");
+        this.$moreButton = this.$(".c-button");
+        const subResultsLimit = parseNumber(element.dataset.maxSubresults, 3);
+        this.resultsPerPage = parseNumber(element.dataset.resultsPerPage, 10);
+        this.on(this.$searchInput, "input", () => {
+            const term = this.$searchInput.value.trim();
+            if (term.length) {
+                debouncedSearch(term);
+            }
+            else {
+                window._ks.radio.emit("dsa.search.reset");
+            }
+        });
+        this.on(element, "submit", (event) => {
+            event.preventDefault();
+            const url = new URL(element.getAttribute("action") || "", window.location);
+            const formData = new FormData(element);
+            url.hash = new URLSearchParams(formData);
+            window.location.href = url;
+        });
+        this.on(element, "reset", (event) => {
+            window._ks.radio.emit("dsa.search.reset");
+        });
+        this.on(window, "hashchange", () => {
+            this.updateFromHash();
+        });
+        this.onRadio(events.beforeunveil, async (_, el) => {
+            if (this.lazyResults.has(el)) {
+                const lazyResult = this.lazyResults.get(el);
+                const result = await lazyResult();
+                renderResult(result, el);
+                const $subResults = this.$("[data-result-subresults]", el);
+                const subResults = limitSubResults(result.subResults, subResultsLimit);
+                for (const subResult of subResults) {
+                    const $subResultClone = this.$subresultTemplate.cloneNode(true);
+                    $subResultClone.setAttribute("href", subResult.url);
+                    renderResult(subResult, $subResultClone);
+                    $subResults.appendChild($subResultClone);
+                }
+            }
+        });
+        // init
+        this.loadEngine().then((search) => {
+            this.updateFromHash();
+            this.onRadio("dsa.search.reset", () => {
+                this.$results.textContent = "";
+                this.$pagination.setAttribute("hidden", "");
+                this.state = {};
+            });
+            this.onRadio("dsa.search.search", async (_, { term, page = 0 }) => {
+                window._ks.radio.emit("dsa.search.loading");
+                this.state.term = term;
+                this.state.page = page;
+                try {
+                    this.state.results = await search(term);
+                    window._ks.radio.emit("dsa.search.loaded");
+                }
+                catch (e) {
+                    console.error(e);
+                    window._ks.radio.emit("dsa.search.reset");
+                }
+            });
+            this.onRadio("dsa.search.loaded", () => {
+                if (this.state.results.length) {
+                    const startIndex = this.state.page * this.resultsPerPage;
+                    const endIndex = startIndex + this.resultsPerPage;
+                    const results = this.state.results.slice(startIndex, endIndex);
+                    this.renderResults(results);
+                    if (this.element.hasAttribute("action")) {
+                        renderMoreButton(this.$moreButton, this.state.results.length);
+                    }
+                    else {
+                        renderPagination(this.$pagination, this.$paginationLinkTemplate, Math.ceil(this.state.results.length / this.resultsPerPage), this.state.page, `#q=${this.state.term}&page=`);
+                    }
+                }
+            });
+            this.onRadio("dsa.search.goToPage", (_, page) => {
+                this.state.page = page;
+                window._ks.radio.emit("dsa.search.loaded");
+            });
+        });
+    }
+    updateFromHash() {
+        const params = new URLSearchParams(window.location.hash.slice(1));
+        if (params.has("q")) {
+            const term = params.get("q");
+            const page = params.has("page") ? Number(params.get("page")) - 1 : 0;
+            this.$searchInput.value = term;
+            if (term) {
+                if (term !== this.state.term) {
+                    window._ks.radio.emit("dsa.search.search", { term, page });
+                }
+                else if (page !== this.state.page) {
+                    window._ks.radio.emit("dsa.search.goToPage", page);
+                }
+            }
+        }
+    }
+    renderResults(results) {
+        this.$results.textContent = "";
+        for (const result of results) {
+            const $resultClone = this.$resultTemplate.cloneNode(true);
+            this.lazyResults.set($resultClone, result);
+            this.$results.appendChild($resultClone);
+        }
+    }
+    onRadio(topic, fn) {
+        const token = window._ks.radio.on(topic, fn);
+        const cleanUp = () => window._ks.radio.off(token);
+        this.onDisconnect(cleanUp);
+        return cleanUp;
+    }
+    on(element, type, fn) {
+        const cleanUp = () => element.removeventListener(type, fn);
+        element.addEventListener(type, fn);
+        this.onDisconnect(cleanUp);
+        return cleanUp;
+    }
+    $(selector, element = this.element) {
+        return element.querySelector(selector);
+    }
+}
+SearchForm.identifier = "dsa.search-form";
+define(SearchForm.identifier, SearchForm);
+
+export { SearchForm as default };

package/dist/components/search-form/SearchFormPagefind.client.d.ts

@@ -0,0 +1,5 @@
+import SearchForm from "./SearchForm.client.js";
+declare class SearchFormPagefind extends SearchForm {
+    loadEngine(): Promise<(term: any) => Promise<any>>;
+}
+export { SearchFormPagefind as default };

package/dist/components/search-form/SearchFormPagefind.client.js

@@ -0,0 +1,40 @@
+import { define } from '@kickstartds/core/lib/component';
+import SearchForm from './SearchForm.client.js';
+import '@kickstartds/core/lib/core';
+import '@kickstartds/core/lib/utils';
+
+const staticPageFindPath = "/pagefind/pagefind.js";
+const pagefindResult2searchResult = ({ sub_results, ...result }) => {
+    const hasRootSubResult = sub_results?.[0]?.url === (result.meta.url || result.url);
+    const subResults = hasRootSubResult
+        ? sub_results.slice(1)
+        : sub_results || [];
+    return {
+        title: result.meta.title,
+        url: result.meta.url || result.url,
+        excerpt: result.excerpt,
+        image: result.meta.image,
+        subResults: subResults.map((subResult) => ({
+            title: subResult.title,
+            url: subResult.url,
+            excerpt: subResult.excerpt,
+            locations: subResult.locations,
+        })),
+    };
+};
+class SearchFormPagefind extends SearchForm {
+    async loadEngine() {
+        const pagefind = await import(/* @vite-ignore */ staticPageFindPath);
+        await pagefind.init();
+        return async function search(term) {
+            const search = await pagefind.search(term);
+            if (search) {
+                return search.results.map((result) => () => result.data().then(pagefindResult2searchResult));
+            }
+        };
+    }
+}
+SearchFormPagefind.identifier = "dsa.search-form.pagefind";
+define(SearchFormPagefind.identifier, SearchFormPagefind);
+
+export { SearchFormPagefind as default };

package/dist/components/search-form/index.d.ts

@@ -0,0 +1,4 @@
+import { FC, HTMLAttributes } from "react";
+import { SearchFormProps } from "../../SearchFormProps-3d2c3462.js";
+declare const SearchForm: FC<SearchFormProps & HTMLAttributes<HTMLFormElement>>;
+export { SearchForm };

package/dist/components/search-form/index.js

@@ -0,0 +1,25 @@
+import "./search-form.css";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import classnames from 'classnames';
+import { Button } from '@kickstartds/base/lib/button';
+import { SearchBar } from '../search-bar/index.js';
+import { SearchResult } from '../search-result/index.js';
+import { SearchResultMatch } from '../search-result-match/index.js';
+import { PageLink, Pagination } from '../pagination/index.js';
+import './SearchForm.client.js';
+import 'react';
+import '@kickstartds/form/lib/text-field';
+import 'markdown-to-jsx';
+import '@kickstartds/base/lib/icon';
+import '@kickstartds/base/lib/link';
+import '../../helpers-12f48df8.js';
+import '@kickstartds/base/lib/rich-text';
+import '@kickstartds/base/lib/picture';
+import '@kickstartds/core/lib/container';
+import '@kickstartds/core/lib/component';
+import '@kickstartds/core/lib/core';
+import '@kickstartds/core/lib/utils';
+
+const SearchForm = ({ className, component = "dsa.search-form", result = {}, resultPerPage, moreButtonLabel = "View all results", ...props }) => (jsxs("form", { className: classnames("dsa-search-form", className), "ks-component": component, "data-max-subresults": result.maxSubresults, "data-results-per-page": resultPerPage, ...props, children: [jsx(SearchBar, { alternativeText: "", alternativeResult: "", hint: "" }), jsxs("div", { hidden: true, children: [jsx("li", { "data-template": "result", className: "lazyload", children: jsx(SearchResult, { showLink: result.showLink, imageColSize: result.imageColSize }) }), jsx(SearchResultMatch, { "data-template": "subresult" }), jsx(PageLink, { "data-template": "pagination-link" })] }), jsx("ol", { className: "dsa-search-form__results" }), jsxs("div", { className: "dsa-search-form__nav", children: [jsx(Pagination, { hidden: true }), jsx(Button, { variant: "primary", hidden: true, label: moreButtonLabel, type: "submit", renderLabel: (label) => (jsxs(Fragment, { children: [label, " (", jsx("span", {}), ")"] })) })] })] }));
+
+export { SearchForm };

package/dist/components/search-form/search-form.css

@@ -0,0 +1,10 @@
+.dsa-search-form__results {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ks-spacing-stack-l);
+  list-style: none;
+  padding: 0;
+}
+.dsa-search-form__nav {
+  text-align: center;
+}

package/dist/components/search-form/search-form.schema.dereffed.json

@@ -0,0 +1,49 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/search-form.schema.json",
+  "title": "Search Form",
+  "type": "object",
+  "properties": {
+    "component": {
+      "type": "string",
+      "description": "ks-component attribute",
+      "default": "dsa.search-form"
+    },
+    "result": {
+      "type": "object",
+      "properties": {
+        "maxSubresults": {
+          "type": "number",
+          "description": "Max number of subresults of a single search result"
+        },
+        "showLink": {
+          "title": "Show Link",
+          "type": "boolean",
+          "description": "Whether to display the link to the search result.",
+          "default": true
+        },
+        "imageColSize": {
+          "title": "Image Row Size",
+          "type": "string",
+          "description": "The reserved space of the image row.",
+          "default": "small",
+          "enum": [
+            "none",
+            "small",
+            "large"
+          ]
+        }
+      },
+      "additionalProperties": false
+    },
+    "resultPerPage": {
+      "type": "number",
+      "default": 10
+    },
+    "moreButtonLabel": {
+      "type": "string",
+      "default": "View all results"
+    }
+  },
+  "additionalProperties": false
+}

package/dist/components/search-form/search-form.schema.json

@@ -0,0 +1,38 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/search-form.schema.json",
+  "title": "Search Form",
+  "type": "object",
+  "properties": {
+    "component": {
+      "type": "string",
+      "description": "ks-component attribute",
+      "default": "dsa.search-form"
+    },
+    "result": {
+      "type": "object",
+      "properties": {
+        "maxSubresults": {
+          "type": "number",
+          "description": "Max number of subresults of a single search result"
+        },
+        "showLink": {
+          "$ref": "http://schema.mydesignsystem.com/search-result.schema.json#/properties/showLink"
+        },
+        "imageColSize": {
+          "$ref": "http://schema.mydesignsystem.com/search-result.schema.json#/properties/imageColSize"
+        }
+      },
+      "additionalProperties": false
+    },
+    "resultPerPage": {
+      "type": "number",
+      "default": 10
+    },
+    "moreButtonLabel": {
+      "type": "string",
+      "default": "View all results"
+    }
+  },
+  "additionalProperties": false
+}

package/dist/components/search-modal/RadioEmit.client.d.ts

@@ -0,0 +1,5 @@
+declare class RadioEmit {
+    static identifier: string;
+    constructor(element: any);
+}
+export { RadioEmit as default };

package/dist/components/search-modal/RadioEmit.client.js

@@ -0,0 +1,17 @@
+import { define, Component } from '@kickstartds/core/lib/component';
+
+class RadioEmit extends Component {
+    constructor(element) {
+        super(element);
+        const { topic, action = "click", value } = element.dataset;
+        const handler = () => window._ks.radio.emit(topic, value);
+        element.addEventListener(action, handler);
+        this.onDisconnect(() => {
+            element.removeEventListener(action, handler);
+        });
+    }
+}
+RadioEmit.identifier = "dsa.radio-emit";
+define(RadioEmit.identifier, RadioEmit);
+
+export { RadioEmit as default };

package/dist/components/search-modal/SearchModal.client.d.ts

@@ -0,0 +1,5 @@
+declare class SearchModal {
+    static identifier: string;
+    constructor(element: any);
+}
+export { SearchModal as default };

package/dist/components/search-modal/SearchModal.client.js

@@ -0,0 +1,31 @@
+import { define, Component } from '@kickstartds/core/lib/component';
+
+class SearchModal extends Component {
+    constructor(element) {
+        super(element);
+        const form = element.querySelector(".dsa-search-form");
+        const searchInput = element.querySelector(".dsa-search-bar__input");
+        const onBackdropClick = (event) => {
+            if (event.target === element)
+                window._ks.radio.emit("dsa.search-modal.close");
+        };
+        const openToken = window._ks.radio.on("dsa.search-modal.open", () => {
+            element.showModal();
+            searchInput.focus();
+        });
+        const closeToken = window._ks.radio.on("dsa.search-modal.close", () => {
+            form.reset();
+            element.close();
+        });
+        element.addEventListener("click", onBackdropClick);
+        this.onDisconnect(() => {
+            window._ks.radio.off(openToken);
+            window._ks.radio.off(closeToken);
+            element.removeEventListener("click", onBackdropClick);
+        });
+    }
+}
+SearchModal.identifier = "dsa.search-modal";
+define(SearchModal.identifier, SearchModal);
+
+export { SearchModal as default };

package/dist/components/search-modal/index.d.ts

@@ -0,0 +1,18 @@
+import { FC } from "react";
+/* eslint-disable */
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run json-schema-to-typescript to regenerate this file.
+ */
+import { SearchFormProps } from "../../SearchFormProps-3d2c3462.js";
+interface SearchModalProps {
+    headline: string;
+    closeAriaLabel: string;
+    /**
+     * Referenced component SearchFormProps
+     */
+    form?: SearchFormProps;
+}
+declare const SearchModal: FC<SearchModalProps>;
+export { SearchModal };

package/dist/components/search-modal/index.js

@@ -0,0 +1,39 @@
+import "./search-modal.css";
+import { jsx } from 'react/jsx-runtime';
+import { Section } from '../section/index.js';
+import { Button } from '../button/index.js';
+import { SearchForm } from '../search-form/index.js';
+import './SearchModal.client.js';
+import 'react';
+import 'classnames';
+import '@kickstartds/core/lib/react';
+import '@kickstartds/base/lib/section';
+import '../section/js/Section.client.js';
+import '@kickstartds/core/lib/component';
+import '../../helpers-12f48df8.js';
+import '@kickstartds/base/lib/button';
+import '../search-bar/index.js';
+import '@kickstartds/form/lib/text-field';
+import 'markdown-to-jsx';
+import '@kickstartds/base/lib/icon';
+import '@kickstartds/base/lib/link';
+import '../search-result/index.js';
+import '@kickstartds/base/lib/rich-text';
+import '@kickstartds/base/lib/picture';
+import '@kickstartds/core/lib/container';
+import '../search-result-match/index.js';
+import '../pagination/index.js';
+import '../search-form/SearchForm.client.js';
+import '@kickstartds/core/lib/core';
+import '@kickstartds/core/lib/utils';
+
+const SearchModal = ({ headline = "Search", closeAriaLabel = "close", form: formProps = {}, }) => (jsx("dialog", { "ks-component": "dsa.search-modal", className: "dsa-search-modal", children: jsx(Section, { headline: {
+            text: headline,
+            sub: closeAriaLabel,
+            // @ts-expect-error
+            renderSubheadline(sub) {
+                return (jsx(Button, { className: "dsa-search-modal__close", "aria-label": sub, label: "", icon: "close", size: "small", "ks-component": "dsa.radio-emit", "data-topic": "dsa.search-modal.close" }));
+            },
+        }, spaceBefore: "small", spaceAfter: "small", children: jsx(SearchForm, { ...formProps }) }) }));
+
+export { SearchModal };