@besaitech/ng-design-system 0.0.42 → 0.0.44

package/fesm2022/besaitech-ng-design-system.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, input, computed, ChangeDetectionStrategy, Component, booleanAttribute, isDevMode, effect, output, signal, forwardRef, viewChild, numberAttribute, viewChildren, afterRenderEffect, ElementRef, model, Injector, afterNextRender, Injectable, TemplateRef, Directive, contentChildren, contentChild } from '@angular/core';
+import { inject, input, computed, ChangeDetectionStrategy, Component, booleanAttribute, isDevMode, effect, output, signal, forwardRef, viewChild, numberAttribute, viewChildren, afterRenderEffect, ElementRef, model, Injector, afterNextRender, TemplateRef, Directive, contentChild, Injectable, contentChildren } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule } from '@angular/forms';
@@ -4130,6 +4130,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], timeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeLabel", required: false }] }], hoursLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoursLabel", required: false }] }], minutesLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "minutesLabel", required: false }] }], doneLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "doneLabel", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], openCalendarLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "openCalendarLabel", required: false }] }], closeCalendarLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeCalendarLabel", required: false }] }], panelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelLabel", required: false }] }], calendarLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarLabel", required: false }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], todayActionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayActionLabel", required: false }] }], clearActionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearActionLabel", required: false }] }], calendar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SdsCalendar), { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
 let nextId$6 = 0;
 
