@starterlib/ui 0.11.0 → 0.11.1
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 +3 -1
- package/assets/icones/catalogue.json +1 -1
- package/fesm2022/starterlib-ui-libelles-en.mjs +1 -0
- package/fesm2022/starterlib-ui-libelles-en.mjs.map +1 -1
- package/fesm2022/starterlib-ui-navigation.mjs +2 -1
- package/fesm2022/starterlib-ui-navigation.mjs.map +1 -1
- package/fesm2022/starterlib-ui-parcours.mjs +1 -0
- package/fesm2022/starterlib-ui-parcours.mjs.map +1 -1
- package/fesm2022/starterlib-ui-saisie.mjs +96 -17
- package/fesm2022/starterlib-ui-saisie.mjs.map +1 -1
- package/fesm2022/starterlib-ui.mjs +143 -35
- package/fesm2022/starterlib-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/amorce.css +304 -2
- package/types/starterlib-ui-saisie.d.ts +56 -4
- package/types/starterlib-ui.d.ts +121 -10
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ADRESSE_VIDE, CODES_DES_PAYS, adresseEstVide, ajouterJours, ajouterMois, bornerDate, codePostalValide, decimalesDe, estDateIso, estHeureIso, exempleDHeure, exempleDeMois, formatDAdresse, formaterDateLongue, formaterDateSaisie, formaterHeureSaisie, formaterIban, formaterMontant, formaterNombre, formaterTaille, ibanEstValide, jourDeLaSemaine, listeDesPays, masquerIban, montant, motifDHeure, motifDeDate, motifDuMois, nomAffichable, nomDuPays, normaliserCodeDePays, normaliserCodePostal, normaliserIban, normaliserTelephone, partiesAffichees, partiesExigees, premierJourDeLaSemaine, regionReconnue, semainesDuMois, typeDeFichierAccepte } from "@starterlib/util/valeurs";
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DOCUMENT, DestroyRef, Directive, ElementRef, Injectable, InjectionToken, Injector, afterEveryRender, afterNextRender, afterRenderEffect, booleanAttribute, computed, contentChild, contentChildren, effect, inject, input, isDevMode, linkedSignal, model, numberAttribute, output, resource, signal, untracked, viewChild, viewChildren } from "@angular/core";
|
|
4
|
-
import { AnnonceLocale, FUSEAU_PAR_DEFAUT, ST_LIBELLES, ST_LISTES_D_ADRESSES, ST_LOCALE, StButton, StIcon, StIconButton, StIdentifiants, StInlineMessage, StProgress, StSpinner, affichageDiffere } from "@starterlib/ui";
|
|
4
|
+
import { AnnonceLocale, FUSEAU_PAR_DEFAUT, ST_LIBELLES, ST_LISTES_D_ADRESSES, ST_LOCALE, ST_MARQUE_D_OBLIGATION, StButton, StIcon, StIconButton, StIdentifiants, StInlineMessage, StProgress, StSpinner, affichageDiffere } from "@starterlib/ui";
|
|
5
5
|
import { delai, tenue } from "@starterlib/tokens";
|
|
6
6
|
import { DOCUMENT as DOCUMENT$1 } from "@angular/common";
|
|
7
7
|
import { sansCommandesDeDirection, texteDUneLigne } from "@starterlib/util";
|
|
@@ -831,6 +831,7 @@ var PorteurDErreurs = class PorteurDErreurs {
|
|
|
831
831
|
});
|
|
832
832
|
}
|
|
833
833
|
libelleObligatoire = computed(() => this.libelles().obligatoire, ...ngDevMode ? [{ debugName: "libelleObligatoire" }] : /* istanbul ignore next */ []);
|
|
834
|
+
asterisque = inject(ST_MARQUE_D_OBLIGATION) === "asterisque";
|
|
834
835
|
aideRendue = computed(() => texteRendu(this.aide()), ...ngDevMode ? [{ debugName: "aideRendue" }] : /* istanbul ignore next */ []);
|
|
835
836
|
messages = computed(() => {
|
|
836
837
|
if (!this.afficherErreurs()) return [];
|
|
@@ -1127,8 +1128,8 @@ var StFormField = class StFormField extends PorteurDErreurs {
|
|
|
1127
1128
|
],
|
|
1128
1129
|
usesInheritance: true,
|
|
1129
1130
|
ngImport: i0,
|
|
1130
|
-
template: "<!-- Une grille interieure : l'hote peut ainsi etre le conteneur de requete de `en-ligne`. -->\n<div class=\"st-form-field__grille\">\n <!-- En-tete : l'etiquette (et sa mention), la meta projetee a droite. -->\n <div class=\"st-form-field__entete\">\n <!-- Exception de eslint.config.mjs (clic sans clavier sur l'etiquette) :\n Le clic sur une etiquette est une commodite de souris, comme pour tout\n champ natif : au clavier, le controle se rejoint par tabulation, et\n l'etiquette n'a pas a recevoir le focus. -->\n <label\n class=\"st-form-field__libelle\"\n [class.st-vh]=\"libelleMasque()\"\n [id]=\"identifiants.libelle\"\n [for]=\"identifiants.controle\"\n [attr.data-libelle]=\"libelle()\"\n (click)=\"focaliserLeControle()\"\n >\n <!-- Libelle riche (lot 218) : un [stLibelle] projete (un lien vers les conditions generales)\n prend la place du texte ; sans lui, le libelle. Releve au rendu : relaye par un champ du\n socle, le contenu echappe aux requetes, et une fente relayee vide compterait comme remplie.\n Aucun blanc autour du texte : la largeur minimale de l'etiquette est mesuree. -->\n <span class=\"st-form-field__texte\"\n ><span #libelleRiche class=\"st-form-field__libelle-riche\"\n ><ng-content select=\"[stLibelle]\" /></span\n >{{ libelleRichePresent() ? '' : libelle() }}
|
|
1131
|
-
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;min-inline-size:0}.st-form-field__grille{display:flex;flex-direction:column;gap:var(--st-espacement-1-5);min-inline-size:0}.st-form-field__entete{display:flex;align-items:center;justify-content:space-between}.st-form-field__libelle{font-size:var(--st-taille-sm);line-height:var(--st-interligne-sm);font-weight:var(--st-graisse-moyenne);letter-spacing:var(--st-interlettrage-normal);display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;justify-content:space-between;min-inline-size:0;color:var(--st-couleur-texte-discret)}.st-form-field__aide-contextuelle{display:inline-flex;flex:none;margin-block:calc((var(--st-interligne-sm) - var(--st-hauteur-commande-sm)) / 2)}.st-form-field__aide-contextuelle:empty{display:none}.st-form-field__entete:has(>.st-form-field__aide-contextuelle:not(:empty)){gap:var(--st-espacement-1);justify-content:flex-start}.st-form-field__entete:has(>.st-form-field__aide-contextuelle:not(:empty)) .st-form-field__libelle{flex-grow:0}.st-form-field__entete:has(>.st-form-field__aide-contextuelle:not(:empty)) .st-form-field__meta{margin-inline-start:auto}.st-form-field__texte{flex:1 1 min-content;min-inline-size:0;overflow-wrap:break-word}:host([data-presentation=micro-capitales]:not([data-disposition=case],[data-disposition=reglage])) .st-form-field__grille{gap:var(--st-espacement-1)}:host([data-presentation=micro-capitales]:not([data-disposition=case],[data-disposition=reglage])) .st-form-field__libelle{font-size:var(--st-taille-2xs);line-height:var(--st-interligne-2xs);font-weight:var(--st-graisse-semi);letter-spacing:var(--st-interlettrage-capitales);text-transform:uppercase;color:var(--st-couleur-texte-discret)}.st-form-field__obligatoire{font-size:var(--st-taille-xs);font-weight:var(--st-graisse-moyenne);line-height:var(--st-interligne-xs);color:var(--st-couleur-texte-attenue)}.st-form-field__meta{font-size:var(--st-taille-xs);line-height:var(--st-interligne-xs);color:var(--st-couleur-texte-discret)}.st-form-field__meta:empty{display:none}:host(:focus-within) .st-form-field__libelle{font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte-primaire)}:host([data-en-erreur]) .st-form-field__libelle{font-weight:var(--st-graisse-semi);color:var(--st-couleur-erreur)}:host([data-en-erreur]) .st-form-field__obligatoire{color:var(--st-couleur-erreur)}.st-form-field__aide,.st-form-field__complement{margin:0;font-size:var(--st-taille-xs);line-height:var(--st-interligne-xs);color:var(--st-couleur-texte-discret)}.st-form-field__complement{font-variant-numeric:var(--st-chiffres-alignes)}.st-form-field__erreurs{display:flex;flex-direction:column;gap:var(--st-espacement-1);padding-block:var(--st-espacement-1);font-size:var(--st-taille-xs);font-weight:var(--st-graisse-semi);line-height:var(--st-interligne-xs);color:var(--st-couleur-erreur)}.st-form-field__erreurs>st-inline-message{align-items:center;font-weight:inherit}.st-form-field__erreurs ::ng-deep .st-inline-message__icone,.st-form-field__indication ::ng-deep .st-inline-message__icone{align-items:flex-start}.st-form-field__indication{display:flex;align-items:center;min-block-size:calc(var(--st-interligne-xs) + var(--st-espacement-1-5));font-size:var(--st-taille-xs);line-height:var(--st-interligne-xs)}.st-form-field__indication:empty,.st-form-field__indication[hidden]{display:none}.st-form-field__indication ::ng-deep>st-inline-message{gap:var(--st-espacement-1);align-items:center}.st-form-field__controle{position:relative;min-inline-size:0}.st-form-field__lisere{position:absolute;inset-block:0;inset-inline-start:calc(-1 * var(--st-espacement-3));inline-size:var(--st-epaisseur-forte);background-color:var(--st-couleur-erreur);border-radius:var(--st-rayon-pleine)}@media(forced-colors:active){.st-form-field__lisere{forced-color-adjust:none;background-color:CanvasText}}:host([data-disposition=case]) .st-form-field__grille,:host([data-disposition=reglage]) .st-form-field__grille{position:relative;justify-content:center;gap:0;min-block-size:var(--st-cible-min)}:host([data-disposition=case]) .st-form-field__entete,:host([data-disposition=reglage]) .st-form-field__entete{order:1}:host([data-disposition=case]) .st-form-field__erreurs,:host([data-disposition=case]) .st-form-field__indication,:host([data-disposition=reglage]) .st-form-field__erreurs,:host([data-disposition=reglage]) .st-form-field__indication{order:2}:host([data-disposition=case]) .st-form-field__aide,:host([data-disposition=reglage]) .st-form-field__aide{order:3}:host([data-disposition=case]) .st-form-field__complement,:host([data-disposition=reglage]) .st-form-field__complement{order:4}:host([data-disposition=case]) .st-form-field__controle,:host([data-disposition=reglage]) .st-form-field__controle{position:absolute;inset-block:0;display:flex;align-items:center}:host([data-disposition=case]) .st-form-field__libelle,:host([data-disposition=reglage]) .st-form-field__libelle{line-height:var(--st-choix-interligne, var(--st-interligne-sm))}:host([data-disposition=case]) .st-form-field__erreurs,:host([data-disposition=reglage]) .st-form-field__erreurs{gap:0;padding-block:0;font-size:var(--st-taille-xs);font-weight:var(--st-graisse-normale);line-height:var(--st-interligne-xs)}:host([data-disposition=case]) .st-form-field__erreurs>st-inline-message,:host([data-disposition=reglage]) .st-form-field__erreurs>st-inline-message{font-size:inherit;line-height:inherit}:host([data-disposition=case]) .st-form-field__erreurs ::ng-deep .st-inline-message__icone,:host([data-disposition=reglage]) .st-form-field__erreurs ::ng-deep .st-inline-message__icone{display:none}:host([data-disposition=case]) .st-form-field__indication,:host([data-disposition=reglage]) .st-form-field__indication{min-block-size:0}:host([data-disposition=case]) .st-form-field__lisere,:host([data-disposition=reglage]) .st-form-field__lisere{display:none}:host([data-disposition=case]:not([data-en-erreur])) .st-form-field__libelle,:host([data-disposition=case]:not([data-en-erreur])):focus-within .st-form-field__libelle,:host([data-disposition=reglage]:not([data-en-erreur])) .st-form-field__libelle,:host([data-disposition=reglage]:not([data-en-erreur])):focus-within .st-form-field__libelle{font-weight:var(--st-choix-graisse, var(--st-graisse-moyenne));color:var(--st-choix-couleur, var(--st-couleur-texte))}:host([data-disposition=case]) .st-form-field__grille{padding-inline-start:calc(var(--st-cible-min) + var(--st-espacement-3))}:host([data-disposition=case]) .st-form-field__controle{inset-inline-start:0}:host([data-disposition=reglage]) .st-form-field__grille{padding-inline-end:calc(var(--st-cible-tactile-min) + var(--st-espacement-3))}:host([data-disposition=reglage]) .st-form-field__controle{inset-inline-end:0}:host([data-disposition=en-ligne]) .st-form-field__entete{grid-area:entete}:host([data-disposition=en-ligne]) .st-form-field__aide{grid-area:aide}:host([data-disposition=en-ligne]) .st-form-field__erreurs,:host([data-disposition=en-ligne]) .st-form-field__indication{grid-area:message}:host([data-disposition=en-ligne]) .st-form-field__controle{grid-area:controle}:host([data-disposition=en-ligne]) .st-form-field__complement{grid-area:complement}:host([data-disposition=en-ligne]){container-type:inline-size}@container (min-width: 48rem){:host([data-disposition=en-ligne]) .st-form-field__grille{display:grid;grid-template-areas:\". aide\" \". message\" \"entete controle\" \". complement\";grid-template-columns:var(--st-champ-largeur-libelle, var(--st-largeur-champ-md)) minmax(0,1fr);gap:0 var(--st-espacement-4);align-items:start}:host([data-disposition=en-ligne]) .st-form-field__entete{align-self:start;padding-block-start:calc((var(--st-commande-hauteur, var(--st-hauteur-commande-defaut)) - var(--st-interligne-sm)) / 2)}:host([data-disposition=en-ligne]) .st-form-field__aide{margin-block-end:var(--st-espacement-1)}:host([data-disposition=en-ligne]) .st-form-field__erreurs,:host([data-disposition=en-ligne]) .st-form-field__indication{margin-block-end:var(--st-espacement-1)}:host([data-disposition=en-ligne]) .st-form-field__complement{margin-block-start:var(--st-espacement-1)}}\n"],
|
|
1131
|
+
template: "<!-- Une grille interieure : l'hote peut ainsi etre le conteneur de requete de `en-ligne`. -->\n<div class=\"st-form-field__grille\">\n <!-- En-tete : l'etiquette (et sa mention), la meta projetee a droite. -->\n <div class=\"st-form-field__entete\">\n <!-- Exception de eslint.config.mjs (clic sans clavier sur l'etiquette) :\n Le clic sur une etiquette est une commodite de souris, comme pour tout\n champ natif : au clavier, le controle se rejoint par tabulation, et\n l'etiquette n'a pas a recevoir le focus. -->\n <label\n class=\"st-form-field__libelle\"\n [class.st-vh]=\"libelleMasque()\"\n [id]=\"identifiants.libelle\"\n [for]=\"identifiants.controle\"\n [attr.data-libelle]=\"libelle()\"\n (click)=\"focaliserLeControle()\"\n >\n <!-- Libelle riche (lot 218) : un [stLibelle] projete (un lien vers les conditions generales)\n prend la place du texte ; sans lui, le libelle. Releve au rendu : relaye par un champ du\n socle, le contenu echappe aux requetes, et une fente relayee vide compterait comme remplie.\n Aucun blanc autour du texte : la largeur minimale de l'etiquette est mesuree. -->\n <span class=\"st-form-field__texte\"\n ><span #libelleRiche class=\"st-form-field__libelle-riche\"\n ><ng-content select=\"[stLibelle]\" /></span\n >{{ libelleRichePresent() ? '' : libelle() }}\n @if (obligatoire() && asterisque) {\n <span class=\"st-form-field__asterisque\" aria-hidden=\"true\">*</span>\n }\n </span>\n @if (obligatoire() && !asterisque) {\n <span class=\"st-form-field__obligatoire\">{{ libelleObligatoire() }}</span>\n }\n </label>\n <!-- L'aide contextuelle (lot 265) : HORS de l'etiquette, son nom n'entre pas dans celui du\n champ ; elle suit l'etiquette et sa mention. -->\n <span class=\"st-form-field__aide-contextuelle\"><ng-content select=\"[stAide]\" /></span>\n <span #meta class=\"st-form-field__meta\" [id]=\"identifiants.meta\"\n ><ng-content select=\"[stMeta]\"\n /></span>\n </div>\n\n @if (aideRendue(); as texte) {\n <p class=\"st-form-field__aide\" [id]=\"identifiants.aide\">{{ texte }}</p>\n }\n\n <!-- Le message : l'erreur, et a defaut l'indication projetee, a la meme place. -->\n @if (enErreur()) {\n <div class=\"st-form-field__erreurs\" [id]=\"identifiants.erreur\">\n @for (message of messages(); track $index) {\n <st-inline-message ton=\"erreur\">{{ message }}</st-inline-message>\n }\n </div>\n }\n <div\n #indication\n class=\"st-form-field__indication\"\n [id]=\"identifiants.indication\"\n [hidden]=\"enErreur()\"\n >\n <ng-content select=\"[stIndication]\" />\n </div>\n\n <div class=\"st-form-field__controle\">\n @if (enErreur()) {\n <span class=\"st-form-field__lisere\"></span>\n }\n <ng-content />\n </div>\n\n @if (complementRendu(); as texte) {\n <p class=\"st-form-field__complement\" [id]=\"identifiants.complement\">{{ texte }}</p>\n }\n</div>\n",
|
|
1132
|
+
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;min-inline-size:0}.st-form-field__grille{display:flex;flex-direction:column;gap:var(--st-espacement-1-5);min-inline-size:0}.st-form-field__entete{display:flex;align-items:center;justify-content:space-between}.st-form-field__libelle{font-size:var(--st-taille-sm);line-height:var(--st-interligne-sm);font-weight:var(--st-graisse-moyenne);letter-spacing:var(--st-interlettrage-normal);display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;justify-content:space-between;min-inline-size:0;color:var(--st-couleur-texte-discret)}.st-form-field__aide-contextuelle{display:inline-flex;flex:none;margin-block:calc((var(--st-interligne-sm) - var(--st-hauteur-commande-sm)) / 2)}.st-form-field__aide-contextuelle:empty{display:none}.st-form-field__entete:has(>.st-form-field__aide-contextuelle:not(:empty)){gap:var(--st-espacement-1);justify-content:flex-start}.st-form-field__entete:has(>.st-form-field__aide-contextuelle:not(:empty)) .st-form-field__libelle{flex-grow:0}.st-form-field__entete:has(>.st-form-field__aide-contextuelle:not(:empty)) .st-form-field__meta{margin-inline-start:auto}.st-form-field__texte{flex:1 1 min-content;min-inline-size:0;overflow-wrap:break-word}:host([data-presentation=micro-capitales]:not([data-disposition=case],[data-disposition=reglage])) .st-form-field__grille{gap:var(--st-espacement-1)}:host([data-presentation=micro-capitales]:not([data-disposition=case],[data-disposition=reglage])) .st-form-field__libelle{font-size:var(--st-taille-2xs);line-height:var(--st-interligne-2xs);font-weight:var(--st-graisse-semi);letter-spacing:var(--st-interlettrage-capitales);text-transform:uppercase;color:var(--st-couleur-texte-discret)}.st-form-field__asterisque{margin-inline-start:var(--st-espacement-1);font-weight:var(--st-graisse-semi);color:var(--st-couleur-erreur)}.st-form-field__obligatoire{font-size:var(--st-taille-xs);font-weight:var(--st-graisse-moyenne);line-height:var(--st-interligne-xs);color:var(--st-couleur-texte-attenue)}.st-form-field__meta{font-size:var(--st-taille-xs);line-height:var(--st-interligne-xs);color:var(--st-couleur-texte-discret)}.st-form-field__meta:empty{display:none}:host(:focus-within) .st-form-field__libelle{font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte-primaire)}:host([data-en-erreur]) .st-form-field__libelle{font-weight:var(--st-graisse-semi);color:var(--st-couleur-erreur)}:host([data-en-erreur]) .st-form-field__obligatoire{color:var(--st-couleur-erreur)}.st-form-field__aide,.st-form-field__complement{margin:0;font-size:var(--st-taille-xs);line-height:var(--st-interligne-xs);color:var(--st-couleur-texte-discret)}.st-form-field__complement{font-variant-numeric:var(--st-chiffres-alignes)}.st-form-field__erreurs{display:flex;flex-direction:column;gap:var(--st-espacement-1);padding-block:var(--st-espacement-1);font-size:var(--st-taille-xs);font-weight:var(--st-graisse-semi);line-height:var(--st-interligne-xs);color:var(--st-couleur-erreur)}.st-form-field__erreurs>st-inline-message{align-items:center;font-weight:inherit}.st-form-field__erreurs ::ng-deep .st-inline-message__icone,.st-form-field__indication ::ng-deep .st-inline-message__icone{align-items:flex-start}.st-form-field__indication{display:flex;align-items:center;min-block-size:calc(var(--st-interligne-xs) + var(--st-espacement-1-5));font-size:var(--st-taille-xs);line-height:var(--st-interligne-xs)}.st-form-field__indication:empty,.st-form-field__indication[hidden]{display:none}.st-form-field__indication ::ng-deep>st-inline-message{gap:var(--st-espacement-1);align-items:center}.st-form-field__controle{position:relative;min-inline-size:0}.st-form-field__lisere{position:absolute;inset-block:0;inset-inline-start:calc(-1 * var(--st-espacement-3));inline-size:var(--st-epaisseur-forte);background-color:var(--st-couleur-erreur);border-radius:var(--st-rayon-pleine)}@media(forced-colors:active){.st-form-field__lisere{forced-color-adjust:none;background-color:CanvasText}}:host([data-disposition=case]) .st-form-field__grille,:host([data-disposition=reglage]) .st-form-field__grille{position:relative;justify-content:center;gap:0;min-block-size:var(--st-cible-min)}:host([data-disposition=case]) .st-form-field__entete,:host([data-disposition=reglage]) .st-form-field__entete{order:1}:host([data-disposition=case]) .st-form-field__erreurs,:host([data-disposition=case]) .st-form-field__indication,:host([data-disposition=reglage]) .st-form-field__erreurs,:host([data-disposition=reglage]) .st-form-field__indication{order:2}:host([data-disposition=case]) .st-form-field__aide,:host([data-disposition=reglage]) .st-form-field__aide{order:3}:host([data-disposition=case]) .st-form-field__complement,:host([data-disposition=reglage]) .st-form-field__complement{order:4}:host([data-disposition=case]) .st-form-field__controle,:host([data-disposition=reglage]) .st-form-field__controle{position:absolute;inset-block:0;display:flex;align-items:center}:host([data-disposition=case]) .st-form-field__libelle,:host([data-disposition=reglage]) .st-form-field__libelle{line-height:var(--st-choix-interligne, var(--st-interligne-sm))}:host([data-disposition=case]) .st-form-field__erreurs,:host([data-disposition=reglage]) .st-form-field__erreurs{gap:0;padding-block:0;font-size:var(--st-taille-xs);font-weight:var(--st-graisse-normale);line-height:var(--st-interligne-xs)}:host([data-disposition=case]) .st-form-field__erreurs>st-inline-message,:host([data-disposition=reglage]) .st-form-field__erreurs>st-inline-message{font-size:inherit;line-height:inherit}:host([data-disposition=case]) .st-form-field__erreurs ::ng-deep .st-inline-message__icone,:host([data-disposition=reglage]) .st-form-field__erreurs ::ng-deep .st-inline-message__icone{display:none}:host([data-disposition=case]) .st-form-field__indication,:host([data-disposition=reglage]) .st-form-field__indication{min-block-size:0}:host([data-disposition=case]) .st-form-field__lisere,:host([data-disposition=reglage]) .st-form-field__lisere{display:none}:host([data-disposition=case]:not([data-en-erreur])) .st-form-field__libelle,:host([data-disposition=case]:not([data-en-erreur])):focus-within .st-form-field__libelle,:host([data-disposition=reglage]:not([data-en-erreur])) .st-form-field__libelle,:host([data-disposition=reglage]:not([data-en-erreur])):focus-within .st-form-field__libelle{font-weight:var(--st-choix-graisse, var(--st-graisse-moyenne));color:var(--st-choix-couleur, var(--st-couleur-texte))}:host([data-disposition=case]) .st-form-field__grille{padding-inline-start:calc(var(--st-cible-min) + var(--st-espacement-3))}:host([data-disposition=case]) .st-form-field__controle{inset-inline-start:0}:host([data-disposition=reglage]) .st-form-field__grille{padding-inline-end:calc(var(--st-cible-tactile-min) + var(--st-espacement-3))}:host([data-disposition=reglage]) .st-form-field__controle{inset-inline-end:0}:host([data-disposition=en-ligne]) .st-form-field__entete{grid-area:entete}:host([data-disposition=en-ligne]) .st-form-field__aide{grid-area:aide}:host([data-disposition=en-ligne]) .st-form-field__erreurs,:host([data-disposition=en-ligne]) .st-form-field__indication{grid-area:message}:host([data-disposition=en-ligne]) .st-form-field__controle{grid-area:controle}:host([data-disposition=en-ligne]) .st-form-field__complement{grid-area:complement}:host([data-disposition=en-ligne]){container-type:inline-size}@container (min-width: 48rem){:host([data-disposition=en-ligne]) .st-form-field__grille{display:grid;grid-template-areas:\". aide\" \". message\" \"entete controle\" \". complement\";grid-template-columns:var(--st-champ-largeur-libelle, var(--st-largeur-champ-md)) minmax(0,1fr);gap:0 var(--st-espacement-4);align-items:start}:host([data-disposition=en-ligne]) .st-form-field__entete{align-self:start;padding-block-start:calc((var(--st-commande-hauteur, var(--st-hauteur-commande-defaut)) - var(--st-interligne-sm)) / 2)}:host([data-disposition=en-ligne]) .st-form-field__aide{margin-block-end:var(--st-espacement-1)}:host([data-disposition=en-ligne]) .st-form-field__erreurs,:host([data-disposition=en-ligne]) .st-form-field__indication{margin-block-end:var(--st-espacement-1)}:host([data-disposition=en-ligne]) .st-form-field__complement{margin-block-start:var(--st-espacement-1)}}\n"],
|
|
1132
1133
|
dependencies: [{
|
|
1133
1134
|
kind: "component",
|
|
1134
1135
|
type: StInlineMessage,
|
|
@@ -1161,8 +1162,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1161
1162
|
"[attr.data-disposition]": "disposition()",
|
|
1162
1163
|
"[attr.data-presentation]": "presentation()"
|
|
1163
1164
|
},
|
|
1164
|
-
template: "<!-- Une grille interieure : l'hote peut ainsi etre le conteneur de requete de `en-ligne`. -->\n<div class=\"st-form-field__grille\">\n <!-- En-tete : l'etiquette (et sa mention), la meta projetee a droite. -->\n <div class=\"st-form-field__entete\">\n <!-- Exception de eslint.config.mjs (clic sans clavier sur l'etiquette) :\n Le clic sur une etiquette est une commodite de souris, comme pour tout\n champ natif : au clavier, le controle se rejoint par tabulation, et\n l'etiquette n'a pas a recevoir le focus. -->\n <label\n class=\"st-form-field__libelle\"\n [class.st-vh]=\"libelleMasque()\"\n [id]=\"identifiants.libelle\"\n [for]=\"identifiants.controle\"\n [attr.data-libelle]=\"libelle()\"\n (click)=\"focaliserLeControle()\"\n >\n <!-- Libelle riche (lot 218) : un [stLibelle] projete (un lien vers les conditions generales)\n prend la place du texte ; sans lui, le libelle. Releve au rendu : relaye par un champ du\n socle, le contenu echappe aux requetes, et une fente relayee vide compterait comme remplie.\n Aucun blanc autour du texte : la largeur minimale de l'etiquette est mesuree. -->\n <span class=\"st-form-field__texte\"\n ><span #libelleRiche class=\"st-form-field__libelle-riche\"\n ><ng-content select=\"[stLibelle]\" /></span\n >{{ libelleRichePresent() ? '' : libelle() }}
|
|
1165
|
-
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;min-inline-size:0}.st-form-field__grille{display:flex;flex-direction:column;gap:var(--st-espacement-1-5);min-inline-size:0}.st-form-field__entete{display:flex;align-items:center;justify-content:space-between}.st-form-field__libelle{font-size:var(--st-taille-sm);line-height:var(--st-interligne-sm);font-weight:var(--st-graisse-moyenne);letter-spacing:var(--st-interlettrage-normal);display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;justify-content:space-between;min-inline-size:0;color:var(--st-couleur-texte-discret)}.st-form-field__aide-contextuelle{display:inline-flex;flex:none;margin-block:calc((var(--st-interligne-sm) - var(--st-hauteur-commande-sm)) / 2)}.st-form-field__aide-contextuelle:empty{display:none}.st-form-field__entete:has(>.st-form-field__aide-contextuelle:not(:empty)){gap:var(--st-espacement-1);justify-content:flex-start}.st-form-field__entete:has(>.st-form-field__aide-contextuelle:not(:empty)) .st-form-field__libelle{flex-grow:0}.st-form-field__entete:has(>.st-form-field__aide-contextuelle:not(:empty)) .st-form-field__meta{margin-inline-start:auto}.st-form-field__texte{flex:1 1 min-content;min-inline-size:0;overflow-wrap:break-word}:host([data-presentation=micro-capitales]:not([data-disposition=case],[data-disposition=reglage])) .st-form-field__grille{gap:var(--st-espacement-1)}:host([data-presentation=micro-capitales]:not([data-disposition=case],[data-disposition=reglage])) .st-form-field__libelle{font-size:var(--st-taille-2xs);line-height:var(--st-interligne-2xs);font-weight:var(--st-graisse-semi);letter-spacing:var(--st-interlettrage-capitales);text-transform:uppercase;color:var(--st-couleur-texte-discret)}.st-form-field__obligatoire{font-size:var(--st-taille-xs);font-weight:var(--st-graisse-moyenne);line-height:var(--st-interligne-xs);color:var(--st-couleur-texte-attenue)}.st-form-field__meta{font-size:var(--st-taille-xs);line-height:var(--st-interligne-xs);color:var(--st-couleur-texte-discret)}.st-form-field__meta:empty{display:none}:host(:focus-within) .st-form-field__libelle{font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte-primaire)}:host([data-en-erreur]) .st-form-field__libelle{font-weight:var(--st-graisse-semi);color:var(--st-couleur-erreur)}:host([data-en-erreur]) .st-form-field__obligatoire{color:var(--st-couleur-erreur)}.st-form-field__aide,.st-form-field__complement{margin:0;font-size:var(--st-taille-xs);line-height:var(--st-interligne-xs);color:var(--st-couleur-texte-discret)}.st-form-field__complement{font-variant-numeric:var(--st-chiffres-alignes)}.st-form-field__erreurs{display:flex;flex-direction:column;gap:var(--st-espacement-1);padding-block:var(--st-espacement-1);font-size:var(--st-taille-xs);font-weight:var(--st-graisse-semi);line-height:var(--st-interligne-xs);color:var(--st-couleur-erreur)}.st-form-field__erreurs>st-inline-message{align-items:center;font-weight:inherit}.st-form-field__erreurs ::ng-deep .st-inline-message__icone,.st-form-field__indication ::ng-deep .st-inline-message__icone{align-items:flex-start}.st-form-field__indication{display:flex;align-items:center;min-block-size:calc(var(--st-interligne-xs) + var(--st-espacement-1-5));font-size:var(--st-taille-xs);line-height:var(--st-interligne-xs)}.st-form-field__indication:empty,.st-form-field__indication[hidden]{display:none}.st-form-field__indication ::ng-deep>st-inline-message{gap:var(--st-espacement-1);align-items:center}.st-form-field__controle{position:relative;min-inline-size:0}.st-form-field__lisere{position:absolute;inset-block:0;inset-inline-start:calc(-1 * var(--st-espacement-3));inline-size:var(--st-epaisseur-forte);background-color:var(--st-couleur-erreur);border-radius:var(--st-rayon-pleine)}@media(forced-colors:active){.st-form-field__lisere{forced-color-adjust:none;background-color:CanvasText}}:host([data-disposition=case]) .st-form-field__grille,:host([data-disposition=reglage]) .st-form-field__grille{position:relative;justify-content:center;gap:0;min-block-size:var(--st-cible-min)}:host([data-disposition=case]) .st-form-field__entete,:host([data-disposition=reglage]) .st-form-field__entete{order:1}:host([data-disposition=case]) .st-form-field__erreurs,:host([data-disposition=case]) .st-form-field__indication,:host([data-disposition=reglage]) .st-form-field__erreurs,:host([data-disposition=reglage]) .st-form-field__indication{order:2}:host([data-disposition=case]) .st-form-field__aide,:host([data-disposition=reglage]) .st-form-field__aide{order:3}:host([data-disposition=case]) .st-form-field__complement,:host([data-disposition=reglage]) .st-form-field__complement{order:4}:host([data-disposition=case]) .st-form-field__controle,:host([data-disposition=reglage]) .st-form-field__controle{position:absolute;inset-block:0;display:flex;align-items:center}:host([data-disposition=case]) .st-form-field__libelle,:host([data-disposition=reglage]) .st-form-field__libelle{line-height:var(--st-choix-interligne, var(--st-interligne-sm))}:host([data-disposition=case]) .st-form-field__erreurs,:host([data-disposition=reglage]) .st-form-field__erreurs{gap:0;padding-block:0;font-size:var(--st-taille-xs);font-weight:var(--st-graisse-normale);line-height:var(--st-interligne-xs)}:host([data-disposition=case]) .st-form-field__erreurs>st-inline-message,:host([data-disposition=reglage]) .st-form-field__erreurs>st-inline-message{font-size:inherit;line-height:inherit}:host([data-disposition=case]) .st-form-field__erreurs ::ng-deep .st-inline-message__icone,:host([data-disposition=reglage]) .st-form-field__erreurs ::ng-deep .st-inline-message__icone{display:none}:host([data-disposition=case]) .st-form-field__indication,:host([data-disposition=reglage]) .st-form-field__indication{min-block-size:0}:host([data-disposition=case]) .st-form-field__lisere,:host([data-disposition=reglage]) .st-form-field__lisere{display:none}:host([data-disposition=case]:not([data-en-erreur])) .st-form-field__libelle,:host([data-disposition=case]:not([data-en-erreur])):focus-within .st-form-field__libelle,:host([data-disposition=reglage]:not([data-en-erreur])) .st-form-field__libelle,:host([data-disposition=reglage]:not([data-en-erreur])):focus-within .st-form-field__libelle{font-weight:var(--st-choix-graisse, var(--st-graisse-moyenne));color:var(--st-choix-couleur, var(--st-couleur-texte))}:host([data-disposition=case]) .st-form-field__grille{padding-inline-start:calc(var(--st-cible-min) + var(--st-espacement-3))}:host([data-disposition=case]) .st-form-field__controle{inset-inline-start:0}:host([data-disposition=reglage]) .st-form-field__grille{padding-inline-end:calc(var(--st-cible-tactile-min) + var(--st-espacement-3))}:host([data-disposition=reglage]) .st-form-field__controle{inset-inline-end:0}:host([data-disposition=en-ligne]) .st-form-field__entete{grid-area:entete}:host([data-disposition=en-ligne]) .st-form-field__aide{grid-area:aide}:host([data-disposition=en-ligne]) .st-form-field__erreurs,:host([data-disposition=en-ligne]) .st-form-field__indication{grid-area:message}:host([data-disposition=en-ligne]) .st-form-field__controle{grid-area:controle}:host([data-disposition=en-ligne]) .st-form-field__complement{grid-area:complement}:host([data-disposition=en-ligne]){container-type:inline-size}@container (min-width: 48rem){:host([data-disposition=en-ligne]) .st-form-field__grille{display:grid;grid-template-areas:\". aide\" \". message\" \"entete controle\" \". complement\";grid-template-columns:var(--st-champ-largeur-libelle, var(--st-largeur-champ-md)) minmax(0,1fr);gap:0 var(--st-espacement-4);align-items:start}:host([data-disposition=en-ligne]) .st-form-field__entete{align-self:start;padding-block-start:calc((var(--st-commande-hauteur, var(--st-hauteur-commande-defaut)) - var(--st-interligne-sm)) / 2)}:host([data-disposition=en-ligne]) .st-form-field__aide{margin-block-end:var(--st-espacement-1)}:host([data-disposition=en-ligne]) .st-form-field__erreurs,:host([data-disposition=en-ligne]) .st-form-field__indication{margin-block-end:var(--st-espacement-1)}:host([data-disposition=en-ligne]) .st-form-field__complement{margin-block-start:var(--st-espacement-1)}}\n"]
|
|
1165
|
+
template: "<!-- Une grille interieure : l'hote peut ainsi etre le conteneur de requete de `en-ligne`. -->\n<div class=\"st-form-field__grille\">\n <!-- En-tete : l'etiquette (et sa mention), la meta projetee a droite. -->\n <div class=\"st-form-field__entete\">\n <!-- Exception de eslint.config.mjs (clic sans clavier sur l'etiquette) :\n Le clic sur une etiquette est une commodite de souris, comme pour tout\n champ natif : au clavier, le controle se rejoint par tabulation, et\n l'etiquette n'a pas a recevoir le focus. -->\n <label\n class=\"st-form-field__libelle\"\n [class.st-vh]=\"libelleMasque()\"\n [id]=\"identifiants.libelle\"\n [for]=\"identifiants.controle\"\n [attr.data-libelle]=\"libelle()\"\n (click)=\"focaliserLeControle()\"\n >\n <!-- Libelle riche (lot 218) : un [stLibelle] projete (un lien vers les conditions generales)\n prend la place du texte ; sans lui, le libelle. Releve au rendu : relaye par un champ du\n socle, le contenu echappe aux requetes, et une fente relayee vide compterait comme remplie.\n Aucun blanc autour du texte : la largeur minimale de l'etiquette est mesuree. -->\n <span class=\"st-form-field__texte\"\n ><span #libelleRiche class=\"st-form-field__libelle-riche\"\n ><ng-content select=\"[stLibelle]\" /></span\n >{{ libelleRichePresent() ? '' : libelle() }}\n @if (obligatoire() && asterisque) {\n <span class=\"st-form-field__asterisque\" aria-hidden=\"true\">*</span>\n }\n </span>\n @if (obligatoire() && !asterisque) {\n <span class=\"st-form-field__obligatoire\">{{ libelleObligatoire() }}</span>\n }\n </label>\n <!-- L'aide contextuelle (lot 265) : HORS de l'etiquette, son nom n'entre pas dans celui du\n champ ; elle suit l'etiquette et sa mention. -->\n <span class=\"st-form-field__aide-contextuelle\"><ng-content select=\"[stAide]\" /></span>\n <span #meta class=\"st-form-field__meta\" [id]=\"identifiants.meta\"\n ><ng-content select=\"[stMeta]\"\n /></span>\n </div>\n\n @if (aideRendue(); as texte) {\n <p class=\"st-form-field__aide\" [id]=\"identifiants.aide\">{{ texte }}</p>\n }\n\n <!-- Le message : l'erreur, et a defaut l'indication projetee, a la meme place. -->\n @if (enErreur()) {\n <div class=\"st-form-field__erreurs\" [id]=\"identifiants.erreur\">\n @for (message of messages(); track $index) {\n <st-inline-message ton=\"erreur\">{{ message }}</st-inline-message>\n }\n </div>\n }\n <div\n #indication\n class=\"st-form-field__indication\"\n [id]=\"identifiants.indication\"\n [hidden]=\"enErreur()\"\n >\n <ng-content select=\"[stIndication]\" />\n </div>\n\n <div class=\"st-form-field__controle\">\n @if (enErreur()) {\n <span class=\"st-form-field__lisere\"></span>\n }\n <ng-content />\n </div>\n\n @if (complementRendu(); as texte) {\n <p class=\"st-form-field__complement\" [id]=\"identifiants.complement\">{{ texte }}</p>\n }\n</div>\n",
|
|
1166
|
+
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;min-inline-size:0}.st-form-field__grille{display:flex;flex-direction:column;gap:var(--st-espacement-1-5);min-inline-size:0}.st-form-field__entete{display:flex;align-items:center;justify-content:space-between}.st-form-field__libelle{font-size:var(--st-taille-sm);line-height:var(--st-interligne-sm);font-weight:var(--st-graisse-moyenne);letter-spacing:var(--st-interlettrage-normal);display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;justify-content:space-between;min-inline-size:0;color:var(--st-couleur-texte-discret)}.st-form-field__aide-contextuelle{display:inline-flex;flex:none;margin-block:calc((var(--st-interligne-sm) - var(--st-hauteur-commande-sm)) / 2)}.st-form-field__aide-contextuelle:empty{display:none}.st-form-field__entete:has(>.st-form-field__aide-contextuelle:not(:empty)){gap:var(--st-espacement-1);justify-content:flex-start}.st-form-field__entete:has(>.st-form-field__aide-contextuelle:not(:empty)) .st-form-field__libelle{flex-grow:0}.st-form-field__entete:has(>.st-form-field__aide-contextuelle:not(:empty)) .st-form-field__meta{margin-inline-start:auto}.st-form-field__texte{flex:1 1 min-content;min-inline-size:0;overflow-wrap:break-word}:host([data-presentation=micro-capitales]:not([data-disposition=case],[data-disposition=reglage])) .st-form-field__grille{gap:var(--st-espacement-1)}:host([data-presentation=micro-capitales]:not([data-disposition=case],[data-disposition=reglage])) .st-form-field__libelle{font-size:var(--st-taille-2xs);line-height:var(--st-interligne-2xs);font-weight:var(--st-graisse-semi);letter-spacing:var(--st-interlettrage-capitales);text-transform:uppercase;color:var(--st-couleur-texte-discret)}.st-form-field__asterisque{margin-inline-start:var(--st-espacement-1);font-weight:var(--st-graisse-semi);color:var(--st-couleur-erreur)}.st-form-field__obligatoire{font-size:var(--st-taille-xs);font-weight:var(--st-graisse-moyenne);line-height:var(--st-interligne-xs);color:var(--st-couleur-texte-attenue)}.st-form-field__meta{font-size:var(--st-taille-xs);line-height:var(--st-interligne-xs);color:var(--st-couleur-texte-discret)}.st-form-field__meta:empty{display:none}:host(:focus-within) .st-form-field__libelle{font-weight:var(--st-graisse-semi);color:var(--st-couleur-texte-primaire)}:host([data-en-erreur]) .st-form-field__libelle{font-weight:var(--st-graisse-semi);color:var(--st-couleur-erreur)}:host([data-en-erreur]) .st-form-field__obligatoire{color:var(--st-couleur-erreur)}.st-form-field__aide,.st-form-field__complement{margin:0;font-size:var(--st-taille-xs);line-height:var(--st-interligne-xs);color:var(--st-couleur-texte-discret)}.st-form-field__complement{font-variant-numeric:var(--st-chiffres-alignes)}.st-form-field__erreurs{display:flex;flex-direction:column;gap:var(--st-espacement-1);padding-block:var(--st-espacement-1);font-size:var(--st-taille-xs);font-weight:var(--st-graisse-semi);line-height:var(--st-interligne-xs);color:var(--st-couleur-erreur)}.st-form-field__erreurs>st-inline-message{align-items:center;font-weight:inherit}.st-form-field__erreurs ::ng-deep .st-inline-message__icone,.st-form-field__indication ::ng-deep .st-inline-message__icone{align-items:flex-start}.st-form-field__indication{display:flex;align-items:center;min-block-size:calc(var(--st-interligne-xs) + var(--st-espacement-1-5));font-size:var(--st-taille-xs);line-height:var(--st-interligne-xs)}.st-form-field__indication:empty,.st-form-field__indication[hidden]{display:none}.st-form-field__indication ::ng-deep>st-inline-message{gap:var(--st-espacement-1);align-items:center}.st-form-field__controle{position:relative;min-inline-size:0}.st-form-field__lisere{position:absolute;inset-block:0;inset-inline-start:calc(-1 * var(--st-espacement-3));inline-size:var(--st-epaisseur-forte);background-color:var(--st-couleur-erreur);border-radius:var(--st-rayon-pleine)}@media(forced-colors:active){.st-form-field__lisere{forced-color-adjust:none;background-color:CanvasText}}:host([data-disposition=case]) .st-form-field__grille,:host([data-disposition=reglage]) .st-form-field__grille{position:relative;justify-content:center;gap:0;min-block-size:var(--st-cible-min)}:host([data-disposition=case]) .st-form-field__entete,:host([data-disposition=reglage]) .st-form-field__entete{order:1}:host([data-disposition=case]) .st-form-field__erreurs,:host([data-disposition=case]) .st-form-field__indication,:host([data-disposition=reglage]) .st-form-field__erreurs,:host([data-disposition=reglage]) .st-form-field__indication{order:2}:host([data-disposition=case]) .st-form-field__aide,:host([data-disposition=reglage]) .st-form-field__aide{order:3}:host([data-disposition=case]) .st-form-field__complement,:host([data-disposition=reglage]) .st-form-field__complement{order:4}:host([data-disposition=case]) .st-form-field__controle,:host([data-disposition=reglage]) .st-form-field__controle{position:absolute;inset-block:0;display:flex;align-items:center}:host([data-disposition=case]) .st-form-field__libelle,:host([data-disposition=reglage]) .st-form-field__libelle{line-height:var(--st-choix-interligne, var(--st-interligne-sm))}:host([data-disposition=case]) .st-form-field__erreurs,:host([data-disposition=reglage]) .st-form-field__erreurs{gap:0;padding-block:0;font-size:var(--st-taille-xs);font-weight:var(--st-graisse-normale);line-height:var(--st-interligne-xs)}:host([data-disposition=case]) .st-form-field__erreurs>st-inline-message,:host([data-disposition=reglage]) .st-form-field__erreurs>st-inline-message{font-size:inherit;line-height:inherit}:host([data-disposition=case]) .st-form-field__erreurs ::ng-deep .st-inline-message__icone,:host([data-disposition=reglage]) .st-form-field__erreurs ::ng-deep .st-inline-message__icone{display:none}:host([data-disposition=case]) .st-form-field__indication,:host([data-disposition=reglage]) .st-form-field__indication{min-block-size:0}:host([data-disposition=case]) .st-form-field__lisere,:host([data-disposition=reglage]) .st-form-field__lisere{display:none}:host([data-disposition=case]:not([data-en-erreur])) .st-form-field__libelle,:host([data-disposition=case]:not([data-en-erreur])):focus-within .st-form-field__libelle,:host([data-disposition=reglage]:not([data-en-erreur])) .st-form-field__libelle,:host([data-disposition=reglage]:not([data-en-erreur])):focus-within .st-form-field__libelle{font-weight:var(--st-choix-graisse, var(--st-graisse-moyenne));color:var(--st-choix-couleur, var(--st-couleur-texte))}:host([data-disposition=case]) .st-form-field__grille{padding-inline-start:calc(var(--st-cible-min) + var(--st-espacement-3))}:host([data-disposition=case]) .st-form-field__controle{inset-inline-start:0}:host([data-disposition=reglage]) .st-form-field__grille{padding-inline-end:calc(var(--st-cible-tactile-min) + var(--st-espacement-3))}:host([data-disposition=reglage]) .st-form-field__controle{inset-inline-end:0}:host([data-disposition=en-ligne]) .st-form-field__entete{grid-area:entete}:host([data-disposition=en-ligne]) .st-form-field__aide{grid-area:aide}:host([data-disposition=en-ligne]) .st-form-field__erreurs,:host([data-disposition=en-ligne]) .st-form-field__indication{grid-area:message}:host([data-disposition=en-ligne]) .st-form-field__controle{grid-area:controle}:host([data-disposition=en-ligne]) .st-form-field__complement{grid-area:complement}:host([data-disposition=en-ligne]){container-type:inline-size}@container (min-width: 48rem){:host([data-disposition=en-ligne]) .st-form-field__grille{display:grid;grid-template-areas:\". aide\" \". message\" \"entete controle\" \". complement\";grid-template-columns:var(--st-champ-largeur-libelle, var(--st-largeur-champ-md)) minmax(0,1fr);gap:0 var(--st-espacement-4);align-items:start}:host([data-disposition=en-ligne]) .st-form-field__entete{align-self:start;padding-block-start:calc((var(--st-commande-hauteur, var(--st-hauteur-commande-defaut)) - var(--st-interligne-sm)) / 2)}:host([data-disposition=en-ligne]) .st-form-field__aide{margin-block-end:var(--st-espacement-1)}:host([data-disposition=en-ligne]) .st-form-field__erreurs,:host([data-disposition=en-ligne]) .st-form-field__indication{margin-block-end:var(--st-espacement-1)}:host([data-disposition=en-ligne]) .st-form-field__complement{margin-block-start:var(--st-espacement-1)}}\n"]
|
|
1166
1167
|
}]
|
|
1167
1168
|
}],
|
|
1168
1169
|
ctorParameters: () => [],
|
|
@@ -1392,6 +1393,7 @@ var StInput = class StInput extends ControleDeSaisieCompte {
|
|
|
1392
1393
|
autocomplete = input(null, ...ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []);
|
|
1393
1394
|
inputmode = input(null, ...ngDevMode ? [{ debugName: "inputmode" }] : /* istanbul ignore next */ []);
|
|
1394
1395
|
icone = input(null, ...ngDevMode ? [{ debugName: "icone" }] : /* istanbul ignore next */ []);
|
|
1396
|
+
exemple = input(null, ...ngDevMode ? [{ debugName: "exemple" }] : /* istanbul ignore next */ []);
|
|
1395
1397
|
chiffres = input("texte", ...ngDevMode ? [{ debugName: "chiffres" }] : /* istanbul ignore next */ []);
|
|
1396
1398
|
presentation = input("libelle", ...ngDevMode ? [{ debugName: "presentation" }] : /* istanbul ignore next */ []);
|
|
1397
1399
|
decritPar = input([], ...ngDevMode ? [{ debugName: "decritPar" }] : /* istanbul ignore next */ []);
|
|
@@ -1465,6 +1467,13 @@ var StInput = class StInput extends ControleDeSaisieCompte {
|
|
|
1465
1467
|
isRequired: false,
|
|
1466
1468
|
transformFunction: null
|
|
1467
1469
|
},
|
|
1470
|
+
exemple: {
|
|
1471
|
+
classPropertyName: "exemple",
|
|
1472
|
+
publicName: "exemple",
|
|
1473
|
+
isSignal: true,
|
|
1474
|
+
isRequired: false,
|
|
1475
|
+
transformFunction: null
|
|
1476
|
+
},
|
|
1468
1477
|
chiffres: {
|
|
1469
1478
|
classPropertyName: "chiffres",
|
|
1470
1479
|
publicName: "chiffres",
|
|
@@ -1513,8 +1522,8 @@ var StInput = class StInput extends ControleDeSaisieCompte {
|
|
|
1513
1522
|
}],
|
|
1514
1523
|
usesInheritance: true,
|
|
1515
1524
|
ngImport: i0,
|
|
1516
|
-
template: "<st-form-field\n [libelle]=\"libelle()\"\n [aide]=\"aideAffichee()\"\n [complement]=\"compteur()\"\n [erreurs]=\"erreurs()\"\n [afficherErreurs]=\"afficherErreurs()\"\n [obligatoire]=\"required()\"\n [presentation]=\"presentation()\"\n [descriptionsDuControle]=\"descriptionsDuControle()\"\n>\n <!-- Meta, aide contextuelle (lot 265) et indication de l'application, relayees a l'enveloppe\n (lot 215). -->\n <ng-content select=\"[stMeta]\" ngProjectAs=\"[stMeta]\" />\n <ng-content select=\"[stAide]\" ngProjectAs=\"[stAide]\" />\n <ng-content select=\"[stIndication]\" ngProjectAs=\"[stIndication]\" />\n <!-- Le cadre : prefixe, zone de frappe, suffixe. Sans emplacement rempli, il s'efface et\n l'input porte seul l'apparence du champ ; avec, il la porte a sa place (EA-11). -->\n <div class=\"st-input__cadre\" (mousedown)=\"surPressionDuCadre($event)\">\n <span #prefixe class=\"st-input__prefixe\" [id]=\"idPrefixe\">\n @if (icone(); as nom) {\n <st-icon class=\"st-input__icone\" [nom]=\"nom\" taille=\"20\" />\n }\n <ng-content select=\"[stPrefixe]\"\n /></span>\n <input\n #champ\n class=\"st-input__champ\"\n stControleDeChamp\n [attr.data-chiffres]=\"chiffres()\"\n [type]=\"type()\"\n [value]=\"value()\"\n [attr.name]=\"name() || null\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.inputmode]=\"inputmode()\"\n [attr.dir]=\"sens()\"\n [attr.aria-busy]=\"pending() ? 'true' : null\"\n [attr.list]=\"avecSuggestions() ? idDesSuggestions : null\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n (input)=\"surSaisie($event)\"\n (blur)=\"surSortie()\"\n />\n <!-- Des valeurs proposees, jamais imposees : la liste native du navigateur (D133). -->\n @if (avecSuggestions()) {\n <datalist [id]=\"idDesSuggestions\">\n @for (suggestion of suggestions() ?? []; track $index) {\n <option [value]=\"suggestion\"></option>\n }\n </datalist>\n }\n <span #suffixe class=\"st-input__suffixe\" [id]=\"idSuffixe\"\n ><ng-content select=\"[stSuffixe]\" />\n @if (attenteVisible()) {\n <span class=\"st-input__attente\" aria-hidden=\"true\"\n ><st-spinner taille=\"sm\" ton=\"neutre\"\n /></span>\n }\n </span>\n </div>\n</st-form-field>\n<!-- Les seuils du compteur (20, 10, 0 restants) et le depassement : seulement avec maxLength. -->\n@if (compteur() !== null) {\n <span class=\"st-vh\" aria-live=\"polite\">{{ annonce.texte() }}</span>\n}\n",
|
|
1517
|
-
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__cadre{--_frappe-minimale: min(100%, calc(8ch + var(--st-espacement-3-5) + var(--st-espacement-2)));display:grid;grid-template-columns:minmax(0,auto) minmax(var(--_frappe-minimale),1fr) minmax(0,auto);align-items:center}.st-input__champ:focus-visible{outline:var(--st-focus-epaisseur) solid var(--st-couleur-anneau-focus);outline-offset:var(--st-focus-decalage);box-shadow:0 0 0 var(--st-focus-lisere) var(--st-couleur-lisere-focus)}.st-input__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-commande-hauteur, var(--st-hauteur-commande-defaut))}.st-input__champ:is(input,select){block-size:var(--st-commande-hauteur, var(--st-hauteur-commande-defaut))}.st-input__champ{--_remplissage-bloc: max( var(--st-espacement-demi), min( var(--st-espacement-2), calc( (var(--st-commande-hauteur, var(--st-hauteur-commande-defaut)) - var(--st-interligne-sm)) / 2 - var(--st-epaisseur-fine) ) ) );padding-block:var(--_remplissage-bloc);padding-inline:var(--st-espacement-3-5);font-family:inherit;font-size:var(--st-taille-sm);font-weight:var(--st-graisse-normale);line-height:var(--st-interligne-sm);color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:var(--st-epaisseur-fine) solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}@media(pointer:coarse){.st-input__champ{--_remplissage-bloc: max( var(--st-espacement-demi), min( var(--st-espacement-2), calc( ( var(--st-commande-hauteur, var(--st-hauteur-commande-defaut)) - var( --st-interligne-md ) ) / 2 - var(--st-epaisseur-fine) ) ) );font-size:var(--st-taille-md);line-height:var(--st-interligne-md)}}
|
|
1525
|
+
template: "<st-form-field\n [libelle]=\"libelle()\"\n [aide]=\"aideAffichee()\"\n [complement]=\"compteur()\"\n [erreurs]=\"erreurs()\"\n [afficherErreurs]=\"afficherErreurs()\"\n [obligatoire]=\"required()\"\n [presentation]=\"presentation()\"\n [descriptionsDuControle]=\"descriptionsDuControle()\"\n>\n <!-- Meta, aide contextuelle (lot 265) et indication de l'application, relayees a l'enveloppe\n (lot 215). -->\n <ng-content select=\"[stMeta]\" ngProjectAs=\"[stMeta]\" />\n <ng-content select=\"[stAide]\" ngProjectAs=\"[stAide]\" />\n <ng-content select=\"[stIndication]\" ngProjectAs=\"[stIndication]\" />\n <!-- Le cadre : prefixe, zone de frappe, suffixe. Sans emplacement rempli, il s'efface et\n l'input porte seul l'apparence du champ ; avec, il la porte a sa place (EA-11). -->\n <div class=\"st-input__cadre\" (mousedown)=\"surPressionDuCadre($event)\">\n <span #prefixe class=\"st-input__prefixe\" [id]=\"idPrefixe\">\n @if (icone(); as nom) {\n <st-icon class=\"st-input__icone\" [nom]=\"nom\" taille=\"20\" />\n }\n <ng-content select=\"[stPrefixe]\"\n /></span>\n <input\n #champ\n class=\"st-input__champ\"\n stControleDeChamp\n [attr.data-chiffres]=\"chiffres()\"\n [type]=\"type()\"\n [value]=\"value()\"\n [attr.name]=\"name() || null\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.inputmode]=\"inputmode()\"\n [attr.placeholder]=\"exemple()\"\n [attr.dir]=\"sens()\"\n [attr.aria-busy]=\"pending() ? 'true' : null\"\n [attr.list]=\"avecSuggestions() ? idDesSuggestions : null\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n (input)=\"surSaisie($event)\"\n (blur)=\"surSortie()\"\n />\n <!-- Des valeurs proposees, jamais imposees : la liste native du navigateur (D133). -->\n @if (avecSuggestions()) {\n <datalist [id]=\"idDesSuggestions\">\n @for (suggestion of suggestions() ?? []; track $index) {\n <option [value]=\"suggestion\"></option>\n }\n </datalist>\n }\n <span #suffixe class=\"st-input__suffixe\" [id]=\"idSuffixe\"\n ><ng-content select=\"[stSuffixe]\" />\n @if (attenteVisible()) {\n <span class=\"st-input__attente\" aria-hidden=\"true\"\n ><st-spinner taille=\"sm\" ton=\"neutre\"\n /></span>\n }\n </span>\n </div>\n</st-form-field>\n<!-- Les seuils du compteur (20, 10, 0 restants) et le depassement : seulement avec maxLength. -->\n@if (compteur() !== null) {\n <span class=\"st-vh\" aria-live=\"polite\">{{ annonce.texte() }}</span>\n}\n",
|
|
1526
|
+
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__cadre{--_frappe-minimale: min(100%, calc(8ch + var(--st-espacement-3-5) + var(--st-espacement-2)));display:grid;grid-template-columns:minmax(0,auto) minmax(var(--_frappe-minimale),1fr) minmax(0,auto);align-items:center}.st-input__champ:focus-visible{outline:var(--st-focus-epaisseur) solid var(--st-couleur-anneau-focus);outline-offset:var(--st-focus-decalage);box-shadow:0 0 0 var(--st-focus-lisere) var(--st-couleur-lisere-focus)}.st-input__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-commande-hauteur, var(--st-hauteur-commande-defaut))}.st-input__champ:is(input,select){block-size:var(--st-commande-hauteur, var(--st-hauteur-commande-defaut))}.st-input__champ{--_remplissage-bloc: max( var(--st-espacement-demi), min( var(--st-espacement-2), calc( (var(--st-commande-hauteur, var(--st-hauteur-commande-defaut)) - var(--st-interligne-sm)) / 2 - var(--st-epaisseur-fine) ) ) );padding-block:var(--_remplissage-bloc);padding-inline:var(--st-espacement-3-5);font-family:inherit;font-size:var(--st-taille-sm);font-weight:var(--st-graisse-normale);line-height:var(--st-interligne-sm);color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:var(--st-epaisseur-fine) solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}@media(pointer:coarse){.st-input__champ{--_remplissage-bloc: max( var(--st-espacement-demi), min( var(--st-espacement-2), calc( ( var(--st-commande-hauteur, var(--st-hauteur-commande-defaut)) - var( --st-interligne-md ) ) / 2 - var(--st-epaisseur-fine) ) ) );font-size:var(--st-taille-md);line-height:var(--st-interligne-md)}}@media(hover:hover){.st-input__champ:hover:not(:disabled,:focus,[aria-invalid=true]){border-color:var(--st-couleur-texte-discret);transition:border-color var(--st-duree-rapide) var(--st-courbe-standard)}}.st-input__champ:focus-visible{border-color:var(--st-couleur-primaire)}.st-input__champ[aria-invalid=true]{border-color:var(--st-couleur-erreur);box-shadow:inset 0 0 0 var(--st-epaisseur-fine) var(--st-couleur-erreur)}.st-input__champ[aria-invalid=true]:focus-visible{outline:var(--st-focus-epaisseur) solid var(--st-couleur-anneau-focus);outline-offset:var(--st-focus-decalage);box-shadow:0 0 0 var(--st-focus-lisere) var(--st-couleur-lisere-focus),inset 0 0 0 var(--st-epaisseur-fine) var(--st-couleur-erreur)}.st-input__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface);border-color:var(--st-couleur-bordure)}.st-input__champ:disabled::placeholder{color:var(--st-couleur-texte-desactive)}.st-input__champ:is(input,textarea):read-only:not(:disabled),.st-input__champ[aria-readonly=true]:not(:disabled){font-weight:var(--st-graisse-moyenne);background:var(--st-couleur-surface-enfoncee)}.st-input__champ::placeholder{color:var(--st-couleur-texte-attenue);opacity:1}.st-input__champ{grid-column:2}.st-input__champ[data-chiffres=reference]{font-family:var(--st-police-mono);font-variant-numeric:var(--st-chiffres-references)}.st-input__prefixe,.st-input__suffixe{display:inline-flex;gap:var(--st-espacement-2);align-items:center;font-size:var(--st-taille-sm);line-height:var(--st-interligne-sm);color:var(--st-couleur-texte-attenue);white-space:nowrap;cursor:text}.st-input__prefixe:empty,.st-input__suffixe:empty{display:none}.st-input__prefixe,.st-input__suffixe{min-inline-size:0}.st-input__prefixe>::ng-deep :is([stPrefixe],[stSuffixe]):not(a,button,input,select,textarea,st-icon),.st-input__suffixe>::ng-deep :is([stPrefixe],[stSuffixe]):not(a,button,input,select,textarea,st-icon){min-inline-size:0;overflow:hidden;text-overflow:ellipsis}.st-input__prefixe{grid-column:1}.st-input__suffixe{grid-column:3}.st-input__attente{display:inline-flex}.st-input__cadre:has(>.st-input__prefixe:not(:empty),>.st-input__suffixe:not(:empty)){cursor:text}.st-input__cadre:has(>.st-input__prefixe:not(:empty),>.st-input__suffixe:not(:empty)):has(>.st-input__champ:focus-visible){outline:var(--st-focus-epaisseur) solid var(--st-couleur-anneau-focus);outline-offset:var(--st-focus-decalage);box-shadow:0 0 0 var(--st-focus-lisere) var(--st-couleur-lisere-focus)}.st-input__cadre:has(>.st-input__prefixe:not(:empty),>.st-input__suffixe:not(:empty)){box-sizing:border-box;block-size:var(--st-commande-hauteur, var(--st-hauteur-commande-defaut));color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:var(--st-epaisseur-fine) solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}.st-input__cadre:has(>.st-input__prefixe:not(:empty),>.st-input__suffixe:not(:empty))>.st-input__champ{margin-block:calc(-1 * var(--st-epaisseur-fine));background:transparent;border:0;border-radius:0;box-shadow:none;outline:none}@media(hover:hover){.st-input__cadre:has(>.st-input__prefixe:not(:empty),>.st-input__suffixe:not(:empty)):hover:not(:has(>.st-input__champ:is(:disabled,:focus,[aria-invalid=true]))){border-color:var(--st-couleur-texte-discret);transition:border-color var(--st-duree-rapide) var(--st-courbe-standard)}}.st-input__cadre:has(>.st-input__prefixe:not(:empty),>.st-input__suffixe:not(:empty)):has(>.st-input__champ:focus-visible){border-color:var(--st-couleur-primaire)}.st-input__cadre:has(>.st-input__prefixe:not(:empty),>.st-input__suffixe:not(:empty)):has(>.st-input__champ[aria-invalid=true]){border-color:var(--st-couleur-erreur);box-shadow:inset 0 0 0 var(--st-epaisseur-fine) var(--st-couleur-erreur)}.st-input__cadre:has(>.st-input__prefixe:not(:empty),>.st-input__suffixe:not(:empty)):has(>.st-input__champ[aria-invalid=true]):has(>.st-input__champ:focus-visible){outline:var(--st-focus-epaisseur) solid var(--st-couleur-anneau-focus);outline-offset:var(--st-focus-decalage);box-shadow:0 0 0 var(--st-focus-lisere) var(--st-couleur-lisere-focus),inset 0 0 0 var(--st-epaisseur-fine) var(--st-couleur-erreur)}.st-input__cadre:has(>.st-input__prefixe:not(:empty),>.st-input__suffixe:not(:empty)):has(>.st-input__champ:disabled){color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface);border-color:var(--st-couleur-bordure)}.st-input__cadre:has(>.st-input__prefixe:not(:empty),>.st-input__suffixe:not(:empty)):has(>.st-input__champ:is(input,textarea):read-only:not(:disabled)),.st-input__cadre:has(>.st-input__prefixe:not(:empty),>.st-input__suffixe:not(:empty)):has(>.st-input__champ[aria-readonly=true]:not(:disabled)){background:var(--st-couleur-surface-enfoncee)}.st-input__cadre:has(>.st-input__prefixe:not(:empty)){padding-inline-start:var(--st-espacement-4)}.st-input__cadre:has(>.st-input__prefixe:not(:empty))>.st-input__champ{padding-inline-start:var(--st-espacement-2)}.st-input__cadre:has(>.st-input__suffixe:not(:empty)){padding-inline-end:var(--st-espacement-4)}.st-input__cadre:has(>.st-input__suffixe:not(:empty))>.st-input__champ{padding-inline-end:var(--st-espacement-2)}.st-input__cadre:has(>.st-input__champ:disabled) :is(.st-input__prefixe,.st-input__suffixe){color:var(--st-couleur-texte-desactive);cursor:inherit}@media print{.st-input__champ,.st-input__cadre{box-shadow:none}.st-input__attente{display:none}}:host([data-depassement]) ::ng-deep .st-form-field__complement{color:var(--st-couleur-erreur)}\n"],
|
|
1518
1527
|
dependencies: [
|
|
1519
1528
|
{
|
|
1520
1529
|
kind: "component",
|
|
@@ -1585,8 +1594,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1585
1594
|
class: "st-input",
|
|
1586
1595
|
"[attr.data-depassement]": "enDepassement() ? \"\" : null"
|
|
1587
1596
|
},
|
|
1588
|
-
template: "<st-form-field\n [libelle]=\"libelle()\"\n [aide]=\"aideAffichee()\"\n [complement]=\"compteur()\"\n [erreurs]=\"erreurs()\"\n [afficherErreurs]=\"afficherErreurs()\"\n [obligatoire]=\"required()\"\n [presentation]=\"presentation()\"\n [descriptionsDuControle]=\"descriptionsDuControle()\"\n>\n <!-- Meta, aide contextuelle (lot 265) et indication de l'application, relayees a l'enveloppe\n (lot 215). -->\n <ng-content select=\"[stMeta]\" ngProjectAs=\"[stMeta]\" />\n <ng-content select=\"[stAide]\" ngProjectAs=\"[stAide]\" />\n <ng-content select=\"[stIndication]\" ngProjectAs=\"[stIndication]\" />\n <!-- Le cadre : prefixe, zone de frappe, suffixe. Sans emplacement rempli, il s'efface et\n l'input porte seul l'apparence du champ ; avec, il la porte a sa place (EA-11). -->\n <div class=\"st-input__cadre\" (mousedown)=\"surPressionDuCadre($event)\">\n <span #prefixe class=\"st-input__prefixe\" [id]=\"idPrefixe\">\n @if (icone(); as nom) {\n <st-icon class=\"st-input__icone\" [nom]=\"nom\" taille=\"20\" />\n }\n <ng-content select=\"[stPrefixe]\"\n /></span>\n <input\n #champ\n class=\"st-input__champ\"\n stControleDeChamp\n [attr.data-chiffres]=\"chiffres()\"\n [type]=\"type()\"\n [value]=\"value()\"\n [attr.name]=\"name() || null\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.inputmode]=\"inputmode()\"\n [attr.dir]=\"sens()\"\n [attr.aria-busy]=\"pending() ? 'true' : null\"\n [attr.list]=\"avecSuggestions() ? idDesSuggestions : null\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n (input)=\"surSaisie($event)\"\n (blur)=\"surSortie()\"\n />\n <!-- Des valeurs proposees, jamais imposees : la liste native du navigateur (D133). -->\n @if (avecSuggestions()) {\n <datalist [id]=\"idDesSuggestions\">\n @for (suggestion of suggestions() ?? []; track $index) {\n <option [value]=\"suggestion\"></option>\n }\n </datalist>\n }\n <span #suffixe class=\"st-input__suffixe\" [id]=\"idSuffixe\"\n ><ng-content select=\"[stSuffixe]\" />\n @if (attenteVisible()) {\n <span class=\"st-input__attente\" aria-hidden=\"true\"\n ><st-spinner taille=\"sm\" ton=\"neutre\"\n /></span>\n }\n </span>\n </div>\n</st-form-field>\n<!-- Les seuils du compteur (20, 10, 0 restants) et le depassement : seulement avec maxLength. -->\n@if (compteur() !== null) {\n <span class=\"st-vh\" aria-live=\"polite\">{{ annonce.texte() }}</span>\n}\n",
|
|
1589
|
-
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__cadre{--_frappe-minimale: min(100%, calc(8ch + var(--st-espacement-3-5) + var(--st-espacement-2)));display:grid;grid-template-columns:minmax(0,auto) minmax(var(--_frappe-minimale),1fr) minmax(0,auto);align-items:center}.st-input__champ:focus-visible{outline:var(--st-focus-epaisseur) solid var(--st-couleur-anneau-focus);outline-offset:var(--st-focus-decalage);box-shadow:0 0 0 var(--st-focus-lisere) var(--st-couleur-lisere-focus)}.st-input__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-commande-hauteur, var(--st-hauteur-commande-defaut))}.st-input__champ:is(input,select){block-size:var(--st-commande-hauteur, var(--st-hauteur-commande-defaut))}.st-input__champ{--_remplissage-bloc: max( var(--st-espacement-demi), min( var(--st-espacement-2), calc( (var(--st-commande-hauteur, var(--st-hauteur-commande-defaut)) - var(--st-interligne-sm)) / 2 - var(--st-epaisseur-fine) ) ) );padding-block:var(--_remplissage-bloc);padding-inline:var(--st-espacement-3-5);font-family:inherit;font-size:var(--st-taille-sm);font-weight:var(--st-graisse-normale);line-height:var(--st-interligne-sm);color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:var(--st-epaisseur-fine) solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}@media(pointer:coarse){.st-input__champ{--_remplissage-bloc: max( var(--st-espacement-demi), min( var(--st-espacement-2), calc( ( var(--st-commande-hauteur, var(--st-hauteur-commande-defaut)) - var( --st-interligne-md ) ) / 2 - var(--st-epaisseur-fine) ) ) );font-size:var(--st-taille-md);line-height:var(--st-interligne-md)}}
|
|
1597
|
+
template: "<st-form-field\n [libelle]=\"libelle()\"\n [aide]=\"aideAffichee()\"\n [complement]=\"compteur()\"\n [erreurs]=\"erreurs()\"\n [afficherErreurs]=\"afficherErreurs()\"\n [obligatoire]=\"required()\"\n [presentation]=\"presentation()\"\n [descriptionsDuControle]=\"descriptionsDuControle()\"\n>\n <!-- Meta, aide contextuelle (lot 265) et indication de l'application, relayees a l'enveloppe\n (lot 215). -->\n <ng-content select=\"[stMeta]\" ngProjectAs=\"[stMeta]\" />\n <ng-content select=\"[stAide]\" ngProjectAs=\"[stAide]\" />\n <ng-content select=\"[stIndication]\" ngProjectAs=\"[stIndication]\" />\n <!-- Le cadre : prefixe, zone de frappe, suffixe. Sans emplacement rempli, il s'efface et\n l'input porte seul l'apparence du champ ; avec, il la porte a sa place (EA-11). -->\n <div class=\"st-input__cadre\" (mousedown)=\"surPressionDuCadre($event)\">\n <span #prefixe class=\"st-input__prefixe\" [id]=\"idPrefixe\">\n @if (icone(); as nom) {\n <st-icon class=\"st-input__icone\" [nom]=\"nom\" taille=\"20\" />\n }\n <ng-content select=\"[stPrefixe]\"\n /></span>\n <input\n #champ\n class=\"st-input__champ\"\n stControleDeChamp\n [attr.data-chiffres]=\"chiffres()\"\n [type]=\"type()\"\n [value]=\"value()\"\n [attr.name]=\"name() || null\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.inputmode]=\"inputmode()\"\n [attr.placeholder]=\"exemple()\"\n [attr.dir]=\"sens()\"\n [attr.aria-busy]=\"pending() ? 'true' : null\"\n [attr.list]=\"avecSuggestions() ? idDesSuggestions : null\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n (input)=\"surSaisie($event)\"\n (blur)=\"surSortie()\"\n />\n <!-- Des valeurs proposees, jamais imposees : la liste native du navigateur (D133). -->\n @if (avecSuggestions()) {\n <datalist [id]=\"idDesSuggestions\">\n @for (suggestion of suggestions() ?? []; track $index) {\n <option [value]=\"suggestion\"></option>\n }\n </datalist>\n }\n <span #suffixe class=\"st-input__suffixe\" [id]=\"idSuffixe\"\n ><ng-content select=\"[stSuffixe]\" />\n @if (attenteVisible()) {\n <span class=\"st-input__attente\" aria-hidden=\"true\"\n ><st-spinner taille=\"sm\" ton=\"neutre\"\n /></span>\n }\n </span>\n </div>\n</st-form-field>\n<!-- Les seuils du compteur (20, 10, 0 restants) et le depassement : seulement avec maxLength. -->\n@if (compteur() !== null) {\n <span class=\"st-vh\" aria-live=\"polite\">{{ annonce.texte() }}</span>\n}\n",
|
|
1598
|
+
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__cadre{--_frappe-minimale: min(100%, calc(8ch + var(--st-espacement-3-5) + var(--st-espacement-2)));display:grid;grid-template-columns:minmax(0,auto) minmax(var(--_frappe-minimale),1fr) minmax(0,auto);align-items:center}.st-input__champ:focus-visible{outline:var(--st-focus-epaisseur) solid var(--st-couleur-anneau-focus);outline-offset:var(--st-focus-decalage);box-shadow:0 0 0 var(--st-focus-lisere) var(--st-couleur-lisere-focus)}.st-input__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-commande-hauteur, var(--st-hauteur-commande-defaut))}.st-input__champ:is(input,select){block-size:var(--st-commande-hauteur, var(--st-hauteur-commande-defaut))}.st-input__champ{--_remplissage-bloc: max( var(--st-espacement-demi), min( var(--st-espacement-2), calc( (var(--st-commande-hauteur, var(--st-hauteur-commande-defaut)) - var(--st-interligne-sm)) / 2 - var(--st-epaisseur-fine) ) ) );padding-block:var(--_remplissage-bloc);padding-inline:var(--st-espacement-3-5);font-family:inherit;font-size:var(--st-taille-sm);font-weight:var(--st-graisse-normale);line-height:var(--st-interligne-sm);color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:var(--st-epaisseur-fine) solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}@media(pointer:coarse){.st-input__champ{--_remplissage-bloc: max( var(--st-espacement-demi), min( var(--st-espacement-2), calc( ( var(--st-commande-hauteur, var(--st-hauteur-commande-defaut)) - var( --st-interligne-md ) ) / 2 - var(--st-epaisseur-fine) ) ) );font-size:var(--st-taille-md);line-height:var(--st-interligne-md)}}@media(hover:hover){.st-input__champ:hover:not(:disabled,:focus,[aria-invalid=true]){border-color:var(--st-couleur-texte-discret);transition:border-color var(--st-duree-rapide) var(--st-courbe-standard)}}.st-input__champ:focus-visible{border-color:var(--st-couleur-primaire)}.st-input__champ[aria-invalid=true]{border-color:var(--st-couleur-erreur);box-shadow:inset 0 0 0 var(--st-epaisseur-fine) var(--st-couleur-erreur)}.st-input__champ[aria-invalid=true]:focus-visible{outline:var(--st-focus-epaisseur) solid var(--st-couleur-anneau-focus);outline-offset:var(--st-focus-decalage);box-shadow:0 0 0 var(--st-focus-lisere) var(--st-couleur-lisere-focus),inset 0 0 0 var(--st-epaisseur-fine) var(--st-couleur-erreur)}.st-input__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface);border-color:var(--st-couleur-bordure)}.st-input__champ:disabled::placeholder{color:var(--st-couleur-texte-desactive)}.st-input__champ:is(input,textarea):read-only:not(:disabled),.st-input__champ[aria-readonly=true]:not(:disabled){font-weight:var(--st-graisse-moyenne);background:var(--st-couleur-surface-enfoncee)}.st-input__champ::placeholder{color:var(--st-couleur-texte-attenue);opacity:1}.st-input__champ{grid-column:2}.st-input__champ[data-chiffres=reference]{font-family:var(--st-police-mono);font-variant-numeric:var(--st-chiffres-references)}.st-input__prefixe,.st-input__suffixe{display:inline-flex;gap:var(--st-espacement-2);align-items:center;font-size:var(--st-taille-sm);line-height:var(--st-interligne-sm);color:var(--st-couleur-texte-attenue);white-space:nowrap;cursor:text}.st-input__prefixe:empty,.st-input__suffixe:empty{display:none}.st-input__prefixe,.st-input__suffixe{min-inline-size:0}.st-input__prefixe>::ng-deep :is([stPrefixe],[stSuffixe]):not(a,button,input,select,textarea,st-icon),.st-input__suffixe>::ng-deep :is([stPrefixe],[stSuffixe]):not(a,button,input,select,textarea,st-icon){min-inline-size:0;overflow:hidden;text-overflow:ellipsis}.st-input__prefixe{grid-column:1}.st-input__suffixe{grid-column:3}.st-input__attente{display:inline-flex}.st-input__cadre:has(>.st-input__prefixe:not(:empty),>.st-input__suffixe:not(:empty)){cursor:text}.st-input__cadre:has(>.st-input__prefixe:not(:empty),>.st-input__suffixe:not(:empty)):has(>.st-input__champ:focus-visible){outline:var(--st-focus-epaisseur) solid var(--st-couleur-anneau-focus);outline-offset:var(--st-focus-decalage);box-shadow:0 0 0 var(--st-focus-lisere) var(--st-couleur-lisere-focus)}.st-input__cadre:has(>.st-input__prefixe:not(:empty),>.st-input__suffixe:not(:empty)){box-sizing:border-box;block-size:var(--st-commande-hauteur, var(--st-hauteur-commande-defaut));color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:var(--st-epaisseur-fine) solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}.st-input__cadre:has(>.st-input__prefixe:not(:empty),>.st-input__suffixe:not(:empty))>.st-input__champ{margin-block:calc(-1 * var(--st-epaisseur-fine));background:transparent;border:0;border-radius:0;box-shadow:none;outline:none}@media(hover:hover){.st-input__cadre:has(>.st-input__prefixe:not(:empty),>.st-input__suffixe:not(:empty)):hover:not(:has(>.st-input__champ:is(:disabled,:focus,[aria-invalid=true]))){border-color:var(--st-couleur-texte-discret);transition:border-color var(--st-duree-rapide) var(--st-courbe-standard)}}.st-input__cadre:has(>.st-input__prefixe:not(:empty),>.st-input__suffixe:not(:empty)):has(>.st-input__champ:focus-visible){border-color:var(--st-couleur-primaire)}.st-input__cadre:has(>.st-input__prefixe:not(:empty),>.st-input__suffixe:not(:empty)):has(>.st-input__champ[aria-invalid=true]){border-color:var(--st-couleur-erreur);box-shadow:inset 0 0 0 var(--st-epaisseur-fine) var(--st-couleur-erreur)}.st-input__cadre:has(>.st-input__prefixe:not(:empty),>.st-input__suffixe:not(:empty)):has(>.st-input__champ[aria-invalid=true]):has(>.st-input__champ:focus-visible){outline:var(--st-focus-epaisseur) solid var(--st-couleur-anneau-focus);outline-offset:var(--st-focus-decalage);box-shadow:0 0 0 var(--st-focus-lisere) var(--st-couleur-lisere-focus),inset 0 0 0 var(--st-epaisseur-fine) var(--st-couleur-erreur)}.st-input__cadre:has(>.st-input__prefixe:not(:empty),>.st-input__suffixe:not(:empty)):has(>.st-input__champ:disabled){color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface);border-color:var(--st-couleur-bordure)}.st-input__cadre:has(>.st-input__prefixe:not(:empty),>.st-input__suffixe:not(:empty)):has(>.st-input__champ:is(input,textarea):read-only:not(:disabled)),.st-input__cadre:has(>.st-input__prefixe:not(:empty),>.st-input__suffixe:not(:empty)):has(>.st-input__champ[aria-readonly=true]:not(:disabled)){background:var(--st-couleur-surface-enfoncee)}.st-input__cadre:has(>.st-input__prefixe:not(:empty)){padding-inline-start:var(--st-espacement-4)}.st-input__cadre:has(>.st-input__prefixe:not(:empty))>.st-input__champ{padding-inline-start:var(--st-espacement-2)}.st-input__cadre:has(>.st-input__suffixe:not(:empty)){padding-inline-end:var(--st-espacement-4)}.st-input__cadre:has(>.st-input__suffixe:not(:empty))>.st-input__champ{padding-inline-end:var(--st-espacement-2)}.st-input__cadre:has(>.st-input__champ:disabled) :is(.st-input__prefixe,.st-input__suffixe){color:var(--st-couleur-texte-desactive);cursor:inherit}@media print{.st-input__champ,.st-input__cadre{box-shadow:none}.st-input__attente{display:none}}:host([data-depassement]) ::ng-deep .st-form-field__complement{color:var(--st-couleur-erreur)}\n"]
|
|
1590
1599
|
}]
|
|
1591
1600
|
}],
|
|
1592
1601
|
ctorParameters: () => [],
|
|
@@ -1631,6 +1640,14 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1631
1640
|
required: false
|
|
1632
1641
|
}]
|
|
1633
1642
|
}],
|
|
1643
|
+
exemple: [{
|
|
1644
|
+
type: i0.Input,
|
|
1645
|
+
args: [{
|
|
1646
|
+
isSignal: true,
|
|
1647
|
+
alias: "exemple",
|
|
1648
|
+
required: false
|
|
1649
|
+
}]
|
|
1650
|
+
}],
|
|
1634
1651
|
chiffres: [{
|
|
1635
1652
|
type: i0.Input,
|
|
1636
1653
|
args: [{
|
|
@@ -5595,6 +5612,9 @@ var StPasswordField = class StPasswordField extends ControleDeSaisie {
|
|
|
5595
5612
|
transform: booleanAttribute
|
|
5596
5613
|
});
|
|
5597
5614
|
motsDeForce = input(null, ...ngDevMode ? [{ debugName: "motsDeForce" }] : /* istanbul ignore next */ []);
|
|
5615
|
+
formeDeJauge = input("compacte", ...ngDevMode ? [{ debugName: "formeDeJauge" }] : /* istanbul ignore next */ []);
|
|
5616
|
+
dispositionDesRegles = input("encadre", ...ngDevMode ? [{ debugName: "dispositionDesRegles" }] : /* istanbul ignore next */ []);
|
|
5617
|
+
icone = input(null, ...ngDevMode ? [{ debugName: "icone" }] : /* istanbul ignore next */ []);
|
|
5598
5618
|
jaugeActive = computed(() => this.jauge() && this.usage() === "creation", ...ngDevMode ? [{ debugName: "jaugeActive" }] : /* istanbul ignore next */ []);
|
|
5599
5619
|
niveauDeForce = signal(0, ...ngDevMode ? [{ debugName: "niveauDeForce" }] : /* istanbul ignore next */ []);
|
|
5600
5620
|
segmentsDeForce = [
|
|
@@ -5602,6 +5622,14 @@ var StPasswordField = class StPasswordField extends ControleDeSaisie {
|
|
|
5602
5622
|
2,
|
|
5603
5623
|
3
|
|
5604
5624
|
];
|
|
5625
|
+
jaugeEtendue = computed(() => this.jaugeActive() && this.formeDeJauge() === "etendue", ...ngDevMode ? [{ debugName: "jaugeEtendue" }] : /* istanbul ignore next */ []);
|
|
5626
|
+
barresPleines = signal(0, ...ngDevMode ? [{ debugName: "barresPleines" }] : /* istanbul ignore next */ []);
|
|
5627
|
+
barresDeForce = [
|
|
5628
|
+
1,
|
|
5629
|
+
2,
|
|
5630
|
+
3,
|
|
5631
|
+
4
|
|
5632
|
+
];
|
|
5605
5633
|
motDeForce = computed(() => {
|
|
5606
5634
|
const niveau = this.niveauDeForce();
|
|
5607
5635
|
if (niveau === 0) return "";
|
|
@@ -5621,10 +5649,12 @@ var StPasswordField = class StPasswordField extends ControleDeSaisie {
|
|
|
5621
5649
|
const valeur = this.value();
|
|
5622
5650
|
return this.regles().map((regle) => typeof regle === "string" ? {
|
|
5623
5651
|
texte: regle,
|
|
5624
|
-
respectee: false
|
|
5652
|
+
respectee: false,
|
|
5653
|
+
testee: false
|
|
5625
5654
|
} : {
|
|
5626
5655
|
texte: regle.texte,
|
|
5627
|
-
respectee: regle.respectee?.(valeur) ?? false
|
|
5656
|
+
respectee: regle.respectee?.(valeur) ?? false,
|
|
5657
|
+
testee: regle.respectee !== void 0
|
|
5628
5658
|
});
|
|
5629
5659
|
}, ...ngDevMode ? [{ debugName: "reglesRendues" }] : /* istanbul ignore next */ []);
|
|
5630
5660
|
titreRendu = computed(() => this.titreDesRegles() ?? this.libelles().reglesDuMotDePasse, ...ngDevMode ? [{ debugName: "titreRendu" }] : /* istanbul ignore next */ []);
|
|
@@ -5637,7 +5667,7 @@ var StPasswordField = class StPasswordField extends ControleDeSaisie {
|
|
|
5637
5667
|
}, ...ngDevMode ? [{ debugName: "compteur" }] : /* istanbul ignore next */ []);
|
|
5638
5668
|
descriptionsDuControle = computed(() => {
|
|
5639
5669
|
const ids = [];
|
|
5640
|
-
if (this.jaugeActive() && this.niveauDeForce() !== 0) ids.push(this.idJauge);
|
|
5670
|
+
if (this.jaugeActive() && !this.jaugeEtendue() && this.niveauDeForce() !== 0) ids.push(this.idJauge);
|
|
5641
5671
|
if (this.reglesRendues().length > 0) ids.push(this.idRegles);
|
|
5642
5672
|
if (this.majusculesVerrouillees()) ids.push(this.idMajuscules);
|
|
5643
5673
|
return ids;
|
|
@@ -5659,6 +5689,7 @@ var StPasswordField = class StPasswordField extends ControleDeSaisie {
|
|
|
5659
5689
|
clearTimeout(this.minuterieDeForce);
|
|
5660
5690
|
if (valeur === "") {
|
|
5661
5691
|
this.niveauDeForce.set(0);
|
|
5692
|
+
this.barresPleines.set(0);
|
|
5662
5693
|
return;
|
|
5663
5694
|
}
|
|
5664
5695
|
this.minuterieDeForce = setTimeout(() => {
|
|
@@ -5675,7 +5706,9 @@ var StPasswordField = class StPasswordField extends ControleDeSaisie {
|
|
|
5675
5706
|
this.estimateur ??= chargeur();
|
|
5676
5707
|
const estimateur = await this.estimateur;
|
|
5677
5708
|
if (valeur !== this.value()) return;
|
|
5678
|
-
const
|
|
5709
|
+
const score = estimateur.estimer(valeur);
|
|
5710
|
+
const niveau = plafonnee ? 1 : niveauDuScore(score);
|
|
5711
|
+
this.barresPleines.set(plafonnee ? 1 : Math.min(4, Math.max(1, Math.round(score))));
|
|
5679
5712
|
if (niveau === this.niveauDeForce()) return;
|
|
5680
5713
|
this.niveauDeForce.set(niveau);
|
|
5681
5714
|
this.annonce.annoncer(this.libelles().forceAnnoncee(this.motDeForce()));
|
|
@@ -5754,6 +5787,27 @@ var StPasswordField = class StPasswordField extends ControleDeSaisie {
|
|
|
5754
5787
|
isSignal: true,
|
|
5755
5788
|
isRequired: false,
|
|
5756
5789
|
transformFunction: null
|
|
5790
|
+
},
|
|
5791
|
+
formeDeJauge: {
|
|
5792
|
+
classPropertyName: "formeDeJauge",
|
|
5793
|
+
publicName: "formeDeJauge",
|
|
5794
|
+
isSignal: true,
|
|
5795
|
+
isRequired: false,
|
|
5796
|
+
transformFunction: null
|
|
5797
|
+
},
|
|
5798
|
+
dispositionDesRegles: {
|
|
5799
|
+
classPropertyName: "dispositionDesRegles",
|
|
5800
|
+
publicName: "dispositionDesRegles",
|
|
5801
|
+
isSignal: true,
|
|
5802
|
+
isRequired: false,
|
|
5803
|
+
transformFunction: null
|
|
5804
|
+
},
|
|
5805
|
+
icone: {
|
|
5806
|
+
classPropertyName: "icone",
|
|
5807
|
+
publicName: "icone",
|
|
5808
|
+
isSignal: true,
|
|
5809
|
+
isRequired: false,
|
|
5810
|
+
transformFunction: null
|
|
5757
5811
|
}
|
|
5758
5812
|
},
|
|
5759
5813
|
host: {
|
|
@@ -5765,8 +5819,8 @@ var StPasswordField = class StPasswordField extends ControleDeSaisie {
|
|
|
5765
5819
|
},
|
|
5766
5820
|
usesInheritance: true,
|
|
5767
5821
|
ngImport: i0,
|
|
5768
|
-
template: "<st-form-field\n [libelle]=\"libelle()\"\n [aide]=\"aideEtRaisons()\"\n [complement]=\"compteur()\"\n [erreurs]=\"errors()\"\n [afficherErreurs]=\"touched()\"\n [obligatoire]=\"required()\"\n [descriptionsDuControle]=\"descriptionsDuControle()\"\n>\n <!-- Meta et indication de l'application (« Aide PIN »), relayees a l'enveloppe. -->\n <ng-content select=\"[stMeta]\" ngProjectAs=\"[stMeta]\" />\n <ng-content select=\"[stAide]\" ngProjectAs=\"[stAide]\" />\n <ng-content select=\"[stIndication]\" ngProjectAs=\"[stIndication]\" />\n <!-- Le bouton de revelation vit DANS le cadre du champ, a sa fin (planche 3a). -->\n <div class=\"st-password-field__cadre\">\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 (keydown)=\"surTouche($event)\"\n (keyup)=\"surTouche($event)\"\n (blur)=\"touch.emit()\"\n />\n <button\n stIconButton\n class=\"st-password-field__oeil\"\n type=\"button\"\n icone=\"oeil\"\n iconeEnfoncee=\"oeil-barre\"\n tailleDuGlyphe=\"20\"\n [etiquette]=\"libelles().afficherLeMotDePasse\"\n [enfonce]=\"revele()\"\n [disabled]=\"disabled() || readonly()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"basculer()\"\n ></button>\n </div>\n</st-form-field>\n\n<!-- A la creation, la zone de Verr. Maj est RESERVEE sous le champ : les regles, que l'on
|
|
5769
|
-
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__cadre{position:relative;min-inline-size:0}.st-password-field__champ:focus-visible{outline:var(--st-focus-epaisseur) solid var(--st-couleur-anneau-focus);outline-offset:var(--st-focus-decalage);box-shadow:0 0 0 var(--st-focus-lisere) var(--st-couleur-lisere-focus)}.st-password-field__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-commande-hauteur, var(--st-hauteur-commande-defaut))}.st-password-field__champ:is(input,select){block-size:var(--st-commande-hauteur, var(--st-hauteur-commande-defaut))}.st-password-field__champ{--_remplissage-bloc: max( var(--st-espacement-demi), min( var(--st-espacement-2), calc( (var(--st-commande-hauteur, var(--st-hauteur-commande-defaut)) - var(--st-interligne-sm)) / 2 - var(--st-epaisseur-fine) ) ) );padding-block:var(--_remplissage-bloc);padding-inline:var(--st-espacement-3-5);font-family:inherit;font-size:var(--st-taille-sm);font-weight:var(--st-graisse-normale);line-height:var(--st-interligne-sm);color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:var(--st-epaisseur-fine) solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}@media(pointer:coarse){.st-password-field__champ{--_remplissage-bloc: max( var(--st-espacement-demi), min( var(--st-espacement-2), calc( ( var(--st-commande-hauteur, var(--st-hauteur-commande-defaut)) - var( --st-interligne-md ) ) / 2 - var(--st-epaisseur-fine) ) ) );font-size:var(--st-taille-md);line-height:var(--st-interligne-md)}}.st-password-field__champ::placeholder{color:var(--st-couleur-texte-attenue);opacity:1}@media(hover:hover){.st-password-field__champ:hover:not(:disabled,:focus,[aria-invalid=true]){border-color:var(--st-couleur-texte-discret);transition:border-color var(--st-duree-rapide) var(--st-courbe-standard)}}.st-password-field__champ:focus-visible{border-color:var(--st-couleur-primaire)}.st-password-field__champ[aria-invalid=true]{border-color:var(--st-couleur-erreur);box-shadow:inset 0 0 0 var(--st-epaisseur-fine) var(--st-couleur-erreur)}.st-password-field__champ[aria-invalid=true]:focus-visible{outline:var(--st-focus-epaisseur) solid var(--st-couleur-anneau-focus);outline-offset:var(--st-focus-decalage);box-shadow:0 0 0 var(--st-focus-lisere) var(--st-couleur-lisere-focus),inset 0 0 0 var(--st-epaisseur-fine) var(--st-couleur-erreur)}.st-password-field__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface);border-color:var(--st-couleur-bordure)}.st-password-field__champ:disabled::placeholder{color:var(--st-couleur-texte-desactive)}.st-password-field__champ:is(input,textarea):read-only:not(:disabled),.st-password-field__champ[aria-readonly=true]:not(:disabled){font-weight:var(--st-graisse-moyenne);background:var(--st-couleur-surface-enfoncee)}.st-password-field__champ{padding-inline-end:var(--st-commande-hauteur, var(--st-hauteur-commande-defaut));letter-spacing:var(--st-interlettrage-capitales)}.st-password-field__oeil{position:absolute;inset-block:0;inset-inline-end:0;inline-size:var(--st-commande-hauteur, var(--st-hauteur-commande-defaut));block-size:auto}.st-password-field__majuscules{margin-block-start:var(--st-espacement-1-5)}.st-password-field__zone-majuscules{min-block-size:var(--st-interligne-xs);margin-block:var(--st-espacement-2)}.st-password-field__zone-majuscules>.st-password-field__majuscules{margin-block-start:0}.st-password-field__zone-majuscules+.st-password-field__regles{margin-block-start:0}.st-password-field__jauge{display:flex;align-items:center;gap:var(--st-espacement-3);min-block-size:var(--st-interligne-sm);margin-block-start:var(--st-espacement-2)}.st-password-field__segments{display:grid;grid-template-columns:repeat(3,var(--st-espacement-8));gap:var(--st-espacement-1)}.st-password-field__segment{block-size:var(--st-espacement-1-5);border:var(--st-epaisseur-capillaire) solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-pleine);forced-color-adjust:none}.st-password-field__segment[data-plein]{background:var(--st-couleur-texte-discret);border-color:var(--st-couleur-texte-discret)}.st-password-field__force{font-size:var(--st-taille-sm);line-height:var(--st-interligne-sm);font-weight:var(--st-graisse-normale);letter-spacing:var(--st-interlettrage-normal);color:var(--st-couleur-texte-discret)}.st-password-field__regles{box-sizing:border-box;margin-block-start:var(--st-espacement-4);padding:var(--st-espacement-3-5);background:var(--st-couleur-surface);border:var(--st-epaisseur-fine) solid var(--st-couleur-surface-active);border-radius:var(--st-rayon-md)}.st-password-field__titre-des-regles{font-size:var(--st-taille-2xs);line-height:var(--st-interligne-2xs);font-weight:var(--st-graisse-semi);letter-spacing:var(--st-interlettrage-capitales);text-transform:uppercase;margin:0 0 var(--st-espacement-2);color:var(--st-couleur-texte-discret)}.st-password-field__liste{display:flex;flex-direction:column;gap:var(--st-espacement-1-5);margin:0;padding:0;font-size:var(--st-taille-xs);line-height:var(--st-interligne-xs);list-style:none}.st-password-field__regle{display:flex;gap:var(--st-espacement-2);align-items:center;color:var(--st-couleur-texte-discret)}.st-password-field__regle[data-respectee]{font-weight:var(--st-graisse-moyenne);color:var(--st-couleur-succes)}.st-password-field__coche{flex:none}\n"],
|
|
5822
|
+
template: "<st-form-field\n [libelle]=\"libelle()\"\n [aide]=\"aideEtRaisons()\"\n [complement]=\"compteur()\"\n [erreurs]=\"errors()\"\n [afficherErreurs]=\"touched()\"\n [obligatoire]=\"required()\"\n [descriptionsDuControle]=\"descriptionsDuControle()\"\n>\n <!-- Meta et indication de l'application (« Aide PIN »), relayees a l'enveloppe. -->\n <ng-content select=\"[stMeta]\" ngProjectAs=\"[stMeta]\" />\n <!-- La jauge etendue (0.11.1) dit son niveau dans la meta : « Force : en attente », puis le mot. -->\n @if (jaugeEtendue()) {\n <span stMeta class=\"st-password-field__force-meta\"\n >{{ libelles().forceDuMotDePasse }} :\n {{ niveauDeForce() === 0 ? libelles().forceEnAttente : motDeForce() }}</span\n >\n }\n <ng-content select=\"[stAide]\" ngProjectAs=\"[stAide]\" />\n <ng-content select=\"[stIndication]\" ngProjectAs=\"[stIndication]\" />\n <!-- Le bouton de revelation vit DANS le cadre du champ, a sa fin (planche 3a). -->\n <div class=\"st-password-field__cadre\" [attr.data-avec-icone]=\"icone() === null ? null : ''\">\n @if (icone(); as nom) {\n <st-icon class=\"st-password-field__icone\" [nom]=\"nom\" taille=\"20\" />\n }\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 (keydown)=\"surTouche($event)\"\n (keyup)=\"surTouche($event)\"\n (blur)=\"touch.emit()\"\n />\n <button\n stIconButton\n class=\"st-password-field__oeil\"\n type=\"button\"\n icone=\"oeil\"\n iconeEnfoncee=\"oeil-barre\"\n tailleDuGlyphe=\"20\"\n [etiquette]=\"libelles().afficherLeMotDePasse\"\n [enfonce]=\"revele()\"\n [disabled]=\"disabled() || readonly()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"basculer()\"\n ></button>\n </div>\n</st-form-field>\n\n<!-- La jauge etendue (0.11.1) : quatre barres collees sous le champ, avant les regles. -->\n@if (jaugeEtendue()) {\n <span\n class=\"st-password-field__barres\"\n role=\"meter\"\n aria-valuemin=\"1\"\n aria-valuemax=\"3\"\n [id]=\"idJauge\"\n [attr.aria-valuenow]=\"niveauDeForce() || null\"\n [attr.aria-valuetext]=\"motDeForce() || null\"\n [attr.aria-label]=\"libelles().forceDuMotDePasse\"\n [attr.aria-hidden]=\"niveauDeForce() === 0 ? 'true' : null\"\n >\n @for (barre of barresDeForce; track barre) {\n <span\n class=\"st-password-field__barre\"\n [attr.data-plein]=\"barresPleines() >= barre ? '' : null\"\n ></span>\n }\n </span>\n}\n\n<!-- A la creation, la zone de Verr. Maj est RESERVEE sous le champ : les regles et la jauge, que l'on\n voit bouger en tapant, ne sautent pas quand la touche bascule. Sans rien qui suive (connexion,\n confirmation, 0.11.1), l'avertissement se pose a la demande ; avec la jauge etendue, sous les\n regles. -->\n@if (usage() === 'creation' && !jaugeEtendue() && (jaugeActive() || reglesRendues().length > 0)) {\n <div class=\"st-password-field__zone-majuscules\">\n @if (majusculesVerrouillees()) {\n <st-inline-message\n class=\"st-password-field__majuscules\"\n ton=\"avertissement\"\n icone=\"fleche-large-haut\"\n [identifiant]=\"idMajuscules\"\n >{{ libelles().verrouillageMajuscules }}</st-inline-message\n >\n }\n </div>\n} @else if (!jaugeEtendue() && majusculesVerrouillees()) {\n <st-inline-message\n class=\"st-password-field__majuscules\"\n ton=\"avertissement\"\n icone=\"fleche-large-haut\"\n encadre\n [identifiant]=\"idMajuscules\"\n >{{ libelles().verrouillageMajuscules }}</st-inline-message\n >\n}\n\n<!-- La jauge de force (ADR web 0011), optionnelle : segments ET mot, jamais la couleur seule ; sa\n place est reservee pour que les regles ne sautent pas a la premiere estimation. -->\n@if (jaugeActive() && !jaugeEtendue()) {\n <div class=\"st-password-field__jauge\" [id]=\"idJauge\">\n <span\n class=\"st-password-field__segments\"\n role=\"meter\"\n aria-valuemin=\"1\"\n aria-valuemax=\"3\"\n [attr.aria-valuenow]=\"niveauDeForce() || null\"\n [attr.aria-valuetext]=\"motDeForce() || null\"\n [attr.aria-label]=\"libelles().forceDuMotDePasse\"\n [attr.aria-hidden]=\"niveauDeForce() === 0 ? 'true' : null\"\n >\n @for (segment of segmentsDeForce; track segment) {\n <span\n class=\"st-password-field__segment\"\n [attr.data-plein]=\"niveauDeForce() >= segment ? '' : null\"\n ></span>\n }\n </span>\n <span class=\"st-password-field__force\">\n @if (niveauDeForce() !== 0) {\n {{ libelles().forceDuMotDePasse }} : <strong>{{ motDeForce() }}</strong>\n }\n </span>\n </div>\n}\n\n@if (reglesRendues().length > 0 && dispositionDesRegles() === 'ligne') {\n <!-- Les regles en ligne (0.11.1) : a la suite, sans carte ni titre ; la coche pour celles qui se testent. -->\n <p class=\"st-password-field__regles-en-ligne\" [id]=\"idRegles\">\n @for (regle of reglesRendues(); track $index) {\n <span\n class=\"st-password-field__regle-en-ligne\"\n [attr.data-respectee]=\"regle.respectee ? '' : null\"\n >\n @if (regle.testee) {\n <st-icon\n class=\"st-password-field__coche\"\n taille=\"16\"\n [nom]=\"regle.respectee ? 'cercle-coche' : 'cercle'\"\n [variante]=\"regle.respectee ? 'plein' : 'contour'\"\n />\n <span\n >{{ regle.texte\n }}<span class=\"st-vh\">\n ({{\n regle.respectee ? libelles().regleRespectee : libelles().regleNonRespectee\n }})</span\n ></span\n >\n } @else {\n <span>{{ regle.texte }}</span>\n }\n </span>\n }\n </p>\n} @else if (reglesRendues().length > 0) {\n <div class=\"st-password-field__regles\" [id]=\"idRegles\">\n <p class=\"st-password-field__titre-des-regles\">{{ titreRendu() }}</p>\n <!-- `role=\"list\"` : sans puces, Safari ne lit plus une liste comme une liste (D-1). -->\n <ul class=\"st-password-field__liste\" role=\"list\">\n @for (regle of reglesRendues(); track $index) {\n <li class=\"st-password-field__regle\" [attr.data-respectee]=\"regle.respectee ? '' : null\">\n <st-icon\n class=\"st-password-field__coche\"\n taille=\"16\"\n [nom]=\"regle.respectee ? 'cercle-coche' : 'cercle'\"\n [variante]=\"regle.respectee ? 'plein' : 'contour'\"\n />\n <span class=\"st-password-field__texte-de-regle\">{{ regle.texte }}</span>\n <!-- L'etat en mots, apres la phrase : la coche ne se lit pas qu'a la forme. -->\n <span class=\"st-vh\">\n ({{ regle.respectee ? libelles().regleRespectee : libelles().regleNonRespectee }})</span\n >\n </li>\n }\n </ul>\n </div>\n}\n\n@if (jaugeEtendue() && majusculesVerrouillees()) {\n <st-inline-message\n class=\"st-password-field__majuscules\"\n ton=\"avertissement\"\n icone=\"fleche-large-haut\"\n [identifiant]=\"idMajuscules\"\n >{{ libelles().verrouillageMajuscules }}</st-inline-message\n >\n}\n\n<span class=\"st-vh\" aria-live=\"polite\">{{ annonce.texte() }}</span>\n",
|
|
5823
|
+
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__cadre{position:relative;min-inline-size:0}.st-password-field__champ:focus-visible{outline:var(--st-focus-epaisseur) solid var(--st-couleur-anneau-focus);outline-offset:var(--st-focus-decalage);box-shadow:0 0 0 var(--st-focus-lisere) var(--st-couleur-lisere-focus)}.st-password-field__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-commande-hauteur, var(--st-hauteur-commande-defaut))}.st-password-field__champ:is(input,select){block-size:var(--st-commande-hauteur, var(--st-hauteur-commande-defaut))}.st-password-field__champ{--_remplissage-bloc: max( var(--st-espacement-demi), min( var(--st-espacement-2), calc( (var(--st-commande-hauteur, var(--st-hauteur-commande-defaut)) - var(--st-interligne-sm)) / 2 - var(--st-epaisseur-fine) ) ) );padding-block:var(--_remplissage-bloc);padding-inline:var(--st-espacement-3-5);font-family:inherit;font-size:var(--st-taille-sm);font-weight:var(--st-graisse-normale);line-height:var(--st-interligne-sm);color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:var(--st-epaisseur-fine) solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}@media(pointer:coarse){.st-password-field__champ{--_remplissage-bloc: max( var(--st-espacement-demi), min( var(--st-espacement-2), calc( ( var(--st-commande-hauteur, var(--st-hauteur-commande-defaut)) - var( --st-interligne-md ) ) / 2 - var(--st-epaisseur-fine) ) ) );font-size:var(--st-taille-md);line-height:var(--st-interligne-md)}}.st-password-field__champ::placeholder{color:var(--st-couleur-texte-attenue);opacity:1}@media(hover:hover){.st-password-field__champ:hover:not(:disabled,:focus,[aria-invalid=true]){border-color:var(--st-couleur-texte-discret);transition:border-color var(--st-duree-rapide) var(--st-courbe-standard)}}.st-password-field__champ:focus-visible{border-color:var(--st-couleur-primaire)}.st-password-field__champ[aria-invalid=true]{border-color:var(--st-couleur-erreur);box-shadow:inset 0 0 0 var(--st-epaisseur-fine) var(--st-couleur-erreur)}.st-password-field__champ[aria-invalid=true]:focus-visible{outline:var(--st-focus-epaisseur) solid var(--st-couleur-anneau-focus);outline-offset:var(--st-focus-decalage);box-shadow:0 0 0 var(--st-focus-lisere) var(--st-couleur-lisere-focus),inset 0 0 0 var(--st-epaisseur-fine) var(--st-couleur-erreur)}.st-password-field__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface);border-color:var(--st-couleur-bordure)}.st-password-field__champ:disabled::placeholder{color:var(--st-couleur-texte-desactive)}.st-password-field__champ:is(input,textarea):read-only:not(:disabled),.st-password-field__champ[aria-readonly=true]:not(:disabled){font-weight:var(--st-graisse-moyenne);background:var(--st-couleur-surface-enfoncee)}.st-password-field__champ{padding-inline-end:var(--st-commande-hauteur, var(--st-hauteur-commande-defaut));letter-spacing:var(--st-interlettrage-capitales)}.st-password-field__champ::-ms-reveal,.st-password-field__champ::-ms-clear{display:none}.st-password-field__icone{position:absolute;inset-block:0;inset-inline-start:var(--st-espacement-3-5);block-size:var(--st-espacement-5);margin-block:auto;color:var(--st-couleur-texte-attenue);pointer-events:none}.st-password-field__cadre[data-avec-icone] .st-password-field__champ{padding-inline-start:calc(var(--st-espacement-3-5) + var(--st-espacement-5) + var(--st-espacement-2-5))}.st-password-field__force-meta{white-space:nowrap}.st-password-field__barres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--st-espacement-1-5);margin-block-start:var(--st-espacement-1-5)}.st-password-field__barre{block-size:var(--st-espacement-1);background:var(--st-couleur-surface-active);border-radius:var(--st-rayon-xs);forced-color-adjust:none}.st-password-field__barre[data-plein]{background:var(--st-couleur-texte-discret)}.st-password-field__regles-en-ligne{margin:var(--st-espacement-1-5) 0 0;font-size:var(--st-taille-xs);line-height:var(--st-interligne-xs);color:var(--st-couleur-texte-discret)}.st-password-field__regle-en-ligne+.st-password-field__regle-en-ligne{margin-inline-start:var(--st-espacement-1)}.st-password-field__regle-en-ligne>.st-password-field__coche{margin-inline-end:var(--st-espacement-1);vertical-align:text-bottom}.st-password-field__regle-en-ligne[data-respectee]{font-weight:var(--st-graisse-moyenne);color:var(--st-couleur-succes)}.st-password-field__oeil{position:absolute;inset-block:0;inset-inline-end:0;inline-size:var(--st-commande-hauteur, var(--st-hauteur-commande-defaut));block-size:auto}.st-password-field__majuscules{margin-block-start:var(--st-espacement-1-5)}.st-password-field__zone-majuscules{min-block-size:var(--st-interligne-xs);margin-block:var(--st-espacement-2)}.st-password-field__zone-majuscules>.st-password-field__majuscules{margin-block-start:0}.st-password-field__zone-majuscules+.st-password-field__regles{margin-block-start:0}.st-password-field__jauge{display:flex;align-items:center;gap:var(--st-espacement-3);min-block-size:var(--st-interligne-sm);margin-block-start:var(--st-espacement-2)}.st-password-field__segments{display:grid;grid-template-columns:repeat(3,var(--st-espacement-8));gap:var(--st-espacement-1)}.st-password-field__segment{block-size:var(--st-espacement-1-5);border:var(--st-epaisseur-capillaire) solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-pleine);forced-color-adjust:none}.st-password-field__segment[data-plein]{background:var(--st-couleur-texte-discret);border-color:var(--st-couleur-texte-discret)}.st-password-field__force{font-size:var(--st-taille-sm);line-height:var(--st-interligne-sm);font-weight:var(--st-graisse-normale);letter-spacing:var(--st-interlettrage-normal);color:var(--st-couleur-texte-discret)}.st-password-field__regles{box-sizing:border-box;margin-block-start:var(--st-espacement-4);padding:var(--st-espacement-3-5);background:var(--st-couleur-surface);border:var(--st-epaisseur-fine) solid var(--st-couleur-surface-active);border-radius:var(--st-rayon-md)}.st-password-field__titre-des-regles{font-size:var(--st-taille-2xs);line-height:var(--st-interligne-2xs);font-weight:var(--st-graisse-semi);letter-spacing:var(--st-interlettrage-capitales);text-transform:uppercase;margin:0 0 var(--st-espacement-2);color:var(--st-couleur-texte-discret)}.st-password-field__liste{display:flex;flex-direction:column;gap:var(--st-espacement-1-5);margin:0;padding:0;font-size:var(--st-taille-xs);line-height:var(--st-interligne-xs);list-style:none}.st-password-field__regle{display:flex;gap:var(--st-espacement-2);align-items:center;color:var(--st-couleur-texte-discret)}.st-password-field__regle[data-respectee]{font-weight:var(--st-graisse-moyenne);color:var(--st-couleur-succes)}.st-password-field__coche{flex:none}\n"],
|
|
5770
5824
|
dependencies: [
|
|
5771
5825
|
{
|
|
5772
5826
|
kind: "component",
|
|
@@ -5857,8 +5911,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
5857
5911
|
"(focusout)": "aLaSortie($event)",
|
|
5858
5912
|
"(window:beforeprint)": "remasquer()"
|
|
5859
5913
|
},
|
|
5860
|
-
template: "<st-form-field\n [libelle]=\"libelle()\"\n [aide]=\"aideEtRaisons()\"\n [complement]=\"compteur()\"\n [erreurs]=\"errors()\"\n [afficherErreurs]=\"touched()\"\n [obligatoire]=\"required()\"\n [descriptionsDuControle]=\"descriptionsDuControle()\"\n>\n <!-- Meta et indication de l'application (« Aide PIN »), relayees a l'enveloppe. -->\n <ng-content select=\"[stMeta]\" ngProjectAs=\"[stMeta]\" />\n <ng-content select=\"[stAide]\" ngProjectAs=\"[stAide]\" />\n <ng-content select=\"[stIndication]\" ngProjectAs=\"[stIndication]\" />\n <!-- Le bouton de revelation vit DANS le cadre du champ, a sa fin (planche 3a). -->\n <div class=\"st-password-field__cadre\">\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 (keydown)=\"surTouche($event)\"\n (keyup)=\"surTouche($event)\"\n (blur)=\"touch.emit()\"\n />\n <button\n stIconButton\n class=\"st-password-field__oeil\"\n type=\"button\"\n icone=\"oeil\"\n iconeEnfoncee=\"oeil-barre\"\n tailleDuGlyphe=\"20\"\n [etiquette]=\"libelles().afficherLeMotDePasse\"\n [enfonce]=\"revele()\"\n [disabled]=\"disabled() || readonly()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"basculer()\"\n ></button>\n </div>\n</st-form-field>\n\n<!-- A la creation, la zone de Verr. Maj est RESERVEE sous le champ : les regles, que l'on
|
|
5861
|
-
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__cadre{position:relative;min-inline-size:0}.st-password-field__champ:focus-visible{outline:var(--st-focus-epaisseur) solid var(--st-couleur-anneau-focus);outline-offset:var(--st-focus-decalage);box-shadow:0 0 0 var(--st-focus-lisere) var(--st-couleur-lisere-focus)}.st-password-field__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-commande-hauteur, var(--st-hauteur-commande-defaut))}.st-password-field__champ:is(input,select){block-size:var(--st-commande-hauteur, var(--st-hauteur-commande-defaut))}.st-password-field__champ{--_remplissage-bloc: max( var(--st-espacement-demi), min( var(--st-espacement-2), calc( (var(--st-commande-hauteur, var(--st-hauteur-commande-defaut)) - var(--st-interligne-sm)) / 2 - var(--st-epaisseur-fine) ) ) );padding-block:var(--_remplissage-bloc);padding-inline:var(--st-espacement-3-5);font-family:inherit;font-size:var(--st-taille-sm);font-weight:var(--st-graisse-normale);line-height:var(--st-interligne-sm);color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:var(--st-epaisseur-fine) solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}@media(pointer:coarse){.st-password-field__champ{--_remplissage-bloc: max( var(--st-espacement-demi), min( var(--st-espacement-2), calc( ( var(--st-commande-hauteur, var(--st-hauteur-commande-defaut)) - var( --st-interligne-md ) ) / 2 - var(--st-epaisseur-fine) ) ) );font-size:var(--st-taille-md);line-height:var(--st-interligne-md)}}.st-password-field__champ::placeholder{color:var(--st-couleur-texte-attenue);opacity:1}@media(hover:hover){.st-password-field__champ:hover:not(:disabled,:focus,[aria-invalid=true]){border-color:var(--st-couleur-texte-discret);transition:border-color var(--st-duree-rapide) var(--st-courbe-standard)}}.st-password-field__champ:focus-visible{border-color:var(--st-couleur-primaire)}.st-password-field__champ[aria-invalid=true]{border-color:var(--st-couleur-erreur);box-shadow:inset 0 0 0 var(--st-epaisseur-fine) var(--st-couleur-erreur)}.st-password-field__champ[aria-invalid=true]:focus-visible{outline:var(--st-focus-epaisseur) solid var(--st-couleur-anneau-focus);outline-offset:var(--st-focus-decalage);box-shadow:0 0 0 var(--st-focus-lisere) var(--st-couleur-lisere-focus),inset 0 0 0 var(--st-epaisseur-fine) var(--st-couleur-erreur)}.st-password-field__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface);border-color:var(--st-couleur-bordure)}.st-password-field__champ:disabled::placeholder{color:var(--st-couleur-texte-desactive)}.st-password-field__champ:is(input,textarea):read-only:not(:disabled),.st-password-field__champ[aria-readonly=true]:not(:disabled){font-weight:var(--st-graisse-moyenne);background:var(--st-couleur-surface-enfoncee)}.st-password-field__champ{padding-inline-end:var(--st-commande-hauteur, var(--st-hauteur-commande-defaut));letter-spacing:var(--st-interlettrage-capitales)}.st-password-field__oeil{position:absolute;inset-block:0;inset-inline-end:0;inline-size:var(--st-commande-hauteur, var(--st-hauteur-commande-defaut));block-size:auto}.st-password-field__majuscules{margin-block-start:var(--st-espacement-1-5)}.st-password-field__zone-majuscules{min-block-size:var(--st-interligne-xs);margin-block:var(--st-espacement-2)}.st-password-field__zone-majuscules>.st-password-field__majuscules{margin-block-start:0}.st-password-field__zone-majuscules+.st-password-field__regles{margin-block-start:0}.st-password-field__jauge{display:flex;align-items:center;gap:var(--st-espacement-3);min-block-size:var(--st-interligne-sm);margin-block-start:var(--st-espacement-2)}.st-password-field__segments{display:grid;grid-template-columns:repeat(3,var(--st-espacement-8));gap:var(--st-espacement-1)}.st-password-field__segment{block-size:var(--st-espacement-1-5);border:var(--st-epaisseur-capillaire) solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-pleine);forced-color-adjust:none}.st-password-field__segment[data-plein]{background:var(--st-couleur-texte-discret);border-color:var(--st-couleur-texte-discret)}.st-password-field__force{font-size:var(--st-taille-sm);line-height:var(--st-interligne-sm);font-weight:var(--st-graisse-normale);letter-spacing:var(--st-interlettrage-normal);color:var(--st-couleur-texte-discret)}.st-password-field__regles{box-sizing:border-box;margin-block-start:var(--st-espacement-4);padding:var(--st-espacement-3-5);background:var(--st-couleur-surface);border:var(--st-epaisseur-fine) solid var(--st-couleur-surface-active);border-radius:var(--st-rayon-md)}.st-password-field__titre-des-regles{font-size:var(--st-taille-2xs);line-height:var(--st-interligne-2xs);font-weight:var(--st-graisse-semi);letter-spacing:var(--st-interlettrage-capitales);text-transform:uppercase;margin:0 0 var(--st-espacement-2);color:var(--st-couleur-texte-discret)}.st-password-field__liste{display:flex;flex-direction:column;gap:var(--st-espacement-1-5);margin:0;padding:0;font-size:var(--st-taille-xs);line-height:var(--st-interligne-xs);list-style:none}.st-password-field__regle{display:flex;gap:var(--st-espacement-2);align-items:center;color:var(--st-couleur-texte-discret)}.st-password-field__regle[data-respectee]{font-weight:var(--st-graisse-moyenne);color:var(--st-couleur-succes)}.st-password-field__coche{flex:none}\n"]
|
|
5914
|
+
template: "<st-form-field\n [libelle]=\"libelle()\"\n [aide]=\"aideEtRaisons()\"\n [complement]=\"compteur()\"\n [erreurs]=\"errors()\"\n [afficherErreurs]=\"touched()\"\n [obligatoire]=\"required()\"\n [descriptionsDuControle]=\"descriptionsDuControle()\"\n>\n <!-- Meta et indication de l'application (« Aide PIN »), relayees a l'enveloppe. -->\n <ng-content select=\"[stMeta]\" ngProjectAs=\"[stMeta]\" />\n <!-- La jauge etendue (0.11.1) dit son niveau dans la meta : « Force : en attente », puis le mot. -->\n @if (jaugeEtendue()) {\n <span stMeta class=\"st-password-field__force-meta\"\n >{{ libelles().forceDuMotDePasse }} :\n {{ niveauDeForce() === 0 ? libelles().forceEnAttente : motDeForce() }}</span\n >\n }\n <ng-content select=\"[stAide]\" ngProjectAs=\"[stAide]\" />\n <ng-content select=\"[stIndication]\" ngProjectAs=\"[stIndication]\" />\n <!-- Le bouton de revelation vit DANS le cadre du champ, a sa fin (planche 3a). -->\n <div class=\"st-password-field__cadre\" [attr.data-avec-icone]=\"icone() === null ? null : ''\">\n @if (icone(); as nom) {\n <st-icon class=\"st-password-field__icone\" [nom]=\"nom\" taille=\"20\" />\n }\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 (keydown)=\"surTouche($event)\"\n (keyup)=\"surTouche($event)\"\n (blur)=\"touch.emit()\"\n />\n <button\n stIconButton\n class=\"st-password-field__oeil\"\n type=\"button\"\n icone=\"oeil\"\n iconeEnfoncee=\"oeil-barre\"\n tailleDuGlyphe=\"20\"\n [etiquette]=\"libelles().afficherLeMotDePasse\"\n [enfonce]=\"revele()\"\n [disabled]=\"disabled() || readonly()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"basculer()\"\n ></button>\n </div>\n</st-form-field>\n\n<!-- La jauge etendue (0.11.1) : quatre barres collees sous le champ, avant les regles. -->\n@if (jaugeEtendue()) {\n <span\n class=\"st-password-field__barres\"\n role=\"meter\"\n aria-valuemin=\"1\"\n aria-valuemax=\"3\"\n [id]=\"idJauge\"\n [attr.aria-valuenow]=\"niveauDeForce() || null\"\n [attr.aria-valuetext]=\"motDeForce() || null\"\n [attr.aria-label]=\"libelles().forceDuMotDePasse\"\n [attr.aria-hidden]=\"niveauDeForce() === 0 ? 'true' : null\"\n >\n @for (barre of barresDeForce; track barre) {\n <span\n class=\"st-password-field__barre\"\n [attr.data-plein]=\"barresPleines() >= barre ? '' : null\"\n ></span>\n }\n </span>\n}\n\n<!-- A la creation, la zone de Verr. Maj est RESERVEE sous le champ : les regles et la jauge, que l'on\n voit bouger en tapant, ne sautent pas quand la touche bascule. Sans rien qui suive (connexion,\n confirmation, 0.11.1), l'avertissement se pose a la demande ; avec la jauge etendue, sous les\n regles. -->\n@if (usage() === 'creation' && !jaugeEtendue() && (jaugeActive() || reglesRendues().length > 0)) {\n <div class=\"st-password-field__zone-majuscules\">\n @if (majusculesVerrouillees()) {\n <st-inline-message\n class=\"st-password-field__majuscules\"\n ton=\"avertissement\"\n icone=\"fleche-large-haut\"\n [identifiant]=\"idMajuscules\"\n >{{ libelles().verrouillageMajuscules }}</st-inline-message\n >\n }\n </div>\n} @else if (!jaugeEtendue() && majusculesVerrouillees()) {\n <st-inline-message\n class=\"st-password-field__majuscules\"\n ton=\"avertissement\"\n icone=\"fleche-large-haut\"\n encadre\n [identifiant]=\"idMajuscules\"\n >{{ libelles().verrouillageMajuscules }}</st-inline-message\n >\n}\n\n<!-- La jauge de force (ADR web 0011), optionnelle : segments ET mot, jamais la couleur seule ; sa\n place est reservee pour que les regles ne sautent pas a la premiere estimation. -->\n@if (jaugeActive() && !jaugeEtendue()) {\n <div class=\"st-password-field__jauge\" [id]=\"idJauge\">\n <span\n class=\"st-password-field__segments\"\n role=\"meter\"\n aria-valuemin=\"1\"\n aria-valuemax=\"3\"\n [attr.aria-valuenow]=\"niveauDeForce() || null\"\n [attr.aria-valuetext]=\"motDeForce() || null\"\n [attr.aria-label]=\"libelles().forceDuMotDePasse\"\n [attr.aria-hidden]=\"niveauDeForce() === 0 ? 'true' : null\"\n >\n @for (segment of segmentsDeForce; track segment) {\n <span\n class=\"st-password-field__segment\"\n [attr.data-plein]=\"niveauDeForce() >= segment ? '' : null\"\n ></span>\n }\n </span>\n <span class=\"st-password-field__force\">\n @if (niveauDeForce() !== 0) {\n {{ libelles().forceDuMotDePasse }} : <strong>{{ motDeForce() }}</strong>\n }\n </span>\n </div>\n}\n\n@if (reglesRendues().length > 0 && dispositionDesRegles() === 'ligne') {\n <!-- Les regles en ligne (0.11.1) : a la suite, sans carte ni titre ; la coche pour celles qui se testent. -->\n <p class=\"st-password-field__regles-en-ligne\" [id]=\"idRegles\">\n @for (regle of reglesRendues(); track $index) {\n <span\n class=\"st-password-field__regle-en-ligne\"\n [attr.data-respectee]=\"regle.respectee ? '' : null\"\n >\n @if (regle.testee) {\n <st-icon\n class=\"st-password-field__coche\"\n taille=\"16\"\n [nom]=\"regle.respectee ? 'cercle-coche' : 'cercle'\"\n [variante]=\"regle.respectee ? 'plein' : 'contour'\"\n />\n <span\n >{{ regle.texte\n }}<span class=\"st-vh\">\n ({{\n regle.respectee ? libelles().regleRespectee : libelles().regleNonRespectee\n }})</span\n ></span\n >\n } @else {\n <span>{{ regle.texte }}</span>\n }\n </span>\n }\n </p>\n} @else if (reglesRendues().length > 0) {\n <div class=\"st-password-field__regles\" [id]=\"idRegles\">\n <p class=\"st-password-field__titre-des-regles\">{{ titreRendu() }}</p>\n <!-- `role=\"list\"` : sans puces, Safari ne lit plus une liste comme une liste (D-1). -->\n <ul class=\"st-password-field__liste\" role=\"list\">\n @for (regle of reglesRendues(); track $index) {\n <li class=\"st-password-field__regle\" [attr.data-respectee]=\"regle.respectee ? '' : null\">\n <st-icon\n class=\"st-password-field__coche\"\n taille=\"16\"\n [nom]=\"regle.respectee ? 'cercle-coche' : 'cercle'\"\n [variante]=\"regle.respectee ? 'plein' : 'contour'\"\n />\n <span class=\"st-password-field__texte-de-regle\">{{ regle.texte }}</span>\n <!-- L'etat en mots, apres la phrase : la coche ne se lit pas qu'a la forme. -->\n <span class=\"st-vh\">\n ({{ regle.respectee ? libelles().regleRespectee : libelles().regleNonRespectee }})</span\n >\n </li>\n }\n </ul>\n </div>\n}\n\n@if (jaugeEtendue() && majusculesVerrouillees()) {\n <st-inline-message\n class=\"st-password-field__majuscules\"\n ton=\"avertissement\"\n icone=\"fleche-large-haut\"\n [identifiant]=\"idMajuscules\"\n >{{ libelles().verrouillageMajuscules }}</st-inline-message\n >\n}\n\n<span class=\"st-vh\" aria-live=\"polite\">{{ annonce.texte() }}</span>\n",
|
|
5915
|
+
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__cadre{position:relative;min-inline-size:0}.st-password-field__champ:focus-visible{outline:var(--st-focus-epaisseur) solid var(--st-couleur-anneau-focus);outline-offset:var(--st-focus-decalage);box-shadow:0 0 0 var(--st-focus-lisere) var(--st-couleur-lisere-focus)}.st-password-field__champ{box-sizing:border-box;inline-size:100%;min-block-size:var(--st-commande-hauteur, var(--st-hauteur-commande-defaut))}.st-password-field__champ:is(input,select){block-size:var(--st-commande-hauteur, var(--st-hauteur-commande-defaut))}.st-password-field__champ{--_remplissage-bloc: max( var(--st-espacement-demi), min( var(--st-espacement-2), calc( (var(--st-commande-hauteur, var(--st-hauteur-commande-defaut)) - var(--st-interligne-sm)) / 2 - var(--st-epaisseur-fine) ) ) );padding-block:var(--_remplissage-bloc);padding-inline:var(--st-espacement-3-5);font-family:inherit;font-size:var(--st-taille-sm);font-weight:var(--st-graisse-normale);line-height:var(--st-interligne-sm);color:var(--st-couleur-texte);background:var(--st-couleur-surface);border:var(--st-epaisseur-fine) solid var(--st-couleur-bordure-forte);border-radius:var(--st-commande-rayon, var(--st-rayon-md))}@media(pointer:coarse){.st-password-field__champ{--_remplissage-bloc: max( var(--st-espacement-demi), min( var(--st-espacement-2), calc( ( var(--st-commande-hauteur, var(--st-hauteur-commande-defaut)) - var( --st-interligne-md ) ) / 2 - var(--st-epaisseur-fine) ) ) );font-size:var(--st-taille-md);line-height:var(--st-interligne-md)}}.st-password-field__champ::placeholder{color:var(--st-couleur-texte-attenue);opacity:1}@media(hover:hover){.st-password-field__champ:hover:not(:disabled,:focus,[aria-invalid=true]){border-color:var(--st-couleur-texte-discret);transition:border-color var(--st-duree-rapide) var(--st-courbe-standard)}}.st-password-field__champ:focus-visible{border-color:var(--st-couleur-primaire)}.st-password-field__champ[aria-invalid=true]{border-color:var(--st-couleur-erreur);box-shadow:inset 0 0 0 var(--st-epaisseur-fine) var(--st-couleur-erreur)}.st-password-field__champ[aria-invalid=true]:focus-visible{outline:var(--st-focus-epaisseur) solid var(--st-couleur-anneau-focus);outline-offset:var(--st-focus-decalage);box-shadow:0 0 0 var(--st-focus-lisere) var(--st-couleur-lisere-focus),inset 0 0 0 var(--st-epaisseur-fine) var(--st-couleur-erreur)}.st-password-field__champ:disabled{color:var(--st-couleur-texte-desactive);cursor:not-allowed;background:var(--st-couleur-surface);border-color:var(--st-couleur-bordure)}.st-password-field__champ:disabled::placeholder{color:var(--st-couleur-texte-desactive)}.st-password-field__champ:is(input,textarea):read-only:not(:disabled),.st-password-field__champ[aria-readonly=true]:not(:disabled){font-weight:var(--st-graisse-moyenne);background:var(--st-couleur-surface-enfoncee)}.st-password-field__champ{padding-inline-end:var(--st-commande-hauteur, var(--st-hauteur-commande-defaut));letter-spacing:var(--st-interlettrage-capitales)}.st-password-field__champ::-ms-reveal,.st-password-field__champ::-ms-clear{display:none}.st-password-field__icone{position:absolute;inset-block:0;inset-inline-start:var(--st-espacement-3-5);block-size:var(--st-espacement-5);margin-block:auto;color:var(--st-couleur-texte-attenue);pointer-events:none}.st-password-field__cadre[data-avec-icone] .st-password-field__champ{padding-inline-start:calc(var(--st-espacement-3-5) + var(--st-espacement-5) + var(--st-espacement-2-5))}.st-password-field__force-meta{white-space:nowrap}.st-password-field__barres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--st-espacement-1-5);margin-block-start:var(--st-espacement-1-5)}.st-password-field__barre{block-size:var(--st-espacement-1);background:var(--st-couleur-surface-active);border-radius:var(--st-rayon-xs);forced-color-adjust:none}.st-password-field__barre[data-plein]{background:var(--st-couleur-texte-discret)}.st-password-field__regles-en-ligne{margin:var(--st-espacement-1-5) 0 0;font-size:var(--st-taille-xs);line-height:var(--st-interligne-xs);color:var(--st-couleur-texte-discret)}.st-password-field__regle-en-ligne+.st-password-field__regle-en-ligne{margin-inline-start:var(--st-espacement-1)}.st-password-field__regle-en-ligne>.st-password-field__coche{margin-inline-end:var(--st-espacement-1);vertical-align:text-bottom}.st-password-field__regle-en-ligne[data-respectee]{font-weight:var(--st-graisse-moyenne);color:var(--st-couleur-succes)}.st-password-field__oeil{position:absolute;inset-block:0;inset-inline-end:0;inline-size:var(--st-commande-hauteur, var(--st-hauteur-commande-defaut));block-size:auto}.st-password-field__majuscules{margin-block-start:var(--st-espacement-1-5)}.st-password-field__zone-majuscules{min-block-size:var(--st-interligne-xs);margin-block:var(--st-espacement-2)}.st-password-field__zone-majuscules>.st-password-field__majuscules{margin-block-start:0}.st-password-field__zone-majuscules+.st-password-field__regles{margin-block-start:0}.st-password-field__jauge{display:flex;align-items:center;gap:var(--st-espacement-3);min-block-size:var(--st-interligne-sm);margin-block-start:var(--st-espacement-2)}.st-password-field__segments{display:grid;grid-template-columns:repeat(3,var(--st-espacement-8));gap:var(--st-espacement-1)}.st-password-field__segment{block-size:var(--st-espacement-1-5);border:var(--st-epaisseur-capillaire) solid var(--st-couleur-bordure-forte);border-radius:var(--st-rayon-pleine);forced-color-adjust:none}.st-password-field__segment[data-plein]{background:var(--st-couleur-texte-discret);border-color:var(--st-couleur-texte-discret)}.st-password-field__force{font-size:var(--st-taille-sm);line-height:var(--st-interligne-sm);font-weight:var(--st-graisse-normale);letter-spacing:var(--st-interlettrage-normal);color:var(--st-couleur-texte-discret)}.st-password-field__regles{box-sizing:border-box;margin-block-start:var(--st-espacement-4);padding:var(--st-espacement-3-5);background:var(--st-couleur-surface);border:var(--st-epaisseur-fine) solid var(--st-couleur-surface-active);border-radius:var(--st-rayon-md)}.st-password-field__titre-des-regles{font-size:var(--st-taille-2xs);line-height:var(--st-interligne-2xs);font-weight:var(--st-graisse-semi);letter-spacing:var(--st-interlettrage-capitales);text-transform:uppercase;margin:0 0 var(--st-espacement-2);color:var(--st-couleur-texte-discret)}.st-password-field__liste{display:flex;flex-direction:column;gap:var(--st-espacement-1-5);margin:0;padding:0;font-size:var(--st-taille-xs);line-height:var(--st-interligne-xs);list-style:none}.st-password-field__regle{display:flex;gap:var(--st-espacement-2);align-items:center;color:var(--st-couleur-texte-discret)}.st-password-field__regle[data-respectee]{font-weight:var(--st-graisse-moyenne);color:var(--st-couleur-succes)}.st-password-field__coche{flex:none}\n"]
|
|
5862
5916
|
}]
|
|
5863
5917
|
}],
|
|
5864
5918
|
ctorParameters: () => [],
|
|
@@ -5902,6 +5956,30 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
5902
5956
|
alias: "motsDeForce",
|
|
5903
5957
|
required: false
|
|
5904
5958
|
}]
|
|
5959
|
+
}],
|
|
5960
|
+
formeDeJauge: [{
|
|
5961
|
+
type: i0.Input,
|
|
5962
|
+
args: [{
|
|
5963
|
+
isSignal: true,
|
|
5964
|
+
alias: "formeDeJauge",
|
|
5965
|
+
required: false
|
|
5966
|
+
}]
|
|
5967
|
+
}],
|
|
5968
|
+
dispositionDesRegles: [{
|
|
5969
|
+
type: i0.Input,
|
|
5970
|
+
args: [{
|
|
5971
|
+
isSignal: true,
|
|
5972
|
+
alias: "dispositionDesRegles",
|
|
5973
|
+
required: false
|
|
5974
|
+
}]
|
|
5975
|
+
}],
|
|
5976
|
+
icone: [{
|
|
5977
|
+
type: i0.Input,
|
|
5978
|
+
args: [{
|
|
5979
|
+
isSignal: true,
|
|
5980
|
+
alias: "icone",
|
|
5981
|
+
required: false
|
|
5982
|
+
}]
|
|
5905
5983
|
}]
|
|
5906
5984
|
}
|
|
5907
5985
|
});
|
|
@@ -8647,6 +8725,7 @@ var StAddressFieldset = class StAddressFieldset extends ContratDeChamp {
|
|
|
8647
8725
|
"autocomplete",
|
|
8648
8726
|
"inputmode",
|
|
8649
8727
|
"icone",
|
|
8728
|
+
"exemple",
|
|
8650
8729
|
"chiffres",
|
|
8651
8730
|
"presentation",
|
|
8652
8731
|
"decritPar",
|