@kksdev/ds-angular 1.8.1 → 1.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/kksdev-ds-angular.mjs +35 -16
- package/fesm2022/kksdev-ds-angular.mjs.map +1 -1
- package/index.d.ts +40 -4
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, Component, output, HostBinding, model, signal, computed, forwardRef, effect, ElementRef, ViewChildren, ViewChild, EventEmitter, inject, HostListener, ContentChild, Output, Directive, DestroyRef, Injectable, contentChildren, ChangeDetectionStrategy, viewChild, Input, ViewEncapsulation } from '@angular/core';
|
|
2
|
+
import { input, Component, output, HostBinding, model, signal, computed, forwardRef, effect, ElementRef, ViewChildren, ViewChild, EventEmitter, inject, HostListener, ContentChild, Output, Directive, DestroyRef, Injectable, contentChildren, untracked, ChangeDetectionStrategy, viewChild, Input, ViewEncapsulation } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule, DOCUMENT, NgClass, NgTemplateOutlet } from '@angular/common';
|
|
5
5
|
import * as i1$1 from '@fortawesome/angular-fontawesome';
|
|
@@ -5348,6 +5348,12 @@ class DsAccordion {
|
|
|
5348
5348
|
* @default false
|
|
5349
5349
|
*/
|
|
5350
5350
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
5351
|
+
/**
|
|
5352
|
+
* Couleur de bordure quand un item est ouvert (variant separated).
|
|
5353
|
+
* Accepte une couleur CSS (ex: '#22c55e', 'var(--color-success)').
|
|
5354
|
+
* @default undefined (utilise --color-primary comme fallback)
|
|
5355
|
+
*/
|
|
5356
|
+
expandedBorderColor = input(undefined, ...(ngDevMode ? [{ debugName: "expandedBorderColor" }] : []));
|
|
5351
5357
|
/**
|
|
5352
5358
|
* Événement émis lors du changement d'état d'un item.
|
|
5353
5359
|
*/
|
|
@@ -5370,21 +5376,25 @@ class DsAccordion {
|
|
|
5370
5376
|
*/
|
|
5371
5377
|
_expandedIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "_expandedIds" }] : []));
|
|
5372
5378
|
/**
|
|
5373
|
-
* Initialiser les items ouverts à partir de l'input.
|
|
5379
|
+
* Initialiser les items ouverts à partir de l'input expandedIds.
|
|
5380
|
+
* L'effet synchronise expandedIds vers l'état interne.
|
|
5374
5381
|
*/
|
|
5375
5382
|
constructor() {
|
|
5376
|
-
|
|
5383
|
+
effect(() => {
|
|
5384
|
+
const inputIds = this.expandedIds();
|
|
5385
|
+
// Synchroniser vers l'état interne quand expandedIds change
|
|
5386
|
+
untracked(() => {
|
|
5387
|
+
if (inputIds.length > 0) {
|
|
5388
|
+
this._expandedIds.set(new Set(inputIds));
|
|
5389
|
+
}
|
|
5390
|
+
});
|
|
5391
|
+
}, { allowSignalWrites: true });
|
|
5377
5392
|
}
|
|
5378
5393
|
/**
|
|
5379
5394
|
* IDs des items actuellement ouverts.
|
|
5395
|
+
* Utilise uniquement l'état interne (géré par l'effet d'initialisation).
|
|
5380
5396
|
*/
|
|
5381
|
-
currentExpandedIds = computed(() => {
|
|
5382
|
-
const inputIds = this.expandedIds();
|
|
5383
|
-
const internalIds = this._expandedIds();
|
|
5384
|
-
// Fusionner les deux sources
|
|
5385
|
-
const merged = new Set([...inputIds, ...internalIds]);
|
|
5386
|
-
return merged;
|
|
5387
|
-
}, ...(ngDevMode ? [{ debugName: "currentExpandedIds" }] : []));
|
|
5397
|
+
currentExpandedIds = computed(() => this._expandedIds(), ...(ngDevMode ? [{ debugName: "currentExpandedIds" }] : []));
|
|
5388
5398
|
/**
|
|
5389
5399
|
* Vérifier si un item est ouvert.
|
|
5390
5400
|
*/
|
|
@@ -5595,12 +5605,12 @@ class DsAccordion {
|
|
|
5595
5605
|
].filter(Boolean);
|
|
5596
5606
|
}
|
|
5597
5607
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5598
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsAccordion, isStandalone: true, selector: "ds-accordion", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, expandedIds: { classPropertyName: "expandedIds", publicName: "expandedIds", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemChange: "itemChange" }, queries: [{ propertyName: "accordionItems", predicate: DsAccordionItem, isSignal: true }], ngImport: i0, template: "<div [ngClass]=\"containerClasses()\">\n <!-- Mode data-driven (r\u00E9trocompatible) -->\n @if (mode() === 'data') {\n @for (item of items(); track item.id; let i = $index) {\n <div [ngClass]=\"getItemClasses(item)\">\n <!-- Header -->\n <button\n type=\"button\"\n class=\"ds-accordion__header\"\n [id]=\"getHeaderId(item)\"\n [attr.aria-expanded]=\"isExpanded(item.id)\"\n [attr.aria-controls]=\"getContentId(item)\"\n [disabled]=\"disabled() || item.disabled\"\n (click)=\"toggleItem(item)\"\n (keydown)=\"onKeydown($event, item, i)\">\n <span class=\"ds-accordion__title\">{{ item.header }}</span>\n <fa-icon\n class=\"ds-accordion__icon\"\n [icon]=\"faChevronDown\"\n [class.ds-accordion__icon--rotated]=\"isExpanded(item.id)\"\n aria-hidden=\"true\">\n </fa-icon>\n </button>\n\n <!-- Contenu -->\n <div\n class=\"ds-accordion__content\"\n [id]=\"getContentId(item)\"\n role=\"region\"\n [attr.aria-labelledby]=\"getHeaderId(item)\"\n [attr.aria-hidden]=\"!isExpanded(item.id)\"\n [class.ds-accordion__content--expanded]=\"isExpanded(item.id)\">\n <div class=\"ds-accordion__body\">\n {{ item.content }}\n </div>\n </div>\n </div>\n }\n }\n\n <!-- Mode template-driven (contenu riche) -->\n @if (mode() === 'template') {\n @for (item of accordionItems(); track item.id(); let i = $index) {\n <div [ngClass]=\"getTemplateItemClasses(item)\">\n <!-- Header -->\n <button\n type=\"button\"\n class=\"ds-accordion__header\"\n [id]=\"'accordion-header-' + item.id()\"\n [attr.aria-expanded]=\"isExpanded(item.id())\"\n [attr.aria-controls]=\"'accordion-content-' + item.id()\"\n [disabled]=\"disabled() || item.disabled()\"\n (click)=\"toggleTemplateItem(item)\"\n (keydown)=\"onTemplateKeydown($event, item, i)\">\n <span class=\"ds-accordion__title\">{{ item.header() }}</span>\n @if (item.badge() !== undefined) {\n <ds-badge class=\"ds-accordion__badge\" size=\"sm\" type=\"neutral\">\n {{ item.badge() }}\n </ds-badge>\n }\n <fa-icon\n class=\"ds-accordion__icon\"\n [icon]=\"faChevronDown\"\n [class.ds-accordion__icon--rotated]=\"isExpanded(item.id())\"\n aria-hidden=\"true\">\n </fa-icon>\n </button>\n\n <!-- Contenu -->\n <div\n class=\"ds-accordion__content\"\n [id]=\"'accordion-content-' + item.id()\"\n role=\"region\"\n [attr.aria-labelledby]=\"'accordion-header-' + item.id()\"\n [attr.aria-hidden]=\"!isExpanded(item.id())\"\n [class.ds-accordion__content--expanded]=\"isExpanded(item.id())\">\n <div class=\"ds-accordion__body\">\n <ng-container *ngTemplateOutlet=\"item.contentTemplate\" />\n </div>\n </div>\n </div>\n }\n }\n</div>\n", styles: ["@charset \"UTF-8\";.ds-accordion{font-family:var(--font-family-base)}.ds-accordion__item--disabled{opacity:.5;pointer-events:none}.ds-accordion__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--accordion-header-padding-md, var(--space-4));background-color:var(--accordion-header-bg, var(--background-main));border:none;cursor:pointer;text-align:left;font-family:inherit;font-size:var(--accordion-header-font-size-md, var(--font-size-3));font-weight:var(--font-weight-medium);color:var(--accordion-header-text, var(--text-default));border-radius:0;transition:background-color var(--duration-fast) var(--easing-default),color var(--duration-fast) var(--easing-default)}.ds-accordion__header:hover:not(:disabled){background-color:var(--accordion-header-hover-bg, var(--surface-hover))}.ds-accordion__header:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--accordion-focus-color, var(--color-primary))}.ds-accordion__header:active:not(:disabled){transform:scale(.995)}.ds-accordion__header:disabled{cursor:not-allowed}.ds-accordion__title{flex:1}.ds-accordion__icon{flex-shrink:0;transition:transform var(--duration-normal) var(--easing-default);color:var(--accordion-icon-color, var(--text-muted))}.ds-accordion__icon--rotated{transform:rotate(180deg)}.ds-accordion__badge{margin-left:var(--space-2);margin-right:var(--space-2);flex-shrink:0}.ds-accordion__content{
|
|
5608
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsAccordion, isStandalone: true, selector: "ds-accordion", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, expandedIds: { classPropertyName: "expandedIds", publicName: "expandedIds", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, expandedBorderColor: { classPropertyName: "expandedBorderColor", publicName: "expandedBorderColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemChange: "itemChange" }, queries: [{ propertyName: "accordionItems", predicate: DsAccordionItem, isSignal: true }], ngImport: i0, template: "<div [ngClass]=\"containerClasses()\">\n <!-- Mode data-driven (r\u00E9trocompatible) -->\n @if (mode() === 'data') {\n @for (item of items(); track item.id; let i = $index) {\n <div [ngClass]=\"getItemClasses(item)\" [style.--accordion-expanded-border-color]=\"expandedBorderColor()\">\n <!-- Header -->\n <button\n type=\"button\"\n class=\"ds-accordion__header\"\n [id]=\"getHeaderId(item)\"\n [attr.aria-expanded]=\"isExpanded(item.id)\"\n [attr.aria-controls]=\"getContentId(item)\"\n [disabled]=\"disabled() || item.disabled\"\n (click)=\"toggleItem(item)\"\n (keydown)=\"onKeydown($event, item, i)\">\n <span class=\"ds-accordion__title\">{{ item.header }}</span>\n <fa-icon\n class=\"ds-accordion__icon\"\n [icon]=\"faChevronDown\"\n [class.ds-accordion__icon--rotated]=\"isExpanded(item.id)\"\n aria-hidden=\"true\">\n </fa-icon>\n </button>\n\n <!-- Contenu -->\n <div\n class=\"ds-accordion__content\"\n [id]=\"getContentId(item)\"\n role=\"region\"\n [attr.aria-labelledby]=\"getHeaderId(item)\"\n [attr.aria-hidden]=\"!isExpanded(item.id)\"\n [class.ds-accordion__content--expanded]=\"isExpanded(item.id)\">\n <div class=\"ds-accordion__body\">\n {{ item.content }}\n </div>\n </div>\n </div>\n }\n }\n\n <!-- Mode template-driven (contenu riche) -->\n @if (mode() === 'template') {\n @for (item of accordionItems(); track item.id(); let i = $index) {\n <div [ngClass]=\"getTemplateItemClasses(item)\" [style.--accordion-expanded-border-color]=\"expandedBorderColor()\">\n <!-- Header -->\n <button\n type=\"button\"\n class=\"ds-accordion__header\"\n [id]=\"'accordion-header-' + item.id()\"\n [attr.aria-expanded]=\"isExpanded(item.id())\"\n [attr.aria-controls]=\"'accordion-content-' + item.id()\"\n [disabled]=\"disabled() || item.disabled()\"\n (click)=\"toggleTemplateItem(item)\"\n (keydown)=\"onTemplateKeydown($event, item, i)\">\n <span class=\"ds-accordion__title\">{{ item.header() }}</span>\n @if (item.badge() !== undefined) {\n <ds-badge class=\"ds-accordion__badge\" size=\"sm\" type=\"neutral\">\n {{ item.badge() }}\n </ds-badge>\n }\n <fa-icon\n class=\"ds-accordion__icon\"\n [icon]=\"faChevronDown\"\n [class.ds-accordion__icon--rotated]=\"isExpanded(item.id())\"\n aria-hidden=\"true\">\n </fa-icon>\n </button>\n\n <!-- Contenu -->\n <div\n class=\"ds-accordion__content\"\n [id]=\"'accordion-content-' + item.id()\"\n role=\"region\"\n [attr.aria-labelledby]=\"'accordion-header-' + item.id()\"\n [attr.aria-hidden]=\"!isExpanded(item.id())\"\n [class.ds-accordion__content--expanded]=\"isExpanded(item.id())\">\n <div class=\"ds-accordion__body\">\n <ng-container *ngTemplateOutlet=\"item.contentTemplate\" />\n </div>\n </div>\n </div>\n }\n }\n</div>\n", styles: ["@charset \"UTF-8\";.ds-accordion{font-family:var(--font-family-base)}.ds-accordion__item--disabled{opacity:.5;pointer-events:none}.ds-accordion__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--accordion-header-padding-md, var(--space-4));background-color:var(--accordion-header-bg, var(--background-main));border:none;cursor:pointer;text-align:left;font-family:inherit;font-size:var(--accordion-header-font-size-md, var(--font-size-3));font-weight:var(--font-weight-medium);color:var(--accordion-header-text, var(--text-default));border-radius:0;transition:background-color var(--duration-fast) var(--easing-default),color var(--duration-fast) var(--easing-default)}.ds-accordion__header:hover:not(:disabled){background-color:var(--accordion-header-hover-bg, var(--surface-hover))}.ds-accordion__header:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--accordion-focus-color, var(--color-primary))}.ds-accordion__header:active:not(:disabled){transform:scale(.995)}.ds-accordion__header:disabled{cursor:not-allowed}.ds-accordion__title{flex:1}.ds-accordion__icon{flex-shrink:0;transition:transform var(--duration-normal) var(--easing-default);color:var(--accordion-icon-color, var(--text-muted))}.ds-accordion__icon--rotated{transform:rotate(180deg)}.ds-accordion__badge{margin-left:var(--space-2);margin-right:var(--space-2);flex-shrink:0}.ds-accordion__content{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--duration-normal) var(--easing-default)}.ds-accordion__content--expanded{grid-template-rows:1fr}.ds-accordion__body{min-height:0;overflow:hidden;color:var(--accordion-body-text, var(--text-muted));font-size:var(--accordion-body-font-size-md, var(--font-size-2));line-height:var(--line-height-relaxed)}.ds-accordion__content--expanded .ds-accordion__body{padding:var(--accordion-body-padding-md, var(--space-4))}.ds-accordion--default .ds-accordion__item{border-bottom:var(--accordion-border-width) solid var(--accordion-border-color, var(--border-color))}.ds-accordion--default .ds-accordion__item:last-child{border-bottom:none}.ds-accordion--bordered{border:var(--accordion-border-width) solid var(--accordion-border-color, var(--border-color));border-radius:var(--accordion-radius, var(--radius-2));overflow:hidden}.ds-accordion--bordered .ds-accordion__item{border-bottom:var(--accordion-border-width) solid var(--accordion-border-color, var(--border-color))}.ds-accordion--bordered .ds-accordion__item:last-child{border-bottom:none}.ds-accordion--separated .ds-accordion__item{margin-bottom:var(--accordion-item-gap, var(--space-2));border:var(--accordion-border-width) solid var(--accordion-border-color, var(--border-color));border-radius:var(--accordion-radius, var(--radius-2));overflow:hidden;transition:border-color var(--duration-fast) var(--easing-default)}.ds-accordion--separated .ds-accordion__item:last-child{margin-bottom:0}.ds-accordion--separated .ds-accordion__item--expanded{border-color:var(--accordion-expanded-border-color, var(--color-primary))}.ds-accordion--sm .ds-accordion__header{padding:var(--accordion-header-padding-sm, var(--space-2) var(--space-3));font-size:var(--accordion-header-font-size-sm, var(--font-size-2))}.ds-accordion--sm .ds-accordion__body{font-size:var(--accordion-body-font-size-sm, var(--font-size-1))}.ds-accordion--sm .ds-accordion__content--expanded .ds-accordion__body{padding:var(--accordion-body-padding-sm, var(--space-2) var(--space-3))}.ds-accordion--lg .ds-accordion__header{padding:var(--accordion-header-padding-lg, var(--space-5) var(--space-6));font-size:var(--accordion-header-font-size-lg, var(--font-size-4))}.ds-accordion--lg .ds-accordion__body{font-size:var(--accordion-body-font-size-lg, var(--font-size-3))}.ds-accordion--lg .ds-accordion__content--expanded .ds-accordion__body{padding:var(--accordion-body-padding-lg, var(--space-5) var(--space-6))}.ds-accordion--disabled{opacity:.5;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "component", type: DsBadge, selector: "ds-badge", inputs: ["type", "size", "iconStart", "iconEnd", "variant", "shape", "color"] }] });
|
|
5599
5609
|
}
|
|
5600
5610
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsAccordion, decorators: [{
|
|
5601
5611
|
type: Component,
|
|
5602
|
-
args: [{ selector: 'ds-accordion', imports: [CommonModule, FontAwesomeModule, NgTemplateOutlet, DsBadge], template: "<div [ngClass]=\"containerClasses()\">\n <!-- Mode data-driven (r\u00E9trocompatible) -->\n @if (mode() === 'data') {\n @for (item of items(); track item.id; let i = $index) {\n <div [ngClass]=\"getItemClasses(item)\">\n <!-- Header -->\n <button\n type=\"button\"\n class=\"ds-accordion__header\"\n [id]=\"getHeaderId(item)\"\n [attr.aria-expanded]=\"isExpanded(item.id)\"\n [attr.aria-controls]=\"getContentId(item)\"\n [disabled]=\"disabled() || item.disabled\"\n (click)=\"toggleItem(item)\"\n (keydown)=\"onKeydown($event, item, i)\">\n <span class=\"ds-accordion__title\">{{ item.header }}</span>\n <fa-icon\n class=\"ds-accordion__icon\"\n [icon]=\"faChevronDown\"\n [class.ds-accordion__icon--rotated]=\"isExpanded(item.id)\"\n aria-hidden=\"true\">\n </fa-icon>\n </button>\n\n <!-- Contenu -->\n <div\n class=\"ds-accordion__content\"\n [id]=\"getContentId(item)\"\n role=\"region\"\n [attr.aria-labelledby]=\"getHeaderId(item)\"\n [attr.aria-hidden]=\"!isExpanded(item.id)\"\n [class.ds-accordion__content--expanded]=\"isExpanded(item.id)\">\n <div class=\"ds-accordion__body\">\n {{ item.content }}\n </div>\n </div>\n </div>\n }\n }\n\n <!-- Mode template-driven (contenu riche) -->\n @if (mode() === 'template') {\n @for (item of accordionItems(); track item.id(); let i = $index) {\n <div [ngClass]=\"getTemplateItemClasses(item)\">\n <!-- Header -->\n <button\n type=\"button\"\n class=\"ds-accordion__header\"\n [id]=\"'accordion-header-' + item.id()\"\n [attr.aria-expanded]=\"isExpanded(item.id())\"\n [attr.aria-controls]=\"'accordion-content-' + item.id()\"\n [disabled]=\"disabled() || item.disabled()\"\n (click)=\"toggleTemplateItem(item)\"\n (keydown)=\"onTemplateKeydown($event, item, i)\">\n <span class=\"ds-accordion__title\">{{ item.header() }}</span>\n @if (item.badge() !== undefined) {\n <ds-badge class=\"ds-accordion__badge\" size=\"sm\" type=\"neutral\">\n {{ item.badge() }}\n </ds-badge>\n }\n <fa-icon\n class=\"ds-accordion__icon\"\n [icon]=\"faChevronDown\"\n [class.ds-accordion__icon--rotated]=\"isExpanded(item.id())\"\n aria-hidden=\"true\">\n </fa-icon>\n </button>\n\n <!-- Contenu -->\n <div\n class=\"ds-accordion__content\"\n [id]=\"'accordion-content-' + item.id()\"\n role=\"region\"\n [attr.aria-labelledby]=\"'accordion-header-' + item.id()\"\n [attr.aria-hidden]=\"!isExpanded(item.id())\"\n [class.ds-accordion__content--expanded]=\"isExpanded(item.id())\">\n <div class=\"ds-accordion__body\">\n <ng-container *ngTemplateOutlet=\"item.contentTemplate\" />\n </div>\n </div>\n </div>\n }\n }\n</div>\n", styles: ["@charset \"UTF-8\";.ds-accordion{font-family:var(--font-family-base)}.ds-accordion__item--disabled{opacity:.5;pointer-events:none}.ds-accordion__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--accordion-header-padding-md, var(--space-4));background-color:var(--accordion-header-bg, var(--background-main));border:none;cursor:pointer;text-align:left;font-family:inherit;font-size:var(--accordion-header-font-size-md, var(--font-size-3));font-weight:var(--font-weight-medium);color:var(--accordion-header-text, var(--text-default));border-radius:0;transition:background-color var(--duration-fast) var(--easing-default),color var(--duration-fast) var(--easing-default)}.ds-accordion__header:hover:not(:disabled){background-color:var(--accordion-header-hover-bg, var(--surface-hover))}.ds-accordion__header:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--accordion-focus-color, var(--color-primary))}.ds-accordion__header:active:not(:disabled){transform:scale(.995)}.ds-accordion__header:disabled{cursor:not-allowed}.ds-accordion__title{flex:1}.ds-accordion__icon{flex-shrink:0;transition:transform var(--duration-normal) var(--easing-default);color:var(--accordion-icon-color, var(--text-muted))}.ds-accordion__icon--rotated{transform:rotate(180deg)}.ds-accordion__badge{margin-left:var(--space-2);margin-right:var(--space-2);flex-shrink:0}.ds-accordion__content{
|
|
5603
|
-
}], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], expandedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedIds", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], itemChange: [{ type: i0.Output, args: ["itemChange"] }], accordionItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DsAccordionItem), { isSignal: true }] }] } });
|
|
5612
|
+
args: [{ selector: 'ds-accordion', imports: [CommonModule, FontAwesomeModule, NgTemplateOutlet, DsBadge], template: "<div [ngClass]=\"containerClasses()\">\n <!-- Mode data-driven (r\u00E9trocompatible) -->\n @if (mode() === 'data') {\n @for (item of items(); track item.id; let i = $index) {\n <div [ngClass]=\"getItemClasses(item)\" [style.--accordion-expanded-border-color]=\"expandedBorderColor()\">\n <!-- Header -->\n <button\n type=\"button\"\n class=\"ds-accordion__header\"\n [id]=\"getHeaderId(item)\"\n [attr.aria-expanded]=\"isExpanded(item.id)\"\n [attr.aria-controls]=\"getContentId(item)\"\n [disabled]=\"disabled() || item.disabled\"\n (click)=\"toggleItem(item)\"\n (keydown)=\"onKeydown($event, item, i)\">\n <span class=\"ds-accordion__title\">{{ item.header }}</span>\n <fa-icon\n class=\"ds-accordion__icon\"\n [icon]=\"faChevronDown\"\n [class.ds-accordion__icon--rotated]=\"isExpanded(item.id)\"\n aria-hidden=\"true\">\n </fa-icon>\n </button>\n\n <!-- Contenu -->\n <div\n class=\"ds-accordion__content\"\n [id]=\"getContentId(item)\"\n role=\"region\"\n [attr.aria-labelledby]=\"getHeaderId(item)\"\n [attr.aria-hidden]=\"!isExpanded(item.id)\"\n [class.ds-accordion__content--expanded]=\"isExpanded(item.id)\">\n <div class=\"ds-accordion__body\">\n {{ item.content }}\n </div>\n </div>\n </div>\n }\n }\n\n <!-- Mode template-driven (contenu riche) -->\n @if (mode() === 'template') {\n @for (item of accordionItems(); track item.id(); let i = $index) {\n <div [ngClass]=\"getTemplateItemClasses(item)\" [style.--accordion-expanded-border-color]=\"expandedBorderColor()\">\n <!-- Header -->\n <button\n type=\"button\"\n class=\"ds-accordion__header\"\n [id]=\"'accordion-header-' + item.id()\"\n [attr.aria-expanded]=\"isExpanded(item.id())\"\n [attr.aria-controls]=\"'accordion-content-' + item.id()\"\n [disabled]=\"disabled() || item.disabled()\"\n (click)=\"toggleTemplateItem(item)\"\n (keydown)=\"onTemplateKeydown($event, item, i)\">\n <span class=\"ds-accordion__title\">{{ item.header() }}</span>\n @if (item.badge() !== undefined) {\n <ds-badge class=\"ds-accordion__badge\" size=\"sm\" type=\"neutral\">\n {{ item.badge() }}\n </ds-badge>\n }\n <fa-icon\n class=\"ds-accordion__icon\"\n [icon]=\"faChevronDown\"\n [class.ds-accordion__icon--rotated]=\"isExpanded(item.id())\"\n aria-hidden=\"true\">\n </fa-icon>\n </button>\n\n <!-- Contenu -->\n <div\n class=\"ds-accordion__content\"\n [id]=\"'accordion-content-' + item.id()\"\n role=\"region\"\n [attr.aria-labelledby]=\"'accordion-header-' + item.id()\"\n [attr.aria-hidden]=\"!isExpanded(item.id())\"\n [class.ds-accordion__content--expanded]=\"isExpanded(item.id())\">\n <div class=\"ds-accordion__body\">\n <ng-container *ngTemplateOutlet=\"item.contentTemplate\" />\n </div>\n </div>\n </div>\n }\n }\n</div>\n", styles: ["@charset \"UTF-8\";.ds-accordion{font-family:var(--font-family-base)}.ds-accordion__item--disabled{opacity:.5;pointer-events:none}.ds-accordion__header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--accordion-header-padding-md, var(--space-4));background-color:var(--accordion-header-bg, var(--background-main));border:none;cursor:pointer;text-align:left;font-family:inherit;font-size:var(--accordion-header-font-size-md, var(--font-size-3));font-weight:var(--font-weight-medium);color:var(--accordion-header-text, var(--text-default));border-radius:0;transition:background-color var(--duration-fast) var(--easing-default),color var(--duration-fast) var(--easing-default)}.ds-accordion__header:hover:not(:disabled){background-color:var(--accordion-header-hover-bg, var(--surface-hover))}.ds-accordion__header:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--accordion-focus-color, var(--color-primary))}.ds-accordion__header:active:not(:disabled){transform:scale(.995)}.ds-accordion__header:disabled{cursor:not-allowed}.ds-accordion__title{flex:1}.ds-accordion__icon{flex-shrink:0;transition:transform var(--duration-normal) var(--easing-default);color:var(--accordion-icon-color, var(--text-muted))}.ds-accordion__icon--rotated{transform:rotate(180deg)}.ds-accordion__badge{margin-left:var(--space-2);margin-right:var(--space-2);flex-shrink:0}.ds-accordion__content{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--duration-normal) var(--easing-default)}.ds-accordion__content--expanded{grid-template-rows:1fr}.ds-accordion__body{min-height:0;overflow:hidden;color:var(--accordion-body-text, var(--text-muted));font-size:var(--accordion-body-font-size-md, var(--font-size-2));line-height:var(--line-height-relaxed)}.ds-accordion__content--expanded .ds-accordion__body{padding:var(--accordion-body-padding-md, var(--space-4))}.ds-accordion--default .ds-accordion__item{border-bottom:var(--accordion-border-width) solid var(--accordion-border-color, var(--border-color))}.ds-accordion--default .ds-accordion__item:last-child{border-bottom:none}.ds-accordion--bordered{border:var(--accordion-border-width) solid var(--accordion-border-color, var(--border-color));border-radius:var(--accordion-radius, var(--radius-2));overflow:hidden}.ds-accordion--bordered .ds-accordion__item{border-bottom:var(--accordion-border-width) solid var(--accordion-border-color, var(--border-color))}.ds-accordion--bordered .ds-accordion__item:last-child{border-bottom:none}.ds-accordion--separated .ds-accordion__item{margin-bottom:var(--accordion-item-gap, var(--space-2));border:var(--accordion-border-width) solid var(--accordion-border-color, var(--border-color));border-radius:var(--accordion-radius, var(--radius-2));overflow:hidden;transition:border-color var(--duration-fast) var(--easing-default)}.ds-accordion--separated .ds-accordion__item:last-child{margin-bottom:0}.ds-accordion--separated .ds-accordion__item--expanded{border-color:var(--accordion-expanded-border-color, var(--color-primary))}.ds-accordion--sm .ds-accordion__header{padding:var(--accordion-header-padding-sm, var(--space-2) var(--space-3));font-size:var(--accordion-header-font-size-sm, var(--font-size-2))}.ds-accordion--sm .ds-accordion__body{font-size:var(--accordion-body-font-size-sm, var(--font-size-1))}.ds-accordion--sm .ds-accordion__content--expanded .ds-accordion__body{padding:var(--accordion-body-padding-sm, var(--space-2) var(--space-3))}.ds-accordion--lg .ds-accordion__header{padding:var(--accordion-header-padding-lg, var(--space-5) var(--space-6));font-size:var(--accordion-header-font-size-lg, var(--font-size-4))}.ds-accordion--lg .ds-accordion__body{font-size:var(--accordion-body-font-size-lg, var(--font-size-3))}.ds-accordion--lg .ds-accordion__content--expanded .ds-accordion__body{padding:var(--accordion-body-padding-lg, var(--space-5) var(--space-6))}.ds-accordion--disabled{opacity:.5;pointer-events:none}\n"] }]
|
|
5613
|
+
}], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], expandedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedIds", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], expandedBorderColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedBorderColor", required: false }] }], itemChange: [{ type: i0.Output, args: ["itemChange"] }], accordionItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DsAccordionItem), { isSignal: true }] }] } });
|
|
5604
5614
|
|
|
5605
5615
|
/**
|
|
5606
5616
|
* # DsPagination
|
|
@@ -15248,6 +15258,8 @@ class DsNavList {
|
|
|
15248
15258
|
itemClick = output();
|
|
15249
15259
|
/** Émis lors du toggle d'un groupe */
|
|
15250
15260
|
groupToggle = output();
|
|
15261
|
+
/** Émis lors du clic sur l'action d'un groupe */
|
|
15262
|
+
groupAction = output();
|
|
15251
15263
|
// ============ ICONS ============
|
|
15252
15264
|
faChevronDown = faChevronDown;
|
|
15253
15265
|
faChevronRight = faChevronRight;
|
|
@@ -15349,8 +15361,15 @@ class DsNavList {
|
|
|
15349
15361
|
}
|
|
15350
15362
|
return classes.join(' ');
|
|
15351
15363
|
}
|
|
15364
|
+
/**
|
|
15365
|
+
* Gère le clic sur l'action d'un groupe
|
|
15366
|
+
*/
|
|
15367
|
+
handleGroupAction(group, event) {
|
|
15368
|
+
event.stopPropagation();
|
|
15369
|
+
this.groupAction.emit({ group, event });
|
|
15370
|
+
}
|
|
15352
15371
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsNavList, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
15353
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsNavList, isStandalone: true, selector: "ds-nav-list", inputs: { groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: true, transformFunction: null }, activeItemId: { classPropertyName: "activeItemId", publicName: "activeItemId", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", groupToggle: "groupToggle" }, ngImport: i0, template: "<nav\n [class]=\"containerClasses()\"\n [attr.aria-label]=\"ariaLabel()\"\n role=\"navigation\">\n\n @for (group of groups(); track group.id; let isFirst = $first) {\n <!-- Divider avec titre (sauf pour le premier groupe sans titre) -->\n @if (group.title) {\n <ds-divider\n size=\"sm\"\n [spacing]=\"isFirst ? 'none' : 'sm'\"\n [class.collapsible]=\"group.collapsible\"\n (click)=\"group.collapsible ? toggleGroup(group, $event) : null\">\n <div class=\"group-header\">\n <span>{{ group.title }}</span>\n @if (group.collapsible) {\n
|
|
15372
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DsNavList, isStandalone: true, selector: "ds-nav-list", inputs: { groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: true, transformFunction: null }, activeItemId: { classPropertyName: "activeItemId", publicName: "activeItemId", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", groupToggle: "groupToggle", groupAction: "groupAction" }, ngImport: i0, template: "<nav\n [class]=\"containerClasses()\"\n [attr.aria-label]=\"ariaLabel()\"\n role=\"navigation\">\n\n @for (group of groups(); track group.id; let isFirst = $first) {\n <!-- Divider avec titre (sauf pour le premier groupe sans titre) -->\n @if (group.title) {\n <ds-divider\n size=\"sm\"\n [spacing]=\"isFirst ? 'none' : 'sm'\"\n [class.collapsible]=\"group.collapsible\"\n (click)=\"group.collapsible ? toggleGroup(group, $event) : null\">\n <div class=\"group-header\">\n <span>{{ group.title }}</span>\n <div class=\"group-header-end\">\n @if (group.headerAction) {\n <button\n type=\"button\"\n class=\"group-action-btn\"\n [attr.aria-label]=\"group.headerAction.ariaLabel\"\n [title]=\"group.headerAction.tooltip || group.headerAction.ariaLabel\"\n (click)=\"handleGroupAction(group, $event)\">\n <fa-icon [icon]=\"group.headerAction.icon\" />\n </button>\n }\n @if (group.collapsible) {\n <fa-icon\n [icon]=\"isGroupCollapsed(group) ? faChevronRight : faChevronDown\"\n class=\"collapse-icon\">\n </fa-icon>\n }\n </div>\n </div>\n </ds-divider>\n }\n\n <!-- Items du groupe -->\n @if (!isGroupCollapsed(group)) {\n <ul class=\"nav-list-group\" role=\"list\">\n @for (item of group.items; track item.id) {\n <li\n [class]=\"getItemClasses(item)\"\n [attr.aria-current]=\"isActive(item) ? 'page' : null\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n [tabindex]=\"item.disabled ? -1 : 0\"\n role=\"listitem\"\n (click)=\"handleItemClick(item, group, $event)\"\n (keydown)=\"handleItemKeydown(item, group, $event)\">\n\n <!-- Partie gauche : ic\u00F4ne/emoji + label -->\n <div class=\"item-main\">\n @if (item.emoji) {\n <span class=\"item-emoji\">{{ item.emoji }}</span>\n } @else if (item.icon) {\n <fa-icon [icon]=\"item.icon\" class=\"item-icon\"></fa-icon>\n }\n <span class=\"item-label\">{{ item.label }}</span>\n </div>\n\n <!-- Partie droite : dot + badge -->\n <div class=\"item-end\">\n @if (item.dotColor) {\n <span\n class=\"item-dot\"\n [style.background-color]=\"item.dotColor\">\n </span>\n }\n @if (item.badge !== undefined && item.badge !== null) {\n <ds-badge\n [type]=\"item.badgeVariant ?? 'default'\"\n variant=\"outline\"\n size=\"sm\">\n {{ item.badge }}\n </ds-badge>\n }\n </div>\n </li>\n }\n </ul>\n }\n }\n</nav>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.ds-nav-list{display:flex;flex-direction:column;gap:var(--space-1)}.ds-nav-list--sm{--nav-item-padding-y: .35rem;--nav-item-padding-x: var(--space-2);--nav-item-font-size: var(--font-size-0, .8125rem);--nav-item-icon-size: .875rem;--nav-item-emoji-size: .9rem;--nav-item-dot-size: 6px;--nav-item-gap: var(--space-1)}.ds-nav-list--md{--nav-item-padding-y: .45rem;--nav-item-padding-x: var(--space-2);--nav-item-font-size: var(--font-size-1, .9375rem);--nav-item-icon-size: 1rem;--nav-item-emoji-size: 1rem;--nav-item-dot-size: 8px;--nav-item-gap: var(--space-2)}.ds-nav-list--lg{--nav-item-padding-y: .55rem;--nav-item-padding-x: var(--space-3);--nav-item-font-size: var(--font-size-2, 1rem);--nav-item-icon-size: 1.125rem;--nav-item-emoji-size: 1.125rem;--nav-item-dot-size: 10px;--nav-item-gap: var(--space-2)}.group-header{display:flex;align-items:center;justify-content:space-between;width:100%;cursor:default}.collapsible .group-header{cursor:pointer}.group-header-end{display:flex;align-items:center;gap:var(--space-1)}.group-action-btn{display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;border:none;border-radius:var(--radius-1, 4px);background:transparent;color:var(--text-muted);font-size:.75rem;cursor:pointer;transition:background-color var(--duration-fast, .15s) var(--easing-default, ease),color var(--duration-fast, .15s) var(--easing-default, ease)}.group-action-btn:hover{background-color:var(--hover-bg, rgba(255, 255, 255, .1));color:var(--text-default)}.group-action-btn:focus-visible{outline:2px solid var(--color-primary, #6366f1);outline-offset:1px}.collapse-icon{font-size:.7em;color:var(--text-muted);transition:transform var(--duration-fast, .15s) var(--easing-default, ease)}.nav-list-group{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}.nav-list-item{display:flex;align-items:center;justify-content:space-between;gap:var(--nav-item-gap);padding:var(--nav-item-padding-y) var(--nav-item-padding-x);border-radius:var(--radius-1-5, 6px);color:var(--text-default);cursor:pointer;transition:background-color var(--duration-fast, .15s) var(--easing-default, ease),color var(--duration-fast, .15s) var(--easing-default, ease)}.nav-list-item:hover{background-color:var(--hover-bg, rgba(255, 255, 255, .06))}.nav-list-item:focus-visible{outline:2px solid var(--color-primary, #6366f1);outline-offset:-2px}.nav-list-item--active{background-color:var(--active-bg, rgba(255, 255, 255, .1));color:var(--color-primary, #6366f1)}.nav-list-item--active .item-icon{color:var(--color-primary, #6366f1)}.nav-list-item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.item-main{display:inline-flex;align-items:center;gap:var(--nav-item-gap);min-width:0}.item-icon{flex-shrink:0;font-size:var(--nav-item-icon-size);color:var(--text-muted);width:1.25em;text-align:center}.item-emoji{flex-shrink:0;font-size:var(--nav-item-emoji-size);width:1.25em;text-align:center}.item-label{font-size:var(--nav-item-font-size);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item-end{display:inline-flex;align-items:center;gap:.5rem;flex-shrink:0}.item-dot{width:var(--nav-item-dot-size);height:var(--nav-item-dot-size);border-radius:50%;flex-shrink:0}ds-divider.collapsible{cursor:pointer}ds-divider.collapsible:hover .group-header{color:var(--text-default)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "component", type: DsBadge, selector: "ds-badge", inputs: ["type", "size", "iconStart", "iconEnd", "variant", "shape", "color"] }, { kind: "component", type: DsDivider, selector: "ds-divider", inputs: ["orientation", "variant", "size", "labelPosition", "spacing"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
15354
15373
|
}
|
|
15355
15374
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsNavList, decorators: [{
|
|
15356
15375
|
type: Component,
|
|
@@ -15359,8 +15378,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
15359
15378
|
FaIconComponent,
|
|
15360
15379
|
DsBadge,
|
|
15361
15380
|
DsDivider,
|
|
15362
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav\n [class]=\"containerClasses()\"\n [attr.aria-label]=\"ariaLabel()\"\n role=\"navigation\">\n\n @for (group of groups(); track group.id; let isFirst = $first) {\n <!-- Divider avec titre (sauf pour le premier groupe sans titre) -->\n @if (group.title) {\n <ds-divider\n size=\"sm\"\n [spacing]=\"isFirst ? 'none' : 'sm'\"\n [class.collapsible]=\"group.collapsible\"\n (click)=\"group.collapsible ? toggleGroup(group, $event) : null\">\n <div class=\"group-header\">\n <span>{{ group.title }}</span>\n @if (group.collapsible) {\n
|
|
15363
|
-
}], ctorParameters: () => [], propDecorators: { groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: true }] }], activeItemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeItemId", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], groupToggle: [{ type: i0.Output, args: ["groupToggle"] }] } });
|
|
15381
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav\n [class]=\"containerClasses()\"\n [attr.aria-label]=\"ariaLabel()\"\n role=\"navigation\">\n\n @for (group of groups(); track group.id; let isFirst = $first) {\n <!-- Divider avec titre (sauf pour le premier groupe sans titre) -->\n @if (group.title) {\n <ds-divider\n size=\"sm\"\n [spacing]=\"isFirst ? 'none' : 'sm'\"\n [class.collapsible]=\"group.collapsible\"\n (click)=\"group.collapsible ? toggleGroup(group, $event) : null\">\n <div class=\"group-header\">\n <span>{{ group.title }}</span>\n <div class=\"group-header-end\">\n @if (group.headerAction) {\n <button\n type=\"button\"\n class=\"group-action-btn\"\n [attr.aria-label]=\"group.headerAction.ariaLabel\"\n [title]=\"group.headerAction.tooltip || group.headerAction.ariaLabel\"\n (click)=\"handleGroupAction(group, $event)\">\n <fa-icon [icon]=\"group.headerAction.icon\" />\n </button>\n }\n @if (group.collapsible) {\n <fa-icon\n [icon]=\"isGroupCollapsed(group) ? faChevronRight : faChevronDown\"\n class=\"collapse-icon\">\n </fa-icon>\n }\n </div>\n </div>\n </ds-divider>\n }\n\n <!-- Items du groupe -->\n @if (!isGroupCollapsed(group)) {\n <ul class=\"nav-list-group\" role=\"list\">\n @for (item of group.items; track item.id) {\n <li\n [class]=\"getItemClasses(item)\"\n [attr.aria-current]=\"isActive(item) ? 'page' : null\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n [tabindex]=\"item.disabled ? -1 : 0\"\n role=\"listitem\"\n (click)=\"handleItemClick(item, group, $event)\"\n (keydown)=\"handleItemKeydown(item, group, $event)\">\n\n <!-- Partie gauche : ic\u00F4ne/emoji + label -->\n <div class=\"item-main\">\n @if (item.emoji) {\n <span class=\"item-emoji\">{{ item.emoji }}</span>\n } @else if (item.icon) {\n <fa-icon [icon]=\"item.icon\" class=\"item-icon\"></fa-icon>\n }\n <span class=\"item-label\">{{ item.label }}</span>\n </div>\n\n <!-- Partie droite : dot + badge -->\n <div class=\"item-end\">\n @if (item.dotColor) {\n <span\n class=\"item-dot\"\n [style.background-color]=\"item.dotColor\">\n </span>\n }\n @if (item.badge !== undefined && item.badge !== null) {\n <ds-badge\n [type]=\"item.badgeVariant ?? 'default'\"\n variant=\"outline\"\n size=\"sm\">\n {{ item.badge }}\n </ds-badge>\n }\n </div>\n </li>\n }\n </ul>\n }\n }\n</nav>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.ds-nav-list{display:flex;flex-direction:column;gap:var(--space-1)}.ds-nav-list--sm{--nav-item-padding-y: .35rem;--nav-item-padding-x: var(--space-2);--nav-item-font-size: var(--font-size-0, .8125rem);--nav-item-icon-size: .875rem;--nav-item-emoji-size: .9rem;--nav-item-dot-size: 6px;--nav-item-gap: var(--space-1)}.ds-nav-list--md{--nav-item-padding-y: .45rem;--nav-item-padding-x: var(--space-2);--nav-item-font-size: var(--font-size-1, .9375rem);--nav-item-icon-size: 1rem;--nav-item-emoji-size: 1rem;--nav-item-dot-size: 8px;--nav-item-gap: var(--space-2)}.ds-nav-list--lg{--nav-item-padding-y: .55rem;--nav-item-padding-x: var(--space-3);--nav-item-font-size: var(--font-size-2, 1rem);--nav-item-icon-size: 1.125rem;--nav-item-emoji-size: 1.125rem;--nav-item-dot-size: 10px;--nav-item-gap: var(--space-2)}.group-header{display:flex;align-items:center;justify-content:space-between;width:100%;cursor:default}.collapsible .group-header{cursor:pointer}.group-header-end{display:flex;align-items:center;gap:var(--space-1)}.group-action-btn{display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;padding:0;border:none;border-radius:var(--radius-1, 4px);background:transparent;color:var(--text-muted);font-size:.75rem;cursor:pointer;transition:background-color var(--duration-fast, .15s) var(--easing-default, ease),color var(--duration-fast, .15s) var(--easing-default, ease)}.group-action-btn:hover{background-color:var(--hover-bg, rgba(255, 255, 255, .1));color:var(--text-default)}.group-action-btn:focus-visible{outline:2px solid var(--color-primary, #6366f1);outline-offset:1px}.collapse-icon{font-size:.7em;color:var(--text-muted);transition:transform var(--duration-fast, .15s) var(--easing-default, ease)}.nav-list-group{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}.nav-list-item{display:flex;align-items:center;justify-content:space-between;gap:var(--nav-item-gap);padding:var(--nav-item-padding-y) var(--nav-item-padding-x);border-radius:var(--radius-1-5, 6px);color:var(--text-default);cursor:pointer;transition:background-color var(--duration-fast, .15s) var(--easing-default, ease),color var(--duration-fast, .15s) var(--easing-default, ease)}.nav-list-item:hover{background-color:var(--hover-bg, rgba(255, 255, 255, .06))}.nav-list-item:focus-visible{outline:2px solid var(--color-primary, #6366f1);outline-offset:-2px}.nav-list-item--active{background-color:var(--active-bg, rgba(255, 255, 255, .1));color:var(--color-primary, #6366f1)}.nav-list-item--active .item-icon{color:var(--color-primary, #6366f1)}.nav-list-item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.item-main{display:inline-flex;align-items:center;gap:var(--nav-item-gap);min-width:0}.item-icon{flex-shrink:0;font-size:var(--nav-item-icon-size);color:var(--text-muted);width:1.25em;text-align:center}.item-emoji{flex-shrink:0;font-size:var(--nav-item-emoji-size);width:1.25em;text-align:center}.item-label{font-size:var(--nav-item-font-size);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item-end{display:inline-flex;align-items:center;gap:.5rem;flex-shrink:0}.item-dot{width:var(--nav-item-dot-size);height:var(--nav-item-dot-size);border-radius:50%;flex-shrink:0}ds-divider.collapsible{cursor:pointer}ds-divider.collapsible:hover .group-header{color:var(--text-default)}\n"] }]
|
|
15382
|
+
}], ctorParameters: () => [], propDecorators: { groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: true }] }], activeItemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeItemId", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], groupToggle: [{ type: i0.Output, args: ["groupToggle"] }], groupAction: [{ type: i0.Output, args: ["groupAction"] }] } });
|
|
15364
15383
|
|
|
15365
15384
|
/**
|
|
15366
15385
|
* # DsCheckboxList
|