@ktortu/aaa 0.1.0-beta.0

package/fesm2022/ktortu-aaa-menu.mjs

@@ -0,0 +1,315 @@
+import * as i0 from '@angular/core';
+import { Directive, inject, ElementRef, PLATFORM_ID, effect, model, InjectionToken, input, computed, isDevMode } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { MenuItem, MenuTrigger } from '@angular/aria/menu';
+import { KtIdGenerator } from '@ktortu/aaa/cdk';
+
+/**
+ * `[ktMenu]` — marqueur de THÈME posé sur l'hôte `[ngMenu]` d'`@angular/aria`. Style UNIQUEMENT la
+ * SURFACE du menu (fond, bord, ombre, rayon, padding, positionnement en dropdown ancré). N'ajoute
+ * AUCUN rôle ni comportement : la sémantique (`role="menu"`), le clavier, le focus roving, le
+ * retour de focus au trigger, les sous-menus et le typeahead viennent intégralement d'aria
+ * (`[ngMenu]`). Même philosophie que `[ktCard]` : la lib thématise, aria gère l'accessibilité.
+ *
+ * La directive n'a pas de logique propre : tout vit dans `menu.css` via le sélecteur `[ktMenu]`,
+ * piloté par l'attribut `data-visible` qu'aria pose sur l'hôte (ouvert/fermé). Le positionnement
+ * (CSS Anchor Positioning) est câblé par `[ktMenuTrigger]` (menu racine) et par `[ktMenuItem]`
+ * (sous-menus) qui posent les `anchor-name` / `position-anchor`.
+ *
+ * @example
+ * ```html
+ * <button ngMenuTrigger ktMenuTrigger [menu]="m">Options</button>
+ * <div ngMenu ktMenu #m="ngMenu" (itemSelected)="onSelect($event)" aria-label="Options">
+ *   <button ngMenuItem ktMenuItem value="new">Nouveau</button>
+ * </div>
+ * ```
+ */
+class KtMenu {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtMenu, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.1", type: KtMenu, isStandalone: true, selector: "[ktMenu]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtMenu, decorators: [{
+            type: Directive,
+            args: [{ selector: '[ktMenu]' }]
+        }] });
+/**
+ * `[ktMenuItem]` — marqueur de thème posé sur l'hôte `[ngMenuItem]`. Style la RANGÉE (hauteur de
+ * cible tactile ≥44px, focus, survol, désactivé, item de sous-menu avec chevron). Comme `[ktMenu]`,
+ * sans logique de sélection : l'état stylé est lu sur les attributs ARIA déjà posés par aria
+ * (`:focus-visible` pour l'item actif via focus roving, `[aria-disabled]`, `[aria-expanded]`,
+ * `[aria-haspopup]`, `[aria-checked]`).
+ *
+ * SEULE responsabilité technique : si l'item porte un sous-menu (`[submenu]` côté aria), on câble
+ * l'ancrage CSS du sous-menu sur cet item (anchor-name sur l'item, position-anchor sur la surface
+ * du sous-menu, marqueur `data-kt-submenu` pour l'ouvrir en latéral plutôt qu'en dropdown).
+ *
+ * EXIGENCE DE STRUCTURE (sous-menus) : le `[ngMenu]` d'un sous-menu DOIT être un DESCENDANT DOM du
+ * menu parent (et non un frère). aria décide de maintenir un menu ouvert via `element.contains()`
+ * sur la cible du focus/survol ; un sous-menu placé hors du sous-arbre du parent ferait croire à
+ * aria que le focus a quitté le menu et provoquerait sa fermeture dès qu'on survole le sous-menu.
+ * Le sous-menu reste rendu en place (top-layer non requis : `position: fixed` + ancrage CSS).
+ *
+ * @example
+ * ```html
+ * <button ngMenuItem ktMenuItem value="open">Ouvrir</button>
+ * ```
+ */
+class KtMenuItem {
+    host = inject(ElementRef).nativeElement;
+    // Optionnel : `[ktMenuItem]` reste utilisable seul (simple thème) même hors d'un `[ngMenuItem]`.
+    ariaItem = inject(MenuItem, { self: true, optional: true });
+    platformId = inject(PLATFORM_ID);
+    // Alloué à la PREMIÈRE détection d'un sous-menu (et non pour chaque item) : un item simple ne
+    // consomme pas d'anchor-name.
+    anchorName;
+    idGen = inject(KtIdGenerator);
+    constructor() {
+        if (!this.ariaItem)
+            return;
+        effect(() => {
+            const submenu = this.ariaItem.submenu()?.element;
+            if (!submenu) {
+                this.anchorName = undefined;
+                return;
+            }
+            this.anchorName ??= `--kt-submenu-anchor-${this.idGen.generateId()}`;
+            if (isPlatformBrowser(this.platformId)) {
+                submenu.style.setProperty('position-anchor', this.anchorName);
+                // Marque la surface comme un SOUS-menu : menu.css l'ouvre en latéral (inline-end) et non
+                // sous l'item, avec ses propres fallbacks de débordement.
+                submenu.setAttribute('data-kt-submenu', '');
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.1", type: KtMenuItem, isStandalone: true, selector: "[ktMenuItem]", host: { properties: { "style.anchor-name": "anchorName" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtMenuItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ktMenuItem]',
+                    host: {
+                        '[style.anchor-name]': 'anchorName',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * `[ktMenuSeparator]` — filet de séparation entre groupes d'items. Pose `role="separator"`
+ * (sémantique standard d'un séparateur de menu) ; la ligne elle-même vit dans `menu.css`.
+ *
+ * @example
+ * ```html
+ * <hr ktMenuSeparator />
+ * ```
+ */
+class KtMenuSeparator {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtMenuSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.1", type: KtMenuSeparator, isStandalone: true, selector: "[ktMenuSeparator]", host: { attributes: { "role": "separator" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtMenuSeparator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ktMenuSeparator]',
+                    host: { role: 'separator' },
+                }]
+        }] });
+
+/**
+ * `[ktMenuTrigger]` — sucre de POSITIONNEMENT pour le menu racine. À poser SUR le même élément
+ * qu'`[ngMenuTrigger]` (le bouton qui ouvre le menu). Il ne réimplémente RIEN du comportement :
+ * l'ouverture/fermeture, `aria-expanded`, Échap, le clic-dehors et le retour de focus sont gérés
+ * par aria (`[ngMenuTrigger]`). Sa seule tâche : poser un `anchor-name` sur le trigger et le
+ * `position-anchor` correspondant sur la surface du menu, pour que `menu.css` l'ancre en dropdown
+ * (CSS Anchor Positioning), comme le popup du Select — sans CDK Overlay (styles scopés conservés,
+ * et pas de coordination fragile avec le focus qu'aria pose à l'ouverture).
+ *
+ * Requiert `[ngMenuTrigger]` sur le même hôte (injecté en `self`).
+ *
+ * @example
+ * ```html
+ * <button ngMenuTrigger ktMenuTrigger [menu]="m">Fichier</button>
+ * ```
+ */
+class KtMenuTrigger {
+    host = inject(ElementRef).nativeElement;
+    ariaTrigger = inject(MenuTrigger, { self: true });
+    platformId = inject(PLATFORM_ID);
+    idGen = inject(KtIdGenerator);
+    anchorName = `--kt-menu-anchor-${this.idGen.generateId()}`;
+    constructor() {
+        effect(() => {
+            const menuEl = this.ariaTrigger.menu()?.element;
+            if (!menuEl)
+                return;
+            if (isPlatformBrowser(this.platformId)) {
+                menuEl.style.setProperty('position-anchor', this.anchorName);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtMenuTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.1", type: KtMenuTrigger, isStandalone: true, selector: "[ktMenuTrigger]", host: { properties: { "style.anchor-name": "anchorName" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtMenuTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ktMenuTrigger]',
+                    host: {
+                        '[style.anchor-name]': 'anchorName',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Items de menu À ÉTAT (checkbox / radio).
+ *
+ * Pourquoi ces directives existent : `@angular/aria` accepte bien `role="menuitemcheckbox"` /
+ * `"menuitemradio"` sur `[ngMenuItem]`, MAIS NE POSE JAMAIS `aria-checked` — son pattern se
+ * contente d'émettre `itemSelected(value)`. Sans `aria-checked`, l'item coché est MUET pour les
+ * lecteurs d'écran (échec WCAG 4.1.2). Ces directives comblent ce trou : elles possèdent l'état
+ * coché, le bindent en `aria-checked`, et le basculent à l'activation (clic / Entrée / Espace).
+ *
+ * Elles ne touchent pas au `role` (laissé à l'input `role` d'aria, posé par le consommateur) pour
+ * éviter tout conflit de binding sur `[attr.role]` ; la démo montre l'usage `role="menuitemradio"`.
+ */
+/** Activation commune : un item de menu se déclenche au clic ET au clavier (Entrée / Espace). */
+const ACTIVATION_HOST = {
+    '(click)': 'activate($event)',
+    '(keydown.enter)': 'activate($event)',
+    '(keydown.space)': 'activate($event)',
+};
+/**
+ * `[ktMenuItemCheckbox]` — case à cocher de menu (bascule indépendante). À poser sur un
+ * `[ngMenuItem] role="menuitemcheckbox"`. Bind `aria-checked` et bascule `checked` à l'activation.
+ *
+ * @example
+ * ```html
+ * <button ngMenuItem ktMenuItem ktMenuItemCheckbox role="menuitemcheckbox" [(checked)]="wrap">
+ *   Retour à la ligne
+ * </button>
+ * ```
+ */
+class KtMenuItemCheckbox {
+    ariaItem = inject(MenuItem, { self: true, optional: true });
+    /** État coché, bidirectionnel : `[(checked)]`. */
+    checked = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    activate(event) {
+        if (this.ariaItem?.disabled())
+            return;
+        if (event.type === 'keydown') {
+            event.preventDefault();
+        }
+        this.checked.update((v) => !v);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtMenuItemCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: KtMenuItemCheckbox, isStandalone: true, selector: "[ktMenuItemCheckbox]", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { listeners: { "click": "activate($event)", "keydown.enter": "activate($event)", "keydown.space": "activate($event)" }, properties: { "attr.aria-checked": "checked()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtMenuItemCheckbox, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ktMenuItemCheckbox]',
+                    host: {
+                        ...ACTIVATION_HOST,
+                        '[attr.aria-checked]': 'checked()',
+                    },
+                }]
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
+/** Source de la valeur sélectionnée d'un groupe radio, exposée aux `[ktMenuItemRadio]` enfants. */
+const KT_MENU_RADIO_GROUP = new InjectionToken('KT_MENU_RADIO_GROUP');
+/**
+ * `[ktMenuRadioGroup]` — coordinateur d'un groupe d'items radio mutuellement exclusifs. À poser sur
+ * un conteneur englobant les `[ktMenuItemRadio]` (typiquement un `role="group"`). Détient la valeur
+ * sélectionnée ; chaque radio s'y compare pour son `aria-checked` et la met à jour à l'activation.
+ *
+ * @example
+ * ```html
+ * <div role="group" ktMenuRadioGroup [(value)]="sortBy" aria-label="Trier par">
+ *   <button ngMenuItem ktMenuItem ktMenuItemRadio role="menuitemradio" [value]="'name'">Nom</button>
+ *   <button ngMenuItem ktMenuItem ktMenuItemRadio role="menuitemradio" [value]="'date'">Date</button>
+ * </div>
+ * ```
+ */
+class KtMenuRadioGroup {
+    /** Valeur sélectionnée du groupe, bidirectionnelle : `[(value)]`. */
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtMenuRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: KtMenuRadioGroup, isStandalone: true, selector: "[ktMenuRadioGroup]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [{ provide: KT_MENU_RADIO_GROUP, useExisting: KtMenuRadioGroup }], exportAs: ["ktMenuRadioGroup"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtMenuRadioGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ktMenuRadioGroup]',
+                    exportAs: 'ktMenuRadioGroup',
+                    providers: [{ provide: KT_MENU_RADIO_GROUP, useExisting: KtMenuRadioGroup }],
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+/**
+ * `[ktMenuItemRadio]` — bouton radio de menu. À poser sur un `[ngMenuItem] role="menuitemradio"`
+ * dans un `[ktMenuRadioGroup]`. `aria-checked` reflète l'égalité avec la valeur du groupe ;
+ * l'activation sélectionne cette valeur.
+ *
+ * @example
+ * ```html
+ * <button ngMenuItem ktMenuItem ktMenuItemRadio role="menuitemradio" [value]="'name'">Trier par nom</button>
+ * ```
+ */
+class KtMenuItemRadio {
+    ariaItem = inject(MenuItem, { self: true, optional: true });
+    group = inject(KT_MENU_RADIO_GROUP, { optional: true });
+    /** Valeur portée par ce radio (comparée à celle du groupe). */
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    checked = computed(() => this.group?.value() === this.value(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Garde-fou dev : sans [ktMenuRadioGroup] parent, aria-checked reste figé (item muet pour les SR).
+        if (isDevMode() && !this.group) {
+            console.warn('[ktMenuItemRadio] doit être placé dans un [ktMenuRadioGroup] : ' +
+                'sans groupe, la sélection et `aria-checked` restent inopérants.');
+        }
+    }
+    activate(event) {
+        if (this.ariaItem?.disabled())
+            return;
+        if (event.type === 'keydown') {
+            event.preventDefault();
+        }
+        this.group?.value.set(this.value());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtMenuItemRadio, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: KtMenuItemRadio, isStandalone: true, selector: "[ktMenuItemRadio]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "activate($event)", "keydown.enter": "activate($event)", "keydown.space": "activate($event)" }, properties: { "attr.aria-checked": "checked()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtMenuItemRadio, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ktMenuItemRadio]',
+                    host: {
+                        ...ACTIVATION_HOST,
+                        '[attr.aria-checked]': 'checked()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
+
+/**
+ * Import ergonomique de toute la famille menu (couche de THÈME ktortu) en une fois :
+ * `imports: [KT_MENU]` au lieu d'énumérer chaque directive. À composer avec les directives
+ * d'`@angular/aria/menu` (`Menu`, `MenuItem`, `MenuTrigger`, `MenuContent`), qui apportent le
+ * comportement accessible.
+ */
+const KT_MENU = [
+    KtMenu,
+    KtMenuItem,
+    KtMenuSeparator,
+    KtMenuTrigger,
+    KtMenuItemCheckbox,
+    KtMenuItemRadio,
+    KtMenuRadioGroup,
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { KT_MENU, KT_MENU_RADIO_GROUP, KtMenu, KtMenuItem, KtMenuItemCheckbox, KtMenuItemRadio, KtMenuRadioGroup, KtMenuSeparator, KtMenuTrigger };
+//# sourceMappingURL=ktortu-aaa-menu.mjs.map

package/fesm2022/ktortu-aaa-menu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ktortu-aaa-menu.mjs","sources":["../../../../projects/ktortu/aaa/menu/menu.ts","../../../../projects/ktortu/aaa/menu/menu-trigger.ts","../../../../projects/ktortu/aaa/menu/menu-toggle.ts","../../../../projects/ktortu/aaa/menu/public-api.ts","../../../../projects/ktortu/aaa/menu/ktortu-aaa-menu.ts"],"sourcesContent":["import { Directive, ElementRef, effect, inject, PLATFORM_ID } from '@angular/core';\nimport { isPlatformBrowser } from '@angular/common';\nimport { MenuItem as AriaMenuItem } from '@angular/aria/menu';\nimport { KtIdGenerator } from '@ktortu/aaa/cdk';\n\n/**\n * `[ktMenu]` — marqueur de THÈME posé sur l'hôte `[ngMenu]` d'`@angular/aria`. Style UNIQUEMENT la\n * SURFACE du menu (fond, bord, ombre, rayon, padding, positionnement en dropdown ancré). N'ajoute\n * AUCUN rôle ni comportement : la sémantique (`role=\"menu\"`), le clavier, le focus roving, le\n * retour de focus au trigger, les sous-menus et le typeahead viennent intégralement d'aria\n * (`[ngMenu]`). Même philosophie que `[ktCard]` : la lib thématise, aria gère l'accessibilité.\n *\n * La directive n'a pas de logique propre : tout vit dans `menu.css` via le sélecteur `[ktMenu]`,\n * piloté par l'attribut `data-visible` qu'aria pose sur l'hôte (ouvert/fermé). Le positionnement\n * (CSS Anchor Positioning) est câblé par `[ktMenuTrigger]` (menu racine) et par `[ktMenuItem]`\n * (sous-menus) qui posent les `anchor-name` / `position-anchor`.\n *\n * @example\n * ```html\n * <button ngMenuTrigger ktMenuTrigger [menu]=\"m\">Options</button>\n * <div ngMenu ktMenu #m=\"ngMenu\" (itemSelected)=\"onSelect($event)\" aria-label=\"Options\">\n *   <button ngMenuItem ktMenuItem value=\"new\">Nouveau</button>\n * </div>\n * ```\n */\n@Directive({ selector: '[ktMenu]' })\nexport class KtMenu {}\n\n/**\n * `[ktMenuItem]` — marqueur de thème posé sur l'hôte `[ngMenuItem]`. Style la RANGÉE (hauteur de\n * cible tactile ≥44px, focus, survol, désactivé, item de sous-menu avec chevron). Comme `[ktMenu]`,\n * sans logique de sélection : l'état stylé est lu sur les attributs ARIA déjà posés par aria\n * (`:focus-visible` pour l'item actif via focus roving, `[aria-disabled]`, `[aria-expanded]`,\n * `[aria-haspopup]`, `[aria-checked]`).\n *\n * SEULE responsabilité technique : si l'item porte un sous-menu (`[submenu]` côté aria), on câble\n * l'ancrage CSS du sous-menu sur cet item (anchor-name sur l'item, position-anchor sur la surface\n * du sous-menu, marqueur `data-kt-submenu` pour l'ouvrir en latéral plutôt qu'en dropdown).\n *\n * EXIGENCE DE STRUCTURE (sous-menus) : le `[ngMenu]` d'un sous-menu DOIT être un DESCENDANT DOM du\n * menu parent (et non un frère). aria décide de maintenir un menu ouvert via `element.contains()`\n * sur la cible du focus/survol ; un sous-menu placé hors du sous-arbre du parent ferait croire à\n * aria que le focus a quitté le menu et provoquerait sa fermeture dès qu'on survole le sous-menu.\n * Le sous-menu reste rendu en place (top-layer non requis : `position: fixed` + ancrage CSS).\n *\n * @example\n * ```html\n * <button ngMenuItem ktMenuItem value=\"open\">Ouvrir</button>\n * ```\n */\n@Directive({\n  selector: '[ktMenuItem]',\n  host: {\n    '[style.anchor-name]': 'anchorName',\n  },\n})\nexport class KtMenuItem {\n  private readonly host = inject(ElementRef).nativeElement;\n  // Optionnel : `[ktMenuItem]` reste utilisable seul (simple thème) même hors d'un `[ngMenuItem]`.\n  private readonly ariaItem = inject(AriaMenuItem, { self: true, optional: true });\n  private readonly platformId = inject(PLATFORM_ID);\n\n  // Alloué à la PREMIÈRE détection d'un sous-menu (et non pour chaque item) : un item simple ne\n  // consomme pas d'anchor-name.\n  protected anchorName: string | undefined;\n  private readonly idGen = inject(KtIdGenerator);\n\n  constructor() {\n    if (!this.ariaItem) return;\n\n    effect(() => {\n      const submenu = this.ariaItem!.submenu()?.element;\n      if (!submenu) {\n        this.anchorName = undefined;\n        return;\n      }\n      this.anchorName ??= `--kt-submenu-anchor-${this.idGen.generateId()}`;\n      if (isPlatformBrowser(this.platformId)) {\n        submenu.style.setProperty('position-anchor', this.anchorName);\n        // Marque la surface comme un SOUS-menu : menu.css l'ouvre en latéral (inline-end) et non\n        // sous l'item, avec ses propres fallbacks de débordement.\n        submenu.setAttribute('data-kt-submenu', '');\n      }\n    });\n  }\n}\n\n/**\n * `[ktMenuSeparator]` — filet de séparation entre groupes d'items. Pose `role=\"separator\"`\n * (sémantique standard d'un séparateur de menu) ; la ligne elle-même vit dans `menu.css`.\n *\n * @example\n * ```html\n * <hr ktMenuSeparator />\n * ```\n */\n@Directive({\n  selector: '[ktMenuSeparator]',\n  host: { role: 'separator' },\n})\nexport class KtMenuSeparator {}\n","import { Directive, ElementRef, effect, inject, PLATFORM_ID } from '@angular/core';\nimport { isPlatformBrowser } from '@angular/common';\nimport { MenuTrigger as AriaMenuTrigger } from '@angular/aria/menu';\nimport { KtIdGenerator } from '@ktortu/aaa/cdk';\n\n/**\n * `[ktMenuTrigger]` — sucre de POSITIONNEMENT pour le menu racine. À poser SUR le même élément\n * qu'`[ngMenuTrigger]` (le bouton qui ouvre le menu). Il ne réimplémente RIEN du comportement :\n * l'ouverture/fermeture, `aria-expanded`, Échap, le clic-dehors et le retour de focus sont gérés\n * par aria (`[ngMenuTrigger]`). Sa seule tâche : poser un `anchor-name` sur le trigger et le\n * `position-anchor` correspondant sur la surface du menu, pour que `menu.css` l'ancre en dropdown\n * (CSS Anchor Positioning), comme le popup du Select — sans CDK Overlay (styles scopés conservés,\n * et pas de coordination fragile avec le focus qu'aria pose à l'ouverture).\n *\n * Requiert `[ngMenuTrigger]` sur le même hôte (injecté en `self`).\n *\n * @example\n * ```html\n * <button ngMenuTrigger ktMenuTrigger [menu]=\"m\">Fichier</button>\n * ```\n */\n@Directive({\n  selector: '[ktMenuTrigger]',\n  host: {\n    '[style.anchor-name]': 'anchorName',\n  },\n})\nexport class KtMenuTrigger {\n  private readonly host = inject(ElementRef).nativeElement;\n  private readonly ariaTrigger = inject(AriaMenuTrigger, { self: true });\n  private readonly platformId = inject(PLATFORM_ID);\n\n  private readonly idGen = inject(KtIdGenerator);\n  protected readonly anchorName = `--kt-menu-anchor-${this.idGen.generateId()}`;\n\n  constructor() {\n    effect(() => {\n      const menuEl = this.ariaTrigger.menu()?.element;\n      if (!menuEl) return;\n      if (isPlatformBrowser(this.platformId)) {\n        menuEl.style.setProperty('position-anchor', this.anchorName);\n      }\n    });\n  }\n}\n","import { Directive, InjectionToken, computed, inject, input, isDevMode, model } from '@angular/core';\nimport { MenuItem as AriaMenuItem } from '@angular/aria/menu';\n\n/**\n * Items de menu À ÉTAT (checkbox / radio).\n *\n * Pourquoi ces directives existent : `@angular/aria` accepte bien `role=\"menuitemcheckbox\"` /\n * `\"menuitemradio\"` sur `[ngMenuItem]`, MAIS NE POSE JAMAIS `aria-checked` — son pattern se\n * contente d'émettre `itemSelected(value)`. Sans `aria-checked`, l'item coché est MUET pour les\n * lecteurs d'écran (échec WCAG 4.1.2). Ces directives comblent ce trou : elles possèdent l'état\n * coché, le bindent en `aria-checked`, et le basculent à l'activation (clic / Entrée / Espace).\n *\n * Elles ne touchent pas au `role` (laissé à l'input `role` d'aria, posé par le consommateur) pour\n * éviter tout conflit de binding sur `[attr.role]` ; la démo montre l'usage `role=\"menuitemradio\"`.\n */\n\n/** Activation commune : un item de menu se déclenche au clic ET au clavier (Entrée / Espace). */\nconst ACTIVATION_HOST = {\n  '(click)': 'activate($event)',\n  '(keydown.enter)': 'activate($event)',\n  '(keydown.space)': 'activate($event)',\n} as const;\n\n/**\n * `[ktMenuItemCheckbox]` — case à cocher de menu (bascule indépendante). À poser sur un\n * `[ngMenuItem] role=\"menuitemcheckbox\"`. Bind `aria-checked` et bascule `checked` à l'activation.\n *\n * @example\n * ```html\n * <button ngMenuItem ktMenuItem ktMenuItemCheckbox role=\"menuitemcheckbox\" [(checked)]=\"wrap\">\n *   Retour à la ligne\n * </button>\n * ```\n */\n@Directive({\n  selector: '[ktMenuItemCheckbox]',\n  host: {\n    ...ACTIVATION_HOST,\n    '[attr.aria-checked]': 'checked()',\n  },\n})\nexport class KtMenuItemCheckbox {\n  private readonly ariaItem = inject(AriaMenuItem, { self: true, optional: true });\n\n  /** État coché, bidirectionnel : `[(checked)]`. */\n  readonly checked = model<boolean>(false);\n\n  protected activate(event: Event): void {\n    if (this.ariaItem?.disabled()) return;\n    if (event.type === 'keydown') {\n      event.preventDefault();\n    }\n    this.checked.update((v) => !v);\n  }\n}\n\n/** Source de la valeur sélectionnée d'un groupe radio, exposée aux `[ktMenuItemRadio]` enfants. */\nexport const KT_MENU_RADIO_GROUP = new InjectionToken<KtMenuRadioGroup<unknown>>('KT_MENU_RADIO_GROUP');\n\n/**\n * `[ktMenuRadioGroup]` — coordinateur d'un groupe d'items radio mutuellement exclusifs. À poser sur\n * un conteneur englobant les `[ktMenuItemRadio]` (typiquement un `role=\"group\"`). Détient la valeur\n * sélectionnée ; chaque radio s'y compare pour son `aria-checked` et la met à jour à l'activation.\n *\n * @example\n * ```html\n * <div role=\"group\" ktMenuRadioGroup [(value)]=\"sortBy\" aria-label=\"Trier par\">\n *   <button ngMenuItem ktMenuItem ktMenuItemRadio role=\"menuitemradio\" [value]=\"'name'\">Nom</button>\n *   <button ngMenuItem ktMenuItem ktMenuItemRadio role=\"menuitemradio\" [value]=\"'date'\">Date</button>\n * </div>\n * ```\n */\n@Directive({\n  selector: '[ktMenuRadioGroup]',\n  exportAs: 'ktMenuRadioGroup',\n  providers: [{ provide: KT_MENU_RADIO_GROUP, useExisting: KtMenuRadioGroup }],\n})\nexport class KtMenuRadioGroup<V> {\n  /** Valeur sélectionnée du groupe, bidirectionnelle : `[(value)]`. */\n  readonly value = model<V | null>(null);\n}\n\n/**\n * `[ktMenuItemRadio]` — bouton radio de menu. À poser sur un `[ngMenuItem] role=\"menuitemradio\"`\n * dans un `[ktMenuRadioGroup]`. `aria-checked` reflète l'égalité avec la valeur du groupe ;\n * l'activation sélectionne cette valeur.\n *\n * @example\n * ```html\n * <button ngMenuItem ktMenuItem ktMenuItemRadio role=\"menuitemradio\" [value]=\"'name'\">Trier par nom</button>\n * ```\n */\n@Directive({\n  selector: '[ktMenuItemRadio]',\n  host: {\n    ...ACTIVATION_HOST,\n    '[attr.aria-checked]': 'checked()',\n  },\n})\nexport class KtMenuItemRadio<V> {\n  private readonly ariaItem = inject(AriaMenuItem, { self: true, optional: true });\n  private readonly group = inject<KtMenuRadioGroup<V>>(KT_MENU_RADIO_GROUP, { optional: true });\n\n  /** Valeur portée par ce radio (comparée à celle du groupe). */\n  readonly value = input.required<V>();\n\n  protected readonly checked = computed(() => this.group?.value() === this.value());\n\n  constructor() {\n    // Garde-fou dev : sans [ktMenuRadioGroup] parent, aria-checked reste figé (item muet pour les SR).\n    if (isDevMode() && !this.group) {\n      console.warn(\n        '[ktMenuItemRadio] doit être placé dans un [ktMenuRadioGroup] : ' +\n          'sans groupe, la sélection et `aria-checked` restent inopérants.',\n      );\n    }\n  }\n\n  protected activate(event: Event): void {\n    if (this.ariaItem?.disabled()) return;\n    if (event.type === 'keydown') {\n      event.preventDefault();\n    }\n    this.group?.value.set(this.value());\n  }\n}\n","import { KtMenu, KtMenuItem, KtMenuSeparator } from './menu';\nimport { KtMenuTrigger } from './menu-trigger';\nimport { KtMenuItemCheckbox, KtMenuItemRadio, KtMenuRadioGroup } from './menu-toggle';\n\nexport * from './menu';\nexport * from './menu-trigger';\nexport * from './menu-toggle';\n\n/**\n * Import ergonomique de toute la famille menu (couche de THÈME ktortu) en une fois :\n * `imports: [KT_MENU]` au lieu d'énumérer chaque directive. À composer avec les directives\n * d'`@angular/aria/menu` (`Menu`, `MenuItem`, `MenuTrigger`, `MenuContent`), qui apportent le\n * comportement accessible.\n */\nexport const KT_MENU = [\n  KtMenu,\n  KtMenuItem,\n  KtMenuSeparator,\n  KtMenuTrigger,\n  KtMenuItemCheckbox,\n  KtMenuItemRadio,\n  KtMenuRadioGroup,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["AriaMenuItem","AriaMenuTrigger"],"mappings":"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"}

package/fesm2022/ktortu-aaa-tabs.mjs

@@ -0,0 +1,79 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, afterRenderEffect, Directive } from '@angular/core';
+import { TabList } from '@angular/aria/tabs';
+
+/**
+ * Amène l'onglet sélectionné dans la zone visible quand la liste d'onglets déborde et défile
+ * (cf. tabs.css). Le focus clavier d'`@angular/aria` scrolle déjà l'onglet focalisé ; cette
+ * directive couvre ce que le CSS seul ne peut pas faire de façon fiable : l'onglet actif
+ * **hors-champ au montage** et lors d'un **changement de sélection programmatique**.
+ *
+ * Opt-in, à poser sur `[ngTabList]` :
+ *
+ * @example
+ * ```html
+ * <ul ngTabList ktTabScroll [(selectedTab)]="tab"> … </ul>
+ * ```
+ *
+ * Intégrée réactivement avec `@angular/aria/tabs` via son `ModelSignal` `selectedTab`.
+ */
+class KtTabScroll {
+    list = inject(ElementRef).nativeElement;
+    tabList = inject(TabList);
+    constructor() {
+        // afterRenderEffect est la primitive réactive d'Angular v22 conçue spécifiquement
+        // pour exécuter des effets dépendant de signaux APRES la mise à jour complète du DOM et du layout.
+        afterRenderEffect(() => {
+            // Enregistrer la dépendance réactive sur le signal de sélection
+            this.tabList.selectedTab();
+            // Exécuter le scroll (le DOM est garanti stable et à jour)
+            this.scrollSelectedIntoView();
+        });
+    }
+    scrollSelectedIntoView() {
+        const selected = this.list.querySelector('[ngTab][aria-selected="true"]');
+        if (!selected)
+            return;
+        const container = this.list;
+        const isVertical = container.getAttribute('aria-orientation') === 'vertical' || container.getAttribute('orientation') === 'vertical';
+        if (isVertical) {
+            const selectedTop = selected.offsetTop;
+            const selectedBottom = selectedTop + selected.offsetHeight;
+            const containerTop = container.scrollTop;
+            const containerBottom = containerTop + container.clientHeight;
+            if (selectedTop < containerTop) {
+                container.scrollTo({ top: selectedTop, behavior: 'smooth' });
+            }
+            else if (selectedBottom > containerBottom) {
+                container.scrollTo({ top: selectedBottom - container.clientHeight, behavior: 'smooth' });
+            }
+        }
+        else {
+            const selectedLeft = selected.offsetLeft;
+            const selectedRight = selectedLeft + selected.offsetWidth;
+            const containerLeft = container.scrollLeft;
+            const containerRight = containerLeft + container.clientWidth;
+            if (selectedLeft < containerLeft) {
+                container.scrollTo({ left: selectedLeft, behavior: 'smooth' });
+            }
+            else if (selectedRight > containerRight) {
+                container.scrollTo({ left: selectedRight - container.clientWidth, behavior: 'smooth' });
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtTabScroll, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.1", type: KtTabScroll, isStandalone: true, selector: "[ngTabList][ktTabScroll]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtTabScroll, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngTabList][ktTabScroll]',
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { KtTabScroll };
+//# sourceMappingURL=ktortu-aaa-tabs.mjs.map

package/fesm2022/ktortu-aaa-tabs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ktortu-aaa-tabs.mjs","sources":["../../../../projects/ktortu/aaa/tabs/tab-scroll.ts","../../../../projects/ktortu/aaa/tabs/ktortu-aaa-tabs.ts"],"sourcesContent":["import { Directive, ElementRef, afterRenderEffect, inject } from '@angular/core';\nimport { TabList } from '@angular/aria/tabs';\n\n/**\n * Amène l'onglet sélectionné dans la zone visible quand la liste d'onglets déborde et défile\n * (cf. tabs.css). Le focus clavier d'`@angular/aria` scrolle déjà l'onglet focalisé ; cette\n * directive couvre ce que le CSS seul ne peut pas faire de façon fiable : l'onglet actif\n * **hors-champ au montage** et lors d'un **changement de sélection programmatique**.\n *\n * Opt-in, à poser sur `[ngTabList]` :\n *\n * @example\n * ```html\n * <ul ngTabList ktTabScroll [(selectedTab)]=\"tab\"> … </ul>\n * ```\n *\n * Intégrée réactivement avec `@angular/aria/tabs` via son `ModelSignal` `selectedTab`.\n */\n@Directive({\n  selector: '[ngTabList][ktTabScroll]',\n})\nexport class KtTabScroll {\n  private readonly list = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n  private readonly tabList = inject(TabList);\n\n  constructor() {\n    // afterRenderEffect est la primitive réactive d'Angular v22 conçue spécifiquement\n    // pour exécuter des effets dépendant de signaux APRES la mise à jour complète du DOM et du layout.\n    afterRenderEffect(() => {\n      // Enregistrer la dépendance réactive sur le signal de sélection\n      this.tabList.selectedTab();\n\n      // Exécuter le scroll (le DOM est garanti stable et à jour)\n      this.scrollSelectedIntoView();\n    });\n  }\n\n  private scrollSelectedIntoView(): void {\n    const selected = this.list.querySelector<HTMLElement>('[ngTab][aria-selected=\"true\"]');\n    if (!selected) return;\n\n    const container = this.list;\n    const isVertical =\n      container.getAttribute('aria-orientation') === 'vertical' || container.getAttribute('orientation') === 'vertical';\n\n    if (isVertical) {\n      const selectedTop = selected.offsetTop;\n      const selectedBottom = selectedTop + selected.offsetHeight;\n      const containerTop = container.scrollTop;\n      const containerBottom = containerTop + container.clientHeight;\n\n      if (selectedTop < containerTop) {\n        container.scrollTo({ top: selectedTop, behavior: 'smooth' });\n      } else if (selectedBottom > containerBottom) {\n        container.scrollTo({ top: selectedBottom - container.clientHeight, behavior: 'smooth' });\n      }\n    } else {\n      const selectedLeft = selected.offsetLeft;\n      const selectedRight = selectedLeft + selected.offsetWidth;\n      const containerLeft = container.scrollLeft;\n      const containerRight = containerLeft + container.clientWidth;\n\n      if (selectedLeft < containerLeft) {\n        container.scrollTo({ left: selectedLeft, behavior: 'smooth' });\n      } else if (selectedRight > containerRight) {\n        container.scrollTo({ left: selectedRight - container.clientWidth, behavior: 'smooth' });\n      }\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;AAGA;;;;;;;;;;;;;;AAcG;MAIU,WAAW,CAAA;AACL,IAAA,IAAI,GAAG,MAAM,CAA0B,UAAU,CAAC,CAAC,aAAa;AAChE,IAAA,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;AAE1C,IAAA,WAAA,GAAA;;;QAGE,iBAAiB,CAAC,MAAK;;AAErB,YAAA,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE;;YAG1B,IAAI,CAAC,sBAAsB,EAAE;AAC/B,QAAA,CAAC,CAAC;IACJ;IAEQ,sBAAsB,GAAA;QAC5B,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAc,+BAA+B,CAAC;AACtF,QAAA,IAAI,CAAC,QAAQ;YAAE;AAEf,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI;AAC3B,QAAA,MAAM,UAAU,GACd,SAAS,CAAC,YAAY,CAAC,kBAAkB,CAAC,KAAK,UAAU,IAAI,SAAS,CAAC,YAAY,CAAC,aAAa,CAAC,KAAK,UAAU;QAEnH,IAAI,UAAU,EAAE;AACd,YAAA,MAAM,WAAW,GAAG,QAAQ,CAAC,SAAS;AACtC,YAAA,MAAM,cAAc,GAAG,WAAW,GAAG,QAAQ,CAAC,YAAY;AAC1D,YAAA,MAAM,YAAY,GAAG,SAAS,CAAC,SAAS;AACxC,YAAA,MAAM,eAAe,GAAG,YAAY,GAAG,SAAS,CAAC,YAAY;AAE7D,YAAA,IAAI,WAAW,GAAG,YAAY,EAAE;AAC9B,gBAAA,SAAS,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;YAC9D;AAAO,iBAAA,IAAI,cAAc,GAAG,eAAe,EAAE;AAC3C,gBAAA,SAAS,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,cAAc,GAAG,SAAS,CAAC,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;YAC1F;QACF;aAAO;AACL,YAAA,MAAM,YAAY,GAAG,QAAQ,CAAC,UAAU;AACxC,YAAA,MAAM,aAAa,GAAG,YAAY,GAAG,QAAQ,CAAC,WAAW;AACzD,YAAA,MAAM,aAAa,GAAG,SAAS,CAAC,UAAU;AAC1C,YAAA,MAAM,cAAc,GAAG,aAAa,GAAG,SAAS,CAAC,WAAW;AAE5D,YAAA,IAAI,YAAY,GAAG,aAAa,EAAE;AAChC,gBAAA,SAAS,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;YAChE;AAAO,iBAAA,IAAI,aAAa,GAAG,cAAc,EAAE;AACzC,gBAAA,SAAS,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,aAAa,GAAG,SAAS,CAAC,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;YACzF;QACF;IACF;uGA/CW,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAX,WAAW,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,0BAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAX,WAAW,EAAA,UAAA,EAAA,CAAA;kBAHvB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,0BAA0B;AACrC,iBAAA;;;ACpBD;;AAEG;;;;"}