@lab-anssi/ui-kit 1.25.1 → 1.25.2

package/dist/lab/vitrines-produits/briques/Brique.svelte

@@ -1,56 +0,0 @@
-<script lang="ts">let {
-  variation = "primaire",
-  sansMargeHaute = false,
-  sansMargeLaterale = false,
-  children
-} = $props();
-</script>
-
-<section
-  class={variation}
-  class:sans-marge-haute={sansMargeHaute}
-  class:sans-marge-laterale={sansMargeLaterale}
->
-  <div class="contenu-brique">
-    {@render children?.()}
-  </div>
-</section>
-
-<style>section {
-  font-family: Marianne;
-  padding: 48px 16px;
-  box-sizing: border-box;
-  text-align: left;
-  color: white;
-}
-section.sans-marge-haute {
-  padding-top: 0;
-}
-section.sans-marge-laterale {
-  padding-left: 0;
-  padding-right: 0;
-}
-@media (min-width: 576px) {
-  section {
-    padding: 72px 24px;
-  }
-}
-@media (min-width: 932px) {
-  section {
-    padding: 48px 24px;
-  }
-}
-section.primaire {
-  background: var(--brique-background-primaire);
-}
-section.transparent {
-  background: none;
-}
-section.secondaire {
-  background: var(--brique-background-secondaire);
-}
-
-.contenu-brique {
-  max-width: 1200px;
-  margin: 0 auto;
-}</style>

package/dist/lab/vitrines-produits/briques/Brique.svelte.d.ts

@@ -1,9 +0,0 @@
-interface Props {
-    variation?: "primaire" | "transparent" | "secondaire";
-    sansMargeHaute?: boolean;
-    sansMargeLaterale?: boolean;
-    children?: import("svelte").Snippet;
-}
-declare const Brique: import("svelte").Component<Props, {}, "">;
-type Brique = ReturnType<typeof Brique>;
-export default Brique;

package/dist/lab/vitrines-produits/briques/BriqueContenuADeuxColonnes.svelte

