@starterlib/ui 0.12.0 → 0.13.0

package/README.md

@@ -55,7 +55,7 @@ l'histogramme depuis la 0.12.0, P08-18).
 | `@starterlib/ui/indicateurs`  | pastille de statut (`st-status-pill`), badge et compteur ancre (`st-badge`, `st-badge-ancre`), etiquettes et groupes d'etiquettes (`st-tag`, `st-tag-group`, `st-groupe-d-etiquettes`)                                                                                                                                                                                                                                                            | aucun                                                                      |
 | `@starterlib/ui/mise-en-page` | section, separateur, texte long (`st-text`), rangee de reglage (`st-settings-row`), groupe de boutons (`st-button-group`)                                                                                                                                                                                                                                                                                                                         | aucun                                                                      |
 | `@starterlib/ui/force`        | l'adaptateur de la jauge de force du mot de passe (`chargerEstimateurZxcvbn`, ADR web 0011) : jamais importe statiquement, charge a la premiere frappe par `fournirEstimateurDeForce`, jamais partage en federation                                                                                                                                                                                                                               | `@zxcvbn-ts/*`, pairs OPTIONNELS, par imports dynamiques                   |
-| `@starterlib/ui/virtuel`      | la liste virtuelle (`st-virtual-list`, `stVirtualItem`) : plusieurs milliers de lignes affichees ensemble, la fenetre seule rendue ; bonus sous condition ecrite du lot 267 (`packages/ui/virtuel/README.md`)                                                                                                                                                                                                                                     | `@angular/cdk/scrolling` — et rien d'autre                                 |
+| `@starterlib/ui/virtuel`      | la liste virtuelle (`st-virtual-list`, `stVirtualItem`) et le tableau virtualise (`st-virtual-table`, P08-19) : des milliers a des centaines de milliers de lignes affichees ensemble, la fenetre seule rendue ; bonus sous condition ecrite du lot 267 (`packages/ui/virtuel/README.md`)                                                                                                                                                         | `@angular/cdk/scrolling` — et rien d'autre                                 |
 
 ```ts
 import { StButton, StCard, StError } from '@starterlib/ui';
@@ -451,6 +451,16 @@ seule emission de `atteint` ; `lu()` compose l'indisponibilite du bouton qui sui
 libelles du point d'entree (`LibellesDonnees`, `fournirLibellesDonnees`). Recette :
 `docs/recettes/accepter-apres-lecture.md`.
 
+Visionneuse de pieces (0.13.0, P08-17) — `st-image-viewer` (`ui/donnees`) : une image ou deux cote a
+cote (`images` : `{ contenu: Blob, libelle }`), a inspecter sans la telecharger. Le contenu, charge par
+l'application (`@starterlib/core`, piece servie sans cache), est decode une fois et dessine dans un
+canevas : aucune adresse vers l'image, aucune `ObjectURL`, aucun bouton de telechargement ; canevas
+vides a la destruction. Zoom, rotation et contraste communs aux deux panneaux, defilements lies, au
+clavier (`+`, `-`, `r`, `Maj+r`, `c`, `Maj+c`, `0`) et a la barre d'outils ; `filigrane` (identite de
+l'operateur et date) a l'ecran comme a l'impression, ou les images, elles, ne s'impriment pas. Le
+champ de televersement propose l'appareil photo par l'entree `capture` de `st-file-upload`
+(`environment` ou `user`), le choix de fichiers restant toujours possible.
+
 Courbe et tendance (0.11.0, P08-07) — `@starterlib/ui/graphiques`, point d'entree OPTIONNEL (12 000
 octets en brotli au plus, `BUDGET_BR`), du SVG ecrit a la main sans bibliotheque. `st-line-chart` :
 une a quatre `series` (`{ libelle, points: [{ instant, valeur }], trait? }`, valeurs en CHAINE

package/assets/icones/catalogue.json

@@ -1,6 +1,6 @@
 {
   "paquet": "@starterlib/ui",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "sprite": {
     "fichier": "sprite.svg",
     "empreinte": "67749CA7",

package/fesm2022/starterlib-ui-donnees.mjs

@@ -1,6 +1,6 @@
 import { DOCUMENT, Location, NgTemplateOutlet } from "@angular/common";
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, Component, DOCUMENT as DOCUMENT$1, DestroyRef, ElementRef, InjectionToken, afterNextRender, booleanAttribute, computed, effect, inject, input, linkedSignal, numberAttribute, output, signal, untracked, viewChild } from "@angular/core";
+import { ChangeDetectionStrategy, Component, DOCUMENT as DOCUMENT$1, DestroyRef, ElementRef, InjectionToken, afterNextRender, booleanAttribute, computed, effect, inject, input, linkedSignal, numberAttribute, output, signal, untracked, viewChild, viewChildren } from "@angular/core";
 import { formaterIban, masquerCarte, masquerIban, masquerTelephone, partiesDuMontant, quatreDerniers } from "@starterlib/util/valeurs";
 import { tenue } from "@starterlib/tokens";
 import { AnnonceLocale, FUSEAU_PAR_DEFAUT, ST_LIBELLES, ST_LOCALE, ST_MONTANTS_MASQUES, StAvatar, StIcon, StIconButton, StIdentifiants, StInlineMessage, StLink, StTimer, catalogueDuPointDEntree, copierDansLePressePapiers, partagerLaValeur, pressePapiersDisponible } from "@starterlib/ui";
@@ -1322,10 +1322,10 @@ var StNumber = class StNumber {
 	}, ...ngDevMode ? [{ debugName: "signe" }] : /* istanbul ignore next */ []);
 	options = computed(() => {
 		const decimales = this.decimales();
-		const min = borner(typeof decimales === "number" ? decimales : decimales.min);
+		const min = borner$1(typeof decimales === "number" ? decimales : decimales.min);
 		const base = {
 			minimumFractionDigits: min,
-			maximumFractionDigits: Math.max(min, borner(typeof decimales === "number" ? decimales : decimales.max)),
+			maximumFractionDigits: Math.max(min, borner$1(typeof decimales === "number" ? decimales : decimales.max)),
 			signDisplay: this.signeExplicite() ? "exceptZero" : "negative"
 		};
 		const format = this.format();
@@ -1523,7 +1523,7 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-function borner(decimales) {
+function borner$1(decimales) {
 	return Number.isFinite(decimales) ? Math.min(100, Math.max(0, Math.trunc(decimales))) : 0;
 }
 const PARTIES = [
@@ -4055,13 +4055,35 @@ const LIBELLES_DONNEES_FR = {
 	finDuDocument: "Fin du document",
 	aJour: (age) => `\u00c0 jour, ${age}`,
 	perimeeDepuis: (duree) => `P\u00e9rim\u00e9e depuis ${duree}`,
-	libelleDeLaDonnee: (libelle) => `${libelle}\u00a0: `
+	libelleDeLaDonnee: (libelle) => `${libelle}\u00a0: `,
+	outilsDeLaVisionneuse: "Outils de la visionneuse",
+	reduire: "Réduire",
+	agrandir: "Agrandir",
+	tournerAGauche: "Tourner à gauche",
+	tournerADroite: "Tourner à droite",
+	moinsDeContraste: "Moins de contraste",
+	plusDeContraste: "Plus de contraste",
+	vueDOrigine: "Vue d’origine",
+	raccourcisDeLaVisionneuse: "Raccourcis\xA0: + et − pour le zoom, R et Maj+R pour tourner, C et Maj+C pour le contraste, 0 pour la vue d’origine\xA0; les flèches font défiler l’image.",
+	etatDeLaVue: (zoom, rotation, contraste) => `Zoom ${zoom.toString()}\u00a0%, rotation ${rotation.toString()}\u00a0degr\u00e9s, contraste ${contraste.toString()}\u00a0%`,
+	imageIllisible: "Image illisible."
 };
 const LIBELLES_DONNEES_EN = {
 	finDuDocument: "End of document",
 	aJour: (age) => `Up to date, ${age}`,
 	perimeeDepuis: (duree) => `Stale for ${duree}`,
-	libelleDeLaDonnee: (libelle) => `${libelle}: `
+	libelleDeLaDonnee: (libelle) => `${libelle}: `,
+	outilsDeLaVisionneuse: "Viewer tools",
+	reduire: "Zoom out",
+	agrandir: "Zoom in",
+	tournerAGauche: "Rotate left",
+	tournerADroite: "Rotate right",
+	moinsDeContraste: "Less contrast",
+	plusDeContraste: "More contrast",
+	vueDOrigine: "Reset view",
+	raccourcisDeLaVisionneuse: "Shortcuts: + and − to zoom, R and Shift+R to rotate, C and Shift+C for contrast, 0 to reset; arrow keys scroll the image.",
+	etatDeLaVue: (zoom, rotation, contraste) => `Zoom ${zoom.toString()}%, rotation ${rotation.toString()} degrees, contrast ${contraste.toString()}%`,
+	imageIllisible: "Unreadable image."
 };
 const ST_LIBELLES_DONNEES = new InjectionToken("ST_LIBELLES_DONNEES", {
 	providedIn: "root",
@@ -4407,6 +4429,337 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-export { LIBELLES_DONNEES_EN, LIBELLES_DONNEES_FR, OPACITE_DE_FILIGRANE, ST_LIBELLES_DONNEES, StAmountSummary, StAvatarGroup, StBarList, StCode, StCount, StDate, StDeadline, StDocument, StDuration, StFreshness, StKbd, StLuJusquAuBout, StMasked, StMeter, StMoney, StNumber, StPerson, StRelativeTime, StRepartition, StStat, StStatGroup, StWatermark, catalogueDesDonnees, fournirLibellesDonnees, libellesDesDonnees, motifDeFiligrane, zonesDeJauge };
+const BORNES_DE_LA_VISIONNEUSE = {
+	zoom: {
+		min: .5,
+		max: 4,
+		pas: .25
+	},
+	contraste: {
+		min: .5,
+		max: 2,
+		pas: .25
+	}
+};
+function borner(valeur, bornes) {
+	return Math.min(bornes.max, Math.max(bornes.min, valeur));
+}
+function vider(toile) {
+	toile.width = 0;
+	toile.height = 0;
+}
+var StImageViewer = class StImageViewer {
+	images = input.required(...ngDevMode ? [{ debugName: "images" }] : /* istanbul ignore next */ []);
+	libelle = input.required(...ngDevMode ? [{ debugName: "libelle" }] : /* istanbul ignore next */ []);
+	filigrane = input(null, ...ngDevMode ? [{ debugName: "filigrane" }] : /* istanbul ignore next */ []);
+	libelles = libellesDesDonnees();
+	bornes = BORNES_DE_LA_VISIONNEUSE;
+	zoom = signal(1, ...ngDevMode ? [{ debugName: "zoom" }] : /* istanbul ignore next */ []);
+	rotation = signal(0, ...ngDevMode ? [{ debugName: "rotation" }] : /* istanbul ignore next */ []);
+	contraste = signal(1, ...ngDevMode ? [{ debugName: "contraste" }] : /* istanbul ignore next */ []);
+	etats = signal([], ...ngDevMode ? [{ debugName: "etats" }] : /* istanbul ignore next */ []);
+	dimensions = signal([], ...ngDevMode ? [{ debugName: "dimensions" }] : /* istanbul ignore next */ []);
+	ajustements = signal([], ...ngDevMode ? [{ debugName: "ajustements" }] : /* istanbul ignore next */ []);
+	toiles = viewChildren("toile", ...ngDevMode ? [{ debugName: "toiles" }] : /* istanbul ignore next */ []);
+	defilements = viewChildren("defilement", ...ngDevMode ? [{ debugName: "defilements" }] : /* istanbul ignore next */ []);
+	annonce = new AnnonceLocale(inject(DestroyRef));
+	identifiantDeLAide = inject(StIdentifiants).prochain("st-image-viewer-aide");
+	generation = 0;
+	synchronisationEnCours = false;
+	affichees = computed(() => this.images().slice(0, 2), ...ngDevMode ? [{ debugName: "affichees" }] : /* istanbul ignore next */ []);
+	transformation = computed(() => `rotate(${this.rotation().toString()}deg)`, ...ngDevMode ? [{ debugName: "transformation" }] : /* istanbul ignore next */ []);
+	filtre = computed(() => `contrast(${this.contraste().toString()})`, ...ngDevMode ? [{ debugName: "filtre" }] : /* istanbul ignore next */ []);
+	mesures = computed(() => {
+		const couchee = this.rotation() % 180 !== 0;
+		return this.affichees().map((_, indice) => {
+			const dimensions = this.dimensions()[indice];
+			if (dimensions === null || dimensions === void 0) return null;
+			const echelle = (this.ajustements()[indice] ?? 1) * this.zoom();
+			const largeur = dimensions.largeur * echelle;
+			const hauteur = dimensions.hauteur * echelle;
+			return {
+				largeur,
+				hauteur,
+				boiteLargeur: couchee ? hauteur : largeur,
+				boiteHauteur: couchee ? largeur : hauteur
+			};
+		});
+	}, ...ngDevMode ? [{ debugName: "mesures" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect(() => {
+			const images = this.affichees();
+			const toiles = this.toiles();
+			untracked(() => {
+				this.dessiner(images, toiles);
+			});
+		});
+		inject(DestroyRef).onDestroy(() => {
+			this.generation += 1;
+			for (const toile of this.toiles()) vider(toile.nativeElement);
+		});
+	}
+	async dessiner(images, toiles) {
+		this.generation += 1;
+		const generation = this.generation;
+		for (const toile of toiles) vider(toile.nativeElement);
+		this.etats.set(images.map(() => "chargement"));
+		this.dimensions.set(images.map(() => null));
+		await Promise.all(images.map(async (image, indice) => {
+			const toile = toiles[indice]?.nativeElement;
+			if (toile === void 0) return;
+			let etat = "illisible";
+			let dimensions = null;
+			try {
+				const bitmap = await createImageBitmap(image.contenu, { imageOrientation: "from-image" });
+				try {
+					if (generation !== this.generation) return;
+					const contexte = toile.getContext("2d");
+					if (contexte !== null) {
+						toile.width = bitmap.width;
+						toile.height = bitmap.height;
+						contexte.drawImage(bitmap, 0, 0);
+						dimensions = {
+							largeur: bitmap.width,
+							hauteur: bitmap.height
+						};
+						etat = "prete";
+					}
+				} finally {
+					bitmap.close();
+				}
+			} catch {
+				etat = "illisible";
+			}
+			if (generation !== this.generation) return;
+			const largeurDuPanneau = this.defilements()[indice]?.nativeElement.clientWidth ?? 0;
+			this.ajustements.update((liste) => {
+				const suite = [...liste];
+				suite[indice] = dimensions !== null && largeurDuPanneau > 0 ? Math.min(1, largeurDuPanneau / dimensions.largeur) : 1;
+				return suite;
+			});
+			this.dimensions.update((liste) => liste.map((d, i) => i === indice ? dimensions : d));
+			this.etats.update((liste) => liste.map((e, i) => i === indice ? etat : e));
+		}));
+	}
+	zoomer(sens) {
+		const { pas } = BORNES_DE_LA_VISIONNEUSE.zoom;
+		this.zoom.set(borner(this.zoom() + sens * pas, BORNES_DE_LA_VISIONNEUSE.zoom));
+		this.annoncerLaVue();
+	}
+	tourner(degres) {
+		this.rotation.set((this.rotation() + degres + 360) % 360);
+		this.annoncerLaVue();
+	}
+	contraster(sens) {
+		const { pas } = BORNES_DE_LA_VISIONNEUSE.contraste;
+		this.contraste.set(borner(this.contraste() + sens * pas, BORNES_DE_LA_VISIONNEUSE.contraste));
+		this.annoncerLaVue();
+	}
+	reinitialiser() {
+		this.zoom.set(1);
+		this.rotation.set(0);
+		this.contraste.set(1);
+		this.annoncerLaVue();
+	}
+	pourcentage(valeur) {
+		return Math.round(valeur * 100);
+	}
+	annoncerLaVue() {
+		this.annonce.annoncer(this.libelles().etatDeLaVue(this.pourcentage(this.zoom()), this.rotation(), this.pourcentage(this.contraste())));
+	}
+	auClavier(evenement) {
+		if (evenement.ctrlKey || evenement.metaKey || evenement.altKey) return;
+		const action = {
+			"+": () => {
+				this.zoomer(1);
+			},
+			"=": () => {
+				this.zoomer(1);
+			},
+			"-": () => {
+				this.zoomer(-1);
+			},
+			r: () => {
+				this.tourner(90);
+			},
+			R: () => {
+				this.tourner(-90);
+			},
+			c: () => {
+				this.contraster(1);
+			},
+			C: () => {
+				this.contraster(-1);
+			},
+			"0": () => {
+				this.reinitialiser();
+			}
+		}[evenement.key];
+		if (action === void 0) return;
+		evenement.preventDefault();
+		action();
+	}
+	synchroniser(indice) {
+		if (this.synchronisationEnCours) return;
+		const panneaux = this.defilements().map((reference) => reference.nativeElement);
+		const source = panneaux[indice];
+		if (source === void 0 || panneaux.length < 2) return;
+		const horizontal = source.scrollWidth - source.clientWidth;
+		const vertical = source.scrollHeight - source.clientHeight;
+		this.synchronisationEnCours = true;
+		for (const [rang, cible] of panneaux.entries()) {
+			if (rang === indice) continue;
+			cible.scrollLeft = horizontal > 0 ? source.scrollLeft / horizontal * (cible.scrollWidth - cible.clientWidth) : 0;
+			cible.scrollTop = vertical > 0 ? source.scrollTop / vertical * (cible.scrollHeight - cible.clientHeight) : 0;
+		}
+		this.synchronisationEnCours = false;
+	}
+	interdireLeMenu(evenement) {
+		evenement.preventDefault();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: StImageViewer,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: StImageViewer,
+		isStandalone: true,
+		selector: "st-image-viewer",
+		inputs: {
+			images: {
+				classPropertyName: "images",
+				publicName: "images",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			libelle: {
+				classPropertyName: "libelle",
+				publicName: "libelle",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			filigrane: {
+				classPropertyName: "filigrane",
+				publicName: "filigrane",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "role": "group" },
+			listeners: { "keydown": "auClavier($event)" },
+			properties: { "attr.aria-label": "libelle()" },
+			classAttribute: "st-image-viewer"
+		},
+		viewQueries: [{
+			propertyName: "toiles",
+			predicate: ["toile"],
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "defilements",
+			predicate: ["defilement"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<div\n  class=\"st-image-viewer__barre\"\n  role=\"toolbar\"\n  [attr.aria-label]=\"libelles().outilsDeLaVisionneuse\"\n>\n  <button\n    stIconButton\n    type=\"button\"\n    icone=\"cercle-moins\"\n    [etiquette]=\"libelles().reduire\"\n    [indisponible]=\"zoom() <= bornes.zoom.min\"\n    (click)=\"zoomer(-1)\"\n  ></button>\n  <span class=\"st-image-viewer__mesure\" aria-hidden=\"true\">{{ pourcentage(zoom()) }}&#160;%</span>\n  <button\n    stIconButton\n    type=\"button\"\n    icone=\"cercle-plus\"\n    [etiquette]=\"libelles().agrandir\"\n    [indisponible]=\"zoom() >= bornes.zoom.max\"\n    (click)=\"zoomer(1)\"\n  ></button>\n  <button\n    stIconButton\n    type=\"button\"\n    icone=\"rotation-arriere\"\n    [etiquette]=\"libelles().tournerAGauche\"\n    (click)=\"tourner(-90)\"\n  ></button>\n  <button\n    stIconButton\n    type=\"button\"\n    icone=\"redemarrer\"\n    [etiquette]=\"libelles().tournerADroite\"\n    (click)=\"tourner(90)\"\n  ></button>\n  <button\n    stIconButton\n    type=\"button\"\n    icone=\"luminosite\"\n    [etiquette]=\"libelles().moinsDeContraste\"\n    [indisponible]=\"contraste() <= bornes.contraste.min\"\n    (click)=\"contraster(-1)\"\n  ></button>\n  <button\n    stIconButton\n    type=\"button\"\n    icone=\"contraste\"\n    [etiquette]=\"libelles().plusDeContraste\"\n    [indisponible]=\"contraste() >= bornes.contraste.max\"\n    (click)=\"contraster(1)\"\n  ></button>\n  <button\n    stIconButton\n    type=\"button\"\n    icone=\"historique\"\n    [etiquette]=\"libelles().vueDOrigine\"\n    (click)=\"reinitialiser()\"\n  ></button>\n</div>\n<p class=\"st-image-viewer__aide\" [id]=\"identifiantDeLAide\">\n  {{ libelles().raccourcisDeLaVisionneuse }}\n</p>\n<div\n  class=\"st-image-viewer__panneaux\"\n  [class.st-image-viewer__panneaux--double]=\"affichees().length > 1\"\n>\n  @for (image of affichees(); track $index) {\n    <figure class=\"st-image-viewer__panneau\">\n      <div\n        #defilement\n        class=\"st-image-viewer__defilement\"\n        tabindex=\"0\"\n        role=\"group\"\n        [attr.aria-label]=\"image.libelle\"\n        [attr.aria-describedby]=\"identifiantDeLAide\"\n        [attr.aria-busy]=\"etats()[$index] === 'chargement' ? 'true' : null\"\n        (scroll)=\"synchroniser($index)\"\n      >\n        @let mesure = mesures()[$index];\n        <div\n          class=\"st-image-viewer__boite\"\n          [style.width.px]=\"mesure?.boiteLargeur ?? 0\"\n          [style.height.px]=\"mesure?.boiteHauteur ?? 0\"\n        >\n          <canvas\n            #toile\n            class=\"st-image-viewer__toile\"\n            role=\"img\"\n            draggable=\"false\"\n            [attr.aria-label]=\"image.libelle\"\n            [style.width.px]=\"mesure?.largeur ?? 0\"\n            [style.height.px]=\"mesure?.hauteur ?? 0\"\n            [style.transform]=\"transformation()\"\n            [style.filter]=\"filtre()\"\n            (contextmenu)=\"interdireLeMenu($event)\"\n          ></canvas>\n        </div>\n      </div>\n      @if (filigrane(); as texte) {\n        <st-watermark [texte]=\"texte\" />\n      }\n      <figcaption class=\"st-image-viewer__legende\">{{ image.libelle }}</figcaption>\n      @if (etats()[$index] === 'illisible') {\n        <p class=\"st-image-viewer__erreur\" role=\"status\">{{ libelles().imageIllisible }}</p>\n      }\n    </figure>\n  }\n</div>\n<span class=\"st-vh\" aria-live=\"polite\">{{ annonce.texte() }}</span>\n",
+		styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:grid;gap:var(--st-espacement-2);min-inline-size:0}.st-image-viewer__barre{display:flex;flex-wrap:wrap;gap:var(--st-espacement-1);align-items:center}.st-image-viewer__mesure{font-size:var(--st-taille-xs);line-height:var(--st-interligne-xs);font-weight:var(--st-graisse-moyenne);letter-spacing:var(--st-interlettrage-large);min-inline-size:4ch;font-variant-numeric:var(--st-chiffres-alignes);color:var(--st-couleur-texte-discret);text-align:center}.st-image-viewer__aide{font-size:var(--st-taille-xs);line-height:var(--st-interligne-xs);font-weight:var(--st-graisse-moyenne);letter-spacing:var(--st-interlettrage-large);margin:0;color:var(--st-couleur-texte-discret)}.st-image-viewer__panneaux{display:grid;gap:var(--st-espacement-3)}@container (min-width: 48rem){.st-image-viewer__panneaux--double{grid-template-columns:repeat(2,minmax(0,1fr))}}.st-image-viewer__panneau{position:relative;display:grid;gap:var(--st-espacement-1);min-inline-size:0;margin:0}.st-image-viewer__defilement:focus-visible{outline:var(--st-focus-epaisseur) solid var(--st-couleur-anneau-focus);outline-offset:var(--st-focus-decalage);box-shadow:0 0 0 var(--st-focus-lisere) var(--st-couleur-lisere-focus)}.st-image-viewer__defilement{overflow:auto;max-block-size:70vh;border:var(--st-epaisseur-fine) solid var(--st-couleur-bordure);border-radius:var(--st-rayon-sm);background-color:var(--st-couleur-surface-conteneur-bas)}.st-image-viewer__boite{display:grid;place-items:center;margin-inline:auto}.st-image-viewer__toile{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.st-image-viewer__legende{font-size:var(--st-taille-xs);line-height:var(--st-interligne-xs);font-weight:var(--st-graisse-moyenne);letter-spacing:var(--st-interlettrage-large);color:var(--st-couleur-texte-discret)}.st-image-viewer__erreur{font-size:var(--st-taille-md);line-height:var(--st-interligne-md);font-weight:var(--st-graisse-normale);letter-spacing:var(--st-interlettrage-normal);margin:0;color:var(--st-couleur-erreur)}@media print{.st-image-viewer__barre,.st-image-viewer__aide,.st-image-viewer__toile{display:none}}\n"],
+		dependencies: [{
+			kind: "component",
+			type: StIconButton,
+			selector: "button[stIconButton]",
+			inputs: [
+				"icone",
+				"etiquette",
+				"variante",
+				"taille",
+				"tailleDuGlyphe",
+				"enfonce",
+				"iconeEnfoncee",
+				"chargement",
+				"indisponible",
+				"raisonIndisponible"
+			]
+		}, {
+			kind: "component",
+			type: StWatermark,
+			selector: "st-watermark",
+			inputs: [
+				"texte",
+				"imprime",
+				"opacite"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: StImageViewer,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "st-image-viewer",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [StIconButton, StWatermark],
+			host: {
+				class: "st-image-viewer",
+				role: "group",
+				"[attr.aria-label]": "libelle()",
+				"(keydown)": "auClavier($event)"
+			},
+			template: "<div\n  class=\"st-image-viewer__barre\"\n  role=\"toolbar\"\n  [attr.aria-label]=\"libelles().outilsDeLaVisionneuse\"\n>\n  <button\n    stIconButton\n    type=\"button\"\n    icone=\"cercle-moins\"\n    [etiquette]=\"libelles().reduire\"\n    [indisponible]=\"zoom() <= bornes.zoom.min\"\n    (click)=\"zoomer(-1)\"\n  ></button>\n  <span class=\"st-image-viewer__mesure\" aria-hidden=\"true\">{{ pourcentage(zoom()) }}&#160;%</span>\n  <button\n    stIconButton\n    type=\"button\"\n    icone=\"cercle-plus\"\n    [etiquette]=\"libelles().agrandir\"\n    [indisponible]=\"zoom() >= bornes.zoom.max\"\n    (click)=\"zoomer(1)\"\n  ></button>\n  <button\n    stIconButton\n    type=\"button\"\n    icone=\"rotation-arriere\"\n    [etiquette]=\"libelles().tournerAGauche\"\n    (click)=\"tourner(-90)\"\n  ></button>\n  <button\n    stIconButton\n    type=\"button\"\n    icone=\"redemarrer\"\n    [etiquette]=\"libelles().tournerADroite\"\n    (click)=\"tourner(90)\"\n  ></button>\n  <button\n    stIconButton\n    type=\"button\"\n    icone=\"luminosite\"\n    [etiquette]=\"libelles().moinsDeContraste\"\n    [indisponible]=\"contraste() <= bornes.contraste.min\"\n    (click)=\"contraster(-1)\"\n  ></button>\n  <button\n    stIconButton\n    type=\"button\"\n    icone=\"contraste\"\n    [etiquette]=\"libelles().plusDeContraste\"\n    [indisponible]=\"contraste() >= bornes.contraste.max\"\n    (click)=\"contraster(1)\"\n  ></button>\n  <button\n    stIconButton\n    type=\"button\"\n    icone=\"historique\"\n    [etiquette]=\"libelles().vueDOrigine\"\n    (click)=\"reinitialiser()\"\n  ></button>\n</div>\n<p class=\"st-image-viewer__aide\" [id]=\"identifiantDeLAide\">\n  {{ libelles().raccourcisDeLaVisionneuse }}\n</p>\n<div\n  class=\"st-image-viewer__panneaux\"\n  [class.st-image-viewer__panneaux--double]=\"affichees().length > 1\"\n>\n  @for (image of affichees(); track $index) {\n    <figure class=\"st-image-viewer__panneau\">\n      <div\n        #defilement\n        class=\"st-image-viewer__defilement\"\n        tabindex=\"0\"\n        role=\"group\"\n        [attr.aria-label]=\"image.libelle\"\n        [attr.aria-describedby]=\"identifiantDeLAide\"\n        [attr.aria-busy]=\"etats()[$index] === 'chargement' ? 'true' : null\"\n        (scroll)=\"synchroniser($index)\"\n      >\n        @let mesure = mesures()[$index];\n        <div\n          class=\"st-image-viewer__boite\"\n          [style.width.px]=\"mesure?.boiteLargeur ?? 0\"\n          [style.height.px]=\"mesure?.boiteHauteur ?? 0\"\n        >\n          <canvas\n            #toile\n            class=\"st-image-viewer__toile\"\n            role=\"img\"\n            draggable=\"false\"\n            [attr.aria-label]=\"image.libelle\"\n            [style.width.px]=\"mesure?.largeur ?? 0\"\n            [style.height.px]=\"mesure?.hauteur ?? 0\"\n            [style.transform]=\"transformation()\"\n            [style.filter]=\"filtre()\"\n            (contextmenu)=\"interdireLeMenu($event)\"\n          ></canvas>\n        </div>\n      </div>\n      @if (filigrane(); as texte) {\n        <st-watermark [texte]=\"texte\" />\n      }\n      <figcaption class=\"st-image-viewer__legende\">{{ image.libelle }}</figcaption>\n      @if (etats()[$index] === 'illisible') {\n        <p class=\"st-image-viewer__erreur\" role=\"status\">{{ libelles().imageIllisible }}</p>\n      }\n    </figure>\n  }\n</div>\n<span class=\"st-vh\" aria-live=\"polite\">{{ annonce.texte() }}</span>\n",
+			styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:grid;gap:var(--st-espacement-2);min-inline-size:0}.st-image-viewer__barre{display:flex;flex-wrap:wrap;gap:var(--st-espacement-1);align-items:center}.st-image-viewer__mesure{font-size:var(--st-taille-xs);line-height:var(--st-interligne-xs);font-weight:var(--st-graisse-moyenne);letter-spacing:var(--st-interlettrage-large);min-inline-size:4ch;font-variant-numeric:var(--st-chiffres-alignes);color:var(--st-couleur-texte-discret);text-align:center}.st-image-viewer__aide{font-size:var(--st-taille-xs);line-height:var(--st-interligne-xs);font-weight:var(--st-graisse-moyenne);letter-spacing:var(--st-interlettrage-large);margin:0;color:var(--st-couleur-texte-discret)}.st-image-viewer__panneaux{display:grid;gap:var(--st-espacement-3)}@container (min-width: 48rem){.st-image-viewer__panneaux--double{grid-template-columns:repeat(2,minmax(0,1fr))}}.st-image-viewer__panneau{position:relative;display:grid;gap:var(--st-espacement-1);min-inline-size:0;margin:0}.st-image-viewer__defilement:focus-visible{outline:var(--st-focus-epaisseur) solid var(--st-couleur-anneau-focus);outline-offset:var(--st-focus-decalage);box-shadow:0 0 0 var(--st-focus-lisere) var(--st-couleur-lisere-focus)}.st-image-viewer__defilement{overflow:auto;max-block-size:70vh;border:var(--st-epaisseur-fine) solid var(--st-couleur-bordure);border-radius:var(--st-rayon-sm);background-color:var(--st-couleur-surface-conteneur-bas)}.st-image-viewer__boite{display:grid;place-items:center;margin-inline:auto}.st-image-viewer__toile{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.st-image-viewer__legende{font-size:var(--st-taille-xs);line-height:var(--st-interligne-xs);font-weight:var(--st-graisse-moyenne);letter-spacing:var(--st-interlettrage-large);color:var(--st-couleur-texte-discret)}.st-image-viewer__erreur{font-size:var(--st-taille-md);line-height:var(--st-interligne-md);font-weight:var(--st-graisse-normale);letter-spacing:var(--st-interlettrage-normal);margin:0;color:var(--st-couleur-erreur)}@media print{.st-image-viewer__barre,.st-image-viewer__aide,.st-image-viewer__toile{display:none}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		images: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "images",
+				required: true
+			}]
+		}],
+		libelle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "libelle",
+				required: true
+			}]
+		}],
+		filigrane: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "filigrane",
+				required: false
+			}]
+		}],
+		toiles: [{
+			type: i0.ViewChildren,
+			args: ["toile", { isSignal: true }]
+		}],
+		defilements: [{
+			type: i0.ViewChildren,
+			args: ["defilement", { isSignal: true }]
+		}]
+	}
+});
+export { BORNES_DE_LA_VISIONNEUSE, LIBELLES_DONNEES_EN, LIBELLES_DONNEES_FR, OPACITE_DE_FILIGRANE, ST_LIBELLES_DONNEES, StAmountSummary, StAvatarGroup, StBarList, StCode, StCount, StDate, StDeadline, StDocument, StDuration, StFreshness, StImageViewer, StKbd, StLuJusquAuBout, StMasked, StMeter, StMoney, StNumber, StPerson, StRelativeTime, StRepartition, StStat, StStatGroup, StWatermark, catalogueDesDonnees, fournirLibellesDonnees, libellesDesDonnees, motifDeFiligrane, zonesDeJauge };
 
 //# sourceMappingURL=starterlib-ui-donnees.mjs.map