@lab-anssi/ui-kit 1.25.0 → 1.25.2

package/dist/pied-de-page/NavigationPiedDePage.svelte

@@ -1,63 +0,0 @@
-<svelte:options customElement="lab-anssi-navigation-pied-de-page" />
-
-<script lang="ts">let { conforme = false } = $props();
-</script>
-
-<div class="conteneur-navigation-pied-de-page">
-  <a href="/aPropos">À propos</a>
-  <div class="separateur"></div>
-  <a href="/mentionsLegales">Mentions légales</a>
-  <div class="separateur"></div>
-  <a href="/confidentialite">Politique de confidentialité</a>
-  <div class="separateur"></div>
-  <a href="/cgu">Conditions générales</a>
-  <div class="separateur"></div>
-  <a href="/statistiques">Statistiques d’utilisation</a>
-  <div class="separateur"></div>
-  <a href="/securite">Sécurité</a>
-  <div class="separateur"></div>
-  <a href="/accessibilite">Accessiblité: {conforme ? "conforme" : "non conforme"}</a>
-</div>
-
-<style>.conteneur-navigation-pied-de-page {
-  font-family: "Marianne";
-  list-style: none;
-  display: flex;
-  flex-direction: row;
-  align-items: end;
-  row-gap: 16px;
-  column-gap: 8px;
-  margin: 0 16px;
-  padding: 16px 0;
-  flex-wrap: wrap;
-  border-top: 1px solid #dddddd;
-}
-@media (min-width: 932px) {
-  .conteneur-navigation-pied-de-page {
-    margin: 0 24px;
-    column-gap: 16px;
-  }
-}
-.conteneur-navigation-pied-de-page a {
-  color: #666666;
-  text-decoration: none;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 20px;
-  white-space: nowrap;
-}
-.conteneur-navigation-pied-de-page a:hover {
-  text-decoration: underline;
-  text-decoration-thickness: 1.5px;
-  text-underline-offset: 4px;
-}
-.conteneur-navigation-pied-de-page a:active {
-  background: #ededed;
-}
-
-.separateur {
-  width: 1px;
-  height: 16px;
-  background: #dddddd;
-}</style>

package/dist/pied-de-page/NavigationPiedDePage.svelte.d.ts

@@ -1,6 +0,0 @@
-interface Props {
-    conforme?: boolean;
-}
-declare const NavigationPiedDePage: import("svelte").Component<Props, {}, "">;
-type NavigationPiedDePage = ReturnType<typeof NavigationPiedDePage>;
-export default NavigationPiedDePage;

package/dist/styles/mixins.scss

@@ -1,17 +0,0 @@
-/// Ajoute un style d'outline personnalisé lors du focus clavier (`:focus-visible`).
-@mixin set-focus() {
-  outline: {
-    color: #0a76f6;
-    offset: 2px;
-    style: solid;
-    width: 2px;
-  }
-}
-
-/// Réinitialise le style de base d'un bouton pour supprimer les styles par défaut du navigateur.
-@mixin reset-bouton() {
-  background-color: transparent;
-  font-family: inherit;
-  appearance: none;
-  cursor: pointer;
-}

package/dist/suite-cyber/navigation/AccueilMSC.svelte

@@ -1,65 +0,0 @@
-<script lang="ts">import { srcAsset } from "../../assets/assets.js";
-const accueilMSC = srcAsset("/icones/bouton-accueil-msc.svg");
-const chevronDroite = srcAsset("/icones/chevron-noir.svg");
-</script>
-
-<a
-  href="https://messervices.cyber.gouv.fr"
-  target="_blank"
-  class="accueil-msc"
-  id="mes-services-cyber"
->
-  <div class="icone">
-    <img src={accueilMSC} alt="MesServicesCyber" />
-  </div>
-  <label for="mes-services-cyber">
-    MesServicesCyber
-    <span>Gérer mon profil et mes services</span>
-  </label>
-  <div class="chevron">
-    <img src={chevronDroite} alt="Aller sur MesServicesCyber" />
-  </div>
-</a>
-
-<style>.accueil-msc {
-  font-family: Marianne;
-  font-style: normal;
-  font-weight: normal;
-  cursor: pointer;
-  display: flex;
-  margin-top: 8px;
-  padding: 12px 16px;
-  align-items: center;
-  gap: 12px;
-  align-self: stretch;
-  text-decoration: none;
-}
-.accueil-msc:hover {
-  background-color: #f6f6f6;
-}
-.accueil-msc:active {
-  background-color: #ededed;
-}
-.accueil-msc label {
-  display: flex;
-  padding-bottom: 4px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  flex: 1 0 0;
-  color: #161616;
-  font-family: Marianne;
-  font-size: 18px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 28px;
-  cursor: pointer;
-}
-.accueil-msc label span {
-  color: #3a3a3a;
-  font-family: Marianne;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 20px;
-}</style>