@@ -1,138 +0,0 @@
-<svelte:options
-  customElement={{
-    tag: "lab-anssi-brique-contenu-a-deux-colonnes",
-    props: {
-      titre: { reflect: false, type: "String", attribute: "titre" },
-      paragraphe: { reflect: false, type: "String", attribute: "paragraphe" },
-      action: { reflect: false, type: "Object", attribute: "action" },
-      ordre: { reflect: false, type: "String", attribute: "ordre" },
-      illustration: { reflect: false, type: "Object", attribute: "illustration" },
-    },
-  }}
-/>
-
-<script lang="ts">import Brique from "./Brique.svelte";
-let {
-  titre,
-  paragraphe,
-  action = void 0,
-  ordre = "texte-gauche",
-  illustration
-} = $props();
-</script>
-
-<Brique variation="primaire">
-  <div class={`grille-contenu ${ordre}`}>
-    <div class="illustration">
-      <img src={illustration.lien} alt={illustration.alt} />
-    </div>
-    <div class="contenu">
-      <h2>{titre}</h2>
-      <p>{paragraphe}</p>
-      <div class="action">
-        {#if action}
-          <a role="button" href={action.lien} target="_blank">
-            {action.titre}
-          </a>
-        {/if}
-      </div>
-    </div>
-  </div>
-</Brique>
-
-<style>.grille-contenu {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-areas: "illustration" "contenu";
-  gap: 32px;
-}
-@media (min-width: 932px) {
-  .grille-contenu {
-    grid-template-columns: 1fr 1fr;
-    grid-template-areas: "contenu illustration";
-    column-gap: 24px;
-  }
-  .grille-contenu.texte-gauche {
-    grid-template-areas: "contenu illustration";
-  }
-  .grille-contenu.texte-droite {
-    grid-template-areas: "illustration contenu";
-  }
-}
-.grille-contenu .contenu {
-  grid-area: contenu;
-  display: flex;
-  flex-direction: column;
-  row-gap: 8px;
-}
-@media (min-width: 932px) {
-  .grille-contenu .contenu {
-    justify-content: center;
-  }
-}
-.grille-contenu .contenu h2 {
-  font-size: 1.75rem;
-  line-height: 2.25rem;
-  font-weight: 700;
-  word-break: break-word;
-  margin: 0;
-}
-.grille-contenu .contenu p {
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5rem;
-  margin: 0;
-}
-.grille-contenu .contenu .action a[role=button] {
-  display: flex;
-  justify-content: center;
-  text-decoration: none;
-  font-family: Marianne, sans-serif;
-  padding: 8px 16px;
-  max-width: 100%;
-  text-align: center;
-  font-weight: 500;
-  font-size: 1rem;
-  line-height: 24px;
-  border-radius: 4px;
-  background-color: var(--brique-contenu-deux-colonnes-action-bouton-background);
-  color: var(--brique-contenu-deux-colonnes-action-bouton-texte);
-  border: none;
-  cursor: pointer;
-}
-.grille-contenu .contenu .action a[role=button]:active {
-  background-color: var(--brique-contenu-deux-colonnes-action-bouton-background-active);
-  box-shadow: none;
-  border: none;
-}
-.grille-contenu .contenu .action a[role=button]:hover {
-  background-color: var(--brique-contenu-deux-colonnes-action-bouton-background-hover);
-  box-shadow: none;
-  border: none;
-}
-@media (min-width: 576px) {
-  .grille-contenu .contenu .action a[role=button] {
-    max-width: unset;
-    width: fit-content;
-  }
-}
-.grille-contenu .contenu .action {
-  margin-top: 32px;
-}
-.grille-contenu .illustration {
-  grid-area: illustration;
-}
-.grille-contenu .illustration img {
-  width: 100%;
-  max-height: 250px;
-}
-@media (min-width: 576px) {
-  .grille-contenu .illustration img {
-    max-height: none;
-  }
-}
-@media (min-width: 932px) {
-  .grille-contenu .illustration img {
-    max-height: 330px;
-  }
-}</style>

package/dist/lab/vitrines-produits/briques/BriqueContenuADeuxColonnes.svelte.d.ts

@@ -1,11 +0,0 @@
-import type { Action, Image } from "../../../types";
-interface Props {
-    titre: string;
-    paragraphe: string;
-    action?: Action | undefined;
-    ordre?: "texte-gauche" | "texte-droite";
-    illustration: Image;
-}
-declare const BriqueContenuADeuxColonnes: import("svelte").Component<Props, {}, "">;
-type BriqueContenuADeuxColonnes = ReturnType<typeof BriqueContenuADeuxColonnes>;
-export default BriqueContenuADeuxColonnes;

package/dist/lab/vitrines-produits/briques/BriqueHero.svelte

@@ -1,252 +0,0 @@
-<svelte:options
-  customElement={{
-    tag: "lab-anssi-brique-hero",
-    props: {
-      titre: { reflect: false, type: "String", attribute: "titre" },
-      soustitre: { reflect: false, type: "String", attribute: "soustitre" },
-      illustration: { reflect: false, type: "Object", attribute: "illustration" },
-      badge: { reflect: false, type: "Boolean", attribute: "badge" },
-      actiongauche: { reflect: false, type: "Object", attribute: "actiongauche" },
-      actiondroite: { reflect: false, type: "Object", attribute: "actiondroite" },
-      partenaires: { reflect: false, type: "Array", attribute: "partenaires" },
-    },
-  }}
-/>
-
-<script lang="ts">import Brique from "./Brique.svelte";
-import LienExterne from "../../icones/LienExterne.svelte";
-let {
-  titre,
-  soustitre,
-  illustration,
-  badge = false,
-  actiongauche,
-  actiondroite,
-  partenaires = []
-} = $props();
-</script>
-
-<Brique>
-  <div class="hero">
-    <div class="contenu" class:sans-partenaires={!partenaires || partenaires.length === 0}>
-      {#if badge}
-        <div class="section-badge">
-          <div class="badge">
-            <span>Service à impact national</span>
-          </div>
-        </div>
-      {/if}
-      <div class="textes">
-        <h1>{titre}</h1>
-        <p>{soustitre}</p>
-      </div>
-      <div class="actions">
-        <a
-          role="button"
-          class="action-gauche"
-          href={actiongauche.lien}
-          target={actiongauche.target ?? "_self"}
-        >
-          {actiongauche.titre}
-          {#if actiongauche.target === "_blank"}
-            <LienExterne />
-          {/if}
-        </a>
-        <a
-          role="button"
-          class="action-droite"
-          href={actiondroite.lien}
-          target={actiondroite.target ?? "_self"}
-        >
-          {actiondroite.titre}
-          {#if actiondroite.target === "_blank"}
-            <LienExterne />
-          {/if}
-        </a>
-      </div>
-    </div>
-    <div class="image">
-      <img src={illustration.lien} alt={illustration.alt} />
-    </div>
-    {#if partenaires && partenaires.length > 0}
-      <div class="partenaires">
-        <p>Une innovation ANSSI conçue pour durer en collaboration avec :</p>
-        <div class="liste">
-          {#each partenaires as partenaire}
-            <img src={partenaire.lien} alt={partenaire.alt} />
-          {/each}
-        </div>
-      </div>
-    {/if}
-  </div>
-</Brique>
-
-<style>.hero {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-areas: "contenu" "image" "partenaires";
-  gap: 32px;
-}
-@media (min-width: 932px) {
-  .hero {
-    grid-template-areas: "contenu image" "partenaires image";
-  }
-  .hero:has(:global(.sans-partenaires)) {
-    grid-template-areas: "contenu image" "contenu image";
-  }
-  .hero {
-    grid-template-columns: 1fr 1fr;
-    column-gap: 24px;
-    row-gap: 0px;
-  }
-}
-.hero .contenu {
-  grid-area: contenu;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-.hero .contenu .textes {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  margin-bottom: 32px;
-}
-.hero .contenu .section-badge {
-  margin-bottom: 8px;
-}
-.hero .contenu .section-badge .badge {
-  text-align: left;
-  background: #defbe5;
-  color: #18753c;
-  text-transform: uppercase;
-  padding: 0 6px;
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 20px;
-  border-radius: 4px;
-  width: fit-content;
-  margin-bottom: 4px;
-}
-.hero .contenu .section-badge .badge span {
-  display: flex;
-  flex-direction: row;
-  gap: 4px;
-  align-items: center;
-}
-.hero .contenu .section-badge .badge span:before {
-  content: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/succes.svg");
-  display: flex;
-  width: 16px;
-  height: 16px;
-}
-.hero .contenu .actions {
-  grid-area: actions;
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  gap: 16px;
-}
-@media (min-width: 576px) {
-  .hero .contenu .actions {
-    flex-direction: row;
-  }
-}
-@media (min-width: 576px) {
-  .hero .contenu {
-    margin-bottom: 32px;
-  }
-}
-.hero .image {
-  grid-area: image;
-  display: flex;
-  justify-content: center;
-}
-.hero .image img {
-  width: 100%;
-}
-@media (min-width: 768px) {
-  .hero .image img {
-    max-width: 588px;
-  }
-}
-@media (min-width: 932px) {
-  .hero .image img {
-    max-height: 355px;
-  }
-}
-.hero .partenaires {
-  grid-area: partenaires;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-.hero .partenaires p {
-  font-size: 14px;
-}
-.hero .partenaires .liste {
-  display: flex;
-  gap: 8px;
-}
-.hero .partenaires .liste img {
-  width: 79px;
-  height: 24px;
-}
-.hero h1 {
-  font-size: 40px;
-  margin: 0;
-  line-height: 48px;
-  word-break: break-word;
-}
-@media (min-width: 576px) {
-  .hero h1 {
-    font-size: 48px;
-  }
-}
-.hero a[role=button] {
-  text-decoration: none;
-  font-family: Marianne, sans-serif;
-  padding: 8px 16px;
-  text-align: center;
-  font-weight: 500;
-  font-size: 1rem;
-  line-height: 24px;
-  border-radius: 4px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-}
-.hero a[role=button].action-gauche {
-  background-color: var(--brique-hero-bouton-gauche-background);
-  color: var(--brique-hero-bouton-gauche-texte);
-  border: 1px solid transparent;
-  cursor: pointer;
-}
-.hero a[role=button].action-gauche:active {
-  background-color: var(--brique-hero-bouton-gauche-background-active);
-  box-shadow: none;
-  border: 1px solid transparent;
-}
-.hero a[role=button].action-gauche:hover {
-  background-color: var(--brique-hero-bouton-gauche-background-hover);
-  box-shadow: none;
-  border: 1px solid transparent;
-}
-.hero a[role=button].action-droite {
-  background-color: var(--brique-hero-bouton-droite-background);
-  color: var(--brique-hero-bouton-droite-texte);
-  border: 1px solid var(--brique-hero-bouton-droite-texte);
-  cursor: pointer;
-}
-.hero a[role=button].action-droite:active {
-  background-color: var(--brique-hero-bouton-droite-background-active);
-}
-.hero a[role=button].action-droite:hover {
-  background-color: var(--brique-hero-bouton-droite-background-hover);
-}
-.hero p {
-  margin: 0;
-  font-size: 20px;
-  line-height: 32px;
-}</style>

package/dist/lab/vitrines-produits/briques/BriqueHero.svelte.d.ts

@@ -1,13 +0,0 @@
-import type { Action, Image } from "../../../types";
-interface Props {
-    titre: string;
-    soustitre: string;
-    illustration: Image;
-    badge?: boolean;
-    actiongauche: Action;
-    actiondroite: Action;
-    partenaires?: Image[];
-}
-declare const BriqueHero: import("svelte").Component<Props, {}, "">;
-type BriqueHero = ReturnType<typeof BriqueHero>;
-export default BriqueHero;

package/dist/lab/vitrines-produits/briques/BriqueTitreMultimedia.svelte

@@ -1,47 +0,0 @@
-<svelte:options
-  customElement={{
-    tag: "lab-anssi-titre-multimedia",
-    props: {
-      titre: { reflect: false, type: "String", attribute: "titre" },
-      multimedia: { reflect: false, type: "Object", attribute: "multimedia" },
-    },
-  }}
-/>
-
-<script lang="ts">import Brique from "./Brique.svelte";
-import LecteurVideo from "./LecteurVideo.svelte";
-let { titre, multimedia } = $props();
-</script>
-
-<Brique variation="transparent">
-  <div class="bloc-multimedia">
-    <h2>{titre}</h2>
-    <div>
-      <LecteurVideo
-        source={multimedia.source}
-        sourceSousTitres={multimedia.sourcesoustitres}
-        imageDeCouverture={multimedia.imagedecouverture}
-      />
-    </div>
-  </div>
-</Brique>
-
-<style>.bloc-multimedia {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 48px;
-}
-.bloc-multimedia h2 {
-  color: var(--titre-couleur-primaire);
-  font-size: 28px;
-  line-height: 36px;
-  margin: 0;
-  text-align: center;
-}
-@media (min-width: 932px) {
-  .bloc-multimedia h2 {
-    font-size: 32px;
-    line-height: 40px;
-  }
-}</style>

package/dist/lab/vitrines-produits/briques/BriqueTitreMultimedia.svelte.d.ts

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

package/dist/lab/vitrines-produits/briques/CarrouselTuiles/CarrouselTuiles.svelte

@@ -1,126 +0,0 @@
-<svelte:options
-  customElement={{
-    tag: "lab-anssi-carrousel-tuiles",
-    props: {
-      tuiles: { reflect: false, type: "Array", attribute: "tuiles" },
-    },
-  }}
-/>
-
-<script lang="ts">import Brique from "../Brique.svelte";
-import Tuile from "../Tuile.svelte";
-import IconeFlecheGauche from "./IconeFlecheGauche.svelte";
-import IconeFlecheDroite from "./IconeFlecheDroite.svelte";
-let { tuiles = [] } = $props();
-let elementCarrousel = $state();
-const versDirection = (direction) => {
-  if (elementCarrousel) {
-    const cardWidth = elementCarrousel.firstElementChild?.clientWidth || 0;
-    elementCarrousel.scrollBy({
-      left: direction * (cardWidth + 16),
-      behavior: "smooth"
-    });
-  }
-};
-const precedent = () => versDirection(-1);
-const suivant = () => versDirection(1);
-</script>
-
-<div class="carrousel-tuiles primaire">
-  <Brique variation="transparent" sansMargeHaute sansMargeLaterale>
-    <div class="conteneur-tuiles" bind:this={elementCarrousel}>
-      {#each tuiles as tuile, idx (idx)}
-        <Tuile
-          illustration={tuile.illustration}
-          titre={tuile.titre}
-          contenu={tuile.contenu}
-          position={idx === 0 ? "premiere" : idx === tuiles.length - 1 ? "derniere" : null}
-        />
-      {/each}
-    </div>
-    <div class="conteneur-actions">
-      <button class="precedent" onclick={precedent}>
-        <span class="icone"><IconeFlecheGauche /></span>
-        Précédent
-      </button>
-      <button class="suivant" onclick={suivant}>
-        Suivant
-        <span class="icone"><IconeFlecheDroite /></span>
-      </button>
-    </div>
-  </Brique>
-</div>
-
-<style>.carrousel-tuiles {
-  --espacement: 16px;
-  padding: 0;
-}
-.carrousel-tuiles.primaire {
-  background: linear-gradient(to bottom, var(--centre-aide-background-entete) 0%, var(--centre-aide-background-entete) 30%, transparent 30%, transparent 100%);
-}
-
-.conteneur-tuiles {
-  display: flex;
-  overflow-x: auto;
-  gap: var(--espacement);
-  scroll-snap-type: x mandatory;
-  scroll-behavior: smooth;
-  -webkit-overflow-scrolling: touch;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  padding: 0 0;
-}
-
-.conteneur-tuiles::-webkit-scrollbar {
-  display: none;
-}
-
-.conteneur-actions {
-  display: flex;
-  margin-top: 32px;
-  justify-content: center;
-  padding: 0 var(--espacement);
-  gap: 24px;
-}
-
-.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;
-}
-.conteneur-actions button:hover:after {
-  bottom: -1px;
-  height: 2px;
-}
-.conteneur-actions button:after {
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  content: "";
-  width: 100%;
-  height: 1px;
-  background: var(--brique-carrousel-bouton-action-texte-couleur);
-}
-
-.conteneur-actions .precedent > .icone,
-.conteneur-actions .suivant > .icone {
-  display: flex;
-  align-items: center;
-}
-
-@media (min-width: 932px) {
-  .carrousel-tuiles {
-    --espacement: 24px;
-  }
-  .carrousel-tuiles .conteneur-actions {
-    display: none;
-  }
-}</style>

package/dist/lab/vitrines-produits/briques/CarrouselTuiles/CarrouselTuiles.svelte.d.ts

@@ -1,7 +0,0 @@
-import type { Tuiles } from "../../../../types";
-interface Props {
-    tuiles?: Tuiles;
-}
-declare const CarrouselTuiles: import("svelte").Component<Props, {}, "">;
-type CarrouselTuiles = ReturnType<typeof CarrouselTuiles>;
-export default CarrouselTuiles;

package/dist/lab/vitrines-produits/briques/CarrouselTuiles/IconeFlecheDroite.svelte

@@ -1,16 +0,0 @@
-<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>