@lab-anssi/ui-kit 1.25.0 → 1.25.2

package/dist/lab/vitrines-produits/briques/marelle/Marelle.svelte

@@ -1,100 +0,0 @@
-<svelte:options
-  customElement={{
-    tag: "lab-anssi-marelle",
-    props: {
-      titre: { reflect: false, type: "String", attribute: "titre" },
-      etapesmarelle: { reflect: false, type: "Array", attribute: "etapesmarelle" },
-      action: { reflect: false, type: "Object", attribute: "action" },
-    },
-  }}
-/>
-
-<script lang="ts">import Brique from "../Brique.svelte";
-import Etape from "./Etape.svelte";
-import LienExterne from "../../../icones/LienExterne.svelte";
-let { titre = "", etapesmarelle = [], action } = $props();
-</script>
-
-<Brique variation="secondaire">
-  <div class="brique-marelle">
-    <div class="titre">{titre}</div>
-    <section class="marelle-etapes">
-      {#each etapesmarelle as etapeMarelle, index}
-        <Etape {index} {etapeMarelle} />
-      {/each}
-    </section>
-    {#if action}
-      <div class="bouton-action">
-        <a role="button" class="action" href={action.lien} target={action.target}>
-          {action.titre}
-          {#if action.target === "_blank"}
-            <LienExterne />
-          {/if}
-        </a>
-      </div>
-    {/if}
-  </div>
-</Brique>
-
-<style>.brique-marelle {
-  display: flex;
-  flex-direction: column;
-  gap: 48px;
-}
-.brique-marelle .titre {
-  color: var(--brique-marelle-titre-couleur);
-  text-align: center;
-  font-weight: 700;
-  font-size: 1.75rem;
-  line-height: 36px;
-}
-@media (min-width: 932px) {
-  .brique-marelle .titre {
-    font-size: 2rem;
-    line-height: 40px;
-  }
-}
-.brique-marelle .marelle-etapes {
-  display: flex;
-  flex-direction: column;
-  gap: 48px;
-  color: #161616;
-}
-@media (min-width: 932px) {
-  .brique-marelle .marelle-etapes {
-    gap: 32px;
-  }
-}
-.brique-marelle .bouton-action {
-  display: flex;
-  justify-content: center;
-}
-.brique-marelle .bouton-action a[role=button] {
-  text-decoration: none;
-  font-family: Marianne, sans-serif;
-  padding: 8px 16px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  text-align: center;
-  font-weight: 500;
-  font-size: 1rem;
-  line-height: 24px;
-  border-radius: 4px;
-}
-.brique-marelle .bouton-action a[role=button].action {
-  background-color: var(--brique-marelle-bouton-background);
-  color: var(--brique-marelle-bouton-texte);
-  border: none;
-  cursor: pointer;
-}
-.brique-marelle .bouton-action a[role=button].action:active {
-  background-color: var(--brique-marelle-bouton-background-active);
-  box-shadow: none;
-  border: none;
-}
-.brique-marelle .bouton-action a[role=button].action:hover {
-  background-color: var(--brique-marelle-bouton-background-hover);
-  box-shadow: none;
-  border: none;
-}</style>

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

@@ -1,9 +0,0 @@
-import type { Action, EtapeMarelle } from "../../../../types";
-interface Props {
-    titre?: string;
-    etapesmarelle?: EtapeMarelle[];
-    action: Action;
-}
-declare const Marelle: import("svelte").Component<Props, {}, "">;
-type Marelle = ReturnType<typeof Marelle>;
-export default Marelle;

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

@@ -1,18 +0,0 @@
-<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/lab/vitrines-produits/briques/temoignages/IconeTemoignage.svelte.d.ts

@@ -1,26 +0,0 @@
-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/lab/vitrines-produits/briques/temoignages/Temoignages.svelte

@@ -1,197 +0,0 @@
-<svelte:options
-  customElement={{
-    tag: "lab-anssi-temoignages",
-    props: {
-      titre: { reflect: false, type: "String", attribute: "titre" },
-      temoignages: { reflect: false, type: "Array", attribute: "temoignages" },
-    },
-  }}
-/>
-
-<script lang="ts">import Brique from "../Brique.svelte";
-import IconeTemoignage from "./IconeTemoignage.svelte";
-import IconeFlecheGauche from "../CarrouselTuiles/IconeFlecheGauche.svelte";
-import IconeFlecheDroite from "../CarrouselTuiles/IconeFlecheDroite.svelte";
-let { titre = "Les avis de nos utilisateurs", temoignages = [] } = $props();
-let elementCarrousel = $state();
-var Direction = /* @__PURE__ */ ((Direction2) => {
-  Direction2[Direction2["DROITE"] = 1] = "DROITE";
-  Direction2[Direction2["GAUCHE"] = -1] = "GAUCHE";
-  return Direction2;
-})(Direction || {});
-const scrollVers = (direction) => {
-  const declageCourant = elementCarrousel.scrollLeft;
-  const largeurCarte = elementCarrousel.children[0].clientWidth;
-  elementCarrousel.scrollLeft = declageCourant + largeurCarte * direction;
-};
-</script>
-
-<Brique variation="transparent">
-  <div class="brique-temoignages">
-    <h3>{titre}</h3>
-    <div class="carrousel-temoignages">
-      <div class="conteneur-carrousel" bind:this={elementCarrousel}>
-        {#each temoignages as temoignage, idx (idx)}
-          <div class="temoignage">
-            <IconeTemoignage />
-            <h4>«&nbsp;{temoignage.citation}&nbsp;»</h4>
-            <h5>{temoignage.auteur}</h5>
-            <h6>{temoignage.source}</h6>
-          </div>
-        {/each}
-      </div>
-      {#if temoignages.length > 1}
-        <div class="conteneur-actions" class:deux-ou-moins={temoignages.length <= 2}>
-          <button class="precedent" type="button" onclick={() => scrollVers(Direction.GAUCHE)}>
-            <span class="icone"><IconeFlecheGauche /></span>Précédent
-          </button>
-          <button class="suivant" type="button" onclick={() => scrollVers(Direction.DROITE)}
-            >Suivant
-            <span class="icone"><IconeFlecheDroite /></span>
-          </button>
-        </div>
-      {/if}
-    </div>
-  </div>
-</Brique>
-
-<style>.brique-temoignages {
-  font-family: Marianne;
-}
-.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 .conteneur-carrousel .temoignage {
-  width: 100%;
-  flex-shrink: 0;
-  scroll-snap-align: start;
-}
-.brique-temoignages .carrousel-temoignages .conteneur-carrousel .temoignage:after {
-  content: "";
-  border-bottom: 1px solid #dddddd;
-  width: 15%;
-  display: block;
-  padding-bottom: 32px;
-  margin: 0 auto 0 0;
-}
-@media (min-width: 932px) {
-  .brique-temoignages .carrousel-temoignages .conteneur-carrousel .temoignage:after {
-    content: "";
-    border-bottom: none;
-  }
-}
-@media (min-width: 768px) {
-  .brique-temoignages .carrousel-temoignages .conteneur-carrousel .temoignage {
-    width: calc(50% - var(--gap-des-elements));
-  }
-}
-@media (min-width: 932px) {
-  .brique-temoignages .carrousel-temoignages .conteneur-carrousel .temoignage {
-    padding-left: 32px;
-    box-sizing: border-box;
-    border-left: 1px solid #dddddd;
-  }
-}
-.brique-temoignages .carrousel-temoignages .conteneur-carrousel .temoignage {
-  color: #161616;
-  font-size: 1.25rem;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 2rem;
-}
-.brique-temoignages .carrousel-temoignages .conteneur-carrousel .temoignage h4 {
-  margin: 8px 0 0;
-  font-size: 1.25rem;
-  font-weight: 700;
-  line-height: 2rem;
-}
-.brique-temoignages .carrousel-temoignages .conteneur-carrousel .temoignage h5 {
-  margin: 16px 0 0;
-  color: #161616;
-  font-size: 0.875rem;
-  font-weight: 700;
-  line-height: 1.5rem;
-}
-@media (min-width: 576px) {
-  .brique-temoignages .carrousel-temoignages .conteneur-carrousel .temoignage h5 {
-    font-size: 1rem;
-    font-weight: 700;
-    line-height: 1.5rem;
-  }
-}
-.brique-temoignages .carrousel-temoignages .conteneur-carrousel .temoignage h6 {
-  margin: 4px 0 0;
-  color: #666666;
-  font-size: 0.75rem;
-  font-style: italic;
-  font-weight: 400;
-  line-height: 1.25rem;
-}
-.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;
-}
-.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 .precedent > .icone,
-.brique-temoignages .carrousel-temoignages .conteneur-actions .suivant > .icone {
-  display: flex;
-  align-items: center;
-}</style>

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

@@ -1,8 +0,0 @@
-import type { Temoignage } from "../../../../types";
-interface Props {
-    titre?: string;
-    temoignages?: Temoignage[];
-}
-declare const Temoignages: import("svelte").Component<Props, {}, "">;
-type Temoignages = ReturnType<typeof Temoignages>;
-export default Temoignages;

package/dist/mes-services-cyber/bandeau/Bandeau.svelte

@@ -1,161 +0,0 @@
-<svelte:options customElement="lab-anssi-mes-services-cyber-bandeau" />
-
-<script lang="ts">import { srcAsset } from "../../assets/assets.js";
-const CLE_LOCAL_STORAGE = "lab-anssi-ui-kit-msc-bandeau-affichage";
-let affichage = $state(
-  localStorage.getItem(CLE_LOCAL_STORAGE) || "visible"
-);
-const croix = srcAsset("/icones/croix-blanche.svg");
-</script>
-
-{#if affichage === "visible"}
-  <div class="largeur-totale">
-    <div class="contenu">
-      <button
-        class="fermer"
-        onclick={() => {
-          affichage = "invisible";
-          localStorage.setItem(CLE_LOCAL_STORAGE, "invisible");
-        }}
-      >
-        <img src={croix} alt="fermer" />
-      </button>
-
-      <div class="textes">
-        <h4>
-          🚀 Découvrez MesServicesCyber ! <span class="badge visible-tablette">nouveauté</span>
-        </h4>
-        <p>
-          MesServicesCyber, la plateforme pour faciliter l'accès aux services et ressources de
-          l'ANSSI et de ses partenaires.
-        </p>
-      </div>
-
-      <a
-        href="https://messervices.cyber.gouv.fr/"
-        target="_blank"
-        rel="noopener"
-        id="matomo-bandeau-promotion-msc"
-      >
-        Je découvre MesServicesCyber
-      </a>
-    </div>
-  </div>
-{/if}
-
-<style>.largeur-totale {
-  position: relative;
-  overflow: hidden;
-  background: #0d0c21 url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/illustrations/tuile-msc.svg");
-  background-size: 500px;
-}
-.largeur-totale .contenu {
-  position: relative;
-  color: white;
-  font-family: "Marianne";
-  padding: 16px;
-  max-width: 1200px;
-  margin: auto;
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-  display: flex;
-  flex-direction: column;
-}
-@media (min-width: 932px) {
-  .largeur-totale .contenu {
-    flex-direction: row;
-    gap: 16px;
-    align-items: center;
-  }
-}
-.largeur-totale .contenu .fermer {
-  border: none;
-  cursor: pointer;
-  background: none;
-  padding: 0;
-  transition: transform 0.2s ease-in-out;
-  position: absolute;
-  top: 20px;
-  right: 20px;
-}
-.largeur-totale .contenu .fermer:hover {
-  transform: scale(1.3);
-}
-.largeur-totale .contenu .textes {
-  display: flex;
-  flex-direction: column;
-}
-@media (min-width: 576px) {
-  .largeur-totale .contenu .textes {
-    gap: 8px;
-  }
-}
-.largeur-totale .contenu h4 {
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-  font-weight: 700;
-  margin: 0;
-  display: flex;
-  flex-direction: row;
-  align-items: baseline;
-  gap: 8px;
-}
-@media (min-width: 932px) {
-  .largeur-totale .contenu h4 {
-    font-size: 1rem;
-    line-height: 1.5rem;
-  }
-}
-.largeur-totale .contenu h4 .badge {
-  color: #19753c;
-  background: #b8fec9;
-  border-radius: 4px;
-  padding-right: 6px;
-  padding-left: 6px;
-  font-size: 0.75rem;
-  font-weight: 700;
-  line-height: 1.25rem;
-  text-transform: uppercase;
-  transform: translateY(-3px);
-}
-.largeur-totale .contenu p {
-  font-weight: 400;
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-  margin: 0;
-  padding-right: 32px;
-}
-@media (min-width: 932px) {
-  .largeur-totale .contenu p {
-    font-size: 1rem;
-    line-height: 1.5rem;
-  }
-}
-.largeur-totale .contenu a {
-  display: block;
-  color: #242424;
-  background: white;
-  margin: 8px auto 0 0;
-  text-align: center;
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-  text-decoration: none;
-  gap: 8px;
-  border-radius: 4px;
-  padding: 4px 12px;
-  white-space: nowrap;
-  height: fit-content;
-  width: 100%;
-  max-width: 312px;
-  box-sizing: border-box;
-}
-@media (min-width: 576px) {
-  .largeur-totale .contenu a {
-    max-width: 248px;
-  }
-}
-@media (min-width: 932px) {
-  .largeur-totale .contenu a {
-    margin-right: 32px;
-  }
-}</style>

package/dist/mes-services-cyber/bandeau/Bandeau.svelte.d.ts

@@ -1,3 +0,0 @@
-declare const Bandeau: import("svelte").Component<Record<string, never>, {}, "">;
-type Bandeau = ReturnType<typeof Bandeau>;
-export default Bandeau;

package/dist/mes-services-cyber/lien/LienDiagnosticCyber.svelte

@@ -1,126 +0,0 @@
-<svelte:options customElement="lab-anssi-mes-services-cyber-lien-diagnostic-cyber" />
-
-<script lang="ts">import { srcAsset } from "../../assets/assets";
-let { lien, versExterne = false } = $props();
-let target = versExterne ? "_blank" : "_self";
-let rel = versExterne ? "noreferrer" : void 0;
-let icone = versExterne ? "lien-externe" : "lien-interne";
-</script>
-
-<div class="racine">
-  <a href={lien} {target} class="lien-diagnostic-cyber" {rel}>
-    Votre diagnostic cyber gratuit
-    <img
-      src={srcAsset(`/icones/${icone}.svg`)}
-      alt={`lien-${versExterne ? "externe" : "interne"}`}
-    />
-  </a>
-  <div class="bloc">
-    <div class="texte">
-      <h6>Prenez votre cyberdépart !</h6>
-      <p>
-        Bénéficiez d'un <b>premier diagnostic gratuit</b> et anonyme dans vos locaux ou en visio
-        <b>accompagné par un Aidant cyber</b>.
-      </p>
-    </div>
-    <img
-      class="illustration"
-      src={srcAsset(`/illustrations/dino-kart.svg`)}
-      alt="Votre diagnostic cyber gratuit"
-    />
-  </div>
-</div>
-
-<style>.racine {
-  position: relative;
-  display: block;
-  font-family: Marianne, sans-serif;
-}
-.racine .lien-diagnostic-cyber {
-  font-size: 1rem;
-  line-height: 1.5rem;
-  font-style: normal;
-  font-weight: 500;
-  text-decoration: none;
-  color: var(--diagnostic-cyber-color, #0d0c21);
-  padding: 10px 8px 8px 12px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 8px;
-  border: 1px solid var(--diagnostic-cyber-color, #0d0c21);
-  border-radius: 8px;
-  cursor: pointer;
-  text-wrap: nowrap;
-  justify-content: space-between;
-}
-@media (min-width: 932px) {
-  .racine .lien-diagnostic-cyber {
-    font-size: 0.875rem;
-    line-height: 0.875rem;
-    max-width: fit-content;
-  }
-}
-.racine .lien-diagnostic-cyber:hover + .bloc {
-  visibility: visible;
-  opacity: 1;
-  top: calc(1.5rem + 4px + 4px + 2px + 12px);
-}
-.racine .lien-diagnostic-cyber img {
-  position: relative;
-  top: -1px;
-}
-.racine .bloc {
-  position: absolute;
-  pointer-events: none;
-  top: calc(1.5rem + 1px);
-  right: 0;
-  border-radius: 8px;
-  background: #fff;
-  display: flex;
-  width: 482px;
-  padding: 24px;
-  align-items: center;
-  box-shadow: 0px 4px 12px 0px rgba(0, 0, 18, 0.16);
-  visibility: hidden;
-  opacity: 0;
-  transition: visibility 0.2s linear, opacity 0.2s linear, top 0.2s ease-out;
-  z-index: 1;
-}
-.racine .bloc h6 {
-  font-size: 1.25rem;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 1.75rem;
-  color: var(--diagnostic-cyber-color, #0d0c21);
-  align-self: stretch;
-  margin: 0;
-  margin-block-start: 0;
-  margin-block-end: 0;
-}
-.racine .bloc .texte {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-.racine .bloc .texte > p {
-  font-size: 0.875rem;
-  font-style: normal;
-  font-weight: 400;
-  align-self: stretch;
-  line-height: 1.5rem;
-  color: var(--diagnostic-cyber-color, #0d0c21);
-  margin: 0;
-  margin-block-end: 0;
-  margin-block-start: 0;
-  width: 300px;
-}
-.racine .illustration {
-  display: flex;
-  height: 144px;
-  padding: 6.4px 0px 7.014px 0px;
-  justify-content: center;
-  align-items: center;
-  align-self: stretch;
-  aspect-ratio: 4/3;
-}</style>

package/dist/mes-services-cyber/lien/LienDiagnosticCyber.svelte.d.ts

@@ -1,7 +0,0 @@
-interface Props {
-    lien: any;
-    versExterne?: boolean;
-}
-declare const LienDiagnosticCyber: import("svelte").Component<Props, {}, "">;
-type LienDiagnosticCyber = ReturnType<typeof LienDiagnosticCyber>;
-export default LienDiagnosticCyber;