package/dist/suite-cyber/navigation/AccueilMSC.svelte.d.ts

@@ -1,18 +0,0 @@
-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;
-}
-declare const AccueilMsc: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type AccueilMsc = InstanceType<typeof AccueilMsc>;
-export default AccueilMsc;

package/dist/suite-cyber/navigation/BlocLiens.svelte

@@ -1,109 +0,0 @@
-<script lang="ts">let { titre, services } = $props();
-</script>
-
-<div class="bloc">
-  <div class="titre">{titre}</div>
-  <div class="conteneur">
-    {#each services as { nom, lien, icone, labels, classeTracking }, i}
-      <a href={lien} target="_blank" class={classeTracking}>
-        <div class="defaut">
-          <div class="icone">
-            <img src={icone} alt={nom} />
-          </div>
-          <div>{nom}</div>
-        </div>
-        {#if labels}
-          <div class="labels">
-            {#each labels as label}
-              <span>{label}</span>
-            {/each}
-          </div>
-        {/if}
-      </a>
-      {#if i < services.length - 1}
-        <hr />
-      {/if}
-    {/each}
-  </div>
-</div>
-
-<style>.bloc {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  align-self: stretch;
-  justify-content: center;
-  padding-bottom: 8px;
-  gap: 10px;
-}
-.bloc:last-child {
-  padding-bottom: 0;
-}
-.bloc .titre {
-  display: flex;
-  align-self: stretch;
-  color: #666666;
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 20px;
-  text-transform: uppercase;
-}
-.bloc .conteneur {
-  display: flex;
-  flex-direction: column;
-  align-self: stretch;
-  border-radius: 4px;
-  border: 1px solid #dddddd;
-  background: #fff;
-}
-.bloc .conteneur a {
-  text-decoration: none;
-}
-.bloc .conteneur a:hover {
-  background-color: #f6f6f6;
-}
-.bloc .conteneur a:active {
-  background-color: #ededed;
-}
-.bloc .conteneur a .defaut {
-  display: flex;
-  padding: 12px;
-  align-items: center;
-  gap: 12px;
-  flex: 1 0 0;
-  color: #161616;
-  font-size: 16px;
-  font-weight: 500;
-  line-height: 24px;
-}
-.bloc .conteneur a .defaut .icone {
-  display: flex;
-  align-items: center;
-}
-.bloc .conteneur a .labels {
-  display: flex;
-  align-items: flex-start;
-  align-content: flex-start;
-  gap: 8px;
-  align-self: stretch;
-  flex-wrap: wrap;
-  margin-left: 56px;
-}
-.bloc .conteneur a .labels:last-child {
-  margin-bottom: 12px;
-  margin-top: -3px;
-}
-.bloc .conteneur a .labels span {
-  padding: 2px 8px;
-  border-radius: 12px;
-  background: #eee;
-  color: #161616;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 20px;
-}
-.bloc .conteneur hr {
-  border: 0;
-  border-top: 1px solid #ddd;
-  margin: 0 16px;
-}</style>

package/dist/suite-cyber/navigation/BlocLiens.svelte.d.ts

@@ -1,14 +0,0 @@
-type Service = {
-    nom: string;
-    lien: string;
-    icone: string;
-    labels?: string[];
-    classeTracking: string;
-};
-interface Props {
-    titre: string;
-    services: Service[];
-}
-declare const BlocLiens: import("svelte").Component<Props, {}, "">;
-type BlocLiens = ReturnType<typeof BlocLiens>;
-export default BlocLiens;

package/dist/suite-cyber/navigation/Navigation.svelte

@@ -1,231 +0,0 @@
-<svelte:options customElement="lab-anssi-bouton-suite-cyber-navigation" />
-
-<script lang="ts">import { srcAsset } from "../../assets/assets.js";
-import { slide } from "svelte/transition";
-import AccueilMsc from "./AccueilMSC.svelte";
-import BlocLiens from "./BlocLiens.svelte";
-const gauffre = srcAsset("/icones/bouton-gauffre.svg");
-const chevron = srcAsset("/icones/chevron-bleu.svg");
-const croix = srcAsset("/icones/croix-bleu.svg");
-const nis2 = srcAsset("/icones/NIS2.svg");
-const certFr = srcAsset("/icones/CERT-FR.svg");
-const mac = srcAsset("/icones/MAC.svg");
-const mss = srcAsset("/icones/MSS.svg");
-const lienExterne = srcAsset("/icones/lien-externe.svg");
-let { sourceUtm = "" } = $props();
-let estOuvert = $state(false);
-</script>
-
-<div class="suite-cyber">
-  <div class="navigation">
-    <button
-      class:actif={estOuvert}
-      onclick={() => {
-        estOuvert = !estOuvert;
-      }}
-    >
-      <img src={gauffre} alt="La Suite cyber" />
-      <div class="avec-texte">
-        <span>La Suite cyber</span>
-        <img src={chevron} alt={estOuvert ? "ouvert" : "fermé"} class:ouvert={estOuvert} />
-      </div>
-    </button>
-  </div>
-  {#if estOuvert}
-    <div class="contenu" transition:slide>
-      <button class="fermer invisible-tablette" onclick={() => (estOuvert = false)}>
-        Fermer
-        <img src={croix} alt="Fermer" />
-      </button>
-      <AccueilMsc />
-      <div class="services-anssi">
-        <BlocLiens
-          titre="Embarquer dans NIS2"
-          services={[
-            {
-              nom: "MonEspaceNIS2",
-              lien: `https://monespacenis2.cyber.gouv.fr?utm_campaign=suite-cyber&utm_source=${sourceUtm}`,
-              icone: nis2,
-              classeTracking: "nis2",
-            },
-          ]}
-        />
-        <BlocLiens
-          titre="S'informer"
-          services={[
-            {
-              nom: "Le portail du CERT-FR",
-              lien: `https://www.cert.ssi.gouv.fr?utm_campaign=suite-cyber&utm_source=${sourceUtm}`,
-              icone: certFr,
-              classeTracking: "cert-fr",
-            },
-          ]}
-        />
-        <BlocLiens
-          titre="Piloter"
-          services={[
-            {
-              nom: "MonServiceSécurisé",
-              lien: `https://monservicesecurise.cyber.gouv.fr?utm_campaign=suite-cyber&utm_source=${sourceUtm}`,
-              icone: mss,
-              labels: ["Entités publiques"],
-              classeTracking: "mss",
-            },
-          ]}
-        />
-        <BlocLiens
-          titre="Accompagner"
-          services={[
-            {
-              nom: "MonAideCyber",
-              lien: `https://monaide.cyber.gouv.fr?utm_campaign=suite-cyber&utm_source=${sourceUtm}`,
-              icone: mac,
-              classeTracking: "mac",
-            },
-          ]}
-        />
-      </div>
-      <a
-        class="lien-externe site-anssi"
-        href="https://cyber.gouv.fr?utm_campaign=suite-cyber&utm_source={sourceUtm}"
-        target="_blank"
-      >
-        <div>
-          <span>Accéder au site de l'ANSSI</span>
-          <img src={lienExterne} alt="Accéder au site de l'ANSSI" />
-        </div>
-      </a>
-    </div>
-  {/if}
-</div>
-
-<style>.suite-cyber {
-  font-family: Marianne;
-  font-style: normal;
-  font-weight: normal;
-  position: relative;
-}
-.suite-cyber .navigation {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.suite-cyber .navigation button {
-  display: flex;
-  border: none;
-  padding: 8px;
-  justify-content: center;
-  align-items: center;
-  color: #000091;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 24px;
-  cursor: pointer;
-  gap: 8px;
-  background: white;
-}
-.suite-cyber .navigation button:active {
-  background: rgba(0, 0, 0, 0.08);
-}
-.suite-cyber .navigation button:hover {
-  background: rgba(0, 0, 0, 0.04);
-}
-@media (min-width: 932px) {
-  .suite-cyber .navigation button img {
-    width: 16px;
-    height: 16px;
-  }
-}
-.suite-cyber .navigation button > .avec-texte {
-  display: none;
-}
-.suite-cyber .navigation button > .avec-texte > span {
-  font-family: Marianne;
-}
-@media (min-width: 932px) {
-  .suite-cyber .navigation button > .avec-texte {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    white-space: nowrap;
-  }
-}
-.suite-cyber .navigation button.actif {
-  background: #e3e3fd;
-}
-.suite-cyber .navigation button.actif:active {
-  background: #adadf9;
-}
-.suite-cyber .navigation button.actif:hover {
-  background: #c1c1fb;
-}
-.suite-cyber .navigation button img.ouvert {
-  transform: rotate(180deg);
-}
-.suite-cyber .contenu {
-  display: flex;
-  flex-direction: column;
-  background: #fff;
-  width: 100vw;
-  height: 100vh;
-  position: fixed;
-  top: 0;
-  left: 0;
-  overflow-y: scroll !important;
-  overflow-x: hidden;
-  z-index: 1000;
-}
-@media (min-width: 576px) {
-  .suite-cyber .contenu {
-    position: absolute;
-    top: 40px;
-    right: 0;
-    left: unset;
-    width: 360px;
-    height: 540px;
-    box-shadow: 0px 4px 12px 0px rgba(0, 0, 18, 0.16);
-  }
-}
-.suite-cyber .contenu button.fermer {
-  border: none;
-  background: none;
-  color: #000091;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  align-self: flex-end;
-  gap: 8px;
-  padding: 4px 8px 4px 12px;
-  margin: 12px;
-  font-family: "Marianne";
-}
-.suite-cyber .contenu .services-anssi {
-  display: flex;
-  padding: 12px 16px 0px 16px;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 12px;
-  align-self: stretch;
-}
-.suite-cyber .contenu .lien-externe {
-  display: flex;
-  padding: 16px;
-  align-items: center;
-  gap: 4px;
-  align-self: stretch;
-  text-decoration: none;
-}
-.suite-cyber .contenu .lien-externe div {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 6px;
-  color: #666666;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 20px;
-}
-.suite-cyber .contenu .lien-externe div img {
-  line-height: 20px;
-}</style>

package/dist/suite-cyber/navigation/Navigation.svelte.d.ts

@@ -1,6 +0,0 @@
-interface Props {
-    sourceUtm?: string;
-}
-declare const Navigation: import("svelte").Component<Props, {}, "">;
-type Navigation = ReturnType<typeof Navigation>;
-export default Navigation;

package/dist/types/commun.d.ts

@@ -1,55 +0,0 @@
-/**
- * Le fichier `commun.ts` contient des types communs partagés entre plusieurs composants d'un même "scope".
- * Ces `types` peuvent être utilisés pour assurer la cohérence et la réutilisabilité au sein de ce scope.
- */
-import type { Image } from "./global";
-export type Action = {
-    titre: string;
-    lien: string;
-    target?: "_self" | "_blank" | "_parent" | "_top";
-};
-export type Tuiles = {
-    titre: string;
-    illustration: Image;
-    contenu: string;
-}[];
-export type EtapeMarelle = {
-    titre: string;
-    description: string;
-    lien?: {
-        href: string;
-        texte: string;
-        target: "_self" | "_blank" | "_parent" | "_top";
-    };
-    illustration: Image;
-};
-export type Temoignage = {
-    auteur: string;
-    citation: string;
-    source: string;
-};
-export type Lien = {
-    label: string;
-    href: string;
-};
-type Feuille = {
-    label: string;
-};
-export type NoeudFilAriane = Lien | Feuille;
-export type InfosTag = {
-    label: string;
-    couleurTexte: string;
-    couleurFond: string;
-};
-export type TableDesMatieres = {
-    profondeur: number;
-    texte: string;
-    id: string;
-}[];
-export type ResumeArticle = {
-    idCategorie: string;
-    titre: string;
-    href: string;
-};
-export type CategoriesArticle = Record<string, InfosTag>;
-export {};

package/dist/types/commun.js

@@ -1 +0,0 @@
-export {};

package/dist/types/global.d.ts

@@ -1,22 +0,0 @@
-/**
- * Le fichier `global.ts` contient les `types` globaux utilisés dans l'application.
- * Il regroupe les `types` pouvant être utilisés par l'ensemble des éléments de l'application (DSFR & LAB).
- * Ces `types` peuvent être étendus, modifiés ou être combinés pour créer des `types` plus complexes selon les besoins de l'application.
- *
- * > [!NOTE] : Les `types` définis ici respectent les conventions de nommage propre au contexte qui ont engendrés leurs créations.
- * > Cela signifie que les `types` en provenance du DSFR sont nommés selon les conventions du DSFR et il est en de même pour les `types` en provenance du LAB.
- */
-export type Accent = "défaut" | "green-tilleul-verveine" | "green-bourgeon" | "green-emeraude" | "green-menthe" | "green-archipel" | "blue-ecume" | "blue-cumulus" | "purple-glycine" | "pink-macaron" | "pink-tuile" | "yellow-tournesol" | "yellow-moutarde" | "orange-terre-battue" | "brown-cafe-creme" | "brown-caramel" | "brown-opera" | "beige-gris-galet";
-export type iconPlace = "only" | "left" | "right";
-export type Size = "sm" | "md" | "lg" | "xl";
-export type Status = "success" | "warning" | "error" | "info" | "new";
-export type Target = "self" | "blank";
-export type Image = {
-    lien: string;
-    alt: string;
-};
-export type Video = {
-    source: string;
-    sourcesoustitres?: string;
-    imagedecouverture?: string;
-};

package/dist/types/global.js

@@ -1,9 +0,0 @@
-/**
- * Le fichier `global.ts` contient les `types` globaux utilisés dans l'application.
- * Il regroupe les `types` pouvant être utilisés par l'ensemble des éléments de l'application (DSFR & LAB).
- * Ces `types` peuvent être étendus, modifiés ou être combinés pour créer des `types` plus complexes selon les besoins de l'application.
- *
- * > [!NOTE] : Les `types` définis ici respectent les conventions de nommage propre au contexte qui ont engendrés leurs créations.
- * > Cela signifie que les `types` en provenance du DSFR sont nommés selon les conventions du DSFR et il est en de même pour les `types` en provenance du LAB.
- */
-export {};

package/dist/types/index.d.ts

@@ -1,2 +0,0 @@
-export type * from "./global";
-export type * from "./commun";

package/dist/types/index.js

@@ -1 +0,0 @@
-export {};

package/dist/utilitaires/index.d.ts

@@ -1,6 +0,0 @@
-/**
- * Génère une classe d'icône FR avec validation
- * @param {string} icon - Le nom de l'icône
- * @returns {string} La classe CSS complète ou une classe par défaut
- */
-export declare function setIconClass(icon: string): string | undefined;

package/dist/utilitaires/index.js

@@ -1,12 +0,0 @@
-/**
- * Génère une classe d'icône FR avec validation
- * @param {string} icon - Le nom de l'icône
- * @returns {string} La classe CSS complète ou une classe par défaut
- */
-export function setIconClass(icon) {
-    if (!icon || typeof icon !== "string") {
-        console.warn("iconClass: La prop `icon` doit être une chaîne de caractères");
-        return;
-    }
-    return `fr-icon-${icon}`;
-}

package/dist/webcomponents/index.vide.js

@@ -1 +0,0 @@
-function noOp() { }

package/dist/webcomponents/lab-anssi-ui-kit.jsx.d.ts

@@ -1,29 +0,0 @@
-declare namespace JSX {
-  interface IntrinsicElements {
-    "lab-anssi-alerte": {};
-    "lab-anssi-centre-aide": {};
-    "lab-anssi-bouton-suite-cyber-navigation": {};
-    "lab-anssi-navigation-pied-de-page": {};
-    "lab-anssi-mes-services-cyber-lien-diagnostic-cyber": {};
-    "lab-anssi-mes-services-cyber-bandeau": {};
-    "lab-anssi-bouton": {};
-    "lab-anssi-icone": {};
-    "lab-anssi-lien": {};
-    "lab-anssi-resume-pssi": {};
-    "lab-anssi-tag": {};
-    "lab-anssi-brique-contenu-a-deux-colonnes": {};
-    "lab-anssi-brique-hero": {};
-    "lab-anssi-titre-multimedia": {};
-    "lab-anssi-presentation-anssi": {};
-    "lab-anssi-brique-rejoindre-la-communaute": {};
-    "lab-anssi-temoignages": {};
-    "lab-anssi-marelle": {};
-    "lab-anssi-carrousel-tuiles": {};
-    "lab-anssi-bandeau-titre": {};
-    "lab-anssi-liste-articles": {};
-    "lab-anssi-page-crisp": {};
-    "lab-anssi-ancres": {};
-    "lab-anssi-filtres": {};
-    "lab-anssi-hero": {};
-  }
-}