@starterlib/ui 0.7.2 → 0.8.0

package/README.md

@@ -14,31 +14,69 @@ des dependances de pair : c'est l'application qui les installe, et elles doivent
 etre **identiques dans l'hote et dans chaque remote**. Deux versions du socle
 dans le meme navigateur, ce sont deux jeux de jetons d'injection.
 
-## Quatre points d'entree
-
-Un composant sort du tronc quand il traine un pair lourd, et seulement alors ;
-le point d'entree secondaire ou il va se choisit ensuite par ce qu'il EST pour
-qui l'emploie.
-
-| Point d'entree                | Contenu                                                                                                     | Ce qu'il traine a l'execution                      | Gzippe  |
-| ----------------------------- | ----------------------------------------------------------------------------------------------------------- | -------------------------------------------------- | ------- |
-| `@starterlib/ui`              | le tronc : etats, texte, actions, structure, transverses, saisie native, calendrier, listes et tableaux     | `@angular/router`, deja exige par `core`           | 48,8 Ko |
-| `@starterlib/ui/surfaces`     | ce qui se pose AU-DESSUS de la page : menu, dialogues, tiroirs, messages ephemeres                          | `@angular/cdk`, `@angular/aria/menu`               | 9,7 Ko  |
-| `@starterlib/ui/interactions` | ce qui fait PARTIE de la page et traine Aria ou une surface : onglets, navigation laterale, combobox, arbre | `@angular/aria`, qui exige lui-meme `@angular/cdk` | 8,1 Ko  |
-| `@starterlib/ui/formulaires`  | les champs qui LISENT leur saisie : montant, date, plage de dates                                           | le code d'`@angular/forms` (`transformedValue`)    | 4,5 Ko  |
+## Onze points d'entree
+
+Deux criteres, dans cet ordre.
+
+1. **La dependance** (ADR 0003) : un composant sort du tronc quand il traine un
+   pair lourd, et le point d'entree ou il va se choisit par ce qu'il EST pour
+   qui l'emploie.
+2. **Le moment de peinture** (ADR 0031, 0.8.0) : a dependance egale, ce que
+   l'hote ne peint pas sort aussi. Un paquet partage en singleton part ENTIER —
+   la federation annule l'elagage —, donc ce que la coquille n'affiche jamais
+   lui coute plein tarif au premier ecran, et ne coute RIEN au remote qui
+   l'affiche, puisque le tronc y est deja charge.
+
+| Point d'entree               | Contenu                                                                                                | Pairs lourds importes statiquement                                         |
+| ---------------------------- | ------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------- |
+| `@starterlib/ui`             | le TRONC : noyau, icone, texte, actions, etats, retour, indicateurs, structure, transverses, `st-code` | aucun                                                                      |
+| `@starterlib/ui/saisie`      | les champs de formulaire, le calendrier, le televersement                                              | aucun (des TYPES d'`@angular/forms`)                                       |
+| `@starterlib/ui/listes`      | liste, liste de description, table de donnees, pagination, tri, filtres                                | aucun                                                                      |
+| `@starterlib/ui/donnees`     | montant, date, date relative, nombre, valeur masquee, indicateur chiffre                               | aucun                                                                      |
+| `@starterlib/ui/libelles-en` | le catalogue anglais                                                                                   | aucun                                                                      |
+| `@starterlib/ui/surfaces`    | ce qui se pose AU-DESSUS de la page : menu, dialogues, tiroirs, messages ephemeres                     | `@angular/cdk/{a11y,dialog,keycodes,overlay,portal}`, `@angular/aria/menu` |
+| `@starterlib/ui/navigation`  | la navigation laterale                                                                                 | `@angular/cdk/layout` — et rien d'autre                                    |
+| `@starterlib/ui/onglets`     | les onglets et leurs panneaux                                                                          | `@angular/aria/tabs`                                                       |
+| `@starterlib/ui/selection`   | liste deroulante filtrante, choix multiple                                                             | `@angular/aria/{combobox,listbox}`, `@angular/cdk/overlay`                 |
+| `@starterlib/ui/arbre`       | l'arborescence                                                                                         | `@angular/aria/tree`                                                       |
+| `@starterlib/ui/formulaires` | les champs qui LISENT leur saisie : montant, date, plage de dates                                      | le code d'`@angular/forms` (`transformedValue`)                            |
 
 ```ts
-import { StButton, StInput, StSelect } from '@starterlib/ui';
+import { StButton, StCard, StError } from '@starterlib/ui';
+import { StFormField, StInput, StSelect } from '@starterlib/ui/saisie';
+import { StDataTable, StPagination } from '@starterlib/ui/listes';
+import { StMoney, StDate } from '@starterlib/ui/donnees';
 import { StDialog, StToast } from '@starterlib/ui/surfaces';
-import { StTabs, StCombobox, StMultiselect } from '@starterlib/ui/interactions';
+import { StSidenav } from '@starterlib/ui/navigation';
+import { StTabs } from '@starterlib/ui/onglets';
+import { StCombobox, StMultiselect } from '@starterlib/ui/selection';
+import { StTree } from '@starterlib/ui/arbre';
 import { StAmountField, StDateField } from '@starterlib/ui/formulaires';
 ```
 
+Les aretes internes admises, et elles seules : `saisie`, `listes`, `donnees`,
+`surfaces`, `navigation` et `arbre` importent le tronc ; `formulaires` et
+`selection` importent en plus `saisie`, parce qu'une liste deroulante et un
+champ de montant sont d'abord des CHAMPS. `navigation` atteint `surfaces` par
+`import()` seulement : le dialogue du tiroir ne pese pas sur le premier rendu.
+
+### Ce qui reste des anciens specificateurs
+
+`@starterlib/ui/interactions` **survit, deprecie**, comme baril de
+re-exports vers `navigation`, `onglets`, `selection` et `arbre` : un remote
+reste en 0.7.x recoit la MEME CLASSE que l'hote, et la migration se fait
+service par service. ⚠️ Ce qui s'importe du baril pese les quatre familles.
+
+Le tronc, lui, **ne re-exporte pas** `saisie`, `listes`, `donnees` ni
+`libelles-en` : ces points d'entree importent le tronc, et un tronc qui les
+re-exporterait fermerait un cycle entre points d'entree que ng-packagr refuse.
+Monter en 0.8.0 demande donc de deplacer ces imports-la, et rien d'autre.
+
 ⚠️ Un paquet partage en federation **ne s'elague pas** : declare singleton, il
-est charge en entier des qu'un remote le reference. La separation n'a donc pas
-pour but le poids, mais le **train de singletons** : une application qui
-n'affiche ni menu, ni dialogue, ni onglets ne charge ni le CDK ni Aria, et n'a
-pas a se redeployer quand ils montent de version.
+est charge en entier des qu'un remote le reference. Le decoupage ne vise donc
+pas l'elagage, mais l'unite de CHARGEMENT — et le **train de singletons** : une
+application qui n'affiche ni menu, ni dialogue, ni onglets ne charge ni le CDK
+ni Aria, et n'a pas a se redeployer quand ils montent de version.
 
 `@angular/cdk`, `@angular/aria` et `@angular/forms` sont des pairs
 **optionnels** : le tronc n'en importe que des TYPES. Ils deviennent obligatoires
@@ -47,27 +85,40 @@ absence se voit alors a la resolution, pas a l'execution. ⚠️ `@angular/aria`
 exige `@angular/cdk` a la version EXACTE : les deux montent ensemble.
 
 Ce que chaque point d'entree importe a l'execution est verifie sur le paquet
-construit (`pnpm paquets:check`) : un import de trop dans le tronc echoue avant
-la publication.
+construit (`pnpm paquets:check`), **au specificateur exact** : `navigation` a
+droit a `@angular/cdk/layout`, et un `@angular/cdk/overlay` qui s'y glisserait
+echoue avant la publication. Une regle non outillee est une opinion.
 
-⚠️ **En federation, chaque point d'entree se partage SEPAREMENT.** Ce sont quatre
+⚠️ **En federation, chaque point d'entree se partage SEPAREMENT.** Ce sont onze
 specificateurs de module distincts : partager `@starterlib/ui` ne couvre aucun
-des trois autres. Omis de la configuration, chaque remote en embarque sa propre
+des dix autres. Omis de la configuration, chaque remote en embarque sa propre
 copie — et la regle `singleton: true, strictVersion: true` qui protege le tronc
-ne protege plus rien au-dessus.
+ne protege plus rien au-dessus. Le decoupage achete l'independance de
+CHARGEMENT, jamais celle de VERSION : les onze portent le numero de leur paquet.
 
 ```js
 // federation.config.mjs de l'hote ET de chaque remote
-shared: {
-  '@starterlib/ui': { singleton: true, strictVersion: true },
-  '@starterlib/ui/surfaces': { singleton: true, strictVersion: true },
-  '@starterlib/ui/interactions': { singleton: true, strictVersion: true },
-  '@starterlib/ui/formulaires': { singleton: true, strictVersion: true },
-  // ...
-}
+import { partageDuSocle } from '@starterlib/core/federation';
+
+shared: { ...share({ ...ANGULAR_ET_RXJS, ...partageDuSocle('0.8') }) }
 ```
 
-Voir `docs/adr/0003-points-d-entree-decoupes-par-dependance.md`.
+⚠️ **Cette liste ne se recopie plus.** Depuis la 0.8.0 elle est publiee par
+`@starterlib/core/federation` : `partageDuSocle(train)` rend les **seize**
+specificateurs du socle — les onze de `ui`, le baril deprecie, `tokens`, `util`,
+`core` et `core/federation` —, chacun en `singleton: true, strictVersion: true,
+includeSecondaries: false`. La raison n'est pas la commodite : une ligne oubliee
+**n'est pas une erreur de construction**, le specificateur se duplique simplement
+dans le remote, avec son etat. Passer de quatre a douze specificateurs `ui` en
+recopiant aurait multiplie par trois les occasions de cet oubli.
+
+⚠️ Partager un point d'entree que personne n'importe coute **zero octet** : il
+n'entre dans aucune carte d'importation. La liste est donc exhaustive sans
+arbitrage — c'est l'IMPORT qui coute, jamais le partage.
+
+Voir `docs/adr/0003-points-d-entree-decoupes-par-dependance.md`,
+`docs/adr/0004-le-tronc-est-dimensionne-par-le-premier-ecran-de-l-hote.md`,
+`docs/recettes/federation.md`, et l'ADR 0031 du socle backend.
 
 ## Configuration — une fois, dans l'hote
 
@@ -140,7 +191,7 @@ de `@starterlib/tokens`. Sans la feuille, tout s'affiche sans style.
 Vague 1 : etats (`st-spinner`, `st-skeleton`, `st-empty`, `st-error`,
 `st-offline-banner`, `st-progress`, `st-state`), texte (`st-text`,
 `st-heading`), donnees (`st-money`, `st-date`, `st-relative-time`, `st-masked`,
-`st-code`, `st-count`), actions (`st-button`, `st-icon-button`, `st-link`,
+`st-count` — passes sous `ui/donnees` en 0.8.0 ; `st-code` reste au tronc), actions (`st-button`, `st-icon-button`, `st-link`,
 `st-button-group`), indicateurs (`st-badge`, `st-status-pill`, `st-tag`,
 `st-avatar`), iconographie (`st-icon`). `st-menu` est passe sous `ui/surfaces`.
 
@@ -152,24 +203,25 @@ Vague 2 :
   `st-lang-switch`, `st-copy-button`, `st-timer`, `st-logo`).
 - **`ui/surfaces`** — `StDialog` (dialogue, tiroir, feuille inferieure),
   `StConfirmDialog`, `StToast`, `st-idle-warning`, `stTooltip`, `st-popover`.