+/**
+ * Supplies a custom template for each option row (and the selected value shown
+ * in the trigger) of an `<sds-select>` / `<sds-multi-select>`. Use as a
+ * structural template projected into the select:
+ *
+ * @example
+ * <sds-select [options]="categories" optionLabel="name" optionValue="id" [(ngModel)]="catId">
+ *   <ng-template sdsSelectOption let-option let-selected="selected">
+ *     <span class="dot" [style.background]="option.color"></span>
+ *     <span class="truncate">{{ option.name }}</span>
+ *   </ng-template>
+ * </sds-select>
+ */
+class SdsSelectOption {
+    /** The wrapped template, rendered by the host select via ngTemplateOutlet. */
+    template = inject(TemplateRef);
+    /** Lets the compiler type-check `let-*` bindings against SdsSelectOptionContext. */
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSelectOption, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: SdsSelectOption, isStandalone: true, selector: "ng-template[sdsSelectOption]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSelectOption, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[sdsSelectOption]',
+                    standalone: true,
+                }]
+        }] });
+/**
+ * Supplies a custom template shown in place of the default "no results" message
+ * when a select has no (matching) options.
+ *
+ * @example
+ * <ng-template sdsSelectEmpty let-q>No category matches "{{ q }}".</ng-template>
+ */
+class SdsSelectEmpty {
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSelectEmpty, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: SdsSelectEmpty, isStandalone: true, selector: "ng-template[sdsSelectEmpty]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSelectEmpty, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[sdsSelectEmpty]',
+                    standalone: true,
+                }]
+        }] });
+/**
+ * Supplies a custom sticky footer rendered below the option list — e.g. a
+ * "＋ Create new" action. The `close` context callback dismisses the panel.
+ *
+ * @example
+ * <ng-template sdsSelectFooter let-close="close">
+ *   <button (click)="createCategory(); close()">＋ New category</button>
+ * </ng-template>
+ */
+class SdsSelectFooter {
+    template = inject(TemplateRef);
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSelectFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: SdsSelectFooter, isStandalone: true, selector: "ng-template[sdsSelectFooter]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSelectFooter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[sdsSelectFooter]',
+                    standalone: true,
+                }]
+        }] });
+
 const SIZES$4 = {
     sm: 'h-9 text-sm',
     md: 'h-10 text-sm',
@@ -4146,9 +4223,25 @@ let nextId$5 = 0;
  * key; otherwise selection matching falls back to reference equality (a written
  * copy of an option will not match).
  *
+ * Options render as plain text by default. To render richer options (an icon,
+ * an avatar, a two-line row…) project template directives — the same content
+ * also renders in the trigger for the selected value:
+ * - `<ng-template sdsSelectOption let-option>` — one option row (see {@link SdsSelectOption});
+ *   context: the raw `option` (implicit), plus `label`, `value`, `selected`, `disabled`, `index`.
+ * - `<ng-template sdsSelectEmpty let-query>` — replaces the "no results" message (see {@link SdsSelectEmpty}).
+ * - `<ng-template sdsSelectFooter let-close="close">` — a sticky footer action, e.g. "＋ New…"
+ *   (see {@link SdsSelectFooter}); `close()` dismisses the panel.
+ *
  * @example
  * <sds-select [options]="services" optionLabel="name" optionValue="id"
  *            placeholder="Choisir un service" [(ngModel)]="serviceId" filter clearable />
+ *
+ * @example
+ * <sds-select [options]="categories" optionLabel="name" optionValue="id" [(ngModel)]="categoryId">
+ *   <ng-template sdsSelectOption let-option>
+ *     <span class="dot" [style.background]="option.color"></span> {{ option.name }}
+ *   </ng-template>
+ * </sds-select>
  */
 class SdsSelect {
     host = inject(ElementRef);
@@ -4173,6 +4266,12 @@ class SdsSelect {
     filter = input(false, ...(ngDevMode ? [{ debugName: "filter", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     filterPlaceholder = input('Rechercher…', ...(ngDevMode ? [{ debugName: "filterPlaceholder" }] : []));
     emptyMessage = input('Aucun résultat', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : []));
+    /** Optional projected `<ng-template sdsSelectOption>` — custom option + selected-value rendering. */
+    optionTpl = contentChild(SdsSelectOption, ...(ngDevMode ? [{ debugName: "optionTpl" }] : []));
+    /** Optional projected `<ng-template sdsSelectEmpty>` — custom no-results content. */
+    emptyTpl = contentChild(SdsSelectEmpty, ...(ngDevMode ? [{ debugName: "emptyTpl" }] : []));
+    /** Optional projected `<ng-template sdsSelectFooter>` — a sticky footer action. */
+    footerTpl = contentChild(SdsSelectFooter, ...(ngDevMode ? [{ debugName: "footerTpl" }] : []));
     value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
     open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
     filterText = signal('', ...(ngDevMode ? [{ debugName: "filterText" }] : []));
@@ -4229,9 +4328,30 @@ class SdsSelect {
             const label = labelKey && labelKey in o ? String(o[labelKey]) : String(o['label'] ?? raw);
             const value = this.optionValue() ? o[this.optionValue()] : raw;
             const disabled = this.optionDisabled() ? !!o[this.optionDisabled()] : !!o['disabled'];
-            return { label, value, disabled };
+            return { label, value, disabled, raw };
         }
-        return { label: String(raw), value: raw, disabled: false };
+        return { label: String(raw), value: raw, disabled: false, raw };
+    }
+    /** Context for a projected option template (an option row). */
+    optionContext(opt, index) {
+        return {
+            $implicit: opt.raw,
+            option: opt.raw,
+            label: opt.label,
+            value: opt.value,
+            selected: this.isSelected(opt.value),
+            disabled: opt.disabled,
+            index,
+        };
+    }
+    /** Context for the option template reused in the trigger to render the selected value. */
+    triggerContext = computed(() => {
+        const sel = this.selectedOption();
+        return sel ? this.optionContext(sel, -1) : null;
+    }, ...(ngDevMode ? [{ debugName: "triggerContext" }] : []));
+    /** Context for a projected footer template. */
+    footerContext() {
+        return { $implicit: this.filterText(), filterText: this.filterText(), close: () => this.close(true) };
     }
     equals(a, b) {
         const k = this.dataKey();
@@ -4503,7 +4623,7 @@ class SdsSelect {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsSelect, isStandalone: true, selector: "sds-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "block" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SdsSelect), multi: true },
-        ], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: `
+        ], queries: [{ propertyName: "optionTpl", first: true, predicate: SdsSelectOption, descendants: true, isSignal: true }, { propertyName: "emptyTpl", first: true, predicate: SdsSelectEmpty, descendants: true, isSignal: true }, { propertyName: "footerTpl", first: true, predicate: SdsSelectFooter, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (label()) {
       <label [for]="selectId" class="mb-1.5 block text-sm font-medium text-ink">
         {{ label() }}
@@ -4526,12 +4646,21 @@ class SdsSelect {
         (click)="toggle()"
         (keydown)="onTriggerKeydown($event)"
       >
-        <span
-          class="flex-1 truncate pl-3.5"
-          [class]="selectedOption() ? 'text-ink' : 'text-ink-faint'"
-        >
-          {{ selectedOption() ? selectedOption()!.label : placeholder() }}
-        </span>
+        @if (optionTpl() && selectedOption()) {
+          <span class="flex flex-1 items-center gap-2 truncate pl-3.5 text-ink">
+            <ng-container
+              [ngTemplateOutlet]="optionTpl()!.template"
+              [ngTemplateOutletContext]="triggerContext()!"
+            />
+          </span>
+        } @else {
+          <span
+            class="flex-1 truncate pl-3.5"
+            [class]="selectedOption() ? 'text-ink' : 'text-ink-faint'"
+          >
+            {{ selectedOption() ? selectedOption()!.label : placeholder() }}
+          </span>
+        }
 
         @if (showClear()) {
           <button
@@ -4589,15 +4718,42 @@ class SdsSelect {
                 (click)="opt.disabled ? null : selectOption(opt)"
                 (mouseenter)="opt.disabled ? null : highlightedIndex.set(i)"
               >
-                <span class="truncate">{{ opt.label }}</span>
+                @if (optionTpl()) {
+                  <span class="flex min-w-0 flex-1 items-center gap-2">
+                    <ng-container
+                      [ngTemplateOutlet]="optionTpl()!.template"
+                      [ngTemplateOutletContext]="optionContext(opt, i)"
+                    />
+                  </span>
+                } @else {
+                  <span class="truncate">{{ opt.label }}</span>
+                }
                 @if (isSelected(opt.value)) {
                   <sds-icon name="check" [size]="16" class="shrink-0 text-brand-600" />
                 }
               </li>
             } @empty {
-              <li class="px-3 py-2 text-sm text-ink-faint">{{ emptyMessage() }}</li>
+              @if (emptyTpl()) {
+                <li class="px-3 py-2 text-sm text-ink-faint">
+                  <ng-container
+                    [ngTemplateOutlet]="emptyTpl()!.template"
+                    [ngTemplateOutletContext]="{ $implicit: filterText(), filterText: filterText() }"
+                  />
+                </li>
+              } @else {
+                <li class="px-3 py-2 text-sm text-ink-faint">{{ emptyMessage() }}</li>
+              }
             }
           </ul>
+
+          @if (footerTpl()) {
+            <div class="border-t border-border">
+              <ng-container
+                [ngTemplateOutlet]="footerTpl()!.template"
+                [ngTemplateOutletContext]="footerContext()"
+              />
+            </div>
+          }
         </div>
       }
     </div>
@@ -4608,14 +4764,14 @@ class SdsSelect {
     @if (error()) {
       <p class="mt-1.5 text-xs font-medium text-danger">{{ error() }}</p>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsSelect, decorators: [{
             type: Component,
             args: [{
                     selector: 'sds-select',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [SdsIcon],
+                    imports: [SdsIcon, NgTemplateOutlet],
                     providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SdsSelect), multi: true },
                     ],
@@ -4646,12 +4802,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         (click)="toggle()"
         (keydown)="onTriggerKeydown($event)"
       >
-        <span
-          class="flex-1 truncate pl-3.5"
-          [class]="selectedOption() ? 'text-ink' : 'text-ink-faint'"
-        >
-          {{ selectedOption() ? selectedOption()!.label : placeholder() }}
-        </span>
+        @if (optionTpl() && selectedOption()) {
+          <span class="flex flex-1 items-center gap-2 truncate pl-3.5 text-ink">
+            <ng-container
+              [ngTemplateOutlet]="optionTpl()!.template"
+              [ngTemplateOutletContext]="triggerContext()!"
+            />
+          </span>
+        } @else {
+          <span
+            class="flex-1 truncate pl-3.5"
+            [class]="selectedOption() ? 'text-ink' : 'text-ink-faint'"
+          >
+            {{ selectedOption() ? selectedOption()!.label : placeholder() }}
+          </span>
+        }
 
         @if (showClear()) {
           <button
@@ -4709,15 +4874,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 (click)="opt.disabled ? null : selectOption(opt)"
                 (mouseenter)="opt.disabled ? null : highlightedIndex.set(i)"
               >
-                <span class="truncate">{{ opt.label }}</span>
+                @if (optionTpl()) {
+                  <span class="flex min-w-0 flex-1 items-center gap-2">
+                    <ng-container
+                      [ngTemplateOutlet]="optionTpl()!.template"
+                      [ngTemplateOutletContext]="optionContext(opt, i)"
+                    />
+                  </span>
+                } @else {
+                  <span class="truncate">{{ opt.label }}</span>
+                }
                 @if (isSelected(opt.value)) {
                   <sds-icon name="check" [size]="16" class="shrink-0 text-brand-600" />
                 }
               </li>
             } @empty {
-              <li class="px-3 py-2 text-sm text-ink-faint">{{ emptyMessage() }}</li>
+              @if (emptyTpl()) {
+                <li class="px-3 py-2 text-sm text-ink-faint">
+                  <ng-container
+                    [ngTemplateOutlet]="emptyTpl()!.template"
+                    [ngTemplateOutletContext]="{ $implicit: filterText(), filterText: filterText() }"
+                  />
+                </li>
+              } @else {
+                <li class="px-3 py-2 text-sm text-ink-faint">{{ emptyMessage() }}</li>
+              }
             }
           </ul>
+
+          @if (footerTpl()) {
+            <div class="border-t border-border">
+              <ng-container
+                [ngTemplateOutlet]="footerTpl()!.template"
+                [ngTemplateOutletContext]="footerContext()"
+              />
+            </div>
+          }
         </div>
       }
     </div>
@@ -4730,7 +4922,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
     }
   `,
                 }]
-        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], optionTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSelectOption), { isSignal: true }] }], emptyTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSelectEmpty), { isSignal: true }] }], footerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSelectFooter), { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
 
 const SIZES$3 = {
     sm: 'min-h-9 text-sm',
@@ -4748,9 +4940,24 @@ let nextId$4 = 0;
  * For object options, set [optionValue] or [dataKey] so written values match by
  * key; otherwise matching falls back to reference equality.
  *
+ * Project template directives to customise the panel:
+ * - `<ng-template sdsSelectOption let-option>` — the content of each option row, after its
+ *   checkbox (see {@link SdsSelectOption}); context: the raw `option` (implicit), plus `label`,
+ *   `value`, `selected`, `disabled`, `index`.
+ * - `<ng-template sdsSelectEmpty let-query>` — replaces the "no results" message (see {@link SdsSelectEmpty}).
+ * - `<ng-template sdsSelectFooter let-close="close">` — a sticky footer action (see {@link SdsSelectFooter});
+ *   `close()` dismisses the panel.
+ *
  * @example
  * <sds-multi-select [options]="services" optionLabel="name" optionValue="code"
  *                  display="chip" filter [(ngModel)]="codes" />
+ *
+ * @example
+ * <sds-multi-select [options]="tags" optionLabel="name" optionValue="id" [(ngModel)]="tagIds">
+ *   <ng-template sdsSelectOption let-option>
+ *     <span class="dot" [style.background]="option.color"></span> {{ option.name }}
+ *   </ng-template>
+ * </sds-multi-select>
  */
 class SdsMultiSelect {
     host = inject(ElementRef);
@@ -4778,6 +4985,12 @@ class SdsMultiSelect {
     filter = input(false, ...(ngDevMode ? [{ debugName: "filter", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     filterPlaceholder = input('Rechercher…', ...(ngDevMode ? [{ debugName: "filterPlaceholder" }] : []));
     emptyMessage = input('Aucun résultat', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : []));
+    /** Optional projected `<ng-template sdsSelectOption>` — custom option-row rendering. */
+    optionTpl = contentChild(SdsSelectOption, ...(ngDevMode ? [{ debugName: "optionTpl" }] : []));
+    /** Optional projected `<ng-template sdsSelectEmpty>` — custom no-results content. */
+    emptyTpl = contentChild(SdsSelectEmpty, ...(ngDevMode ? [{ debugName: "emptyTpl" }] : []));
+    /** Optional projected `<ng-template sdsSelectFooter>` — a sticky footer action. */
+    footerTpl = contentChild(SdsSelectFooter, ...(ngDevMode ? [{ debugName: "footerTpl" }] : []));
     value = signal([], ...(ngDevMode ? [{ debugName: "value" }] : []));
     open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
     filterText = signal('', ...(ngDevMode ? [{ debugName: "filterText" }] : []));
@@ -4843,9 +5056,25 @@ class SdsMultiSelect {
             const label = labelKey && labelKey in o ? String(o[labelKey]) : String(o['label'] ?? raw);
             const value = this.optionValue() ? o[this.optionValue()] : raw;
             const disabled = this.optionDisabled() ? !!o[this.optionDisabled()] : !!o['disabled'];
-            return { label, value, disabled };
+            return { label, value, disabled, raw };
         }
-        return { label: String(raw), value: raw, disabled: false };
+        return { label: String(raw), value: raw, disabled: false, raw };
+    }
+    /** Context for a projected option template (an option row). */
+    optionContext(opt, index) {
+        return {
+            $implicit: opt.raw,
+            option: opt.raw,
+            label: opt.label,
+            value: opt.value,
+            selected: this.isSelected(opt.value),
+            disabled: opt.disabled,
+            index,
+        };
+    }
+    /** Context for a projected footer template. */
+    footerContext() {
+        return { $implicit: this.filterText(), filterText: this.filterText(), close: () => this.close(true) };
     }
     equals(a, b) {
         const k = this.dataKey();
@@ -5157,7 +5386,7 @@ class SdsMultiSelect {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsMultiSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdsMultiSelect, isStandalone: true, selector: "sds-multi-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedLabels: { classPropertyName: "maxSelectedLabels", publicName: "maxSelectedLabels", isSignal: true, isRequired: false, transformFunction: null }, selectedItemsLabel: { classPropertyName: "selectedItemsLabel", publicName: "selectedItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, showToggleAll: { classPropertyName: "showToggleAll", publicName: "showToggleAll", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "block" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SdsMultiSelect), multi: true },
-        ], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: `
+        ], queries: [{ propertyName: "optionTpl", first: true, predicate: SdsSelectOption, descendants: true, isSignal: true }, { propertyName: "emptyTpl", first: true, predicate: SdsSelectEmpty, descendants: true, isSignal: true }, { propertyName: "footerTpl", first: true, predicate: SdsSelectFooter, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (label()) {
       <label [for]="selectId" class="mb-1.5 block text-sm font-medium text-ink">
         {{ label() }}
@@ -5290,12 +5519,39 @@ class SdsMultiSelect {
                     <sds-icon name="check" [size]="12" />
                   }
                 </span>
-                <span class="truncate">{{ opt.label }}</span>
+                @if (optionTpl()) {
+                  <span class="flex min-w-0 flex-1 items-center gap-2">
+                    <ng-container
+                      [ngTemplateOutlet]="optionTpl()!.template"
+                      [ngTemplateOutletContext]="optionContext(opt, i)"
+                    />
+                  </span>
+                } @else {
+                  <span class="truncate">{{ opt.label }}</span>
+                }
               </li>
             } @empty {
-              <li class="px-3 py-2 text-sm text-ink-faint">{{ emptyMessage() }}</li>
+              @if (emptyTpl()) {
+                <li class="px-3 py-2 text-sm text-ink-faint">
+                  <ng-container
+                    [ngTemplateOutlet]="emptyTpl()!.template"
+                    [ngTemplateOutletContext]="{ $implicit: filterText(), filterText: filterText() }"
+                  />
+                </li>
+              } @else {
+                <li class="px-3 py-2 text-sm text-ink-faint">{{ emptyMessage() }}</li>
+              }
             }
           </ul>
+
+          @if (footerTpl()) {
+            <div class="border-t border-border">
+              <ng-container
+                [ngTemplateOutlet]="footerTpl()!.template"
+                [ngTemplateOutletContext]="footerContext()"
+              />
+            </div>
+          }
         </div>
       }
     </div>
@@ -5306,14 +5562,14 @@ class SdsMultiSelect {
     @if (error()) {
       <p class="mt-1.5 text-xs font-medium text-danger">{{ error() }}</p>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: SdsIcon, selector: "sds-icon", inputs: ["name", "size", "strokeWidth"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdsMultiSelect, decorators: [{
             type: Component,
             args: [{
                     selector: 'sds-multi-select',
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [SdsIcon],
+                    imports: [SdsIcon, NgTemplateOutlet],
                     providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SdsMultiSelect), multi: true },
                     ],
@@ -5454,12 +5710,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     <sds-icon name="check" [size]="12" />
                   }
                 </span>
-                <span class="truncate">{{ opt.label }}</span>
+                @if (optionTpl()) {
+                  <span class="flex min-w-0 flex-1 items-center gap-2">
+                    <ng-container
+                      [ngTemplateOutlet]="optionTpl()!.template"
+                      [ngTemplateOutletContext]="optionContext(opt, i)"
+                    />
+                  </span>
+                } @else {
+                  <span class="truncate">{{ opt.label }}</span>
+                }
               </li>
             } @empty {
-              <li class="px-3 py-2 text-sm text-ink-faint">{{ emptyMessage() }}</li>
+              @if (emptyTpl()) {
+                <li class="px-3 py-2 text-sm text-ink-faint">
+                  <ng-container
+                    [ngTemplateOutlet]="emptyTpl()!.template"
+                    [ngTemplateOutletContext]="{ $implicit: filterText(), filterText: filterText() }"
+                  />
+                </li>
+              } @else {
+                <li class="px-3 py-2 text-sm text-ink-faint">{{ emptyMessage() }}</li>
+              }
             }
           </ul>
+
+          @if (footerTpl()) {
+            <div class="border-t border-border">
+              <ng-container
+                [ngTemplateOutlet]="footerTpl()!.template"
+                [ngTemplateOutletContext]="footerContext()"
+              />
+            </div>
+          }
         </div>
       }
     </div>
@@ -5472,7 +5755,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
     }
   `,
                 }]
-        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], maxSelectedLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelectedLabels", required: false }] }], selectedItemsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItemsLabel", required: false }] }], showToggleAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToggleAll", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], maxSelectedLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelectedLabels", required: false }] }], selectedItemsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItemsLabel", required: false }] }], showToggleAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToggleAll", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], optionTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSelectOption), { isSignal: true }] }], emptyTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSelectEmpty), { isSignal: true }] }], footerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdsSelectFooter), { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
 
 const SDS_PHONE_COUNTRIES = [
     { iso2: 'BE', name: 'Belgique', dialCode: '32', lengths: [9], format: '### ## ## ##', example: '470123456' },
@@ -9375,5 +9658,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { SDS_ICONS, SDS_PHONE_COUNTRIES, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAvatar, SdsBadge, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsDatePicker, SdsIcon, SdsInput, SdsInputNumber, SdsLocalizedInput, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsSelect, SdsShell, SdsSidebar, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SidebarStore, addDays, addMonths, addMonthsKeepDay, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isoDay, pad2, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth };
+export { SDS_ICONS, SDS_PHONE_COUNTRIES, SdsAccordion, SdsAccordionContent, SdsAccordionHeader, SdsAccordionPanel, SdsAccordionStore, SdsAvatar, SdsBadge, SdsButton, SdsCalendar, SdsCard, SdsCheckbox, SdsDatePicker, SdsIcon, SdsInput, SdsInputNumber, SdsLocalizedInput, SdsMultiSelect, SdsNavGroup, SdsNavItem, SdsOtpInput, SdsPaginator, SdsPhoneInput, SdsSelect, SdsSelectEmpty, SdsSelectFooter, SdsSelectOption, SdsShell, SdsSidebar, SdsTab, SdsTabList, SdsTabPanel, SdsTabPanels, SdsTable, SdsTableCell, SdsTableRowExpansion, SdsTabs, SdsTabsStore, SdsTextarea, SdsToastHost, SdsToastService, SdsToggleSwitch, SdsTopbar, SidebarStore, addDays, addMonths, addMonthsKeepDay, formatDdMmYyyy, formatHhMm, isOutOfRange, isSameDay, isoDay, pad2, sdsFormatNational, sdsMatchDialCode, sdsNormalizeSignificant, startOfDay, startOfMonth };
 //# sourceMappingURL=besaitech-ng-design-system.mjs.map