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

package/dist/components/contact/index.js

@@ -8,7 +8,7 @@ import { Link } from '@kickstartds/base/lib/link';
 import { Icon } from '@kickstartds/base/lib/icon';
 import { RichText } from '@kickstartds/base/lib/rich-text';
 import { Container } from '@kickstartds/core/lib/container';
-import { d as deepMergeDefaults } from '../../helpers-84d80d46.js';
+import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
 
 const defaults = {
     "image": {
@@ -18,7 +18,7 @@ const defaults = {
     "links": []
 };
 
-const ContactContextDefault = forwardRef(({ title, subtitle, image, links, copy, className, ...props }, ref) => (jsx(Container, { name: "contact", children: jsxs("address", { className: classnames("dsa-contact", image?.aspectRatio && `dsa-contact--image-${image?.aspectRatio}`, image?.fullWidth && `dsa-contact--image-full-width`, className), ref: ref, ...props, children: [image && image.src ? (jsx("div", { className: "dsa-contact__image-wrap", children: jsx(Picture, { src: image?.src, alt: image?.alt, className: "dsa-contact__image" }) })) : (""), jsxs("div", { className: "dsa-contact__body", children: [title && (jsxs("div", { className: "dsa-contact__header", children: [jsx("span", { className: "dsa-contact__title", children: title }), jsx("span", { className: "dsa-contact__subtitle", children: subtitle })] })), copy && jsx(RichText, { text: copy, className: "dsa-contact__copy" }), links && links.length ? (jsx("ul", { className: "dsa-contact__links", children: links.map(({ icon, href, label, newTab }, i) => (jsx("li", { children: jsxs(Link, { className: "dsa-contact__link", href: href, ...(newTab ? { target: "_blank", rel: "noopener" } : {}), children: [jsx(Icon, { icon: icon }), label] }) }, i))) })) : ("")] })] }) })));
+const ContactContextDefault = forwardRef(({ title, subtitle, image, links, copy, className, ...props }, ref) => (jsx(Container, { name: "contact", children: jsxs("address", { className: classnames("dsa-contact", image?.aspectRatio && `dsa-contact--image-${image?.aspectRatio}`, image?.fullWidth && `dsa-contact--image-full-width`, className), ref: ref, ...props, children: [image && image.src && (jsx("div", { className: "dsa-contact__image-wrap", children: jsx(Picture, { src: image?.src, alt: image?.alt, className: "dsa-contact__image" }) })), jsxs("div", { className: "dsa-contact__body", children: [title && (jsxs("div", { className: "dsa-contact__header", children: [jsx("span", { className: "dsa-contact__title", children: title }), jsx("span", { className: "dsa-contact__subtitle", children: subtitle })] })), copy && jsx(RichText, { text: copy, className: "dsa-contact__copy" }), links && links.length && (jsx("ul", { className: "dsa-contact__links", children: links.map(({ icon, url, label, ariaLabel, newTab }, i) => (jsx("li", { children: jsxs(Link, { className: "dsa-contact__link", "aria-label": ariaLabel, href: url, ...(newTab && { target: "_blank", rel: "noopener" }), children: [jsx(Icon, { role: "presentation", focusable: "false", "aria-hidden": true, icon: icon }), label] }) }, i))) }))] })] }) })));
 const ContactContext = createContext(ContactContextDefault);
 const Contact = forwardRef((props, ref) => {
     const Component = useContext(ContactContext);

package/dist/components/content-nav/content-nav.css

@@ -0,0 +1,122 @@
+.dsa-content-nav {
+  --dsa-content-nav--padding: var(--ks-spacing-inset-m);
+  --dsa-content-nav--background-color: var(--ks-background-color-card);
+  --dsa-content-nav--gap: var(--ks-spacing-stack-m);
+  --dsa-content-nav__topic--font: var(--dsa-topic--font);
+  --dsa-content-nav__topic--font-weight: var(--dsa-topic--font-weight);
+  --dsa-content-nav__topic--color: var(--dsa-topic--color);
+  --dsa-content-nav__image--aspect-ratio: 16 / 9;
+  --dsa-content-nav__image--border-radius: var(--ks-border-radius-card);
+  --dsa-content-nav__links--gap: var(--ks-spacing-stack-xs);
+  --dsa-content-nav__link--color: var(--ks-text-color-interface-interactive);
+  --dsa-content-nav__link--color_hover: var(--ks-text-color-interface-interactive-hover);
+  --dsa-content-nav__link--icon-size: 1.25em;
+  --dsa-content-nav__toggle-more--font: var(--ks-font-interface-m);
+  --dsa-content-nav__toggle-more--color: var(--dsa-link--color);
+  --dsa-content-nav__toggle-more--margin-top: var(--ks-spacing-stack-xs);
+}
+
+.dsa-content-nav {
+  border-radius: var(--ks-border-radius-card);
+  padding: var(--dsa-content-nav--padding, var(--ks-spacing-inset-m));
+  display: flex;
+  flex-wrap: wrap;
+  background-color: var(--dsa-content-nav--background-color, var(--ks-background-color-card));
+  gap: var(--dsa-content-nav--gap, var(--ks-spacing-stack-m));
+}
+.dsa-content-nav__topic {
+  font: var(--dsa-content-nav__topic--font, var(--dsa-topic--font));
+  color: var(--dsa-content-nav__topic--color, var(--dsa-topic--color));
+  font-weight: var(--dsa-content-nav__topic--font-weight, var(--dsa-topic--font-weight));
+}
+.dsa-content-nav__image {
+  flex-basis: var(--dsa-content-nav__image--width, var(--dsa-tile--width_largest));
+}
+.dsa-content-nav__image img {
+  aspect-ratio: var(--dsa-content-nav__image--aspect-ratio, 16/9);
+  object-fit: cover;
+  border-radius: var(--dsa-content-nav__image--border-radius, var(--ks-border-radius-card));
+}
+.dsa-content-nav__links {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dsa-content-nav__links--gap, var(--ks-spacing-stack-xs));
+}
+.dsa-content-nav__links--initial {
+  margin-top: var(--dsa-content-nav__links--margin-top, var(--ks-spacing-stack-s));
+}
+.dsa-content-nav__links--more {
+  margin-top: var(--dsa-content-nav__links--gap, var(--ks-spacing-stack-xs));
+}
+.dsa-content-nav__link {
+  --g-link--color: var(--dsa-content-nav__link--color, var(--ks-text-color-interface-interactive));
+  --g-link--color-hover: var(--dsa-content-nav__link--color_hover, var(--ks-text-color-interface-interactive-hover));
+  font: var(--ks-font-interface-m);
+  width: fit-content;
+  display: flex;
+  align-items: center;
+}
+.dsa-content-nav__link .icon {
+  width: var(--dsa-content-nav__link--icon-size, 1.25em);
+  height: var(--dsa-content-nav__link--icon-size, 1.25em);
+}
+.dsa-content-nav__link--active {
+  font-weight: var(--ks-font-weight-bold);
+  color: var(--ks-color-text-active);
+}
+.dsa-content-nav__more-content {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: var(--ks-transition-collapse);
+}
+.dsa-content-nav__more-content .dsa-content-nav__links {
+  overflow: hidden;
+}
+.dsa-content-nav__more {
+  display: flex;
+  flex-direction: column;
+}
+.dsa-content-nav__more[open] .dsa-content-nav__more-content {
+  grid-template-rows: 1fr;
+}
+.dsa-content-nav__more[open] .dsa-content-nav__toggle-label--more {
+  display: none;
+}
+.dsa-content-nav__more[open] .dsa-content-nav__toggle-label--less {
+  display: block;
+}
+.dsa-content-nav__more[open] .dsa-content-nav__toggle-more .icon {
+  transform: rotate(180deg);
+}
+.dsa-content-nav__toggle-more {
+  width: fit-content;
+  order: 2;
+  color: var(--dsa-content-nav__toggle-more--color, var(--dsa-link--color));
+  cursor: pointer;
+  font: var(--dsa-content-nav__toggle-more--font, var(--ks-font-interface-m));
+  display: flex;
+  align-items: center;
+  gap: calc(var(--ks-spacing-xxs) * 0.25);
+  transition: var(--ks-transition-hover);
+  margin-top: var(--dsa-content-nav__toggle-more--margin-top, var(--ks-spacing-stack-xs));
+}
+.dsa-content-nav__toggle-more:hover {
+  color: var(--dsa-link--color_hover);
+}
+.dsa-content-nav__toggle-more .icon {
+  transition: var(--ks-transition-collapse);
+  transform: translateY(0.05em);
+  font-size: inherit;
+  color: inherit;
+  width: 1.25em;
+  height: 1.25em;
+}
+.dsa-content-nav__toggle-label--more {
+  display: block;
+}
+.dsa-content-nav__toggle-label--less {
+  display: none;
+}
+.dsa-content-nav .c-button {
+  width: fit-content;
+}

package/dist/components/content-nav/content-nav.schema.dereffed.json

@@ -0,0 +1,58 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/content-nav.schema.json",
+  "title": "Content Nav",
+  "type": "object",
+  "properties": {
+    "image": {
+      "type": "object",
+      "properties": {
+        "src": {
+          "type": "string",
+          "format": "uri",
+          "description": "URL of the image to display in the content nav."
+        },
+        "alt": {
+          "type": "string",
+          "description": "Alternative text for the image."
+        }
+      },
+      "required": [
+        "src"
+      ],
+      "additionalProperties": false
+    },
+    "topic": {
+      "type": "string",
+      "description": "The topic of the content being navigated."
+    },
+    "links": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "label": {
+            "type": "string",
+            "description": "The text label for the link."
+          },
+          "url": {
+            "type": "string",
+            "format": "uri",
+            "description": "The URL the link points to."
+          }
+        },
+        "required": [
+          "label",
+          "url"
+        ],
+        "additionalProperties": false
+      }
+    },
+    "initiallyShown": {
+      "type": "number",
+      "default": 4,
+      "description": "Determines how many links are initially shown in the content nav. If there are more links, a 'Show More' button will be displayed."
+    }
+  },
+  "additionalProperties": false
+}

