@lab-anssi/ui-kit 1.61.3 → 1.62.0

package/dist/composants/blog/BandeauTitre.svelte

@@ -0,0 +1,150 @@
+<svelte:options
+  customElement={{
+    tag: "lab-anssi-bandeau-titre",
+    props: {
+      titre: { reflect: false, type: "String", attribute: "titre" },
+      description: { reflect: false, type: "String", attribute: "description" },
+      filAriane: { reflect: false, type: "Array", attribute: "fil-ariane" },
+      tag: { reflect: false, type: "Object", attribute: "tag" },
+    },
+  }}
+/>
+
+<script lang="ts">import Tag from "../Tag.svelte";
+const estLien = (noeud) => noeud.href !== undefined;
+let { titre = undefined, description = "", filAriane = [], infosTag = null } = $props();
+let filArianeVisible = $state(window.matchMedia("(min-width: 576px)").matches);
+</script>
+
+<div class="conteneur-bandeau-entete">
+  <div class="contenu-bandeau-entete">
+    {#if filAriane.length}
+      <slot name="filariane">
+        <div class="fil-ariane">
+          {#if !filArianeVisible}
+            <button onclick={() => (filArianeVisible = true)}>Voir le fil d'Ariane</button>
+          {:else}
+            {#each filAriane as noeud, index (index)}
+              {#if estLien(noeud)}
+                <a href={noeud.href}>{noeud.label}</a>
+              {:else}
+                <span>{noeud.label}</span>
+              {/if}
+            {/each}
+          {/if}
+        </div>
+      </slot>
+    {/if}
+    <div class="conteneur-texte">
+      {#if infosTag}
+        <div class="conteneur-tag">
+          <Tag
+            couleurFond={infosTag.couleurFond}
+            couleurTexte={infosTag.couleurTexte}
+            label={infosTag.label}
+          />
+        </div>
+      {/if}
+      <div class="conteneur-corps">
+        <slot name="titre">
+          <h1>{titre}</h1>
+        </slot>
+        {#if description || $$slots.description}
+          <slot name="description">
+            <span>{description}</span>
+          </slot>
+        {/if}
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>.conteneur-bandeau-entete {
+  background: var(--bandeau-titre-background);
+}
+.conteneur-bandeau-entete .contenu-bandeau-entete {
+  padding: 16px;
+  color: white;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  max-width: 1200px;
+  margin: 0 auto;
+  text-align: left;
+}
+.conteneur-bandeau-entete .contenu-bandeau-entete .conteneur-texte {
+  display: flex;
+  padding: 8px 0 12px 0;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+}
+.conteneur-bandeau-entete .contenu-bandeau-entete .conteneur-texte .conteneur-tag {
+  padding-top: 8px;
+}
+.conteneur-bandeau-entete .contenu-bandeau-entete .conteneur-texte .conteneur-corps {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+}
+.conteneur-bandeau-entete .contenu-bandeau-entete .conteneur-texte .conteneur-corps h1,
+.conteneur-bandeau-entete .contenu-bandeau-entete .conteneur-texte .conteneur-corps :global(::slotted([slot="titre"])) {
+  font-size: 2rem;
+  font-weight: 700;
+  line-height: 2.5rem;
+  margin: 0;
+}
+@media (min-width: 576px) {
+  .conteneur-bandeau-entete .contenu-bandeau-entete .conteneur-texte .conteneur-corps h1,
+  .conteneur-bandeau-entete .contenu-bandeau-entete .conteneur-texte .conteneur-corps :global(::slotted([slot="titre"])) {
+    font-size: 2.5rem;
+    line-height: 3rem;
+  }
+}
+.conteneur-bandeau-entete .contenu-bandeau-entete .conteneur-texte .conteneur-corps span,
+.conteneur-bandeau-entete .contenu-bandeau-entete .conteneur-texte .conteneur-corps :global(::slotted([slot="description"])) {
+  font-size: 1.125rem;
+  font-weight: 400;
+  line-height: 1.75rem;
+  margin: 0;
+}
+.conteneur-bandeau-entete .contenu-bandeau-entete .fil-ariane {
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+.conteneur-bandeau-entete .contenu-bandeau-entete .fil-ariane a,
+.conteneur-bandeau-entete .contenu-bandeau-entete .fil-ariane span,
+.conteneur-bandeau-entete .contenu-bandeau-entete .fil-ariane button {
+  color: white;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+}
+.conteneur-bandeau-entete .contenu-bandeau-entete .fil-ariane button {
+  border: none;
+  background: none;
+  margin: 0;
+  padding: 0;
+  font-family: inherit;
+}
+.conteneur-bandeau-entete .contenu-bandeau-entete .fil-ariane button,
+.conteneur-bandeau-entete .contenu-bandeau-entete .fil-ariane a {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.conteneur-bandeau-entete .contenu-bandeau-entete .fil-ariane a {
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  align-items: center;
+  white-space: nowrap;
+}
+.conteneur-bandeau-entete .contenu-bandeau-entete .fil-ariane a:after {
+  content: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/fleche-droite-blanche.svg");
+  width: 16px;
+  height: 16px;
+  display: flex;
+}</style>

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

@@ -0,0 +1,29 @@
+import type { NoeudFilAriane, InfosTag } from "../../types";
+interface Props {
+    titre?: string;
+    description?: string;
+    filAriane?: NoeudFilAriane[];
+    infosTag?: InfosTag | null;
+}
+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;
+}
+declare const BandeauTitre: $$__sveltets_2_IsomorphicComponent<Props, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    filariane: {};
+    titre: {};
+    description: {};
+}, {}, "">;
+type BandeauTitre = InstanceType<typeof BandeauTitre>;
+export default BandeauTitre;

package/dist/composants/blog/CarteArticle.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">import Tag from "../Tag.svelte";
+import Fleche from "../icones/Fleche.svelte";
+let { article, categorie } = $props();
+</script>
+
+<a class="carte-article" href={article.href}>
+  <div class="conteneur-texte">
+    <Tag
+      couleurFond={categorie.couleurFond}
+      couleurTexte={categorie.couleurTexte}
+      label={categorie.label}
+    />
+    <p>{article.titre}</p>
+  </div>
+  <div class="conteneur-fleche">
+    <Fleche direction="droite" />
+  </div>
+</a>
+
+<style>.carte-article {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  border-radius: 8px;
+  border: 1px solid #dddddd;
+  background: white;
+  padding: 24px 24px 52px 24px;
+  gap: 12px;
+  text-decoration: none;
+  position: relative;
+}
+.carte-article:visited {
+  color: unset;
+}
+.carte-article:hover {
+  background: #f6f6f6;
+}
+.carte-article:active {
+  background: #ededed;
+}
+.carte-article:focus-visible {
+  outline: 2px solid var(--couleur-focus);
+  outline-offset: 2px;
+}
+.carte-article .conteneur-texte {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-width: 100%;
+}
+.carte-article .conteneur-texte p {
+  margin: 0;
+  color: var(--liste-articles-couleur-texte);
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 1.5rem;
+}
+.carte-article .conteneur-fleche {
+  position: absolute;
+  bottom: 24px;
+  right: 24px;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}</style>

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

@@ -0,0 +1,8 @@
+import type { ResumeArticle, InfosTag } from "../../types";
+interface Props {
+    article: ResumeArticle;
+    categorie: InfosTag;
+}
+declare const CarteArticle: import("svelte").Component<Props, {}, "">;
+type CarteArticle = ReturnType<typeof CarteArticle>;
+export default CarteArticle;

package/dist/composants/blog/IconeChevronBas.svelte

@@ -0,0 +1,22 @@
+<svg
+  width="16"
+  height="16"
+  viewBox="0 0 16 16"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  class="chevron"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M7.99999 8.78096L11.3 5.48096L12.2427 6.42362L7.99999 10.6663L3.75732 6.42362L4.69999 5.48096L7.99999 8.78096Z"
+    fill="black"
+  />
+</svg>
+
+<style>svg {
+  flex-shrink: 0;
+}
+svg path {
+  fill: var(--sommaire-actif-couleur);
+}</style>

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

@@ -0,0 +1,26 @@
+export default IconeChevronBas;
+type IconeChevronBas = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const IconeChevronBas: $$__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/blog/IconeMenuLateral.svelte

@@ -0,0 +1,15 @@
+<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="M2 2.66626H14V3.99959H2V2.66626ZM2 7.33293H10V8.66626H2V7.33293ZM2 11.9996H14V13.3329H2V11.9996Z"
+    fill="black"
+  />
+</svg>
+
+<style>svg {
+  flex-shrink: 0;
+}
+svg path {
+  fill: var(--sommaire-actif-couleur);
+}</style>

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

@@ -0,0 +1,26 @@
+export default IconeMenuLateral;
+type IconeMenuLateral = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const IconeMenuLateral: $$__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/blog/ListeArticles.svelte

@@ -0,0 +1,62 @@
+<svelte:options
+  customElement={{
+    tag: "lab-anssi-liste-articles",
+    props: {
+      articles: { reflect: false, type: "Array", attribute: "articles" },
+      categories: { reflect: false, type: "Object", attribute: "categories" },
+      idCategorieChoisie: { reflect: false, type: "String", attribute: "id-categorie-choisie" },
+    },
+  }}
+/>
+
+<script lang="ts">import CarteArticle from "./CarteArticle.svelte";
+import ListeDeroulante from "./ListeDeroulante.svelte";
+let { articles, categories, idCategorieChoisie = $bindable("tous") } = $props();
+const optionsFiltrage = $derived([{
+	label: "Tous les articles",
+	valeur: "tous"
+}, ...Object.entries(categories).map(([idCategorie, donnees]) => ({
+	label: donnees.label,
+	valeur: idCategorie
+}))]);
+let articlesVisibles = $derived(idCategorieChoisie === "tous" ? articles : articles.filter((a) => a.idCategorie === idCategorieChoisie));
+</script>
+
+<div class="liste-articles">
+  <ListeDeroulante bind:valeur={idCategorieChoisie} options={optionsFiltrage} />
+  <h2>
+    {idCategorieChoisie === "tous" ? "Tous les articles" : categories[idCategorieChoisie].label}
+  </h2>
+  <div class="conteneur-articles">
+    {#each articlesVisibles as article, index (index)}
+      <CarteArticle {article} categorie={categories[article.idCategorie]} />
+    {/each}
+  </div>
+</div>
+
+<style>.liste-articles {
+  padding: 48px 16px;
+  max-width: 1200px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+@media (min-width: 932px) {
+  .liste-articles {
+    padding: 48px 24px;
+  }
+}
+.liste-articles h2 {
+  margin: 0;
+  color: #161616;
+  font-size: 1.75rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 2.25rem;
+}
+.liste-articles .conteneur-articles {
+  gap: 16px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
+}</style>

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

@@ -0,0 +1,9 @@
+import type { CategoriesArticle, ResumeArticle } from "../../types";
+interface Props {
+    articles: ResumeArticle[];
+    categories: CategoriesArticle;
+    idCategorieChoisie?: string;
+}
+declare const ListeArticles: import("svelte").Component<Props, {}, "idCategorieChoisie">;
+type ListeArticles = ReturnType<typeof ListeArticles>;
+export default ListeArticles;

package/dist/composants/blog/ListeDeroulante.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">import { srcAsset } from "../../assets/assets";
+let { valeur = $bindable(), options } = $props();
+</script>
+
+<div class="conteneur-liste-deroulante">
+  <div class="conteneur-select">
+    <img
+      src={srcAsset("/icones/fleche-basse-noir.svg")}
+      alt="Icône de flêche de la liste déroulante"
+    />
+    <select bind:value={valeur}>
+      {#each options as option, index (index)}
+        <option label={option.label} value={option.valeur}></option>
+      {/each}
+    </select>
+  </div>
+</div>
+
+<style>.conteneur-select {
+  position: relative;
+  width: fit-content;
+  max-width: 100%;
+}
+.conteneur-select img {
+  position: absolute;
+  right: 12px;
+  top: 12px;
+  pointer-events: none;
+}
+.conteneur-select select {
+  appearance: none;
+  padding: 8px 38px 8px 16px;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  border: none;
+  box-shadow: inset 0 -2px 0 0 #3a3a3a;
+  cursor: pointer;
+  color: #3a3a3a;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.5rem;
+  background: #eeeeee;
+  max-width: 100%;
+  font-family: inherit;
+}
+.conteneur-select select:hover {
+  background: #f6f6f6;
+}
+.conteneur-select select:focus-visible {
+  outline: 2px solid var(--couleur-focus);
+  outline-offset: 2px;
+}
+.conteneur-select select option {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}</style>

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

@@ -0,0 +1,10 @@
+interface Props {
+    valeur: string;
+    options: {
+        label: string;
+        valeur: unknown;
+    }[];
+}
+declare const ListeDeroulante: import("svelte").Component<Props, {}, "valeur">;
+type ListeDeroulante = ReturnType<typeof ListeDeroulante>;
+export default ListeDeroulante;