-- **`ui/interactions`** — `st-tabs`, `st-tab-panel`, `stTabContent`, `st-sidenav`,
-  `stSidenavToggle`.
+- **`ui/onglets`** — `st-tabs`, `st-tab-panel`, `stTabContent` ; **`ui/navigation`**
+  — `st-sidenav`, `stSidenavToggle` (tous trois sous `ui/interactions` avant la
+  0.8.0).
 
 Vague 3 — la saisie, sur Signal Forms :
 
-- **Tronc** — `st-form-field`, `st-input`, `st-textarea`, `st-fieldset`,
+- **`ui/saisie`** (le tronc avant la 0.8.0) — `st-form-field`, `st-input`, `st-textarea`, `st-fieldset`,
   `st-checkbox`, `st-radio-group`, `st-switch`, `st-error-summary`,
   `st-password-field`, `st-otp-field`, `st-search-field`, `st-iban-field`,
   `st-phone-field`, `st-select` (natif), `st-file-upload`, `st-calendar` ;
   messages d'erreur traduits et fonctions de schema (`erreurIban`,
   `erreurTelephone`, `erreurDate`, `erreurPlageDeDates`, `erreursDeFichiers`).
-- **`ui/interactions`** — `st-combobox`, `st-multiselect`.
+- **`ui/selection`** — `st-combobox`, `st-multiselect`.
 - **`ui/formulaires`** — `st-amount-field`, `st-date-field`, `st-date-range`.
 
 Un champ s'emploie avec un formulaire, par `[formField]`, ou seul, par
 `[(value)]`. Les regles d'un schema sont des fonctions PURES du socle, a brancher
