@lab-anssi/ui-kit 1.61.3 → 1.62.0

package/dist/composants/blog/PageCrisp.svelte

@@ -0,0 +1,244 @@
+<svelte:options
+  customElement={{
+    tag: "lab-anssi-page-crisp",
+    props: {
+      contenu: { reflect: false, type: "String", attribute: "contenu" },
+      tableDesMatieres: { reflect: false, type: "Array", attribute: "table-des-matieres" },
+    },
+  }}
+/>
+
+<script lang="ts">import SommaireMobile from "./SommaireMobile.svelte";
+import { onDestroy, tick } from "svelte";
+import SommaireBureau from "./SommaireBureau.svelte";
+let { contenu, tableDesMatieres } = $props();
+let composant = $state();
+let observateurDIntersection;
+const observeLesSections = () => {
+	if (!composant) return;
+	observateurDIntersection = new IntersectionObserver((sections) => {
+		sections.forEach((section) => {
+			const titreDeLaSection = section.target.querySelector("h2");
+			const lesLiens = composant.querySelectorAll(`.sommaire ul li a[href='#${titreDeLaSection.id}']`);
+			if (!lesLiens) return;
+			if (section.isIntersecting) {
+				lesLiens.forEach((l) => l.parentElement.classList.add("actif"));
+				const menuMobileVisible = composant.querySelector("#section-active");
+				if (menuMobileVisible) menuMobileVisible.textContent = titreDeLaSection.textContent;
+			} else lesLiens.forEach((l) => l.parentElement.classList.remove("actif"));
+		});
+	}, { rootMargin: "-30% 0% -62% 0%" });
+	const lesSections = composant.querySelectorAll("article .contenu section");
+	lesSections.forEach((s) => observateurDIntersection.observe(s));
+};
+$effect(() => {
+	if (contenu) tick().then(observeLesSections);
+});
+const attendChargementImages = async () => {
+	if (!composant) return;
+	const images = composant.querySelectorAll("img");
+	await Promise.all(Array.from(images).map((image) => {
+		if (image.complete) return Promise.resolve();
+		return new Promise((res) => {
+			image.addEventListener("load", res);
+			image.addEventListener("error", res);
+		});
+	}));
+};
+const scroll = (cible) => {
+	if (cible) {
+		tick().then(async () => {
+			const ancre = composant && composant.querySelector(cible);
+			if (ancre) {
+				await attendChargementImages();
+				ancre.scrollIntoView(true);
+			}
+		});
+	}
+};
+$effect(() => {
+	if (contenu) scroll(window.location.hash);
+});
+const ancreOuverte = (ancre) => scroll(`#${ancre}`);
+onDestroy(() => {
+	const lesSections = composant.querySelectorAll("section");
+	lesSections.forEach((s) => {
+		if (observateurDIntersection) observateurDIntersection.unobserve(s);
+	});
+});
+</script>
+
+<div bind:this={composant}>
+  <SommaireMobile {tableDesMatieres} onancreOuverte={ancreOuverte} />
+
+  <article>
+    <SommaireBureau {tableDesMatieres} onancreOuverte={ancreOuverte} />
+    <div class="contenu">
+      <!-- eslint-disable-next-line svelte/no-at-html-tags-->
+      {@html contenu}
+    </div>
+  </article>
+</div>
+
+<style>article {
+  color: #3a3a3a;
+  display: flex;
+  flex-direction: column;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 48px 16px 72px;
+}
+@media (min-width: 932px) {
+  article {
+    padding: 48px 24px 72px;
+    flex-direction: row;
+    gap: 48px;
+  }
+}
+article .contenu {
+  display: flex;
+  flex-direction: column;
+  gap: 72px;
+}
+article .contenu :global(section) {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+article .contenu :global(p) {
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 400;
+}
+article .contenu :global(h2) {
+  color: #161616;
+  font-size: 1.75rem;
+  line-height: 2.25rem;
+  font-weight: 700;
+  margin: 0;
+  scroll-margin-top: 50px; /* Hauteur de la barre de navigation */
+}
+@media (min-width: 576px) {
+  article .contenu :global(h2) {
+    font-size: 2rem;
+    line-height: 2.5rem;
+  }
+}
+@media (min-width: 932px) {
+  article .contenu :global(h2) {
+    scroll-margin-top: 0;
+  }
+}
+article .contenu :global(h3) {
+  color: #161616;
+  font-size: 1.375rem;
+  line-height: 1.75rem;
+  font-weight: 700;
+  margin: 0;
+}
+@media (min-width: 576px) {
+  article .contenu :global(h3) {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+}
+article .contenu :global(h4) {
+  color: #161616;
+  font-size: 1.125rem;
+  line-height: 1.5rem;
+  font-weight: 700;
+  margin: 0;
+}
+@media (min-width: 576px) {
+  article .contenu :global(h4) {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+}
+article .contenu :global(img),
+article .contenu :global(video) {
+  width: 100%;
+}
+article .contenu :global(video) {
+  border-radius: 10px;
+}
+article .contenu :global(.conteneur-video .legende) {
+  font-style: italic;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+}
+article .contenu :global(.information) {
+  background: #e8edff;
+  padding: 16px 16px 16px 24px;
+  border-radius: 4px;
+  color: #0163cb;
+  border-left: 4px solid #0163cb;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  display: flex;
+  flex-direction: column;
+}
+article .contenu :global(.information):before {
+  content: "Information";
+  font-weight: bold;
+}
+article .contenu :global(.aide) {
+  background: #f6f6f6;
+  position: relative;
+  padding: 24px 24px 24px 64px;
+  border-radius: 4px;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+}
+article .contenu :global(.aide):before {
+  content: "";
+  display: block;
+  background-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/aide.svg");
+  width: 24px;
+  height: 24px;
+  position: absolute;
+  top: 24px;
+  left: 24px;
+}
+article .contenu :global(a) {
+  color: var(--couleur-lien);
+  text-decoration: underline;
+  text-underline-offset: 4px;
+  text-decoration-thickness: 1px;
+}
+article .contenu :global(a):hover {
+  text-decoration-thickness: 2px;
+}
+article .contenu :global(a.telechargement) {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  text-decoration: none;
+  position: relative;
+}
+article .contenu :global(a.telechargement):after {
+  content: "";
+  display: block;
+  background: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/telecharger.svg");
+  filter: var(--filtre-couleur-primaire);
+  width: 16px;
+  height: 16px;
+}
+article .contenu :global(a.telechargement):before {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background-color: var(--couleur-lien);
+}
+article .contenu :global(a.telechargement):hover:before {
+  bottom: -1px;
+  height: 2px;
+}
+article .contenu :global(ul li) {
+  padding-bottom: 8px;
+}</style>

package/dist/composants/blog/PageCrisp.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { TableDesMatieres } from "../../types";
+interface Props {
+    contenu: string;
+    tableDesMatieres: TableDesMatieres;
+}
+declare const PageCrisp: import("svelte").Component<Props, {}, "">;
+type PageCrisp = ReturnType<typeof PageCrisp>;
+export default PageCrisp;

package/dist/composants/blog/SommaireBureau.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">let { tableDesMatieres, onancreOuverte } = $props();
+const ouvreEntree = (ancre) => {
+	onancreOuverte?.(ancre);
+};
+export {};
+</script>
+
+<div class="sommaire sommaire-deplie">
+  <ul>
+    {#each tableDesMatieres as entree (entree.id)}
+      <li>
+        <a href={`#${entree.id}`} onclick={() => ouvreEntree(entree.id)}>
+          <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+          {@html entree.texte}
+        </a>
+      </li>
+    {/each}
+  </ul>
+</div>
+
+<style>.sommaire-deplie {
+  display: none;
+  width: 282px;
+  flex: 0 0 auto;
+  align-self: flex-start;
+}
+@media (min-width: 932px) {
+  .sommaire-deplie {
+    display: flex;
+    flex-direction: column;
+    position: sticky;
+    top: 0;
+  }
+}
+.sommaire-deplie ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0 0 40px;
+}
+.sommaire-deplie ul li {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+.sommaire-deplie ul li.actif a {
+  color: var(--sommaire-actif-couleur);
+  border-left: 2px solid var(--sommaire-actif-indicateur-couleur);
+  padding-left: 6px;
+}
+.sommaire-deplie ul li a {
+  color: #161616;
+  border-bottom: none;
+  text-decoration: none;
+  padding-left: 8px;
+  display: inline-block;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 1.5rem;
+}
+.sommaire-deplie span {
+  margin-bottom: 16px;
+  font-size: 0.85rem;
+  line-height: 1.5rem;
+}</style>

package/dist/composants/blog/SommaireBureau.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { TableDesMatieres } from "../../types";
+interface Props {
+    tableDesMatieres: TableDesMatieres;
+    /** Callback appelé lorsqu'une ancre est ouverte */
+    onancreOuverte?: (ancre: string) => void;
+}
+declare const SommaireBureau: import("svelte").Component<Props, {}, "">;
+type SommaireBureau = ReturnType<typeof SommaireBureau>;
+export default SommaireBureau;

package/dist/composants/blog/SommaireMobile.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">import IconeMenuLateral from "./IconeMenuLateral.svelte";
+import IconeChevronBas from "./IconeChevronBas.svelte";
+let { tableDesMatieres, onancreOuverte } = $props();
+let detailsElement = $state();
+const ouvreEntree = (ancre) => {
+	if (detailsElement) detailsElement.open = false;
+	onancreOuverte?.(ancre);
+};
+</script>
+
+<div class="sommaire sommaire-replie">
+  <details bind:this={detailsElement}>
+    <summary>
+      <div class="entete-filtres">
+        <IconeMenuLateral />
+        <span id="section-active" class="titre-menu">
+          <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+          {@html tableDesMatieres[0]?.texte}
+        </span>
+        <IconeChevronBas />
+      </div>
+    </summary>
+
+    <ul>
+      {#each tableDesMatieres as entree (entree.id)}
+        <li>
+          <a href={`#${entree.id}`} onclick={() => ouvreEntree(entree.id)}>
+            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+            {@html entree.texte}</a
+          >
+        </li>
+      {/each}
+    </ul>
+  </details>
+</div>
+
+<style>.sommaire-replie {
+  border-top: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+  background: white;
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+@media (min-width: 932px) {
+  .sommaire-replie {
+    display: none;
+  }
+}
+.sommaire-replie:has(:global(details[open])) {
+  position: fixed;
+  top: 0;
+  height: 100vh;
+  width: 100%;
+  box-sizing: border-box;
+  overflow: auto;
+}
+.sommaire-replie details .entete-filtres {
+  padding: 12px 16px;
+  background: white;
+  color: var(--sommaire-actif-couleur);
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.5rem;
+}
+.sommaire-replie details ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 16px;
+}
+.sommaire-replie details ul li {
+  border-bottom: 1px solid #ddd;
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+.sommaire-replie details ul li.actif a {
+  color: var(--sommaire-actif-couleur);
+  border-left: 2px solid var(--sommaire-actif-indicateur-couleur);
+  padding-left: 14px;
+  border-bottom: none;
+}
+.sommaire-replie details ul li a {
+  color: #161616;
+  text-decoration: none;
+  padding-left: 16px;
+  display: inline-block;
+  border-bottom: none;
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.5rem;
+}
+.sommaire-replie details[open] summary .entete-filtres {
+  background: var(--sommaire-mobile-fond);
+}
+.sommaire-replie details[open] summary .entete-filtres :global(.chevron) {
+  transform: rotate(180deg);
+}
+.sommaire-replie details summary {
+  list-style: none;
+}
+.sommaire-replie details summary::marker {
+  content: "";
+}
+.sommaire-replie details summary::-webkit-details-marker {
+  display: none;
+}
+.sommaire-replie details summary .entete-filtres {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.sommaire-replie details .titre-menu {
+  flex-grow: 1;
+}</style>

package/dist/composants/blog/SommaireMobile.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { TableDesMatieres } from "../../types";
+interface Props {
+    tableDesMatieres: TableDesMatieres;
+    /** Callback appelé lorsqu'une ancre est ouverte */
+    onancreOuverte?: (ancre: string) => void;
+}
+declare const SommaireMobile: import("svelte").Component<Props, {}, "">;
+type SommaireMobile = ReturnType<typeof SommaireMobile>;
+export default SommaireMobile;

package/dist/composants/carrousel-tuiles/CarrouselTuiles.svelte

@@ -0,0 +1,184 @@
+<svelte:options
+  customElement={{
+    tag: "lab-anssi-carrousel-tuiles",
+    props: {
+      tuiles: { attribute: "tuiles", type: "Array" },
+      fond: { attribute: "fond", type: "String" },
+    },
+    extend: withIconsStyleSheet,
+  }}
+/>
+
+<script lang="ts">import { setThemeable, withIconsStyleSheet } from "../../utilitaires";
+import DsfrButton from "../../dsfr/DsfrButton.svelte";
+import DsfrTile from "../../dsfr/DsfrTile.svelte";
+// eslint-disable-next-line svelte/no-unused-props
+let { tuiles = [], fond = "clair" } = $props();
+setThemeable($host());
+let elementCarrousel = $state();
+let estAuDebut = $state(true);
+let estALaFin = $state(false);
+/**
+* Met à jour l'état de scroll du carrousel.
+* Détermine si le carrousel est au début ou à la fin pour activer/désactiver les boutons de navigation.
+*/
+const gereLetatDuScroll = () => {
+	if (!elementCarrousel) return;
+	const { scrollLeft, scrollWidth, clientWidth } = elementCarrousel;
+	estAuDebut = scrollLeft <= 0;
+	estALaFin = scrollLeft + clientWidth >= scrollWidth - 1;
+};
+$effect(() => {
+	if (!elementCarrousel) return;
+	gereLetatDuScroll();
+	const observer = new ResizeObserver(gereLetatDuScroll);
+	observer.observe(elementCarrousel);
+	return () => observer.disconnect();
+});
+/**
+* Fait défiler le carrousel dans la direction spécifiée.
+*
+* @param {number} direction - La direction du défilement (-1 pour précédent, +1 pour suivant)
+*/
+const versDirection = (direction) => {
+	if (!elementCarrousel) return;
+	const cardWidth = elementCarrousel.firstElementChild?.clientWidth || 0;
+	elementCarrousel.scrollBy({
+		left: direction * (cardWidth + 16),
+		behavior: "smooth"
+	});
+};
+const precedent = () => versDirection(-1);
+const suivant = () => versDirection(+1);
+const variationBoutons = $derived(fond === "sombre" ? "inverted-tertiary-no-outline" : "tertiary-no-outline");
+</script>
+
+<div
+  class={[
+    "lab-anssi-carrousel-tuiles carrousel-tuiles primaire",
+    `lab-anssi-carrousel-tuiles--${fond}`,
+  ]}
+>
+  <div class="lab-anssi-carrousel-tuiles__wrapper">
+    <div
+      class="lab-anssi-carrousel-tuiles__conteneur"
+      bind:this={elementCarrousel}
+      onscroll={gereLetatDuScroll}
+    >
+      <slot>
+        {#each tuiles as tuile, idx (idx)}
+          <div class="lab-anssi-carrousel-tuiles__element">
+            <DsfrTile
+              title={tuile.titre}
+              hasDescription={!!tuile.contenu}
+              description={tuile.contenu}
+              actionMarkup="false"
+              noLink
+            >
+              {#if tuile.illustration?.lien}
+                <!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -- snippet passed as slot to DsfrTile -->
+                {#snippet pictogram()}
+                  <img src={tuile.illustration!.lien} alt={tuile.illustration!.alt} />
+                {/snippet}
+              {/if}
+            </DsfrTile>
+          </div>
+        {/each}
+      </slot>
+    </div>
+
+    <div class="lab-anssi-carrousel-tuiles__actions">
+      <DsfrButton
+        label="Précédent"
+        kind={variationBoutons}
+        hasIcon
+        icon="arrow-left-s-line"
+        iconPlace="left"
+        onclick={precedent}
+        disabled={estAuDebut}
+      />
+      <DsfrButton
+        label="Suivant"
+        kind={variationBoutons}
+        hasIcon
+        icon="arrow-right-s-line"
+        iconPlace="right"
+        onclick={suivant}
+        disabled={estALaFin}
+      />
+    </div>
+  </div>
+</div>
+
+<style>:host(lab-anssi-carrousel-tuiles) {
+  display: block;
+  box-sizing: border-box;
+}
+
+.lab-anssi-carrousel-tuiles {
+  --espacement: 16px;
+}
+.lab-anssi-carrousel-tuiles,
+.lab-anssi-carrousel-tuiles *,
+.lab-anssi-carrousel-tuiles *::after,
+.lab-anssi-carrousel-tuiles *::before {
+  box-sizing: inherit;
+}
+.lab-anssi-carrousel-tuiles {
+  background: var(--background-composant);
+  padding: var(--padding-composant);
+}
+.lab-anssi-carrousel-tuiles__conteneur {
+  display: flex;
+  overflow-x: auto;
+  gap: var(--espacement);
+  padding: 2px 0;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  scrollbar-width: none;
+  -ms-scroll-snap-type: x mandatory;
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-style: none;
+}
+@media (max-width: 61.98em) {
+  .lab-anssi-carrousel-tuiles__conteneur {
+    margin-block-end: 32px;
+  }
+}
+@media (min-width: 48em) {
+  .lab-anssi-carrousel-tuiles__conteneur {
+    --espacement: 24px;
+  }
+}
+.lab-anssi-carrousel-tuiles__conteneur::-webkit-scrollbar {
+  display: none;
+}
+.lab-anssi-carrousel-tuiles__element {
+  display: flex;
+}
+.lab-anssi-carrousel-tuiles__element > :global(*) {
+  width: 100%;
+}
+.lab-anssi-carrousel-tuiles__actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+@media (min-width: 48em) {
+  .lab-anssi-carrousel-tuiles__actions {
+    display: none;
+  }
+}
+@media (max-width: 47.98em) {
+  .lab-anssi-carrousel-tuiles__element,
+  .lab-anssi-carrousel-tuiles :global(::slotted(*)) {
+    min-width: calc(100% - var(--espacement) * 2);
+    scroll-snap-align: center;
+  }
+}
+@media (min-width: 48em) {
+  .lab-anssi-carrousel-tuiles__element,
+  .lab-anssi-carrousel-tuiles :global(::slotted(*)) {
+    flex: 1;
+  }
+}</style>

package/dist/composants/carrousel-tuiles/CarrouselTuiles.svelte.d.ts

@@ -0,0 +1,34 @@
+import type { Snippet } from "svelte";
+import type { Tuiles } from "../../types";
+interface Props {
+    tuiles?: Tuiles;
+    fond?: "clair" | "sombre";
+    children?: Snippet;
+}
+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 CarrouselTuiles: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<Props, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, "">;
+type CarrouselTuiles = InstanceType<typeof CarrouselTuiles>;
+export default CarrouselTuiles;

package/dist/composants/carrousel-tuiles/IconeFlecheDroite.svelte

@@ -0,0 +1,16 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M5.21875 7.33336H13.3334V8.6667H5.21875L8.79475 12.2427L7.85208 13.1854L2.66675 8.00003L7.85208 2.8147L8.79475 3.75736L5.21875 7.33336Z"
+    fill="#042794"
+  />
+</svg>
+
+<style>svg {
+  transform: rotate(180deg);
+}
+
+svg path {
+  fill: var(--brique-carrousel-bouton-action-texte-couleur);
+}</style>