package/dist/components/content-nav/content-nav.schema.json

@@ -0,0 +1,52 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "http://schema.mydesignsystem.com/content-nav.schema.json",
+  "title": "Content Nav",
+  "type": "object",
+  "properties": {
+    "image": {
+      "type": "object",
+      "properties": {
+        "src": {
+          "type": "string",
+          "format": "uri",
+          "description": "URL of the image to display in the content nav."
+        },
+        "alt": {
+          "type": "string",
+          "description": "Alternative text for the image."
+        }
+      },
+      "required": ["src"]
+    },
+    "topic": {
+      "type": "string",
+      "description": "The topic of the content being navigated."
+    },
+    "links": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "label": {
+            "type": "string",
+            "description": "The text label for the link."
+          },
+          "url": {
+            "type": "string",
+            "format": "uri",
+            "description": "The URL the link points to."
+          }
+        },
+        "required": ["label", "url"],
+        "additionalProperties": false
+      }
+    },
+    "initiallyShown": {
+      "type": "number",
+      "default": 4,
+      "description": "Determines how many links are initially shown in the content nav. If there are more links, a 'Show More' button will be displayed."
+    }
+  },
+  "additionalProperties": false
+}

package/dist/components/content-nav/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ContentNavProps } from "../../ContentNavProps-0e282a9f.js";
+declare const ContentNavContextDefault: import("react").ForwardRefExoticComponent<ContentNavProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const ContentNavContext: import("react").Context<import("react").ForwardRefExoticComponent<ContentNavProps & import("react").RefAttributes<HTMLDivElement>>>;
+declare const ContentNav: import("react").ForwardRefExoticComponent<ContentNavProps & import("react").RefAttributes<HTMLDivElement>>;
+export type { ContentNavProps };
+export { ContentNavContextDefault, ContentNavContext, ContentNav };

