@claudebernard/therapeutic-alternative-element 2.2.0 → 2.3.0

package/dist/therapeutic-alternative.d.ts

@@ -26,6 +26,7 @@ export declare class TherapeuticAlternative extends LitElement {
     private include;
     private exclude;
     private quickFilters;
+    private quickFilterFacets;
     private scopeFacets;
     private includeFacets;
     private excludeFacets;
@@ -52,6 +53,7 @@ export declare class TherapeuticAlternative extends LitElement {
     private get currentMedicationRequest();
     private get sourceProductId();
     updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    private resetAllCriteria;
     disconnectedCallback(): void;
     private clearScheduledRefetch;
     private scheduleRefetch;
@@ -61,7 +63,10 @@ export declare class TherapeuticAlternative extends LitElement {
     private static buildScopeFacets;
     private static buildIncludeFacets;
     private static buildExcludeFacets;
+    private static codesOf;
     private static deriveInitialScope;
+    private includePossessedIds;
+    private excludePossessedIds;
     private toggleScope;
     private toggleExclude;
     private toggleInclude;
@@ -84,9 +89,11 @@ export declare class TherapeuticAlternative extends LitElement {
     private renderExclusionSection;
     private renderIncludeSection;
     private renderQuickFiltersSection;
+    private renderQuickFilterCount;
     private renderSectionHeader;
     private matchReasonLabels;
     private renderResults;
+    private renderTitle;
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }

package/dist/therapeutic-alternative.es.js

@@ -2306,8 +2306,9 @@ const EXCLUSION_GROUPS = [
   { key: "notableExcipients", idsField: "notableExcipientIds", label: "Excipients à effet notoire" },
   { key: "excipients", idsField: "excipientIds", label: "Excipients" },
   { key: "contraindications", idsField: "contraindicationIds", label: "Utilisation contre-indiquée" },
-  { key: "cautions", idsField: "cautionIds", label: "Mises en garde" },
-  { key: "precautions", idsField: "precautionIds", label: "Précaution d'emploi" }
+  { key: "cautions", idsField: "cautionIds", label: "Utilisation déconseillée" },
+  { key: "precautions", idsField: "precautionIds", label: "Précaution d'emploi" },
+  { key: "sideEffects", idsField: "sideEffectIds", label: "Effets indésirables" }
 ];
 const QUICK_FILTERS = [
   { key: "sameGalenicForm", label: "Même forme galénique" },
@@ -2326,7 +2327,7 @@ const MATCH_REASON_VERB_BY_DIMENSION = {
   indication: "indiqué pour",
   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}';
+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__source .claudebernard-therapeutic-alternative-title {\n  margin-bottom: 0;\n}\n.claudebernard-therapeutic-alternative__source-actions {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\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__panel-row--possessed {\n  font-weight: 700;\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__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: [] };
 }
@@ -2340,7 +2341,8 @@ function emptyExcludeCriteria() {
     excipientIds: [],
     contraindicationIds: [],
     cautionIds: [],
-    precautionIds: []
+    precautionIds: [],
+    sideEffectIds: []
   };
 }
 function emptyQuickFilters() {
@@ -2359,7 +2361,8 @@ function emptyExcludeFacets() {
     excipients: [],
     contraindications: [],
     cautions: [],
-    precautions: []
+    precautions: [],
+    sideEffects: []
   };
 }
 function emptyScopeLabels() {
@@ -2386,7 +2389,8 @@ function emptyExcludeLabels() {
     excipients: {},
     contraindications: {},
     cautions: {},
-    precautions: {}
+    precautions: {},
+    sideEffects: {}
   };
 }
 var __defProp = Object.defineProperty;
@@ -2415,6 +2419,7 @@ let TherapeuticAlternative = class extends i$1 {
     this.include = emptyIncludeCriteria();
     this.exclude = emptyExcludeCriteria();
     this.quickFilters = emptyQuickFilters();
+    this.quickFilterFacets = {};
     this.scopeFacets = emptyScopeFacets();
     this.includeFacets = emptyIncludeFacets();
     this.excludeFacets = emptyExcludeFacets();
@@ -2457,23 +2462,30 @@ 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.openScopeGroup = null;
-      this.openExclusionGroup = null;
-      this.openIncludeGroup = null;
-      this.expandFacetGroupKey = null;
-      this.currentPage = 1;
-      this.hasAppliedInitialScope = false;
-      this.fetchAlternatives();
+      this.resetAllCriteria();
     }
   }
+  // Shared by a medication change (updated() above) and the user-facing "Réinitialiser" button:
+  // both mean "start over from the initial state for this medication" -- clearing
+  // hasAppliedInitialScope so the next response re-derives and re-applies scope's own pre-check
+  // (see applyResponse) rather than leaving scope empty, which would NOT be the initial state.
+  resetAllCriteria() {
+    this.clearScheduledRefetch();
+    this.scope = emptyScopeCriteria();
+    this.include = emptyIncludeCriteria();
+    this.exclude = emptyExcludeCriteria();
+    this.scopeLabels = emptyScopeLabels();
+    this.includeLabels = emptyIncludeLabels();
+    this.excludeLabels = emptyExcludeLabels();
+    this.quickFilters = emptyQuickFilters();
+    this.openScopeGroup = null;
+    this.openExclusionGroup = null;
+    this.openIncludeGroup = null;
+    this.expandFacetGroupKey = null;
+    this.currentPage = 1;
+    this.hasAppliedInitialScope = false;
+    this.fetchAlternatives();
+  }
   disconnectedCallback() {
     super.disconnectedCallback();
     this.clearScheduledRefetch();
@@ -2541,6 +2553,7 @@ let TherapeuticAlternative = class extends i$1 {
     this.scopeFacets = TherapeuticAlternative.buildScopeFacets(data);
     this.includeFacets = TherapeuticAlternative.buildIncludeFacets(data);
     this.excludeFacets = TherapeuticAlternative.buildExcludeFacets(data);
+    this.quickFilterFacets = data.facets?.quickFilters ?? {};
     this.truncatedGroups = data.facets?.truncatedGroups ?? [];
     if (!this.hasAppliedInitialScope) {
       this.hasAppliedInitialScope = true;
@@ -2566,19 +2579,18 @@ let TherapeuticAlternative = class extends i$1 {
     };
   }
   static buildExcludeFacets(data) {
-    return {
-      activeSubstances: data.facets?.exclude?.activeSubstances ?? [],
-      notableExcipients: data.facets?.exclude?.notableExcipients ?? [],
-      excipients: data.facets?.exclude?.excipients ?? [],
-      contraindications: data.facets?.exclude?.contraindications ?? [],
-      cautions: data.facets?.exclude?.cautions ?? [],
-      precautions: data.facets?.exclude?.precautions ?? []
-    };
+    const facets = emptyExcludeFacets();
+    for (const group of EXCLUSION_GROUPS) {
+      facets[group.key] = data.facets?.exclude?.[group.key] ?? [];
+    }
+    return facets;
+  }
+  static codesOf(list) {
+    return (list ?? []).map((item) => item.code).filter((code) => !!code);
   }
   static deriveInitialScope(sourceProduct) {
-    const codesOf = (list) => (list ?? []).map((item) => item.code).filter((code) => !!code);
     return {
-      indicationIds: codesOf(sourceProduct?.extendedProperties?.keywords?.indicationsKeywords),
+      indicationIds: TherapeuticAlternative.codesOf(sourceProduct?.extendedProperties?.keywords?.indicationsKeywords),
       // 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
@@ -2590,6 +2602,54 @@ let TherapeuticAlternative = class extends i$1 {
       atcClassIds: []
     };
   }
+  // The ids to bold in an include checklist panel (see renderChecklistPanel's possessedIds param)
+  // -- what the SOURCE product itself already has for that dimension, not what's currently
+  // selected. galenicForms/dosages are single-valued on the source (a product has exactly one), so
+  // each contributes at most one id; activeSubstances/routesOfAdministration can be multi-valued.
+  // dosages is a best-effort string match (source's raw productDosage against the facet's own
+  // dosage-string ids) -- it can occasionally miss on formatting, unlike the others' exact codes.
+  includePossessedIds(key) {
+    const properties = this.sourceProduct?.properties;
+    const composition = this.sourceProduct?.extendedProperties?.composition;
+    switch (key) {
+      case "activeSubstances":
+        return new Set(TherapeuticAlternative.codesOf(composition?.activeSubstances));
+      case "galenicForms":
+        return properties?.galenicFormCode ? /* @__PURE__ */ new Set([properties.galenicFormCode]) : /* @__PURE__ */ new Set();
+      case "dosages":
+        return properties?.productDosage ? /* @__PURE__ */ new Set([properties.productDosage]) : /* @__PURE__ */ new Set();
+      case "routesOfAdministration":
+        return new Set(TherapeuticAlternative.codesOf(this.sourceProduct?.extendedProperties?.routes));
+      default:
+        return /* @__PURE__ */ new Set();
+    }
+  }
+  // Same idea as includePossessedIds, for the exclude checklist panels: the exclude groups' own
+  // values come from the whole candidate pool (see SearchCustomService.addExcludeMustNotQueries),
+  // not just the source product, so "does the source itself already have this excipient/
+  // contraindication/..." is a real, non-trivial question worth answering here too.
+  excludePossessedIds(key) {
+    const composition = this.sourceProduct?.extendedProperties?.composition;
+    const keywords = this.sourceProduct?.extendedProperties?.keywords;
+    switch (key) {
+      case "activeSubstances":
+        return new Set(TherapeuticAlternative.codesOf(composition?.activeSubstances));
+      case "notableExcipients":
+        return new Set(TherapeuticAlternative.codesOf(composition?.excipientsWithKnownEffects));
+      case "excipients":
+        return new Set(TherapeuticAlternative.codesOf(composition?.excipients));
+      case "contraindications":
+        return new Set(TherapeuticAlternative.codesOf(keywords?.contraindicationsKeywords));
+      case "cautions":
+        return new Set(TherapeuticAlternative.codesOf(keywords?.contraindicationsNotRecommendedKeywords));
+      case "precautions":
+        return new Set(TherapeuticAlternative.codesOf(keywords?.precautionsForUseKeywords));
+      case "sideEffects":
+        return new Set(TherapeuticAlternative.codesOf(keywords?.sideEffectsKeywords));
+      default:
+        return /* @__PURE__ */ new Set();
+    }
+  }
   // 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
@@ -2658,6 +2718,7 @@ let TherapeuticAlternative = class extends i$1 {
         this.includeLabels = { ...this.includeLabels, [group.key]: {} };
       }
     }
+    this.pendingToggleIds = new Set(this.pendingToggleIds).add(key);
     this.scheduleRefetch();
   }
   // The exclude "activeSubstances" group's own backend/truncatedGroups key is
@@ -2761,7 +2822,7 @@ let TherapeuticAlternative = class extends i$1 {
       this.apiReplaceLoading = false;
     }
   }
-  renderChecklistPanel(items, selectedIds, showCount, countTooltip, onToggle, testIdPrefix, showCode = false, truncated = false, onExpand) {
+  renderChecklistPanel(items, selectedIds, showCount, countTooltip, onToggle, testIdPrefix, showCode = false, truncated = false, onExpand, possessedIds = /* @__PURE__ */ new Set()) {
     const visibleItems = items.filter((item) => {
       if (item.id !== void 0 && this.pendingToggleIds.has(item.id)) {
         return true;
@@ -2788,7 +2849,8 @@ let TherapeuticAlternative = class extends i$1 {
       const pending = this.pendingToggleIds.has(item.id);
       const rowClasses = [
         `${PREFIX}-therapeutic-alternative__panel-row`,
-        pending ? `${PREFIX}-therapeutic-alternative__panel-row--pending` : ""
+        pending ? `${PREFIX}-therapeutic-alternative__panel-row--pending` : "",
+        possessedIds.has(item.id) ? `${PREFIX}-therapeutic-alternative__panel-row--possessed` : ""
       ].join(" ");
       return b`
       <div class=${rowClasses}>
@@ -2974,7 +3036,8 @@ let TherapeuticAlternative = class extends i$1 {
       `exclusion-${openGroup.key}`,
       false,
       canExpand,
-      () => this.requestMoreFacetValues(truncatedGroupKey)
+      () => this.requestMoreFacetValues(truncatedGroupKey),
+      this.excludePossessedIds(openGroup.key)
     ) : A}
     `;
   }
@@ -3012,7 +3075,8 @@ let TherapeuticAlternative = class extends i$1 {
       `include-${openGroup.key}`,
       false,
       canExpand,
-      () => this.requestMoreFacetValues(truncatedGroupKey)
+      () => this.requestMoreFacetValues(truncatedGroupKey),
+      this.includePossessedIds(openGroup.key)
     ) : A}
     `;
   }
@@ -3020,25 +3084,56 @@ let TherapeuticAlternative = class extends i$1 {
     if (this.sectionCollapsed.quickFilters) {
       return A;
     }
-    const chips = QUICK_FILTERS.map((filter) => {
-      const active = this.quickFilters[filter.key];
-      const chipClasses = [
-        `${PREFIX}-therapeutic-alternative__chip`,
-        active ? `${PREFIX}-therapeutic-alternative__chip--active` : ""
+    const visibleFilters = QUICK_FILTERS.filter((filter) => {
+      if (this.quickFilters[filter.key] || this.pendingToggleIds.has(filter.key)) {
+        return true;
+      }
+      return this.quickFilterFacets[filter.key] !== 0;
+    });
+    if (visibleFilters.length === 0) {
+      return b`<span class="${PREFIX}-therapeutic-alternative__panel-empty">Aucune valeur disponible.</span>`;
+    }
+    const rows = visibleFilters.map((filter) => {
+      const count = this.quickFilterFacets[filter.key];
+      const pending = this.pendingToggleIds.has(filter.key);
+      const rowClasses = [
+        `${PREFIX}-therapeutic-alternative__panel-row`,
+        pending ? `${PREFIX}-therapeutic-alternative__panel-row--pending` : ""
       ].join(" ");
       return b`
-        <button type="button" class=${chipClasses} @click=${() => this.toggleQuickFilter(filter.key)} data-test-id=${`quick-filter-${filter.key}`}>
-          ${active ? b`<bcbd-icon icon="check" size="extra-small"></bcbd-icon>` : A}
-          ${filter.label}
-        </button>
+        <div class=${rowClasses}>
+          <bcbd-checkbox
+            id=${`quick-filter-${filter.key}`}
+            label=${filter.label}
+            ?checked=${this.quickFilters[filter.key]}
+            color="primary"
+            @change=${() => this.toggleQuickFilter(filter.key)}
+            data-test-id=${`quick-filter-${filter.key}`}>
+          </bcbd-checkbox>
+          ${pending ? b`
+            <bcbd-loader theme="standard" size="18" data-test-id=${`quick-filter-loader-${filter.key}`}></bcbd-loader>
+          ` : this.renderQuickFilterCount(filter.key, count)}
+        </div>
       `;
     });
     return b`
-      <div class="${PREFIX}-therapeutic-alternative__chips" data-test-id="quick-filters-chips">
-        ${chips}
+      <div class="${PREFIX}-therapeutic-alternative__panel" data-test-id="quick-filters-panel">
+        <div class="${PREFIX}-therapeutic-alternative__panel-rows">
+          ${rows}
+        </div>
       </div>
     `;
   }
+  renderQuickFilterCount(key, count) {
+    if (count === void 0) {
+      return A;
+    }
+    return b`
+      <bcbd-tooltip placement="left" content=${INCLUDE_COUNT_TOOLTIP} data-test-id=${`quick-filter-count-tooltip-${key}`}>
+        <span class="${PREFIX}-therapeutic-alternative__count-badge" data-test-id=${`quick-filter-count-${key}`}>${count}</span>
+      </bcbd-tooltip>
+    `;
+  }
   renderSectionHeader(title, section) {
     const collapsed = this.sectionCollapsed[section];
     const chevronClasses = [
@@ -3130,6 +3225,11 @@ let TherapeuticAlternative = class extends i$1 {
         </bcbd-pagination>`}
     `;
   }
+  // The product name in the title replaces the "Produit sélectionné" line when has-title is on; without
+  // a title, that line (see render) is the only place the product name shows.
+  renderTitle(medicationTitle) {
+    return b`<span class="${PREFIX}-therapeutic-alternative-title" data-test-id="title">Alternative Thérapeutique pour ${medicationTitle !== "" ? decodeHtml(medicationTitle) : "ce produit"}</span>`;
+  }
   render() {
     const containerClasses = [
       `${PREFIX}-therapeutic-alternative`,
@@ -3138,16 +3238,23 @@ let TherapeuticAlternative = class extends i$1 {
     const medicationTitle = getMedicationTitle(this.currentMedication);
     return b`
       <div class=${containerClasses} data-test-id="therapeutic-alternative-container">
-        ${this.hasTitle ? b`<span class="${PREFIX}-therapeutic-alternative-title">Alternative thérapeutique</span>` : ""}
         ${this.currentMedication ? b`
           <div class="${PREFIX}-therapeutic-alternative__source mb-3" data-test-id="source-product">
-            <span data-test-id="source-product-label">
-              Produit sélectionné : <span class="text-primary">${medicationTitle !== "" ? decodeHtml(medicationTitle) : "Inconnu"}</span>
-            </span>
-            <bcbd-button size="small" background-color="primary" outlined
-                         @click=${this.cancelAlternative} data-test-id="cancel-alternative-button">
-              Retour au contrôle d'ordonnance
-            </bcbd-button>
+            ${this.hasTitle ? this.renderTitle(medicationTitle) : b`
+              <span data-test-id="source-product-label">
+                Produit sélectionné : <span class="text-primary">${medicationTitle !== "" ? decodeHtml(medicationTitle) : "Inconnu"}</span>
+              </span>`}
+            <div class="${PREFIX}-therapeutic-alternative__source-actions">
+              <bcbd-button size="small" background-color="secondary" outlined
+                           ?disabled=${this.hasNoSelectedCriteria()}
+                           @click=${this.resetAllCriteria} data-test-id="reset-criteria-button">
+                Réinitialiser
+              </bcbd-button>
+              <bcbd-button size="small" background-color="primary" outlined
+                           @click=${this.cancelAlternative} data-test-id="cancel-alternative-button">
+                Annuler
+              </bcbd-button>
+            </div>
           </div>
 
           <div class="${PREFIX}-therapeutic-alternative__disclaimer">
@@ -3190,6 +3297,7 @@ let TherapeuticAlternative = class extends i$1 {
           <div class="${PREFIX}-therapeutic-alternative__results" data-test-id="results-container">
             ${this.renderResults()}
           </div>` : b`
+          ${this.hasTitle ? this.renderTitle(medicationTitle) : ""}
           <div class="${PREFIX}-therapeutic-alternative__no-medication" data-test-id="no-medication-container">
               <bcbd-alert title-message="Pas de médicament sélectionné"
                           description-message="Un problème est survenu au moment de sélectionner le produit"
@@ -3243,6 +3351,9 @@ __decorateClass([
 __decorateClass([
   r()
 ], TherapeuticAlternative.prototype, "quickFilters", 2);
+__decorateClass([
+  r()
+], TherapeuticAlternative.prototype, "quickFilterFacets", 2);
 __decorateClass([
   r()
 ], TherapeuticAlternative.prototype, "scopeFacets", 2);

package/package.json

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