@gnggln/ng-ui-system 1.0.0-alpha.2 → 1.0.0-alpha.21

package/fesm2022/gnggln-ng-ui-system-accordion.mjs

@@ -0,0 +1,409 @@
+import * as i0 from '@angular/core';
+import { inject, ChangeDetectorRef, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import * as i1 from 'lucide-angular';
+import { LucideAngularModule } from 'lucide-angular';
+
+/**
+ * Accordion configurabile, data-driven, con supporto multi/single expand,
+ * animazioni CSS, icone Lucide e template personalizzabili.
+ *
+ * Il contenuto dei pannelli viene fornito tramite un `itemTemplate`
+ * che riceve il descriptor del pannello come contesto.
+ *
+ * @selector ui-accordion
+ *
+ * @example
+ * ```html
+ * <ui-accordion
+ *   [items]="sections"
+ *   [itemTemplate]="panelTpl"
+ *   mode="single"
+ * >
+ *   <ng-template #panelTpl let-item>
+ *     @switch (item.id) {
+ *       @case ('info')    { <app-info-panel /> }
+ *       @case ('address') { <app-address-form /> }
+ *     }
+ *   </ng-template>
+ * </ui-accordion>
+ * ```
+ *
+ * @example
+ * ```typescript
+ * sections: UiAccordionDescriptor[] = [
+ *   { id: 'info', title: 'Informazioni', icon: 'info', expanded: true },
+ *   { id: 'address', title: 'Indirizzo', icon: 'map-pin' },
+ * ];
+ * ```
+ */
+class UiAccordionComponent {
+    constructor() {
+        this.cdr = inject(ChangeDetectorRef);
+        /**
+         * Fingerprint dell'ultimo stato dei descriptor.
+         * Usato da DoCheck per rilevare mutazioni in-place sulle proprieta
+         * degli item senza richiedere un nuovo riferimento dell'array.
+         */
+        this._lastFingerprint = '';
+        /**
+         * Array di descriptor dei pannelli.
+         * Pannelli con `hidden: true` vengono filtrati automaticamente.
+         *
+         * Supporta sia aggiornamenti immutabili (nuovo array) sia
+         * mutazioni in-place delle proprieta dei descriptor.
+         */
+        this.items = [];
+        /**
+         * Template per il contenuto di ogni pannello.
+         * Il contesto fornisce il descriptor come `$implicit`.
+         *
+         * @example
+         * ```html
+         * <ng-template #tpl let-item>
+         *   <p>Contenuto per: {{ item.title }}</p>
+         * </ng-template>
+         * ```
+         */
+        this.itemTemplate = null;
+        /**
+         * Template opzionale per contenuto aggiuntivo nell'header.
+         * Il contesto fornisce il descriptor come `$implicit`.
+         * Viene renderizzato all'interno del trigger, tra il titolo e il chevron.
+         */
+        this.headerTemplate = null;
+        /**
+         * Template opzionale per azioni nell'header del pannello.
+         * Posizionato tra il trigger e il chevron, al di fuori del button
+         * per consentire elementi interattivi (es. pulsanti duplica/elimina).
+         * Il contesto fornisce il descriptor come `$implicit`.
+         */
+        this.actionsTemplate = null;
+        /**
+         * Modalita di espansione.
+         * - `multi`: piu pannelli aperti contemporaneamente
+         * - `single`: un solo pannello aperto alla volta
+         */
+        this.mode = 'multi';
+        /** Label accessibile per il gruppo accordion. */
+        this.ariaLabel = 'Accordion';
+        /** Emesso quando un pannello viene aperto o chiuso. */
+        this.itemToggled = new EventEmitter();
+    }
+    /**
+     * Rileva mutazioni in-place sulle proprieta dei descriptor.
+     * Confronta un fingerprint leggero dello stato corrente con quello
+     * precedente e, se diverso, forza un ciclo di change detection.
+     *
+     * Questo permette al consumatore di fare sia:
+     * - `items[2].hidden = true`  (mutazione in-place)
+     * - `items = [...newItems]`   (nuovo riferimento)
+     */
+    ngDoCheck() {
+        const fp = this.computeFingerprint();
+        if (fp !== this._lastFingerprint) {
+            this._lastFingerprint = fp;
+            this.cdr.markForCheck();
+        }
+    }
+    /** Pannelli visibili (non hidden). */
+    get visibleItems() {
+        return this.items.filter((i) => !i.hidden);
+    }
+    /** Alterna l'espansione di un pannello. */
+    toggle(item) {
+        if (item.disabled)
+            return;
+        const willExpand = !item.expanded;
+        // In modalita single, chiudi tutti gli altri
+        if (willExpand && this.mode === 'single') {
+            this.items.forEach((i) => {
+                if (i !== item && i.expanded) {
+                    i.expanded = false;
+                    this.itemToggled.emit({ item: i, expanded: false });
+                }
+            });
+        }
+        item.expanded = willExpand;
+        this.itemToggled.emit({ item, expanded: willExpand });
+    }
+    /** Apre un pannello specifico per id. */
+    open(id) {
+        const item = this.items.find((i) => i.id === id);
+        if (item && !item.expanded && !item.disabled) {
+            this.toggle(item);
+        }
+    }
+    /** Chiude un pannello specifico per id. */
+    close(id) {
+        const item = this.items.find((i) => i.id === id);
+        if (item && item.expanded) {
+            item.expanded = false;
+            this.itemToggled.emit({ item, expanded: false });
+        }
+    }
+    /** Apre tutti i pannelli (solo in modalita multi). */
+    openAll() {
+        if (this.mode === 'single')
+            return;
+        this.items.forEach((item) => {
+            if (!item.expanded && !item.disabled && !item.hidden) {
+                item.expanded = true;
+                this.itemToggled.emit({ item, expanded: true });
+            }
+        });
+    }
+    /** Chiude tutti i pannelli. */
+    closeAll() {
+        this.items.forEach((item) => {
+            if (item.expanded) {
+                item.expanded = false;
+                this.itemToggled.emit({ item, expanded: false });
+            }
+        });
+    }
+    /** @internal Classi CSS per il pannello. */
+    getPanelClasses(item) {
+        return [
+            'ui-accordion__panel',
+            item.expanded ? 'ui-accordion__panel--expanded' : '',
+            item.disabled ? 'ui-accordion__panel--disabled' : '',
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    /** @internal Sposta il focus al primo header. */
+    focusFirst(event) {
+        event.preventDefault();
+        const headers = this.getHeaders();
+        headers[0]?.focus();
+    }
+    /** @internal Sposta il focus all'ultimo header. */
+    focusLast(event) {
+        event.preventDefault();
+        const headers = this.getHeaders();
+        headers[headers.length - 1]?.focus();
+    }
+    /** @internal Recupera tutti i trigger button del DOM. */
+    getHeaders() {
+        return Array.from(document.querySelectorAll('.ui-accordion__trigger:not(:disabled)'));
+    }
+    /**
+     * @internal Calcola un fingerprint leggero basato sulle proprieta
+     * reattive dei descriptor (quelle che influenzano il rendering).
+     */
+    computeFingerprint() {
+        return this.items.map((i) => `${i.id}:${i.hidden ?? 0}:${i.disabled ?? 0}:${i.expanded ?? 0}:${i.title}`).join('|');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: UiAccordionComponent, isStandalone: true, selector: "ui-accordion", inputs: { items: "items", itemTemplate: "itemTemplate", headerTemplate: "headerTemplate", actionsTemplate: "actionsTemplate", mode: "mode", ariaLabel: "ariaLabel" }, outputs: { itemToggled: "itemToggled" }, host: { classAttribute: "ui-accordion-host" }, ngImport: i0, template: `
+    @for (item of visibleItems; track item.id) {
+      <div
+        [class]="getPanelClasses(item)"
+        [id]="'ui-accordion-' + item.id"
+      >
+        <!-- Header: div wrapper per ospitare trigger + azioni + chevron -->
+        <div
+          class="ui-accordion__header"
+          [class.ui-accordion__header--expanded]="item.expanded"
+          [class.ui-accordion__header--disabled]="item.disabled"
+          (click)="!item.disabled && toggle(item)"
+        >
+          <button
+            class="ui-accordion__trigger"
+            [disabled]="item.disabled"
+            [attr.aria-expanded]="item.expanded"
+            [attr.aria-controls]="'ui-accordion-body-' + item.id"
+            [attr.id]="'ui-accordion-header-' + item.id"
+            type="button"
+            (keydown.home)="focusFirst($event)"
+            (keydown.end)="focusLast($event)"
+          >
+            <div class="ui-accordion__header-content">
+              @if (item.icon) {
+                <lucide-icon
+                  class="ui-accordion__icon"
+                  [name]="item.icon"
+                  [size]="18"
+                  aria-hidden="true"
+                />
+              }
+              <span class="ui-accordion__title">{{ item.title }}</span>
+              @if (item.subtitle) {
+                <span class="ui-accordion__subtitle">{{ item.subtitle }}</span>
+              }
+            </div>
+
+            @if (headerTemplate) {
+              <div class="ui-accordion__header-extra">
+                <ng-container
+                  [ngTemplateOutlet]="headerTemplate"
+                  [ngTemplateOutletContext]="{ $implicit: item }"
+                />
+              </div>
+            }
+          </button>
+
+          @if (actionsTemplate) {
+            <div
+              class="ui-accordion__actions"
+              role="group"
+              aria-label="Azioni pannello"
+              (click)="$event.stopPropagation()"
+            >
+              <ng-container
+                [ngTemplateOutlet]="actionsTemplate"
+                [ngTemplateOutletContext]="{ $implicit: item }"
+              />
+            </div>
+          }
+
+          <lucide-icon
+            class="ui-accordion__chevron"
+            [class.ui-accordion__chevron--rotated]="item.expanded"
+            name="chevron-down"
+            [size]="16"
+            aria-hidden="true"
+          />
+        </div>
+
+        <!-- Body (animazione CSS grid) -->
+        <div
+          class="ui-accordion__body-wrapper"
+          [class.ui-accordion__body-wrapper--open]="item.expanded"
+          role="region"
+          [attr.id]="'ui-accordion-body-' + item.id"
+          [attr.aria-labelledby]="'ui-accordion-header-' + item.id"
+        >
+          <div class="ui-accordion__body">
+            @if (item.expanded && itemTemplate) {
+              <ng-container
+                [ngTemplateOutlet]="itemTemplate"
+                [ngTemplateOutletContext]="{ $implicit: item }"
+              />
+            }
+          </div>
+        </div>
+      </div>
+    }
+  `, isInline: true, styles: [".ui-accordion-host{display:flex;flex-direction:column;gap:var(--ui-spacing-2)}.ui-accordion__panel{border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-lg);background:var(--ui-color-surface);overflow:hidden;transition:box-shadow var(--ui-transition-fast)}.ui-accordion__panel--expanded{box-shadow:var(--ui-shadow-xs)}.ui-accordion__panel--disabled{opacity:.55}.ui-accordion__header{display:flex;align-items:center;width:100%;padding:var(--ui-spacing-4) var(--ui-spacing-5);gap:var(--ui-spacing-3);cursor:pointer;transition:background-color var(--ui-transition-fast),color var(--ui-transition-fast)}.ui-accordion__header:hover:not(.ui-accordion__header--disabled){background:var(--ui-color-surface-hover)}.ui-accordion__header--expanded{background:var(--ui-color-bg-subtle);border-bottom:1px solid var(--ui-color-border)}.ui-accordion__header--disabled{cursor:not-allowed}.ui-accordion__trigger{appearance:none;border:none;background:transparent;cursor:pointer;font-family:var(--ui-font-family);padding:0;margin:0;flex:1;display:flex;align-items:center;gap:var(--ui-spacing-3);text-align:left;min-width:0;color:inherit}.ui-accordion__trigger:focus{outline:none}.ui-accordion__trigger:focus-visible{outline:var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);outline-offset:var(--ui-focus-ring-offset)}.ui-accordion__trigger:disabled{cursor:not-allowed}.ui-accordion__header-content{flex:1;display:flex;align-items:center;gap:var(--ui-spacing-2);min-width:0}.ui-accordion__icon{color:var(--ui-color-primary);flex-shrink:0}.ui-accordion__title{font-size:var(--ui-font-size-sm);font-weight:var(--ui-font-weight-semibold);color:var(--ui-color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-accordion__subtitle{font-size:var(--ui-font-size-xs);color:var(--ui-color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-accordion__header-extra{flex-shrink:0}.ui-accordion__actions{display:flex;align-items:center;gap:var(--ui-spacing-1);flex-shrink:0}.ui-accordion__chevron{flex-shrink:0;color:var(--ui-color-text-muted);transition:transform var(--ui-transition-normal)}.ui-accordion__chevron--rotated{transform:rotate(180deg)}.ui-accordion__body-wrapper{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--ui-transition-normal)}.ui-accordion__body-wrapper--open{grid-template-rows:1fr}.ui-accordion__body{overflow:hidden;padding:0 var(--ui-spacing-5);transition:padding var(--ui-transition-normal)}.ui-accordion__body-wrapper--open .ui-accordion__body{padding:var(--ui-spacing-5)}@media (max-width: 768px){.ui-accordion__header{padding:var(--ui-spacing-3) var(--ui-spacing-4)}.ui-accordion__body-wrapper--open .ui-accordion__body{padding:var(--ui-spacing-4)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiAccordionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-accordion', standalone: true, imports: [NgTemplateOutlet, LucideAngularModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'ui-accordion-host' }, template: `
+    @for (item of visibleItems; track item.id) {
+      <div
+        [class]="getPanelClasses(item)"
+        [id]="'ui-accordion-' + item.id"
+      >
+        <!-- Header: div wrapper per ospitare trigger + azioni + chevron -->
+        <div
+          class="ui-accordion__header"
+          [class.ui-accordion__header--expanded]="item.expanded"
+          [class.ui-accordion__header--disabled]="item.disabled"
+          (click)="!item.disabled && toggle(item)"
+        >
+          <button
+            class="ui-accordion__trigger"
+            [disabled]="item.disabled"
+            [attr.aria-expanded]="item.expanded"
+            [attr.aria-controls]="'ui-accordion-body-' + item.id"
+            [attr.id]="'ui-accordion-header-' + item.id"
+            type="button"
+            (keydown.home)="focusFirst($event)"
+            (keydown.end)="focusLast($event)"
+          >
+            <div class="ui-accordion__header-content">
+              @if (item.icon) {
+                <lucide-icon
+                  class="ui-accordion__icon"
+                  [name]="item.icon"
+                  [size]="18"
+                  aria-hidden="true"
+                />
+              }
+              <span class="ui-accordion__title">{{ item.title }}</span>
+              @if (item.subtitle) {
+                <span class="ui-accordion__subtitle">{{ item.subtitle }}</span>
+              }
+            </div>
+
+            @if (headerTemplate) {
+              <div class="ui-accordion__header-extra">
+                <ng-container
+                  [ngTemplateOutlet]="headerTemplate"
+                  [ngTemplateOutletContext]="{ $implicit: item }"
+                />
+              </div>
+            }
+          </button>
+
+          @if (actionsTemplate) {
+            <div
+              class="ui-accordion__actions"
+              role="group"
+              aria-label="Azioni pannello"
+              (click)="$event.stopPropagation()"
+            >
+              <ng-container
+                [ngTemplateOutlet]="actionsTemplate"
+                [ngTemplateOutletContext]="{ $implicit: item }"
+              />
+            </div>
+          }
+
+          <lucide-icon
+            class="ui-accordion__chevron"
+            [class.ui-accordion__chevron--rotated]="item.expanded"
+            name="chevron-down"
+            [size]="16"
+            aria-hidden="true"
+          />
+        </div>
+
+        <!-- Body (animazione CSS grid) -->
+        <div
+          class="ui-accordion__body-wrapper"
+          [class.ui-accordion__body-wrapper--open]="item.expanded"
+          role="region"
+          [attr.id]="'ui-accordion-body-' + item.id"
+          [attr.aria-labelledby]="'ui-accordion-header-' + item.id"
+        >
+          <div class="ui-accordion__body">
+            @if (item.expanded && itemTemplate) {
+              <ng-container
+                [ngTemplateOutlet]="itemTemplate"
+                [ngTemplateOutletContext]="{ $implicit: item }"
+              />
+            }
+          </div>
+        </div>
+      </div>
+    }
+  `, styles: [".ui-accordion-host{display:flex;flex-direction:column;gap:var(--ui-spacing-2)}.ui-accordion__panel{border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-lg);background:var(--ui-color-surface);overflow:hidden;transition:box-shadow var(--ui-transition-fast)}.ui-accordion__panel--expanded{box-shadow:var(--ui-shadow-xs)}.ui-accordion__panel--disabled{opacity:.55}.ui-accordion__header{display:flex;align-items:center;width:100%;padding:var(--ui-spacing-4) var(--ui-spacing-5);gap:var(--ui-spacing-3);cursor:pointer;transition:background-color var(--ui-transition-fast),color var(--ui-transition-fast)}.ui-accordion__header:hover:not(.ui-accordion__header--disabled){background:var(--ui-color-surface-hover)}.ui-accordion__header--expanded{background:var(--ui-color-bg-subtle);border-bottom:1px solid var(--ui-color-border)}.ui-accordion__header--disabled{cursor:not-allowed}.ui-accordion__trigger{appearance:none;border:none;background:transparent;cursor:pointer;font-family:var(--ui-font-family);padding:0;margin:0;flex:1;display:flex;align-items:center;gap:var(--ui-spacing-3);text-align:left;min-width:0;color:inherit}.ui-accordion__trigger:focus{outline:none}.ui-accordion__trigger:focus-visible{outline:var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);outline-offset:var(--ui-focus-ring-offset)}.ui-accordion__trigger:disabled{cursor:not-allowed}.ui-accordion__header-content{flex:1;display:flex;align-items:center;gap:var(--ui-spacing-2);min-width:0}.ui-accordion__icon{color:var(--ui-color-primary);flex-shrink:0}.ui-accordion__title{font-size:var(--ui-font-size-sm);font-weight:var(--ui-font-weight-semibold);color:var(--ui-color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-accordion__subtitle{font-size:var(--ui-font-size-xs);color:var(--ui-color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-accordion__header-extra{flex-shrink:0}.ui-accordion__actions{display:flex;align-items:center;gap:var(--ui-spacing-1);flex-shrink:0}.ui-accordion__chevron{flex-shrink:0;color:var(--ui-color-text-muted);transition:transform var(--ui-transition-normal)}.ui-accordion__chevron--rotated{transform:rotate(180deg)}.ui-accordion__body-wrapper{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--ui-transition-normal)}.ui-accordion__body-wrapper--open{grid-template-rows:1fr}.ui-accordion__body{overflow:hidden;padding:0 var(--ui-spacing-5);transition:padding var(--ui-transition-normal)}.ui-accordion__body-wrapper--open .ui-accordion__body{padding:var(--ui-spacing-5)}@media (max-width: 768px){.ui-accordion__header{padding:var(--ui-spacing-3) var(--ui-spacing-4)}.ui-accordion__body-wrapper--open .ui-accordion__body{padding:var(--ui-spacing-4)}}\n"] }]
+        }], propDecorators: { items: [{
+                type: Input
+            }], itemTemplate: [{
+                type: Input
+            }], headerTemplate: [{
+                type: Input
+            }], actionsTemplate: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], itemToggled: [{
+                type: Output
+            }] } });
+
+/**
+ * Bootstrap del secondary entry `@gnggln/ng-ui-system/accordion`. Accordion.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { UiAccordionComponent };
+//# sourceMappingURL=gnggln-ng-ui-system-accordion.mjs.map

package/fesm2022/gnggln-ng-ui-system-accordion.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"gnggln-ng-ui-system-accordion.mjs","sources":["../../../packages/ng-ui-system/src/lib/components/accordion/accordion.component.ts","../../../packages/ng-ui-system/src/entry-accordion.ts","../../../packages/ng-ui-system/src/gnggln-ng-ui-system-accordion.ts"],"sourcesContent":["import {\r\n  Component,\r\n  Input,\r\n  Output,\r\n  EventEmitter,\r\n  ChangeDetectionStrategy,\r\n  ChangeDetectorRef,\r\n  ViewEncapsulation,\r\n  DoCheck,\r\n  TemplateRef,\r\n  inject,\r\n} from '@angular/core';\r\nimport { NgTemplateOutlet } from '@angular/common';\r\nimport { LucideAngularModule } from 'lucide-angular';\r\nimport { UiAccordionDescriptor, UiAccordionToggleEvent, UiAccordionMode } from './accordion.types';\r\n\r\n/**\r\n * Accordion configurabile, data-driven, con supporto multi/single expand,\r\n * animazioni CSS, icone Lucide e template personalizzabili.\r\n *\r\n * Il contenuto dei pannelli viene fornito tramite un `itemTemplate`\r\n * che riceve il descriptor del pannello come contesto.\r\n *\r\n * @selector ui-accordion\r\n *\r\n * @example\r\n * ```html\r\n * <ui-accordion\r\n *   [items]=\"sections\"\r\n *   [itemTemplate]=\"panelTpl\"\r\n *   mode=\"single\"\r\n * >\r\n *   <ng-template #panelTpl let-item>\r\n *     @switch (item.id) {\r\n *       @case ('info')    { <app-info-panel /> }\r\n *       @case ('address') { <app-address-form /> }\r\n *     }\r\n *   </ng-template>\r\n * </ui-accordion>\r\n * ```\r\n *\r\n * @example\r\n * ```typescript\r\n * sections: UiAccordionDescriptor[] = [\r\n *   { id: 'info', title: 'Informazioni', icon: 'info', expanded: true },\r\n *   { id: 'address', title: 'Indirizzo', icon: 'map-pin' },\r\n * ];\r\n * ```\r\n */\r\n@Component({\r\n  selector: 'ui-accordion',\r\n  standalone: true,\r\n  imports: [NgTemplateOutlet, LucideAngularModule],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.None,\r\n  host: { class: 'ui-accordion-host' },\r\n  template: `\r\n    @for (item of visibleItems; track item.id) {\r\n      <div\r\n        [class]=\"getPanelClasses(item)\"\r\n        [id]=\"'ui-accordion-' + item.id\"\r\n      >\r\n        <!-- Header: div wrapper per ospitare trigger + azioni + chevron -->\r\n        <div\r\n          class=\"ui-accordion__header\"\r\n          [class.ui-accordion__header--expanded]=\"item.expanded\"\r\n          [class.ui-accordion__header--disabled]=\"item.disabled\"\r\n          (click)=\"!item.disabled && toggle(item)\"\r\n        >\r\n          <button\r\n            class=\"ui-accordion__trigger\"\r\n            [disabled]=\"item.disabled\"\r\n            [attr.aria-expanded]=\"item.expanded\"\r\n            [attr.aria-controls]=\"'ui-accordion-body-' + item.id\"\r\n            [attr.id]=\"'ui-accordion-header-' + item.id\"\r\n            type=\"button\"\r\n            (keydown.home)=\"focusFirst($event)\"\r\n            (keydown.end)=\"focusLast($event)\"\r\n          >\r\n            <div class=\"ui-accordion__header-content\">\r\n              @if (item.icon) {\r\n                <lucide-icon\r\n                  class=\"ui-accordion__icon\"\r\n                  [name]=\"item.icon\"\r\n                  [size]=\"18\"\r\n                  aria-hidden=\"true\"\r\n                />\r\n              }\r\n              <span class=\"ui-accordion__title\">{{ item.title }}</span>\r\n              @if (item.subtitle) {\r\n                <span class=\"ui-accordion__subtitle\">{{ item.subtitle }}</span>\r\n              }\r\n            </div>\r\n\r\n            @if (headerTemplate) {\r\n              <div class=\"ui-accordion__header-extra\">\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"headerTemplate\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: item }\"\r\n                />\r\n              </div>\r\n            }\r\n          </button>\r\n\r\n          @if (actionsTemplate) {\r\n            <div\r\n              class=\"ui-accordion__actions\"\r\n              role=\"group\"\r\n              aria-label=\"Azioni pannello\"\r\n              (click)=\"$event.stopPropagation()\"\r\n            >\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"actionsTemplate\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"\r\n              />\r\n            </div>\r\n          }\r\n\r\n          <lucide-icon\r\n            class=\"ui-accordion__chevron\"\r\n            [class.ui-accordion__chevron--rotated]=\"item.expanded\"\r\n            name=\"chevron-down\"\r\n            [size]=\"16\"\r\n            aria-hidden=\"true\"\r\n          />\r\n        </div>\r\n\r\n        <!-- Body (animazione CSS grid) -->\r\n        <div\r\n          class=\"ui-accordion__body-wrapper\"\r\n          [class.ui-accordion__body-wrapper--open]=\"item.expanded\"\r\n          role=\"region\"\r\n          [attr.id]=\"'ui-accordion-body-' + item.id\"\r\n          [attr.aria-labelledby]=\"'ui-accordion-header-' + item.id\"\r\n        >\r\n          <div class=\"ui-accordion__body\">\r\n            @if (item.expanded && itemTemplate) {\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"itemTemplate\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"\r\n              />\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n  `,\r\n  styleUrl: './accordion.component.scss',\r\n})\r\nexport class UiAccordionComponent implements DoCheck {\r\n  private readonly cdr = inject(ChangeDetectorRef);\r\n\r\n  /**\r\n   * Fingerprint dell'ultimo stato dei descriptor.\r\n   * Usato da DoCheck per rilevare mutazioni in-place sulle proprieta\r\n   * degli item senza richiedere un nuovo riferimento dell'array.\r\n   */\r\n  private _lastFingerprint = '';\r\n\r\n  /**\r\n   * Array di descriptor dei pannelli.\r\n   * Pannelli con `hidden: true` vengono filtrati automaticamente.\r\n   *\r\n   * Supporta sia aggiornamenti immutabili (nuovo array) sia\r\n   * mutazioni in-place delle proprieta dei descriptor.\r\n   */\r\n  @Input() items: UiAccordionDescriptor[] = [];\r\n\r\n  /**\r\n   * Template per il contenuto di ogni pannello.\r\n   * Il contesto fornisce il descriptor come `$implicit`.\r\n   *\r\n   * @example\r\n   * ```html\r\n   * <ng-template #tpl let-item>\r\n   *   <p>Contenuto per: {{ item.title }}</p>\r\n   * </ng-template>\r\n   * ```\r\n   */\r\n  @Input() itemTemplate: TemplateRef<unknown> | null = null;\r\n\r\n  /**\r\n   * Template opzionale per contenuto aggiuntivo nell'header.\r\n   * Il contesto fornisce il descriptor come `$implicit`.\r\n   * Viene renderizzato all'interno del trigger, tra il titolo e il chevron.\r\n   */\r\n  @Input() headerTemplate: TemplateRef<unknown> | null = null;\r\n\r\n  /**\r\n   * Template opzionale per azioni nell'header del pannello.\r\n   * Posizionato tra il trigger e il chevron, al di fuori del button\r\n   * per consentire elementi interattivi (es. pulsanti duplica/elimina).\r\n   * Il contesto fornisce il descriptor come `$implicit`.\r\n   */\r\n  @Input() actionsTemplate: TemplateRef<unknown> | null = null;\r\n\r\n  /**\r\n   * Modalita di espansione.\r\n   * - `multi`: piu pannelli aperti contemporaneamente\r\n   * - `single`: un solo pannello aperto alla volta\r\n   */\r\n  @Input() mode: UiAccordionMode = 'multi';\r\n\r\n  /** Label accessibile per il gruppo accordion. */\r\n  @Input() ariaLabel = 'Accordion';\r\n\r\n  /** Emesso quando un pannello viene aperto o chiuso. */\r\n  @Output() itemToggled = new EventEmitter<UiAccordionToggleEvent>();\r\n\r\n  /**\r\n   * Rileva mutazioni in-place sulle proprieta dei descriptor.\r\n   * Confronta un fingerprint leggero dello stato corrente con quello\r\n   * precedente e, se diverso, forza un ciclo di change detection.\r\n   *\r\n   * Questo permette al consumatore di fare sia:\r\n   * - `items[2].hidden = true`  (mutazione in-place)\r\n   * - `items = [...newItems]`   (nuovo riferimento)\r\n   */\r\n  ngDoCheck(): void {\r\n    const fp = this.computeFingerprint();\r\n    if (fp !== this._lastFingerprint) {\r\n      this._lastFingerprint = fp;\r\n      this.cdr.markForCheck();\r\n    }\r\n  }\r\n\r\n  /** Pannelli visibili (non hidden). */\r\n  get visibleItems(): UiAccordionDescriptor[] {\r\n    return this.items.filter((i) => !i.hidden);\r\n  }\r\n\r\n  /** Alterna l'espansione di un pannello. */\r\n  toggle(item: UiAccordionDescriptor): void {\r\n    if (item.disabled) return;\r\n\r\n    const willExpand = !item.expanded;\r\n\r\n    // In modalita single, chiudi tutti gli altri\r\n    if (willExpand && this.mode === 'single') {\r\n      this.items.forEach((i) => {\r\n        if (i !== item && i.expanded) {\r\n          i.expanded = false;\r\n          this.itemToggled.emit({ item: i, expanded: false });\r\n        }\r\n      });\r\n    }\r\n\r\n    item.expanded = willExpand;\r\n    this.itemToggled.emit({ item, expanded: willExpand });\r\n  }\r\n\r\n  /** Apre un pannello specifico per id. */\r\n  open(id: string): void {\r\n    const item = this.items.find((i) => i.id === id);\r\n    if (item && !item.expanded && !item.disabled) {\r\n      this.toggle(item);\r\n    }\r\n  }\r\n\r\n  /** Chiude un pannello specifico per id. */\r\n  close(id: string): void {\r\n    const item = this.items.find((i) => i.id === id);\r\n    if (item && item.expanded) {\r\n      item.expanded = false;\r\n      this.itemToggled.emit({ item, expanded: false });\r\n    }\r\n  }\r\n\r\n  /** Apre tutti i pannelli (solo in modalita multi). */\r\n  openAll(): void {\r\n    if (this.mode === 'single') return;\r\n    this.items.forEach((item) => {\r\n      if (!item.expanded && !item.disabled && !item.hidden) {\r\n        item.expanded = true;\r\n        this.itemToggled.emit({ item, expanded: true });\r\n      }\r\n    });\r\n  }\r\n\r\n  /** Chiude tutti i pannelli. */\r\n  closeAll(): void {\r\n    this.items.forEach((item) => {\r\n      if (item.expanded) {\r\n        item.expanded = false;\r\n        this.itemToggled.emit({ item, expanded: false });\r\n      }\r\n    });\r\n  }\r\n\r\n  /** @internal Classi CSS per il pannello. */\r\n  getPanelClasses(item: UiAccordionDescriptor): string {\r\n    return [\r\n      'ui-accordion__panel',\r\n      item.expanded ? 'ui-accordion__panel--expanded' : '',\r\n      item.disabled ? 'ui-accordion__panel--disabled' : '',\r\n    ]\r\n      .filter(Boolean)\r\n      .join(' ');\r\n  }\r\n\r\n  /** @internal Sposta il focus al primo header. */\r\n  focusFirst(event: Event): void {\r\n    event.preventDefault();\r\n    const headers = this.getHeaders();\r\n    headers[0]?.focus();\r\n  }\r\n\r\n  /** @internal Sposta il focus all'ultimo header. */\r\n  focusLast(event: Event): void {\r\n    event.preventDefault();\r\n    const headers = this.getHeaders();\r\n    headers[headers.length - 1]?.focus();\r\n  }\r\n\r\n  /** @internal Recupera tutti i trigger button del DOM. */\r\n  private getHeaders(): HTMLButtonElement[] {\r\n    return Array.from(document.querySelectorAll<HTMLButtonElement>('.ui-accordion__trigger:not(:disabled)'));\r\n  }\r\n\r\n  /**\r\n   * @internal Calcola un fingerprint leggero basato sulle proprieta\r\n   * reattive dei descriptor (quelle che influenzano il rendering).\r\n   */\r\n  private computeFingerprint(): string {\r\n    return this.items.map((i) => `${i.id}:${i.hidden ?? 0}:${i.disabled ?? 0}:${i.expanded ?? 0}:${i.title}`).join('|');\r\n  }\r\n}\r\n","/**\n * Bootstrap del secondary entry `@gnggln/ng-ui-system/accordion`. Accordion.\n */\nexport * from './lib/components/accordion/index';\n\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './entry-accordion';\n"],"names":[],"mappings":"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"}