package/dist/components/content-nav/index.js

@@ -0,0 +1,21 @@
+import "./content-nav.css";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, createContext, useContext } from 'react';
+import { Icon } from '@kickstartds/base/lib/icon';
+import { d as deepMergeDefaults } from '../../helpers-12f48df8.js';
+
+const defaults = {
+    "image": {},
+    "links": [],
+    "initiallyShown": 4
+};
+
+const ContentNavContextDefault = forwardRef(({ image, links, topic, initiallyShown }, ref) => (jsxs("div", { className: "dsa-content-nav", ref: ref, children: [image && image?.src && (jsx("div", { className: "dsa-content-nav__image", children: jsx("img", { src: image.src, alt: image.alt }) })), jsxs("div", { className: "dsa-content-nav__content", children: [topic && (jsx("div", { className: "dsa-content-nav__topic", children: jsx("span", { children: topic }) })), jsx("div", { className: "dsa-content-nav__links dsa-content-nav__links--initial", children: links.slice(0, initiallyShown).map((link, index) => (jsxs("a", { href: link.url, className: "dsa-content-nav__link", children: [link.label, jsx(Icon, { icon: "chevron-right" })] }, index))) }), links.length > initiallyShown && (jsxs("details", { className: "dsa-content-nav__more", children: [jsxs("summary", { className: "dsa-content-nav__toggle-more", children: [jsx("span", { className: "dsa-content-nav__toggle-label--more", children: "Show more" }), jsx("span", { className: "dsa-content-nav__toggle-label--less", children: "Show less" }), jsx(Icon, { "aria-hidden": true, icon: "chevron-down" })] }), jsx("div", { className: "dsa-content-nav__more-content", children: jsx("div", { className: "dsa-content-nav__links dsa-content-nav__links--more", children: links.slice(initiallyShown).map((link, index) => (jsxs("a", { href: link.url, className: "dsa-content-nav__link", children: [link.label, jsx(Icon, { icon: "chevron-right" })] }, index))) }) })] }))] })] })));
+const ContentNavContext = createContext(ContentNavContextDefault);
+const ContentNav = forwardRef((props, ref) => {
+    const Component = useContext(ContentNavContext);
+    return jsx(Component, { ...deepMergeDefaults(defaults, props), ref: ref });
+});
+ContentNav.displayName = "ContentNav";
+
+export { ContentNav, ContentNavContext, ContentNavContextDefault };

