@lab-anssi/ui-kit 1.61.3 → 1.62.0

package/dist/composants/Alerte.svelte

@@ -0,0 +1,83 @@
+<svelte:options
+  customElement={{
+    tag: "lab-anssi-alerte",
+    props: {
+      description: { reflect: false, type: "String", attribute: "description" },
+      type: { reflect: false, type: "String", attribute: "type" },
+      fermable: { reflect: false, type: "Boolean", attribute: "fermable" },
+    },
+  }}
+/>
+
+<script lang="ts">let { description = undefined, type = "information", fermable = true } = $props();
+let estOuvert = $state(true);
+</script>
+
+{#if estOuvert}
+  <div class="alerte {type}">
+    <span class="icone"></span>
+    <div class="conteneur">
+      <div class="contenu"><slot>{description}</slot></div>
+      {#if fermable}
+        <button
+          class="fermer"
+          aria-label="Fermer l’alerte"
+          onclick={() => {
+            estOuvert = false;
+          }}
+        ></button>
+      {/if}
+    </div>
+  </div>
+{/if}
+
+<style>.alerte {
+  display: flex;
+  min-width: 200px;
+}
+
+.conteneur {
+  border: 2px solid red;
+  border-left: none;
+  display: flex;
+  width: 100%;
+  border-radius: 0 8px 8px 0;
+}
+
+.contenu {
+  flex: 1;
+  padding: 8px;
+  color: #3a3a3a;
+}
+
+.icone {
+  width: 40px;
+  min-width: 40px;
+  border-radius: 8px 0 0 8px;
+}
+
+.information .conteneur {
+  border-color: #0163cb;
+}
+.information .icone {
+  background: no-repeat center 8px #0163cb url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/information.svg");
+}
+
+.erreur .conteneur {
+  border-color: #ce0500;
+}
+.erreur .icone {
+  background: no-repeat center 8px #ce0500 url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/erreur.svg");
+}
+
+.fermer {
+  width: 16px;
+  height: 16px;
+  padding: 8px;
+  margin-top: 3px;
+  margin-right: 3px;
+  background: no-repeat center 8px url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/croix-noire.svg");
+  border: 0;
+  cursor: pointer;
+  box-sizing: content-box;
+}</style>

package/dist/composants/Alerte.svelte.d.ts

@@ -0,0 +1,32 @@
+interface Props {
+    description?: string;
+    type?: "information" | "erreur";
+    fermable?: boolean;
+}
+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 Alerte: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<Props, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, "">;
+type Alerte = InstanceType<typeof Alerte>;
+export default Alerte;

package/dist/composants/AncresParcours.svelte

@@ -0,0 +1,132 @@
+<svelte:options
+  customElement={{
+    tag: "lab-anssi-ancres",
+    props: {
+      ancres: { attribute: "ancres", type: "Array" },
+      indexActif: { attribute: "index-actif", type: "Number" },
+    },
+  }}
+/>
+
+<script lang="ts">let { ancres, indexActif = 0 } = $props();
+let scrollStart = $state(false);
+let scrollEnd = $state(true);
+/**
+* Gère l'affichage des ombres en fonction de la position du scroll.
+* Met à jour les indicateurs `scrollStart` et `scrollEnd` selon la position du scroll :
+* - Si le scroll est au début, `scrollStart` est false et `scrollEnd` est true.
+* - Si le scroll est à la fin, `scrollStart` est true et `scrollEnd` est false.
+* - Sinon, les deux sont true.
+*
+* @param {Event} event - L'événement de scroll déclenché sur le conteneur.
+*/
+function handleScroll(event) {
+	const container = event.currentTarget;
+	const scrollLeft = container.scrollLeft;
+	const scrollWidth = container.scrollWidth;
+	const clientWidth = container.clientWidth;
+	if (scrollLeft === 0) {
+		scrollStart = false;
+		scrollEnd = true;
+	} else if (scrollLeft + clientWidth >= scrollWidth) {
+		scrollStart = true;
+		scrollEnd = false;
+	} else {
+		scrollStart = true;
+		scrollEnd = true;
+	}
+}
+</script>
+
+<nav
+  class="lab-anssi-ancres"
+  class:lab-anssi-ancres--shadow-start={scrollStart}
+  class:lab-anssi-ancres--shadow-end={scrollEnd}
+>
+  <div class="lab-anssi-ancres__conteneur" onscroll={handleScroll}>
+    {#each ancres as ancre, index (ancre.cible)}
+      <a href={ancre.cible} class={["lab-anssi-ancres__item", { active: index === indexActif }]}>
+        {ancre.label}
+      </a>
+    {/each}
+  </div>
+</nav>
+
+<style>.lab-anssi-ancres {
+  box-sizing: border-box;
+}
+@media (max-width: 47.98em) {
+  .lab-anssi-ancres {
+    position: relative;
+  }
+  .lab-anssi-ancres::after {
+    content: "";
+    box-shadow: inset 0 0 0 0 hsla(0, 0%, 9%, 0), inset 0 0 0 0 hsla(0, 0%, 9%, 0);
+    display: block;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    right: 0;
+    pointer-events: none;
+  }
+  .lab-anssi-ancres--shadow-start::after {
+    box-shadow: inset 2rem 0 1.5rem -2rem #161616, inset 0 0 0 0 hsla(0, 0%, 9%, 0);
+  }
+  .lab-anssi-ancres--shadow-end::after {
+    box-shadow: inset 0 0 0 0 hsla(0, 0%, 9%, 0), inset -2rem 0 1.5rem -2rem #161616;
+  }
+  .lab-anssi-ancres--shadow-end.lab-anssi-ancres--shadow-start::after {
+    box-shadow: inset 2rem 0 1.5rem -2rem #161616, inset -2rem 0 1.5rem -2rem #161616;
+  }
+}
+.lab-anssi-ancres__conteneur {
+  display: flex;
+  gap: 0;
+}
+@media (max-width: 47.98em) {
+  .lab-anssi-ancres__conteneur {
+    overflow-x: auto;
+  }
+}
+.lab-anssi-ancres__item {
+  background-color: transparent;
+  font-family: inherit;
+  appearance: none;
+  cursor: pointer;
+  flex: 1;
+  border: 1px solid var(--border-default-grey);
+  padding: 10px 24px;
+  white-space: nowrap;
+  text-decoration: none;
+  color: var(--text-action-high-grey);
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 24px;
+  text-align: center;
+}
+.lab-anssi-ancres__item:not(:last-child) {
+  border-right: none;
+}
+.lab-anssi-ancres__item:hover {
+  background-color: var(--background-default-grey-hover);
+}
+.lab-anssi-ancres__item:active {
+  background-color: var(--background-default-grey-active);
+}
+.lab-anssi-ancres__item:focus-visible {
+  outline-color: #0a76f6;
+  outline-offset: 2px;
+  outline-style: solid;
+  outline-width: 2px;
+}
+.lab-anssi-ancres__item.active {
+  background-color: var(--background-action-low-blue-france);
+  color: var(--text-action-high-blue-france);
+}
+.lab-anssi-ancres__item.active:hover {
+  background-color: var(--background-action-low-blue-france-hover);
+}
+.lab-anssi-ancres__item.active:active {
+  background-color: var(--background-action-low-blue-france-active);
+}</style>

package/dist/composants/AncresParcours.svelte.d.ts

@@ -0,0 +1,11 @@
+type Ancre = {
+    label: string;
+    cible: string;
+};
+interface Props {
+    ancres: Ancre[];
+    indexActif?: number;
+}
+declare const AncresParcours: import("svelte").Component<Props, {}, "">;
+type AncresParcours = ReturnType<typeof AncresParcours>;
+export default AncresParcours;

package/dist/composants/BandeauPage.svelte

@@ -0,0 +1,218 @@
+<svelte:options
+  customElement={{
+    tag: "lab-anssi-bandeau-page",
+    props: {
+      titre: { attribute: "titre", type: "String" },
+      baliseTitre: { attribute: "balise-titre", type: "String" },
+      description: { attribute: "description", type: "String" },
+      mention: { attribute: "mention", type: "String" },
+      urlImage: { attribute: "url-image", type: "String" },
+      sansImage: { attribute: "sans-image", type: "Boolean" },
+      avecFilAriane: { attribute: "avec-fil-ariane", type: "Boolean" },
+      liensFilAriane: { attribute: "liens-fil-ariane", type: "Array" },
+      type: { attribute: "type", type: "String" },
+      theme: { attribute: "theme", type: "String" },
+      inverse: { attribute: "inverse", type: "Boolean" },
+      simple: { attribute: "simple", type: "Boolean" },
+      ficheCatalogue: { attribute: "fiche-catalogue", type: "Boolean" },
+    },
+  }}
+/>
+
+<script lang="ts">import DsfrBreadcrumb from "../dsfr/DsfrBreadcrumb.svelte";
+import DsfrContainer from "../dsfr/DsfrContainer.svelte";
+let { titre, baliseTitre = "h1", description, mention, urlImage, sansImage = false, avecFilAriane = false, liensFilAriane = [], type = "default", theme, inverse = false, simple = false, ficheCatalogue = false } = $props();
+const variationSimple = $derived(type === "simple" || simple);
+const variationFiche = $derived(type === "fiche" || ficheCatalogue);
+const themeClair = $derived(theme === "clair" || inverse);
+</script>
+
+<section
+  class={[
+    "lab-anssi-bandeau-page",
+    {
+      "lab-anssi-bandeau-page--clair": themeClair,
+      "lab-anssi-bandeau-page--sans-image": sansImage,
+      "lab-anssi-bandeau-page--avec-filariane": avecFilAriane,
+      "lab-anssi-bandeau-page--simple": variationSimple,
+      "lab-anssi-bandeau-page--fiche-catalogue": variationFiche,
+      "lab-anssi-bandeau-page--avec-actions": $$slots.buttonsgroup,
+      "lab-anssi-bandeau-page--avec-mention": mention || $$slots.mention,
+    },
+  ]}
+>
+  <DsfrContainer>
+    {#if avecFilAriane}
+      <DsfrBreadcrumb
+        id="breadcrumb-hero"
+        segments={liensFilAriane}
+        buttonAriaLabel="vous êtes ici :"
+        buttonLabel="Voir le fil d'Ariane"
+        inverse={!themeClair}
+        hasMarginVariant
+      />
+    {/if}
+
+    <div class="lab-anssi-bandeau-page__conteneur">
+      <div class="lab-anssi-bandeau-page__principal">
+        {#if $$slots.badgesgroup}
+          <slot name="badgesgroup" />
+        {/if}
+
+        <slot name="titre">
+          <svelte:element this={baliseTitre} class="lab-anssi-bandeau-page__titre">
+            {titre}
+          </svelte:element>
+        </slot>
+
+        <slot name="description">
+          <p class="lab-anssi-bandeau-page__description">
+            {description}
+          </p>
+        </slot>
+
+        {#if $$slots.buttonsgroup && !variationSimple}
+          <div class="lab-anssi-bandeau-page__actions">
+            <slot name="buttonsgroup" />
+          </div>
+        {/if}
+
+        {#if mention || $$slots.mention}
+          <slot name="mention">
+            <p class="lab-anssi-bandeau-page__mention">
+              {mention}
+            </p>
+          </slot>
+        {/if}
+      </div>
+
+      {#if !sansImage && !variationSimple}
+        <div class="lab-anssi-bandeau-page__secondaire">
+          <slot name="media">
+            <figure class="lab-anssi-bandeau-page__illustration">
+              <img src={urlImage} class="lab-anssi-bandeau-page__image" alt="" />
+            </figure>
+          </slot>
+        </div>
+      {/if}
+    </div>
+  </DsfrContainer>
+</section>
+
+<style>:host {
+  display: block;
+  background-color: transparent;
+  box-sizing: border-box;
+}
+
+.lab-anssi-bandeau-page {
+  background-color: var(--background-color, var(--artwork-major-blue-france));
+  overflow: hidden;
+}
+.lab-anssi-bandeau-page, .lab-anssi-bandeau-page * {
+  box-sizing: border-box;
+}
+.lab-anssi-bandeau-page__conteneur {
+  padding-block: 3rem;
+}
+@media (min-width: 62em) {
+  .lab-anssi-bandeau-page__conteneur {
+    display: flex;
+    align-items: center;
+    margin-inline: -0.75rem;
+    padding-block: 2.25rem;
+  }
+}
+@media (min-width: 62em) {
+  .lab-anssi-bandeau-page__principal, .lab-anssi-bandeau-page__secondaire {
+    flex: 0 0 50%;
+    max-width: 50%;
+    width: 50%;
+    padding: 0.75rem;
+  }
+}
+@media (max-width: 61.98em) {
+  .lab-anssi-bandeau-page__principal {
+    padding-block-end: var(--spacing-block-end, 2.5rem);
+  }
+}
+.lab-anssi-bandeau-page__titre,
+.lab-anssi-bandeau-page :global(::slotted([slot="titre"])) {
+  color: var(--text-color-titre, var(--text-inverted-grey));
+  font-weight: 700;
+  font-size: 2.5rem;
+  line-height: 3rem;
+  margin-block: 0 0.75rem;
+}
+.lab-anssi-bandeau-page__description,
+.lab-anssi-bandeau-page :global(::slotted([slot="description"])) {
+  color: var(--text-color-description, var(--text-inverted-grey));
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  margin-block: var(--description-margin-block, 0);
+}
+.lab-anssi-bandeau-page__actions {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+@media (min-width: 62em) {
+  .lab-anssi-bandeau-page__actions {
+    flex-direction: row;
+  }
+}
+.lab-anssi-bandeau-page__mention,
+.lab-anssi-bandeau-page :global(::slotted([slot="mention"])) {
+  color: var(--text-color-description, var(--text-inverted-grey));
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  margin-block: 0;
+}
+.lab-anssi-bandeau-page__illustration {
+  margin: 0;
+}
+.lab-anssi-bandeau-page__image {
+  display: block;
+  max-width: 100%;
+}
+.lab-anssi-bandeau-page--clair {
+  --text-color-titre: var(--text-title-grey);
+  --text-color-description: var(--text-default-grey);
+  background-color: var(--background-color, var(--background-contrast-blue-france));
+}
+.lab-anssi-bandeau-page--avec-filariane {
+  --dsfr-breadcrumb-margin: 0 0 rem(24px) 0;
+  padding-block-start: 1rem;
+}
+.lab-anssi-bandeau-page--avec-filariane .lab-anssi-bandeau-page__conteneur {
+  padding-block-start: 0;
+}
+.lab-anssi-bandeau-page--fiche-catalogue .lab-anssi-bandeau-page__conteneur, .lab-anssi-bandeau-page--fiche-catalogue .lab-anssi-bandeau-page__secondaire {
+  padding-block-end: 0;
+}
+.lab-anssi-bandeau-page--fiche-catalogue .lab-anssi-bandeau-page__principal {
+  --spacing-block-end: 2rem;
+}
+.lab-anssi-bandeau-page--fiche-catalogue .lab-anssi-bandeau-page__secondaire {
+  align-self: flex-end;
+}
+.lab-anssi-bandeau-page--simple {
+  --dsfr-breadcrumb-margin: 0 0 rem(16px) 0;
+}
+.lab-anssi-bandeau-page--simple .lab-anssi-bandeau-page__conteneur {
+  padding-block-end: 0.75rem;
+}
+.lab-anssi-bandeau-page--simple .lab-anssi-bandeau-page__principal {
+  flex: 0 0 100%;
+  max-width: 100%;
+  width: 100%;
+}
+.lab-anssi-bandeau-page--simple:not(.lab-anssi-bandeau-page--avec-filariane) .lab-anssi-bandeau-page__conteneur {
+  padding-block-start: 12px;
+}
+.lab-anssi-bandeau-page--sans-image:not(.lab-anssi-bandeau-page--simple) {
+  --spacing-block-end: 0;
+}
+.lab-anssi-bandeau-page--avec-actions, .lab-anssi-bandeau-page--avec-mention {
+  --description-margin-block: 0 1.5rem;
+}</style>

package/dist/composants/BandeauPage.svelte.d.ts

@@ -0,0 +1,58 @@
+type BreadcrumbSegment = {
+    id: string;
+    label: string;
+    href: string;
+};
+interface Props {
+    /** Titre du bandeau */
+    titre?: string;
+    /** Balise HTML (Hn) du titre */
+    baliseTitre?: string;
+    /** Description du bandeau */
+    description?: string;
+    /** Mention du bandeau */
+    mention?: string;
+    /** Url de l'image */
+    urlImage?: string | undefined;
+    /** Si "vrai", l'image n'est pas affichée */
+    sansImage?: boolean;
+    /** Si "vrai", le fil d'Ariane est affiché */
+    avecFilAriane?: boolean;
+    /** Segments du fil d'Ariane */
+    liensFilAriane?: BreadcrumbSegment[];
+    /** Type du bandeau */
+    type?: "default" | "fiche" | "simple";
+    /** Thème du bandeau */
+    theme?: "clair" | "sombre";
+    /** Inversion du thème _(déprécié - préférer l'utilisation de la prop ``theme="inverse"``)_ */
+    inverse?: boolean;
+    /** Variation "Simple" _(déprécié - préférer l'utilisation de la prop ``type="simple"``)_ */
+    simple?: boolean;
+    /** Variation "Fiche Catalogue" _(déprécié - préférer l'utilisation de la prop ``type="fiche"``)_ */
+    ficheCatalogue?: boolean;
+}
+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 BandeauPage: $$__sveltets_2_IsomorphicComponent<Props, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    badgesgroup: {};
+    titre: {};
+    description: {};
+    buttonsgroup: {};
+    mention: {};
+    media: {};
+}, {}, "">;
+type BandeauPage = InstanceType<typeof BandeauPage>;
+export default BandeauPage;