@claudebernard/therapeutic-alternative-element 2.1.2 → 2.2.0

package/dist/therapeutic-alternative.d.ts

@@ -5,9 +5,10 @@ import { TemplateResult } from 'lit-html';
 
 /**
  * Composant pour afficher les alternatives thérapeutiques d'un médicament donné.
- * Permet à l'utilisateur d'affiner sa recherche via des critères d'inclusion, d'exclusion et des
- * filtres rapides, et affiche les résultats correspondants — toute la recherche/agrégation reste
- * côté serveur, ce composant ne fait qu'envoyer les critères et afficher ce qui revient.
+ * Permet à l'utilisateur d'affiner sa recherche via un pool de base (scope), des critères
+ * complémentaires (include), des critères d'exclusion et des filtres rapides, et affiche les
+ * résultats correspondants — toute la recherche/agrégation reste côté serveur, ce composant ne
+ * fait qu'envoyer les critères et afficher ce qui revient.
  * @element bcb-therapeutic-alternative
  */
 export declare class TherapeuticAlternative extends LitElement {
@@ -21,17 +22,21 @@ export declare class TherapeuticAlternative extends LitElement {
     private totalElements;
     private lastRequestHadNoSelectedCriteria;
     private currentPage;
+    private scope;
     private include;
     private exclude;
     private quickFilters;
+    private scopeFacets;
     private includeFacets;
     private excludeFacets;
     private truncatedGroups;
     private expandFacetGroupKey;
+    private scopeLabels;
     private includeLabels;
     private excludeLabels;
-    private openInclusionGroup;
+    private openScopeGroup;
     private openExclusionGroup;
+    private openIncludeGroup;
     private checklistSearchTerm;
     private sectionCollapsed;
     private apiSearchError;
@@ -40,7 +45,7 @@ export declare class TherapeuticAlternative extends LitElement {
     private apiReplaceError;
     private apiReplaceLoading;
     private missingPrescriptionError;
-    private hasAppliedInitialInclude;
+    private hasAppliedInitialScope;
     private refetchTimer;
     private requestSeq;
     private get currentMedication();
@@ -53,15 +58,19 @@ export declare class TherapeuticAlternative extends LitElement {
     private hasNoSelectedCriteria;
     private fetchAlternatives;
     private applyResponse;
+    private static buildScopeFacets;
     private static buildIncludeFacets;
     private static buildExcludeFacets;
-    private static deriveInitialInclude;
-    private toggleInclude;
+    private static deriveInitialScope;
+    private toggleScope;
     private toggleExclude;
+    private toggleInclude;
     private toggleQuickFilter;
     private exclusionTruncatedGroupKey;
-    private toggleInclusionPanel;
+    private includeTruncatedGroupKey;
+    private toggleScopePanel;
     private toggleExclusionPanel;
+    private toggleIncludePanel;
     private requestMoreFacetValues;
     private toggleSection;
     private cancelAlternative;
@@ -71,8 +80,9 @@ export declare class TherapeuticAlternative extends LitElement {
     private renderChecklistSearch;
     private renderSelectedChips;
     private renderPill;
-    private renderInclusionSection;
+    private renderScopeSection;
     private renderExclusionSection;
+    private renderIncludeSection;
     private renderQuickFiltersSection;
     private renderSectionHeader;
     private matchReasonLabels;

package/dist/therapeutic-alternative.es.js

@@ -2297,10 +2297,9 @@ ProductCard = __decorateClass$1([
 ], ProductCard);
 const REFETCH_DEBOUNCE_MS = 300;
 const CHECKLIST_SEARCH_THRESHOLD = 30;
-const INCLUSION_GROUPS = [
+const SCOPE_GROUPS = [
   { key: "indications", idsField: "indicationIds", label: "Indications" },
-  { key: "activeSubstances", idsField: "activeSubstanceIds", label: "Principes actifs" },
-  { key: "atcClasses", idsField: "atcClassIds", label: "Classe thérapeutique" }
+  { key: "atcClasses", idsField: "atcClassIds", label: "Classe ATC" }
 ];
 const EXCLUSION_GROUPS = [
   { key: "activeSubstances", idsField: "activeSubstanceIds", label: "Principes actifs" },
@@ -2315,6 +2314,12 @@ const QUICK_FILTERS = [
   { key: "sameDosage", label: "Même dosage" },
   { key: "sameRouteOfAdministration", label: "Même voie d'administration" }
 ];
+const INCLUDE_GROUPS = [
+  { key: "activeSubstances", idsField: "activeSubstanceIds", label: "Principes actifs" },
+  { key: "galenicForms", idsField: "galenicFormIds", label: "Forme galénique", quickFilterKey: "sameGalenicForm" },
+  { key: "dosages", idsField: "dosageIds", label: "Dosage", quickFilterKey: "sameDosage" },
+  { key: "routesOfAdministration", idsField: "routeOfAdministrationIds", label: "Voie d'administration", quickFilterKey: "sameRouteOfAdministration" }
+];
 const INCLUDE_COUNT_TOOLTIP = "Nombre de résultats restants avec cette valeur";
 const EXCLUDE_COUNT_TOOLTIP = "Nombre de résultats retirés avec cette valeur";
 const MATCH_REASON_VERB_BY_DIMENSION = {
@@ -2322,8 +2327,11 @@ const MATCH_REASON_VERB_BY_DIMENSION = {
   activeSubstance: "contient"
 };
 const therapeuticAlternativeCSS = '.claudebernard-therapeutic-alternative {\n  font-family: var(--custom-font-family, "Ubuntu"), sans-serif;\n  padding: 1rem;\n}\n.claudebernard-therapeutic-alternative-without-title {\n  padding-top: 0;\n  max-width: 70vw;\n  width: 60vw;\n  max-height: 70vh;\n}\n.claudebernard-therapeutic-alternative-title {\n  font-size: 0.75rem;\n  font-weight: 700;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n  color: var(--bcbd-gray-500-color, #64748B);\n  margin-bottom: 0.375rem;\n  display: block;\n}\n.claudebernard-therapeutic-alternative__source {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  flex-wrap: wrap;\n}\n.claudebernard-therapeutic-alternative__disclaimer {\n  margin-bottom: 1rem;\n}\n.claudebernard-therapeutic-alternative__loading {\n  width: 100%;\n  height: 30%;\n  padding-top: 2rem;\n  display: flex;\n  justify-content: center;\n}\n.claudebernard-therapeutic-alternative__section {\n  border: 1px solid var(--bcbd-border-gray-color, #CBD5E1);\n  border-radius: 0.625rem;\n  padding: 0.75rem 0.875rem;\n  margin-bottom: 1rem;\n}\n.claudebernard-therapeutic-alternative__section-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  cursor: pointer;\n  background: none;\n  border: none;\n  padding: 0;\n  margin-bottom: 0.625rem;\n  font-family: inherit;\n  line-height: 1;\n}\n.claudebernard-therapeutic-alternative__section-header span:first-child {\n  font-size: 0.75rem;\n  font-weight: 700;\n  color: var(--bcbd-gray-500-color, #64748B);\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n}\n.claudebernard-therapeutic-alternative__chevron {\n  font-size: 0.75rem;\n  color: var(--bcbd-gray-400-color, #94A3B8);\n  transition: transform 0.15s ease-out;\n  display: inline-flex;\n}\n.claudebernard-therapeutic-alternative__chevron--expanded {\n  transform: rotate(180deg);\n}\n.claudebernard-therapeutic-alternative__pills {\n  display: flex;\n  gap: 0.5rem;\n  flex-wrap: wrap;\n}\n.claudebernard-therapeutic-alternative__pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  border: 1px solid var(--bcbd-border-gray-color, #CBD5E1);\n  background: #fff;\n  color: var(--bcbd-gray-600-color, #475569);\n  border-radius: 6.25rem;\n  padding: 0.375rem 0.75rem;\n  font-size: 0.8125rem;\n  font-family: inherit;\n  font-weight: 400;\n  white-space: nowrap;\n  cursor: pointer;\n  line-height: 1;\n}\n.claudebernard-therapeutic-alternative__pill--active {\n  border-color: var(--bcbd-primary-color, #0C75AD);\n  background: color-mix(in srgb, var(--bcbd-primary-color, #0C75AD) 10%, transparent);\n  color: var(--bcbd-primary-color, #0C75AD);\n  font-weight: 700;\n}\n.claudebernard-therapeutic-alternative__panel {\n  border-top: 1px solid var(--bcbd-border-color-200, #E2E8F0);\n  margin-top: 0.75rem;\n  padding-top: 0.75rem;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n.claudebernard-therapeutic-alternative__panel-rows {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  max-height: 16.25rem;\n  overflow-y: auto;\n  padding: 0.25rem 0.125rem;\n}\n.claudebernard-therapeutic-alternative__panel-empty {\n  display: block;\n  margin-top: 0.75rem;\n  font-size: 0.875rem;\n  color: var(--bcbd-gray-500-color, #64748B);\n}\n.claudebernard-therapeutic-alternative__panel-expand {\n  align-self: flex-start;\n  background: none;\n  border: none;\n  padding: 0.25rem 0 0;\n  font-family: inherit;\n  font-size: 0.8125rem;\n  font-weight: 700;\n  color: var(--bcbd-primary-color, #0C75AD);\n  cursor: pointer;\n}\n.claudebernard-therapeutic-alternative__panel-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  border-radius: 0.375rem;\n  --bcbd-checkbox-font-size: 0.875rem;\n  --bcbd-checkbox-size: 0.9375rem;\n}\n.claudebernard-therapeutic-alternative__panel-row--pending {\n  background: var(--bcbd-gray-100-color, #F1F5F9);\n  padding: 0.25rem 0.375rem;\n  margin: -0.25rem -0.375rem;\n}\n.claudebernard-therapeutic-alternative__count-badge {\n  font-size: 0.75rem;\n  color: var(--bcbd-white-color, #fff);\n  background: var(--bcbd-primary-color, #0C75AD);\n  border-radius: 0.25rem;\n  padding: 0.125rem 0.375rem;\n  flex-shrink: 0;\n}\n.claudebernard-therapeutic-alternative__selected-chips {\n  display: flex;\n  gap: 0.375rem;\n  flex-wrap: wrap;\n  margin-top: 0.5rem;\n}\n.claudebernard-therapeutic-alternative__chips {\n  display: flex;\n  gap: 0.5rem;\n  flex-wrap: wrap;\n}\n.claudebernard-therapeutic-alternative__chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  border: 1px solid var(--bcbd-border-gray-color, #CBD5E1);\n  background: #fff;\n  color: var(--bcbd-gray-500-color, #64748B);\n  border-radius: 6.25rem;\n  padding: 0.375rem 0.75rem;\n  font-size: 0.8125rem;\n  font-family: inherit;\n  font-weight: 400;\n  white-space: nowrap;\n  cursor: pointer;\n  line-height: 1;\n}\n.claudebernard-therapeutic-alternative__chip--active {\n  border-color: var(--bcbd-primary-color, #0C75AD);\n  background: color-mix(in srgb, var(--bcbd-primary-color, #0C75AD) 10%, transparent);\n  color: var(--bcbd-primary-color, #0C75AD);\n  font-weight: 700;\n}\n.claudebernard-therapeutic-alternative__results {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n.claudebernard-therapeutic-alternative__results-header {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  margin-bottom: 0.625rem;\n}\n.claudebernard-therapeutic-alternative__results-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  background: color-mix(in srgb, var(--bcbd-primary-color, #0C75AD) 10%, transparent);\n  color: var(--bcbd-primary-color, #0C75AD);\n  border-radius: 6.25rem;\n  padding: 0.3125rem 0.75rem;\n  font-size: 0.8125rem;\n  font-weight: 700;\n  line-height: 1;\n}\n.claudebernard-therapeutic-alternative__results-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n.claudebernard-therapeutic-alternative__no-results {\n  text-align: center;\n  padding: 1.5rem 1rem;\n  color: var(--bcbd-gray-500-color, #64748B);\n  font-size: 0.875rem;\n}\n.claudebernard-therapeutic-alternative__no-medication {\n  padding: 1.25rem;\n}';
+function emptyScopeCriteria() {
+  return { indicationIds: [], atcClassIds: [] };
+}
 function emptyIncludeCriteria() {
-  return { indicationIds: [], activeSubstanceIds: [], atcClassIds: [] };
+  return { activeSubstanceIds: [], galenicFormIds: [], dosageIds: [], routeOfAdministrationIds: [] };
 }
 function emptyExcludeCriteria() {
   return {
@@ -2338,8 +2346,11 @@ function emptyExcludeCriteria() {
 function emptyQuickFilters() {
   return { sameGalenicForm: false, sameDosage: false, sameRouteOfAdministration: false };
 }
+function emptyScopeFacets() {
+  return { indications: [], atcClasses: [] };
+}
 function emptyIncludeFacets() {
-  return { indications: [], activeSubstances: [], atcClasses: [] };
+  return { activeSubstances: [], galenicForms: [], dosages: [], routesOfAdministration: [] };
 }
 function emptyExcludeFacets() {
   return {
@@ -2351,8 +2362,11 @@ function emptyExcludeFacets() {
     precautions: []
   };
 }
+function emptyScopeLabels() {
+  return { indications: {}, atcClasses: {} };
+}
 function emptyIncludeLabels() {
-  return { indications: {}, activeSubstances: {}, atcClasses: {} };
+  return { activeSubstances: {}, galenicForms: {}, dosages: {}, routesOfAdministration: {} };
 }
 function labelsForIds(ids, values) {
   const labelById = new Map(values.filter((v2) => v2.id).map((v2) => [v2.id, v2.label ?? v2.id]));
@@ -2397,26 +2411,30 @@ let TherapeuticAlternative = class extends i$1 {
     this.totalElements = 0;
     this.lastRequestHadNoSelectedCriteria = true;
     this.currentPage = 1;
+    this.scope = emptyScopeCriteria();
     this.include = emptyIncludeCriteria();
     this.exclude = emptyExcludeCriteria();
     this.quickFilters = emptyQuickFilters();
+    this.scopeFacets = emptyScopeFacets();
     this.includeFacets = emptyIncludeFacets();
     this.excludeFacets = emptyExcludeFacets();
     this.truncatedGroups = [];
     this.expandFacetGroupKey = null;
+    this.scopeLabels = emptyScopeLabels();
     this.includeLabels = emptyIncludeLabels();
     this.excludeLabels = emptyExcludeLabels();
-    this.openInclusionGroup = null;
+    this.openScopeGroup = null;
     this.openExclusionGroup = null;
+    this.openIncludeGroup = null;
     this.checklistSearchTerm = "";
-    this.sectionCollapsed = { inclusion: false, exclusion: false, quickFilters: false };
+    this.sectionCollapsed = { scope: false, include: false, exclusion: false, quickFilters: false };
     this.apiSearchError = null;
     this.apiSearchLoading = false;
     this.pendingToggleIds = /* @__PURE__ */ new Set();
     this.apiReplaceError = null;
     this.apiReplaceLoading = false;
     this.missingPrescriptionError = null;
-    this.hasAppliedInitialInclude = false;
+    this.hasAppliedInitialScope = false;
     this.requestSeq = 0;
   }
   get currentMedication() {
@@ -2440,16 +2458,19 @@ let TherapeuticAlternative = class extends i$1 {
     }
     if (changedProperties.has("medication") && this.currentMedication) {
       this.clearScheduledRefetch();
+      this.scope = emptyScopeCriteria();
       this.include = emptyIncludeCriteria();
       this.exclude = emptyExcludeCriteria();
+      this.scopeLabels = emptyScopeLabels();
       this.includeLabels = emptyIncludeLabels();
       this.excludeLabels = emptyExcludeLabels();
       this.quickFilters = emptyQuickFilters();
-      this.openInclusionGroup = null;
+      this.openScopeGroup = null;
       this.openExclusionGroup = null;
+      this.openIncludeGroup = null;
       this.expandFacetGroupKey = null;
       this.currentPage = 1;
-      this.hasAppliedInitialInclude = false;
+      this.hasAppliedInitialScope = false;
       this.fetchAlternatives();
     }
   }
@@ -2471,10 +2492,11 @@ let TherapeuticAlternative = class extends i$1 {
   // Mirrors the backend's own hasNoSelectedCriteria(request) -- must be evaluated against
   // whatever's about to be SENT, not read back later, see lastRequestHadNoSelectedCriteria.
   hasNoSelectedCriteria() {
-    const anyInclude = this.include.indicationIds.length > 0 || this.include.activeSubstanceIds.length > 0 || this.include.atcClassIds.length > 0;
+    const anyScope = this.scope.indicationIds.length > 0 || this.scope.atcClassIds.length > 0;
+    const anyInclude = Object.values(this.include).some((ids) => ids.length > 0);
     const anyExclude = Object.values(this.exclude).some((ids) => ids.length > 0);
     const anyQuickFilter = this.quickFilters.sameGalenicForm || this.quickFilters.sameDosage || this.quickFilters.sameRouteOfAdministration;
-    return !anyInclude && !anyExclude && !anyQuickFilter;
+    return !anyScope && !anyInclude && !anyExclude && !anyQuickFilter;
   }
   fetchAlternatives() {
     const productId = this.sourceProductId;
@@ -2486,6 +2508,7 @@ let TherapeuticAlternative = class extends i$1 {
     this.apiSearchError = null;
     this.lastRequestHadNoSelectedCriteria = this.hasNoSelectedCriteria();
     const body = {
+      scope: this.scope,
       include: this.include,
       exclude: this.exclude,
       quickFilters: this.quickFilters,
@@ -2515,24 +2538,31 @@ let TherapeuticAlternative = class extends i$1 {
     this.sourceProduct = data.sourceProduct ?? null;
     this.results = data.results?.content ?? [];
     this.totalElements = data.results?.totalElements ?? 0;
+    this.scopeFacets = TherapeuticAlternative.buildScopeFacets(data);
     this.includeFacets = TherapeuticAlternative.buildIncludeFacets(data);
     this.excludeFacets = TherapeuticAlternative.buildExcludeFacets(data);
     this.truncatedGroups = data.facets?.truncatedGroups ?? [];
-    if (!this.hasAppliedInitialInclude) {
-      this.hasAppliedInitialInclude = true;
-      this.include = TherapeuticAlternative.deriveInitialInclude(this.sourceProduct);
-      this.includeLabels = {
-        indications: labelsForIds(this.include.indicationIds, this.includeFacets.indications),
-        activeSubstances: labelsForIds(this.include.activeSubstanceIds, this.includeFacets.activeSubstances),
-        atcClasses: labelsForIds(this.include.atcClassIds, this.includeFacets.atcClasses)
+    if (!this.hasAppliedInitialScope) {
+      this.hasAppliedInitialScope = true;
+      this.scope = TherapeuticAlternative.deriveInitialScope(this.sourceProduct);
+      this.scopeLabels = {
+        indications: labelsForIds(this.scope.indicationIds, this.scopeFacets.indications),
+        atcClasses: labelsForIds(this.scope.atcClassIds, this.scopeFacets.atcClasses)
       };
     }
   }
+  static buildScopeFacets(data) {
+    return {
+      indications: data.facets?.scope?.indications ?? [],
+      atcClasses: data.facets?.scope?.atcClasses ?? []
+    };
+  }
   static buildIncludeFacets(data) {
     return {
-      indications: data.facets?.include?.indications ?? [],
       activeSubstances: data.facets?.include?.activeSubstances ?? [],
-      atcClasses: data.facets?.include?.atcClasses ?? []
+      galenicForms: data.facets?.include?.galenicForms ?? [],
+      dosages: data.facets?.include?.dosages ?? [],
+      routesOfAdministration: data.facets?.include?.routesOfAdministration ?? []
     };
   }
   static buildExcludeFacets(data) {
@@ -2545,38 +2575,37 @@ let TherapeuticAlternative = class extends i$1 {
       precautions: data.facets?.exclude?.precautions ?? []
     };
   }
-  static deriveInitialInclude(sourceProduct) {
+  static deriveInitialScope(sourceProduct) {
     const codesOf = (list) => (list ?? []).map((item) => item.code).filter((code) => !!code);
     return {
       indicationIds: codesOf(sourceProduct?.extendedProperties?.keywords?.indicationsKeywords),
-      activeSubstanceIds: codesOf(sourceProduct?.extendedProperties?.composition?.activeSubstances),
-      // Contrairement à indications/activeSubstances (des listes plates de valeurs propres au
-      // produit), sourceProduct.properties.atcClasses est un fil d'Ariane hiérarchique (classe >
-      // sous-classe > ... > code le plus spécifique, ex: M, M01, M01A, M01AX, M01AX02) — les
-      // mapper tous comme ids cochés n'a pas de sens (5 "sélections" pour UNE seule classification),
-      // et envoie en plus des codes ancêtres bien trop larges (ex: "M" = tout le système
-      // musculo-squelettique) dans la requête, invisibles dans l'UI puisque sans label correspondant
-      // dans includeFacets.atcClasses. Rien n'est pré-coché pour ce groupe : le backend applique déjà
-      // son propre défaut sur atcClassIds vide (voir le commentaire plus haut sur fetchAlternatives).
+      // Contrairement à indications (une liste plate de valeurs propres au produit),
+      // sourceProduct.properties.atcClasses est un fil d'Ariane hiérarchique (classe > sous-classe
+      // > ... > code le plus spécifique, ex: M, M01, M01A, M01AX, M01AX02) — les mapper tous comme
+      // ids cochés n'a pas de sens (5 "sélections" pour UNE seule classification), et envoie en
+      // plus des codes ancêtres bien trop larges (ex: "M" = tout le système musculo-squelettique)
+      // dans la requête, invisibles dans l'UI puisque sans label correspondant dans
+      // scopeFacets.atcClasses. Rien n'est pré-coché pour ce groupe : le backend applique déjà son
+      // propre défaut sur atcClassIds vide (voir le commentaire plus haut sur fetchAlternatives).
       atcClassIds: []
     };
   }
-  // label n'est utilisé que sur la branche "coche" (pour alimenter includeLabels/excludeLabels —
-  // voir emptyIncludeLabels) ; sur la branche "décoche" l'id est simplement retiré des deux côtés,
-  // que l'appelant soit une checkbox du panel (qui a le label sous la main) ou un chip de rappel
-  // (qui décoche un id dont le panel courant n'a peut-être même plus trace).
-  toggleInclude(group, id, label) {
-    const current = this.include[group.idsField] ?? [];
+  // label n'est utilisé que sur la branche "coche" (pour alimenter scopeLabels/includeLabels/
+  // excludeLabels — voir emptyScopeLabels) ; sur la branche "décoche" l'id est simplement retiré
+  // des deux côtés, que l'appelant soit une checkbox du panel (qui a le label sous la main) ou un
+  // chip de rappel (qui décoche un id dont le panel courant n'a peut-être même plus trace).
+  toggleScope(group, id, label) {
+    const current = this.scope[group.idsField] ?? [];
     const checking = !current.includes(id);
     const next = checking ? [...current, id] : current.filter((existing) => existing !== id);
-    this.include = { ...this.include, [group.idsField]: next };
-    const nextLabels = { ...this.includeLabels[group.key] };
+    this.scope = { ...this.scope, [group.idsField]: next };
+    const nextLabels = { ...this.scopeLabels[group.key] };
     if (checking) {
       nextLabels[id] = label;
     } else {
       delete nextLabels[id];
     }
-    this.includeLabels = { ...this.includeLabels, [group.key]: nextLabels };
+    this.scopeLabels = { ...this.scopeLabels, [group.key]: nextLabels };
     this.pendingToggleIds = new Set(this.pendingToggleIds).add(id);
     this.scheduleRefetch();
   }
@@ -2595,25 +2624,66 @@ let TherapeuticAlternative = class extends i$1 {
     this.pendingToggleIds = new Set(this.pendingToggleIds).add(id);
     this.scheduleRefetch();
   }
+  // Checking a specific value in an include group takes over from its corresponding quick filter,
+  // when it has one (see IncludeGroupConfig.quickFilterKey -- activeSubstances has none) --
+  // leaving both on could silently AND into an impossible/contradictory combination (e.g. quick
+  // filter pinned to the source's own "Comprimé" while the checklist asks for "Solution
+  // injectable") rather than the refinement the user asked for. Same rationale as
+  // toggleQuickFilter below, the other direction.
+  toggleInclude(group, id, label) {
+    const current = this.include[group.idsField] ?? [];
+    const checking = !current.includes(id);
+    const next = checking ? [...current, id] : current.filter((existing) => existing !== id);
+    this.include = { ...this.include, [group.idsField]: next };
+    const nextLabels = { ...this.includeLabels[group.key] };
+    if (checking) {
+      nextLabels[id] = label;
+    } else {
+      delete nextLabels[id];
+    }
+    this.includeLabels = { ...this.includeLabels, [group.key]: nextLabels };
+    if (checking && group.quickFilterKey && this.quickFilters[group.quickFilterKey]) {
+      this.quickFilters = { ...this.quickFilters, [group.quickFilterKey]: false };
+    }
+    this.pendingToggleIds = new Set(this.pendingToggleIds).add(id);
+    this.scheduleRefetch();
+  }
   toggleQuickFilter(key) {
-    this.quickFilters = { ...this.quickFilters, [key]: !this.quickFilters[key] };
+    const turningOn = !this.quickFilters[key];
+    this.quickFilters = { ...this.quickFilters, [key]: turningOn };
+    if (turningOn) {
+      const group = INCLUDE_GROUPS.find((g2) => g2.quickFilterKey === key);
+      if (group && this.include[group.idsField].length > 0) {
+        this.include = { ...this.include, [group.idsField]: [] };
+        this.includeLabels = { ...this.includeLabels, [group.key]: {} };
+      }
+    }
     this.scheduleRefetch();
   }
   // The exclude "activeSubstances" group's own backend/truncatedGroups key is
   // "excludeActiveSubstances" (see SearchCustomService.assignFacetValues) -- distinct from the
-  // inclusion dimension of the same frontend name, so it can't reuse ExcludeGroupKey as-is.
+  // include dimension of the same frontend name, so it can't reuse ExcludeGroupKey as-is.
   // Every other exclude group's backend key matches its frontend key 1:1.
   exclusionTruncatedGroupKey(key) {
     return key === "activeSubstances" ? "excludeActiveSubstances" : key;
   }
-  toggleInclusionPanel(key) {
-    this.openInclusionGroup = this.openInclusionGroup === key ? null : key;
+  // Same rationale as exclusionTruncatedGroupKey, the include side: "activeSubstances"' own
+  // backend key is "includeActiveSubstances".
+  includeTruncatedGroupKey(key) {
+    return key === "activeSubstances" ? "includeActiveSubstances" : key;
+  }
+  toggleScopePanel(key) {
+    this.openScopeGroup = this.openScopeGroup === key ? null : key;
     this.checklistSearchTerm = "";
   }
   toggleExclusionPanel(key) {
     this.openExclusionGroup = this.openExclusionGroup === key ? null : key;
     this.checklistSearchTerm = "";
   }
+  toggleIncludePanel(key) {
+    this.openIncludeGroup = this.openIncludeGroup === key ? null : key;
+    this.checklistSearchTerm = "";
+  }
   // "Afficher plus" for one truncated group's checklist -- see expandFacetGroupKey. Triggers an
   // immediate refetch (unlike opening/closing a panel) since this is the one action that actually
   // needs a new response to have an effect.
@@ -2764,8 +2834,8 @@ let TherapeuticAlternative = class extends i$1 {
   }
   // Only rendered past CHECKLIST_SEARCH_THRESHOLD (see renderChecklistPanel) -- below that, typing
   // is slower than just scanning the list by eye. checklistSearchTerm is reset whenever a different
-  // group/section opens (toggleInclusionPanel/toggleExclusionPanel) so a leftover term from a
-  // previous panel can't silently hide everything in the next one.
+  // group/section opens (toggleScopePanel/toggleExclusionPanel/toggleIncludePanel) so a leftover
+  // term from a previous panel can't silently hide everything in the next one.
   renderChecklistSearch(testIdPrefix) {
     return b`
       <bcbd-input
@@ -2781,9 +2851,9 @@ let TherapeuticAlternative = class extends i$1 {
   }
   // Rappel des valeurs actuellement cochées pour TOUTE la section (tous ses groupes confondus),
   // toujours affiché dès qu'il y en a — indépendamment de quel panel est ouvert, voire qu'aucun ne
-  // le soit. C'est la vue "source de vérité" (includeLabels/excludeLabels) plutôt que le panel
-  // ouvert : une valeur cochée reste visible et décochable ici même si un refetch a fait disparaître
-  // sa ligne du panel courant (voir emptyIncludeLabels).
+  // le soit. C'est la vue "source de vérité" (scopeLabels/includeLabels/excludeLabels) plutôt que
+  // le panel ouvert : une valeur cochée reste visible et décochable ici même si un refetch a fait
+  // disparaître sa ligne du panel courant (voir emptyScopeLabels).
   renderSelectedChips(labelsByGroup, onRemove, testIdPrefix) {
     const entries = [];
     for (const [groupKey, labels] of Object.entries(labelsByGroup)) {
@@ -2830,36 +2900,36 @@ let TherapeuticAlternative = class extends i$1 {
       </button>
     `;
   }
-  renderInclusionSection() {
-    const chips = this.renderSelectedChips(this.includeLabels, (groupKey, id) => {
-      const group = INCLUSION_GROUPS.find((g2) => g2.key === groupKey);
+  renderScopeSection() {
+    const chips = this.renderSelectedChips(this.scopeLabels, (groupKey, id) => {
+      const group = SCOPE_GROUPS.find((g2) => g2.key === groupKey);
       if (group) {
-        this.toggleInclude(group, id, "");
+        this.toggleScope(group, id, "");
       }
-    }, "inclusion");
-    if (this.sectionCollapsed.inclusion) {
+    }, "scope");
+    if (this.sectionCollapsed.scope) {
       return chips;
     }
-    const openGroup = INCLUSION_GROUPS.find((group) => group.key === this.openInclusionGroup);
-    const pills = INCLUSION_GROUPS.map((group) => this.renderPill(
+    const openGroup = SCOPE_GROUPS.find((group) => group.key === this.openScopeGroup);
+    const pills = SCOPE_GROUPS.map((group) => this.renderPill(
       group.label,
-      this.include[group.idsField].length > 0,
-      group.key === this.openInclusionGroup,
-      () => this.toggleInclusionPanel(group.key),
-      `inclusion-pill-${group.key}`
+      this.scope[group.idsField].length > 0,
+      group.key === this.openScopeGroup,
+      () => this.toggleScopePanel(group.key),
+      `scope-pill-${group.key}`
     ));
     return b`
-      <div class="${PREFIX}-therapeutic-alternative__pills" data-test-id="inclusion-pills">
+      <div class="${PREFIX}-therapeutic-alternative__pills" data-test-id="scope-pills">
         ${pills}
       </div>
       ${chips}
       ${openGroup ? this.renderChecklistPanel(
-      this.includeFacets[openGroup.key],
-      this.include[openGroup.idsField],
+      this.scopeFacets[openGroup.key],
+      this.scope[openGroup.idsField],
       true,
       INCLUDE_COUNT_TOOLTIP,
-      (id, label) => this.toggleInclude(openGroup, id, label),
-      `inclusion-${openGroup.key}`,
+      (id, label) => this.toggleScope(openGroup, id, label),
+      `scope-${openGroup.key}`,
       openGroup.key === "atcClasses",
       // Already expanded == clicking again would send the exact same expandFacetGroup and get
       // the exact same (still truncated, if it's a group with more than FACET_VALUES_EXPANDED_SIZE
@@ -2908,6 +2978,44 @@ let TherapeuticAlternative = class extends i$1 {
     ) : A}
     `;
   }
+  renderIncludeSection() {
+    const chips = this.renderSelectedChips(this.includeLabels, (groupKey, id) => {
+      const group = INCLUDE_GROUPS.find((g2) => g2.key === groupKey);
+      if (group) {
+        this.toggleInclude(group, id, "");
+      }
+    }, "include");
+    if (this.sectionCollapsed.include) {
+      return chips;
+    }
+    const openGroup = INCLUDE_GROUPS.find((group) => group.key === this.openIncludeGroup);
+    const pills = INCLUDE_GROUPS.map((group) => this.renderPill(
+      group.label,
+      this.include[group.idsField].length > 0,
+      group.key === this.openIncludeGroup,
+      () => this.toggleIncludePanel(group.key),
+      `include-pill-${group.key}`
+    ));
+    const truncatedGroupKey = openGroup ? this.includeTruncatedGroupKey(openGroup.key) : null;
+    const canExpand = truncatedGroupKey !== null && this.truncatedGroups.includes(truncatedGroupKey) && this.expandFacetGroupKey !== truncatedGroupKey;
+    return b`
+      <div class="${PREFIX}-therapeutic-alternative__pills" data-test-id="include-pills">
+        ${pills}
+      </div>
+      ${chips}
+      ${openGroup ? this.renderChecklistPanel(
+      this.includeFacets[openGroup.key],
+      this.include[openGroup.idsField],
+      true,
+      INCLUDE_COUNT_TOOLTIP,
+      (id, label) => this.toggleInclude(openGroup, id, label),
+      `include-${openGroup.key}`,
+      false,
+      canExpand,
+      () => this.requestMoreFacetValues(truncatedGroupKey)
+    ) : A}
+    `;
+  }
   renderQuickFiltersSection() {
     if (this.sectionCollapsed.quickFilters) {
       return A;
@@ -2952,8 +3060,8 @@ let TherapeuticAlternative = class extends i$1 {
   // Turns a result's raw matchReasons into short bullet lines, e.g. "- indiqué pour Arthrose" or
   // "- contient Bisoprolol (synonyme de Métoprolol)" -- label/synonymLabel come straight from the
   // backend (resolved from the source/matching product's own documents), not looked up in
-  // includeFacets: that only ever covers the request's criterion codes, never synonymCode, which
-  // is a code found on this specific result product, not a criterion at all.
+  // scopeFacets/includeFacets: those only ever cover the request's criterion codes, never
+  // synonymCode, which is a code found on this specific result product, not a criterion at all.
   matchReasonLabels(result) {
     const labels = (result.matchReasons ?? []).map((reason) => {
       const dimension = reason.dimension ?? "";
@@ -3059,13 +3167,18 @@ let TherapeuticAlternative = class extends i$1 {
               </bcbd-alert>
             </div>` : ""}
 
-          <div class="${PREFIX}-therapeutic-alternative__section" data-test-id="inclusion-section">
-            ${this.renderSectionHeader("Rechercher une alternative", "inclusion")}
-            ${this.renderInclusionSection()}
+          <div class="${PREFIX}-therapeutic-alternative__section" data-test-id="scope-section">
+            ${this.renderSectionHeader("Rechercher une alternative", "scope")}
+            ${this.renderScopeSection()}
+          </div>
+
+          <div class="${PREFIX}-therapeutic-alternative__section" data-test-id="include-section">
+            ${this.renderSectionHeader("Critères d'inclusion", "include")}
+            ${this.renderIncludeSection()}
           </div>
 
           <div class="${PREFIX}-therapeutic-alternative__section" data-test-id="exclusion-section">
-            ${this.renderSectionHeader("Affiner (exclure des critères)", "exclusion")}
+            ${this.renderSectionHeader("Critères d'exclusion", "exclusion")}
             ${this.renderExclusionSection()}
           </div>
 
@@ -3118,6 +3231,9 @@ __decorateClass([
 __decorateClass([
   r()
 ], TherapeuticAlternative.prototype, "currentPage", 2);
+__decorateClass([
+  r()
+], TherapeuticAlternative.prototype, "scope", 2);
 __decorateClass([
   r()
 ], TherapeuticAlternative.prototype, "include", 2);
@@ -3127,6 +3243,9 @@ __decorateClass([
 __decorateClass([
   r()
 ], TherapeuticAlternative.prototype, "quickFilters", 2);
+__decorateClass([
+  r()
+], TherapeuticAlternative.prototype, "scopeFacets", 2);
 __decorateClass([
   r()
 ], TherapeuticAlternative.prototype, "includeFacets", 2);
@@ -3139,6 +3258,9 @@ __decorateClass([
 __decorateClass([
   r()
 ], TherapeuticAlternative.prototype, "expandFacetGroupKey", 2);
+__decorateClass([
+  r()
+], TherapeuticAlternative.prototype, "scopeLabels", 2);
 __decorateClass([
   r()
 ], TherapeuticAlternative.prototype, "includeLabels", 2);
@@ -3147,10 +3269,13 @@ __decorateClass([
 ], TherapeuticAlternative.prototype, "excludeLabels", 2);
 __decorateClass([
   r()
-], TherapeuticAlternative.prototype, "openInclusionGroup", 2);
+], TherapeuticAlternative.prototype, "openScopeGroup", 2);
 __decorateClass([
   r()
 ], TherapeuticAlternative.prototype, "openExclusionGroup", 2);
+__decorateClass([
+  r()
+], TherapeuticAlternative.prototype, "openIncludeGroup", 2);
 __decorateClass([
   r()
 ], TherapeuticAlternative.prototype, "checklistSearchTerm", 2);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@claudebernard/therapeutic-alternative-element",
-  "version": "2.1.2",
+  "version": "2.2.0",
   "main": "dist/therapeutic-alternative.es.js",
   "module": "dist/therapeutic-alternative.es.js",
   "types": "dist/therapeutic-alternative.d.ts",