package/dist/components/cookie-consent/C15t.client.d.ts

@@ -0,0 +1,5 @@
+import CookieConsent from "./CookieConsent.client.js";
+declare class CookieConsentC15t extends CookieConsent {
+    static store: any;
+}
+export { CookieConsentC15t as default };

package/dist/components/cookie-consent/C15t.client.js

@@ -0,0 +1,123 @@
+import { define } from '@kickstartds/core/lib/component';
+import 'c15t';
+import CookieConsent from './CookieConsent.client.js';
+
+const customTranslations = {
+    de: {
+        accept: "Akzeptieren",
+        reject: "Ablehnen",
+        required: "Immer aktiv",
+        settings: "Cookies verwalten",
+    },
+    en: {
+        accept: "Accept",
+        reject: "Reject",
+        required: "Always Active",
+        settings: "Cookie Preferences",
+    },
+};
+const translate = (elements, translationConfig) => {
+    const defaultLanguage = translationConfig.defaultLanguage;
+    const translations = translationConfig.translations[defaultLanguage];
+    const customTranslation = customTranslations[defaultLanguage] || customTranslations.en;
+    // Notice
+    elements.notice.title.textContent = translations.cookieBanner.title;
+    elements.notice.description.textContent =
+        translations.cookieBanner.description;
+    elements.notice.customizeBtn.textContent = translations.common.customize;
+    elements.notice.rejectAllBtn.textContent = translations.common.rejectAll;
+    elements.notice.acceptAllBtn.textContent = translations.common.acceptAll;
+    // Dialog
+    elements.dialog.title.textContent = translations.consentManagerDialog.title;
+    elements.dialog.description.textContent =
+        translations.consentManagerDialog.description;
+    elements.dialog.activateAllBtn.textContent = translations.common.acceptAll;
+    elements.dialog.deactivateAllBtn.textContent = translations.common.rejectAll;
+    elements.dialog.saveBtn.textContent = translations.common.save;
+    for (const option of elements.dialog.form.querySelectorAll(".dsa-cookie-consent-dialogue__option")) {
+        const type = option.dataset.consentType;
+        const translation = translations.consentTypes[type];
+        if (translation) {
+            option.querySelector(".dsa-headline__inner").textContent =
+                translation.title;
+            option.querySelector(".dsa-cookie-consent-dialogue__option-description").textContent = translation.description;
+        }
+        const requiredLabel = option.querySelector(".dsa-cookie-consent-dialogue__label");
+        if (requiredLabel)
+            requiredLabel.textContent = customTranslation.required;
+    }
+    for (const element of elements.dialog.form.elements) {
+        if (element.type === "radio") {
+            element.nextElementSibling.nextElementSibling.textContent =
+                customTranslation[element.value];
+        }
+    }
+    // settings
+    elements.settings.button.firstElementChild.textContent =
+        customTranslation.settings;
+};
+class CookieConsentC15t extends CookieConsent {
+    constructor(element) {
+        super(element);
+        const store = this.constructor.store;
+        const elements = this.elements;
+        // get gdprTypes from radio buttons
+        const initialState = store.getState();
+        const gdprTypes = [];
+        for (const element of elements.dialog.form.elements) {
+            if (element.type === "radio" && element.value === "accept") {
+                gdprTypes.push(element.name);
+            }
+        }
+        initialState.setGdprTypes(gdprTypes);
+        const update = (state) => {
+            // show/hide cookie banner or settings button
+            this.showNotice = state.showPopup;
+            // update dialog form
+            for (const type in state.consents) {
+                const radios = elements.dialog.form.elements[type];
+                const accepted = state.consents[type];
+                if (radios) {
+                    for (const radio of radios) {
+                        radio.defaultChecked =
+                            radio.value === "accept" ? accepted : !accepted;
+                    }
+                }
+            }
+        };
+        const unsub = store.subscribe(update);
+        translate(this.elements, initialState.translationConfig);
+        update(initialState);
+        const acceptCustom = () => {
+            const state = store.getState();
+            const consentTypes = state.getDisplayedConsents();
+            for (const type of consentTypes) {
+                if (!type.disabled) {
+                    state.setConsent(type.name, elements.dialog.form.elements[type.name].value === "accept");
+                }
+            }
+            state.saveConsents("custom");
+        };
+        const acceptAll = () => {
+            const state = store.getState();
+            state.saveConsents("all");
+        };
+        const rejectAll = () => {
+            const state = store.getState();
+            state.saveConsents("necessary");
+        };
+        elements.dialog.form.addEventListener("submit", acceptCustom);
+        elements.notice.acceptAllBtn.addEventListener("click", acceptAll);
+        elements.notice.rejectAllBtn.addEventListener("click", rejectAll);
+        this.onDisconnect(() => {
+            unsub();
+            elements.dialog.form.removeEventListener("submit", acceptCustom);
+            elements.notice.acceptAllBtn.removeEventListener("click", acceptAll);
+            elements.notice.rejectAllBtn.removeEventListener("click", rejectAll);
+        });
+    }
+}
+CookieConsentC15t.identifier = "dsa.cookie-consent.c15t";
+define(CookieConsentC15t.identifier, CookieConsentC15t);
+
+export { CookieConsentC15t as default };

