@kksdev/ds-angular 1.8.0 → 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 +208 -17
- package/fesm2022/kksdev-ds-angular.mjs.map +1 -1
- package/index.d.ts +102 -5
- 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, untracked, 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
|
|
@@ -5270,30 +5348,53 @@ class DsAccordion {
|
|
|
5270
5348
|
* @default false
|
|
5271
5349
|
*/
|
|
5272
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" }] : []));
|
|
5273
5357
|
/**
|
|
5274
5358
|
* Événement émis lors du changement d'état d'un item.
|
|
5275
5359
|
*/
|
|
5276
5360
|
itemChange = output();
|
|
5361
|
+
/**
|
|
5362
|
+
* Items enfants en mode template-driven.
|
|
5363
|
+
* @internal
|
|
5364
|
+
*/
|
|
5365
|
+
accordionItems = contentChildren(DsAccordionItem, ...(ngDevMode ? [{ debugName: "accordionItems" }] : []));
|
|
5366
|
+
/**
|
|
5367
|
+
* Mode de fonctionnement (auto-détecté).
|
|
5368
|
+
* - 'data' : si [items] est fourni et non vide
|
|
5369
|
+
* - 'template' : si des <ds-accordion-item> enfants sont présents
|
|
5370
|
+
*/
|
|
5371
|
+
mode = computed(() => {
|
|
5372
|
+
return this.items().length > 0 ? 'data' : 'template';
|
|
5373
|
+
}, ...(ngDevMode ? [{ debugName: "mode" }] : []));
|
|
5277
5374
|
/**
|
|
5278
5375
|
* État interne des items ouverts.
|
|
5279
5376
|
*/
|
|
5280
5377
|
_expandedIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "_expandedIds" }] : []));
|
|
5281
5378
|
/**
|
|
5282
|
-
* 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.
|
|
5283
5381
|
*/
|
|
5284
5382
|
constructor() {
|
|
5285
|
-
|
|
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 });
|
|
5286
5392
|
}
|
|
5287
5393
|
/**
|
|
5288
5394
|
* IDs des items actuellement ouverts.
|
|
5395
|
+
* Utilise uniquement l'état interne (géré par l'effet d'initialisation).
|
|
5289
5396
|
*/
|
|
5290
|
-
currentExpandedIds = computed(() => {
|
|
5291
|
-
const inputIds = this.expandedIds();
|
|
5292
|
-
const internalIds = this._expandedIds();
|
|
5293
|
-
// Fusionner les deux sources
|
|
5294
|
-
const merged = new Set([...inputIds, ...internalIds]);
|
|
5295
|
-
return merged;
|
|
5296
|
-
}, ...(ngDevMode ? [{ debugName: "currentExpandedIds" }] : []));
|
|
5397
|
+
currentExpandedIds = computed(() => this._expandedIds(), ...(ngDevMode ? [{ debugName: "currentExpandedIds" }] : []));
|
|
5297
5398
|
/**
|
|
5298
5399
|
* Vérifier si un item est ouvert.
|
|
5299
5400
|
*/
|
|
@@ -5413,13 +5514,103 @@ class DsAccordion {
|
|
|
5413
5514
|
getContentId(item) {
|
|
5414
5515
|
return `accordion-content-${item.id}`;
|
|
5415
5516
|
}
|
|
5517
|
+
// ==========================================
|
|
5518
|
+
// Mode template-driven
|
|
5519
|
+
// ==========================================
|
|
5520
|
+
/**
|
|
5521
|
+
* Initialiser les index des items enfants.
|
|
5522
|
+
*/
|
|
5523
|
+
ngAfterContentInit() {
|
|
5524
|
+
this.updateTemplateItemsIndex();
|
|
5525
|
+
}
|
|
5526
|
+
/**
|
|
5527
|
+
* Mettre à jour les index des items template.
|
|
5528
|
+
*/
|
|
5529
|
+
updateTemplateItemsIndex() {
|
|
5530
|
+
this.accordionItems().forEach((item, index) => {
|
|
5531
|
+
item._index.set(index);
|
|
5532
|
+
});
|
|
5533
|
+
}
|
|
5534
|
+
/**
|
|
5535
|
+
* Toggle un item en mode template-driven.
|
|
5536
|
+
*/
|
|
5537
|
+
toggleTemplateItem(item) {
|
|
5538
|
+
if (this.disabled() || item.disabled())
|
|
5539
|
+
return;
|
|
5540
|
+
const itemId = item.id();
|
|
5541
|
+
const isCurrentlyExpanded = this.isExpanded(itemId);
|
|
5542
|
+
if (isCurrentlyExpanded) {
|
|
5543
|
+
this._expandedIds.update((set) => {
|
|
5544
|
+
const newSet = new Set(set);
|
|
5545
|
+
newSet.delete(itemId);
|
|
5546
|
+
return newSet;
|
|
5547
|
+
});
|
|
5548
|
+
}
|
|
5549
|
+
else {
|
|
5550
|
+
if (!this.multiple()) {
|
|
5551
|
+
this._expandedIds.set(new Set([itemId]));
|
|
5552
|
+
}
|
|
5553
|
+
else {
|
|
5554
|
+
this._expandedIds.update((set) => {
|
|
5555
|
+
const newSet = new Set(set);
|
|
5556
|
+
newSet.add(itemId);
|
|
5557
|
+
return newSet;
|
|
5558
|
+
});
|
|
5559
|
+
}
|
|
5560
|
+
}
|
|
5561
|
+
item._expanded.set(!isCurrentlyExpanded);
|
|
5562
|
+
this.itemChange.emit({
|
|
5563
|
+
itemId,
|
|
5564
|
+
expanded: !isCurrentlyExpanded,
|
|
5565
|
+
expandedItems: Array.from(this._expandedIds()),
|
|
5566
|
+
});
|
|
5567
|
+
}
|
|
5568
|
+
/**
|
|
5569
|
+
* Gestion du clavier en mode template-driven.
|
|
5570
|
+
*/
|
|
5571
|
+
onTemplateKeydown(event, item, index) {
|
|
5572
|
+
const items = this.accordionItems();
|
|
5573
|
+
switch (event.key) {
|
|
5574
|
+
case 'Enter':
|
|
5575
|
+
case ' ':
|
|
5576
|
+
event.preventDefault();
|
|
5577
|
+
this.toggleTemplateItem(item);
|
|
5578
|
+
break;
|
|
5579
|
+
case 'ArrowDown':
|
|
5580
|
+
event.preventDefault();
|
|
5581
|
+
this.focusItem(Math.min(index + 1, items.length - 1));
|
|
5582
|
+
break;
|
|
5583
|
+
case 'ArrowUp':
|
|
5584
|
+
event.preventDefault();
|
|
5585
|
+
this.focusItem(Math.max(index - 1, 0));
|
|
5586
|
+
break;
|
|
5587
|
+
case 'Home':
|
|
5588
|
+
event.preventDefault();
|
|
5589
|
+
this.focusItem(0);
|
|
5590
|
+
break;
|
|
5591
|
+
case 'End':
|
|
5592
|
+
event.preventDefault();
|
|
5593
|
+
this.focusItem(items.length - 1);
|
|
5594
|
+
break;
|
|
5595
|
+
}
|
|
5596
|
+
}
|
|
5597
|
+
/**
|
|
5598
|
+
* Classes CSS pour un item template-driven.
|
|
5599
|
+
*/
|
|
5600
|
+
getTemplateItemClasses(item) {
|
|
5601
|
+
return [
|
|
5602
|
+
'ds-accordion__item',
|
|
5603
|
+
this.isExpanded(item.id()) ? 'ds-accordion__item--expanded' : '',
|
|
5604
|
+
item.disabled() ? 'ds-accordion__item--disabled' : '',
|
|
5605
|
+
].filter(Boolean);
|
|
5606
|
+
}
|
|
5416
5607
|
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:
|
|
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"] }] });
|
|
5418
5609
|
}
|
|
5419
5610
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsAccordion, decorators: [{
|
|
5420
5611
|
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:
|
|
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 }] }] } });
|
|
5423
5614
|
|
|
5424
5615
|
/**
|
|
5425
5616
|
* # DsPagination
|
|
@@ -17020,5 +17211,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
17020
17211
|
* Generated bundle index. Do not edit.
|
|
17021
17212
|
*/
|
|
17022
17213
|
|
|
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 };
|
|
17214
|
+
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
17215
|
//# sourceMappingURL=kksdev-ds-angular.mjs.map
|