-par `validate` : les fournir toutes faites importerait `@angular/forms` a
-l'execution dans le tronc.
+par `validate` : les fournir toutes faites importerait le code d'`@angular/forms`
+a l'execution dans `ui/saisie`.
 
 ```ts
 readonly virement = form(this.modele, (chemin) => {
@@ -182,10 +234,11 @@ readonly virement = form(this.modele, (chemin) => {
 Vague 4 — listes et tableaux, au contrat du backend (curseur vers l'avant, sans
 total ni tri serveur) :
 
-- **Tronc** — `st-data-table` (`stCellule`, `stTableauVide`, `stActionsDeTableau`),
-  `st-sort-header`, `st-pagination`, `st-list` (`stElementDeListe`),
-  `st-description-list` (`stDescription`), `st-filter-bar`, `st-filter-chip`.
-- **`ui/interactions`** — `st-tree`.
+- **`ui/listes`** (le tronc avant la 0.8.0) — `st-data-table` (`stCellule`,
+  `stTableauVide`, `stActionsDeTableau`), `st-sort-header`, `st-pagination`,
+  `st-list` (`stElementDeListe`), `st-description-list` (`stDescription`),
+  `st-filter-bar`, `st-filter-chip`.
+- **`ui/arbre`** — `st-tree`.
 - **`@starterlib/core`** — `NavigationParCurseur` ; **`@starterlib/util`** —
   `PageParCurseur<T>`.
 

package/fesm2022/starterlib-ui-arbre.mjs

@@ -0,0 +1,82 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, model, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { Tree, TreeItem, TreeItemGroup } from '@angular/aria/tree';
+import { StIcon } from '@starterlib/ui';
+
+/**
+ * Arbre de donnees hierarchiques, sur `@angular/aria/tree` : dossiers, plan
+ * comptable, organisation.
+ *
+ * ```html
+ * <st-tree etiquette="Plan comptable" [noeuds]="comptes" [(selection)]="compte" [(deplies)]="ouverts" />
+ * ```
+ *
+ * ⚠️ **Jamais pour la navigation du site** (UX-17) : une navigation est une liste
+ * de liens, que le lecteur d'ecran liste et parcourt comme telle. Un arbre se
+ * parcourt aux fleches, un element a la fois, et ses elements ne sont pas des
+ * liens. Le mode « navigation » de la primitive n'est donc pas expose.
+ *
+ * ⚠️ **Les noeuds sont rendus par le composant, a partir de donnees** (FE-6) : la
+ * primitive relie un element a son arbre par injection, et un contenu projete
+ * garde l'injecteur de l'endroit ou il est ecrit — lecon de `st-menu`.
+ *
+ * Clavier de la primitive : fleches haut et bas entre les elements visibles,
+ * droite pour deplier ou entrer, gauche pour replier ou remonter, Debut et Fin,
+ * recherche a la frappe ; Espace ou Entree choisit. Selection et depliage sont des
+ * listes de VALEURS, lisibles et restaurables par l'application.
+ */
+class StTree {
+    /** Nom de l'arbre, lu a l'entree. Obligatoire. */
+    etiquette = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "etiquette" }] : /* istanbul ignore next */ []));
+    noeuds = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "noeuds" }] : /* istanbul ignore next */ []));
+    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    selection = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+    deplies = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "deplies" }] : /* istanbul ignore next */ []));
+    /** La primitive attend un tableau modifiable ; le modele est en lecture seule. */
+    valeursChoisies = computed(() => [...this.selection()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valeursChoisies" }] : /* istanbul ignore next */ []));
+    ensembleDeplie = computed(() => new Set(this.deplies()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ensembleDeplie" }] : /* istanbul ignore next */ []));
+    estDeplie(noeud) {
+        return this.ensembleDeplie().has(noeud.valeur);
+    }
+    surDepliage(noeud, deplie) {
+        const deplies = this.deplies().filter((valeur) => valeur !== noeud.valeur);
+        this.deplies.set(deplie ? [...deplies, noeud.valeur] : deplies);
+    }
+    surSelection(valeurs) {
+        this.selection.set([...valeurs]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StTree, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: StTree, isStandalone: true, selector: "st-tree", inputs: { etiquette: { classPropertyName: "etiquette", publicName: "etiquette", isSignal: true, isRequired: true, transformFunction: null }, noeuds: { classPropertyName: "noeuds", publicName: "noeuds", isSignal: true, isRequired: true, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, deplies: { classPropertyName: "deplies", publicName: "deplies", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", deplies: "depliesChange" }, host: { classAttribute: "st-tree" }, ngImport: i0, template: "<ul\n  #arbre=\"ngTree\"\n  class=\"st-tree__racine\"\n  ngTree\n  selectionMode=\"explicit\"\n  [attr.aria-label]=\"etiquette()\"\n  [multi]=\"multiple()\"\n  [value]=\"valeursChoisies()\"\n  (valueChange)=\"surSelection($event)\"\n>\n  <ng-container\n    *ngTemplateOutlet=\"niveau; context: { noeuds: noeuds(), parent: arbre, niveau: 1 }\"\n  />\n</ul>\n\n<ng-template #niveau let-noeuds=\"noeuds\" let-parent=\"parent\" let-profondeur=\"niveau\">\n  @for (noeud of noeuds; track noeud.valeur) {\n    <li\n      #element=\"ngTreeItem\"\n      class=\"st-tree__element\"\n      ngTreeItem\n      [parent]=\"parent\"\n      [value]=\"noeud.valeur\"\n      [label]=\"noeud.libelle\"\n      [disabled]=\"noeud.desactive === true\"\n      [expanded]=\"estDeplie(noeud)\"\n      [style.--st-arbre-niveau]=\"profondeur\"\n      (expandedChange)=\"surDepliage(noeud, $event)\"\n    >\n      @if (noeud.enfants?.length) {\n        <st-icon\n          class=\"st-tree__chevron\"\n          taille=\"sm\"\n          [nom]=\"estDeplie(noeud) ? 'chevron-bas' : 'chevron-droite'\"\n        />\n      } @else {\n        <span class=\"st-tree__espace\"></span>\n      }\n      <span class=\"st-tree__libelle\">{{ noeud.libelle }}</span>\n      <st-icon class=\"st-tree__coche\" nom=\"coche\" taille=\"sm\" />\n    </li>\n    @if (noeud.enfants?.length) {\n      <ul class=\"st-tree__groupe\" role=\"group\">\n        <ng-template ngTreeItemGroup [ownedBy]=\"element\" #groupe=\"ngTreeItemGroup\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              niveau;\n              context: { noeuds: noeud.enfants, parent: groupe, niveau: profondeur + 1 }\n            \"\n          />\n        </ng-template>\n      </ul>\n    }\n  }\n</ng-template>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block}.st-tree__racine,.st-tree__groupe{padding:0;margin:0;list-style:none}.st-tree__element{display:flex;gap:var(--st-espacement-1);align-items:center;min-block-size:var(--st-cible-tactile-min);padding-inline:calc((var(--st-arbre-niveau, 1) - 1) * 1.5rem + var(--st-espacement-2)) var(--st-espacement-2);cursor:pointer;border-radius:var(--st-rayon-sm)}@media(hover:hover){.st-tree__element:hover{background:var(--st-couleur-surface-survol)}}.st-tree__element:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:-2px}.st-tree__element[aria-selected=true]{font-weight:var(--st-graisse-semi);background:var(--st-couleur-primaire-discret)}.st-tree__element[aria-disabled=true]{color:var(--st-couleur-texte-desactive);cursor:not-allowed}.st-tree__chevron,.st-tree__espace{flex:none;inline-size:1rem}.st-tree__coche{margin-inline-start:auto;visibility:hidden}[aria-selected=true]>.st-tree__coche{visibility:visible}.st-tree__groupe:empty{display:none}\n"], dependencies: [{ kind: "directive", type: Tree, selector: "[ngTree]", inputs: ["id", "orientation", "multi", "disabled", "selectionMode", "focusMode", "wrap", "softDisabled", "typeaheadDelay", "tabindex", "value", "nav", "currentType"], outputs: ["valueChange"], exportAs: ["ngTree"] }, { kind: "directive", type: TreeItem, selector: "[ngTreeItem]", inputs: ["id", "value", "parent", "disabled", "selectable", "expanded", "label"], outputs: ["expandedChange"], exportAs: ["ngTreeItem"] }, { kind: "directive", type: TreeItemGroup, selector: "ng-template[ngTreeItemGroup]", inputs: ["ownedBy"], exportAs: ["ngTreeItemGroup"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StIcon, selector: "st-icon", inputs: ["nom", "sprite", "nomMetier", "taille", "ton", "etiquette"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StTree, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-tree', changeDetection: ChangeDetectionStrategy.OnPush, imports: [Tree, TreeItem, TreeItemGroup, NgTemplateOutlet, StIcon], host: { class: 'st-tree' }, template: "<ul\n  #arbre=\"ngTree\"\n  class=\"st-tree__racine\"\n  ngTree\n  selectionMode=\"explicit\"\n  [attr.aria-label]=\"etiquette()\"\n  [multi]=\"multiple()\"\n  [value]=\"valeursChoisies()\"\n  (valueChange)=\"surSelection($event)\"\n>\n  <ng-container\n    *ngTemplateOutlet=\"niveau; context: { noeuds: noeuds(), parent: arbre, niveau: 1 }\"\n  />\n</ul>\n\n<ng-template #niveau let-noeuds=\"noeuds\" let-parent=\"parent\" let-profondeur=\"niveau\">\n  @for (noeud of noeuds; track noeud.valeur) {\n    <li\n      #element=\"ngTreeItem\"\n      class=\"st-tree__element\"\n      ngTreeItem\n      [parent]=\"parent\"\n      [value]=\"noeud.valeur\"\n      [label]=\"noeud.libelle\"\n      [disabled]=\"noeud.desactive === true\"\n      [expanded]=\"estDeplie(noeud)\"\n      [style.--st-arbre-niveau]=\"profondeur\"\n      (expandedChange)=\"surDepliage(noeud, $event)\"\n    >\n      @if (noeud.enfants?.length) {\n        <st-icon\n          class=\"st-tree__chevron\"\n          taille=\"sm\"\n          [nom]=\"estDeplie(noeud) ? 'chevron-bas' : 'chevron-droite'\"\n        />\n      } @else {\n        <span class=\"st-tree__espace\"></span>\n      }\n      <span class=\"st-tree__libelle\">{{ noeud.libelle }}</span>\n      <st-icon class=\"st-tree__coche\" nom=\"coche\" taille=\"sm\" />\n    </li>\n    @if (noeud.enfants?.length) {\n      <ul class=\"st-tree__groupe\" role=\"group\">\n        <ng-template ngTreeItemGroup [ownedBy]=\"element\" #groupe=\"ngTreeItemGroup\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              niveau;\n              context: { noeuds: noeud.enfants, parent: groupe, niveau: profondeur + 1 }\n            \"\n          />\n        </ng-template>\n      </ul>\n    }\n  }\n</ng-template>\n", styles: [".st-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}:host([hidden]){display:none!important}:host{display:block}.st-tree__racine,.st-tree__groupe{padding:0;margin:0;list-style:none}.st-tree__element{display:flex;gap:var(--st-espacement-1);align-items:center;min-block-size:var(--st-cible-tactile-min);padding-inline:calc((var(--st-arbre-niveau, 1) - 1) * 1.5rem + var(--st-espacement-2)) var(--st-espacement-2);cursor:pointer;border-radius:var(--st-rayon-sm)}@media(hover:hover){.st-tree__element:hover{background:var(--st-couleur-surface-survol)}}.st-tree__element:focus-visible{outline:2px solid var(--st-couleur-anneau-focus);outline-offset:-2px}.st-tree__element[aria-selected=true]{font-weight:var(--st-graisse-semi);background:var(--st-couleur-primaire-discret)}.st-tree__element[aria-disabled=true]{color:var(--st-couleur-texte-desactive);cursor:not-allowed}.st-tree__chevron,.st-tree__espace{flex:none;inline-size:1rem}.st-tree__coche{margin-inline-start:auto;visibility:hidden}[aria-selected=true]>.st-tree__coche{visibility:visible}.st-tree__groupe:empty{display:none}\n"] }]
+        }], propDecorators: { etiquette: [{ type: i0.Input, args: [{ isSignal: true, alias: "etiquette", required: true }] }], noeuds: [{ type: i0.Input, args: [{ isSignal: true, alias: "noeuds", required: true }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], deplies: [{ type: i0.Input, args: [{ isSignal: true, alias: "deplies", required: false }] }, { type: i0.Output, args: ["depliesChange"] }] } });
+
+/**
+ * @starterlib/ui/arbre — l'arborescence deroulante.
+ *
+ * ⚠️ Detache de `@starterlib/ui/interactions` (ADR 0031, decision 2). Pair
+ * lourd de ce point d'entree, et le seul : `@angular/aria/tree`.
+ *
+ * ⚠️ En federation, ce point d'entree se partage SEPAREMENT : c'est un
+ * specificateur de module distinct.
+ *
+ * ```ts
+ * import { StTree } from '@starterlib/ui/arbre';
+ * ```
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { StTree };
+//# sourceMappingURL=starterlib-ui-arbre.mjs.map

package/fesm2022/starterlib-ui-arbre.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"starterlib-ui-arbre.mjs","sources":["../../../../packages/ui/arbre/src/lib/st-tree.ts","../../../../packages/ui/arbre/src/lib/st-tree.html","../../../../packages/ui/arbre/src/public-api.ts","../../../../packages/ui/arbre/src/starterlib-ui-arbre.ts"],"names":[],"mappings":"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"}