package/dist/components/cookie-consent/CookieConsent.client.d.ts

@@ -0,0 +1,29 @@
+declare class CookieConsent {
+    static identifier: string;
+    constructor(element: any);
+    elements: {
+        notice: {
+            wrapper: any;
+            title: any;
+            description: any;
+            customizeBtn: any;
+            rejectAllBtn: any;
+            acceptAllBtn: any;
+        };
+        dialog: {
+            wrapper: any;
+            title: any;
+            description: any;
+            closeBtn: any;
+            form: any;
+            activateAllBtn: any;
+            deactivateAllBtn: any;
+            saveBtn: any;
+        };
+        settings: {
+            button: any;
+        };
+    };
+    set showNotice(arg: any);
+}
+export { CookieConsent as default };

package/dist/components/cookie-consent/CookieConsent.client.js

@@ -0,0 +1,84 @@
+import { define, Component } from '@kickstartds/core/lib/component';
+
+class CookieConsent extends Component {
+    constructor(element) {
+        super(element);
+        const $ = element.querySelector.bind(element);
+        const elements = (this.elements = {
+            notice: {
+                wrapper: $(".dsa-cookie-consent-notice"),
+                title: $(".dsa-cookie-consent-notice__title .dsa-headline__inner"),
+                description: $(".dsa-cookie-consent-notice__description"),
+                customizeBtn: $(".dsa-cookie-consent-notice__button--customize"),
+                rejectAllBtn: $(".dsa-cookie-consent-notice__button--reject"),
+                acceptAllBtn: $(".dsa-cookie-consent-notice__button--accept"),
+            },
+            dialog: {
+                wrapper: $(".dsa-cookie-consent-dialogue"),
+                title: $(".dsa-cookie-consent-dialogue__title .dsa-headline__inner"),
+                description: $(".dsa-cookie-consent-dialogue__description"),
+                closeBtn: $(".dsa-cookie-consent-dialogue__close"),
+                form: $(".dsa-cookie-consent-dialogue__form"),
+                activateAllBtn: $(".dsa-cookie-consent-dialogue__button--activate-all"),
+                deactivateAllBtn: $(".dsa-cookie-consent-dialogue__button--deactivate-all"),
+                saveBtn: $(".dsa-cookie-consent-dialogue__button--save"),
+            },
+            settings: {
+                button: $(".dsa-cookie-consent-revisit"),
+            },
+        });
+        const showDialog = () => {
+            elements.dialog.wrapper.showModal();
+        };
+        const closeDialog = () => {
+            elements.dialog.wrapper.close();
+        };
+        const closeDialogAndReset = () => {
+            closeDialog();
+            elements.dialog.form.reset();
+        };
+        const onBackdropClick = (event) => {
+            if (event.target === elements.dialog.wrapper)
+                closeDialogAndReset();
+        };
+        const activateAll = () => {
+            for (const element of elements.dialog.form.elements) {
+                if (element.value === "accept") {
+                    element.checked = true;
+                }
+            }
+        };
+        const deactivateAll = () => {
+            for (const element of elements.dialog.form.elements) {
+                if (element.value === "reject") {
+                    element.checked = true;
+                }
+            }
+        };
+        elements.notice.customizeBtn.addEventListener("click", showDialog);
+        elements.settings.button.addEventListener("click", showDialog);
+        elements.dialog.closeBtn.addEventListener("click", closeDialogAndReset);
+        elements.dialog.activateAllBtn.addEventListener("click", activateAll);
+        elements.dialog.deactivateAllBtn.addEventListener("click", deactivateAll);
+        elements.dialog.wrapper.addEventListener("click", onBackdropClick);
+        window._ks.radio.on(CookieConsent.identifier + ".showNotice", (_, value) => {
+            this.showNotice = value;
+        });
+        this.onDisconnect(() => {
+            elements.notice.customizeBtn.removeEventListener("click", showDialog);
+            elements.settings.button.removeEventListener("click", showDialog);
+            elements.dialog.closeBtn.removeEventListener("click", closeDialogAndReset);
+            elements.dialog.activateAllBtn.removeEventListener("click", activateAll);
+            elements.dialog.deactivateAllBtn.removeEventListener("click", deactivateAll);
+            elements.dialog.wrapper.removeEventListener("click", onBackdropClick);
+        });
+    }
+    set showNotice(value) {
+        this.elements.notice.wrapper.hidden = !value;
+        this.elements.settings.button.hidden = value;
+    }
+}
+CookieConsent.identifier = "dsa.cookie-consent";
+define(CookieConsent.identifier, CookieConsent);
+
+export { CookieConsent as default };