@starterlib/ui 0.4.0 → 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +63 -8
- package/assets/icones/sprite.svg +6 -5
- package/fesm2022/starterlib-ui-formulaires.mjs +6 -6
- package/fesm2022/starterlib-ui-formulaires.mjs.map +1 -1
- package/fesm2022/starterlib-ui-interactions.mjs +63 -6
- package/fesm2022/starterlib-ui-interactions.mjs.map +1 -1
- package/fesm2022/starterlib-ui-surfaces.mjs +4 -4
- package/fesm2022/starterlib-ui-surfaces.mjs.map +1 -1
- package/fesm2022/starterlib-ui.mjs +792 -61
- package/fesm2022/starterlib-ui.mjs.map +1 -1
- package/package.json +3 -3
- package/types/starterlib-ui-interactions.d.ts +49 -2
- package/types/starterlib-ui-surfaces.d.ts +1 -1
- package/types/starterlib-ui.d.ts +493 -14
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, inject, LOCALE_ID, signal, input, computed, ChangeDetectionStrategy, Component, booleanAttribute, ElementRef, DestroyRef, output, model, afterNextRender, viewChild, Directive, effect, Injector, linkedSignal, TemplateRef, contentChild, isDevMode } from '@angular/core';
|
|
2
|
+
import { InjectionToken, inject, LOCALE_ID, signal, input, computed, ChangeDetectionStrategy, Component, booleanAttribute, ElementRef, DestroyRef, output, model, afterNextRender, viewChild, Directive, effect, Injector, linkedSignal, TemplateRef, contentChildren, contentChild, isDevMode } from '@angular/core';
|
|
3
3
|
import { masquerIban, masquerTelephone, masquerCarte, quatreDerniers, formaterIban, formaterMontant, formaterTaille, formaterDateLongue, montant, decimalesDe, motifDeDate, formaterDateSaisie, ibanEstValide, normaliserTelephone, typeDeFichierAccepte, normaliserIban, bornerDate, premierJourDeLaSemaine, ajouterJours, semainesDuMois, ajouterMois, jourDeLaSemaine, CHOIX_DE_THEME, LANGUES } from '@starterlib/util';
|
|
4
4
|
export { ETATS_DE_BLOC } from '@starterlib/util';
|
|
5
5
|
import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
|
|
@@ -116,6 +116,31 @@ const LIBELLES_FR = {
|
|
|
116
116
|
tropDeFichiers: (nombre) => `Choisissez au plus ${String(nombre)} fichier${nombre > 1 ? 's' : ''}.`,
|
|
117
117
|
typesAcceptes: (types) => `Types accept\u00e9s\u00a0: ${types}.`,
|
|
118
118
|
tailleMaximale: (taille) => `${taille} au plus par fichier.`,
|
|
119
|
+
televersementDe: (fichier) => `T\u00e9l\u00e9versement de ${fichier}`,
|
|
120
|
+
annulerLeTeleversement: (fichier) => `Annuler le t\u00e9l\u00e9versement de ${fichier}`,
|
|
121
|
+
fichierDepose: (fichier) => `${fichier} d\u00e9pos\u00e9`,
|
|
122
|
+
fichierRefuse: (fichier) => `${fichier} refus\u00e9`,
|
|
123
|
+
pagination: 'Pagination',
|
|
124
|
+
pagePrecedente: 'Page pr\u00e9c\u00e9dente',
|
|
125
|
+
pageSuivante: 'Page suivante',
|
|
126
|
+
pageNumero: (numero) => `Page ${String(numero)}`,
|
|
127
|
+
afficherPlus: 'Afficher plus',
|
|
128
|
+
lignesParPage: 'Lignes par page',
|
|
129
|
+
selectionnerLaPage: (nombre) => `S\u00e9lectionner les ${String(nombre)} lignes de la page`,
|
|
130
|
+
selectionnerLaLigne: (ligne) => `S\u00e9lectionner ${ligne}`,
|
|
131
|
+
lignesSelectionnees: (nombre) => nombre === 0
|
|
132
|
+
? 'Aucune ligne s\u00e9lectionn\u00e9e'
|
|
133
|
+
: `${String(nombre)} ligne${nombre > 1 ? 's' : ''} s\u00e9lectionn\u00e9e${nombre > 1 ? 's' : ''}`,
|
|
134
|
+
trieCroissant: (colonne) => `Tri\u00e9 par ${colonne}, ordre croissant`,
|
|
135
|
+
trieDecroissant: (colonne) => `Tri\u00e9 par ${colonne}, ordre d\u00e9croissant`,
|
|
136
|
+
tableauVide: 'Aucune ligne \u00e0 afficher.',
|
|
137
|
+
nonRenseigne: 'Non renseign\u00e9',
|
|
138
|
+
filtres: 'Filtres',
|
|
139
|
+
filtresActifs: 'Filtres actifs',
|
|
140
|
+
retirerLeFiltre: (filtre) => `Retirer le filtre ${filtre}`,
|
|
141
|
+
effacerLesFiltres: 'Effacer les filtres',
|
|
142
|
+
filtreRetire: (filtre) => `Filtre ${filtre} retir\u00e9`,
|
|
143
|
+
filtresEffaces: 'Filtres effac\u00e9s',
|
|
119
144
|
confirmer: 'Confirmer',
|
|
120
145
|
annuler: 'Annuler',
|
|
121
146
|
recopierPourConfirmer: (texte) => `Pour confirmer, recopiez \u00ab\u202f${texte}\u202f\u00bb`,
|
|
@@ -210,6 +235,29 @@ const LIBELLES_EN = {
|
|
|
210
235
|
tropDeFichiers: (nombre) => `Choose no more than ${String(nombre)} file${nombre > 1 ? 's' : ''}.`,
|
|
211
236
|
typesAcceptes: (types) => `Accepted types: ${types}.`,
|
|
212
237
|
tailleMaximale: (taille) => `${taille} maximum per file.`,
|
|
238
|
+
televersementDe: (fichier) => `Uploading ${fichier}`,
|
|
239
|
+
annulerLeTeleversement: (fichier) => `Cancel upload of ${fichier}`,
|
|
240
|
+
fichierDepose: (fichier) => `${fichier} uploaded`,
|
|
241
|
+
fichierRefuse: (fichier) => `${fichier} rejected`,
|
|
242
|
+
pagination: 'Pagination',
|
|
243
|
+
pagePrecedente: 'Previous page',
|
|
244
|
+
pageSuivante: 'Next page',
|
|
245
|
+
pageNumero: (numero) => `Page ${String(numero)}`,
|
|
246
|
+
afficherPlus: 'Show more',
|
|
247
|
+
lignesParPage: 'Rows per page',
|
|
248
|
+
selectionnerLaPage: (nombre) => `Select the ${String(nombre)} rows on this page`,
|
|
249
|
+
selectionnerLaLigne: (ligne) => `Select ${ligne}`,
|
|
250
|
+
lignesSelectionnees: (nombre) => nombre === 0 ? 'No rows selected' : `${String(nombre)} row${nombre > 1 ? 's' : ''} selected`,
|
|
251
|
+
trieCroissant: (colonne) => `Sorted by ${colonne}, ascending`,
|
|
252
|
+
trieDecroissant: (colonne) => `Sorted by ${colonne}, descending`,
|
|
253
|
+
tableauVide: 'No rows to display.',
|
|
254
|
+
nonRenseigne: 'Not provided',
|
|
255
|
+
filtres: 'Filters',
|
|
256
|
+
filtresActifs: 'Active filters',
|
|
257
|
+
retirerLeFiltre: (filtre) => `Remove filter ${filtre}`,
|
|
258
|
+
effacerLesFiltres: 'Clear filters',
|
|
259
|
+
filtreRetire: (filtre) => `Filter ${filtre} removed`,
|
|
260
|
+
filtresEffaces: 'Filters cleared',
|
|
213
261
|
confirmer: 'Confirm',
|
|
214
262
|
annuler: 'Cancel',
|
|
215
263
|
recopierPourConfirmer: (texte) => `To confirm, type \u201c${texte}\u201d`,
|
|
@@ -434,6 +482,20 @@ function formaterDuree(totalEnSecondes, locale) {
|
|
|
434
482
|
return `${unite(Math.floor(total / 60), 'minute')} ${unite(total % 60, 'second')}`;
|
|
435
483
|
}
|
|
436
484
|
|
|
485
|
+
/**
|
|
486
|
+
* Icones qui portent un sens HORIZONTAL, et qu'il faut donc miroiter en
|
|
487
|
+
* ecriture de droite a gauche.
|
|
488
|
+
*
|
|
489
|
+
* ⚠️ Sans miroir, « mois precedent » garde un chevron vers la gauche dans une
|
|
490
|
+
* interface qui se lit vers la gauche : la fleche pointe alors vers l'AVANT.
|
|
491
|
+
* Le clavier du calendrier inversait deja ses touches ; l'icone, elle, ne
|
|
492
|
+
* suivait pas — defaut vu sur un instantane du banc en ecriture inverse, et
|
|
493
|
+
* invisible pour toutes les mesures existantes.
|
|
494
|
+
*
|
|
495
|
+
* Les chevrons verticaux (`haut`, `bas`) et `tri` n'y sont pas : un sens
|
|
496
|
+
* vertical ne s'inverse jamais avec le sens d'ecriture.
|
|
497
|
+
*/
|
|
498
|
+
const ICONES_DIRECTIONNELLES = new Set(['chevron-gauche', 'chevron-droite']);
|
|
437
499
|
/**
|
|
438
500
|
* Icone tiree d'un sprite SVG servi en meme origine.
|
|
439
501
|
*
|
|
@@ -459,10 +521,12 @@ class StIcon {
|
|
|
459
521
|
...(ngDevMode ? [{ debugName: "etiquette" }] : /* istanbul ignore next */ []));
|
|
460
522
|
estDecorative = computed(() => this.etiquette() === null, /* @ts-ignore */
|
|
461
523
|
...(ngDevMode ? [{ debugName: "estDecorative" }] : /* istanbul ignore next */ []));
|
|
524
|
+
directionnelle = computed(() => ICONES_DIRECTIONNELLES.has(this.nom()), /* @ts-ignore */
|
|
525
|
+
...(ngDevMode ? [{ debugName: "directionnelle" }] : /* istanbul ignore next */ []));
|
|
462
526
|
reference = computed(() => `${this.cheminDuSprite}#${this.nom()}`, /* @ts-ignore */
|
|
463
527
|
...(ngDevMode ? [{ debugName: "reference" }] : /* istanbul ignore next */ []));
|
|
464
528
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
465
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StIcon, isStandalone: true, selector: "st-icon", inputs: { nom: { classPropertyName: "nom", publicName: "nom", isSignal: true, isRequired: true, transformFunction: null }, taille: { classPropertyName: "taille", publicName: "taille", isSignal: true, isRequired: false, transformFunction: null }, ton: { classPropertyName: "ton", publicName: "ton", isSignal: true, isRequired: false, transformFunction: null }, etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-taille": "taille()", "attr.data-ton": "ton()" }, classAttribute: "st-icon" }, ngImport: i0, template: "<svg\n [attr.aria-hidden]=\"estDecorative() ? 'true' : null\"\n [attr.role]=\"estDecorative() ? null : 'img'\"\n [attr.aria-label]=\"etiquette()\"\n focusable=\"false\"\n>\n <use [attr.href]=\"reference()\" />\n</svg>\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:inline-flex;flex:none;vertical-align:-.125em;color:inherit}svg{inline-size:var(--st-icone-taille, 1.25em);block-size:var(--st-icone-taille, 1.25em)}:host([data-taille=xs]) svg{--st-icone-taille: .75em}:host([data-taille=sm]) svg{--st-icone-taille: 1em}:host([data-taille=lg]) svg{--st-icone-taille: 1.5em}:host([data-taille=xl]) svg{--st-icone-taille: 2em}:host([data-ton=discret]){color:var(--st-couleur-texte-discret)}:host([data-ton=primaire]){color:var(--st-couleur-primaire)}:host([data-ton=succes]){color:var(--st-couleur-succes)}:host([data-ton=avertissement]){color:var(--st-couleur-avertissement)}:host([data-ton=danger]){color:var(--st-couleur-danger)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
529
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StIcon, isStandalone: true, selector: "st-icon", inputs: { nom: { classPropertyName: "nom", publicName: "nom", isSignal: true, isRequired: true, transformFunction: null }, taille: { classPropertyName: "taille", publicName: "taille", isSignal: true, isRequired: false, transformFunction: null }, ton: { classPropertyName: "ton", publicName: "ton", isSignal: true, isRequired: false, transformFunction: null }, etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-taille": "taille()", "attr.data-ton": "ton()" }, classAttribute: "st-icon" }, ngImport: i0, template: "<svg\n [class.st-icon__miroir]=\"directionnelle()\"\n [attr.aria-hidden]=\"estDecorative() ? 'true' : null\"\n [attr.role]=\"estDecorative() ? null : 'img'\"\n [attr.aria-label]=\"etiquette()\"\n focusable=\"false\"\n>\n <use [attr.href]=\"reference()\" />\n</svg>\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:inline-flex;flex:none;vertical-align:-.125em;color:inherit}svg{inline-size:var(--st-icone-taille, 1.25em);block-size:var(--st-icone-taille, 1.25em)}:host-context([dir=rtl]) .st-icon__miroir{transform:scaleX(-1)}:host([data-taille=xs]) svg{--st-icone-taille: .75em}:host([data-taille=sm]) svg{--st-icone-taille: 1em}:host([data-taille=lg]) svg{--st-icone-taille: 1.5em}:host([data-taille=xl]) svg{--st-icone-taille: 2em}:host([data-ton=discret]){color:var(--st-couleur-texte-discret)}:host([data-ton=primaire]){color:var(--st-couleur-primaire)}:host([data-ton=succes]){color:var(--st-couleur-succes)}:host([data-ton=avertissement]){color:var(--st-couleur-avertissement)}:host([data-ton=danger]){color:var(--st-couleur-danger)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
466
530
|
}
|
|
467
531
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StIcon, decorators: [{
|
|
468
532
|
type: Component,
|
|
@@ -470,7 +534,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
470
534
|
class: 'st-icon',
|
|
471
535
|
'[attr.data-taille]': 'taille()',
|
|
472
536
|
'[attr.data-ton]': 'ton()',
|
|
473
|
-
}, template: "<svg\n [attr.aria-hidden]=\"estDecorative() ? 'true' : null\"\n [attr.role]=\"estDecorative() ? null : 'img'\"\n [attr.aria-label]=\"etiquette()\"\n focusable=\"false\"\n>\n <use [attr.href]=\"reference()\" />\n</svg>\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:inline-flex;flex:none;vertical-align:-.125em;color:inherit}svg{inline-size:var(--st-icone-taille, 1.25em);block-size:var(--st-icone-taille, 1.25em)}:host([data-taille=xs]) svg{--st-icone-taille: .75em}:host([data-taille=sm]) svg{--st-icone-taille: 1em}:host([data-taille=lg]) svg{--st-icone-taille: 1.5em}:host([data-taille=xl]) svg{--st-icone-taille: 2em}:host([data-ton=discret]){color:var(--st-couleur-texte-discret)}:host([data-ton=primaire]){color:var(--st-couleur-primaire)}:host([data-ton=succes]){color:var(--st-couleur-succes)}:host([data-ton=avertissement]){color:var(--st-couleur-avertissement)}:host([data-ton=danger]){color:var(--st-couleur-danger)}\n"] }]
|
|
537
|
+
}, template: "<svg\n [class.st-icon__miroir]=\"directionnelle()\"\n [attr.aria-hidden]=\"estDecorative() ? 'true' : null\"\n [attr.role]=\"estDecorative() ? null : 'img'\"\n [attr.aria-label]=\"etiquette()\"\n focusable=\"false\"\n>\n <use [attr.href]=\"reference()\" />\n</svg>\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:inline-flex;flex:none;vertical-align:-.125em;color:inherit}svg{inline-size:var(--st-icone-taille, 1.25em);block-size:var(--st-icone-taille, 1.25em)}:host-context([dir=rtl]) .st-icon__miroir{transform:scaleX(-1)}:host([data-taille=xs]) svg{--st-icone-taille: .75em}:host([data-taille=sm]) svg{--st-icone-taille: 1em}:host([data-taille=lg]) svg{--st-icone-taille: 1.5em}:host([data-taille=xl]) svg{--st-icone-taille: 2em}:host([data-ton=discret]){color:var(--st-couleur-texte-discret)}:host([data-ton=primaire]){color:var(--st-couleur-primaire)}:host([data-ton=succes]){color:var(--st-couleur-succes)}:host([data-ton=avertissement]){color:var(--st-couleur-avertissement)}:host([data-ton=danger]){color:var(--st-couleur-danger)}\n"] }]
|
|
474
538
|
}], propDecorators: { nom: [{ type: i0.Input, args: [{ isSignal: true, alias: "nom", required: true }] }], taille: [{ type: i0.Input, args: [{ isSignal: true, alias: "taille", required: false }] }], ton: [{ type: i0.Input, args: [{ isSignal: true, alias: "ton", required: false }] }], etiquette: [{ type: i0.Input, args: [{ isSignal: true, alias: "etiquette", required: false }] }] } });
|
|
475
539
|
|
|
476
540
|
/**
|
|
@@ -507,6 +571,7 @@ const NOMS_DICONE = [
|
|
|
507
571
|
'recherche',
|
|
508
572
|
'serveur',
|
|
509
573
|
'televerser',
|
|
574
|
+
'tri',
|
|
510
575
|
'triangle-alerte',
|
|
511
576
|
'utilisateur',
|
|
512
577
|
];
|
|
@@ -533,7 +598,7 @@ class StText {
|
|
|
533
598
|
tronquerA = input(null, /* @ts-ignore */
|
|
534
599
|
...(ngDevMode ? [{ debugName: "tronquerA" }] : /* istanbul ignore next */ []));
|
|
535
600
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StText, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
536
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StText, isStandalone: true, selector: "st-text", inputs: { variante: { classPropertyName: "variante", publicName: "variante", isSignal: true, isRequired: false, transformFunction: null }, graisse: { classPropertyName: "graisse", publicName: "graisse", isSignal: true, isRequired: false, transformFunction: null }, enLigne: { classPropertyName: "enLigne", publicName: "enLigne", isSignal: true, isRequired: false, transformFunction: null }, tronquerA: { classPropertyName: "tronquerA", publicName: "tronquerA", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variante": "variante()", "attr.data-graisse": "graisse()", "attr.data-en-ligne": "enLigne() ? \"\" : null", "attr.data-tronque": "tronquerA() === null ? null : \"\"", "style.--st-text-lignes": "tronquerA()" }, classAttribute: "st-text" }, ngImport: i0, template: "<ng-content />\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:block;margin:0;font-family:var(--st-police-base);font-size:var(--st-taille-md);font-weight:var(--st-graisse-normale);line-height:var(--st-interligne-normal);color:var(--st-couleur-texte);max-inline-size:
|
|
601
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StText, isStandalone: true, selector: "st-text", inputs: { variante: { classPropertyName: "variante", publicName: "variante", isSignal: true, isRequired: false, transformFunction: null }, graisse: { classPropertyName: "graisse", publicName: "graisse", isSignal: true, isRequired: false, transformFunction: null }, enLigne: { classPropertyName: "enLigne", publicName: "enLigne", isSignal: true, isRequired: false, transformFunction: null }, tronquerA: { classPropertyName: "tronquerA", publicName: "tronquerA", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variante": "variante()", "attr.data-graisse": "graisse()", "attr.data-en-ligne": "enLigne() ? \"\" : null", "attr.data-tronque": "tronquerA() === null ? null : \"\"", "style.--st-text-lignes": "tronquerA()" }, classAttribute: "st-text" }, ngImport: i0, template: "<ng-content />\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:block;margin:0;font-family:var(--st-police-base);font-size:var(--st-taille-md);font-weight:var(--st-graisse-normale);line-height:var(--st-interligne-normal);color:var(--st-couleur-texte);max-inline-size:var(--st-mesure-normale)}:host([data-en-ligne]){display:inline;max-inline-size:none}:host([data-variante=corps-sm]){font-size:var(--st-taille-sm)}:host([data-variante=discret]){color:var(--st-couleur-texte-discret)}:host([data-variante=legende]){font-size:var(--st-taille-xs);color:var(--st-couleur-texte-discret)}:host([data-variante=mono]){font-family:var(--st-police-mono);font-size:var(--st-taille-sm)}:host([data-graisse=moyenne]){font-weight:var(--st-graisse-moyenne)}:host([data-graisse=semi]){font-weight:var(--st-graisse-semi)}:host([data-tronque]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--st-text-lignes, 2);line-clamp:var(--st-text-lignes, 2)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
537
602
|
}
|
|
538
603
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StText, decorators: [{
|
|
539
604
|
type: Component,
|
|
@@ -544,7 +609,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
544
609
|
'[attr.data-en-ligne]': 'enLigne() ? "" : null',
|
|
545
610
|
'[attr.data-tronque]': 'tronquerA() === null ? null : ""',
|
|
546
611
|
'[style.--st-text-lignes]': 'tronquerA()',
|
|
547
|
-
}, template: "<ng-content />\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:block;margin:0;font-family:var(--st-police-base);font-size:var(--st-taille-md);font-weight:var(--st-graisse-normale);line-height:var(--st-interligne-normal);color:var(--st-couleur-texte);max-inline-size:
|
|
612
|
+
}, template: "<ng-content />\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:block;margin:0;font-family:var(--st-police-base);font-size:var(--st-taille-md);font-weight:var(--st-graisse-normale);line-height:var(--st-interligne-normal);color:var(--st-couleur-texte);max-inline-size:var(--st-mesure-normale)}:host([data-en-ligne]){display:inline;max-inline-size:none}:host([data-variante=corps-sm]){font-size:var(--st-taille-sm)}:host([data-variante=discret]){color:var(--st-couleur-texte-discret)}:host([data-variante=legende]){font-size:var(--st-taille-xs);color:var(--st-couleur-texte-discret)}:host([data-variante=mono]){font-family:var(--st-police-mono);font-size:var(--st-taille-sm)}:host([data-graisse=moyenne]){font-weight:var(--st-graisse-moyenne)}:host([data-graisse=semi]){font-weight:var(--st-graisse-semi)}:host([data-tronque]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--st-text-lignes, 2);line-clamp:var(--st-text-lignes, 2)}\n"] }]
|
|
548
613
|
}], propDecorators: { variante: [{ type: i0.Input, args: [{ isSignal: true, alias: "variante", required: false }] }], graisse: [{ type: i0.Input, args: [{ isSignal: true, alias: "graisse", required: false }] }], enLigne: [{ type: i0.Input, args: [{ isSignal: true, alias: "enLigne", required: false }] }], tronquerA: [{ type: i0.Input, args: [{ isSignal: true, alias: "tronquerA", required: false }] }] } });
|
|
549
614
|
|
|
550
615
|
const TAILLE_PAR_NIVEAU = {
|
|
@@ -619,7 +684,7 @@ class StSpinner {
|
|
|
619
684
|
sAnnonce = computed(() => this.regionParente === null, /* @ts-ignore */
|
|
620
685
|
...(ngDevMode ? [{ debugName: "sAnnonce" }] : /* istanbul ignore next */ []));
|
|
621
686
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSpinner, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
622
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StSpinner, isStandalone: true, selector: "st-spinner", inputs: { taille: { classPropertyName: "taille", publicName: "taille", isSignal: true, isRequired: false, transformFunction: null }, ton: { classPropertyName: "ton", publicName: "ton", isSignal: true, isRequired: false, transformFunction: null }, etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-taille": "taille()", "attr.data-ton": "ton()", "attr.role": "sAnnonce() ? \"status\" : null", "attr.aria-label": "sAnnonce() ? etiquetteLue() : null" }, classAttribute: "st-spinner" }, ngImport: i0, template: "<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n <circle class=\"st-spinner__piste\" cx=\"12\" cy=\"12\" r=\"10\" />\n <circle class=\"st-spinner__arc\" cx=\"12\" cy=\"12\" r=\"10\" />\n</svg>\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:inline-flex;flex:none;color:var(--st-couleur-primaire)}svg{inline-size:var(--st-spinner-taille, 1.5rem);block-size:var(--st-spinner-taille, 1.5rem);fill:none;stroke-width:2.5;transform-origin:center;animation:st-spinner-rotation var(--st-anim-chargement, .9s) linear infinite}.st-spinner__piste{stroke:var(--st-couleur-bordure)}.st-spinner__arc{stroke:currentcolor;stroke-linecap:round;stroke-dasharray:16 47}@keyframes st-spinner-rotation{to{transform:rotate(1turn)}}@keyframes st-spinner-pulsation{0%,to{opacity:1}50%{opacity:.35}}@media(prefers-reduced-motion:reduce){svg{animation:st-spinner-pulsation 1.6s ease-in-out infinite}.st-spinner__arc{stroke-dasharray:none}}:host([data-taille=sm]) svg{--st-spinner-taille: 1rem}:host([data-taille=lg]) svg{--st-spinner-taille: 2.5rem}:host([data-ton=neutre]){color:currentcolor}:host([data-ton=inverse]){color:var(--st-couleur-sur-primaire)}:host([data-ton=inverse]) .st-spinner__piste{stroke:color-mix(in srgb,var(--st-couleur-sur-primaire) 30%,transparent)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
687
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StSpinner, isStandalone: true, selector: "st-spinner", inputs: { taille: { classPropertyName: "taille", publicName: "taille", isSignal: true, isRequired: false, transformFunction: null }, ton: { classPropertyName: "ton", publicName: "ton", isSignal: true, isRequired: false, transformFunction: null }, etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-taille": "taille()", "attr.data-ton": "ton()", "attr.role": "sAnnonce() ? \"status\" : null", "attr.aria-label": "sAnnonce() ? etiquetteLue() : null" }, classAttribute: "st-spinner" }, ngImport: i0, template: "<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n <circle class=\"st-spinner__piste\" cx=\"12\" cy=\"12\" r=\"10\" />\n <circle class=\"st-spinner__arc\" cx=\"12\" cy=\"12\" r=\"10\" />\n</svg>\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:inline-flex;flex:none;color:var(--st-couleur-primaire)}svg{inline-size:var(--st-spinner-taille, 1.5rem);block-size:var(--st-spinner-taille, 1.5rem);fill:none;stroke-width:2.5;transform-origin:center;animation:st-spinner-rotation var(--st-anim-chargement, .9s) linear infinite}.st-spinner__piste{stroke:var(--st-couleur-bordure)}.st-spinner__arc{stroke:currentcolor;stroke-linecap:round;stroke-dasharray:16 47}@keyframes st-spinner-rotation{to{transform:rotate(1turn)}}@keyframes st-spinner-pulsation{0%,to{opacity:1}50%{opacity:.35}}@media(prefers-reduced-motion:reduce){svg{animation:st-spinner-pulsation var(--st-anim-respiration, 1.6s) ease-in-out infinite}.st-spinner__arc{stroke-dasharray:none}}:host([data-taille=sm]) svg{--st-spinner-taille: 1rem}:host([data-taille=lg]) svg{--st-spinner-taille: 2.5rem}:host([data-ton=neutre]){color:currentcolor}:host([data-ton=inverse]){color:var(--st-couleur-sur-primaire)}:host([data-ton=inverse]) .st-spinner__piste{stroke:color-mix(in srgb,var(--st-couleur-sur-primaire) 30%,transparent)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
623
688
|
}
|
|
624
689
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSpinner, decorators: [{
|
|
625
690
|
type: Component,
|
|
@@ -629,7 +694,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
629
694
|
'[attr.data-ton]': 'ton()',
|
|
630
695
|
'[attr.role]': 'sAnnonce() ? "status" : null',
|
|
631
696
|
'[attr.aria-label]': 'sAnnonce() ? etiquetteLue() : null',
|
|
632
|
-
}, template: "<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n <circle class=\"st-spinner__piste\" cx=\"12\" cy=\"12\" r=\"10\" />\n <circle class=\"st-spinner__arc\" cx=\"12\" cy=\"12\" r=\"10\" />\n</svg>\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:inline-flex;flex:none;color:var(--st-couleur-primaire)}svg{inline-size:var(--st-spinner-taille, 1.5rem);block-size:var(--st-spinner-taille, 1.5rem);fill:none;stroke-width:2.5;transform-origin:center;animation:st-spinner-rotation var(--st-anim-chargement, .9s) linear infinite}.st-spinner__piste{stroke:var(--st-couleur-bordure)}.st-spinner__arc{stroke:currentcolor;stroke-linecap:round;stroke-dasharray:16 47}@keyframes st-spinner-rotation{to{transform:rotate(1turn)}}@keyframes st-spinner-pulsation{0%,to{opacity:1}50%{opacity:.35}}@media(prefers-reduced-motion:reduce){svg{animation:st-spinner-pulsation 1.6s ease-in-out infinite}.st-spinner__arc{stroke-dasharray:none}}:host([data-taille=sm]) svg{--st-spinner-taille: 1rem}:host([data-taille=lg]) svg{--st-spinner-taille: 2.5rem}:host([data-ton=neutre]){color:currentcolor}:host([data-ton=inverse]){color:var(--st-couleur-sur-primaire)}:host([data-ton=inverse]) .st-spinner__piste{stroke:color-mix(in srgb,var(--st-couleur-sur-primaire) 30%,transparent)}\n"] }]
|
|
697
|
+
}, template: "<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n <circle class=\"st-spinner__piste\" cx=\"12\" cy=\"12\" r=\"10\" />\n <circle class=\"st-spinner__arc\" cx=\"12\" cy=\"12\" r=\"10\" />\n</svg>\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:inline-flex;flex:none;color:var(--st-couleur-primaire)}svg{inline-size:var(--st-spinner-taille, 1.5rem);block-size:var(--st-spinner-taille, 1.5rem);fill:none;stroke-width:2.5;transform-origin:center;animation:st-spinner-rotation var(--st-anim-chargement, .9s) linear infinite}.st-spinner__piste{stroke:var(--st-couleur-bordure)}.st-spinner__arc{stroke:currentcolor;stroke-linecap:round;stroke-dasharray:16 47}@keyframes st-spinner-rotation{to{transform:rotate(1turn)}}@keyframes st-spinner-pulsation{0%,to{opacity:1}50%{opacity:.35}}@media(prefers-reduced-motion:reduce){svg{animation:st-spinner-pulsation var(--st-anim-respiration, 1.6s) ease-in-out infinite}.st-spinner__arc{stroke-dasharray:none}}:host([data-taille=sm]) svg{--st-spinner-taille: 1rem}:host([data-taille=lg]) svg{--st-spinner-taille: 2.5rem}:host([data-ton=neutre]){color:currentcolor}:host([data-ton=inverse]){color:var(--st-couleur-sur-primaire)}:host([data-ton=inverse]) .st-spinner__piste{stroke:color-mix(in srgb,var(--st-couleur-sur-primaire) 30%,transparent)}\n"] }]
|
|
633
698
|
}], propDecorators: { taille: [{ type: i0.Input, args: [{ isSignal: true, alias: "taille", required: false }] }], ton: [{ type: i0.Input, args: [{ isSignal: true, alias: "ton", required: false }] }], etiquette: [{ type: i0.Input, args: [{ isSignal: true, alias: "etiquette", required: false }] }] } });
|
|
634
699
|
|
|
635
700
|
/**
|
|
@@ -670,7 +735,7 @@ class StProgress {
|
|
|
670
735
|
}, /* @ts-ignore */
|
|
671
736
|
...(ngDevMode ? [{ debugName: "pourcentage" }] : /* istanbul ignore next */ []));
|
|
672
737
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StProgress, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
673
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StProgress, isStandalone: true, selector: "st-progress", inputs: { valeur: { classPropertyName: "valeur", publicName: "valeur", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: true, transformFunction: null }, ton: { classPropertyName: "ton", publicName: "ton", isSignal: true, isRequired: false, transformFunction: null }, texteDeValeur: { classPropertyName: "texteDeValeur", publicName: "texteDeValeur", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar" }, properties: { "attr.data-ton": "ton()", "attr.data-indetermine": "estIndeterminee() ? \"\" : null", "attr.aria-label": "etiquette()", "attr.aria-valuemin": "0", "attr.aria-valuemax": "max()", "attr.aria-valuenow": "valeurAnnoncee()", "attr.aria-valuetext": "texteDeValeur()", "style.--st-progress-part.%": "pourcentage()" }, classAttribute: "st-progress" }, ngImport: i0, template: "<span class=\"st-progress__barre\"></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:block;block-size:.5rem;overflow:hidden;background:var(--st-couleur-surface-enfoncee);border-radius:var(--st-rayon-pleine)}.st-progress__barre{display:block;block-size:100%;inline-size:var(--st-progress-part, 0%);background:var(--st-couleur-primaire);border-radius:inherit;transition:inline-size var(--st-duree-normale) var(--st-courbe-standard)}:host([data-ton=succes]) .st-progress__barre{background:var(--st-couleur-succes)}:host([data-ton=danger]) .st-progress__barre{background:var(--st-couleur-danger)}:host([data-indetermine]) .st-progress__barre{inline-size:35%;animation:st-progress-va-et-vient var(--st-anim-chargement, 1.4s) ease-in-out infinite}@keyframes st-progress-va-et-vient{0%{transform:translate(-100%)}to{transform:translate(calc(100cqi + 100%))}}@keyframes st-progress-pulsation{0%,to{opacity:1}50%{opacity:.4}}@media(prefers-reduced-motion:reduce){:host([data-indetermine]) .st-progress__barre{inline-size:100%;transform:none;animation:st-progress-pulsation 1.6s ease-in-out infinite}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
738
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StProgress, isStandalone: true, selector: "st-progress", inputs: { valeur: { classPropertyName: "valeur", publicName: "valeur", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: true, transformFunction: null }, ton: { classPropertyName: "ton", publicName: "ton", isSignal: true, isRequired: false, transformFunction: null }, texteDeValeur: { classPropertyName: "texteDeValeur", publicName: "texteDeValeur", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar" }, properties: { "attr.data-ton": "ton()", "attr.data-indetermine": "estIndeterminee() ? \"\" : null", "attr.aria-label": "etiquette()", "attr.aria-valuemin": "0", "attr.aria-valuemax": "max()", "attr.aria-valuenow": "valeurAnnoncee()", "attr.aria-valuetext": "texteDeValeur()", "style.--st-progress-part.%": "pourcentage()" }, classAttribute: "st-progress" }, ngImport: i0, template: "<span class=\"st-progress__barre\"></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:block;block-size:.5rem;overflow:hidden;background:var(--st-couleur-surface-enfoncee);border-radius:var(--st-rayon-pleine)}.st-progress__barre{display:block;block-size:100%;inline-size:var(--st-progress-part, 0%);background:var(--st-couleur-primaire);border-radius:inherit;transition:inline-size var(--st-duree-normale) var(--st-courbe-standard)}:host([data-ton=succes]) .st-progress__barre{background:var(--st-couleur-succes)}:host([data-ton=danger]) .st-progress__barre{background:var(--st-couleur-danger)}:host([data-indetermine]) .st-progress__barre{inline-size:35%;animation:st-progress-va-et-vient var(--st-anim-chargement, 1.4s) ease-in-out infinite}@keyframes st-progress-va-et-vient{0%{transform:translate(-100%)}to{transform:translate(calc(100cqi + 100%))}}@keyframes st-progress-pulsation{0%,to{opacity:1}50%{opacity:.4}}@media(prefers-reduced-motion:reduce){:host([data-indetermine]) .st-progress__barre{inline-size:100%;transform:none;animation:st-progress-pulsation var(--st-anim-respiration, 1.6s) ease-in-out infinite}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
674
739
|
}
|
|
675
740
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StProgress, decorators: [{
|
|
676
741
|
type: Component,
|
|
@@ -685,7 +750,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
685
750
|
'[attr.aria-valuenow]': 'valeurAnnoncee()',
|
|
686
751
|
'[attr.aria-valuetext]': 'texteDeValeur()',
|
|
687
752
|
'[style.--st-progress-part.%]': 'pourcentage()',
|
|
688
|
-
}, template: "<span class=\"st-progress__barre\"></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:block;block-size:.5rem;overflow:hidden;background:var(--st-couleur-surface-enfoncee);border-radius:var(--st-rayon-pleine)}.st-progress__barre{display:block;block-size:100%;inline-size:var(--st-progress-part, 0%);background:var(--st-couleur-primaire);border-radius:inherit;transition:inline-size var(--st-duree-normale) var(--st-courbe-standard)}:host([data-ton=succes]) .st-progress__barre{background:var(--st-couleur-succes)}:host([data-ton=danger]) .st-progress__barre{background:var(--st-couleur-danger)}:host([data-indetermine]) .st-progress__barre{inline-size:35%;animation:st-progress-va-et-vient var(--st-anim-chargement, 1.4s) ease-in-out infinite}@keyframes st-progress-va-et-vient{0%{transform:translate(-100%)}to{transform:translate(calc(100cqi + 100%))}}@keyframes st-progress-pulsation{0%,to{opacity:1}50%{opacity:.4}}@media(prefers-reduced-motion:reduce){:host([data-indetermine]) .st-progress__barre{inline-size:100%;transform:none;animation:st-progress-pulsation 1.6s ease-in-out infinite}}\n"] }]
|
|
753
|
+
}, template: "<span class=\"st-progress__barre\"></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:block;block-size:.5rem;overflow:hidden;background:var(--st-couleur-surface-enfoncee);border-radius:var(--st-rayon-pleine)}.st-progress__barre{display:block;block-size:100%;inline-size:var(--st-progress-part, 0%);background:var(--st-couleur-primaire);border-radius:inherit;transition:inline-size var(--st-duree-normale) var(--st-courbe-standard)}:host([data-ton=succes]) .st-progress__barre{background:var(--st-couleur-succes)}:host([data-ton=danger]) .st-progress__barre{background:var(--st-couleur-danger)}:host([data-indetermine]) .st-progress__barre{inline-size:35%;animation:st-progress-va-et-vient var(--st-anim-chargement, 1.4s) ease-in-out infinite}@keyframes st-progress-va-et-vient{0%{transform:translate(-100%)}to{transform:translate(calc(100cqi + 100%))}}@keyframes st-progress-pulsation{0%,to{opacity:1}50%{opacity:.4}}@media(prefers-reduced-motion:reduce){:host([data-indetermine]) .st-progress__barre{inline-size:100%;transform:none;animation:st-progress-pulsation var(--st-anim-respiration, 1.6s) ease-in-out infinite}}\n"] }]
|
|
689
754
|
}], propDecorators: { valeur: [{ type: i0.Input, args: [{ isSignal: true, alias: "valeur", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], etiquette: [{ type: i0.Input, args: [{ isSignal: true, alias: "etiquette", required: true }] }], ton: [{ type: i0.Input, args: [{ isSignal: true, alias: "ton", required: false }] }], texteDeValeur: [{ type: i0.Input, args: [{ isSignal: true, alias: "texteDeValeur", required: false }] }] } });
|
|
690
755
|
|
|
691
756
|
/**
|
|
@@ -711,7 +776,7 @@ class StSkeleton {
|
|
|
711
776
|
indicesDeColonne = computed(() => Array.from({ length: Math.max(1, this.colonnes()) }, (_, index) => index), /* @ts-ignore */
|
|
712
777
|
...(ngDevMode ? [{ debugName: "indicesDeColonne" }] : /* istanbul ignore next */ []));
|
|
713
778
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
714
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StSkeleton, isStandalone: true, selector: "st-skeleton", inputs: { variante: { classPropertyName: "variante", publicName: "variante", isSignal: true, isRequired: false, transformFunction: null }, lignes: { classPropertyName: "lignes", publicName: "lignes", isSignal: true, isRequired: false, transformFunction: null }, colonnes: { classPropertyName: "colonnes", publicName: "colonnes", isSignal: true, isRequired: false, transformFunction: null }, anime: { classPropertyName: "anime", publicName: "anime", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "attr.data-variante": "variante()", "attr.data-anime": "anime() ? \"\" : null" }, classAttribute: "st-skeleton" }, ngImport: i0, template: "@switch (variante()) {\n @case ('tableau') {\n @for (ligne of indicesDeLigne(); track ligne) {\n <div class=\"st-skeleton__rangee\">\n @for (colonne of indicesDeColonne(); track colonne) {\n <span class=\"st-skeleton__cellule\"></span>\n }\n </div>\n }\n }\n @case ('carte') {\n <span class=\"st-skeleton__media\"></span>\n @for (ligne of indicesDeLigne(); track ligne) {\n <span class=\"st-skeleton__ligne\"></span>\n }\n }\n @default {\n @for (ligne of indicesDeLigne(); track ligne) {\n <span class=\"st-skeleton__ligne\"></span>\n }\n }\n}\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:flex;flex-direction:column;gap:var(--st-espacement-2)}.st-skeleton__media,.st-skeleton__cellule,.st-skeleton__ligne{display:block;background:var(--st-couleur-surface-enfoncee);border-radius:var(--st-rayon-sm)}.st-skeleton__ligne{block-size:calc(1em * var(--st-interligne-normal))}.st-skeleton__ligne:last-child{inline-size:60%}.st-skeleton__rangee{display:flex;gap:var(--st-espacement-3)}.st-skeleton__cellule{flex:1;block-size:calc(1em * var(--st-interligne-normal))}.st-skeleton__media{block-size:8rem;border-radius:var(--st-rayon-md)}:host([data-anime]) .st-skeleton__ligne,:host([data-anime]) .st-skeleton__cellule,:host([data-anime]) .st-skeleton__media{background:linear-gradient(90deg,var(--st-couleur-surface-enfoncee) 25%,var(--st-couleur-surface-survol) 50%,var(--st-couleur-surface-enfoncee) 75%);background-size:200% 100%;animation:st-skeleton-miroitement var(--st-anim-chargement, 1.4s) linear infinite}@keyframes st-skeleton-miroitement{to{background-position:-200% 0}}@keyframes st-skeleton-pulsation{0%,to{opacity:1}50%{opacity:.5}}@media(prefers-reduced-motion:reduce){:host([data-anime]) .st-skeleton__ligne,:host([data-anime]) .st-skeleton__cellule,:host([data-anime]) .st-skeleton__media{background:var(--st-couleur-surface-enfoncee);animation:st-skeleton-pulsation 1.
|
|
779
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StSkeleton, isStandalone: true, selector: "st-skeleton", inputs: { variante: { classPropertyName: "variante", publicName: "variante", isSignal: true, isRequired: false, transformFunction: null }, lignes: { classPropertyName: "lignes", publicName: "lignes", isSignal: true, isRequired: false, transformFunction: null }, colonnes: { classPropertyName: "colonnes", publicName: "colonnes", isSignal: true, isRequired: false, transformFunction: null }, anime: { classPropertyName: "anime", publicName: "anime", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "attr.data-variante": "variante()", "attr.data-anime": "anime() ? \"\" : null" }, classAttribute: "st-skeleton" }, ngImport: i0, template: "@switch (variante()) {\n @case ('tableau') {\n @for (ligne of indicesDeLigne(); track ligne) {\n <div class=\"st-skeleton__rangee\">\n @for (colonne of indicesDeColonne(); track colonne) {\n <span class=\"st-skeleton__cellule\"></span>\n }\n </div>\n }\n }\n @case ('carte') {\n <span class=\"st-skeleton__media\"></span>\n @for (ligne of indicesDeLigne(); track ligne) {\n <span class=\"st-skeleton__ligne\"></span>\n }\n }\n @default {\n @for (ligne of indicesDeLigne(); track ligne) {\n <span class=\"st-skeleton__ligne\"></span>\n }\n }\n}\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:flex;flex-direction:column;gap:var(--st-espacement-2)}.st-skeleton__media,.st-skeleton__cellule,.st-skeleton__ligne{display:block;background:var(--st-couleur-surface-enfoncee);border-radius:var(--st-rayon-sm)}.st-skeleton__ligne{block-size:calc(1em * var(--st-interligne-normal))}.st-skeleton__ligne:last-child{inline-size:60%}.st-skeleton__rangee{display:flex;gap:var(--st-espacement-3)}.st-skeleton__cellule{flex:1;block-size:calc(1em * var(--st-interligne-normal))}.st-skeleton__media{block-size:8rem;border-radius:var(--st-rayon-md)}:host([data-anime]) .st-skeleton__ligne,:host([data-anime]) .st-skeleton__cellule,:host([data-anime]) .st-skeleton__media{background:linear-gradient(90deg,var(--st-couleur-surface-enfoncee) 25%,var(--st-couleur-surface-survol) 50%,var(--st-couleur-surface-enfoncee) 75%);background-size:200% 100%;animation:st-skeleton-miroitement var(--st-anim-chargement, 1.4s) linear infinite}@keyframes st-skeleton-miroitement{to{background-position:-200% 0}}@keyframes st-skeleton-pulsation{0%,to{opacity:1}50%{opacity:.5}}@media(prefers-reduced-motion:reduce){:host([data-anime]) .st-skeleton__ligne,:host([data-anime]) .st-skeleton__cellule,:host([data-anime]) .st-skeleton__media{background:var(--st-couleur-surface-enfoncee);animation:st-skeleton-pulsation var(--st-anim-respiration, 1.6s) ease-in-out infinite}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
715
780
|
}
|
|
716
781
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSkeleton, decorators: [{
|
|
717
782
|
type: Component,
|
|
@@ -720,7 +785,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
720
785
|
'aria-hidden': 'true',
|
|
721
786
|
'[attr.data-variante]': 'variante()',
|
|
722
787
|
'[attr.data-anime]': 'anime() ? "" : null',
|
|
723
|
-
}, template: "@switch (variante()) {\n @case ('tableau') {\n @for (ligne of indicesDeLigne(); track ligne) {\n <div class=\"st-skeleton__rangee\">\n @for (colonne of indicesDeColonne(); track colonne) {\n <span class=\"st-skeleton__cellule\"></span>\n }\n </div>\n }\n }\n @case ('carte') {\n <span class=\"st-skeleton__media\"></span>\n @for (ligne of indicesDeLigne(); track ligne) {\n <span class=\"st-skeleton__ligne\"></span>\n }\n }\n @default {\n @for (ligne of indicesDeLigne(); track ligne) {\n <span class=\"st-skeleton__ligne\"></span>\n }\n }\n}\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:flex;flex-direction:column;gap:var(--st-espacement-2)}.st-skeleton__media,.st-skeleton__cellule,.st-skeleton__ligne{display:block;background:var(--st-couleur-surface-enfoncee);border-radius:var(--st-rayon-sm)}.st-skeleton__ligne{block-size:calc(1em * var(--st-interligne-normal))}.st-skeleton__ligne:last-child{inline-size:60%}.st-skeleton__rangee{display:flex;gap:var(--st-espacement-3)}.st-skeleton__cellule{flex:1;block-size:calc(1em * var(--st-interligne-normal))}.st-skeleton__media{block-size:8rem;border-radius:var(--st-rayon-md)}:host([data-anime]) .st-skeleton__ligne,:host([data-anime]) .st-skeleton__cellule,:host([data-anime]) .st-skeleton__media{background:linear-gradient(90deg,var(--st-couleur-surface-enfoncee) 25%,var(--st-couleur-surface-survol) 50%,var(--st-couleur-surface-enfoncee) 75%);background-size:200% 100%;animation:st-skeleton-miroitement var(--st-anim-chargement, 1.4s) linear infinite}@keyframes st-skeleton-miroitement{to{background-position:-200% 0}}@keyframes st-skeleton-pulsation{0%,to{opacity:1}50%{opacity:.5}}@media(prefers-reduced-motion:reduce){:host([data-anime]) .st-skeleton__ligne,:host([data-anime]) .st-skeleton__cellule,:host([data-anime]) .st-skeleton__media{background:var(--st-couleur-surface-enfoncee);animation:st-skeleton-pulsation 1.
|
|
788
|
+
}, template: "@switch (variante()) {\n @case ('tableau') {\n @for (ligne of indicesDeLigne(); track ligne) {\n <div class=\"st-skeleton__rangee\">\n @for (colonne of indicesDeColonne(); track colonne) {\n <span class=\"st-skeleton__cellule\"></span>\n }\n </div>\n }\n }\n @case ('carte') {\n <span class=\"st-skeleton__media\"></span>\n @for (ligne of indicesDeLigne(); track ligne) {\n <span class=\"st-skeleton__ligne\"></span>\n }\n }\n @default {\n @for (ligne of indicesDeLigne(); track ligne) {\n <span class=\"st-skeleton__ligne\"></span>\n }\n }\n}\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:flex;flex-direction:column;gap:var(--st-espacement-2)}.st-skeleton__media,.st-skeleton__cellule,.st-skeleton__ligne{display:block;background:var(--st-couleur-surface-enfoncee);border-radius:var(--st-rayon-sm)}.st-skeleton__ligne{block-size:calc(1em * var(--st-interligne-normal))}.st-skeleton__ligne:last-child{inline-size:60%}.st-skeleton__rangee{display:flex;gap:var(--st-espacement-3)}.st-skeleton__cellule{flex:1;block-size:calc(1em * var(--st-interligne-normal))}.st-skeleton__media{block-size:8rem;border-radius:var(--st-rayon-md)}:host([data-anime]) .st-skeleton__ligne,:host([data-anime]) .st-skeleton__cellule,:host([data-anime]) .st-skeleton__media{background:linear-gradient(90deg,var(--st-couleur-surface-enfoncee) 25%,var(--st-couleur-surface-survol) 50%,var(--st-couleur-surface-enfoncee) 75%);background-size:200% 100%;animation:st-skeleton-miroitement var(--st-anim-chargement, 1.4s) linear infinite}@keyframes st-skeleton-miroitement{to{background-position:-200% 0}}@keyframes st-skeleton-pulsation{0%,to{opacity:1}50%{opacity:.5}}@media(prefers-reduced-motion:reduce){:host([data-anime]) .st-skeleton__ligne,:host([data-anime]) .st-skeleton__cellule,:host([data-anime]) .st-skeleton__media{background:var(--st-couleur-surface-enfoncee);animation:st-skeleton-pulsation var(--st-anim-respiration, 1.6s) ease-in-out infinite}}\n"] }]
|
|
724
789
|
}], propDecorators: { variante: [{ type: i0.Input, args: [{ isSignal: true, alias: "variante", required: false }] }], lignes: [{ type: i0.Input, args: [{ isSignal: true, alias: "lignes", required: false }] }], colonnes: [{ type: i0.Input, args: [{ isSignal: true, alias: "colonnes", required: false }] }], anime: [{ type: i0.Input, args: [{ isSignal: true, alias: "anime", required: false }] }] } });
|
|
725
790
|
|
|
726
791
|
/**
|
|
@@ -798,7 +863,7 @@ class StButton {
|
|
|
798
863
|
});
|
|
799
864
|
}
|
|
800
865
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
801
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StButton, isStandalone: true, selector: "button[stButton]", inputs: { variante: { classPropertyName: "variante", publicName: "variante", isSignal: true, isRequired: false, transformFunction: null }, taille: { classPropertyName: "taille", publicName: "taille", isSignal: true, isRequired: false, transformFunction: null }, pleineLargeur: { classPropertyName: "pleineLargeur", publicName: "pleineLargeur", isSignal: true, isRequired: false, transformFunction: null }, iconeAvant: { classPropertyName: "iconeAvant", publicName: "iconeAvant", isSignal: true, isRequired: false, transformFunction: null }, iconeApres: { classPropertyName: "iconeApres", publicName: "iconeApres", isSignal: true, isRequired: false, transformFunction: null }, chargement: { classPropertyName: "chargement", publicName: "chargement", isSignal: true, isRequired: false, transformFunction: null }, indisponible: { classPropertyName: "indisponible", publicName: "indisponible", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variante": "variante()", "attr.data-taille": "taille()", "attr.data-pleine-largeur": "pleineLargeur() ? \"\" : null", "attr.aria-disabled": "chargement() || indisponible() ? \"true\" : null", "attr.aria-busy": "chargement() ? \"true\" : null" }, classAttribute: "st-button" }, ngImport: i0, template: "@if (iconeAvant(); as icone) {\n <st-icon [nom]=\"icone\" taille=\"sm\" />\n}\n\n<span class=\"st-button__libelle\"><ng-content /></span>\n\n@if (iconeApres(); as icone) {\n <st-icon [nom]=\"icone\" taille=\"sm\" />\n}\n\n@if (chargement()) {\n <st-spinner\n class=\"st-button__chargement\"\n taille=\"sm\"\n [ton]=\"tonDuChargement()\"\n aria-hidden=\"true\"\n />\n}\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{position:relative;display:inline-flex;gap:var(--st-espacement-2);align-items:center;justify-content:center;min-block-size:var(--st-cible-tactile-min);padding-block:var(--st-espacement-2);padding-inline:var(--st-espacement-4);font-family:var(--st-police-base);font-size:var(--st-taille-md);font-weight:var(--st-graisse-moyenne);line-height:var(--st-interligne-serre);color:var(--st-couleur-texte);cursor:pointer;background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-md);transition:background-color var(--st-duree-rapide) var(--st-courbe-standard),border-color var(--st-duree-rapide) var(--st-courbe-standard)}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host:hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-surface-survol)}:host:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;border-color:var(--st-couleur-bordure)}:host[aria-disabled=true]{cursor:progress}.st-button__libelle{white-space:normal}:host([aria-busy=true])>:not(.st-button__chargement){opacity:0}.st-button__chargement{position:absolute;inset:0;margin:auto}:host([data-variante=primaire]){color:var(--st-couleur-sur-primaire);background:var(--st-couleur-primaire);border-color:transparent}:host([data-variante=primaire]):focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--st-couleur-surface)}:host([data-variante=primaire]):hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-primaire-survol)}:host([data-variante=danger]){color:var(--st-couleur-sur-danger);background:var(--st-couleur-danger);border-color:transparent}:host([data-variante=danger]):focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--st-couleur-surface)}:host([data-variante=danger]):hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-danger-survol)}:host([data-variante=discret]){color:var(--st-couleur-primaire);background:transparent;border-color:transparent}:host([data-variante=discret]):hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-surface-survol)}:host([data-taille=sm]){min-block-size:2.25rem;padding-inline:var(--st-espacement-3);font-size:var(--st-taille-sm)}@media(pointer:coarse){:host([data-taille=sm]){min-block-size:var(--st-cible-tactile-min)}}:host([data-taille=lg]){min-block-size:3.25rem;padding-inline:var(--st-espacement-6);font-size:var(--st-taille-lg)}:host([data-pleine-largeur]){display:flex;inline-size:100%}\n"], dependencies: [{ kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "taille", "ton", "etiquette"] }, { kind: "component", type: StSpinner, selector: "st-spinner", inputs: ["taille", "ton", "etiquette"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
866
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StButton, isStandalone: true, selector: "button[stButton]", inputs: { variante: { classPropertyName: "variante", publicName: "variante", isSignal: true, isRequired: false, transformFunction: null }, taille: { classPropertyName: "taille", publicName: "taille", isSignal: true, isRequired: false, transformFunction: null }, pleineLargeur: { classPropertyName: "pleineLargeur", publicName: "pleineLargeur", isSignal: true, isRequired: false, transformFunction: null }, iconeAvant: { classPropertyName: "iconeAvant", publicName: "iconeAvant", isSignal: true, isRequired: false, transformFunction: null }, iconeApres: { classPropertyName: "iconeApres", publicName: "iconeApres", isSignal: true, isRequired: false, transformFunction: null }, chargement: { classPropertyName: "chargement", publicName: "chargement", isSignal: true, isRequired: false, transformFunction: null }, indisponible: { classPropertyName: "indisponible", publicName: "indisponible", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variante": "variante()", "attr.data-taille": "taille()", "attr.data-pleine-largeur": "pleineLargeur() ? \"\" : null", "attr.aria-disabled": "chargement() || indisponible() ? \"true\" : null", "attr.aria-busy": "chargement() ? \"true\" : null" }, classAttribute: "st-button" }, ngImport: i0, template: "@if (iconeAvant(); as icone) {\n <st-icon [nom]=\"icone\" taille=\"sm\" />\n}\n\n<span class=\"st-button__libelle\"><ng-content /></span>\n\n@if (iconeApres(); as icone) {\n <st-icon [nom]=\"icone\" taille=\"sm\" />\n}\n\n@if (chargement()) {\n <st-spinner\n class=\"st-button__chargement\"\n taille=\"sm\"\n [ton]=\"tonDuChargement()\"\n aria-hidden=\"true\"\n />\n}\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{position:relative;display:inline-flex;gap:var(--st-espacement-2);align-items:center;justify-content:center;min-block-size:var(--st-commande-hauteur, var(--st-cible-tactile-min));padding-block:var(--st-espacement-2);padding-inline:var(--st-espacement-4);font-family:var(--st-police-base);font-size:var(--st-taille-md);font-weight:var(--st-graisse-moyenne);line-height:var(--st-interligne-serre);color:var(--st-couleur-texte);cursor:pointer;background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md));transition:background-color var(--st-duree-rapide) var(--st-courbe-standard),border-color var(--st-duree-rapide) var(--st-courbe-standard)}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host:hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-surface-survol)}:host:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;border-color:var(--st-couleur-bordure)}:host[aria-disabled=true]{cursor:progress}.st-button__libelle{white-space:normal}:host([aria-busy=true])>:not(.st-button__chargement){opacity:0}.st-button__chargement{position:absolute;inset:0;margin:auto}:host([data-variante=primaire]){color:var(--st-couleur-sur-primaire);background:var(--st-couleur-primaire);border-color:transparent}:host([data-variante=primaire]):focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--st-couleur-surface)}:host([data-variante=primaire]):hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-primaire-survol)}:host([data-variante=danger]){color:var(--st-couleur-sur-danger);background:var(--st-couleur-danger);border-color:transparent}:host([data-variante=danger]):focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--st-couleur-surface)}:host([data-variante=danger]):hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-danger-survol)}:host([data-variante=discret]){color:var(--st-couleur-primaire);background:transparent;border-color:transparent}:host([data-variante=discret]):hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-surface-survol)}:host([data-taille=sm]){min-block-size:2.25rem;padding-inline:var(--st-espacement-3);font-size:var(--st-taille-sm)}@media(pointer:coarse){:host([data-taille=sm]){min-block-size:var(--st-commande-hauteur, var(--st-cible-tactile-min))}}:host([data-taille=lg]){min-block-size:3.25rem;padding-inline:var(--st-espacement-6);font-size:var(--st-taille-lg)}:host([data-pleine-largeur]){display:flex;inline-size:100%}@media(prefers-reduced-motion:reduce){:host{transition:none}}\n"], dependencies: [{ kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "taille", "ton", "etiquette"] }, { kind: "component", type: StSpinner, selector: "st-spinner", inputs: ["taille", "ton", "etiquette"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
802
867
|
}
|
|
803
868
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StButton, decorators: [{
|
|
804
869
|
type: Component,
|
|
@@ -809,7 +874,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
809
874
|
'[attr.data-pleine-largeur]': 'pleineLargeur() ? "" : null',
|
|
810
875
|
'[attr.aria-disabled]': 'chargement() || indisponible() ? "true" : null',
|
|
811
876
|
'[attr.aria-busy]': 'chargement() ? "true" : null',
|
|
812
|
-
}, template: "@if (iconeAvant(); as icone) {\n <st-icon [nom]=\"icone\" taille=\"sm\" />\n}\n\n<span class=\"st-button__libelle\"><ng-content /></span>\n\n@if (iconeApres(); as icone) {\n <st-icon [nom]=\"icone\" taille=\"sm\" />\n}\n\n@if (chargement()) {\n <st-spinner\n class=\"st-button__chargement\"\n taille=\"sm\"\n [ton]=\"tonDuChargement()\"\n aria-hidden=\"true\"\n />\n}\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{position:relative;display:inline-flex;gap:var(--st-espacement-2);align-items:center;justify-content:center;min-block-size:var(--st-cible-tactile-min);padding-block:var(--st-espacement-2);padding-inline:var(--st-espacement-4);font-family:var(--st-police-base);font-size:var(--st-taille-md);font-weight:var(--st-graisse-moyenne);line-height:var(--st-interligne-serre);color:var(--st-couleur-texte);cursor:pointer;background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-md);transition:background-color var(--st-duree-rapide) var(--st-courbe-standard),border-color var(--st-duree-rapide) var(--st-courbe-standard)}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host:hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-surface-survol)}:host:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;border-color:var(--st-couleur-bordure)}:host[aria-disabled=true]{cursor:progress}.st-button__libelle{white-space:normal}:host([aria-busy=true])>:not(.st-button__chargement){opacity:0}.st-button__chargement{position:absolute;inset:0;margin:auto}:host([data-variante=primaire]){color:var(--st-couleur-sur-primaire);background:var(--st-couleur-primaire);border-color:transparent}:host([data-variante=primaire]):focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--st-couleur-surface)}:host([data-variante=primaire]):hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-primaire-survol)}:host([data-variante=danger]){color:var(--st-couleur-sur-danger);background:var(--st-couleur-danger);border-color:transparent}:host([data-variante=danger]):focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--st-couleur-surface)}:host([data-variante=danger]):hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-danger-survol)}:host([data-variante=discret]){color:var(--st-couleur-primaire);background:transparent;border-color:transparent}:host([data-variante=discret]):hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-surface-survol)}:host([data-taille=sm]){min-block-size:2.25rem;padding-inline:var(--st-espacement-3);font-size:var(--st-taille-sm)}@media(pointer:coarse){:host([data-taille=sm]){min-block-size:var(--st-cible-tactile-min)}}:host([data-taille=lg]){min-block-size:3.25rem;padding-inline:var(--st-espacement-6);font-size:var(--st-taille-lg)}:host([data-pleine-largeur]){display:flex;inline-size:100%}\n"] }]
|
|
877
|
+
}, template: "@if (iconeAvant(); as icone) {\n <st-icon [nom]=\"icone\" taille=\"sm\" />\n}\n\n<span class=\"st-button__libelle\"><ng-content /></span>\n\n@if (iconeApres(); as icone) {\n <st-icon [nom]=\"icone\" taille=\"sm\" />\n}\n\n@if (chargement()) {\n <st-spinner\n class=\"st-button__chargement\"\n taille=\"sm\"\n [ton]=\"tonDuChargement()\"\n aria-hidden=\"true\"\n />\n}\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{position:relative;display:inline-flex;gap:var(--st-espacement-2);align-items:center;justify-content:center;min-block-size:var(--st-commande-hauteur, var(--st-cible-tactile-min));padding-block:var(--st-espacement-2);padding-inline:var(--st-espacement-4);font-family:var(--st-police-base);font-size:var(--st-taille-md);font-weight:var(--st-graisse-moyenne);line-height:var(--st-interligne-serre);color:var(--st-couleur-texte);cursor:pointer;background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md));transition:background-color var(--st-duree-rapide) var(--st-courbe-standard),border-color var(--st-duree-rapide) var(--st-courbe-standard)}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host:hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-surface-survol)}:host:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;border-color:var(--st-couleur-bordure)}:host[aria-disabled=true]{cursor:progress}.st-button__libelle{white-space:normal}:host([aria-busy=true])>:not(.st-button__chargement){opacity:0}.st-button__chargement{position:absolute;inset:0;margin:auto}:host([data-variante=primaire]){color:var(--st-couleur-sur-primaire);background:var(--st-couleur-primaire);border-color:transparent}:host([data-variante=primaire]):focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--st-couleur-surface)}:host([data-variante=primaire]):hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-primaire-survol)}:host([data-variante=danger]){color:var(--st-couleur-sur-danger);background:var(--st-couleur-danger);border-color:transparent}:host([data-variante=danger]):focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--st-couleur-surface)}:host([data-variante=danger]):hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-danger-survol)}:host([data-variante=discret]){color:var(--st-couleur-primaire);background:transparent;border-color:transparent}:host([data-variante=discret]):hover:not([aria-disabled=true],:disabled){background:var(--st-couleur-surface-survol)}:host([data-taille=sm]){min-block-size:2.25rem;padding-inline:var(--st-espacement-3);font-size:var(--st-taille-sm)}@media(pointer:coarse){:host([data-taille=sm]){min-block-size:var(--st-commande-hauteur, var(--st-cible-tactile-min))}}:host([data-taille=lg]){min-block-size:3.25rem;padding-inline:var(--st-espacement-6);font-size:var(--st-taille-lg)}:host([data-pleine-largeur]){display:flex;inline-size:100%}@media(prefers-reduced-motion:reduce){:host{transition:none}}\n"] }]
|
|
813
878
|
}], ctorParameters: () => [], propDecorators: { variante: [{ type: i0.Input, args: [{ isSignal: true, alias: "variante", required: false }] }], taille: [{ type: i0.Input, args: [{ isSignal: true, alias: "taille", required: false }] }], pleineLargeur: [{ type: i0.Input, args: [{ isSignal: true, alias: "pleineLargeur", required: false }] }], iconeAvant: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconeAvant", required: false }] }], iconeApres: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconeApres", required: false }] }], chargement: [{ type: i0.Input, args: [{ isSignal: true, alias: "chargement", required: false }] }], indisponible: [{ type: i0.Input, args: [{ isSignal: true, alias: "indisponible", required: false }] }] } });
|
|
814
879
|
|
|
815
880
|
/**
|
|
@@ -840,7 +905,7 @@ class StIconButton {
|
|
|
840
905
|
enfonce = input(null, /* @ts-ignore */
|
|
841
906
|
...(ngDevMode ? [{ debugName: "enfonce" }] : /* istanbul ignore next */ []));
|
|
842
907
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StIconButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
843
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StIconButton, isStandalone: true, selector: "button[stIconButton]", inputs: { icone: { classPropertyName: "icone", publicName: "icone", isSignal: true, isRequired: true, transformFunction: null }, etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: true, transformFunction: null }, variante: { classPropertyName: "variante", publicName: "variante", isSignal: true, isRequired: false, transformFunction: null }, taille: { classPropertyName: "taille", publicName: "taille", isSignal: true, isRequired: false, transformFunction: null }, enfonce: { classPropertyName: "enfonce", publicName: "enfonce", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variante": "variante()", "attr.data-taille": "taille()", "attr.aria-label": "etiquette()", "attr.aria-pressed": "enfonce() === null ? null : enfonce()" }, classAttribute: "st-icon-button" }, ngImport: i0, template: "<st-icon [nom]=\"icone()\" [taille]=\"taille() === 'sm' ? 'sm' : 'md'\" />\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:inline-flex;flex:none;align-items:center;justify-content:center;min-inline-size:var(--st-cible-tactile-min);min-block-size:var(--st-cible-tactile-min);color:var(--st-couleur-texte);cursor:pointer;background:transparent;border:1px solid transparent;border-radius:var(--st-rayon-md);transition:background-color var(--st-duree-rapide) var(--st-courbe-standard)}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host:hover:not(:disabled){background:var(--st-couleur-surface-survol)}:host:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed}:host[aria-pressed=true]{background:var(--st-couleur-surface-enfoncee)}:host([data-variante=secondaire]){background:var(--st-couleur-surface);border-color:var(--st-couleur-bordure-forte)}:host([data-variante=danger]){color:var(--st-couleur-danger)}:host([data-variante=danger]):hover:not(:disabled){background:var(--st-couleur-danger-discret)}\n"], dependencies: [{ kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "taille", "ton", "etiquette"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
908
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StIconButton, isStandalone: true, selector: "button[stIconButton]", inputs: { icone: { classPropertyName: "icone", publicName: "icone", isSignal: true, isRequired: true, transformFunction: null }, etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: true, transformFunction: null }, variante: { classPropertyName: "variante", publicName: "variante", isSignal: true, isRequired: false, transformFunction: null }, taille: { classPropertyName: "taille", publicName: "taille", isSignal: true, isRequired: false, transformFunction: null }, enfonce: { classPropertyName: "enfonce", publicName: "enfonce", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variante": "variante()", "attr.data-taille": "taille()", "attr.aria-label": "etiquette()", "attr.aria-pressed": "enfonce() === null ? null : enfonce()" }, classAttribute: "st-icon-button" }, ngImport: i0, template: "<st-icon [nom]=\"icone()\" [taille]=\"taille() === 'sm' ? 'sm' : 'md'\" />\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:inline-flex;flex:none;align-items:center;justify-content:center;min-inline-size:var(--st-commande-hauteur, var(--st-cible-tactile-min));min-block-size:var(--st-commande-hauteur, var(--st-cible-tactile-min));color:var(--st-couleur-texte);cursor:pointer;background:transparent;border:1px solid transparent;border-radius:var(--st-commande-rayon, var(--st-rayon-md));transition:background-color var(--st-duree-rapide) var(--st-courbe-standard)}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host:hover:not(:disabled){background:var(--st-couleur-surface-survol)}:host:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed}:host[aria-pressed=true]{background:var(--st-couleur-surface-enfoncee)}:host([data-variante=secondaire]){background:var(--st-couleur-surface);border-color:var(--st-couleur-bordure-forte)}:host([data-variante=danger]){color:var(--st-couleur-danger)}:host([data-variante=danger]):hover:not(:disabled){background:var(--st-couleur-danger-discret)}@media(prefers-reduced-motion:reduce){:host{transition:none}}\n"], dependencies: [{ kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "taille", "ton", "etiquette"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
844
909
|
}
|
|
845
910
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StIconButton, decorators: [{
|
|
846
911
|
type: Component,
|
|
@@ -850,7 +915,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
850
915
|
'[attr.data-taille]': 'taille()',
|
|
851
916
|
'[attr.aria-label]': 'etiquette()',
|
|
852
917
|
'[attr.aria-pressed]': 'enfonce() === null ? null : enfonce()',
|
|
853
|
-
}, template: "<st-icon [nom]=\"icone()\" [taille]=\"taille() === 'sm' ? 'sm' : 'md'\" />\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:inline-flex;flex:none;align-items:center;justify-content:center;min-inline-size:var(--st-cible-tactile-min);min-block-size:var(--st-cible-tactile-min);color:var(--st-couleur-texte);cursor:pointer;background:transparent;border:1px solid transparent;border-radius:var(--st-rayon-md);transition:background-color var(--st-duree-rapide) var(--st-courbe-standard)}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host:hover:not(:disabled){background:var(--st-couleur-surface-survol)}:host:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed}:host[aria-pressed=true]{background:var(--st-couleur-surface-enfoncee)}:host([data-variante=secondaire]){background:var(--st-couleur-surface);border-color:var(--st-couleur-bordure-forte)}:host([data-variante=danger]){color:var(--st-couleur-danger)}:host([data-variante=danger]):hover:not(:disabled){background:var(--st-couleur-danger-discret)}\n"] }]
|
|
918
|
+
}, template: "<st-icon [nom]=\"icone()\" [taille]=\"taille() === 'sm' ? 'sm' : 'md'\" />\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:inline-flex;flex:none;align-items:center;justify-content:center;min-inline-size:var(--st-commande-hauteur, var(--st-cible-tactile-min));min-block-size:var(--st-commande-hauteur, var(--st-cible-tactile-min));color:var(--st-couleur-texte);cursor:pointer;background:transparent;border:1px solid transparent;border-radius:var(--st-commande-rayon, var(--st-rayon-md));transition:background-color var(--st-duree-rapide) var(--st-courbe-standard)}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host:hover:not(:disabled){background:var(--st-couleur-surface-survol)}:host:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed}:host[aria-pressed=true]{background:var(--st-couleur-surface-enfoncee)}:host([data-variante=secondaire]){background:var(--st-couleur-surface);border-color:var(--st-couleur-bordure-forte)}:host([data-variante=danger]){color:var(--st-couleur-danger)}:host([data-variante=danger]):hover:not(:disabled){background:var(--st-couleur-danger-discret)}@media(prefers-reduced-motion:reduce){:host{transition:none}}\n"] }]
|
|
854
919
|
}], propDecorators: { icone: [{ type: i0.Input, args: [{ isSignal: true, alias: "icone", required: true }] }], etiquette: [{ type: i0.Input, args: [{ isSignal: true, alias: "etiquette", required: true }] }], variante: [{ type: i0.Input, args: [{ isSignal: true, alias: "variante", required: false }] }], taille: [{ type: i0.Input, args: [{ isSignal: true, alias: "taille", required: false }] }], enfonce: [{ type: i0.Input, args: [{ isSignal: true, alias: "enfonce", required: false }] }] } });
|
|
855
920
|
|
|
856
921
|
/**
|
|
@@ -878,7 +943,7 @@ class StLink {
|
|
|
878
943
|
mentionExterneLue = computed(() => this.mentionExterne() ?? this.libelles().nouvelleFenetre, /* @ts-ignore */
|
|
879
944
|
...(ngDevMode ? [{ debugName: "mentionExterneLue" }] : /* istanbul ignore next */ []));
|
|
880
945
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StLink, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
881
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StLink, isStandalone: true, selector: "a[stLink]", inputs: { variante: { classPropertyName: "variante", publicName: "variante", isSignal: true, isRequired: false, transformFunction: null }, externe: { classPropertyName: "externe", publicName: "externe", isSignal: true, isRequired: false, transformFunction: null }, mentionExterne: { classPropertyName: "mentionExterne", publicName: "mentionExterne", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variante": "variante()", "attr.target": "externe() ? \"_blank\" : null", "attr.rel": "externe() ? \"noopener noreferrer\" : null" }, classAttribute: "st-link" }, ngImport: i0, template: "<ng-content />\n@if (externe()) {\n <st-icon nom=\"lien-externe\" taille=\"xs\" />\n <span class=\"st-vh\">{{ mentionExterneLue() }}</span>\n}\n", styles: [":host([hidden]){display:none!important}:host{display:inline;gap:var(--st-espacement-1);color:var(--st-couleur-primaire);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;border-radius:var(--st-rayon-xs)}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host:hover{color:var(--st-couleur-primaire-survol)}:host([data-variante=discret]){color:var(--st-couleur-texte-discret)}:host([data-variante=autonome]){display:inline-flex;gap:var(--st-espacement-1);align-items:center;min-block-size:var(--st-cible-tactile-min);text-decoration:none}:host([data-variante=autonome]):hover{text-decoration:underline}.st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "taille", "ton", "etiquette"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
946
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StLink, isStandalone: true, selector: "a[stLink]", inputs: { variante: { classPropertyName: "variante", publicName: "variante", isSignal: true, isRequired: false, transformFunction: null }, externe: { classPropertyName: "externe", publicName: "externe", isSignal: true, isRequired: false, transformFunction: null }, mentionExterne: { classPropertyName: "mentionExterne", publicName: "mentionExterne", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variante": "variante()", "attr.target": "externe() ? \"_blank\" : null", "attr.rel": "externe() ? \"noopener noreferrer\" : null" }, classAttribute: "st-link" }, ngImport: i0, template: "<ng-content />\n@if (externe()) {\n <st-icon nom=\"lien-externe\" taille=\"xs\" />\n <span class=\"st-vh\">{{ mentionExterneLue() }}</span>\n}\n", styles: [":host([hidden]){display:none!important}:host{display:inline;gap:var(--st-espacement-1);min-block-size:var(--st-cible-min);align-items:center;color:var(--st-couleur-primaire);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;border-radius:var(--st-rayon-xs)}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host:hover{color:var(--st-couleur-primaire-survol)}:host([data-variante=discret]){color:var(--st-couleur-texte-discret)}:host([data-variante=autonome]){display:inline-flex;gap:var(--st-espacement-1);align-items:center;min-block-size:var(--st-cible-tactile-min);text-decoration:none}:host([data-variante=autonome]):hover{text-decoration:underline}.st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "taille", "ton", "etiquette"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
882
947
|
}
|
|
883
948
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StLink, decorators: [{
|
|
884
949
|
type: Component,
|
|
@@ -887,7 +952,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
887
952
|
'[attr.data-variante]': 'variante()',
|
|
888
953
|
'[attr.target]': 'externe() ? "_blank" : null',
|
|
889
954
|
'[attr.rel]': 'externe() ? "noopener noreferrer" : null',
|
|
890
|
-
}, template: "<ng-content />\n@if (externe()) {\n <st-icon nom=\"lien-externe\" taille=\"xs\" />\n <span class=\"st-vh\">{{ mentionExterneLue() }}</span>\n}\n", styles: [":host([hidden]){display:none!important}:host{display:inline;gap:var(--st-espacement-1);color:var(--st-couleur-primaire);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;border-radius:var(--st-rayon-xs)}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host:hover{color:var(--st-couleur-primaire-survol)}:host([data-variante=discret]){color:var(--st-couleur-texte-discret)}:host([data-variante=autonome]){display:inline-flex;gap:var(--st-espacement-1);align-items:center;min-block-size:var(--st-cible-tactile-min);text-decoration:none}:host([data-variante=autonome]):hover{text-decoration:underline}.st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"] }]
|
|
955
|
+
}, template: "<ng-content />\n@if (externe()) {\n <st-icon nom=\"lien-externe\" taille=\"xs\" />\n <span class=\"st-vh\">{{ mentionExterneLue() }}</span>\n}\n", styles: [":host([hidden]){display:none!important}:host{display:inline;gap:var(--st-espacement-1);min-block-size:var(--st-cible-min);align-items:center;color:var(--st-couleur-primaire);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;border-radius:var(--st-rayon-xs)}:host:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host:hover{color:var(--st-couleur-primaire-survol)}:host([data-variante=discret]){color:var(--st-couleur-texte-discret)}:host([data-variante=autonome]){display:inline-flex;gap:var(--st-espacement-1);align-items:center;min-block-size:var(--st-cible-tactile-min);text-decoration:none}:host([data-variante=autonome]):hover{text-decoration:underline}.st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"] }]
|
|
891
956
|
}], propDecorators: { variante: [{ type: i0.Input, args: [{ isSignal: true, alias: "variante", required: false }] }], externe: [{ type: i0.Input, args: [{ isSignal: true, alias: "externe", required: false }] }], mentionExterne: [{ type: i0.Input, args: [{ isSignal: true, alias: "mentionExterne", required: false }] }] } });
|
|
892
957
|
|
|
893
958
|
/**
|
|
@@ -2506,7 +2571,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
2506
2571
|
type: Directive
|
|
2507
2572
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
|
|
2508
2573
|
|
|
2509
|
-
let compteur$
|
|
2574
|
+
let compteur$8 = 0;
|
|
2510
2575
|
/** Elements qu'un `label for` etiquette. */
|
|
2511
2576
|
const ELEMENTS_ETIQUETABLES = new Set([
|
|
2512
2577
|
'INPUT',
|
|
@@ -2574,7 +2639,7 @@ class StFormField {
|
|
|
2574
2639
|
libelleMasque = input(false, { ...(ngDevMode ? { debugName: "libelleMasque" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2575
2640
|
/** Identifiants du champ, lus par `stControleDeChamp` et par le gabarit. */
|
|
2576
2641
|
identifiants = (() => {
|
|
2577
|
-
const base = `st-champ-${(compteur$
|
|
2642
|
+
const base = `st-champ-${(compteur$8 += 1).toString()}`;
|
|
2578
2643
|
return {
|
|
2579
2644
|
controle: base,
|
|
2580
2645
|
libelle: `${base}-libelle`,
|
|
@@ -2703,11 +2768,11 @@ class StInput extends ControleDeSaisie {
|
|
|
2703
2768
|
this.value.set(this.texteSaisi(evenement));
|
|
2704
2769
|
}
|
|
2705
2770
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2706
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StInput, isStandalone: true, selector: "st-input", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, inputmode: { classPropertyName: "inputmode", publicName: "inputmode", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "st-input" }, usesInheritance: true, ngImport: i0, template: "<st-form-field\n [libelle]=\"libelle()\"\n [aide]=\"aide()\"\n [erreurs]=\"errors()\"\n [afficherErreurs]=\"touched()\"\n [obligatoire]=\"required()\"\n>\n <input\n #champ\n class=\"st-input__champ\"\n stControleDeChamp\n [type]=\"type()\"\n [value]=\"value()\"\n [attr.name]=\"name() || null\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.inputmode]=\"inputmode()\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n (input)=\"surSaisie($event)\"\n (blur)=\"touch.emit()\"\n />\n</st-form-field>\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:block}.st-input__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-input__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-
|
|
2771
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StInput, isStandalone: true, selector: "st-input", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, inputmode: { classPropertyName: "inputmode", publicName: "inputmode", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "st-input" }, usesInheritance: true, ngImport: i0, template: "<st-form-field\n [libelle]=\"libelle()\"\n [aide]=\"aide()\"\n [erreurs]=\"errors()\"\n [afficherErreurs]=\"touched()\"\n [obligatoire]=\"required()\"\n>\n <input\n #champ\n class=\"st-input__champ\"\n stControleDeChamp\n [type]=\"type()\"\n [value]=\"value()\"\n [attr.name]=\"name() || null\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.inputmode]=\"inputmode()\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n (input)=\"surSaisie($event)\"\n (blur)=\"touch.emit()\"\n />\n</st-form-field>\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:block}.st-input__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-input__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-commande-hauteur, var(--st-cible-tactile-min));padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}.st-input__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-input__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-input__champ:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}\n"], dependencies: [{ kind: "component", type: StFormField, selector: "st-form-field", inputs: ["libelle", "aide", "complement", "erreurs", "afficherErreurs", "obligatoire", "disposition", "libelleMasque"] }, { kind: "directive", type: StControleDeChamp, selector: "[stControleDeChamp]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2707
2772
|
}
|
|
2708
2773
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StInput, decorators: [{
|
|
2709
2774
|
type: Component,
|
|
2710
|
-
args: [{ selector: 'st-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StFormField, StControleDeChamp], host: { class: 'st-input' }, template: "<st-form-field\n [libelle]=\"libelle()\"\n [aide]=\"aide()\"\n [erreurs]=\"errors()\"\n [afficherErreurs]=\"touched()\"\n [obligatoire]=\"required()\"\n>\n <input\n #champ\n class=\"st-input__champ\"\n stControleDeChamp\n [type]=\"type()\"\n [value]=\"value()\"\n [attr.name]=\"name() || null\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.inputmode]=\"inputmode()\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n (input)=\"surSaisie($event)\"\n (blur)=\"touch.emit()\"\n />\n</st-form-field>\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:block}.st-input__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-input__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-
|
|
2775
|
+
args: [{ selector: 'st-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StFormField, StControleDeChamp], host: { class: 'st-input' }, template: "<st-form-field\n [libelle]=\"libelle()\"\n [aide]=\"aide()\"\n [erreurs]=\"errors()\"\n [afficherErreurs]=\"touched()\"\n [obligatoire]=\"required()\"\n>\n <input\n #champ\n class=\"st-input__champ\"\n stControleDeChamp\n [type]=\"type()\"\n [value]=\"value()\"\n [attr.name]=\"name() || null\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.inputmode]=\"inputmode()\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n (input)=\"surSaisie($event)\"\n (blur)=\"touch.emit()\"\n />\n</st-form-field>\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:block}.st-input__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-input__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-commande-hauteur, var(--st-cible-tactile-min));padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}.st-input__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-input__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-input__champ:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}\n"] }]
|
|
2711
2776
|
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], inputmode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputmode", required: false }] }] } });
|
|
2712
2777
|
|
|
2713
2778
|
/** Restant a partir duquel le compteur se signale. */
|
|
@@ -2770,14 +2835,14 @@ class StTextarea extends ControleDeSaisie {
|
|
|
2770
2835
|
this.value.set(this.texteSaisi(evenement));
|
|
2771
2836
|
}
|
|
2772
2837
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StTextarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2773
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StTextarea, isStandalone: true, selector: "st-textarea", inputs: { lignes: { classPropertyName: "lignes", publicName: "lignes", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "st-textarea" }, usesInheritance: true, ngImport: i0, template: "<st-form-field\n [libelle]=\"libelle()\"\n [aide]=\"aide()\"\n [complement]=\"compteur()\"\n [erreurs]=\"errors()\"\n [afficherErreurs]=\"touched()\"\n [obligatoire]=\"required()\"\n>\n <textarea\n #champ\n class=\"st-textarea__champ\"\n stControleDeChamp\n [rows]=\"lignes()\"\n [value]=\"value()\"\n [attr.name]=\"name() || null\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n (input)=\"surSaisie($event)\"\n (blur)=\"touch.emit()\"\n ></textarea>\n</st-form-field>\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:block}.st-textarea__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-textarea__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-
|
|
2838
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StTextarea, isStandalone: true, selector: "st-textarea", inputs: { lignes: { classPropertyName: "lignes", publicName: "lignes", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "st-textarea" }, usesInheritance: true, ngImport: i0, template: "<st-form-field\n [libelle]=\"libelle()\"\n [aide]=\"aide()\"\n [complement]=\"compteur()\"\n [erreurs]=\"errors()\"\n [afficherErreurs]=\"touched()\"\n [obligatoire]=\"required()\"\n>\n <textarea\n #champ\n class=\"st-textarea__champ\"\n stControleDeChamp\n [rows]=\"lignes()\"\n [value]=\"value()\"\n [attr.name]=\"name() || null\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n (input)=\"surSaisie($event)\"\n (blur)=\"touch.emit()\"\n ></textarea>\n</st-form-field>\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:block}.st-textarea__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-textarea__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-commande-hauteur, var(--st-cible-tactile-min));padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}.st-textarea__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-textarea__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-textarea__champ:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-textarea__champ{resize:vertical}\n"], dependencies: [{ kind: "component", type: StFormField, selector: "st-form-field", inputs: ["libelle", "aide", "complement", "erreurs", "afficherErreurs", "obligatoire", "disposition", "libelleMasque"] }, { kind: "directive", type: StControleDeChamp, selector: "[stControleDeChamp]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2774
2839
|
}
|
|
2775
2840
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StTextarea, decorators: [{
|
|
2776
2841
|
type: Component,
|
|
2777
|
-
args: [{ selector: 'st-textarea', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StFormField, StControleDeChamp], host: { class: 'st-textarea' }, template: "<st-form-field\n [libelle]=\"libelle()\"\n [aide]=\"aide()\"\n [complement]=\"compteur()\"\n [erreurs]=\"errors()\"\n [afficherErreurs]=\"touched()\"\n [obligatoire]=\"required()\"\n>\n <textarea\n #champ\n class=\"st-textarea__champ\"\n stControleDeChamp\n [rows]=\"lignes()\"\n [value]=\"value()\"\n [attr.name]=\"name() || null\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n (input)=\"surSaisie($event)\"\n (blur)=\"touch.emit()\"\n ></textarea>\n</st-form-field>\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:block}.st-textarea__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-textarea__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-
|
|
2842
|
+
args: [{ selector: 'st-textarea', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StFormField, StControleDeChamp], host: { class: 'st-textarea' }, template: "<st-form-field\n [libelle]=\"libelle()\"\n [aide]=\"aide()\"\n [complement]=\"compteur()\"\n [erreurs]=\"errors()\"\n [afficherErreurs]=\"touched()\"\n [obligatoire]=\"required()\"\n>\n <textarea\n #champ\n class=\"st-textarea__champ\"\n stControleDeChamp\n [rows]=\"lignes()\"\n [value]=\"value()\"\n [attr.name]=\"name() || null\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n (input)=\"surSaisie($event)\"\n (blur)=\"touch.emit()\"\n ></textarea>\n</st-form-field>\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:block}.st-textarea__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-textarea__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-commande-hauteur, var(--st-cible-tactile-min));padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}.st-textarea__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-textarea__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-textarea__champ:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-textarea__champ{resize:vertical}\n"] }]
|
|
2778
2843
|
}], ctorParameters: () => [], propDecorators: { lignes: [{ type: i0.Input, args: [{ isSignal: true, alias: "lignes", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }] } });
|
|
2779
2844
|
|
|
2780
|
-
let compteur$
|
|
2845
|
+
let compteur$7 = 0;
|
|
2781
2846
|
/**
|
|
2782
2847
|
* Groupe de controles, nomme par sa QUESTION.
|
|
2783
2848
|
*
|
|
@@ -2805,7 +2870,7 @@ class StFieldset {
|
|
|
2805
2870
|
...(ngDevMode ? [{ debugName: "erreurs" }] : /* istanbul ignore next */ []));
|
|
2806
2871
|
afficherErreurs = input(false, { ...(ngDevMode ? { debugName: "afficherErreurs" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2807
2872
|
obligatoire = input(false, { ...(ngDevMode ? { debugName: "obligatoire" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2808
|
-
base = `st-groupe-${(compteur$
|
|
2873
|
+
base = `st-groupe-${(compteur$7 += 1).toString()}`;
|
|
2809
2874
|
identifiantAide = `${this.base}-aide`;
|
|
2810
2875
|
identifiantErreur = `${this.base}-erreur`;
|
|
2811
2876
|
libelleObligatoire = computed(() => this.libelles().obligatoire, /* @ts-ignore */
|
|
@@ -2890,7 +2955,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
2890
2955
|
}, template: "<st-form-field\n disposition=\"case\"\n [libelle]=\"libelle()\"\n [aide]=\"aide()\"\n [erreurs]=\"errors()\"\n [afficherErreurs]=\"touched()\"\n [obligatoire]=\"required()\"\n>\n <input\n #champ\n class=\"st-checkbox__case\"\n type=\"checkbox\"\n stControleDeChamp\n [checked]=\"checked()\"\n [attr.name]=\"name() || null\"\n [disabled]=\"disabled()\"\n (change)=\"surChangement($event)\"\n (blur)=\"touch.emit()\"\n />\n</st-form-field>\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:block}.st-checkbox__case:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-checkbox__case{inline-size:1.5rem;block-size:1.5rem;margin:0;cursor:pointer;accent-color:var(--st-couleur-primaire)}.st-checkbox__case:disabled{cursor:not-allowed}\n"] }]
|
|
2891
2956
|
}], propDecorators: { libelle: [{ type: i0.Input, args: [{ isSignal: true, alias: "libelle", required: true }] }], aide: [{ type: i0.Input, args: [{ isSignal: true, alias: "aide", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], champ: [{ type: i0.ViewChild, args: ['champ', { isSignal: true }] }] } });
|
|
2892
2957
|
|
|
2893
|
-
let compteur$
|
|
2958
|
+
let compteur$6 = 0;
|
|
2894
2959
|
/**
|
|
2895
2960
|
* Groupe de boutons radio, integre a Signal Forms.
|
|
2896
2961
|
*
|
|
@@ -2930,7 +2995,7 @@ class StRadioGroup {
|
|
|
2930
2995
|
...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
2931
2996
|
touch = output();
|
|
2932
2997
|
/** Nom partage par les options : sans lui, chaque radio forme son propre groupe. */
|
|
2933
|
-
nomParDefaut = `st-radio-${(compteur$
|
|
2998
|
+
nomParDefaut = `st-radio-${(compteur$6 += 1).toString()}`;
|
|
2934
2999
|
nomDuGroupe() {
|
|
2935
3000
|
return this.name() === '' ? this.nomParDefaut : this.name();
|
|
2936
3001
|
}
|
|
@@ -3007,17 +3072,17 @@ class StSwitch {
|
|
|
3007
3072
|
this.checked.set(evenement.target.checked);
|
|
3008
3073
|
}
|
|
3009
3074
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSwitch, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3010
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.6", type: StSwitch, isStandalone: true, selector: "st-switch", inputs: { libelle: { classPropertyName: "libelle", publicName: "libelle", isSignal: true, isRequired: true, transformFunction: null }, aide: { classPropertyName: "aide", publicName: "aide", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", touch: "touch" }, host: { properties: { "attr.hidden": "hidden() ? \"\" : null" }, classAttribute: "st-switch" }, viewQueries: [{ propertyName: "champ", first: true, predicate: ["champ"], descendants: true, isSignal: true }], ngImport: i0, template: "<st-form-field disposition=\"case\" [libelle]=\"libelle()\" [aide]=\"aide()\">\n <input\n #champ\n class=\"st-switch__interrupteur\"\n type=\"checkbox\"\n role=\"switch\"\n stControleDeChamp\n [checked]=\"checked()\"\n [attr.aria-checked]=\"checked()\"\n [attr.name]=\"name() || null\"\n [disabled]=\"disabled()\"\n (change)=\"surChangement($event)\"\n (blur)=\"touch.emit()\"\n />\n</st-form-field>\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:block}.st-switch__interrupteur:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-switch__interrupteur{position:relative;inline-size:2.75rem;block-size:1.5rem;margin:0;cursor:pointer;background:var(--st-couleur-surface-enfoncee);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-pleine);appearance:none}.st-switch__interrupteur:after{position:absolute;inset-block-start:50%;inset-inline-start:.125rem;inline-size:1.125rem;block-size:1.125rem;content:\"\";background:var(--st-couleur-texte-discret);border-radius:var(--st-rayon-pleine);transition:inset-inline-start var(--st-duree-rapide) ease;transform:translateY(-50%)}.st-switch__interrupteur:checked{background:var(--st-couleur-primaire);border-color:var(--st-couleur-primaire)}.st-switch__interrupteur:checked:after{inset-inline-start:calc(100% - 1.25rem);background:var(--st-couleur-sur-primaire)}.st-switch__interrupteur:disabled{cursor:not-allowed;opacity:.6}@media(forced-colors:active){.st-switch__interrupteur{border-color:CanvasText}.st-switch__interrupteur:after{background:CanvasText}.st-switch__interrupteur:checked:after{background:Highlight}}\n"], dependencies: [{ kind: "component", type: StFormField, selector: "st-form-field", inputs: ["libelle", "aide", "complement", "erreurs", "afficherErreurs", "obligatoire", "disposition", "libelleMasque"] }, { kind: "directive", type: StControleDeChamp, selector: "[stControleDeChamp]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3075
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.6", type: StSwitch, isStandalone: true, selector: "st-switch", inputs: { libelle: { classPropertyName: "libelle", publicName: "libelle", isSignal: true, isRequired: true, transformFunction: null }, aide: { classPropertyName: "aide", publicName: "aide", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", touch: "touch" }, host: { properties: { "attr.hidden": "hidden() ? \"\" : null" }, classAttribute: "st-switch" }, viewQueries: [{ propertyName: "champ", first: true, predicate: ["champ"], descendants: true, isSignal: true }], ngImport: i0, template: "<st-form-field disposition=\"case\" [libelle]=\"libelle()\" [aide]=\"aide()\">\n <input\n #champ\n class=\"st-switch__interrupteur\"\n type=\"checkbox\"\n role=\"switch\"\n stControleDeChamp\n [checked]=\"checked()\"\n [attr.aria-checked]=\"checked()\"\n [attr.name]=\"name() || null\"\n [disabled]=\"disabled()\"\n (change)=\"surChangement($event)\"\n (blur)=\"touch.emit()\"\n />\n</st-form-field>\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:block}.st-switch__interrupteur:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-switch__interrupteur{position:relative;inline-size:2.75rem;block-size:1.5rem;margin:0;cursor:pointer;background:var(--st-couleur-surface-enfoncee);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-pleine);appearance:none}.st-switch__interrupteur:checked:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--st-couleur-surface)}.st-switch__interrupteur:after{position:absolute;inset-block-start:50%;inset-inline-start:.125rem;inline-size:1.125rem;block-size:1.125rem;content:\"\";background:var(--st-couleur-texte-discret);border-radius:var(--st-rayon-pleine);transition:inset-inline-start var(--st-duree-rapide) ease;transform:translateY(-50%)}.st-switch__interrupteur:checked{background:var(--st-couleur-primaire);border-color:var(--st-couleur-primaire)}.st-switch__interrupteur:checked:after{inset-inline-start:calc(100% - 1.25rem);background:var(--st-couleur-sur-primaire)}.st-switch__interrupteur:disabled{cursor:not-allowed;opacity:.6}@media(forced-colors:active){.st-switch__interrupteur{border-color:CanvasText}.st-switch__interrupteur:after{background:CanvasText}.st-switch__interrupteur:checked:after{background:Highlight}}@media(prefers-reduced-motion:reduce){.st-switch__interrupteur:after{transition:none}}\n"], dependencies: [{ kind: "component", type: StFormField, selector: "st-form-field", inputs: ["libelle", "aide", "complement", "erreurs", "afficherErreurs", "obligatoire", "disposition", "libelleMasque"] }, { kind: "directive", type: StControleDeChamp, selector: "[stControleDeChamp]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3011
3076
|
}
|
|
3012
3077
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSwitch, decorators: [{
|
|
3013
3078
|
type: Component,
|
|
3014
3079
|
args: [{ selector: 'st-switch', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StFormField, StControleDeChamp], host: {
|
|
3015
3080
|
class: 'st-switch',
|
|
3016
3081
|
'[attr.hidden]': 'hidden() ? "" : null',
|
|
3017
|
-
}, template: "<st-form-field disposition=\"case\" [libelle]=\"libelle()\" [aide]=\"aide()\">\n <input\n #champ\n class=\"st-switch__interrupteur\"\n type=\"checkbox\"\n role=\"switch\"\n stControleDeChamp\n [checked]=\"checked()\"\n [attr.aria-checked]=\"checked()\"\n [attr.name]=\"name() || null\"\n [disabled]=\"disabled()\"\n (change)=\"surChangement($event)\"\n (blur)=\"touch.emit()\"\n />\n</st-form-field>\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:block}.st-switch__interrupteur:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-switch__interrupteur{position:relative;inline-size:2.75rem;block-size:1.5rem;margin:0;cursor:pointer;background:var(--st-couleur-surface-enfoncee);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-pleine);appearance:none}.st-switch__interrupteur:after{position:absolute;inset-block-start:50%;inset-inline-start:.125rem;inline-size:1.125rem;block-size:1.125rem;content:\"\";background:var(--st-couleur-texte-discret);border-radius:var(--st-rayon-pleine);transition:inset-inline-start var(--st-duree-rapide) ease;transform:translateY(-50%)}.st-switch__interrupteur:checked{background:var(--st-couleur-primaire);border-color:var(--st-couleur-primaire)}.st-switch__interrupteur:checked:after{inset-inline-start:calc(100% - 1.25rem);background:var(--st-couleur-sur-primaire)}.st-switch__interrupteur:disabled{cursor:not-allowed;opacity:.6}@media(forced-colors:active){.st-switch__interrupteur{border-color:CanvasText}.st-switch__interrupteur:after{background:CanvasText}.st-switch__interrupteur:checked:after{background:Highlight}}\n"] }]
|
|
3082
|
+
}, template: "<st-form-field disposition=\"case\" [libelle]=\"libelle()\" [aide]=\"aide()\">\n <input\n #champ\n class=\"st-switch__interrupteur\"\n type=\"checkbox\"\n role=\"switch\"\n stControleDeChamp\n [checked]=\"checked()\"\n [attr.aria-checked]=\"checked()\"\n [attr.name]=\"name() || null\"\n [disabled]=\"disabled()\"\n (change)=\"surChangement($event)\"\n (blur)=\"touch.emit()\"\n />\n</st-form-field>\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:block}.st-switch__interrupteur:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-switch__interrupteur{position:relative;inline-size:2.75rem;block-size:1.5rem;margin:0;cursor:pointer;background:var(--st-couleur-surface-enfoncee);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-pleine);appearance:none}.st-switch__interrupteur:checked:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--st-couleur-surface)}.st-switch__interrupteur:after{position:absolute;inset-block-start:50%;inset-inline-start:.125rem;inline-size:1.125rem;block-size:1.125rem;content:\"\";background:var(--st-couleur-texte-discret);border-radius:var(--st-rayon-pleine);transition:inset-inline-start var(--st-duree-rapide) ease;transform:translateY(-50%)}.st-switch__interrupteur:checked{background:var(--st-couleur-primaire);border-color:var(--st-couleur-primaire)}.st-switch__interrupteur:checked:after{inset-inline-start:calc(100% - 1.25rem);background:var(--st-couleur-sur-primaire)}.st-switch__interrupteur:disabled{cursor:not-allowed;opacity:.6}@media(forced-colors:active){.st-switch__interrupteur{border-color:CanvasText}.st-switch__interrupteur:after{background:CanvasText}.st-switch__interrupteur:checked:after{background:Highlight}}@media(prefers-reduced-motion:reduce){.st-switch__interrupteur:after{transition:none}}\n"] }]
|
|
3018
3083
|
}], propDecorators: { libelle: [{ type: i0.Input, args: [{ isSignal: true, alias: "libelle", required: true }] }], aide: [{ type: i0.Input, args: [{ isSignal: true, alias: "aide", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], champ: [{ type: i0.ViewChild, args: ['champ', { isSignal: true }] }] } });
|
|
3019
3084
|
|
|
3020
|
-
let compteur$
|
|
3085
|
+
let compteur$5 = 0;
|
|
3021
3086
|
/**
|
|
3022
3087
|
* Recapitulatif des erreurs d'un formulaire, a l'envoi.
|
|
3023
3088
|
*
|
|
@@ -3057,7 +3122,7 @@ class StErrorSummary {
|
|
|
3057
3122
|
titre = input(null, /* @ts-ignore */
|
|
3058
3123
|
...(ngDevMode ? [{ debugName: "titre" }] : /* istanbul ignore next */ []));
|
|
3059
3124
|
/** Unique par instance : deux recapitulatifs sur une page partageraient leur titre. */
|
|
3060
|
-
identifiantDuTitre = `st-recapitulatif-${(compteur$
|
|
3125
|
+
identifiantDuTitre = `st-recapitulatif-${(compteur$5 += 1).toString()}`;
|
|
3061
3126
|
lignes = computed(() => {
|
|
3062
3127
|
const libelles = this.libelles();
|
|
3063
3128
|
const locale = this.locale();
|
|
@@ -3201,7 +3266,7 @@ class StPasswordField extends ControleDeSaisie {
|
|
|
3201
3266
|
this.revele.set(false);
|
|
3202
3267
|
}
|
|
3203
3268
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StPasswordField, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3204
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StPasswordField, isStandalone: true, selector: "st-password-field", inputs: { usage: { classPropertyName: "usage", publicName: "usage", isSignal: true, isRequired: false, transformFunction: null }, regles: { classPropertyName: "regles", publicName: "regles", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focusout": "aLaSortie($event)", "document:submit": "aLEnvoi($event)" }, classAttribute: "st-password-field" }, usesInheritance: true, ngImport: i0, template: "<st-form-field\n [libelle]=\"libelle()\"\n [aide]=\"aideLue()\"\n [erreurs]=\"errors()\"\n [afficherErreurs]=\"touched()\"\n [obligatoire]=\"required()\"\n>\n <div class=\"st-password-field__ligne\">\n <input\n #champ\n class=\"st-password-field__champ\"\n stControleDeChamp\n spellcheck=\"false\"\n autocapitalize=\"none\"\n autocorrect=\"off\"\n [type]=\"revele() ? 'text' : 'password'\"\n [value]=\"value()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.name]=\"name() || null\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n (input)=\"surSaisie($event)\"\n (blur)=\"touch.emit()\"\n />\n <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n Le contenu vient du gabarit de stIconButton. Le nom accessible est\n impose par le type (`etiquette` est requis) et verifie par axe.\n `mousedown` sans effet par defaut : le focus reste dans le champ. Safari\n ne donne pas le focus a un bouton clique, et la sortie du champ\n remasquerait juste avant que le clic ne revele a nouveau. -->\n <button\n stIconButton\n type=\"button\"\n [icone]=\"revele() ? 'oeil-barre' : 'oeil'\"\n [etiquette]=\"libelles().afficherLeMotDePasse\"\n [enfonce]=\"revele()\"\n [disabled]=\"disabled()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"basculer()\"\n ></button>\n </div>\n</st-form-field>\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:block}.st-password-field__ligne{display:flex;gap:var(--st-espacement-1);align-items:center}.st-password-field__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-password-field__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-
|
|
3269
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StPasswordField, isStandalone: true, selector: "st-password-field", inputs: { usage: { classPropertyName: "usage", publicName: "usage", isSignal: true, isRequired: false, transformFunction: null }, regles: { classPropertyName: "regles", publicName: "regles", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focusout": "aLaSortie($event)", "document:submit": "aLEnvoi($event)" }, classAttribute: "st-password-field" }, usesInheritance: true, ngImport: i0, template: "<st-form-field\n [libelle]=\"libelle()\"\n [aide]=\"aideLue()\"\n [erreurs]=\"errors()\"\n [afficherErreurs]=\"touched()\"\n [obligatoire]=\"required()\"\n>\n <div class=\"st-password-field__ligne\">\n <input\n #champ\n class=\"st-password-field__champ\"\n stControleDeChamp\n spellcheck=\"false\"\n autocapitalize=\"none\"\n autocorrect=\"off\"\n [type]=\"revele() ? 'text' : 'password'\"\n [value]=\"value()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.name]=\"name() || null\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n (input)=\"surSaisie($event)\"\n (blur)=\"touch.emit()\"\n />\n <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n Le contenu vient du gabarit de stIconButton. Le nom accessible est\n impose par le type (`etiquette` est requis) et verifie par axe.\n `mousedown` sans effet par defaut : le focus reste dans le champ. Safari\n ne donne pas le focus a un bouton clique, et la sortie du champ\n remasquerait juste avant que le clic ne revele a nouveau. -->\n <button\n stIconButton\n type=\"button\"\n [icone]=\"revele() ? 'oeil-barre' : 'oeil'\"\n [etiquette]=\"libelles().afficherLeMotDePasse\"\n [enfonce]=\"revele()\"\n [disabled]=\"disabled()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"basculer()\"\n ></button>\n </div>\n</st-form-field>\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:block}.st-password-field__ligne{display:flex;gap:var(--st-espacement-1);align-items:center}.st-password-field__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-password-field__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-commande-hauteur, var(--st-cible-tactile-min));padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}.st-password-field__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-password-field__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-password-field__champ:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-password-field__champ{flex:1 1 auto}\n"], dependencies: [{ kind: "component", type: StFormField, selector: "st-form-field", inputs: ["libelle", "aide", "complement", "erreurs", "afficherErreurs", "obligatoire", "disposition", "libelleMasque"] }, { kind: "directive", type: StControleDeChamp, selector: "[stControleDeChamp]" }, { kind: "component", type: StIconButton, selector: "button[stIconButton]", inputs: ["icone", "etiquette", "variante", "taille", "enfonce"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3205
3270
|
}
|
|
3206
3271
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StPasswordField, decorators: [{
|
|
3207
3272
|
type: Component,
|
|
@@ -3209,7 +3274,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
3209
3274
|
class: 'st-password-field',
|
|
3210
3275
|
'(focusout)': 'aLaSortie($event)',
|
|
3211
3276
|
'(document:submit)': 'aLEnvoi($event)',
|
|
3212
|
-
}, template: "<st-form-field\n [libelle]=\"libelle()\"\n [aide]=\"aideLue()\"\n [erreurs]=\"errors()\"\n [afficherErreurs]=\"touched()\"\n [obligatoire]=\"required()\"\n>\n <div class=\"st-password-field__ligne\">\n <input\n #champ\n class=\"st-password-field__champ\"\n stControleDeChamp\n spellcheck=\"false\"\n autocapitalize=\"none\"\n autocorrect=\"off\"\n [type]=\"revele() ? 'text' : 'password'\"\n [value]=\"value()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.name]=\"name() || null\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n (input)=\"surSaisie($event)\"\n (blur)=\"touch.emit()\"\n />\n <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n Le contenu vient du gabarit de stIconButton. Le nom accessible est\n impose par le type (`etiquette` est requis) et verifie par axe.\n `mousedown` sans effet par defaut : le focus reste dans le champ. Safari\n ne donne pas le focus a un bouton clique, et la sortie du champ\n remasquerait juste avant que le clic ne revele a nouveau. -->\n <button\n stIconButton\n type=\"button\"\n [icone]=\"revele() ? 'oeil-barre' : 'oeil'\"\n [etiquette]=\"libelles().afficherLeMotDePasse\"\n [enfonce]=\"revele()\"\n [disabled]=\"disabled()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"basculer()\"\n ></button>\n </div>\n</st-form-field>\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:block}.st-password-field__ligne{display:flex;gap:var(--st-espacement-1);align-items:center}.st-password-field__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-password-field__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-
|
|
3277
|
+
}, template: "<st-form-field\n [libelle]=\"libelle()\"\n [aide]=\"aideLue()\"\n [erreurs]=\"errors()\"\n [afficherErreurs]=\"touched()\"\n [obligatoire]=\"required()\"\n>\n <div class=\"st-password-field__ligne\">\n <input\n #champ\n class=\"st-password-field__champ\"\n stControleDeChamp\n spellcheck=\"false\"\n autocapitalize=\"none\"\n autocorrect=\"off\"\n [type]=\"revele() ? 'text' : 'password'\"\n [value]=\"value()\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.name]=\"name() || null\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n (input)=\"surSaisie($event)\"\n (blur)=\"touch.emit()\"\n />\n <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n Le contenu vient du gabarit de stIconButton. Le nom accessible est\n impose par le type (`etiquette` est requis) et verifie par axe.\n `mousedown` sans effet par defaut : le focus reste dans le champ. Safari\n ne donne pas le focus a un bouton clique, et la sortie du champ\n remasquerait juste avant que le clic ne revele a nouveau. -->\n <button\n stIconButton\n type=\"button\"\n [icone]=\"revele() ? 'oeil-barre' : 'oeil'\"\n [etiquette]=\"libelles().afficherLeMotDePasse\"\n [enfonce]=\"revele()\"\n [disabled]=\"disabled()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"basculer()\"\n ></button>\n </div>\n</st-form-field>\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:block}.st-password-field__ligne{display:flex;gap:var(--st-espacement-1);align-items:center}.st-password-field__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-password-field__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-commande-hauteur, var(--st-cible-tactile-min));padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}.st-password-field__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-password-field__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-password-field__champ:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-password-field__champ{flex:1 1 auto}\n"] }]
|
|
3213
3278
|
}], propDecorators: { usage: [{ type: i0.Input, args: [{ isSignal: true, alias: "usage", required: false }] }], regles: [{ type: i0.Input, args: [{ isSignal: true, alias: "regles", required: false }] }] } });
|
|
3214
3279
|
|
|
3215
3280
|
/**
|
|
@@ -3237,11 +3302,11 @@ class StOtpField extends ControleDeSaisie {
|
|
|
3237
3302
|
this.value.set(this.texteSaisi(evenement).replace(/[\s-]/g, ''));
|
|
3238
3303
|
}
|
|
3239
3304
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StOtpField, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3240
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StOtpField, isStandalone: true, selector: "st-otp-field", inputs: { longueur: { classPropertyName: "longueur", publicName: "longueur", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "st-otp-field" }, usesInheritance: true, ngImport: i0, template: "<st-form-field\n [libelle]=\"libelle()\"\n [aide]=\"aideLue()\"\n [erreurs]=\"errors()\"\n [afficherErreurs]=\"touched()\"\n [obligatoire]=\"required()\"\n>\n <input\n #champ\n class=\"st-otp-field__champ\"\n stControleDeChamp\n type=\"text\"\n inputmode=\"numeric\"\n autocomplete=\"one-time-code\"\n spellcheck=\"false\"\n autocapitalize=\"none\"\n [value]=\"value()\"\n [attr.name]=\"name() || null\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n (input)=\"surSaisie($event)\"\n (blur)=\"touch.emit()\"\n />\n</st-form-field>\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:block}.st-otp-field__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-otp-field__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-
|
|
3305
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StOtpField, isStandalone: true, selector: "st-otp-field", inputs: { longueur: { classPropertyName: "longueur", publicName: "longueur", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "st-otp-field" }, usesInheritance: true, ngImport: i0, template: "<st-form-field\n [libelle]=\"libelle()\"\n [aide]=\"aideLue()\"\n [erreurs]=\"errors()\"\n [afficherErreurs]=\"touched()\"\n [obligatoire]=\"required()\"\n>\n <input\n #champ\n class=\"st-otp-field__champ\"\n stControleDeChamp\n type=\"text\"\n inputmode=\"numeric\"\n autocomplete=\"one-time-code\"\n spellcheck=\"false\"\n autocapitalize=\"none\"\n [value]=\"value()\"\n [attr.name]=\"name() || null\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n (input)=\"surSaisie($event)\"\n (blur)=\"touch.emit()\"\n />\n</st-form-field>\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:block}.st-otp-field__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-otp-field__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-commande-hauteur, var(--st-cible-tactile-min));padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}.st-otp-field__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-otp-field__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-otp-field__champ:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-otp-field__champ{max-inline-size:12rem;font-family:var(--st-police-mono);font-variant-numeric:tabular-nums;letter-spacing:.3em}\n"], dependencies: [{ kind: "component", type: StFormField, selector: "st-form-field", inputs: ["libelle", "aide", "complement", "erreurs", "afficherErreurs", "obligatoire", "disposition", "libelleMasque"] }, { kind: "directive", type: StControleDeChamp, selector: "[stControleDeChamp]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3241
3306
|
}
|
|
3242
3307
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StOtpField, decorators: [{
|
|
3243
3308
|
type: Component,
|
|
3244
|
-
args: [{ selector: 'st-otp-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StFormField, StControleDeChamp], host: { class: 'st-otp-field' }, template: "<st-form-field\n [libelle]=\"libelle()\"\n [aide]=\"aideLue()\"\n [erreurs]=\"errors()\"\n [afficherErreurs]=\"touched()\"\n [obligatoire]=\"required()\"\n>\n <input\n #champ\n class=\"st-otp-field__champ\"\n stControleDeChamp\n type=\"text\"\n inputmode=\"numeric\"\n autocomplete=\"one-time-code\"\n spellcheck=\"false\"\n autocapitalize=\"none\"\n [value]=\"value()\"\n [attr.name]=\"name() || null\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n (input)=\"surSaisie($event)\"\n (blur)=\"touch.emit()\"\n />\n</st-form-field>\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:block}.st-otp-field__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-otp-field__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-
|
|
3309
|
+
args: [{ selector: 'st-otp-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StFormField, StControleDeChamp], host: { class: 'st-otp-field' }, template: "<st-form-field\n [libelle]=\"libelle()\"\n [aide]=\"aideLue()\"\n [erreurs]=\"errors()\"\n [afficherErreurs]=\"touched()\"\n [obligatoire]=\"required()\"\n>\n <input\n #champ\n class=\"st-otp-field__champ\"\n stControleDeChamp\n type=\"text\"\n inputmode=\"numeric\"\n autocomplete=\"one-time-code\"\n spellcheck=\"false\"\n autocapitalize=\"none\"\n [value]=\"value()\"\n [attr.name]=\"name() || null\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n (input)=\"surSaisie($event)\"\n (blur)=\"touch.emit()\"\n />\n</st-form-field>\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:block}.st-otp-field__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-otp-field__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-commande-hauteur, var(--st-cible-tactile-min));padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}.st-otp-field__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-otp-field__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-otp-field__champ:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-otp-field__champ{max-inline-size:12rem;font-family:var(--st-police-mono);font-variant-numeric:tabular-nums;letter-spacing:.3em}\n"] }]
|
|
3245
3310
|
}], propDecorators: { longueur: [{ type: i0.Input, args: [{ isSignal: true, alias: "longueur", required: false }] }] } });
|
|
3246
3311
|
|
|
3247
3312
|
/**
|
|
@@ -3274,11 +3339,11 @@ class StSearchField extends ControleDeSaisie {
|
|
|
3274
3339
|
this.recherche.emit(this.value().trim());
|
|
3275
3340
|
}
|
|
3276
3341
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSearchField, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3277
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: StSearchField, isStandalone: true, selector: "st-search-field", outputs: { recherche: "recherche" }, host: { attributes: { "role": "search" }, classAttribute: "st-search-field" }, usesInheritance: true, ngImport: i0, template: "<st-form-field\n libelleMasque\n [libelle]=\"libelle()\"\n [aide]=\"aide()\"\n [erreurs]=\"errors()\"\n [afficherErreurs]=\"touched()\"\n>\n <div class=\"st-search-field__ligne\">\n <st-icon class=\"st-search-field__loupe\" nom=\"recherche\" taille=\"sm\" />\n <input\n #champ\n class=\"st-search-field__champ\"\n stControleDeChamp\n type=\"search\"\n enterkeyhint=\"search\"\n [value]=\"value()\"\n [attr.name]=\"name() || null\"\n [disabled]=\"disabled()\"\n (input)=\"surSaisie($event)\"\n (keydown.enter)=\"lancer($event)\"\n (blur)=\"touch.emit()\"\n />\n <button stButton type=\"button\" [disabled]=\"disabled()\" (click)=\"lancer()\">\n {{ libelles().rechercher }}\n </button>\n </div>\n</st-form-field>\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:block}.st-search-field__ligne{position:relative;display:flex;gap:var(--st-espacement-2);align-items:center}.st-search-field__loupe{position:absolute;inset-inline-start:var(--st-espacement-3);color:var(--st-couleur-texte-discret);pointer-events:none}.st-search-field__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-search-field__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-
|
|
3342
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: StSearchField, isStandalone: true, selector: "st-search-field", outputs: { recherche: "recherche" }, host: { attributes: { "role": "search" }, classAttribute: "st-search-field" }, usesInheritance: true, ngImport: i0, template: "<st-form-field\n libelleMasque\n [libelle]=\"libelle()\"\n [aide]=\"aide()\"\n [erreurs]=\"errors()\"\n [afficherErreurs]=\"touched()\"\n>\n <div class=\"st-search-field__ligne\">\n <st-icon class=\"st-search-field__loupe\" nom=\"recherche\" taille=\"sm\" />\n <input\n #champ\n class=\"st-search-field__champ\"\n stControleDeChamp\n type=\"search\"\n enterkeyhint=\"search\"\n [value]=\"value()\"\n [attr.name]=\"name() || null\"\n [disabled]=\"disabled()\"\n (input)=\"surSaisie($event)\"\n (keydown.enter)=\"lancer($event)\"\n (blur)=\"touch.emit()\"\n />\n <button stButton type=\"button\" [disabled]=\"disabled()\" (click)=\"lancer()\">\n {{ libelles().rechercher }}\n </button>\n </div>\n</st-form-field>\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:block}.st-search-field__ligne{position:relative;display:flex;gap:var(--st-espacement-2);align-items:center}.st-search-field__loupe{position:absolute;inset-inline-start:var(--st-espacement-3);color:var(--st-couleur-texte-discret);pointer-events:none}.st-search-field__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-search-field__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-commande-hauteur, var(--st-cible-tactile-min));padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}.st-search-field__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-search-field__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-search-field__champ:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-search-field__champ{flex:1 1 auto;padding-inline-start:calc(var(--st-espacement-3) * 2 + 1rem)}\n"], dependencies: [{ kind: "component", type: StFormField, selector: "st-form-field", inputs: ["libelle", "aide", "complement", "erreurs", "afficherErreurs", "obligatoire", "disposition", "libelleMasque"] }, { kind: "directive", type: StControleDeChamp, selector: "[stControleDeChamp]" }, { kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "taille", "ton", "etiquette"] }, { kind: "component", type: StButton, selector: "button[stButton]", inputs: ["variante", "taille", "pleineLargeur", "iconeAvant", "iconeApres", "chargement", "indisponible"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3278
3343
|
}
|
|
3279
3344
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSearchField, decorators: [{
|
|
3280
3345
|
type: Component,
|
|
3281
|
-
args: [{ selector: 'st-search-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StFormField, StControleDeChamp, StIcon, StButton], host: { class: 'st-search-field', role: 'search' }, template: "<st-form-field\n libelleMasque\n [libelle]=\"libelle()\"\n [aide]=\"aide()\"\n [erreurs]=\"errors()\"\n [afficherErreurs]=\"touched()\"\n>\n <div class=\"st-search-field__ligne\">\n <st-icon class=\"st-search-field__loupe\" nom=\"recherche\" taille=\"sm\" />\n <input\n #champ\n class=\"st-search-field__champ\"\n stControleDeChamp\n type=\"search\"\n enterkeyhint=\"search\"\n [value]=\"value()\"\n [attr.name]=\"name() || null\"\n [disabled]=\"disabled()\"\n (input)=\"surSaisie($event)\"\n (keydown.enter)=\"lancer($event)\"\n (blur)=\"touch.emit()\"\n />\n <button stButton type=\"button\" [disabled]=\"disabled()\" (click)=\"lancer()\">\n {{ libelles().rechercher }}\n </button>\n </div>\n</st-form-field>\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:block}.st-search-field__ligne{position:relative;display:flex;gap:var(--st-espacement-2);align-items:center}.st-search-field__loupe{position:absolute;inset-inline-start:var(--st-espacement-3);color:var(--st-couleur-texte-discret);pointer-events:none}.st-search-field__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-search-field__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-
|
|
3346
|
+
args: [{ selector: 'st-search-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StFormField, StControleDeChamp, StIcon, StButton], host: { class: 'st-search-field', role: 'search' }, template: "<st-form-field\n libelleMasque\n [libelle]=\"libelle()\"\n [aide]=\"aide()\"\n [erreurs]=\"errors()\"\n [afficherErreurs]=\"touched()\"\n>\n <div class=\"st-search-field__ligne\">\n <st-icon class=\"st-search-field__loupe\" nom=\"recherche\" taille=\"sm\" />\n <input\n #champ\n class=\"st-search-field__champ\"\n stControleDeChamp\n type=\"search\"\n enterkeyhint=\"search\"\n [value]=\"value()\"\n [attr.name]=\"name() || null\"\n [disabled]=\"disabled()\"\n (input)=\"surSaisie($event)\"\n (keydown.enter)=\"lancer($event)\"\n (blur)=\"touch.emit()\"\n />\n <button stButton type=\"button\" [disabled]=\"disabled()\" (click)=\"lancer()\">\n {{ libelles().rechercher }}\n </button>\n </div>\n</st-form-field>\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:block}.st-search-field__ligne{position:relative;display:flex;gap:var(--st-espacement-2);align-items:center}.st-search-field__loupe{position:absolute;inset-inline-start:var(--st-espacement-3);color:var(--st-couleur-texte-discret);pointer-events:none}.st-search-field__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-search-field__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-commande-hauteur, var(--st-cible-tactile-min));padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}.st-search-field__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-search-field__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-search-field__champ:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-search-field__champ{flex:1 1 auto;padding-inline-start:calc(var(--st-espacement-3) * 2 + 1rem)}\n"] }]
|
|
3282
3347
|
}], propDecorators: { recherche: [{ type: i0.Output, args: ["recherche"] }] } });
|
|
3283
3348
|
|
|
3284
3349
|
/**
|
|
@@ -3335,11 +3400,11 @@ class StIbanField extends ControleDeSaisie {
|
|
|
3335
3400
|
this.touch.emit();
|
|
3336
3401
|
}
|
|
3337
3402
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StIbanField, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3338
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: StIbanField, isStandalone: true, selector: "st-iban-field", host: { classAttribute: "st-iban-field" }, usesInheritance: true, ngImport: i0, template: "<st-form-field\n [libelle]=\"libelle()\"\n [aide]=\"aideLue()\"\n [erreurs]=\"errors()\"\n [afficherErreurs]=\"touched()\"\n [obligatoire]=\"required()\"\n>\n <input\n #champ\n class=\"st-iban-field__champ\"\n stControleDeChamp\n type=\"text\"\n autocomplete=\"off\"\n autocapitalize=\"characters\"\n autocorrect=\"off\"\n spellcheck=\"false\"\n [value]=\"affichage()\"\n [attr.name]=\"name() || null\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n (focus)=\"auFocus()\"\n (input)=\"surSaisie($event)\"\n (blur)=\"aLaSortie()\"\n />\n</st-form-field>\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:block}.st-iban-field__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-iban-field__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-
|
|
3403
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: StIbanField, isStandalone: true, selector: "st-iban-field", host: { classAttribute: "st-iban-field" }, usesInheritance: true, ngImport: i0, template: "<st-form-field\n [libelle]=\"libelle()\"\n [aide]=\"aideLue()\"\n [erreurs]=\"errors()\"\n [afficherErreurs]=\"touched()\"\n [obligatoire]=\"required()\"\n>\n <input\n #champ\n class=\"st-iban-field__champ\"\n stControleDeChamp\n type=\"text\"\n autocomplete=\"off\"\n autocapitalize=\"characters\"\n autocorrect=\"off\"\n spellcheck=\"false\"\n [value]=\"affichage()\"\n [attr.name]=\"name() || null\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n (focus)=\"auFocus()\"\n (input)=\"surSaisie($event)\"\n (blur)=\"aLaSortie()\"\n />\n</st-form-field>\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:block}.st-iban-field__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-iban-field__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-commande-hauteur, var(--st-cible-tactile-min));padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}.st-iban-field__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-iban-field__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-iban-field__champ:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-iban-field__champ{font-family:var(--st-police-mono);font-variant-numeric:tabular-nums}\n"], dependencies: [{ kind: "component", type: StFormField, selector: "st-form-field", inputs: ["libelle", "aide", "complement", "erreurs", "afficherErreurs", "obligatoire", "disposition", "libelleMasque"] }, { kind: "directive", type: StControleDeChamp, selector: "[stControleDeChamp]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3339
3404
|
}
|
|
3340
3405
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StIbanField, decorators: [{
|
|
3341
3406
|
type: Component,
|
|
3342
|
-
args: [{ selector: 'st-iban-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StFormField, StControleDeChamp], host: { class: 'st-iban-field' }, template: "<st-form-field\n [libelle]=\"libelle()\"\n [aide]=\"aideLue()\"\n [erreurs]=\"errors()\"\n [afficherErreurs]=\"touched()\"\n [obligatoire]=\"required()\"\n>\n <input\n #champ\n class=\"st-iban-field__champ\"\n stControleDeChamp\n type=\"text\"\n autocomplete=\"off\"\n autocapitalize=\"characters\"\n autocorrect=\"off\"\n spellcheck=\"false\"\n [value]=\"affichage()\"\n [attr.name]=\"name() || null\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n (focus)=\"auFocus()\"\n (input)=\"surSaisie($event)\"\n (blur)=\"aLaSortie()\"\n />\n</st-form-field>\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:block}.st-iban-field__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-iban-field__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-
|
|
3407
|
+
args: [{ selector: 'st-iban-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StFormField, StControleDeChamp], host: { class: 'st-iban-field' }, template: "<st-form-field\n [libelle]=\"libelle()\"\n [aide]=\"aideLue()\"\n [erreurs]=\"errors()\"\n [afficherErreurs]=\"touched()\"\n [obligatoire]=\"required()\"\n>\n <input\n #champ\n class=\"st-iban-field__champ\"\n stControleDeChamp\n type=\"text\"\n autocomplete=\"off\"\n autocapitalize=\"characters\"\n autocorrect=\"off\"\n spellcheck=\"false\"\n [value]=\"affichage()\"\n [attr.name]=\"name() || null\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n (focus)=\"auFocus()\"\n (input)=\"surSaisie($event)\"\n (blur)=\"aLaSortie()\"\n />\n</st-form-field>\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:block}.st-iban-field__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-iban-field__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-commande-hauteur, var(--st-cible-tactile-min));padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}.st-iban-field__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-iban-field__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-iban-field__champ:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-iban-field__champ{font-family:var(--st-police-mono);font-variant-numeric:tabular-nums}\n"] }]
|
|
3343
3408
|
}] });
|
|
3344
3409
|
|
|
3345
3410
|
/**
|
|
@@ -3383,11 +3448,11 @@ class StPhoneField extends ControleDeSaisie {
|
|
|
3383
3448
|
this.value.set(normaliserTelephone(saisie));
|
|
3384
3449
|
}
|
|
3385
3450
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StPhoneField, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3386
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StPhoneField, isStandalone: true, selector: "st-phone-field", inputs: { autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "st-phone-field" }, usesInheritance: true, ngImport: i0, template: "<st-form-field\n [libelle]=\"libelle()\"\n [aide]=\"aide()\"\n [erreurs]=\"errors()\"\n [afficherErreurs]=\"touched()\"\n [obligatoire]=\"required()\"\n>\n <input\n #champ\n class=\"st-phone-field__champ\"\n stControleDeChamp\n type=\"tel\"\n [attr.autocomplete]=\"autocomplete()\"\n [value]=\"affichage()\"\n [attr.name]=\"name() || null\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n (input)=\"surSaisie($event)\"\n (blur)=\"touch.emit()\"\n />\n</st-form-field>\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:block}.st-phone-field__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-phone-field__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-
|
|
3451
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StPhoneField, isStandalone: true, selector: "st-phone-field", inputs: { autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "st-phone-field" }, usesInheritance: true, ngImport: i0, template: "<st-form-field\n [libelle]=\"libelle()\"\n [aide]=\"aide()\"\n [erreurs]=\"errors()\"\n [afficherErreurs]=\"touched()\"\n [obligatoire]=\"required()\"\n>\n <input\n #champ\n class=\"st-phone-field__champ\"\n stControleDeChamp\n type=\"tel\"\n [attr.autocomplete]=\"autocomplete()\"\n [value]=\"affichage()\"\n [attr.name]=\"name() || null\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n (input)=\"surSaisie($event)\"\n (blur)=\"touch.emit()\"\n />\n</st-form-field>\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:block}.st-phone-field__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-phone-field__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-commande-hauteur, var(--st-cible-tactile-min));padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}.st-phone-field__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-phone-field__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-phone-field__champ:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-phone-field__champ{font-variant-numeric:tabular-nums}\n"], dependencies: [{ kind: "component", type: StFormField, selector: "st-form-field", inputs: ["libelle", "aide", "complement", "erreurs", "afficherErreurs", "obligatoire", "disposition", "libelleMasque"] }, { kind: "directive", type: StControleDeChamp, selector: "[stControleDeChamp]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3387
3452
|
}
|
|
3388
3453
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StPhoneField, decorators: [{
|
|
3389
3454
|
type: Component,
|
|
3390
|
-
args: [{ selector: 'st-phone-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StFormField, StControleDeChamp], host: { class: 'st-phone-field' }, template: "<st-form-field\n [libelle]=\"libelle()\"\n [aide]=\"aide()\"\n [erreurs]=\"errors()\"\n [afficherErreurs]=\"touched()\"\n [obligatoire]=\"required()\"\n>\n <input\n #champ\n class=\"st-phone-field__champ\"\n stControleDeChamp\n type=\"tel\"\n [attr.autocomplete]=\"autocomplete()\"\n [value]=\"affichage()\"\n [attr.name]=\"name() || null\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n (input)=\"surSaisie($event)\"\n (blur)=\"touch.emit()\"\n />\n</st-form-field>\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:block}.st-phone-field__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-phone-field__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-
|
|
3455
|
+
args: [{ selector: 'st-phone-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StFormField, StControleDeChamp], host: { class: 'st-phone-field' }, template: "<st-form-field\n [libelle]=\"libelle()\"\n [aide]=\"aide()\"\n [erreurs]=\"errors()\"\n [afficherErreurs]=\"touched()\"\n [obligatoire]=\"required()\"\n>\n <input\n #champ\n class=\"st-phone-field__champ\"\n stControleDeChamp\n type=\"tel\"\n [attr.autocomplete]=\"autocomplete()\"\n [value]=\"affichage()\"\n [attr.name]=\"name() || null\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n (input)=\"surSaisie($event)\"\n (blur)=\"touch.emit()\"\n />\n</st-form-field>\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:block}.st-phone-field__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-phone-field__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-commande-hauteur, var(--st-cible-tactile-min));padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}.st-phone-field__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-phone-field__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-phone-field__champ:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-phone-field__champ{font-variant-numeric:tabular-nums}\n"] }]
|
|
3391
3456
|
}], propDecorators: { autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }] } });
|
|
3392
3457
|
|
|
3393
3458
|
/** Sans accents ni casse : « eleve » trouve « Élève ». */
|
|
@@ -3460,14 +3525,14 @@ class StSelect extends ControleDeSaisie {
|
|
|
3460
3525
|
this.value.set(element.value);
|
|
3461
3526
|
}
|
|
3462
3527
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSelect, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3463
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StSelect, isStandalone: true, selector: "st-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, texteVide: { classPropertyName: "texteVide", publicName: "texteVide", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "st-select" }, usesInheritance: true, ngImport: i0, template: "<st-form-field\n [libelle]=\"libelle()\"\n [aide]=\"aide()\"\n [erreurs]=\"errors()\"\n [afficherErreurs]=\"touched()\"\n [obligatoire]=\"required()\"\n>\n <div class=\"st-select__cadre\">\n <select\n #champ\n class=\"st-select__champ\"\n stControleDeChamp\n [attr.name]=\"name() || null\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.aria-readonly]=\"readonly() ? 'true' : null\"\n [disabled]=\"disabled()\"\n (change)=\"surChoix($event)\"\n (blur)=\"touch.emit()\"\n >\n <option value=\"\" [selected]=\"value() === ''\">{{ texteVide() ?? libelles().choisir }}</option>\n @for (bloc of blocs(); track $index) {\n @if (bloc.groupe === null) {\n @for (option of bloc.options; track option.valeur) {\n <option\n [value]=\"option.valeur\"\n [selected]=\"option.valeur === value()\"\n [disabled]=\"option.desactivee === true\"\n >\n {{ option.libelle }}\n </option>\n }\n } @else {\n <optgroup [label]=\"bloc.groupe\">\n @for (option of bloc.options; track option.valeur) {\n <option\n [value]=\"option.valeur\"\n [selected]=\"option.valeur === value()\"\n [disabled]=\"option.desactivee === true\"\n >\n {{ option.libelle }}\n </option>\n }\n </optgroup>\n }\n }\n </select>\n <st-icon class=\"st-select__chevron\" nom=\"chevron-bas\" taille=\"sm\" />\n </div>\n</st-form-field>\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:block}.st-select__cadre{position:relative}.st-select__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-select__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-
|
|
3528
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StSelect, isStandalone: true, selector: "st-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, texteVide: { classPropertyName: "texteVide", publicName: "texteVide", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "st-select" }, usesInheritance: true, ngImport: i0, template: "<st-form-field\n [libelle]=\"libelle()\"\n [aide]=\"aide()\"\n [erreurs]=\"errors()\"\n [afficherErreurs]=\"touched()\"\n [obligatoire]=\"required()\"\n>\n <div class=\"st-select__cadre\">\n <select\n #champ\n class=\"st-select__champ\"\n stControleDeChamp\n [attr.name]=\"name() || null\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.aria-readonly]=\"readonly() ? 'true' : null\"\n [disabled]=\"disabled()\"\n (change)=\"surChoix($event)\"\n (blur)=\"touch.emit()\"\n >\n <option value=\"\" [selected]=\"value() === ''\">{{ texteVide() ?? libelles().choisir }}</option>\n @for (bloc of blocs(); track $index) {\n @if (bloc.groupe === null) {\n @for (option of bloc.options; track option.valeur) {\n <option\n [value]=\"option.valeur\"\n [selected]=\"option.valeur === value()\"\n [disabled]=\"option.desactivee === true\"\n >\n {{ option.libelle }}\n </option>\n }\n } @else {\n <optgroup [label]=\"bloc.groupe\">\n @for (option of bloc.options; track option.valeur) {\n <option\n [value]=\"option.valeur\"\n [selected]=\"option.valeur === value()\"\n [disabled]=\"option.desactivee === true\"\n >\n {{ option.libelle }}\n </option>\n }\n </optgroup>\n }\n }\n </select>\n <st-icon class=\"st-select__chevron\" nom=\"chevron-bas\" taille=\"sm\" />\n </div>\n</st-form-field>\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:block}.st-select__cadre{position:relative}.st-select__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-select__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-commande-hauteur, var(--st-cible-tactile-min));padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}.st-select__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-select__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-select__champ:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-select__champ{padding-inline-end:calc(var(--st-espacement-3) * 2 + 1rem);cursor:pointer;appearance:none}.st-select__chevron{position:absolute;inset-block-start:50%;inset-inline-end:var(--st-espacement-3);color:var(--st-couleur-texte-discret);pointer-events:none;transform:translateY(-50%)}@media(forced-colors:active){.st-select__chevron{color:CanvasText}}\n"], dependencies: [{ kind: "component", type: StFormField, selector: "st-form-field", inputs: ["libelle", "aide", "complement", "erreurs", "afficherErreurs", "obligatoire", "disposition", "libelleMasque"] }, { kind: "directive", type: StControleDeChamp, selector: "[stControleDeChamp]" }, { kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "taille", "ton", "etiquette"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3464
3529
|
}
|
|
3465
3530
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSelect, decorators: [{
|
|
3466
3531
|
type: Component,
|
|
3467
|
-
args: [{ selector: 'st-select', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StFormField, StControleDeChamp, StIcon], host: { class: 'st-select' }, template: "<st-form-field\n [libelle]=\"libelle()\"\n [aide]=\"aide()\"\n [erreurs]=\"errors()\"\n [afficherErreurs]=\"touched()\"\n [obligatoire]=\"required()\"\n>\n <div class=\"st-select__cadre\">\n <select\n #champ\n class=\"st-select__champ\"\n stControleDeChamp\n [attr.name]=\"name() || null\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.aria-readonly]=\"readonly() ? 'true' : null\"\n [disabled]=\"disabled()\"\n (change)=\"surChoix($event)\"\n (blur)=\"touch.emit()\"\n >\n <option value=\"\" [selected]=\"value() === ''\">{{ texteVide() ?? libelles().choisir }}</option>\n @for (bloc of blocs(); track $index) {\n @if (bloc.groupe === null) {\n @for (option of bloc.options; track option.valeur) {\n <option\n [value]=\"option.valeur\"\n [selected]=\"option.valeur === value()\"\n [disabled]=\"option.desactivee === true\"\n >\n {{ option.libelle }}\n </option>\n }\n } @else {\n <optgroup [label]=\"bloc.groupe\">\n @for (option of bloc.options; track option.valeur) {\n <option\n [value]=\"option.valeur\"\n [selected]=\"option.valeur === value()\"\n [disabled]=\"option.desactivee === true\"\n >\n {{ option.libelle }}\n </option>\n }\n </optgroup>\n }\n }\n </select>\n <st-icon class=\"st-select__chevron\" nom=\"chevron-bas\" taille=\"sm\" />\n </div>\n</st-form-field>\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:block}.st-select__cadre{position:relative}.st-select__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-select__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-
|
|
3532
|
+
args: [{ selector: 'st-select', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StFormField, StControleDeChamp, StIcon], host: { class: 'st-select' }, template: "<st-form-field\n [libelle]=\"libelle()\"\n [aide]=\"aide()\"\n [erreurs]=\"errors()\"\n [afficherErreurs]=\"touched()\"\n [obligatoire]=\"required()\"\n>\n <div class=\"st-select__cadre\">\n <select\n #champ\n class=\"st-select__champ\"\n stControleDeChamp\n [attr.name]=\"name() || null\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.aria-readonly]=\"readonly() ? 'true' : null\"\n [disabled]=\"disabled()\"\n (change)=\"surChoix($event)\"\n (blur)=\"touch.emit()\"\n >\n <option value=\"\" [selected]=\"value() === ''\">{{ texteVide() ?? libelles().choisir }}</option>\n @for (bloc of blocs(); track $index) {\n @if (bloc.groupe === null) {\n @for (option of bloc.options; track option.valeur) {\n <option\n [value]=\"option.valeur\"\n [selected]=\"option.valeur === value()\"\n [disabled]=\"option.desactivee === true\"\n >\n {{ option.libelle }}\n </option>\n }\n } @else {\n <optgroup [label]=\"bloc.groupe\">\n @for (option of bloc.options; track option.valeur) {\n <option\n [value]=\"option.valeur\"\n [selected]=\"option.valeur === value()\"\n [disabled]=\"option.desactivee === true\"\n >\n {{ option.libelle }}\n </option>\n }\n </optgroup>\n }\n }\n </select>\n <st-icon class=\"st-select__chevron\" nom=\"chevron-bas\" taille=\"sm\" />\n </div>\n</st-form-field>\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:block}.st-select__cadre{position:relative}.st-select__champ:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-select__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-commande-hauteur, var(--st-cible-tactile-min));padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}.st-select__champ[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-select__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-select__champ:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-select__champ{padding-inline-end:calc(var(--st-espacement-3) * 2 + 1rem);cursor:pointer;appearance:none}.st-select__chevron{position:absolute;inset-block-start:50%;inset-inline-end:var(--st-espacement-3);color:var(--st-couleur-texte-discret);pointer-events:none;transform:translateY(-50%)}@media(forced-colors:active){.st-select__chevron{color:CanvasText}}\n"] }]
|
|
3468
3533
|
}], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], texteVide: [{ type: i0.Input, args: [{ isSignal: true, alias: "texteVide", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }] } });
|
|
3469
3534
|
|
|
3470
|
-
let compteur$
|
|
3535
|
+
let compteur$4 = 0;
|
|
3471
3536
|
/** Un lundi connu, pour nommer les jours de la semaine sans horloge. */
|
|
3472
3537
|
const LUNDI_DE_REFERENCE = '2006-01-02';
|
|
3473
3538
|
/** « Aujourd'hui » dans un fuseau : la date du poste n'est pas celle de la personne. */
|
|
@@ -3522,7 +3587,7 @@ class StCalendar {
|
|
|
3522
3587
|
/** Echap : le conteneur decide de fermer, et ou rendre le focus. */
|
|
3523
3588
|
fermeture = output();
|
|
3524
3589
|
identifiants = (() => {
|
|
3525
|
-
const base = `st-calendrier-${(compteur$
|
|
3590
|
+
const base = `st-calendrier-${(compteur$4 += 1).toString()}`;
|
|
3526
3591
|
return { titre: `${base}-titre`, aide: `${base}-aide` };
|
|
3527
3592
|
})();
|
|
3528
3593
|
/** La date qui porte le focus. Suit la selection, bornee. */
|
|
@@ -3635,18 +3700,21 @@ class StCalendar {
|
|
|
3635
3700
|
}, { injector: this.injecteur });
|
|
3636
3701
|
}
|
|
3637
3702
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3638
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StCalendar, isStandalone: true, selector: "st-calendar", inputs: { selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, dateMin: { classPropertyName: "dateMin", publicName: "dateMin", isSignal: true, isRequired: false, transformFunction: null }, dateMax: { classPropertyName: "dateMax", publicName: "dateMax", isSignal: true, isRequired: false, transformFunction: null }, plage: { classPropertyName: "plage", publicName: "plage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { choix: "choix", fermeture: "fermeture" }, host: { listeners: { "keydown": "surTouche($event)" }, classAttribute: "st-calendar" }, ngImport: i0, template: "<div class=\"st-calendar__entete\">\n <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n Le contenu vient du gabarit de stIconButton, et l'etiquette est requise. -->\n <button\n stIconButton\n type=\"button\"\n icone=\"chevron-gauche\"\n [etiquette]=\"libelles().moisPrecedent\"\n [disabled]=\"!moisPrecedentPossible()\"\n (click)=\"changerDeMois(-1)\"\n ></button>\n <!-- Region vivante : changer de mois a la souris ne deplace pas le focus, et le\n nouveau mois doit se dire. -->\n <p class=\"st-calendar__titre\" aria-live=\"polite\" [id]=\"identifiants.titre\">{{ titre() }}</p>\n <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n Le contenu vient du gabarit de stIconButton, et l'etiquette est requise. -->\n <button\n stIconButton\n type=\"button\"\n icone=\"chevron-droite\"\n [etiquette]=\"libelles().moisSuivant\"\n [disabled]=\"!moisSuivantPossible()\"\n (click)=\"changerDeMois(1)\"\n ></button>\n</div>\n\n<table\n class=\"st-calendar__grille\"\n role=\"grid\"\n [attr.aria-labelledby]=\"identifiants.titre\"\n [attr.aria-describedby]=\"identifiants.aide\"\n>\n <thead>\n <tr>\n @for (jour of joursDeLaSemaine(); track $index) {\n <th class=\"st-calendar__jour-de-semaine\" scope=\"col\" [attr.abbr]=\"jour.long\">\n {{ jour.court }}\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (semaine of semaines(); track semaine[0]?.date) {\n <tr>\n @for (jour of semaine; track jour.date) {\n @if (jour.horsDuMois) {\n <td class=\"st-calendar__vide\"></td>\n } @else {\n <td [attr.aria-selected]=\"jour.choisi ? 'true' : null\">\n <button\n class=\"st-calendar__jour\"\n type=\"button\"\n [attr.data-date]=\"jour.date\"\n [attr.data-plage]=\"jour.dansLaPlage ? '' : null\"\n [attr.tabindex]=\"estActive(jour.date) ? 0 : -1\"\n [attr.aria-label]=\"jour.nom\"\n [attr.aria-current]=\"jour.aujourdHui ? 'date' : null\"\n [attr.aria-disabled]=\"jour.horsBornes ? 'true' : null\"\n (click)=\"choisir(jour)\"\n >\n {{ jour.numero }}\n </button>\n </td>\n }\n }\n </tr>\n }\n </tbody>\n</table>\n\n<p class=\"st-calendar__aide\" [id]=\"identifiants.aide\">{{ libelles().aideDuCalendrier }}</p>\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:inline-block;padding:var(--st-espacement-3);color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-md)}.st-calendar__entete{display:flex;gap:var(--st-espacement-2);align-items:center;justify-content:space-between;margin-block-end:var(--st-espacement-2)}.st-calendar__titre{margin:0;font-weight:var(--st-graisse-semi);text-transform:capitalize}.st-calendar__grille{border-collapse:collapse}.st-calendar__jour-de-semaine{padding-block-end:var(--st-espacement-1);font-size:var(--st-taille-sm);font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte-discret);text-align:center}.st-calendar__jour:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-calendar__jour{inline-size:var(--st-cible-tactile-min);block-size:var(--st-cible-tactile-min);font:inherit;font-variant-numeric:tabular-nums;color:inherit;cursor:pointer;background:transparent;border:1px solid transparent;border-radius:var(--st-rayon-sm)}.st-calendar__jour:hover:not([aria-disabled=true]){background:var(--st-couleur-surface-enfoncee)}.st-calendar__jour[aria-current=date]{font-weight:var(--st-graisse-semi);border-color:var(--st-couleur-bordure-forte)}.st-calendar__jour[data-plage]{background:var(--st-couleur-surface-enfoncee)}.st-calendar__jour[aria-disabled=true]{color:var(--st-couleur-texte-
|
|
3703
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StCalendar, isStandalone: true, selector: "st-calendar", inputs: { selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, dateMin: { classPropertyName: "dateMin", publicName: "dateMin", isSignal: true, isRequired: false, transformFunction: null }, dateMax: { classPropertyName: "dateMax", publicName: "dateMax", isSignal: true, isRequired: false, transformFunction: null }, plage: { classPropertyName: "plage", publicName: "plage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { choix: "choix", fermeture: "fermeture" }, host: { listeners: { "keydown": "surTouche($event)" }, classAttribute: "st-calendar" }, ngImport: i0, template: "<div class=\"st-calendar__entete\">\n <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n Le contenu vient du gabarit de stIconButton, et l'etiquette est requise. -->\n <button\n stIconButton\n type=\"button\"\n icone=\"chevron-gauche\"\n [etiquette]=\"libelles().moisPrecedent\"\n [disabled]=\"!moisPrecedentPossible()\"\n (click)=\"changerDeMois(-1)\"\n ></button>\n <!-- Region vivante : changer de mois a la souris ne deplace pas le focus, et le\n nouveau mois doit se dire. -->\n <p class=\"st-calendar__titre\" aria-live=\"polite\" [id]=\"identifiants.titre\">{{ titre() }}</p>\n <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n Le contenu vient du gabarit de stIconButton, et l'etiquette est requise. -->\n <button\n stIconButton\n type=\"button\"\n icone=\"chevron-droite\"\n [etiquette]=\"libelles().moisSuivant\"\n [disabled]=\"!moisSuivantPossible()\"\n (click)=\"changerDeMois(1)\"\n ></button>\n</div>\n\n<table\n class=\"st-calendar__grille\"\n role=\"grid\"\n [attr.aria-labelledby]=\"identifiants.titre\"\n [attr.aria-describedby]=\"identifiants.aide\"\n>\n <thead>\n <tr>\n @for (jour of joursDeLaSemaine(); track $index) {\n <th class=\"st-calendar__jour-de-semaine\" scope=\"col\" [attr.abbr]=\"jour.long\">\n {{ jour.court }}\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (semaine of semaines(); track semaine[0]?.date) {\n <tr>\n @for (jour of semaine; track jour.date) {\n @if (jour.horsDuMois) {\n <td class=\"st-calendar__vide\"></td>\n } @else {\n <td [attr.aria-selected]=\"jour.choisi ? 'true' : null\">\n <button\n class=\"st-calendar__jour\"\n type=\"button\"\n [attr.data-date]=\"jour.date\"\n [attr.data-plage]=\"jour.dansLaPlage ? '' : null\"\n [attr.tabindex]=\"estActive(jour.date) ? 0 : -1\"\n [attr.aria-label]=\"jour.nom\"\n [attr.aria-current]=\"jour.aujourdHui ? 'date' : null\"\n [attr.aria-disabled]=\"jour.horsBornes ? 'true' : null\"\n (click)=\"choisir(jour)\"\n >\n {{ jour.numero }}\n </button>\n </td>\n }\n }\n </tr>\n }\n </tbody>\n</table>\n\n<p class=\"st-calendar__aide\" [id]=\"identifiants.aide\">{{ libelles().aideDuCalendrier }}</p>\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:inline-block;padding:var(--st-espacement-3);color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-md)}.st-calendar__entete{display:flex;gap:var(--st-espacement-2);align-items:center;justify-content:space-between;margin-block-end:var(--st-espacement-2)}.st-calendar__titre{margin:0;font-weight:var(--st-graisse-semi);text-transform:capitalize}.st-calendar__grille{border-collapse:collapse}.st-calendar__jour-de-semaine{padding-block-end:var(--st-espacement-1);font-size:var(--st-taille-sm);font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte-discret);text-align:center}.st-calendar__jour:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-calendar__jour{inline-size:max(var(--st-calendrier-jour-taille, var(--st-cible-tactile-min)),var(--st-cible-min));block-size:max(var(--st-calendrier-jour-taille, var(--st-cible-tactile-min)),var(--st-cible-min));font:inherit;font-variant-numeric:tabular-nums;color:inherit;cursor:pointer;background:transparent;border:1px solid transparent;border-radius:var(--st-rayon-sm)}.st-calendar__jour:hover:not([aria-disabled=true]){background:var(--st-couleur-surface-enfoncee)}.st-calendar__jour[aria-current=date]{font-weight:var(--st-graisse-semi);border-color:var(--st-couleur-bordure-forte)}.st-calendar__jour[data-plage]{background:var(--st-couleur-surface-enfoncee)}.st-calendar__jour[aria-disabled=true]{color:var(--st-couleur-texte-discret);text-decoration:line-through;cursor:not-allowed}[aria-selected=true]>.st-calendar__jour:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--st-couleur-surface)}[aria-selected=true]>.st-calendar__jour{font-weight:var(--st-graisse-semi);color:var(--st-couleur-sur-primaire);background:var(--st-couleur-primaire)}.st-calendar__aide{max-inline-size:20rem;margin:var(--st-espacement-2) 0 0;font-size:var(--st-taille-sm);color:var(--st-couleur-texte-discret)}@media(forced-colors:active){[aria-selected=true]>.st-calendar__jour{forced-color-adjust:none;color:HighlightText;background:Highlight}}\n"], dependencies: [{ kind: "component", type: StIconButton, selector: "button[stIconButton]", inputs: ["icone", "etiquette", "variante", "taille", "enfonce"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3639
3704
|
}
|
|
3640
3705
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StCalendar, decorators: [{
|
|
3641
3706
|
type: Component,
|
|
3642
3707
|
args: [{ selector: 'st-calendar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StIconButton], host: {
|
|
3643
3708
|
class: 'st-calendar',
|
|
3644
3709
|
'(keydown)': 'surTouche($event)',
|
|
3645
|
-
}, template: "<div class=\"st-calendar__entete\">\n <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n Le contenu vient du gabarit de stIconButton, et l'etiquette est requise. -->\n <button\n stIconButton\n type=\"button\"\n icone=\"chevron-gauche\"\n [etiquette]=\"libelles().moisPrecedent\"\n [disabled]=\"!moisPrecedentPossible()\"\n (click)=\"changerDeMois(-1)\"\n ></button>\n <!-- Region vivante : changer de mois a la souris ne deplace pas le focus, et le\n nouveau mois doit se dire. -->\n <p class=\"st-calendar__titre\" aria-live=\"polite\" [id]=\"identifiants.titre\">{{ titre() }}</p>\n <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n Le contenu vient du gabarit de stIconButton, et l'etiquette est requise. -->\n <button\n stIconButton\n type=\"button\"\n icone=\"chevron-droite\"\n [etiquette]=\"libelles().moisSuivant\"\n [disabled]=\"!moisSuivantPossible()\"\n (click)=\"changerDeMois(1)\"\n ></button>\n</div>\n\n<table\n class=\"st-calendar__grille\"\n role=\"grid\"\n [attr.aria-labelledby]=\"identifiants.titre\"\n [attr.aria-describedby]=\"identifiants.aide\"\n>\n <thead>\n <tr>\n @for (jour of joursDeLaSemaine(); track $index) {\n <th class=\"st-calendar__jour-de-semaine\" scope=\"col\" [attr.abbr]=\"jour.long\">\n {{ jour.court }}\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (semaine of semaines(); track semaine[0]?.date) {\n <tr>\n @for (jour of semaine; track jour.date) {\n @if (jour.horsDuMois) {\n <td class=\"st-calendar__vide\"></td>\n } @else {\n <td [attr.aria-selected]=\"jour.choisi ? 'true' : null\">\n <button\n class=\"st-calendar__jour\"\n type=\"button\"\n [attr.data-date]=\"jour.date\"\n [attr.data-plage]=\"jour.dansLaPlage ? '' : null\"\n [attr.tabindex]=\"estActive(jour.date) ? 0 : -1\"\n [attr.aria-label]=\"jour.nom\"\n [attr.aria-current]=\"jour.aujourdHui ? 'date' : null\"\n [attr.aria-disabled]=\"jour.horsBornes ? 'true' : null\"\n (click)=\"choisir(jour)\"\n >\n {{ jour.numero }}\n </button>\n </td>\n }\n }\n </tr>\n }\n </tbody>\n</table>\n\n<p class=\"st-calendar__aide\" [id]=\"identifiants.aide\">{{ libelles().aideDuCalendrier }}</p>\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:inline-block;padding:var(--st-espacement-3);color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-md)}.st-calendar__entete{display:flex;gap:var(--st-espacement-2);align-items:center;justify-content:space-between;margin-block-end:var(--st-espacement-2)}.st-calendar__titre{margin:0;font-weight:var(--st-graisse-semi);text-transform:capitalize}.st-calendar__grille{border-collapse:collapse}.st-calendar__jour-de-semaine{padding-block-end:var(--st-espacement-1);font-size:var(--st-taille-sm);font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte-discret);text-align:center}.st-calendar__jour:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-calendar__jour{inline-size:var(--st-cible-tactile-min);block-size:var(--st-cible-tactile-min);font:inherit;font-variant-numeric:tabular-nums;color:inherit;cursor:pointer;background:transparent;border:1px solid transparent;border-radius:var(--st-rayon-sm)}.st-calendar__jour:hover:not([aria-disabled=true]){background:var(--st-couleur-surface-enfoncee)}.st-calendar__jour[aria-current=date]{font-weight:var(--st-graisse-semi);border-color:var(--st-couleur-bordure-forte)}.st-calendar__jour[data-plage]{background:var(--st-couleur-surface-enfoncee)}.st-calendar__jour[aria-disabled=true]{color:var(--st-couleur-texte-
|
|
3710
|
+
}, template: "<div class=\"st-calendar__entete\">\n <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n Le contenu vient du gabarit de stIconButton, et l'etiquette est requise. -->\n <button\n stIconButton\n type=\"button\"\n icone=\"chevron-gauche\"\n [etiquette]=\"libelles().moisPrecedent\"\n [disabled]=\"!moisPrecedentPossible()\"\n (click)=\"changerDeMois(-1)\"\n ></button>\n <!-- Region vivante : changer de mois a la souris ne deplace pas le focus, et le\n nouveau mois doit se dire. -->\n <p class=\"st-calendar__titre\" aria-live=\"polite\" [id]=\"identifiants.titre\">{{ titre() }}</p>\n <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n Le contenu vient du gabarit de stIconButton, et l'etiquette est requise. -->\n <button\n stIconButton\n type=\"button\"\n icone=\"chevron-droite\"\n [etiquette]=\"libelles().moisSuivant\"\n [disabled]=\"!moisSuivantPossible()\"\n (click)=\"changerDeMois(1)\"\n ></button>\n</div>\n\n<table\n class=\"st-calendar__grille\"\n role=\"grid\"\n [attr.aria-labelledby]=\"identifiants.titre\"\n [attr.aria-describedby]=\"identifiants.aide\"\n>\n <thead>\n <tr>\n @for (jour of joursDeLaSemaine(); track $index) {\n <th class=\"st-calendar__jour-de-semaine\" scope=\"col\" [attr.abbr]=\"jour.long\">\n {{ jour.court }}\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (semaine of semaines(); track semaine[0]?.date) {\n <tr>\n @for (jour of semaine; track jour.date) {\n @if (jour.horsDuMois) {\n <td class=\"st-calendar__vide\"></td>\n } @else {\n <td [attr.aria-selected]=\"jour.choisi ? 'true' : null\">\n <button\n class=\"st-calendar__jour\"\n type=\"button\"\n [attr.data-date]=\"jour.date\"\n [attr.data-plage]=\"jour.dansLaPlage ? '' : null\"\n [attr.tabindex]=\"estActive(jour.date) ? 0 : -1\"\n [attr.aria-label]=\"jour.nom\"\n [attr.aria-current]=\"jour.aujourdHui ? 'date' : null\"\n [attr.aria-disabled]=\"jour.horsBornes ? 'true' : null\"\n (click)=\"choisir(jour)\"\n >\n {{ jour.numero }}\n </button>\n </td>\n }\n }\n </tr>\n }\n </tbody>\n</table>\n\n<p class=\"st-calendar__aide\" [id]=\"identifiants.aide\">{{ libelles().aideDuCalendrier }}</p>\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:inline-block;padding:var(--st-espacement-3);color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-md)}.st-calendar__entete{display:flex;gap:var(--st-espacement-2);align-items:center;justify-content:space-between;margin-block-end:var(--st-espacement-2)}.st-calendar__titre{margin:0;font-weight:var(--st-graisse-semi);text-transform:capitalize}.st-calendar__grille{border-collapse:collapse}.st-calendar__jour-de-semaine{padding-block-end:var(--st-espacement-1);font-size:var(--st-taille-sm);font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte-discret);text-align:center}.st-calendar__jour:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-calendar__jour{inline-size:max(var(--st-calendrier-jour-taille, var(--st-cible-tactile-min)),var(--st-cible-min));block-size:max(var(--st-calendrier-jour-taille, var(--st-cible-tactile-min)),var(--st-cible-min));font:inherit;font-variant-numeric:tabular-nums;color:inherit;cursor:pointer;background:transparent;border:1px solid transparent;border-radius:var(--st-rayon-sm)}.st-calendar__jour:hover:not([aria-disabled=true]){background:var(--st-couleur-surface-enfoncee)}.st-calendar__jour[aria-current=date]{font-weight:var(--st-graisse-semi);border-color:var(--st-couleur-bordure-forte)}.st-calendar__jour[data-plage]{background:var(--st-couleur-surface-enfoncee)}.st-calendar__jour[aria-disabled=true]{color:var(--st-couleur-texte-discret);text-decoration:line-through;cursor:not-allowed}[aria-selected=true]>.st-calendar__jour:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--st-couleur-surface)}[aria-selected=true]>.st-calendar__jour{font-weight:var(--st-graisse-semi);color:var(--st-couleur-sur-primaire);background:var(--st-couleur-primaire)}.st-calendar__aide{max-inline-size:20rem;margin:var(--st-espacement-2) 0 0;font-size:var(--st-taille-sm);color:var(--st-couleur-texte-discret)}@media(forced-colors:active){[aria-selected=true]>.st-calendar__jour{forced-color-adjust:none;color:HighlightText;background:Highlight}}\n"] }]
|
|
3646
3711
|
}], propDecorators: { selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], dateMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateMin", required: false }] }], dateMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateMax", required: false }] }], plage: [{ type: i0.Input, args: [{ isSignal: true, alias: "plage", required: false }] }], choix: [{ type: i0.Output, args: ["choix"] }], fermeture: [{ type: i0.Output, args: ["fermeture"] }] } });
|
|
3647
3712
|
|
|
3648
|
-
/**
|
|
3649
|
-
|
|
3713
|
+
/**
|
|
3714
|
+
* Cle d'un fichier choisi : deux choix du meme fichier ne l'ajoutent pas deux
|
|
3715
|
+
* fois, et l'application s'en sert pour dire ou en est chaque televersement.
|
|
3716
|
+
*/
|
|
3717
|
+
function cleDeFichier(fichier) {
|
|
3650
3718
|
return `${fichier.name}|${fichier.size.toString()}|${fichier.lastModified.toString()}`;
|
|
3651
3719
|
}
|
|
3652
3720
|
/**
|
|
@@ -3677,6 +3745,11 @@ function empreinte(fichier) {
|
|
|
3677
3745
|
* Chaque changement de la liste s'annonce : « 2 fichiers choisis ». Un fichier
|
|
3678
3746
|
* retire rend le focus au bouton de retrait suivant, ou au choix de fichiers : le
|
|
3679
3747
|
* focus ne tombe jamais sur le document.
|
|
3748
|
+
*
|
|
3749
|
+
* ⚠️ **Il ne televerse pas.** `etats` dit ou en est chaque fichier, et le bouton
|
|
3750
|
+
* de la ligne devient « Annuler » pendant l'envoi : le trajet — declaration, depot
|
|
3751
|
+
* pre-signe, confirmation antivirus — vit dans `StTeleversement`
|
|
3752
|
+
* (`@starterlib/core`), seul a parler au reseau.
|
|
3680
3753
|
*/
|
|
3681
3754
|
class StFileUpload extends ContratDeChamp {
|
|
3682
3755
|
libelles = inject(ST_LIBELLES);
|
|
@@ -3692,6 +3765,12 @@ class StFileUpload extends ContratDeChamp {
|
|
|
3692
3765
|
/** En octets. Affiche en aide ; la verification est dans le schema. */
|
|
3693
3766
|
tailleMax = input(null, /* @ts-ignore */
|
|
3694
3767
|
...(ngDevMode ? [{ debugName: "tailleMax" }] : /* istanbul ignore next */ []));
|
|
3768
|
+
/**
|
|
3769
|
+
* Ou en est chaque fichier, par `cleDeFichier`. Le composant AFFICHE ce trajet,
|
|
3770
|
+
* il ne le fait pas : `StTeleversement` de `@starterlib/core` s'en charge.
|
|
3771
|
+
*/
|
|
3772
|
+
etats = input(null, /* @ts-ignore */
|
|
3773
|
+
...(ngDevMode ? [{ debugName: "etats" }] : /* istanbul ignore next */ []));
|
|
3695
3774
|
annonce = new AnnonceLocale(inject(DestroyRef));
|
|
3696
3775
|
survol = signal(false, /* @ts-ignore */
|
|
3697
3776
|
...(ngDevMode ? [{ debugName: "survol" }] : /* istanbul ignore next */ []));
|
|
@@ -3709,11 +3788,16 @@ class StFileUpload extends ContratDeChamp {
|
|
|
3709
3788
|
...(ngDevMode ? [{ debugName: "aideLue" }] : /* istanbul ignore next */ []));
|
|
3710
3789
|
lignes = computed(() => {
|
|
3711
3790
|
const locale = this.locale();
|
|
3712
|
-
|
|
3713
|
-
|
|
3714
|
-
cle
|
|
3715
|
-
|
|
3716
|
-
|
|
3791
|
+
const etats = this.etats();
|
|
3792
|
+
return this.value().map((fichier) => {
|
|
3793
|
+
const cle = cleDeFichier(fichier);
|
|
3794
|
+
return {
|
|
3795
|
+
fichier,
|
|
3796
|
+
cle,
|
|
3797
|
+
taille: formaterTaille(fichier.size, locale),
|
|
3798
|
+
etat: etats?.get(cle) ?? null,
|
|
3799
|
+
};
|
|
3800
|
+
});
|
|
3717
3801
|
}, /* @ts-ignore */
|
|
3718
3802
|
...(ngDevMode ? [{ debugName: "lignes" }] : /* istanbul ignore next */ []));
|
|
3719
3803
|
surChoix(evenement) {
|
|
@@ -3735,6 +3819,8 @@ class StFileUpload extends ContratDeChamp {
|
|
|
3735
3819
|
return;
|
|
3736
3820
|
this.ajouter(Array.from(evenement.dataTransfer?.files ?? []));
|
|
3737
3821
|
}
|
|
3822
|
+
/** Emis quand la personne interrompt un envoi : c'est l'application qui annule. */
|
|
3823
|
+
annulation = output();
|
|
3738
3824
|
retirer(indice) {
|
|
3739
3825
|
const restants = this.value().filter((_, position) => position !== indice);
|
|
3740
3826
|
this.value.set(restants);
|
|
@@ -3759,8 +3845,11 @@ class StFileUpload extends ContratDeChamp {
|
|
|
3759
3845
|
return;
|
|
3760
3846
|
let liste;
|
|
3761
3847
|
if (this.multiple()) {
|
|
3762
|
-
const connus = new Set(this.value().map(
|
|
3763
|
-
liste = [
|
|
3848
|
+
const connus = new Set(this.value().map(cleDeFichier));
|
|
3849
|
+
liste = [
|
|
3850
|
+
...this.value(),
|
|
3851
|
+
...fichiers.filter((fichier) => !connus.has(cleDeFichier(fichier))),
|
|
3852
|
+
];
|
|
3764
3853
|
}
|
|
3765
3854
|
else {
|
|
3766
3855
|
liste = fichiers.slice(0, 1);
|
|
@@ -3771,15 +3860,657 @@ class StFileUpload extends ContratDeChamp {
|
|
|
3771
3860
|
this.annonce.annoncer(this.libelles().nombreDeFichiers(liste.length));
|
|
3772
3861
|
}
|
|
3773
3862
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StFileUpload, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
3774
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StFileUpload, isStandalone: true, selector: "st-file-upload", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, tailleMax: { classPropertyName: "tailleMax", publicName: "tailleMax", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "focusout": "aLaSortie($event)" }, classAttribute: "st-file-upload" }, usesInheritance: true, ngImport: i0, template: "<st-form-field\n [libelle]=\"libelle()\"\n [aide]=\"aideLue()\"\n [erreurs]=\"errors()\"\n [afficherErreurs]=\"touched()\"\n [obligatoire]=\"required()\"\n>\n <div\n class=\"st-file-upload__zone\"\n [attr.data-survol]=\"survol() ? '' : null\"\n [attr.data-desactive]=\"disabled() ? '' : null\"\n (dragover)=\"surSurvol($event)\"\n (dragleave)=\"survol.set(false)\"\n (drop)=\"surDepot($event)\"\n >\n <input\n #champ\n class=\"st-file-upload__natif\"\n stControleDeChamp\n type=\"file\"\n [accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [attr.name]=\"name() || null\"\n [disabled]=\"disabled() || readonly()\"\n (change)=\"surChoix($event)\"\n />\n <!-- Voie de la souris vers le champ natif. Masque au lecteur d'ecran et hors\n tabulation : le clavier et le lecteur d'ecran passent par le champ natif,\n deja nomme par l'etiquette du champ. -->\n <span class=\"st-file-upload__bouton\" aria-hidden=\"true\" (click)=\"champ.click()\">\n <st-icon nom=\"televerser\" taille=\"sm\" />\n {{ multiple() ? libelles().choisirDesFichiers : libelles().choisirUnFichier }}\n </span>\n @if (multiple()) {\n <span class=\"st-file-upload__depot\" aria-hidden=\"true\">{{ libelles().ouDeposerIci }}</span>\n }\n </div>\n\n @if (lignes().length > 0) {\n <ul class=\"st-file-upload__liste\">\n @for (ligne of lignes(); track ligne.cle; let indice = $index) {\n <li class=\"st-file-upload__fichier\">\n <st-icon nom=\"fichier\" taille=\"sm\" />\n <span class=\"st-file-upload__nom\">{{ ligne.fichier.name }}</span>\n <span class=\"st-file-upload__taille\">{{ ligne.taille }}</span>\n <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n Le contenu vient du gabarit de stIconButton, et l'etiquette est requise. -->\n <button\n class=\"st-file-upload__retrait\"\n stIconButton\n type=\"button\"\n
|
|
3863
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StFileUpload, isStandalone: true, selector: "st-file-upload", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, tailleMax: { classPropertyName: "tailleMax", publicName: "tailleMax", isSignal: true, isRequired: false, transformFunction: null }, etats: { classPropertyName: "etats", publicName: "etats", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", annulation: "annulation" }, host: { listeners: { "focusout": "aLaSortie($event)" }, classAttribute: "st-file-upload" }, usesInheritance: true, ngImport: i0, template: "<st-form-field\n [libelle]=\"libelle()\"\n [aide]=\"aideLue()\"\n [erreurs]=\"errors()\"\n [afficherErreurs]=\"touched()\"\n [obligatoire]=\"required()\"\n>\n <div\n class=\"st-file-upload__zone\"\n [attr.data-survol]=\"survol() ? '' : null\"\n [attr.data-desactive]=\"disabled() ? '' : null\"\n (dragover)=\"surSurvol($event)\"\n (dragleave)=\"survol.set(false)\"\n (drop)=\"surDepot($event)\"\n >\n <input\n #champ\n class=\"st-file-upload__natif\"\n stControleDeChamp\n type=\"file\"\n [accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [attr.name]=\"name() || null\"\n [disabled]=\"disabled() || readonly()\"\n (change)=\"surChoix($event)\"\n />\n <!-- Voie de la souris vers le champ natif. Masque au lecteur d'ecran et hors\n tabulation : le clavier et le lecteur d'ecran passent par le champ natif,\n deja nomme par l'etiquette du champ. -->\n <span class=\"st-file-upload__bouton\" aria-hidden=\"true\" (click)=\"champ.click()\">\n <st-icon nom=\"televerser\" taille=\"sm\" />\n {{ multiple() ? libelles().choisirDesFichiers : libelles().choisirUnFichier }}\n </span>\n @if (multiple()) {\n <span class=\"st-file-upload__depot\" aria-hidden=\"true\">{{ libelles().ouDeposerIci }}</span>\n }\n </div>\n\n @if (lignes().length > 0) {\n <ul class=\"st-file-upload__liste\">\n @for (ligne of lignes(); track ligne.cle; let indice = $index) {\n <li class=\"st-file-upload__fichier\" [attr.data-etape]=\"ligne.etat?.etape\">\n <st-icon nom=\"fichier\" taille=\"sm\" />\n <span class=\"st-file-upload__nom\">{{ ligne.fichier.name }}</span>\n <span class=\"st-file-upload__taille\">{{ ligne.taille }}</span>\n\n @if (ligne.etat; as etat) {\n @switch (etat.etape) {\n @case ('en-cours') {\n <st-progress\n class=\"st-file-upload__progression\"\n [valeur]=\"etat.progression ?? null\"\n [etiquette]=\"libelles().televersementDe(ligne.fichier.name)\"\n />\n }\n @case ('depose') {\n <span class=\"st-file-upload__etat\">\n <st-icon nom=\"cercle-coche\" taille=\"sm\" ton=\"succes\" />\n {{ libelles().fichierDepose(ligne.fichier.name) }}\n </span>\n }\n @case ('refuse') {\n <span class=\"st-file-upload__etat\" data-refuse>\n <st-icon nom=\"triangle-alerte\" taille=\"sm\" ton=\"danger\" />\n {{ etat.message ?? libelles().fichierRefuse(ligne.fichier.name) }}\n </span>\n }\n }\n }\n\n <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n Le contenu vient du gabarit de stIconButton, et l'etiquette est requise. -->\n <button\n class=\"st-file-upload__retrait\"\n stIconButton\n type=\"button\"\n taille=\"sm\"\n [icone]=\"ligne.etat?.etape === 'en-cours' ? 'croix' : 'corbeille'\"\n [etiquette]=\"\n ligne.etat?.etape === 'en-cours'\n ? libelles().annulerLeTeleversement(ligne.fichier.name)\n : libelles().retirerLeFichier(ligne.fichier.name)\n \"\n [disabled]=\"disabled() || readonly()\"\n (click)=\"\n ligne.etat?.etape === 'en-cours' ? annulation.emit(ligne.fichier) : retirer(indice)\n \"\n ></button>\n </li>\n }\n </ul>\n }\n</st-form-field>\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:block}.st-file-upload__zone{position:relative;display:flex;flex-wrap:wrap;gap:var(--st-espacement-2) var(--st-espacement-3);align-items:center;padding:var(--st-espacement-3);border:1px dashed var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-md)}.st-file-upload__zone[data-survol]{background:var(--st-couleur-surface-enfoncee);border-style:solid}.st-file-upload__natif{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.st-file-upload__bouton{display:inline-flex;gap:var(--st-espacement-2);align-items:center;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-4);font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte);cursor:pointer;background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-sm)}.st-file-upload__natif:focus-visible+.st-file-upload__bouton{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}[aria-invalid=true]+.st-file-upload__bouton{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-file-upload__natif:disabled+.st-file-upload__bouton{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-file-upload__depot{color:var(--st-couleur-texte-discret)}.st-file-upload__liste{display:grid;gap:var(--st-espacement-1);padding:0;margin:var(--st-espacement-2) 0 0;list-style:none}.st-file-upload__fichier{display:flex;gap:var(--st-espacement-2);align-items:center}.st-file-upload__nom{min-inline-size:0;overflow-wrap:anywhere}.st-file-upload__progression{flex:1 1 8rem;max-inline-size:12rem}.st-file-upload__etat{display:inline-flex;gap:var(--st-espacement-1);align-items:center;color:var(--st-couleur-texte-discret)}.st-file-upload__etat[data-refuse]{color:var(--st-couleur-danger)}.st-file-upload__taille{flex:none;color:var(--st-couleur-texte-discret);font-variant-numeric:tabular-nums}\n"], dependencies: [{ kind: "component", type: StFormField, selector: "st-form-field", inputs: ["libelle", "aide", "complement", "erreurs", "afficherErreurs", "obligatoire", "disposition", "libelleMasque"] }, { kind: "directive", type: StControleDeChamp, selector: "[stControleDeChamp]" }, { kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "taille", "ton", "etiquette"] }, { kind: "component", type: StIconButton, selector: "button[stIconButton]", inputs: ["icone", "etiquette", "variante", "taille", "enfonce"] }, { kind: "component", type: StProgress, selector: "st-progress", inputs: ["valeur", "max", "etiquette", "ton", "texteDeValeur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3775
3864
|
}
|
|
3776
3865
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StFileUpload, decorators: [{
|
|
3777
3866
|
type: Component,
|
|
3778
|
-
args: [{ selector: 'st-file-upload', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StFormField, StControleDeChamp, StIcon, StIconButton], host: {
|
|
3867
|
+
args: [{ selector: 'st-file-upload', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StFormField, StControleDeChamp, StIcon, StIconButton, StProgress], host: {
|
|
3779
3868
|
class: 'st-file-upload',
|
|
3780
3869
|
'(focusout)': 'aLaSortie($event)',
|
|
3781
|
-
}, template: "<st-form-field\n [libelle]=\"libelle()\"\n [aide]=\"aideLue()\"\n [erreurs]=\"errors()\"\n [afficherErreurs]=\"touched()\"\n [obligatoire]=\"required()\"\n>\n <div\n class=\"st-file-upload__zone\"\n [attr.data-survol]=\"survol() ? '' : null\"\n [attr.data-desactive]=\"disabled() ? '' : null\"\n (dragover)=\"surSurvol($event)\"\n (dragleave)=\"survol.set(false)\"\n (drop)=\"surDepot($event)\"\n >\n <input\n #champ\n class=\"st-file-upload__natif\"\n stControleDeChamp\n type=\"file\"\n [accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [attr.name]=\"name() || null\"\n [disabled]=\"disabled() || readonly()\"\n (change)=\"surChoix($event)\"\n />\n <!-- Voie de la souris vers le champ natif. Masque au lecteur d'ecran et hors\n tabulation : le clavier et le lecteur d'ecran passent par le champ natif,\n deja nomme par l'etiquette du champ. -->\n <span class=\"st-file-upload__bouton\" aria-hidden=\"true\" (click)=\"champ.click()\">\n <st-icon nom=\"televerser\" taille=\"sm\" />\n {{ multiple() ? libelles().choisirDesFichiers : libelles().choisirUnFichier }}\n </span>\n @if (multiple()) {\n <span class=\"st-file-upload__depot\" aria-hidden=\"true\">{{ libelles().ouDeposerIci }}</span>\n }\n </div>\n\n @if (lignes().length > 0) {\n <ul class=\"st-file-upload__liste\">\n @for (ligne of lignes(); track ligne.cle; let indice = $index) {\n <li class=\"st-file-upload__fichier\">\n <st-icon nom=\"fichier\" taille=\"sm\" />\n <span class=\"st-file-upload__nom\">{{ ligne.fichier.name }}</span>\n <span class=\"st-file-upload__taille\">{{ ligne.taille }}</span>\n <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n Le contenu vient du gabarit de stIconButton, et l'etiquette est requise. -->\n <button\n class=\"st-file-upload__retrait\"\n stIconButton\n type=\"button\"\n
|
|
3782
|
-
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], tailleMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "tailleMax", required: false }] }] } });
|
|
3870
|
+
}, template: "<st-form-field\n [libelle]=\"libelle()\"\n [aide]=\"aideLue()\"\n [erreurs]=\"errors()\"\n [afficherErreurs]=\"touched()\"\n [obligatoire]=\"required()\"\n>\n <div\n class=\"st-file-upload__zone\"\n [attr.data-survol]=\"survol() ? '' : null\"\n [attr.data-desactive]=\"disabled() ? '' : null\"\n (dragover)=\"surSurvol($event)\"\n (dragleave)=\"survol.set(false)\"\n (drop)=\"surDepot($event)\"\n >\n <input\n #champ\n class=\"st-file-upload__natif\"\n stControleDeChamp\n type=\"file\"\n [accept]=\"accept()\"\n [multiple]=\"multiple()\"\n [attr.name]=\"name() || null\"\n [disabled]=\"disabled() || readonly()\"\n (change)=\"surChoix($event)\"\n />\n <!-- Voie de la souris vers le champ natif. Masque au lecteur d'ecran et hors\n tabulation : le clavier et le lecteur d'ecran passent par le champ natif,\n deja nomme par l'etiquette du champ. -->\n <span class=\"st-file-upload__bouton\" aria-hidden=\"true\" (click)=\"champ.click()\">\n <st-icon nom=\"televerser\" taille=\"sm\" />\n {{ multiple() ? libelles().choisirDesFichiers : libelles().choisirUnFichier }}\n </span>\n @if (multiple()) {\n <span class=\"st-file-upload__depot\" aria-hidden=\"true\">{{ libelles().ouDeposerIci }}</span>\n }\n </div>\n\n @if (lignes().length > 0) {\n <ul class=\"st-file-upload__liste\">\n @for (ligne of lignes(); track ligne.cle; let indice = $index) {\n <li class=\"st-file-upload__fichier\" [attr.data-etape]=\"ligne.etat?.etape\">\n <st-icon nom=\"fichier\" taille=\"sm\" />\n <span class=\"st-file-upload__nom\">{{ ligne.fichier.name }}</span>\n <span class=\"st-file-upload__taille\">{{ ligne.taille }}</span>\n\n @if (ligne.etat; as etat) {\n @switch (etat.etape) {\n @case ('en-cours') {\n <st-progress\n class=\"st-file-upload__progression\"\n [valeur]=\"etat.progression ?? null\"\n [etiquette]=\"libelles().televersementDe(ligne.fichier.name)\"\n />\n }\n @case ('depose') {\n <span class=\"st-file-upload__etat\">\n <st-icon nom=\"cercle-coche\" taille=\"sm\" ton=\"succes\" />\n {{ libelles().fichierDepose(ligne.fichier.name) }}\n </span>\n }\n @case ('refuse') {\n <span class=\"st-file-upload__etat\" data-refuse>\n <st-icon nom=\"triangle-alerte\" taille=\"sm\" ton=\"danger\" />\n {{ etat.message ?? libelles().fichierRefuse(ligne.fichier.name) }}\n </span>\n }\n }\n }\n\n <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n Le contenu vient du gabarit de stIconButton, et l'etiquette est requise. -->\n <button\n class=\"st-file-upload__retrait\"\n stIconButton\n type=\"button\"\n taille=\"sm\"\n [icone]=\"ligne.etat?.etape === 'en-cours' ? 'croix' : 'corbeille'\"\n [etiquette]=\"\n ligne.etat?.etape === 'en-cours'\n ? libelles().annulerLeTeleversement(ligne.fichier.name)\n : libelles().retirerLeFichier(ligne.fichier.name)\n \"\n [disabled]=\"disabled() || readonly()\"\n (click)=\"\n ligne.etat?.etape === 'en-cours' ? annulation.emit(ligne.fichier) : retirer(indice)\n \"\n ></button>\n </li>\n }\n </ul>\n }\n</st-form-field>\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:block}.st-file-upload__zone{position:relative;display:flex;flex-wrap:wrap;gap:var(--st-espacement-2) var(--st-espacement-3);align-items:center;padding:var(--st-espacement-3);border:1px dashed var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-md)}.st-file-upload__zone[data-survol]{background:var(--st-couleur-surface-enfoncee);border-style:solid}.st-file-upload__natif{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.st-file-upload__bouton{display:inline-flex;gap:var(--st-espacement-2);align-items:center;min-block-size:var(--st-cible-tactile-min);padding:var(--st-espacement-2) var(--st-espacement-4);font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte);cursor:pointer;background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-sm)}.st-file-upload__natif:focus-visible+.st-file-upload__bouton{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}[aria-invalid=true]+.st-file-upload__bouton{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-file-upload__natif:disabled+.st-file-upload__bouton{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-file-upload__depot{color:var(--st-couleur-texte-discret)}.st-file-upload__liste{display:grid;gap:var(--st-espacement-1);padding:0;margin:var(--st-espacement-2) 0 0;list-style:none}.st-file-upload__fichier{display:flex;gap:var(--st-espacement-2);align-items:center}.st-file-upload__nom{min-inline-size:0;overflow-wrap:anywhere}.st-file-upload__progression{flex:1 1 8rem;max-inline-size:12rem}.st-file-upload__etat{display:inline-flex;gap:var(--st-espacement-1);align-items:center;color:var(--st-couleur-texte-discret)}.st-file-upload__etat[data-refuse]{color:var(--st-couleur-danger)}.st-file-upload__taille{flex:none;color:var(--st-couleur-texte-discret);font-variant-numeric:tabular-nums}\n"] }]
|
|
3871
|
+
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], tailleMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "tailleMax", required: false }] }], etats: [{ type: i0.Input, args: [{ isSignal: true, alias: "etats", required: false }] }], annulation: [{ type: i0.Output, args: ["annulation"] }] } });
|
|
3872
|
+
|
|
3873
|
+
/** Plafond du backend : au-dela, la requete est refusee (SEC-7 de la vague 4). */
|
|
3874
|
+
const TAILLE_MAXIMALE = 100;
|
|
3875
|
+
/**
|
|
3876
|
+
* Pagination d'une liste par curseur.
|
|
3877
|
+
*
|
|
3878
|
+
* ```html
|
|
3879
|
+
* <st-data-table #tableau … />
|
|
3880
|
+
* <st-pagination
|
|
3881
|
+
* [numero]="navigation.numeroDePage()"
|
|
3882
|
+
* [precedenteDisponible]="navigation.precedenteDisponible()"
|
|
3883
|
+
* [suivanteDisponible]="page.value()?.hasMore ?? false"
|
|
3884
|
+
* [chargement]="page.isLoading()"
|
|
3885
|
+
* [cible]="tableau"
|
|
3886
|
+
* (precedente)="navigation.precedente()"
|
|
3887
|
+
* (suivante)="navigation.suivante(page.value())"
|
|
3888
|
+
* />
|
|
3889
|
+
* ```
|
|
3890
|
+
*
|
|
3891
|
+
* ⚠️ **Ni total, ni numeros cliquables** : le backend ne compte pas et ne va que
|
|
3892
|
+
* vers l'avant (audit de la vague 4, V4-2). « Page 3 » se dit ; « page 3 sur 12 »
|
|
3893
|
+
* serait invente.
|
|
3894
|
+
*
|
|
3895
|
+
* ⚠️ **Boutons indisponibles, jamais desactives** : sur la derniere page, « Page
|
|
3896
|
+
* suivante » garde le focus qu'il avait. Desactive, il le perdrait, et le lecteur
|
|
3897
|
+
* d'ecran retomberait sur le debut du document.
|
|
3898
|
+
*
|
|
3899
|
+
* ⚠️ **Apres un changement de page, le focus va a la `cible`** — la legende du
|
|
3900
|
+
* tableau — et « Page 2 » s'annonce (UX-13). Sans cela, la personne au clavier
|
|
3901
|
+
* reste en bas, sur « Page suivante », sans savoir que le contenu au-dessus a
|
|
3902
|
+
* change.
|
|
3903
|
+
*/
|
|
3904
|
+
class StPagination {
|
|
3905
|
+
libelles = inject(ST_LIBELLES);
|
|
3906
|
+
injecteur = inject(Injector);
|
|
3907
|
+
mode = input('pages', /* @ts-ignore */
|
|
3908
|
+
...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
|
|
3909
|
+
/** A partir de 1. */
|
|
3910
|
+
numero = input(1, /* @ts-ignore */
|
|
3911
|
+
...(ngDevMode ? [{ debugName: "numero" }] : /* istanbul ignore next */ []));
|
|
3912
|
+
precedenteDisponible = input(false, { ...(ngDevMode ? { debugName: "precedenteDisponible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3913
|
+
suivanteDisponible = input(false, { ...(ngDevMode ? { debugName: "suivanteDisponible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3914
|
+
chargement = input(false, { ...(ngDevMode ? { debugName: "chargement" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3915
|
+
/** Nom de la navigation, quand une page en porte plusieurs. */
|
|
3916
|
+
etiquette = input(null, /* @ts-ignore */
|
|
3917
|
+
...(ngDevMode ? [{ debugName: "etiquette" }] : /* istanbul ignore next */ []));
|
|
3918
|
+
/** Tailles proposees ; vide, pas de choix. Plafonnees a 100. */
|
|
3919
|
+
taillesDePage = input([], /* @ts-ignore */
|
|
3920
|
+
...(ngDevMode ? [{ debugName: "taillesDePage" }] : /* istanbul ignore next */ []));
|
|
3921
|
+
taille = model(20, /* @ts-ignore */
|
|
3922
|
+
...(ngDevMode ? [{ debugName: "taille" }] : /* istanbul ignore next */ []));
|
|
3923
|
+
/** Recoit le focus apres un changement de page. */
|
|
3924
|
+
cible = input(null, /* @ts-ignore */
|
|
3925
|
+
...(ngDevMode ? [{ debugName: "cible" }] : /* istanbul ignore next */ []));
|
|
3926
|
+
precedente = output();
|
|
3927
|
+
suivante = output();
|
|
3928
|
+
annonce = new AnnonceLocale(inject(DestroyRef));
|
|
3929
|
+
tailles = computed(() => this.taillesDePage().filter((taille) => taille >= 1 && taille <= TAILLE_MAXIMALE), /* @ts-ignore */
|
|
3930
|
+
...(ngDevMode ? [{ debugName: "tailles" }] : /* istanbul ignore next */ []));
|
|
3931
|
+
etiquetteLue = computed(() => this.etiquette() ?? this.libelles().pagination, /* @ts-ignore */
|
|
3932
|
+
...(ngDevMode ? [{ debugName: "etiquetteLue" }] : /* istanbul ignore next */ []));
|
|
3933
|
+
constructor() {
|
|
3934
|
+
// Le focus attend la FIN du chargement : amene sur la cible pendant que les
|
|
3935
|
+
// anciennes lignes sont encore la, il ferait relire la page quittee.
|
|
3936
|
+
let dernier = null;
|
|
3937
|
+
let enAttente = false;
|
|
3938
|
+
effect(() => {
|
|
3939
|
+
const numero = this.numero();
|
|
3940
|
+
const chargement = this.chargement();
|
|
3941
|
+
if (dernier === null) {
|
|
3942
|
+
dernier = numero;
|
|
3943
|
+
return;
|
|
3944
|
+
}
|
|
3945
|
+
if (numero !== dernier) {
|
|
3946
|
+
dernier = numero;
|
|
3947
|
+
enAttente = true;
|
|
3948
|
+
if (this.mode() === 'pages')
|
|
3949
|
+
this.annonce.annoncer(this.libelles().pageNumero(numero));
|
|
3950
|
+
}
|
|
3951
|
+
if (!enAttente || chargement)
|
|
3952
|
+
return;
|
|
3953
|
+
enAttente = false;
|
|
3954
|
+
afterNextRender(() => {
|
|
3955
|
+
const cible = this.cible();
|
|
3956
|
+
const element = typeof cible === 'function' ? cible() : cible;
|
|
3957
|
+
element?.focus();
|
|
3958
|
+
}, { injector: this.injecteur });
|
|
3959
|
+
});
|
|
3960
|
+
}
|
|
3961
|
+
surTaille(evenement) {
|
|
3962
|
+
this.taille.set(Number(evenement.target.value));
|
|
3963
|
+
}
|
|
3964
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StPagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3965
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StPagination, isStandalone: true, selector: "st-pagination", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, numero: { classPropertyName: "numero", publicName: "numero", isSignal: true, isRequired: false, transformFunction: null }, precedenteDisponible: { classPropertyName: "precedenteDisponible", publicName: "precedenteDisponible", isSignal: true, isRequired: false, transformFunction: null }, suivanteDisponible: { classPropertyName: "suivanteDisponible", publicName: "suivanteDisponible", isSignal: true, isRequired: false, transformFunction: null }, chargement: { classPropertyName: "chargement", publicName: "chargement", isSignal: true, isRequired: false, transformFunction: null }, etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: false, transformFunction: null }, taillesDePage: { classPropertyName: "taillesDePage", publicName: "taillesDePage", isSignal: true, isRequired: false, transformFunction: null }, taille: { classPropertyName: "taille", publicName: "taille", isSignal: true, isRequired: false, transformFunction: null }, cible: { classPropertyName: "cible", publicName: "cible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { taille: "tailleChange", precedente: "precedente", suivante: "suivante" }, host: { classAttribute: "st-pagination" }, ngImport: i0, template: "<nav class=\"st-pagination__navigation\" [attr.aria-label]=\"etiquetteLue()\">\n @if (mode() === 'pages') {\n <button\n stButton\n type=\"button\"\n iconeAvant=\"chevron-gauche\"\n [indisponible]=\"!precedenteDisponible() || chargement()\"\n (click)=\"precedente.emit()\"\n >\n {{ libelles().pagePrecedente }}\n </button>\n <span class=\"st-pagination__numero\" aria-current=\"page\">\n {{ libelles().pageNumero(numero()) }}\n </span>\n <button\n stButton\n type=\"button\"\n iconeApres=\"chevron-droite\"\n [indisponible]=\"!suivanteDisponible()\"\n [chargement]=\"chargement()\"\n (click)=\"suivante.emit()\"\n >\n {{ libelles().pageSuivante }}\n </button>\n } @else if (suivanteDisponible()) {\n <button stButton type=\"button\" [chargement]=\"chargement()\" (click)=\"suivante.emit()\">\n {{ libelles().afficherPlus }}\n </button>\n }\n\n @if (tailles().length > 0) {\n <label class=\"st-pagination__taille\">\n <span>{{ libelles().lignesParPage }}</span>\n <select class=\"st-pagination__choix\" (change)=\"surTaille($event)\">\n @for (proposee of tailles(); track proposee) {\n <option [value]=\"proposee\" [selected]=\"proposee === taille()\">{{ proposee }}</option>\n }\n </select>\n </label>\n }\n</nav>\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:block}.st-pagination__navigation{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2) var(--st-espacement-3);align-items:center}.st-pagination__numero{font-variant-numeric:tabular-nums;font-weight:var(--st-graisse-semi)}.st-pagination__taille{display:inline-flex;gap:var(--st-espacement-2);align-items:center;margin-inline-start:auto}.st-pagination__choix:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-pagination__choix{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-commande-hauteur, var(--st-cible-tactile-min));padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}.st-pagination__choix[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-pagination__choix:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-pagination__choix:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-pagination__choix{inline-size:auto}\n"], dependencies: [{ kind: "component", type: StButton, selector: "button[stButton]", inputs: ["variante", "taille", "pleineLargeur", "iconeAvant", "iconeApres", "chargement", "indisponible"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3966
|
+
}
|
|
3967
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StPagination, decorators: [{
|
|
3968
|
+
type: Component,
|
|
3969
|
+
args: [{ selector: 'st-pagination', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StButton], host: { class: 'st-pagination' }, template: "<nav class=\"st-pagination__navigation\" [attr.aria-label]=\"etiquetteLue()\">\n @if (mode() === 'pages') {\n <button\n stButton\n type=\"button\"\n iconeAvant=\"chevron-gauche\"\n [indisponible]=\"!precedenteDisponible() || chargement()\"\n (click)=\"precedente.emit()\"\n >\n {{ libelles().pagePrecedente }}\n </button>\n <span class=\"st-pagination__numero\" aria-current=\"page\">\n {{ libelles().pageNumero(numero()) }}\n </span>\n <button\n stButton\n type=\"button\"\n iconeApres=\"chevron-droite\"\n [indisponible]=\"!suivanteDisponible()\"\n [chargement]=\"chargement()\"\n (click)=\"suivante.emit()\"\n >\n {{ libelles().pageSuivante }}\n </button>\n } @else if (suivanteDisponible()) {\n <button stButton type=\"button\" [chargement]=\"chargement()\" (click)=\"suivante.emit()\">\n {{ libelles().afficherPlus }}\n </button>\n }\n\n @if (tailles().length > 0) {\n <label class=\"st-pagination__taille\">\n <span>{{ libelles().lignesParPage }}</span>\n <select class=\"st-pagination__choix\" (change)=\"surTaille($event)\">\n @for (proposee of tailles(); track proposee) {\n <option [value]=\"proposee\" [selected]=\"proposee === taille()\">{{ proposee }}</option>\n }\n </select>\n </label>\n }\n</nav>\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:block}.st-pagination__navigation{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2) var(--st-espacement-3);align-items:center}.st-pagination__numero{font-variant-numeric:tabular-nums;font-weight:var(--st-graisse-semi)}.st-pagination__taille{display:inline-flex;gap:var(--st-espacement-2);align-items:center;margin-inline-start:auto}.st-pagination__choix:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-pagination__choix{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-commande-hauteur, var(--st-cible-tactile-min));padding:var(--st-espacement-2) var(--st-espacement-3);font:inherit;color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}.st-pagination__choix[aria-invalid=true]{border-color:var(--st-couleur-danger);box-shadow:inset 0 0 0 1px var(--st-couleur-danger)}.st-pagination__choix:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface-enfoncee)}.st-pagination__choix:read-only:not(:disabled){background:var(--st-couleur-surface-enfoncee)}.st-pagination__choix{inline-size:auto}\n"] }]
|
|
3970
|
+
}], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], numero: [{ type: i0.Input, args: [{ isSignal: true, alias: "numero", required: false }] }], precedenteDisponible: [{ type: i0.Input, args: [{ isSignal: true, alias: "precedenteDisponible", required: false }] }], suivanteDisponible: [{ type: i0.Input, args: [{ isSignal: true, alias: "suivanteDisponible", required: false }] }], chargement: [{ type: i0.Input, args: [{ isSignal: true, alias: "chargement", required: false }] }], etiquette: [{ type: i0.Input, args: [{ isSignal: true, alias: "etiquette", required: false }] }], taillesDePage: [{ type: i0.Input, args: [{ isSignal: true, alias: "taillesDePage", required: false }] }], taille: [{ type: i0.Input, args: [{ isSignal: true, alias: "taille", required: false }] }, { type: i0.Output, args: ["tailleChange"] }], cible: [{ type: i0.Input, args: [{ isSignal: true, alias: "cible", required: false }] }], precedente: [{ type: i0.Output, args: ["precedente"] }], suivante: [{ type: i0.Output, args: ["suivante"] }] } });
|
|
3971
|
+
|
|
3972
|
+
/**
|
|
3973
|
+
* Valeur riche d'un element : montant, date, valeur masquee.
|
|
3974
|
+
*
|
|
3975
|
+
* ```html
|
|
3976
|
+
* <ng-template stDescription="iban" let-element>
|
|
3977
|
+
* <st-masked nature="iban" [valeur]="compte().iban" />
|
|
3978
|
+
* </ng-template>
|
|
3979
|
+
* ```
|
|
3980
|
+
*/
|
|
3981
|
+
class StDescription {
|
|
3982
|
+
cle = input.required({ ...(ngDevMode ? { debugName: "cle" } : /* istanbul ignore next */ {}), alias: 'stDescription' });
|
|
3983
|
+
gabarit = inject(TemplateRef);
|
|
3984
|
+
static ngTemplateContextGuard(_directive, _contexte) {
|
|
3985
|
+
return true;
|
|
3986
|
+
}
|
|
3987
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
3988
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: StDescription, isStandalone: true, selector: "ng-template[stDescription]", inputs: { cle: { classPropertyName: "cle", publicName: "stDescription", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
|
|
3989
|
+
}
|
|
3990
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StDescription, decorators: [{
|
|
3991
|
+
type: Directive,
|
|
3992
|
+
args: [{ selector: 'ng-template[stDescription]' }]
|
|
3993
|
+
}], propDecorators: { cle: [{ type: i0.Input, args: [{ isSignal: true, alias: "stDescription", required: true }] }] } });
|
|
3994
|
+
/**
|
|
3995
|
+
* Liste de descriptions : les proprietes d'un objet, sur une page de detail.
|
|
3996
|
+
*
|
|
3997
|
+
* ```html
|
|
3998
|
+
* <st-description-list [elements]="[
|
|
3999
|
+
* { terme: 'Reference', description: commande().reference },
|
|
4000
|
+
* { cle: 'montant', terme: 'Montant', description: null },
|
|
4001
|
+
* ]">
|
|
4002
|
+
* <ng-template stDescription="montant"><st-money [valeur]="commande().montant" /></ng-template>
|
|
4003
|
+
* </st-description-list>
|
|
4004
|
+
* ```
|
|
4005
|
+
*
|
|
4006
|
+
* ⚠️ **Un vrai `dl`, rendu par le composant.** Le lecteur d'ecran annonce « liste de
|
|
4007
|
+
* descriptions, 4 elements » et lit chaque terme avec sa valeur. Ecrits par
|
|
4008
|
+
* l'application et projetes, `dt` et `dd` echapperaient aux styles du composant,
|
|
4009
|
+
* et un `div` mal place rendrait la liste invalide.
|
|
4010
|
+
*
|
|
4011
|
+
* ⚠️ **Une valeur absente se dit** : « — » a l'ecran, « Non renseigne » au lecteur
|
|
4012
|
+
* d'ecran. Une cellule vide ne distingue pas « aucun » de « pas encore charge ».
|
|
4013
|
+
*
|
|
4014
|
+
* En colonnes quand la place le permet, empile en dessous : la largeur est celle
|
|
4015
|
+
* du CONTENEUR, pas de l'ecran — la meme liste dans une carte etroite s'empile
|
|
4016
|
+
* aussi sur un grand ecran (UX-18).
|
|
4017
|
+
*/
|
|
4018
|
+
class StDescriptionList {
|
|
4019
|
+
libelles = inject(ST_LIBELLES);
|
|
4020
|
+
elements = input.required(/* @ts-ignore */
|
|
4021
|
+
...(ngDevMode ? [{ debugName: "elements" }] : /* istanbul ignore next */ []));
|
|
4022
|
+
gabarits = contentChildren(StDescription, /* @ts-ignore */
|
|
4023
|
+
...(ngDevMode ? [{ debugName: "gabarits" }] : /* istanbul ignore next */ []));
|
|
4024
|
+
lignes = computed(() => {
|
|
4025
|
+
const gabarits = new Map(this.gabarits().map((gabarit) => [gabarit.cle(), gabarit.gabarit]));
|
|
4026
|
+
return this.elements().map((element) => ({
|
|
4027
|
+
element,
|
|
4028
|
+
gabarit: gabarits.get(element.cle ?? element.terme) ?? null,
|
|
4029
|
+
}));
|
|
4030
|
+
}, /* @ts-ignore */
|
|
4031
|
+
...(ngDevMode ? [{ debugName: "lignes" }] : /* istanbul ignore next */ []));
|
|
4032
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StDescriptionList, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4033
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StDescriptionList, isStandalone: true, selector: "st-description-list", inputs: { elements: { classPropertyName: "elements", publicName: "elements", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "st-description-list" }, queries: [{ propertyName: "gabarits", predicate: StDescription, isSignal: true }], ngImport: i0, template: "<dl class=\"st-description-list__liste\">\n @for (ligne of lignes(); track ligne.element.cle ?? ligne.element.terme) {\n <div class=\"st-description-list__groupe\">\n <dt class=\"st-description-list__terme\">{{ ligne.element.terme }}</dt>\n <dd class=\"st-description-list__valeur\">\n @if (ligne.gabarit; as gabarit) {\n <ng-container *ngTemplateOutlet=\"gabarit; context: { $implicit: ligne.element }\" />\n } @else if (ligne.element.description === null) {\n <span aria-hidden=\"true\">—</span>\n <span class=\"st-vh\">{{ libelles().nonRenseigne }}</span>\n } @else {\n {{ ligne.element.description }}\n }\n </dd>\n </div>\n }\n</dl>\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:block;container-type:inline-size}.st-description-list__liste{margin:0}.st-description-list__groupe{display:grid;gap:var(--st-espacement-1);padding-block:var(--st-espacement-2);border-block-end:1px solid var(--st-couleur-bordure)}.st-description-list__terme{font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte-discret)}.st-description-list__valeur{margin:0;overflow-wrap:anywhere}@container (min-width: 32rem){.st-description-list__groupe{grid-template-columns:minmax(10rem,1fr) 2fr;gap:var(--st-espacement-4)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4034
|
+
}
|
|
4035
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StDescriptionList, decorators: [{
|
|
4036
|
+
type: Component,
|
|
4037
|
+
args: [{ selector: 'st-description-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], host: { class: 'st-description-list' }, template: "<dl class=\"st-description-list__liste\">\n @for (ligne of lignes(); track ligne.element.cle ?? ligne.element.terme) {\n <div class=\"st-description-list__groupe\">\n <dt class=\"st-description-list__terme\">{{ ligne.element.terme }}</dt>\n <dd class=\"st-description-list__valeur\">\n @if (ligne.gabarit; as gabarit) {\n <ng-container *ngTemplateOutlet=\"gabarit; context: { $implicit: ligne.element }\" />\n } @else if (ligne.element.description === null) {\n <span aria-hidden=\"true\">—</span>\n <span class=\"st-vh\">{{ libelles().nonRenseigne }}</span>\n } @else {\n {{ ligne.element.description }}\n }\n </dd>\n </div>\n }\n</dl>\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:block;container-type:inline-size}.st-description-list__liste{margin:0}.st-description-list__groupe{display:grid;gap:var(--st-espacement-1);padding-block:var(--st-espacement-2);border-block-end:1px solid var(--st-couleur-bordure)}.st-description-list__terme{font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte-discret)}.st-description-list__valeur{margin:0;overflow-wrap:anywhere}@container (min-width: 32rem){.st-description-list__groupe{grid-template-columns:minmax(10rem,1fr) 2fr;gap:var(--st-espacement-4)}}\n"] }]
|
|
4038
|
+
}], propDecorators: { elements: [{ type: i0.Input, args: [{ isSignal: true, alias: "elements", required: true }] }], gabarits: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StDescription), { isSignal: true }] }] } });
|
|
4039
|
+
|
|
4040
|
+
/**
|
|
4041
|
+
* Rendu d'un element, type par `[stElementDeListeDe]` :
|
|
4042
|
+
*
|
|
4043
|
+
* ```html
|
|
4044
|
+
* <ng-template stElementDeListe [stElementDeListeDe]="expeditions()" let-expedition>
|
|
4045
|
+
* <a [routerLink]="['/expeditions', expedition.id]">{{ expedition.reference }}</a>
|
|
4046
|
+
* </ng-template>
|
|
4047
|
+
* ```
|
|
4048
|
+
*/
|
|
4049
|
+
class StElementDeListe {
|
|
4050
|
+
/** Sert seulement au typage du contexte ; nom de l'attribut, d'ou l'absence d'alias. */
|
|
4051
|
+
stElementDeListeDe = input(undefined, /* @ts-ignore */
|
|
4052
|
+
...(ngDevMode ? [{ debugName: "stElementDeListeDe" }] : /* istanbul ignore next */ []));
|
|
4053
|
+
gabarit = inject(TemplateRef);
|
|
4054
|
+
static ngTemplateContextGuard(_directive, _contexte) {
|
|
4055
|
+
return true;
|
|
4056
|
+
}
|
|
4057
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StElementDeListe, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
4058
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: StElementDeListe, isStandalone: true, selector: "ng-template[stElementDeListe]", inputs: { stElementDeListeDe: { classPropertyName: "stElementDeListeDe", publicName: "stElementDeListeDe", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
|
|
4059
|
+
}
|
|
4060
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StElementDeListe, decorators: [{
|
|
4061
|
+
type: Directive,
|
|
4062
|
+
args: [{ selector: 'ng-template[stElementDeListe]' }]
|
|
4063
|
+
}], propDecorators: { stElementDeListeDe: [{ type: i0.Input, args: [{ isSignal: true, alias: "stElementDeListeDe", required: false }] }] } });
|
|
4064
|
+
/**
|
|
4065
|
+
* Liste d'objets : expeditions, notifications, documents. La forme mobile d'un
|
|
4066
|
+
* tableau (UX-5).
|
|
4067
|
+
*
|
|
4068
|
+
* ```html
|
|
4069
|
+
* <st-list #liste etiquette="Mes expeditions" [elements]="expeditions()" cle="id">
|
|
4070
|
+
* <ng-template stElementDeListe [stElementDeListeDe]="expeditions()" let-expedition>…</ng-template>
|
|
4071
|
+
* </st-list>
|
|
4072
|
+
* <st-pagination mode="suite" [cible]="liste" … />
|
|
4073
|
+
* ```
|
|
4074
|
+
*
|
|
4075
|
+
* ⚠️ **Un lien DANS l'element, jamais un element cliquable** (UX-3) : le lien a un
|
|
4076
|
+
* nom, s'ouvre dans un onglet, et laisse les autres boutons de l'element
|
|
4077
|
+
* atteignables.
|
|
4078
|
+
*
|
|
4079
|
+
* ⚠️ **`focus()` va au premier element AJOUTE** depuis le dernier affichage : apres
|
|
4080
|
+
* « Afficher plus », la lecture reprend la ou la liste s'est allongee, et non en
|
|
4081
|
+
* tete. Apres un filtre, la liste raccourcit, et le focus va au premier element.
|
|
4082
|
+
*
|
|
4083
|
+
* `track` par la cle : un rafraichissement garde le focus sur le bon element.
|
|
4084
|
+
*/
|
|
4085
|
+
class StList {
|
|
4086
|
+
element = inject(ElementRef);
|
|
4087
|
+
elements = input.required(/* @ts-ignore */
|
|
4088
|
+
...(ngDevMode ? [{ debugName: "elements" }] : /* istanbul ignore next */ []));
|
|
4089
|
+
/** Propriete qui identifie un element. */
|
|
4090
|
+
cle = input.required(/* @ts-ignore */
|
|
4091
|
+
...(ngDevMode ? [{ debugName: "cle" }] : /* istanbul ignore next */ []));
|
|
4092
|
+
/** Nom de la liste, lu a l'entree. */
|
|
4093
|
+
etiquette = input(null, /* @ts-ignore */
|
|
4094
|
+
...(ngDevMode ? [{ debugName: "etiquette" }] : /* istanbul ignore next */ []));
|
|
4095
|
+
/** `ol` quand l'ordre a un sens : etapes, classement. */
|
|
4096
|
+
ordonnee = input(false, { ...(ngDevMode ? { debugName: "ordonnee" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
4097
|
+
/** Contenu en cours de remplacement : `aria-busy`. */
|
|
4098
|
+
chargement = input(false, { ...(ngDevMode ? { debugName: "chargement" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
4099
|
+
gabarit = contentChild(StElementDeListe, /* @ts-ignore */
|
|
4100
|
+
...(ngDevMode ? [{ debugName: "gabarit" }] : /* istanbul ignore next */ []));
|
|
4101
|
+
indiceDuPremierAjout = 0;
|
|
4102
|
+
lignes = computed(() => {
|
|
4103
|
+
const cle = this.cle();
|
|
4104
|
+
return this.elements().map((valeur, indice) => ({
|
|
4105
|
+
valeur,
|
|
4106
|
+
indice,
|
|
4107
|
+
identifiant: String(valeur[cle]),
|
|
4108
|
+
}));
|
|
4109
|
+
}, /* @ts-ignore */
|
|
4110
|
+
...(ngDevMode ? [{ debugName: "lignes" }] : /* istanbul ignore next */ []));
|
|
4111
|
+
constructor() {
|
|
4112
|
+
let longueur = 0;
|
|
4113
|
+
effect(() => {
|
|
4114
|
+
const nouvelle = this.elements().length;
|
|
4115
|
+
this.indiceDuPremierAjout = nouvelle > longueur && longueur > 0 ? longueur : 0;
|
|
4116
|
+
longueur = nouvelle;
|
|
4117
|
+
});
|
|
4118
|
+
}
|
|
4119
|
+
/** Focus sur le premier element ajoute, ou sur le premier. */
|
|
4120
|
+
focus(options) {
|
|
4121
|
+
const elements = this.element.nativeElement.querySelectorAll('.st-list__element');
|
|
4122
|
+
(elements[this.indiceDuPremierAjout] ?? elements[0])?.focus(options);
|
|
4123
|
+
}
|
|
4124
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StList, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4125
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StList, isStandalone: true, selector: "st-list", inputs: { elements: { classPropertyName: "elements", publicName: "elements", isSignal: true, isRequired: true, transformFunction: null }, cle: { classPropertyName: "cle", publicName: "cle", isSignal: true, isRequired: true, transformFunction: null }, etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: false, transformFunction: null }, ordonnee: { classPropertyName: "ordonnee", publicName: "ordonnee", isSignal: true, isRequired: false, transformFunction: null }, chargement: { classPropertyName: "chargement", publicName: "chargement", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "st-list" }, queries: [{ propertyName: "gabarit", first: true, predicate: StElementDeListe, descendants: true, isSignal: true }], ngImport: i0, template: "@if (ordonnee()) {\n <ol\n class=\"st-list__liste\"\n [attr.aria-label]=\"etiquette()\"\n [attr.aria-busy]=\"chargement() ? 'true' : null\"\n >\n <ng-container *ngTemplateOutlet=\"contenu\" />\n </ol>\n} @else {\n <ul\n class=\"st-list__liste\"\n [attr.aria-label]=\"etiquette()\"\n [attr.aria-busy]=\"chargement() ? 'true' : null\"\n >\n <ng-container *ngTemplateOutlet=\"contenu\" />\n </ul>\n}\n\n<ng-template #contenu>\n @for (ligne of lignes(); track ligne.identifiant) {\n <!-- tabindex -1 : cible du focus apres \u00AB Afficher plus \u00BB, hors tabulation. -->\n <li class=\"st-list__element\" tabindex=\"-1\">\n @if (gabarit(); as gabarit) {\n <ng-container\n *ngTemplateOutlet=\"\n gabarit.gabarit;\n context: { $implicit: ligne.valeur, indice: ligne.indice }\n \"\n />\n } @else {\n {{ ligne.valeur }}\n }\n </li>\n }\n</ng-template>\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:block}.st-list__liste{padding:0;margin:0;list-style:none}.st-list__liste[aria-busy=true]{cursor:progress}.st-list__element{padding-block:var(--st-espacement-3);border-block-end:1px solid var(--st-couleur-bordure)}.st-list__element:focus{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4126
|
+
}
|
|
4127
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StList, decorators: [{
|
|
4128
|
+
type: Component,
|
|
4129
|
+
args: [{ selector: 'st-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], host: { class: 'st-list' }, template: "@if (ordonnee()) {\n <ol\n class=\"st-list__liste\"\n [attr.aria-label]=\"etiquette()\"\n [attr.aria-busy]=\"chargement() ? 'true' : null\"\n >\n <ng-container *ngTemplateOutlet=\"contenu\" />\n </ol>\n} @else {\n <ul\n class=\"st-list__liste\"\n [attr.aria-label]=\"etiquette()\"\n [attr.aria-busy]=\"chargement() ? 'true' : null\"\n >\n <ng-container *ngTemplateOutlet=\"contenu\" />\n </ul>\n}\n\n<ng-template #contenu>\n @for (ligne of lignes(); track ligne.identifiant) {\n <!-- tabindex -1 : cible du focus apres \u00AB Afficher plus \u00BB, hors tabulation. -->\n <li class=\"st-list__element\" tabindex=\"-1\">\n @if (gabarit(); as gabarit) {\n <ng-container\n *ngTemplateOutlet=\"\n gabarit.gabarit;\n context: { $implicit: ligne.valeur, indice: ligne.indice }\n \"\n />\n } @else {\n {{ ligne.valeur }}\n }\n </li>\n }\n</ng-template>\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:block}.st-list__liste{padding:0;margin:0;list-style:none}.st-list__liste[aria-busy=true]{cursor:progress}.st-list__element{padding-block:var(--st-espacement-3);border-block-end:1px solid var(--st-couleur-bordure)}.st-list__element:focus{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}\n"] }]
|
|
4130
|
+
}], ctorParameters: () => [], propDecorators: { elements: [{ type: i0.Input, args: [{ isSignal: true, alias: "elements", required: true }] }], cle: [{ type: i0.Input, args: [{ isSignal: true, alias: "cle", required: true }] }], etiquette: [{ type: i0.Input, args: [{ isSignal: true, alias: "etiquette", required: false }] }], ordonnee: [{ type: i0.Input, args: [{ isSignal: true, alias: "ordonnee", required: false }] }], chargement: [{ type: i0.Input, args: [{ isSignal: true, alias: "chargement", required: false }] }], gabarit: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StElementDeListe), { isSignal: true }] }] } });
|
|
4131
|
+
|
|
4132
|
+
/**
|
|
4133
|
+
* Bouton de tri d'une colonne, pose DANS l'en-tete : `<th><button stSortHeader>`.
|
|
4134
|
+
*
|
|
4135
|
+
* ⚠️ **Le bouton, pas l'en-tete cliquable** : un `th` n'est ni focalisable ni
|
|
4136
|
+
* annonce comme actionnable. Et l'etat se porte par `aria-sort` sur le `th`, que
|
|
4137
|
+
* `st-data-table` pose sur la SEULE colonne triee (FE-3).
|
|
4138
|
+
*
|
|
4139
|
+
* ⚠️ **Ne trie rien.** Il dit l'intention ; c'est le serveur qui trie, et le
|
|
4140
|
+
* contrat actuel ne le fait pas (audit de la vague 4, V4-3). Trier la page
|
|
4141
|
+
* affichee ferait croire a un tri de toute la liste.
|
|
4142
|
+
*
|
|
4143
|
+
* Une colonne non triee montre deux chevrons, pour se signaler triable sans
|
|
4144
|
+
* attendre le survol ; l'icone est decorative, l'etat est lu par `aria-sort`.
|
|
4145
|
+
*/
|
|
4146
|
+
class StSortHeader {
|
|
4147
|
+
sens = input(null, /* @ts-ignore */
|
|
4148
|
+
...(ngDevMode ? [{ debugName: "sens" }] : /* istanbul ignore next */ []));
|
|
4149
|
+
icone = computed(() => {
|
|
4150
|
+
const sens = this.sens();
|
|
4151
|
+
if (sens === 'croissant')
|
|
4152
|
+
return 'chevron-haut';
|
|
4153
|
+
if (sens === 'decroissant')
|
|
4154
|
+
return 'chevron-bas';
|
|
4155
|
+
return 'tri';
|
|
4156
|
+
}, /* @ts-ignore */
|
|
4157
|
+
...(ngDevMode ? [{ debugName: "icone" }] : /* istanbul ignore next */ []));
|
|
4158
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSortHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4159
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StSortHeader, isStandalone: true, selector: "button[stSortHeader]", inputs: { sens: { classPropertyName: "sens", publicName: "sens", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, properties: { "attr.data-sens": "sens()" }, classAttribute: "st-sort-header" }, ngImport: i0, template: "<span class=\"st-sort-header__libelle\"><ng-content /></span>\n<st-icon class=\"st-sort-header__icone\" taille=\"sm\" [nom]=\"icone()\" />\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:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host{display:inline-flex;gap:var(--st-espacement-1);align-items:center;min-block-size:var(--st-cible-min);padding:0;font:inherit;font-weight:inherit;color:inherit;text-align:inherit;cursor:pointer;background:none;border:0}.st-sort-header__icone{flex:none;color:var(--st-couleur-texte-discret)}:host([data-sens]) .st-sort-header__icone{color:inherit}\n"], dependencies: [{ kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "taille", "ton", "etiquette"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4160
|
+
}
|
|
4161
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StSortHeader, decorators: [{
|
|
4162
|
+
type: Component,
|
|
4163
|
+
args: [{ selector: 'button[stSortHeader]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StIcon], host: {
|
|
4164
|
+
class: 'st-sort-header',
|
|
4165
|
+
type: 'button',
|
|
4166
|
+
'[attr.data-sens]': 'sens()',
|
|
4167
|
+
}, template: "<span class=\"st-sort-header__libelle\"><ng-content /></span>\n<st-icon class=\"st-sort-header__icone\" taille=\"sm\" [nom]=\"icone()\" />\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:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host{display:inline-flex;gap:var(--st-espacement-1);align-items:center;min-block-size:var(--st-cible-min);padding:0;font:inherit;font-weight:inherit;color:inherit;text-align:inherit;cursor:pointer;background:none;border:0}.st-sort-header__icone{flex:none;color:var(--st-couleur-texte-discret)}:host([data-sens]) .st-sort-header__icone{color:inherit}\n"] }]
|
|
4168
|
+
}], propDecorators: { sens: [{ type: i0.Input, args: [{ isSignal: true, alias: "sens", required: false }] }] } });
|
|
4169
|
+
|
|
4170
|
+
let compteur$3 = 0;
|
|
4171
|
+
/**
|
|
4172
|
+
* Rendu d'une cellule, type par `[stCelluleDe]` :
|
|
4173
|
+
*
|
|
4174
|
+
* ```html
|
|
4175
|
+
* <ng-template stCellule="montant" [stCelluleDe]="lignes()" let-ligne>
|
|
4176
|
+
* <st-money [valeur]="ligne.montant" />
|
|
4177
|
+
* </ng-template>
|
|
4178
|
+
* ```
|
|
4179
|
+
*/
|
|
4180
|
+
class StCellule {
|
|
4181
|
+
cle = input.required({ ...(ngDevMode ? { debugName: "cle" } : /* istanbul ignore next */ {}), alias: 'stCellule' });
|
|
4182
|
+
/** Sert seulement au typage du contexte ; nom de l'attribut, d'ou l'absence d'alias. */
|
|
4183
|
+
stCelluleDe = input(undefined, /* @ts-ignore */
|
|
4184
|
+
...(ngDevMode ? [{ debugName: "stCelluleDe" }] : /* istanbul ignore next */ []));
|
|
4185
|
+
gabarit = inject(TemplateRef);
|
|
4186
|
+
static ngTemplateContextGuard(_directive, _contexte) {
|
|
4187
|
+
return true;
|
|
4188
|
+
}
|
|
4189
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StCellule, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
4190
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: StCellule, isStandalone: true, selector: "ng-template[stCellule]", inputs: { cle: { classPropertyName: "cle", publicName: "stCellule", isSignal: true, isRequired: true, transformFunction: null }, stCelluleDe: { classPropertyName: "stCelluleDe", publicName: "stCelluleDe", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
|
|
4191
|
+
}
|
|
4192
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StCellule, decorators: [{
|
|
4193
|
+
type: Directive,
|
|
4194
|
+
args: [{ selector: 'ng-template[stCellule]' }]
|
|
4195
|
+
}], propDecorators: { cle: [{ type: i0.Input, args: [{ isSignal: true, alias: "stCellule", required: true }] }], stCelluleDe: [{ type: i0.Input, args: [{ isSignal: true, alias: "stCelluleDe", required: false }] }] } });
|
|
4196
|
+
/** Contenu du tableau vide : un `st-empty`, avec son action. */
|
|
4197
|
+
class StTableauVide {
|
|
4198
|
+
gabarit = inject(TemplateRef);
|
|
4199
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StTableauVide, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
4200
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: StTableauVide, isStandalone: true, selector: "ng-template[stTableauVide]", ngImport: i0 });
|
|
4201
|
+
}
|
|
4202
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StTableauVide, decorators: [{
|
|
4203
|
+
type: Directive,
|
|
4204
|
+
args: [{ selector: 'ng-template[stTableauVide]' }]
|
|
4205
|
+
}] });
|
|
4206
|
+
/** Lignes de squelette au premier chargement. */
|
|
4207
|
+
const LIGNES_DE_SQUELETTE = 5;
|
|
4208
|
+
/**
|
|
4209
|
+
* Tableau de donnees, sur un `<table>` NATIF.
|
|
4210
|
+
*
|
|
4211
|
+
* ```html
|
|
4212
|
+
* <st-data-table #tableau legende="Expeditions" [colonnes]="colonnes" [lignes]="lignes()"
|
|
4213
|
+
* cle="id" selectionnable [(selection)]="choisies" [chargement]="page.isLoading()">
|
|
4214
|
+
* <ng-template stCellule="reference" [stCelluleDe]="lignes()" let-ligne>
|
|
4215
|
+
* <a [routerLink]="['/expeditions', ligne.id]">{{ ligne.reference }}</a>
|
|
4216
|
+
* </ng-template>
|
|
4217
|
+
* <button stButton stActionsDeTableau (click)="exporter()">Exporter</button>
|
|
4218
|
+
* </st-data-table>
|
|
4219
|
+
* ```
|
|
4220
|
+
*
|
|
4221
|
+
* ⚠️ **Un tableau, pas une grille** (audit de la vague 4, V4-1). Le lecteur d'ecran
|
|
4222
|
+
* sait parcourir un `<table>` de cellule en cellule ; une grille ARIA remplacerait
|
|
4223
|
+
* ce parcours par les fleches, et rendrait les liens des cellules plus durs a
|
|
4224
|
+
* atteindre. Ni Material, ni `CdkTable` : pas de pair dans le tronc.
|
|
4225
|
+
*
|
|
4226
|
+
* - **Legende obligatoire** (UX-1), et une colonne d'en-tete de ligne — la premiere
|
|
4227
|
+
* par defaut — pour que chaque cellule se lise avec sa ligne (UX-2).
|
|
4228
|
+
* - **Zone de defilement nommee** : focalisable quand le tableau deborde (UX-6),
|
|
4229
|
+
* colonne figee sans masquer le focus (UX-7), en-tete fige seulement avec
|
|
4230
|
+
* `hauteurMax` (UX-8).
|
|
4231
|
+
* - **Selection de la PAGE, par cle** (V4-4) : elle ne garde que les lignes encore
|
|
4232
|
+
* affichees, et se vide donc au changement de page.
|
|
4233
|
+
* - **Tri PILOTE** : le tableau dit la demande et l'annonce, il ne reordonne
|
|
4234
|
+
* jamais les lignes (V4-3).
|
|
4235
|
+
* - **Chargement** : squelette au premier, lignes gardees et `aria-busy` ensuite
|
|
4236
|
+
* (UX-11).
|
|
4237
|
+
* - Export, actions de masse : zone `stActionsDeTableau`, et le SERVEUR fait le
|
|
4238
|
+
* travail (V4-5, SEC-4, SEC-5).
|
|
4239
|
+
*/
|
|
4240
|
+
class StDataTable {
|
|
4241
|
+
libelles = inject(ST_LIBELLES);
|
|
4242
|
+
legende = input.required(/* @ts-ignore */
|
|
4243
|
+
...(ngDevMode ? [{ debugName: "legende" }] : /* istanbul ignore next */ []));
|
|
4244
|
+
/** Lue mais non affichee, quand un titre visible nomme deja le tableau. */
|
|
4245
|
+
legendeMasquee = input(false, { ...(ngDevMode ? { debugName: "legendeMasquee" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
4246
|
+
colonnes = input.required(/* @ts-ignore */
|
|
4247
|
+
...(ngDevMode ? [{ debugName: "colonnes" }] : /* istanbul ignore next */ []));
|
|
4248
|
+
lignes = input.required(/* @ts-ignore */
|
|
4249
|
+
...(ngDevMode ? [{ debugName: "lignes" }] : /* istanbul ignore next */ []));
|
|
4250
|
+
/** Propriete qui identifie une ligne. Jamais l'indice (FE-1). */
|
|
4251
|
+
cle = input.required(/* @ts-ignore */
|
|
4252
|
+
...(ngDevMode ? [{ debugName: "cle" }] : /* istanbul ignore next */ []));
|
|
4253
|
+
/** Colonne lue comme en-tete de chaque ligne. Par defaut : la premiere. */
|
|
4254
|
+
enTeteDeLigne = input(null, /* @ts-ignore */
|
|
4255
|
+
...(ngDevMode ? [{ debugName: "enTeteDeLigne" }] : /* istanbul ignore next */ []));
|
|
4256
|
+
premiereColonneFigee = input(false, { ...(ngDevMode ? { debugName: "premiereColonneFigee" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
4257
|
+
/** Hauteur maximale, `32rem` : l'en-tete se fige, le corps defile. */
|
|
4258
|
+
hauteurMax = input(null, /* @ts-ignore */
|
|
4259
|
+
...(ngDevMode ? [{ debugName: "hauteurMax" }] : /* istanbul ignore next */ []));
|
|
4260
|
+
densite = input('confortable', /* @ts-ignore */
|
|
4261
|
+
...(ngDevMode ? [{ debugName: "densite" }] : /* istanbul ignore next */ []));
|
|
4262
|
+
chargement = input(false, { ...(ngDevMode ? { debugName: "chargement" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
4263
|
+
selectionnable = input(false, { ...(ngDevMode ? { debugName: "selectionnable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
4264
|
+
selection = model([], /* @ts-ignore */
|
|
4265
|
+
...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
|
|
4266
|
+
tri = model(null, /* @ts-ignore */
|
|
4267
|
+
...(ngDevMode ? [{ debugName: "tri" }] : /* istanbul ignore next */ []));
|
|
4268
|
+
/** Texte du tableau vide, sans gabarit `stTableauVide`. */
|
|
4269
|
+
texteVide = input(null, /* @ts-ignore */
|
|
4270
|
+
...(ngDevMode ? [{ debugName: "texteVide" }] : /* istanbul ignore next */ []));
|
|
4271
|
+
gabarits = contentChildren(StCellule, /* @ts-ignore */
|
|
4272
|
+
...(ngDevMode ? [{ debugName: "gabarits" }] : /* istanbul ignore next */ []));
|
|
4273
|
+
gabaritVide = contentChild(StTableauVide, /* @ts-ignore */
|
|
4274
|
+
...(ngDevMode ? [{ debugName: "gabaritVide" }] : /* istanbul ignore next */ []));
|
|
4275
|
+
zone = viewChild.required('zone', /* @ts-ignore */
|
|
4276
|
+
...(ngDevMode ? [{ debugName: "zone" }] : /* istanbul ignore next */ []));
|
|
4277
|
+
annonce = new AnnonceLocale(inject(DestroyRef));
|
|
4278
|
+
deborde = signal(false, /* @ts-ignore */
|
|
4279
|
+
...(ngDevMode ? [{ debugName: "deborde" }] : /* istanbul ignore next */ []));
|
|
4280
|
+
largeurFigee = signal(0, /* @ts-ignore */
|
|
4281
|
+
...(ngDevMode ? [{ debugName: "largeurFigee" }] : /* istanbul ignore next */ []));
|
|
4282
|
+
identifiants = (() => {
|
|
4283
|
+
const base = `st-tableau-${(compteur$3 += 1).toString()}`;
|
|
4284
|
+
return { legende: `${base}-legende`, selection: `${base}-selection` };
|
|
4285
|
+
})();
|
|
4286
|
+
cleDEnTete = computed(() => this.enTeteDeLigne() ?? this.colonnes()[0]?.cle ?? '', /* @ts-ignore */
|
|
4287
|
+
...(ngDevMode ? [{ debugName: "cleDEnTete" }] : /* istanbul ignore next */ []));
|
|
4288
|
+
cellules = computed(() => {
|
|
4289
|
+
const gabarits = new Map(this.gabarits().map((gabarit) => [gabarit.cle(), gabarit.gabarit]));
|
|
4290
|
+
return this.colonnes().map((colonne) => ({
|
|
4291
|
+
colonne,
|
|
4292
|
+
gabarit: gabarits.get(colonne.cle) ?? null,
|
|
4293
|
+
enTete: colonne.cle === this.cleDEnTete(),
|
|
4294
|
+
}));
|
|
4295
|
+
}, /* @ts-ignore */
|
|
4296
|
+
...(ngDevMode ? [{ debugName: "cellules" }] : /* istanbul ignore next */ []));
|
|
4297
|
+
rangees = computed(() => {
|
|
4298
|
+
const cle = this.cle();
|
|
4299
|
+
const entete = this.cleDEnTete();
|
|
4300
|
+
const choisies = new Set(this.selection());
|
|
4301
|
+
return this.lignes().map((valeur) => {
|
|
4302
|
+
const identifiant = String(valeur[cle]);
|
|
4303
|
+
return {
|
|
4304
|
+
valeur,
|
|
4305
|
+
identifiant,
|
|
4306
|
+
nom: texteDe(valeur[entete]),
|
|
4307
|
+
choisie: choisies.has(identifiant),
|
|
4308
|
+
};
|
|
4309
|
+
});
|
|
4310
|
+
}, /* @ts-ignore */
|
|
4311
|
+
...(ngDevMode ? [{ debugName: "rangees" }] : /* istanbul ignore next */ []));
|
|
4312
|
+
squelette = computed(() => this.chargement() && this.lignes().length === 0
|
|
4313
|
+
? Array.from({ length: LIGNES_DE_SQUELETTE }, (_, indice) => indice)
|
|
4314
|
+
: [], /* @ts-ignore */
|
|
4315
|
+
...(ngDevMode ? [{ debugName: "squelette" }] : /* istanbul ignore next */ []));
|
|
4316
|
+
nombreDeColonnes = computed(() => this.colonnes().length + (this.selectionnable() ? 1 : 0), /* @ts-ignore */
|
|
4317
|
+
...(ngDevMode ? [{ debugName: "nombreDeColonnes" }] : /* istanbul ignore next */ []));
|
|
4318
|
+
colonnesDeSquelette = computed(() => Array.from({ length: this.nombreDeColonnes() }, (_, indice) => indice), /* @ts-ignore */
|
|
4319
|
+
...(ngDevMode ? [{ debugName: "colonnesDeSquelette" }] : /* istanbul ignore next */ []));
|
|
4320
|
+
toutesChoisies = computed(() => {
|
|
4321
|
+
const rangees = this.rangees();
|
|
4322
|
+
return rangees.length > 0 && rangees.every((rangee) => rangee.choisie);
|
|
4323
|
+
}, /* @ts-ignore */
|
|
4324
|
+
...(ngDevMode ? [{ debugName: "toutesChoisies" }] : /* istanbul ignore next */ []));
|
|
4325
|
+
quelquesChoisies = computed(() => !this.toutesChoisies() && this.rangees().some((rangee) => rangee.choisie), /* @ts-ignore */
|
|
4326
|
+
...(ngDevMode ? [{ debugName: "quelquesChoisies" }] : /* istanbul ignore next */ []));
|
|
4327
|
+
constructor() {
|
|
4328
|
+
// V4-4 : une selection ne vise que ce qui est affiche. Nouvelle page, nouvelles
|
|
4329
|
+
// cles : les anciennes tombent.
|
|
4330
|
+
effect(() => {
|
|
4331
|
+
const presentes = new Set(this.rangees().map((rangee) => rangee.identifiant));
|
|
4332
|
+
const selection = this.selection();
|
|
4333
|
+
const gardees = selection.filter((identifiant) => presentes.has(identifiant));
|
|
4334
|
+
if (gardees.length !== selection.length)
|
|
4335
|
+
this.selection.set(gardees);
|
|
4336
|
+
});
|
|
4337
|
+
// Mesures du rendu, jamais sur le serveur (FE-5).
|
|
4338
|
+
const destruction = inject(DestroyRef);
|
|
4339
|
+
afterNextRender(() => {
|
|
4340
|
+
const zone = this.zone().nativeElement;
|
|
4341
|
+
if (typeof ResizeObserver === 'undefined')
|
|
4342
|
+
return;
|
|
4343
|
+
const observateur = new ResizeObserver(() => {
|
|
4344
|
+
this.deborde.set(zone.scrollWidth > zone.clientWidth + 1 || zone.scrollHeight > zone.clientHeight + 1);
|
|
4345
|
+
// UX-7 : la largeur des colonnes figees devient la marge de defilement,
|
|
4346
|
+
// pour que la cellule focalisee s'arrete A COTE d'elles et non dessous.
|
|
4347
|
+
const figees = zone.querySelectorAll('tr:first-child > [data-figee]');
|
|
4348
|
+
let largeur = 0;
|
|
4349
|
+
figees.forEach((cellule) => (largeur += cellule.getBoundingClientRect().width));
|
|
4350
|
+
this.largeurFigee.set(Math.ceil(largeur));
|
|
4351
|
+
});
|
|
4352
|
+
observateur.observe(zone);
|
|
4353
|
+
const tableau = zone.querySelector('table');
|
|
4354
|
+
if (tableau !== null)
|
|
4355
|
+
observateur.observe(tableau);
|
|
4356
|
+
destruction.onDestroy(() => {
|
|
4357
|
+
observateur.disconnect();
|
|
4358
|
+
});
|
|
4359
|
+
});
|
|
4360
|
+
}
|
|
4361
|
+
/** Amene le focus sur le tableau : sa legende est lue (UX-13). */
|
|
4362
|
+
focus(options) {
|
|
4363
|
+
this.zone().nativeElement.focus(options);
|
|
4364
|
+
}
|
|
4365
|
+
sensDe(colonne) {
|
|
4366
|
+
const tri = this.tri();
|
|
4367
|
+
return tri?.cle === colonne.cle ? tri.sens : null;
|
|
4368
|
+
}
|
|
4369
|
+
ariaSort(colonne) {
|
|
4370
|
+
const sens = this.sensDe(colonne);
|
|
4371
|
+
if (sens === null)
|
|
4372
|
+
return null;
|
|
4373
|
+
return sens === 'croissant' ? 'ascending' : 'descending';
|
|
4374
|
+
}
|
|
4375
|
+
trier(colonne) {
|
|
4376
|
+
const sens = this.sensDe(colonne) === 'croissant' ? 'decroissant' : 'croissant';
|
|
4377
|
+
this.tri.set({ cle: colonne.cle, sens });
|
|
4378
|
+
const libelles = this.libelles();
|
|
4379
|
+
this.annonce.annoncer(sens === 'croissant'
|
|
4380
|
+
? libelles.trieCroissant(colonne.libelle)
|
|
4381
|
+
: libelles.trieDecroissant(colonne.libelle));
|
|
4382
|
+
}
|
|
4383
|
+
basculerTout() {
|
|
4384
|
+
this.selection.set(this.toutesChoisies() ? [] : this.rangees().map((rangee) => rangee.identifiant));
|
|
4385
|
+
}
|
|
4386
|
+
basculer(identifiant) {
|
|
4387
|
+
const selection = this.selection();
|
|
4388
|
+
this.selection.set(selection.includes(identifiant)
|
|
4389
|
+
? selection.filter((choisie) => choisie !== identifiant)
|
|
4390
|
+
: [...selection, identifiant]);
|
|
4391
|
+
}
|
|
4392
|
+
texteDe(ligne, colonne) {
|
|
4393
|
+
return texteDe(ligne[colonne.cle]);
|
|
4394
|
+
}
|
|
4395
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StDataTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4396
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StDataTable, isStandalone: true, selector: "st-data-table", inputs: { legende: { classPropertyName: "legende", publicName: "legende", isSignal: true, isRequired: true, transformFunction: null }, legendeMasquee: { classPropertyName: "legendeMasquee", publicName: "legendeMasquee", isSignal: true, isRequired: false, transformFunction: null }, colonnes: { classPropertyName: "colonnes", publicName: "colonnes", isSignal: true, isRequired: true, transformFunction: null }, lignes: { classPropertyName: "lignes", publicName: "lignes", isSignal: true, isRequired: true, transformFunction: null }, cle: { classPropertyName: "cle", publicName: "cle", isSignal: true, isRequired: true, transformFunction: null }, enTeteDeLigne: { classPropertyName: "enTeteDeLigne", publicName: "enTeteDeLigne", isSignal: true, isRequired: false, transformFunction: null }, premiereColonneFigee: { classPropertyName: "premiereColonneFigee", publicName: "premiereColonneFigee", isSignal: true, isRequired: false, transformFunction: null }, hauteurMax: { classPropertyName: "hauteurMax", publicName: "hauteurMax", isSignal: true, isRequired: false, transformFunction: null }, densite: { classPropertyName: "densite", publicName: "densite", isSignal: true, isRequired: false, transformFunction: null }, chargement: { classPropertyName: "chargement", publicName: "chargement", isSignal: true, isRequired: false, transformFunction: null }, selectionnable: { classPropertyName: "selectionnable", publicName: "selectionnable", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, tri: { classPropertyName: "tri", publicName: "tri", isSignal: true, isRequired: false, transformFunction: null }, texteVide: { classPropertyName: "texteVide", publicName: "texteVide", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", tri: "triChange" }, host: { properties: { "attr.data-densite": "densite()", "attr.data-figee": "premiereColonneFigee() ? \"\" : null" }, classAttribute: "st-data-table" }, queries: [{ propertyName: "gabarits", predicate: StCellule, isSignal: true }, { propertyName: "gabaritVide", first: true, predicate: StTableauVide, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "zone", first: true, predicate: ["zone"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- UN seul ng-content : la projection se decide a la compilation, et un second\n emplacement de meme selecteur, dans une autre branche, ne recevrait jamais\n rien. -->\n<div class=\"st-data-table__barre\">\n @if (selectionnable()) {\n <p class=\"st-data-table__selection\" role=\"status\" [id]=\"identifiants.selection\">\n {{ selection().length > 0 ? libelles().lignesSelectionnees(selection().length) : '' }}\n </p>\n }\n <div class=\"st-data-table__actions\">\n <ng-content select=\"[stActionsDeTableau]\" />\n </div>\n</div>\n\n<!-- UX-6 : zone nommee par la legende ; focalisable quand elle deborde, et par\n programme toujours, pour recevoir le focus apres un changement de page. -->\n<div\n #zone\n class=\"st-data-table__zone\"\n role=\"region\"\n [attr.aria-labelledby]=\"identifiants.legende\"\n [attr.tabindex]=\"deborde() ? 0 : -1\"\n [attr.data-deborde]=\"deborde() ? '' : null\"\n [style.max-block-size]=\"hauteurMax()\"\n [style.scroll-padding-inline-start.px]=\"largeurFigee()\"\n>\n <table class=\"st-data-table__tableau\" [attr.aria-busy]=\"chargement() ? 'true' : null\">\n <caption\n class=\"st-data-table__legende\"\n [id]=\"identifiants.legende\"\n [class.st-vh]=\"legendeMasquee()\"\n >\n {{\n legende()\n }}\n </caption>\n <thead>\n <tr>\n @if (selectionnable()) {\n <th class=\"st-data-table__case\" scope=\"col\" data-figee>\n <input\n class=\"st-data-table__cocher\"\n type=\"checkbox\"\n [checked]=\"toutesChoisies()\"\n [indeterminate]=\"quelquesChoisies()\"\n [disabled]=\"rangees().length === 0\"\n [attr.aria-label]=\"libelles().selectionnerLaPage(rangees().length)\"\n (change)=\"basculerTout()\"\n />\n </th>\n }\n @for (cellule of cellules(); track cellule.colonne.cle; let premiere = $first) {\n <th\n scope=\"col\"\n [attr.data-alignement]=\"cellule.colonne.alignement ?? 'debut'\"\n [attr.data-figee]=\"premiere && premiereColonneFigee() ? '' : null\"\n [attr.aria-sort]=\"ariaSort(cellule.colonne)\"\n >\n @if (cellule.colonne.triable) {\n <button\n stSortHeader\n type=\"button\"\n [sens]=\"sensDe(cellule.colonne)\"\n (click)=\"trier(cellule.colonne)\"\n >\n {{ cellule.colonne.libelle }}\n </button>\n } @else if (cellule.colonne.libelleMasque) {\n <span class=\"st-vh\">{{ cellule.colonne.libelle }}</span>\n } @else {\n {{ cellule.colonne.libelle }}\n }\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (rang of squelette(); track rang) {\n <tr class=\"st-data-table__squelette\" aria-hidden=\"true\">\n @for (colonne of colonnesDeSquelette(); track colonne) {\n <td><span class=\"st-data-table__barre-de-squelette\"></span></td>\n }\n </tr>\n }\n @for (rangee of rangees(); track rangee.identifiant) {\n <tr [attr.data-choisie]=\"rangee.choisie ? '' : null\">\n @if (selectionnable()) {\n <td class=\"st-data-table__case\" data-figee>\n <input\n class=\"st-data-table__cocher\"\n type=\"checkbox\"\n [checked]=\"rangee.choisie\"\n [attr.aria-label]=\"libelles().selectionnerLaLigne(rangee.nom ?? rangee.identifiant)\"\n (change)=\"basculer(rangee.identifiant)\"\n />\n </td>\n }\n @for (cellule of cellules(); track cellule.colonne.cle; let premiere = $first) {\n @if (cellule.enTete) {\n <th\n scope=\"row\"\n [attr.data-alignement]=\"cellule.colonne.alignement ?? 'debut'\"\n [attr.data-figee]=\"premiere && premiereColonneFigee() ? '' : null\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n valeur;\n context: { $implicit: rangee.valeur, cellule: cellule }\n \"\n />\n </th>\n } @else {\n <td\n [attr.data-alignement]=\"cellule.colonne.alignement ?? 'debut'\"\n [attr.data-figee]=\"premiere && premiereColonneFigee() ? '' : null\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n valeur;\n context: { $implicit: rangee.valeur, cellule: cellule }\n \"\n />\n </td>\n }\n }\n </tr>\n } @empty {\n @if (!chargement()) {\n <tr>\n <td class=\"st-data-table__vide\" [attr.colspan]=\"nombreDeColonnes()\">\n @if (gabaritVide(); as vide) {\n <ng-container *ngTemplateOutlet=\"vide.gabarit\" />\n } @else {\n {{ texteVide() ?? libelles().tableauVide }}\n }\n </td>\n </tr>\n }\n }\n </tbody>\n </table>\n</div>\n<span class=\"st-vh\" aria-live=\"polite\">{{ annonce.texte() }}</span>\n\n<ng-template #valeur let-ligne let-cellule=\"cellule\">\n @if (cellule.gabarit; as gabarit) {\n <ng-container\n *ngTemplateOutlet=\"gabarit; context: { $implicit: ligne, colonne: cellule.colonne }\"\n />\n } @else if (texteDe(ligne, cellule.colonne); as texte) {\n {{ texte }}\n } @else {\n <span aria-hidden=\"true\">—</span><span class=\"st-vh\">{{ libelles().nonRenseigne }}</span>\n }\n</ng-template>\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{--st-tableau-plan-figee: 1;--st-tableau-plan-entete: 2;--st-tableau-plan-coin: 3;display:block}.st-data-table__barre,.st-data-table__actions{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);align-items:center}.st-data-table__barre{justify-content:space-between}.st-data-table__barre:has(.st-data-table__selection,.st-data-table__actions:not(:empty)){min-block-size:var(--st-cible-tactile-min);margin-block-end:var(--st-espacement-2)}.st-data-table__actions{margin-inline-start:auto}.st-data-table__actions:empty{display:none}.st-data-table__selection{margin:0;font-weight:var(--st-graisse-semi)}.st-data-table__zone:focus{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-data-table__zone{position:relative;overflow:auto;border:1px solid var(--st-couleur-bordure);border-radius:var(--st-rayon-md);background:linear-gradient(to right,var(--st-couleur-surface) 30%,transparent) left/2rem 100% no-repeat local,linear-gradient(to left,var(--st-couleur-surface) 30%,transparent) right/2rem 100% no-repeat local,radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.2),transparent) left/.75rem 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.2),transparent) right/.75rem 100% no-repeat scroll,var(--st-couleur-surface)}.st-data-table__tableau{inline-size:100%;font-variant-numeric:tabular-nums;border-collapse:separate;border-spacing:0}.st-data-table__legende{padding:var(--st-espacement-3);font-weight:var(--st-graisse-semi);text-align:start}th,td{padding-block:var(--st-tableau-cellule-bloc, var(--st-espacement-3));padding-inline:var(--st-tableau-cellule-ligne, var(--st-espacement-3));text-align:start;vertical-align:top;overflow-wrap:anywhere;border-block-end:1px solid var(--st-couleur-bordure)}thead th{font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte-discret);white-space:nowrap;background:var(--st-couleur-surface-enfoncee)}thead th{position:sticky;inset-block-start:0;z-index:var(--st-tableau-plan-entete)}tbody th{font-weight:var(--st-graisse-semi)}tbody tr:last-child>*{border-block-end:0}tbody tr:hover>*{background:var(--st-couleur-surface-survol)}tbody tr[data-choisie]>*{background:var(--st-couleur-primaire-discret)}tbody tr[data-choisie]>:first-child{box-shadow:inset 3px 0 0 var(--st-couleur-primaire)}:host-context([dir=rtl]) tbody tr[data-choisie]>:first-child{box-shadow:inset -3px 0 0 var(--st-couleur-primaire)}[data-alignement=fin]{text-align:end}.st-data-table__case{inline-size:var(--st-tableau-largeur-case, 3rem);min-inline-size:var(--st-tableau-largeur-case, 3rem);text-align:center;vertical-align:middle}:host([data-densite=compacte]) th,:host([data-densite=compacte]) td{padding-block:var(--st-tableau-cellule-bloc, var(--st-espacement-1));padding-inline:var(--st-tableau-cellule-ligne, var(--st-espacement-2))}.st-data-table__cocher:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-data-table__cocher{inline-size:var(--st-cible-min);block-size:var(--st-cible-min);margin:0;accent-color:var(--st-couleur-primaire);cursor:pointer}:host([data-figee]) [data-figee]{position:sticky;inset-inline-start:0;z-index:var(--st-tableau-plan-figee);background:var(--st-couleur-surface)}:host([data-figee]) .st-data-table__case+[data-figee]{inset-inline-start:var(--st-tableau-largeur-case, 3rem)}:host([data-figee]) thead [data-figee]{z-index:var(--st-tableau-plan-coin);background:var(--st-couleur-surface-enfoncee)}.st-data-table__vide{padding:var(--st-espacement-5);color:var(--st-couleur-texte-discret);text-align:center}.st-data-table__barre-de-squelette{display:block;block-size:1em;background:var(--st-couleur-surface-enfoncee);border-radius:var(--st-rayon-sm)}@media(prefers-reduced-motion:no-preference){.st-data-table__barre-de-squelette{animation:st-tableau-pulsation var(--st-anim-respiration, 1.6s) ease-in-out infinite}}@keyframes st-tableau-pulsation{50%{opacity:.5}}.st-data-table__tableau[aria-busy=true]{cursor:progress}@media(forced-colors:active){tbody tr[data-choisie]>:first-child{box-shadow:none;border-inline-start:3px solid Highlight}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StSortHeader, selector: "button[stSortHeader]", inputs: ["sens"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4397
|
+
}
|
|
4398
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StDataTable, decorators: [{
|
|
4399
|
+
type: Component,
|
|
4400
|
+
args: [{ selector: 'st-data-table', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, StSortHeader], host: {
|
|
4401
|
+
class: 'st-data-table',
|
|
4402
|
+
'[attr.data-densite]': 'densite()',
|
|
4403
|
+
'[attr.data-figee]': 'premiereColonneFigee() ? "" : null',
|
|
4404
|
+
}, template: "<!-- UN seul ng-content : la projection se decide a la compilation, et un second\n emplacement de meme selecteur, dans une autre branche, ne recevrait jamais\n rien. -->\n<div class=\"st-data-table__barre\">\n @if (selectionnable()) {\n <p class=\"st-data-table__selection\" role=\"status\" [id]=\"identifiants.selection\">\n {{ selection().length > 0 ? libelles().lignesSelectionnees(selection().length) : '' }}\n </p>\n }\n <div class=\"st-data-table__actions\">\n <ng-content select=\"[stActionsDeTableau]\" />\n </div>\n</div>\n\n<!-- UX-6 : zone nommee par la legende ; focalisable quand elle deborde, et par\n programme toujours, pour recevoir le focus apres un changement de page. -->\n<div\n #zone\n class=\"st-data-table__zone\"\n role=\"region\"\n [attr.aria-labelledby]=\"identifiants.legende\"\n [attr.tabindex]=\"deborde() ? 0 : -1\"\n [attr.data-deborde]=\"deborde() ? '' : null\"\n [style.max-block-size]=\"hauteurMax()\"\n [style.scroll-padding-inline-start.px]=\"largeurFigee()\"\n>\n <table class=\"st-data-table__tableau\" [attr.aria-busy]=\"chargement() ? 'true' : null\">\n <caption\n class=\"st-data-table__legende\"\n [id]=\"identifiants.legende\"\n [class.st-vh]=\"legendeMasquee()\"\n >\n {{\n legende()\n }}\n </caption>\n <thead>\n <tr>\n @if (selectionnable()) {\n <th class=\"st-data-table__case\" scope=\"col\" data-figee>\n <input\n class=\"st-data-table__cocher\"\n type=\"checkbox\"\n [checked]=\"toutesChoisies()\"\n [indeterminate]=\"quelquesChoisies()\"\n [disabled]=\"rangees().length === 0\"\n [attr.aria-label]=\"libelles().selectionnerLaPage(rangees().length)\"\n (change)=\"basculerTout()\"\n />\n </th>\n }\n @for (cellule of cellules(); track cellule.colonne.cle; let premiere = $first) {\n <th\n scope=\"col\"\n [attr.data-alignement]=\"cellule.colonne.alignement ?? 'debut'\"\n [attr.data-figee]=\"premiere && premiereColonneFigee() ? '' : null\"\n [attr.aria-sort]=\"ariaSort(cellule.colonne)\"\n >\n @if (cellule.colonne.triable) {\n <button\n stSortHeader\n type=\"button\"\n [sens]=\"sensDe(cellule.colonne)\"\n (click)=\"trier(cellule.colonne)\"\n >\n {{ cellule.colonne.libelle }}\n </button>\n } @else if (cellule.colonne.libelleMasque) {\n <span class=\"st-vh\">{{ cellule.colonne.libelle }}</span>\n } @else {\n {{ cellule.colonne.libelle }}\n }\n </th>\n }\n </tr>\n </thead>\n <tbody>\n @for (rang of squelette(); track rang) {\n <tr class=\"st-data-table__squelette\" aria-hidden=\"true\">\n @for (colonne of colonnesDeSquelette(); track colonne) {\n <td><span class=\"st-data-table__barre-de-squelette\"></span></td>\n }\n </tr>\n }\n @for (rangee of rangees(); track rangee.identifiant) {\n <tr [attr.data-choisie]=\"rangee.choisie ? '' : null\">\n @if (selectionnable()) {\n <td class=\"st-data-table__case\" data-figee>\n <input\n class=\"st-data-table__cocher\"\n type=\"checkbox\"\n [checked]=\"rangee.choisie\"\n [attr.aria-label]=\"libelles().selectionnerLaLigne(rangee.nom ?? rangee.identifiant)\"\n (change)=\"basculer(rangee.identifiant)\"\n />\n </td>\n }\n @for (cellule of cellules(); track cellule.colonne.cle; let premiere = $first) {\n @if (cellule.enTete) {\n <th\n scope=\"row\"\n [attr.data-alignement]=\"cellule.colonne.alignement ?? 'debut'\"\n [attr.data-figee]=\"premiere && premiereColonneFigee() ? '' : null\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n valeur;\n context: { $implicit: rangee.valeur, cellule: cellule }\n \"\n />\n </th>\n } @else {\n <td\n [attr.data-alignement]=\"cellule.colonne.alignement ?? 'debut'\"\n [attr.data-figee]=\"premiere && premiereColonneFigee() ? '' : null\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n valeur;\n context: { $implicit: rangee.valeur, cellule: cellule }\n \"\n />\n </td>\n }\n }\n </tr>\n } @empty {\n @if (!chargement()) {\n <tr>\n <td class=\"st-data-table__vide\" [attr.colspan]=\"nombreDeColonnes()\">\n @if (gabaritVide(); as vide) {\n <ng-container *ngTemplateOutlet=\"vide.gabarit\" />\n } @else {\n {{ texteVide() ?? libelles().tableauVide }}\n }\n </td>\n </tr>\n }\n }\n </tbody>\n </table>\n</div>\n<span class=\"st-vh\" aria-live=\"polite\">{{ annonce.texte() }}</span>\n\n<ng-template #valeur let-ligne let-cellule=\"cellule\">\n @if (cellule.gabarit; as gabarit) {\n <ng-container\n *ngTemplateOutlet=\"gabarit; context: { $implicit: ligne, colonne: cellule.colonne }\"\n />\n } @else if (texteDe(ligne, cellule.colonne); as texte) {\n {{ texte }}\n } @else {\n <span aria-hidden=\"true\">—</span><span class=\"st-vh\">{{ libelles().nonRenseigne }}</span>\n }\n</ng-template>\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{--st-tableau-plan-figee: 1;--st-tableau-plan-entete: 2;--st-tableau-plan-coin: 3;display:block}.st-data-table__barre,.st-data-table__actions{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);align-items:center}.st-data-table__barre{justify-content:space-between}.st-data-table__barre:has(.st-data-table__selection,.st-data-table__actions:not(:empty)){min-block-size:var(--st-cible-tactile-min);margin-block-end:var(--st-espacement-2)}.st-data-table__actions{margin-inline-start:auto}.st-data-table__actions:empty{display:none}.st-data-table__selection{margin:0;font-weight:var(--st-graisse-semi)}.st-data-table__zone:focus{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-data-table__zone{position:relative;overflow:auto;border:1px solid var(--st-couleur-bordure);border-radius:var(--st-rayon-md);background:linear-gradient(to right,var(--st-couleur-surface) 30%,transparent) left/2rem 100% no-repeat local,linear-gradient(to left,var(--st-couleur-surface) 30%,transparent) right/2rem 100% no-repeat local,radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.2),transparent) left/.75rem 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.2),transparent) right/.75rem 100% no-repeat scroll,var(--st-couleur-surface)}.st-data-table__tableau{inline-size:100%;font-variant-numeric:tabular-nums;border-collapse:separate;border-spacing:0}.st-data-table__legende{padding:var(--st-espacement-3);font-weight:var(--st-graisse-semi);text-align:start}th,td{padding-block:var(--st-tableau-cellule-bloc, var(--st-espacement-3));padding-inline:var(--st-tableau-cellule-ligne, var(--st-espacement-3));text-align:start;vertical-align:top;overflow-wrap:anywhere;border-block-end:1px solid var(--st-couleur-bordure)}thead th{font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte-discret);white-space:nowrap;background:var(--st-couleur-surface-enfoncee)}thead th{position:sticky;inset-block-start:0;z-index:var(--st-tableau-plan-entete)}tbody th{font-weight:var(--st-graisse-semi)}tbody tr:last-child>*{border-block-end:0}tbody tr:hover>*{background:var(--st-couleur-surface-survol)}tbody tr[data-choisie]>*{background:var(--st-couleur-primaire-discret)}tbody tr[data-choisie]>:first-child{box-shadow:inset 3px 0 0 var(--st-couleur-primaire)}:host-context([dir=rtl]) tbody tr[data-choisie]>:first-child{box-shadow:inset -3px 0 0 var(--st-couleur-primaire)}[data-alignement=fin]{text-align:end}.st-data-table__case{inline-size:var(--st-tableau-largeur-case, 3rem);min-inline-size:var(--st-tableau-largeur-case, 3rem);text-align:center;vertical-align:middle}:host([data-densite=compacte]) th,:host([data-densite=compacte]) td{padding-block:var(--st-tableau-cellule-bloc, var(--st-espacement-1));padding-inline:var(--st-tableau-cellule-ligne, var(--st-espacement-2))}.st-data-table__cocher:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-data-table__cocher{inline-size:var(--st-cible-min);block-size:var(--st-cible-min);margin:0;accent-color:var(--st-couleur-primaire);cursor:pointer}:host([data-figee]) [data-figee]{position:sticky;inset-inline-start:0;z-index:var(--st-tableau-plan-figee);background:var(--st-couleur-surface)}:host([data-figee]) .st-data-table__case+[data-figee]{inset-inline-start:var(--st-tableau-largeur-case, 3rem)}:host([data-figee]) thead [data-figee]{z-index:var(--st-tableau-plan-coin);background:var(--st-couleur-surface-enfoncee)}.st-data-table__vide{padding:var(--st-espacement-5);color:var(--st-couleur-texte-discret);text-align:center}.st-data-table__barre-de-squelette{display:block;block-size:1em;background:var(--st-couleur-surface-enfoncee);border-radius:var(--st-rayon-sm)}@media(prefers-reduced-motion:no-preference){.st-data-table__barre-de-squelette{animation:st-tableau-pulsation var(--st-anim-respiration, 1.6s) ease-in-out infinite}}@keyframes st-tableau-pulsation{50%{opacity:.5}}.st-data-table__tableau[aria-busy=true]{cursor:progress}@media(forced-colors:active){tbody tr[data-choisie]>:first-child{box-shadow:none;border-inline-start:3px solid Highlight}}\n"] }]
|
|
4405
|
+
}], ctorParameters: () => [], propDecorators: { legende: [{ type: i0.Input, args: [{ isSignal: true, alias: "legende", required: true }] }], legendeMasquee: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendeMasquee", required: false }] }], colonnes: [{ type: i0.Input, args: [{ isSignal: true, alias: "colonnes", required: true }] }], lignes: [{ type: i0.Input, args: [{ isSignal: true, alias: "lignes", required: true }] }], cle: [{ type: i0.Input, args: [{ isSignal: true, alias: "cle", required: true }] }], enTeteDeLigne: [{ type: i0.Input, args: [{ isSignal: true, alias: "enTeteDeLigne", required: false }] }], premiereColonneFigee: [{ type: i0.Input, args: [{ isSignal: true, alias: "premiereColonneFigee", required: false }] }], hauteurMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "hauteurMax", required: false }] }], densite: [{ type: i0.Input, args: [{ isSignal: true, alias: "densite", required: false }] }], chargement: [{ type: i0.Input, args: [{ isSignal: true, alias: "chargement", required: false }] }], selectionnable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionnable", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], tri: [{ type: i0.Input, args: [{ isSignal: true, alias: "tri", required: false }] }, { type: i0.Output, args: ["triChange"] }], texteVide: [{ type: i0.Input, args: [{ isSignal: true, alias: "texteVide", required: false }] }], gabarits: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StCellule), { isSignal: true }] }], gabaritVide: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StTableauVide), { isSignal: true }] }], zone: [{ type: i0.ViewChild, args: ['zone', { isSignal: true }] }] } });
|
|
4406
|
+
/** Texte d'une valeur ; `null` quand elle est absente, pour le dire (UX de la vague 4). */
|
|
4407
|
+
function texteDe(valeur) {
|
|
4408
|
+
if (valeur === null || valeur === undefined || valeur === '')
|
|
4409
|
+
return null;
|
|
4410
|
+
if (typeof valeur === 'string')
|
|
4411
|
+
return valeur;
|
|
4412
|
+
if (typeof valeur === 'number' || typeof valeur === 'boolean' || typeof valeur === 'bigint') {
|
|
4413
|
+
return String(valeur);
|
|
4414
|
+
}
|
|
4415
|
+
return null;
|
|
4416
|
+
}
|
|
4417
|
+
|
|
4418
|
+
/**
|
|
4419
|
+
* Filtre actif, retirable : « Statut : Expediee ✕ ».
|
|
4420
|
+
*
|
|
4421
|
+
* ```html
|
|
4422
|
+
* <button stFilterChip libelle="Statut : Expediee" (click)="retirer('statut')"></button>
|
|
4423
|
+
* ```
|
|
4424
|
+
*
|
|
4425
|
+
* ⚠️ **Toute la puce est le bouton**, et son nom CONTIENT le texte visible —
|
|
4426
|
+
* « Retirer le filtre Statut : Expediee » (WCAG 2.5.3) : une commande vocale
|
|
4427
|
+
* « cliquer Statut » l'atteint. Une croix seule, a cote d'un texte inerte, serait
|
|
4428
|
+
* une cible de quelques pixels sans nom.
|
|
4429
|
+
*/
|
|
4430
|
+
class StFilterChip {
|
|
4431
|
+
libelles = inject(ST_LIBELLES);
|
|
4432
|
+
libelle = input.required(/* @ts-ignore */
|
|
4433
|
+
...(ngDevMode ? [{ debugName: "libelle" }] : /* istanbul ignore next */ []));
|
|
4434
|
+
nom = computed(() => this.libelles().retirerLeFiltre(this.libelle()), /* @ts-ignore */
|
|
4435
|
+
...(ngDevMode ? [{ debugName: "nom" }] : /* istanbul ignore next */ []));
|
|
4436
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StFilterChip, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4437
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: StFilterChip, isStandalone: true, selector: "button[stFilterChip]", inputs: { libelle: { classPropertyName: "libelle", publicName: "libelle", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "type": "button" }, properties: { "attr.aria-label": "nom()" }, classAttribute: "st-filter-chip" }, ngImport: i0, template: "<span class=\"st-filter-chip__libelle\">{{ libelle() }}</span>\n<st-icon class=\"st-filter-chip__croix\" nom=\"croix\" taille=\"sm\" />\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:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host{display:inline-flex;gap:var(--st-espacement-1);align-items:center;min-block-size:calc(var(--st-cible-min) + var(--st-espacement-2));padding-block:var(--st-espacement-1);padding-inline:var(--st-espacement-3) var(--st-espacement-2);font:inherit;color:var(--st-couleur-texte);cursor:pointer;background:var(--st-couleur-surface-enfoncee);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-pleine)}:host:hover{background:var(--st-couleur-surface-survol)}.st-filter-chip__croix{flex:none}\n"], dependencies: [{ kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "taille", "ton", "etiquette"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4438
|
+
}
|
|
4439
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StFilterChip, decorators: [{
|
|
4440
|
+
type: Component,
|
|
4441
|
+
args: [{ selector: 'button[stFilterChip]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StIcon], host: {
|
|
4442
|
+
class: 'st-filter-chip',
|
|
4443
|
+
type: 'button',
|
|
4444
|
+
'[attr.aria-label]': 'nom()',
|
|
4445
|
+
}, template: "<span class=\"st-filter-chip__libelle\">{{ libelle() }}</span>\n<st-icon class=\"st-filter-chip__croix\" nom=\"croix\" taille=\"sm\" />\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:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}:host{display:inline-flex;gap:var(--st-espacement-1);align-items:center;min-block-size:calc(var(--st-cible-min) + var(--st-espacement-2));padding-block:var(--st-espacement-1);padding-inline:var(--st-espacement-3) var(--st-espacement-2);font:inherit;color:var(--st-couleur-texte);cursor:pointer;background:var(--st-couleur-surface-enfoncee);border:1px solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-pleine)}:host:hover{background:var(--st-couleur-surface-survol)}.st-filter-chip__croix{flex:none}\n"] }]
|
|
4446
|
+
}], propDecorators: { libelle: [{ type: i0.Input, args: [{ isSignal: true, alias: "libelle", required: true }] }] } });
|
|
4447
|
+
|
|
4448
|
+
let compteur$2 = 0;
|
|
4449
|
+
/**
|
|
4450
|
+
* Barre de filtres : les champs, puis les filtres en vigueur, retirables.
|
|
4451
|
+
*
|
|
4452
|
+
* ```html
|
|
4453
|
+
* <st-filter-bar [filtresActifs]="actifs()" (retrait)="retirer($event)" (effacement)="effacer()">
|
|
4454
|
+
* <st-select libelle="Statut" [options]="statuts" [(value)]="statut" />
|
|
4455
|
+
* </st-filter-bar>
|
|
4456
|
+
* ```
|
|
4457
|
+
*
|
|
4458
|
+
* Un formulaire NOMME : repere « Filtres » dans la liste des reperes du lecteur
|
|
4459
|
+
* d'ecran. Pas un repere `search` : un `st-search-field` pose dedans en porte deja
|
|
4460
|
+
* un, et deux reperes imbriques se liraient en double.
|
|
4461
|
+
*
|
|
4462
|
+
* ⚠️ **Les filtres s'appliquent au changement**, par l'application : Entree dans
|
|
4463
|
+
* un champ n'envoie rien, et ne recharge pas la page.
|
|
4464
|
+
*
|
|
4465
|
+
* ⚠️ **Retirer un filtre rend le focus a la puce suivante**, sinon a la
|
|
4466
|
+
* precedente, sinon au formulaire ; « Effacer les filtres » le rend au formulaire
|
|
4467
|
+
* (UX-14). Le focus ne tombe jamais sur le document, et le retrait s'annonce.
|
|
4468
|
+
*
|
|
4469
|
+
* ⚠️ **Dans l'adresse, des valeurs d'enumeration seulement** (SEC-2) : un texte
|
|
4470
|
+
* cherche, un nom, un IBAN n'y vont pas. Le composant ne touche pas a l'adresse ;
|
|
4471
|
+
* la regle est pour l'application qui le ferait.
|
|
4472
|
+
*/
|
|
4473
|
+
class StFilterBar {
|
|
4474
|
+
libelles = inject(ST_LIBELLES);
|
|
4475
|
+
element = inject(ElementRef);
|
|
4476
|
+
injecteur = inject(Injector);
|
|
4477
|
+
/** Nom du formulaire. Par defaut : « Filtres ». */
|
|
4478
|
+
etiquette = input(null, /* @ts-ignore */
|
|
4479
|
+
...(ngDevMode ? [{ debugName: "etiquette" }] : /* istanbul ignore next */ []));
|
|
4480
|
+
filtresActifs = input([], /* @ts-ignore */
|
|
4481
|
+
...(ngDevMode ? [{ debugName: "filtresActifs" }] : /* istanbul ignore next */ []));
|
|
4482
|
+
retrait = output();
|
|
4483
|
+
effacement = output();
|
|
4484
|
+
annonce = new AnnonceLocale(inject(DestroyRef));
|
|
4485
|
+
identifiantActifs = `st-filtres-${(compteur$2 += 1).toString()}-actifs`;
|
|
4486
|
+
etiquetteLue = computed(() => this.etiquette() ?? this.libelles().filtres, /* @ts-ignore */
|
|
4487
|
+
...(ngDevMode ? [{ debugName: "etiquetteLue" }] : /* istanbul ignore next */ []));
|
|
4488
|
+
retirer(filtre, indice) {
|
|
4489
|
+
this.retrait.emit(filtre.cle);
|
|
4490
|
+
this.annonce.annoncer(this.libelles().filtreRetire(filtre.libelle));
|
|
4491
|
+
this.apresLeRendu(() => {
|
|
4492
|
+
const puces = this.element.nativeElement.querySelectorAll('.st-filter-chip');
|
|
4493
|
+
return puces[Math.min(indice, puces.length - 1)] ?? null;
|
|
4494
|
+
});
|
|
4495
|
+
}
|
|
4496
|
+
effacer() {
|
|
4497
|
+
this.effacement.emit();
|
|
4498
|
+
this.annonce.annoncer(this.libelles().filtresEffaces);
|
|
4499
|
+
this.apresLeRendu(() => null);
|
|
4500
|
+
}
|
|
4501
|
+
apresLeRendu(cible) {
|
|
4502
|
+
afterNextRender(() => {
|
|
4503
|
+
const formulaire = this.element.nativeElement.querySelector('form');
|
|
4504
|
+
(cible() ?? formulaire)?.focus();
|
|
4505
|
+
}, { injector: this.injecteur });
|
|
4506
|
+
}
|
|
4507
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StFilterBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4508
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StFilterBar, isStandalone: true, selector: "st-filter-bar", inputs: { etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: false, transformFunction: null }, filtresActifs: { classPropertyName: "filtresActifs", publicName: "filtresActifs", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { retrait: "retrait", effacement: "effacement" }, host: { classAttribute: "st-filter-bar" }, ngImport: i0, template: "<!-- tabindex -1 : cible du focus quand la derniere puce disparait. -->\n<form\n class=\"st-filter-bar__formulaire\"\n tabindex=\"-1\"\n [attr.aria-label]=\"etiquetteLue()\"\n (submit)=\"$event.preventDefault()\"\n>\n <div class=\"st-filter-bar__champs\">\n <ng-content />\n </div>\n\n @if (filtresActifs().length > 0) {\n <div class=\"st-filter-bar__actifs\">\n <p class=\"st-filter-bar__titre\" [id]=\"identifiantActifs\">{{ libelles().filtresActifs }}</p>\n <ul class=\"st-filter-bar__puces\" [attr.aria-labelledby]=\"identifiantActifs\">\n @for (filtre of filtresActifs(); track filtre.cle; let indice = $index) {\n <li>\n <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n Le contenu vient du gabarit de stFilterChip, et le libelle est requis. -->\n <button\n stFilterChip\n type=\"button\"\n [libelle]=\"filtre.libelle\"\n (click)=\"retirer(filtre, indice)\"\n ></button>\n </li>\n }\n </ul>\n <button stButton type=\"button\" variante=\"discret\" (click)=\"effacer()\">\n {{ libelles().effacerLesFiltres }}\n </button>\n </div>\n }\n</form>\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:block}.st-filter-bar__formulaire:focus{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-filter-bar__formulaire{display:grid;gap:var(--st-espacement-3)}.st-filter-bar__champs{display:flex;flex-wrap:wrap;gap:var(--st-espacement-3) var(--st-espacement-4);align-items:flex-end}.st-filter-bar__actifs{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);align-items:center}.st-filter-bar__titre{margin:0;font-weight:var(--st-graisse-semi)}.st-filter-bar__puces{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);padding:0;margin:0;list-style:none}\n"], dependencies: [{ kind: "component", type: StButton, selector: "button[stButton]", inputs: ["variante", "taille", "pleineLargeur", "iconeAvant", "iconeApres", "chargement", "indisponible"] }, { kind: "component", type: StFilterChip, selector: "button[stFilterChip]", inputs: ["libelle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4509
|
+
}
|
|
4510
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StFilterBar, decorators: [{
|
|
4511
|
+
type: Component,
|
|
4512
|
+
args: [{ selector: 'st-filter-bar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StButton, StFilterChip], host: { class: 'st-filter-bar' }, template: "<!-- tabindex -1 : cible du focus quand la derniere puce disparait. -->\n<form\n class=\"st-filter-bar__formulaire\"\n tabindex=\"-1\"\n [attr.aria-label]=\"etiquetteLue()\"\n (submit)=\"$event.preventDefault()\"\n>\n <div class=\"st-filter-bar__champs\">\n <ng-content />\n </div>\n\n @if (filtresActifs().length > 0) {\n <div class=\"st-filter-bar__actifs\">\n <p class=\"st-filter-bar__titre\" [id]=\"identifiantActifs\">{{ libelles().filtresActifs }}</p>\n <ul class=\"st-filter-bar__puces\" [attr.aria-labelledby]=\"identifiantActifs\">\n @for (filtre of filtresActifs(); track filtre.cle; let indice = $index) {\n <li>\n <!-- eslint-disable-next-line @angular-eslint/template/elements-content --\n Le contenu vient du gabarit de stFilterChip, et le libelle est requis. -->\n <button\n stFilterChip\n type=\"button\"\n [libelle]=\"filtre.libelle\"\n (click)=\"retirer(filtre, indice)\"\n ></button>\n </li>\n }\n </ul>\n <button stButton type=\"button\" variante=\"discret\" (click)=\"effacer()\">\n {{ libelles().effacerLesFiltres }}\n </button>\n </div>\n }\n</form>\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:block}.st-filter-bar__formulaire:focus{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:2px}.st-filter-bar__formulaire{display:grid;gap:var(--st-espacement-3)}.st-filter-bar__champs{display:flex;flex-wrap:wrap;gap:var(--st-espacement-3) var(--st-espacement-4);align-items:flex-end}.st-filter-bar__actifs{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);align-items:center}.st-filter-bar__titre{margin:0;font-weight:var(--st-graisse-semi)}.st-filter-bar__puces{display:flex;flex-wrap:wrap;gap:var(--st-espacement-2);padding:0;margin:0;list-style:none}\n"] }]
|
|
4513
|
+
}], propDecorators: { etiquette: [{ type: i0.Input, args: [{ isSignal: true, alias: "etiquette", required: false }] }], filtresActifs: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtresActifs", required: false }] }], retrait: [{ type: i0.Output, args: ["retrait"] }], effacement: [{ type: i0.Output, args: ["effacement"] }] } });
|
|
3783
4514
|
|
|
3784
4515
|
let compteur$1 = 0;
|
|
3785
4516
|
/**
|
|
@@ -4418,5 +5149,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
|
|
|
4418
5149
|
* Generated bundle index. Do not edit.
|
|
4419
5150
|
*/
|
|
4420
5151
|
|
|
4421
|
-
export { AnnonceLocale, CHEMIN_DU_SPRITE, ContratDeChamp, ControleDeSaisie, FUSEAU_PAR_DEFAUT, GABARITS_D_ETAT, IDENTIFIANT_DU_CONTENU_PRINCIPAL, LIBELLES_EN, LIBELLES_FR, NOMS_DICONE, REGION_VIVANTE_PARENTE, ST_LIBELLES, ST_LOCALE, StAppShell, StAvatar, StBadge, StBanner, StBreadcrumb, StButton, StButtonGroup, StCalendar, StCard, StChargement, StCheckbox, StCode, StControleDeChamp, StCopyButton, StCount, StDate, StDivider, StEmpty, StErreur, StError, StErrorSummary, StFieldset, StFileUpload, StFormField, StHeader, StHeading, StHorsLigne, StIbanField, StIcon, StIconButton, StInlineMessage, StInput, StLangSwitch, StLink, StLogo, StMasked, StMoney, StOfflineBanner, StOtpField, StPageTitle, StPasswordField, StPhoneField, StProgress, StRadioGroup, StRelativeTime, StSearchField, StSection, StSelect, StSkeleton, StSkipLink, StSpinner, StState, StStatusPill, StSucces, StSwitch, StTag, StText, StTextarea, StThemeToggle, StTimer, StVide, copierDansLePressePapiers, erreurDate, erreurIban, erreurPlageDeDates, erreurTelephone, erreursDeFichiers, exempleDeDate, filtrerOptions, formaterDuree, fournirCheminDuSprite, fusionnerErreurs, messageDErreur, motifLocal, normaliserPourRecherche, pressePapiersDisponible, provideStarterUi };
|
|
5152
|
+
export { AnnonceLocale, CHEMIN_DU_SPRITE, ContratDeChamp, ControleDeSaisie, FUSEAU_PAR_DEFAUT, GABARITS_D_ETAT, IDENTIFIANT_DU_CONTENU_PRINCIPAL, LIBELLES_EN, LIBELLES_FR, NOMS_DICONE, REGION_VIVANTE_PARENTE, ST_LIBELLES, ST_LOCALE, StAppShell, StAvatar, StBadge, StBanner, StBreadcrumb, StButton, StButtonGroup, StCalendar, StCard, StCellule, StChargement, StCheckbox, StCode, StControleDeChamp, StCopyButton, StCount, StDataTable, StDate, StDescription, StDescriptionList, StDivider, StElementDeListe, StEmpty, StErreur, StError, StErrorSummary, StFieldset, StFileUpload, StFilterBar, StFilterChip, StFormField, StHeader, StHeading, StHorsLigne, StIbanField, StIcon, StIconButton, StInlineMessage, StInput, StLangSwitch, StLink, StList, StLogo, StMasked, StMoney, StOfflineBanner, StOtpField, StPageTitle, StPagination, StPasswordField, StPhoneField, StProgress, StRadioGroup, StRelativeTime, StSearchField, StSection, StSelect, StSkeleton, StSkipLink, StSortHeader, StSpinner, StState, StStatusPill, StSucces, StSwitch, StTableauVide, StTag, StText, StTextarea, StThemeToggle, StTimer, StVide, cleDeFichier, copierDansLePressePapiers, erreurDate, erreurIban, erreurPlageDeDates, erreurTelephone, erreursDeFichiers, exempleDeDate, filtrerOptions, formaterDuree, fournirCheminDuSprite, fusionnerErreurs, messageDErreur, motifLocal, normaliserPourRecherche, pressePapiersDisponible, provideStarterUi };
|
|
4422
5153
|
//# sourceMappingURL=starterlib-ui.mjs.map
|