@kksdev/ds-angular 1.8.0 → 1.8.1
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 +189 -8
- package/fesm2022/kksdev-ds-angular.mjs.map +1 -1
- package/index.d.ts +93 -4
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
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, 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, ChangeDetectionStrategy, viewChild, Input, ViewEncapsulation } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
|
-
import { CommonModule, DOCUMENT, NgClass } from '@angular/common';
|
|
4
|
+
import { CommonModule, DOCUMENT, NgClass, NgTemplateOutlet } from '@angular/common';
|
|
5
5
|
import * as i1$1 from '@fortawesome/angular-fontawesome';
|
|
6
6
|
import { FaIconComponent, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
|
7
7
|
import * as i1$4 from '@angular/forms';
|
|
@@ -5215,6 +5215,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
5215
5215
|
args: ['blur']
|
|
5216
5216
|
}] } });
|
|
5217
5217
|
|
|
5218
|
+
let accordionItemIdCounter = 0;
|
|
5219
|
+
/**
|
|
5220
|
+
* # DsAccordionItem
|
|
5221
|
+
*
|
|
5222
|
+
* Composant enfant pour le mode template-driven de DsAccordion.
|
|
5223
|
+
* Permet d'injecter du contenu Angular riche (composants, HTML, etc.).
|
|
5224
|
+
*
|
|
5225
|
+
* ## Usage
|
|
5226
|
+
*
|
|
5227
|
+
* ```html
|
|
5228
|
+
* <ds-accordion [multiple]="true">
|
|
5229
|
+
* <ds-accordion-item header="Section 1" [badge]="items.length">
|
|
5230
|
+
* <div>Contenu riche ici</div>
|
|
5231
|
+
* <my-component />
|
|
5232
|
+
* </ds-accordion-item>
|
|
5233
|
+
* </ds-accordion>
|
|
5234
|
+
* ```
|
|
5235
|
+
*
|
|
5236
|
+
* @component
|
|
5237
|
+
*/
|
|
5238
|
+
class DsAccordionItem {
|
|
5239
|
+
/**
|
|
5240
|
+
* Texte du header.
|
|
5241
|
+
*/
|
|
5242
|
+
header = input('', ...(ngDevMode ? [{ debugName: "header" }] : []));
|
|
5243
|
+
/**
|
|
5244
|
+
* Badge optionnel affiché à côté du header (ex: compteur).
|
|
5245
|
+
*/
|
|
5246
|
+
badge = input(undefined, ...(ngDevMode ? [{ debugName: "badge" }] : []));
|
|
5247
|
+
/**
|
|
5248
|
+
* ID unique de l'item. Auto-généré si non fourni.
|
|
5249
|
+
*/
|
|
5250
|
+
id = input(`accordion-item-${++accordionItemIdCounter}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
|
|
5251
|
+
/**
|
|
5252
|
+
* Désactiver cet item.
|
|
5253
|
+
* @default false
|
|
5254
|
+
*/
|
|
5255
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
5256
|
+
/**
|
|
5257
|
+
* Template du contenu projeté.
|
|
5258
|
+
* @internal
|
|
5259
|
+
*/
|
|
5260
|
+
contentTemplate;
|
|
5261
|
+
/**
|
|
5262
|
+
* État d'expansion (contrôlé par le parent DsAccordion).
|
|
5263
|
+
* @internal
|
|
5264
|
+
*/
|
|
5265
|
+
_expanded = signal(false, ...(ngDevMode ? [{ debugName: "_expanded" }] : []));
|
|
5266
|
+
/**
|
|
5267
|
+
* Index dans la liste (injecté par le parent).
|
|
5268
|
+
* @internal
|
|
5269
|
+
*/
|
|
5270
|
+
_index = signal(0, ...(ngDevMode ? [{ debugName: "_index" }] : []));
|
|
5271
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsAccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5272
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: DsAccordionItem, isStandalone: true, selector: "ds-accordion-item", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true, static: true }], ngImport: i0, template: `
|
|
5273
|
+
<ng-template #contentTemplate>
|
|
5274
|
+
<ng-content />
|
|
5275
|
+
</ng-template>
|
|
5276
|
+
`, isInline: true });
|
|
5277
|
+
}
|
|
5278
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsAccordionItem, decorators: [{
|
|
5279
|
+
type: Component,
|
|
5280
|
+
args: [{
|
|
5281
|
+
selector: 'ds-accordion-item',
|
|
5282
|
+
standalone: true,
|
|
5283
|
+
template: `
|
|
5284
|
+
<ng-template #contentTemplate>
|
|
5285
|
+
<ng-content />
|
|
5286
|
+
</ng-template>
|
|
5287
|
+
`,
|
|
5288
|
+
}]
|
|
5289
|
+
}], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], contentTemplate: [{
|
|
5290
|
+
type: ViewChild,
|
|
5291
|
+
args: ['contentTemplate', { static: true }]
|
|
5292
|
+
}] } });
|
|
5293
|
+
|
|
5218
5294
|
/**
|
|
5219
5295
|
* # DsAccordion
|
|
5220
5296
|
*
|
|
@@ -5242,9 +5318,11 @@ class DsAccordion {
|
|
|
5242
5318
|
// Icône FontAwesome
|
|
5243
5319
|
faChevronDown = faChevronDown;
|
|
5244
5320
|
/**
|
|
5245
|
-
* Liste des items de l'accordion.
|
|
5321
|
+
* Liste des items de l'accordion (mode data-driven).
|
|
5322
|
+
* Laisser vide pour utiliser le mode template-driven avec <ds-accordion-item>.
|
|
5323
|
+
* @default []
|
|
5246
5324
|
*/
|
|
5247
|
-
items = input
|
|
5325
|
+
items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
|
|
5248
5326
|
/**
|
|
5249
5327
|
* Permettre l'expansion de plusieurs items simultanément.
|
|
5250
5328
|
* @default false
|
|
@@ -5274,6 +5352,19 @@ class DsAccordion {
|
|
|
5274
5352
|
* Événement émis lors du changement d'état d'un item.
|
|
5275
5353
|
*/
|
|
5276
5354
|
itemChange = output();
|
|
5355
|
+
/**
|
|
5356
|
+
* Items enfants en mode template-driven.
|
|
5357
|
+
* @internal
|
|
5358
|
+
*/
|
|
5359
|
+
accordionItems = contentChildren(DsAccordionItem, ...(ngDevMode ? [{ debugName: "accordionItems" }] : []));
|
|
5360
|
+
/**
|
|
5361
|
+
* Mode de fonctionnement (auto-détecté).
|
|
5362
|
+
* - 'data' : si [items] est fourni et non vide
|
|
5363
|
+
* - 'template' : si des <ds-accordion-item> enfants sont présents
|
|
5364
|
+
*/
|
|
5365
|
+
mode = computed(() => {
|
|
5366
|
+
return this.items().length > 0 ? 'data' : 'template';
|
|
5367
|
+
}, ...(ngDevMode ? [{ debugName: "mode" }] : []));
|
|
5277
5368
|
/**
|
|
5278
5369
|
* État interne des items ouverts.
|
|
5279
5370
|
*/
|
|
@@ -5413,13 +5504,103 @@ class DsAccordion {
|
|
|
5413
5504
|
getContentId(item) {
|
|
5414
5505
|
return `accordion-content-${item.id}`;
|
|
5415
5506
|
}
|
|
5507
|
+
// ==========================================
|
|
5508
|
+
// Mode template-driven
|
|
5509
|
+
// ==========================================
|
|
5510
|
+
/**
|
|
5511
|
+
* Initialiser les index des items enfants.
|
|
5512
|
+
*/
|
|
5513
|
+
ngAfterContentInit() {
|
|
5514
|
+
this.updateTemplateItemsIndex();
|
|
5515
|
+
}
|
|
5516
|
+
/**
|
|
5517
|
+
* Mettre à jour les index des items template.
|
|
5518
|
+
*/
|
|
5519
|
+
updateTemplateItemsIndex() {
|
|
5520
|
+
this.accordionItems().forEach((item, index) => {
|
|
5521
|
+
item._index.set(index);
|
|
5522
|
+
});
|
|
5523
|
+
}
|
|
5524
|
+
/**
|
|
5525
|
+
* Toggle un item en mode template-driven.
|
|
5526
|
+
*/
|
|
5527
|
+
toggleTemplateItem(item) {
|
|
5528
|
+
if (this.disabled() || item.disabled())
|
|
5529
|
+
return;
|
|
5530
|
+
const itemId = item.id();
|
|
5531
|
+
const isCurrentlyExpanded = this.isExpanded(itemId);
|
|
5532
|
+
if (isCurrentlyExpanded) {
|
|
5533
|
+
this._expandedIds.update((set) => {
|
|
5534
|
+
const newSet = new Set(set);
|
|
5535
|
+
newSet.delete(itemId);
|
|
5536
|
+
return newSet;
|
|
5537
|
+
});
|
|
5538
|
+
}
|
|
5539
|
+
else {
|
|
5540
|
+
if (!this.multiple()) {
|
|
5541
|
+
this._expandedIds.set(new Set([itemId]));
|
|
5542
|
+
}
|
|
5543
|
+
else {
|
|
5544
|
+
this._expandedIds.update((set) => {
|
|
5545
|
+
const newSet = new Set(set);
|
|
5546
|
+
newSet.add(itemId);
|
|
5547
|
+
return newSet;
|
|
5548
|
+
});
|
|
5549
|
+
}
|
|
5550
|
+
}
|
|
5551
|
+
item._expanded.set(!isCurrentlyExpanded);
|
|
5552
|
+
this.itemChange.emit({
|
|
5553
|
+
itemId,
|
|
5554
|
+
expanded: !isCurrentlyExpanded,
|
|
5555
|
+
expandedItems: Array.from(this._expandedIds()),
|
|
5556
|
+
});
|
|
5557
|
+
}
|
|
5558
|
+
/**
|
|
5559
|
+
* Gestion du clavier en mode template-driven.
|
|
5560
|
+
*/
|
|
5561
|
+
onTemplateKeydown(event, item, index) {
|
|
5562
|
+
const items = this.accordionItems();
|
|
5563
|
+
switch (event.key) {
|
|
5564
|
+
case 'Enter':
|
|
5565
|
+
case ' ':
|
|
5566
|
+
event.preventDefault();
|
|
5567
|
+
this.toggleTemplateItem(item);
|
|
5568
|
+
break;
|
|
5569
|
+
case 'ArrowDown':
|
|
5570
|
+
event.preventDefault();
|
|
5571
|
+
this.focusItem(Math.min(index + 1, items.length - 1));
|
|
5572
|
+
break;
|
|
5573
|
+
case 'ArrowUp':
|
|
5574
|
+
event.preventDefault();
|
|
5575
|
+
this.focusItem(Math.max(index - 1, 0));
|
|
5576
|
+
break;
|
|
5577
|
+
case 'Home':
|
|
5578
|
+
event.preventDefault();
|
|
5579
|
+
this.focusItem(0);
|
|
5580
|
+
break;
|
|
5581
|
+
case 'End':
|
|
5582
|
+
event.preventDefault();
|
|
5583
|
+
this.focusItem(items.length - 1);
|
|
5584
|
+
break;
|
|
5585
|
+
}
|
|
5586
|
+
}
|
|
5587
|
+
/**
|
|
5588
|
+
* Classes CSS pour un item template-driven.
|
|
5589
|
+
*/
|
|
5590
|
+
getTemplateItemClasses(item) {
|
|
5591
|
+
return [
|
|
5592
|
+
'ds-accordion__item',
|
|
5593
|
+
this.isExpanded(item.id()) ? 'ds-accordion__item--expanded' : '',
|
|
5594
|
+
item.disabled() ? 'ds-accordion__item--disabled' : '',
|
|
5595
|
+
].filter(Boolean);
|
|
5596
|
+
}
|
|
5416
5597
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5417
|
-
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:
|
|
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{max-height:0;overflow:hidden;transition:max-height var(--duration-normal) var(--easing-default)}.ds-accordion__content--expanded{max-height:var(--accordion-content-max-height)}.ds-accordion__body{padding:var(--accordion-body-padding-md, var(--space-4));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--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}.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{padding:var(--accordion-body-padding-sm, var(--space-2) var(--space-3));font-size:var(--accordion-body-font-size-sm, var(--font-size-1))}.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{padding:var(--accordion-body-padding-lg, var(--space-5) var(--space-6));font-size:var(--accordion-body-font-size-lg, var(--font-size-3))}.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"] }] });
|
|
5418
5599
|
}
|
|
5419
5600
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsAccordion, decorators: [{
|
|
5420
5601
|
type: Component,
|
|
5421
|
-
args: [{ selector: 'ds-accordion', imports: [CommonModule, FontAwesomeModule], template: "<div [ngClass]=\"containerClasses()\">\n @for (item of items(); track item.id; let i = $index) {\n
|
|
5422
|
-
}], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required:
|
|
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{max-height:0;overflow:hidden;transition:max-height var(--duration-normal) var(--easing-default)}.ds-accordion__content--expanded{max-height:var(--accordion-content-max-height)}.ds-accordion__body{padding:var(--accordion-body-padding-md, var(--space-4));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--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}.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{padding:var(--accordion-body-padding-sm, var(--space-2) var(--space-3));font-size:var(--accordion-body-font-size-sm, var(--font-size-1))}.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{padding:var(--accordion-body-padding-lg, var(--space-5) var(--space-6));font-size:var(--accordion-body-font-size-lg, var(--font-size-3))}.ds-accordion--disabled{opacity:.5;pointer-events:none}\n"] }]
|
|
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 }] }] } });
|
|
5423
5604
|
|
|
5424
5605
|
/**
|
|
5425
5606
|
* # DsPagination
|
|
@@ -17020,5 +17201,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
17020
17201
|
* Generated bundle index. Do not edit.
|
|
17021
17202
|
*/
|
|
17022
17203
|
|
|
17023
|
-
export { AUTOCOMPLETE_POSITIONS, DROPDOWN_POSITIONS, DROPDOWN_POSITIONS_RIGHT, DROPDOWN_POSITIONS_TOP, DsAccordion, DsAlert, DsAvatar, DsBadge, DsBreadcrumb, DsButton, DsCalendar, DsCard, DsCarousel, DsCheckbox, DsCheckboxList, DsChip, DsColorPicker, DsCombobox, DsContainer, DsDatePicker, DsDivider, DsDrawer, DsDropdown, DsEmpty, DsEntityChip, DsEntityPicker, DsFileUpload, DsI18nService, DsInputField, DsInputNumber, DsInputTextarea, DsList, DsListGroup, DsListItem, DsMenu, DsModalComponent, DsNavList, DsNotificationContainerComponent, DsNotificationItemComponent, DsNotificationService, DsPagination, DsPasswordStrength, DsPopover, DsPopoverComponent, DsProgressBar, DsRadioGroup, DsRating, DsSearchInput, DsSegmentedControl, DsSelect, DsSidebar, DsSidebarFooterItemComponent, DsSidebarItemComponent, DsSkeleton, DsSlider, DsStepper, DsTable, DsTabs, DsTimePicker, DsTimeline, DsToastComponent, DsToastContainerComponent, DsToastService, DsToggle, DsTooltip, DsTooltipComponent, DsTransfer, DsTree, IconRegistryService, POPOVER_POSITIONS, PrimitiveBadge, PrimitiveButton, PrimitiveCheckbox, PrimitiveInput, PrimitiveRadio, PrimitiveTextarea, PrimitiveToggle, SIDEBAR_POPOVER_POSITIONS_LEFT, SIDEBAR_POPOVER_POSITIONS_RIGHT, TOOLTIP_POSITIONS, generateId, generateShortId };
|
|
17204
|
+
export { AUTOCOMPLETE_POSITIONS, DROPDOWN_POSITIONS, DROPDOWN_POSITIONS_RIGHT, DROPDOWN_POSITIONS_TOP, DsAccordion, DsAccordionItem, DsAlert, DsAvatar, DsBadge, DsBreadcrumb, DsButton, DsCalendar, DsCard, DsCarousel, DsCheckbox, DsCheckboxList, DsChip, DsColorPicker, DsCombobox, DsContainer, DsDatePicker, DsDivider, DsDrawer, DsDropdown, DsEmpty, DsEntityChip, DsEntityPicker, DsFileUpload, DsI18nService, DsInputField, DsInputNumber, DsInputTextarea, DsList, DsListGroup, DsListItem, DsMenu, DsModalComponent, DsNavList, DsNotificationContainerComponent, DsNotificationItemComponent, DsNotificationService, DsPagination, DsPasswordStrength, DsPopover, DsPopoverComponent, DsProgressBar, DsRadioGroup, DsRating, DsSearchInput, DsSegmentedControl, DsSelect, DsSidebar, DsSidebarFooterItemComponent, DsSidebarItemComponent, DsSkeleton, DsSlider, DsStepper, DsTable, DsTabs, DsTimePicker, DsTimeline, DsToastComponent, DsToastContainerComponent, DsToastService, DsToggle, DsTooltip, DsTooltipComponent, DsTransfer, DsTree, IconRegistryService, POPOVER_POSITIONS, PrimitiveBadge, PrimitiveButton, PrimitiveCheckbox, PrimitiveInput, PrimitiveRadio, PrimitiveTextarea, PrimitiveToggle, SIDEBAR_POPOVER_POSITIONS_LEFT, SIDEBAR_POPOVER_POSITIONS_RIGHT, TOOLTIP_POSITIONS, generateId, generateShortId };
|
|
17024
17205
|
//# sourceMappingURL=kksdev-ds-angular.mjs.map
|