@kksdev/ds-angular 1.8.1 → 1.8.2
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 +23 -13
- package/fesm2022/kksdev-ds-angular.mjs.map +1 -1
- package/index.d.ts +10 -2
- 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
|