@lab-anssi/ui-kit 1.61.3 → 1.62.0

package/dist/composants/vitrines-produits/briques/RejoindreLaCommunaute.svelte.d.ts

@@ -0,0 +1,36 @@
+import type { Action, Image } from "../../../types";
+interface Props {
+    titre?: string;
+    raisons: string[];
+    action?: Action | undefined;
+    illustration: Image;
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const RejoindreLaCommunaute: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<Props, {
+    titre: {};
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    titre: {};
+    default: {};
+}, {}, "">;
+type RejoindreLaCommunaute = InstanceType<typeof RejoindreLaCommunaute>;
+export default RejoindreLaCommunaute;

package/dist/composants/vitrines-produits/briques/temoignages/IconeTemoignage.svelte

@@ -0,0 +1,18 @@
+<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <g>
+      <path
+        d="M13.3327 4.625H18.666C21.495 4.625 24.2081 5.74881 26.2085 7.74919C28.2089 9.74958 29.3327 12.4627 29.3327 15.2917C29.3327 18.1206 28.2089 20.8338 26.2085 22.8341C24.2081 24.8345 21.495 25.9583 18.666 25.9583V30.625C11.9993 27.9583 2.66602 23.9583 2.66602 15.2917C2.66602 12.4627 3.78982 9.74958 5.79021 7.74919C7.7906 5.74881 10.5037 4.625 13.3327 4.625ZM15.9993 23.2917H18.666C19.7166 23.2917 20.7569 23.0847 21.7275 22.6827C22.6981 22.2807 23.58 21.6914 24.3229 20.9485C25.0657 20.2057 25.655 19.3237 26.0571 18.3531C26.4591 17.3825 26.666 16.3422 26.666 15.2917C26.666 14.2411 26.4591 13.2008 26.0571 12.2302C25.655 11.2596 25.0657 10.3777 24.3229 9.63481C23.58 8.89194 22.6981 8.30267 21.7275 7.90063C20.7569 7.49859 19.7166 7.29167 18.666 7.29167H13.3327C11.211 7.29167 9.17612 8.13452 7.67583 9.63481C6.17554 11.1351 5.33268 13.1699 5.33268 15.2917C5.33268 20.105 8.61535 23.2463 15.9993 26.5983V23.2917Z"
+        fill="#FFFFFF"
+      />
+      <path
+        d="M15.5993 19.9583L12.7357 15.2917L15.5993 10.625H12.5084L9.59935 15.2917L12.5084 19.9583H15.5993ZM21.5993 19.9583L18.7357 15.2917L21.5993 10.625H18.5084L15.5993 15.2917L18.5084 19.9583H21.5993Z"
+        fill="#FFFFFF"
+      />
+    </g>
+  </g>
+</svg>
+
+<style>svg path {
+  fill: var(--brique-temoignages-icone-couleur);
+}</style>

package/dist/composants/vitrines-produits/briques/temoignages/IconeTemoignage.svelte.d.ts

@@ -0,0 +1,26 @@
+export default IconeTemoignage;
+type IconeTemoignage = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const IconeTemoignage: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/composants/vitrines-produits/briques/temoignages/Temoignages.svelte

@@ -0,0 +1,168 @@
+<svelte:options
+  customElement={{
+    tag: "lab-anssi-temoignages",
+    props: {
+      titre: { reflect: false, type: "String", attribute: "titre" },
+      temoignages: { reflect: false, type: "Array", attribute: "temoignages" },
+      size: { reflect: false, type: "String", attribute: "size" },
+    },
+  }}
+/>
+
+<script lang="ts">import { setThemeable } from "../../../../utilitaires";
+import Brique from "../Brique.svelte";
+import "../../../../dsfr/DsfrButton.svelte";
+import "../../../../dsfr/DsfrQuote.svelte";
+import "../../../carrousel-tuiles/IconeFlecheGauche.svelte";
+import "../../../carrousel-tuiles/IconeFlecheDroite.svelte";
+setThemeable($host());
+let { titre = "Les avis de nos utilisateurs", temoignages = [], size = "xl" } = $props();
+let elementCarrousel = $state();
+const scrollVers = (direction) => {
+	if (!elementCarrousel) return;
+	const declageCourant = elementCarrousel.scrollLeft;
+	const largeurCarte = elementCarrousel.children[0].clientWidth;
+	elementCarrousel.scrollLeft = declageCourant + largeurCarte * direction;
+};
+</script>
+
+<Brique variation="transparent">
+  <div class="brique-temoignages">
+    {#if titre}
+      <h3>{titre}</h3>
+    {/if}
+    <div class="carrousel-temoignages">
+      <div class="conteneur-carrousel" bind:this={elementCarrousel}>
+        {#each temoignages as temoignage, idx (idx)}
+          <div class="temoignage">
+            <dsfr-quote
+              text={temoignage.citation}
+              has-author={!!temoignage.auteur}
+              author={temoignage.auteur}
+              has-details={true}
+              sources={[temoignage.source]}
+              {size}
+            ></dsfr-quote>
+          </div>
+        {/each}
+      </div>
+      {#if temoignages.length > 1}
+        <div class="conteneur-actions" class:deux-ou-moins={temoignages.length <= 2}>
+          <dsfr-button
+            label="Précédent"
+            kind="tertiary-no-outline"
+            has-icon
+            icon="arrow-left-line"
+            role="button"
+            tabindex="0"
+            onclick={() => scrollVers(Direction.GAUCHE)}
+            onkeydown={(event: KeyboardEvent) => {
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                scrollVers(Direction.GAUCHE);
+              }
+            }}
+          ></dsfr-button>
+          <dsfr-button
+            label="Suivant"
+            kind="tertiary-no-outline"
+            has-icon
+            icon="arrow-right-line"
+            icon-place="right"
+            role="button"
+            tabindex="0"
+            onclick={() => scrollVers(Direction.DROITE)}
+            onkeydown={(event: KeyboardEvent) => {
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                scrollVers(Direction.DROITE);
+              }
+            }}
+          ></dsfr-button>
+        </div>
+      {/if}
+    </div>
+  </div>
+</Brique>
+
+<style>.brique-temoignages h3 {
+  color: var(--brique-temoignages-titre-couleur);
+  font-size: 1.75rem;
+  font-weight: 700;
+  line-height: 2.25rem;
+}
+@media (min-width: 576px) {
+  .brique-temoignages h3 {
+    font-size: 2rem;
+    line-height: 2.5rem;
+  }
+}
+.brique-temoignages .carrousel-temoignages {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+.brique-temoignages .carrousel-temoignages .conteneur-carrousel {
+  --gap-des-elements: 24px;
+  display: flex;
+  gap: var(--gap-des-elements);
+  overflow-x: auto;
+  scroll-behavior: smooth;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  -webkit-overflow-scrolling: touch;
+  padding-bottom: 24px;
+}
+.brique-temoignages .carrousel-temoignages .temoignage {
+  width: 100%;
+  flex-shrink: 0;
+  scroll-snap-align: start;
+}
+@media (min-width: 768px) {
+  .brique-temoignages .carrousel-temoignages .temoignage {
+    width: calc(50% - var(--gap-des-elements));
+  }
+}
+.brique-temoignages .carrousel-temoignages .conteneur-actions {
+  display: flex;
+  margin-top: 32px;
+  justify-content: center;
+  gap: 24px;
+}
+@media (min-width: 768px) {
+  .brique-temoignages .carrousel-temoignages .conteneur-actions.deux-ou-moins {
+    display: none;
+  }
+}
+.brique-temoignages .carrousel-temoignages .conteneur-actions button {
+  position: relative;
+  background: none;
+  border: none;
+  color: var(--brique-carrousel-bouton-action-texte-couleur);
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-family: inherit;
+}
+.brique-temoignages .carrousel-temoignages .conteneur-actions button:hover:after {
+  bottom: -1px;
+  height: 2px;
+}
+.brique-temoignages .carrousel-temoignages .conteneur-actions button:after {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  content: "";
+  width: 100%;
+  height: 1px;
+  background: var(--brique-carrousel-bouton-action-texte-couleur);
+}
+.brique-temoignages .carrousel-temoignages .conteneur-actions .icone {
+  display: flex;
+  align-items: center;
+}</style>

package/dist/composants/vitrines-produits/briques/temoignages/Temoignages.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Temoignage } from "../../../../types";
+import "../../../../dsfr/DsfrButton.svelte";
+import "../../../../dsfr/DsfrQuote.svelte";
+import "../../../carrousel-tuiles/IconeFlecheGauche.svelte";
+import "../../../carrousel-tuiles/IconeFlecheDroite.svelte";
+interface Props {
+    titre?: string;
+    temoignages?: Temoignage[];
+    size?: "md" | "lg" | "xl";
+}
+declare const Temoignages: import("svelte").Component<Props, {}, "">;
+type Temoignages = ReturnType<typeof Temoignages>;
+export default Temoignages;

package/dist/directives/actions.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { Action } from "svelte/action";
+export declare const clickOutside: Action<HTMLElement, () => void>;
+export declare const pressEscape: Action<HTMLElement, () => void>;
+export declare const stopPropagation: Action<HTMLElement>;
+/**
+ * Action Svelte qui restreint le focus à l'intérieur d'un élément.
+ * Empêche la navigation au clavier (Tab) de sortir du conteneur en boucle le focus
+ * entre le premier et le dernier élément focusable.
+ *
+ * @param element - L'élément conteneur dans lequel piéger le focus.
+ */
+export declare const trapFocus: Action<HTMLElement>;
+/**
+ * Action Svelte : crée par programmation un élément <slot name="..."> à l'intérieur de l'élément.
+ *
+ * Cette action contourne la restriction de Svelte concernant les noms de slot dynamiques.
+ * Ne fait rien si slotName est nul.
+ */
+export declare function createSlot(node: HTMLElement, slotName: string | null): {
+    update(newSlotName: string | null): void;
+    destroy(): void;
+} | undefined;
+/**
+ * Action Svelte qui applique l'état `indeterminate` à une case à cocher.
+ *
+ * @param node - L'élément input de type checkbox à mettre à jour.
+ * @param value - L'état initial indéterminé à appliquer.
+ * @returns Un objet avec une méthode `update` pour synchroniser les changements de valeur.
+ */
+export declare function setIndeterminate(node: HTMLInputElement, value: boolean): {
+    update(newValue: boolean): void;
+};

package/dist/directives/actions.svelte.js

@@ -0,0 +1,158 @@
+export const clickOutside = (element, callbackFunction) => {
+    const handleClick = (event) => {
+        if (!element.contains(event.target)) {
+            callbackFunction();
+        }
+    };
+    $effect(() => {
+        document.body.addEventListener("click", handleClick);
+        return () => {
+            document.body.removeEventListener("click", handleClick);
+        };
+    });
+};
+export const pressEscape = (element, callbackFunction) => {
+    const handleKeyDown = (event) => {
+        if (event.code === "Escape") {
+            callbackFunction();
+        }
+    };
+    $effect(() => {
+        document.body.addEventListener("keydown", handleKeyDown);
+        return () => {
+            document.body.removeEventListener("keydown", handleKeyDown);
+        };
+    });
+};
+export const stopPropagation = (element) => {
+    const handleClick = (event) => {
+        event.stopPropagation();
+    };
+    $effect(() => {
+        element.addEventListener("click", handleClick);
+        return () => {
+            element.removeEventListener("click", handleClick);
+        };
+    });
+};
+const FOCUSABLE_ELEMENTS = [
+    "a[href]",
+    "button:not([disabled])",
+    "input:not([disabled])",
+    "select:not([disabled])",
+    "textarea:not([disabled])",
+    "audio[controls]",
+    "video[controls]",
+    '[contenteditable]:not([contenteditable="false"])',
+    '[tabindex]:not([tabindex="-1"])',
+].join(",");
+const isHTMLElement = (element) => element instanceof HTMLElement;
+function getSlotChildren(slot) {
+    const assignedElements = slot.assignedElements({ flatten: true });
+    const children = assignedElements.length ? assignedElements : slot.children;
+    return Array.from(children).filter(isHTMLElement);
+}
+function getComposedChildren(root) {
+    return Array.from(root.children)
+        .filter(isHTMLElement)
+        .flatMap((element) => element instanceof HTMLSlotElement ? getSlotChildren(element) : [element]);
+}
+/**
+ * Récupère tous les éléments focusables contenus dans un élément donné.
+ * Parcourt l'élément et tous ses descendants pour collecter les éléments focusables.
+ *
+ * @param element - L'élément conteneur à analyser.
+ *
+ * @returns Un tableau contenant tous les éléments focusables trouvés.
+ */
+function getFocusableElements(root) {
+    return getComposedChildren(root).flatMap((element) => {
+        const descendants = getFocusableElements(element.shadowRoot ?? element);
+        return element.matches(FOCUSABLE_ELEMENTS) ? [element, ...descendants] : descendants;
+    });
+}
+/**
+ * Action Svelte qui restreint le focus à l'intérieur d'un élément.
+ * Empêche la navigation au clavier (Tab) de sortir du conteneur en boucle le focus
+ * entre le premier et le dernier élément focusable.
+ *
+ * @param element - L'élément conteneur dans lequel piéger le focus.
+ */
+export const trapFocus = (element) => {
+    const handleKeyDown = (event) => {
+        if (event.key !== "Tab")
+            return;
+        const focusables = getFocusableElements(element);
+        if (focusables.length === 0)
+            return;
+        const first = focusables[0];
+        const last = focusables[focusables.length - 1];
+        let active = document.activeElement;
+        while (active?.shadowRoot?.activeElement) {
+            active = active.shadowRoot.activeElement;
+        }
+        if (event.shiftKey) {
+            if (active === first || !focusables.includes(active)) {
+                event.preventDefault();
+                last.focus();
+            }
+        }
+        else {
+            if (active === last || !focusables.includes(active)) {
+                event.preventDefault();
+                first.focus();
+            }
+        }
+    };
+    $effect(() => {
+        element.addEventListener("keydown", handleKeyDown);
+        return () => {
+            element.removeEventListener("keydown", handleKeyDown);
+        };
+    });
+};
+/**
+ * Action Svelte : crée par programmation un élément <slot name="..."> à l'intérieur de l'élément.
+ *
+ * Cette action contourne la restriction de Svelte concernant les noms de slot dynamiques.
+ * Ne fait rien si slotName est nul.
+ */
+export function createSlot(node, slotName) {
+    if (!slotName)
+        return;
+    const slot = document.createElement("slot");
+    slot.name = slotName;
+    // Déplace le contenu existant dans le slot comme contenu de secours
+    while (node.firstChild) {
+        slot.appendChild(node.firstChild);
+    }
+    node.appendChild(slot);
+    return {
+        update(newSlotName) {
+            if (newSlotName)
+                slot.name = newSlotName;
+        },
+        destroy() {
+            // Restaurer le contenu avant de supprimer l'élément slot
+            while (slot.firstChild) {
+                node.insertBefore(slot.firstChild, slot);
+            }
+            slot.remove();
+        },
+    };
+}
+/**
+ * Action Svelte qui applique l'état `indeterminate` à une case à cocher.
+ *
+ * @param node - L'élément input de type checkbox à mettre à jour.
+ * @param value - L'état initial indéterminé à appliquer.
+ * @returns Un objet avec une méthode `update` pour synchroniser les changements de valeur.
+ */
+export function setIndeterminate(node, value) {
+    node.indeterminate = value;
+    return {
+        update(newValue) {
+            node.indeterminate = newValue;
+        },
+    };
+}