import { NgClass, NgStyle } from '@angular/common';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { RouterLink } from '@angular/router';
import { IonAvatar, IonButton, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonNote, IonSpinner, } from '@ionic/angular/standalone';
import { resolveColor } from '../../../shared/utils/styles';
import { ComponentStates } from '../../types';
import * as i0 from "@angular/core";
import * as i1 from "../../../services/icons.service";
/**
 * ItemListComponent
 *
 * Componente de lista reutilizable para mostrar una colección de elementos con diferentes modos de visualización (texto, subtítulo, avatar, icono, ruta, acciones).
 * Permite acciones por elemento, indicadores de no leído, y personalización de estilos.
 *
 * @example
 * <val-item-list [props]="{ title: 'Usuarios', items: [{ text: 'Juan', mode: 'avatar', image: 'avatar.jpg' }] }" (onClick)="handleClick($event)"></val-item-list>
 *
 * @input props {ListMetadata} - Metadatos de la lista y sus elementos.
 * @output onClick - Emite el token del elemento clicado.
 * @output onActionClick - Emite el token de la acción clicada en un elemento.
 */
export class ItemListComponent {
    constructor(icon) {
        this.states = ComponentStates;
        this.defaultColor = 'primary';
        /**
         * Evento emitido al hacer click en un elemento de la lista.
         */
        this.onClick = new EventEmitter();
        /**
         * Evento emitido al hacer click en una acción de un elemento.
         */
        this.onActionClick = new EventEmitter();
    }
    ngOnInit() { }
    /**
     * Emite el token del elemento clicado.
     * @param token Token del elemento
     */
    clickHandler(token) {
        this.onClick.emit(token);
    }
    /**
     * Emite el token de la acción clicada.
     * @param token Token de la acción
     */
    onActionClickHandler(token) {
        this.onActionClick.emit(token);
    }
    /**
     * Devuelve el color de borde de la lista.
     */
    color() {
        return resolveColor(this.props.color || this.defaultColor);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ItemListComponent, deps: [{ token: i1.IconService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ItemListComponent, isStandalone: true, selector: "val-item-list", inputs: { props: "props" }, outputs: { onClick: "onClick", onActionClick: "onActionClick" }, ngImport: i0, template: `
    <ion-list
      [inset]="props.rounded"
      [class.shadowed]="props.shadowed"
      [class.bordered]="props.bordered"
      [style.borderColor]="this.color()"
    >
      @if (props.title) {
        <ion-list-header>
          <ion-label>{{ props.title }}</ion-label>
        </ion-list-header>
      }
      @for (item of props.items; track item.token) {
        @if (item.mode == 'justext') {
          <ion-item
            [lines]="item.lines"
            [button]="item.clickable"
            [disabled]="item.disabled"
            (click)="clickHandler(item.token)"
          >
            @if (item.unreadIndicator) {
              <div class="unread-indicator-wrapper" slot="start">
                <div class="unread-indicator"></div>
              </div>
            }

            <ion-label [ngClass]="{ 'ion-text-nowrap': item.ellipsis }">
              <h2>{{ item.text }}</h2>

              @if (item.comments) {
                <ion-note color="medium"> {{ item.comments }} </ion-note>
              }

              @if (item.subtitle) {
                <p>{{ item.subtitle }}</p>
              }
            </ion-label>

            @if (item.endNote) {
              <ion-note slot="end">{{ item.endNote }}</ion-note>
            }
          </ion-item>
        }

        @if (item.mode == 'actionable') {
          <ion-item [lines]="item.lines" [button]="item.clickable" [disabled]="item.disabled">
            @if (item.unreadIndicator) {
              <div class="unread-indicator-wrapper" slot="start">
                <div class="unread-indicator"></div>
              </div>
            }

            <ion-label [ngClass]="{ 'ion-text-nowrap': item.ellipsis }">
              <h2>{{ item.text }}</h2>

              @if (item.endNote) {
                <h3>{{ item.endNote }}</h3>
              }

              @if (item.subtitle) {
                <ion-note color="medium"> {{ item.subtitle }} </ion-note>
              }

              @if (item.comments) {
                <ion-note color="medium"> {{ item.comments }} </ion-note>
              }
            </ion-label>

            @if (item.actions) {
              @for (action of item.actions; track action.token) {
                <ion-button
                  fill="outline"
                  color="dark"
                  slot="end"
                  [disabled]="action.state === states.WORKING"
                  (click)="onActionClickHandler(action.token)"
                >
                  @if (action.state !== states.WORKING) {
                    @if (action.icon) {
                      <ion-icon aria-hidden="true" [name]="action.icon" size="medium" slot="start"></ion-icon>
                    }

                    {{ action.description }}
                  }

                  @if (action.state === states.WORKING) {
                    <ion-spinner class="action-spinner" name="circular"></ion-spinner>
                  }
                </ion-button>
              }
            }
          </ion-item>
        }

        @if (item.mode == 'route') {
          <ion-item
            [lines]="item.lines"
            [button]="item.clickable"
            [disabled]="item.disabled"
            (click)="clickHandler(item.token)"
            [routerLink]="item.routerLink"
          >
            @if (item.unreadIndicator) {
              <div class="unread-indicator-wrapper" slot="start">
                <div class="unread-indicator"></div>
              </div>
            }
            @if (item.icon) {
              <ion-icon aria-hidden="true" [name]="item.icon" size="medium" slot="start"></ion-icon>
            }

            <ion-label [ngClass]="{ 'ion-text-nowrap': item.ellipsis }">
              <h2>{{ item.text }}</h2>

              @if (item.comments) {
                <ion-note color="medium"> {{ item.comments }} </ion-note>
              }
            </ion-label>
          </ion-item>
        }

        @if (item.mode == 'subtitule') {
          <ion-item
            [lines]="item.lines"
            [button]="item.clickable"
            [disabled]="item.disabled"
            (click)="clickHandler(item.token)"
          >
            @if (item.unreadIndicator) {
              <div class="unread-indicator-wrapper" slot="start">
                <div class="unread-indicator"></div>
              </div>
            }

            <ion-label [ngClass]="{ 'ion-text-nowrap': item.ellipsis }">
              <h1>{{ item.text }}</h1>
              <p>{{ item.subtitle }}</p>
            </ion-label>
          </ion-item>
        }

        @if (item.mode == 'avatar') {
          <ion-item
            [lines]="item.lines"
            [button]="item.clickable"
            [disabled]="item.disabled"
            (click)="clickHandler(item.token)"
          >
            <ion-avatar aria-hidden="true" slot="start">
              <img alt="" [src]="item.image" />
            </ion-avatar>
            <ion-label>{{ item.text }}</ion-label>
          </ion-item>
        }

        @if (item.mode == 'icon') {
          <ion-item
            [lines]="item.lines"
            [button]="item.clickable"
            [disabled]="item.disabled"
            (click)="clickHandler(item.token)"
          >
            <ion-icon aria-hidden="true" [name]="item.icon" size="medium" slot="start"></ion-icon>
            <ion-label>{{ item.text }}</ion-label>
          </ion-item>
        }
      }
    </ion-list>
  `, isInline: true, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}ion-list{margin:0!important;border-radius:1.5rem!important;padding:.25rem 0rem}ion-list-header ion-label{margin-top:1rem}ion-label{font-family:var(--ion-default-font),Arial,sans-serif}ion-note{font-family:var(--ion-default-font),Arial,sans-serif;font-weight:400}ion-button{font-family:var(--ion-default-font),Arial,sans-serif}.shadowed{box-shadow:.1875rem .625rem .5rem #1219541a}.bordered{border:1px solid}.unread-indicator{background:var(--ion-color-primary);width:.625rem;height:.625rem;border-radius:100%;position:absolute;inset-inline-start:.75rem;top:.75rem}.action-spinner{width:3.125rem;height:1rem}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonAvatar, selector: "ion-avatar" }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ItemListComponent, decorators: [{
            type: Component,
            args: [{ selector: 'val-item-list', standalone: true, imports: [
                        RouterLink,
                        NgStyle,
                        NgClass,
                        IonList,
                        IonListHeader,
                        IonLabel,
                        IonNote,
                        IonItem,
                        IonAvatar,
                        IonIcon,
                        IonButton,
                        IonSpinner,
                    ], template: `
    <ion-list
      [inset]="props.rounded"
      [class.shadowed]="props.shadowed"
      [class.bordered]="props.bordered"
      [style.borderColor]="this.color()"
    >
      @if (props.title) {
        <ion-list-header>
          <ion-label>{{ props.title }}</ion-label>
        </ion-list-header>
      }
      @for (item of props.items; track item.token) {
        @if (item.mode == 'justext') {
          <ion-item
            [lines]="item.lines"
            [button]="item.clickable"
            [disabled]="item.disabled"
            (click)="clickHandler(item.token)"
          >
            @if (item.unreadIndicator) {
              <div class="unread-indicator-wrapper" slot="start">
                <div class="unread-indicator"></div>
              </div>
            }

            <ion-label [ngClass]="{ 'ion-text-nowrap': item.ellipsis }">
              <h2>{{ item.text }}</h2>

              @if (item.comments) {
                <ion-note color="medium"> {{ item.comments }} </ion-note>
              }

              @if (item.subtitle) {
                <p>{{ item.subtitle }}</p>
              }
            </ion-label>

            @if (item.endNote) {
              <ion-note slot="end">{{ item.endNote }}</ion-note>
            }
          </ion-item>
        }

        @if (item.mode == 'actionable') {
          <ion-item [lines]="item.lines" [button]="item.clickable" [disabled]="item.disabled">
            @if (item.unreadIndicator) {
              <div class="unread-indicator-wrapper" slot="start">
                <div class="unread-indicator"></div>
              </div>
            }

            <ion-label [ngClass]="{ 'ion-text-nowrap': item.ellipsis }">
              <h2>{{ item.text }}</h2>

              @if (item.endNote) {
                <h3>{{ item.endNote }}</h3>
              }

              @if (item.subtitle) {
                <ion-note color="medium"> {{ item.subtitle }} </ion-note>
              }

              @if (item.comments) {
                <ion-note color="medium"> {{ item.comments }} </ion-note>
              }
            </ion-label>

            @if (item.actions) {
              @for (action of item.actions; track action.token) {
                <ion-button
                  fill="outline"
                  color="dark"
                  slot="end"
                  [disabled]="action.state === states.WORKING"
                  (click)="onActionClickHandler(action.token)"
                >
                  @if (action.state !== states.WORKING) {
                    @if (action.icon) {
                      <ion-icon aria-hidden="true" [name]="action.icon" size="medium" slot="start"></ion-icon>
                    }

                    {{ action.description }}
                  }

                  @if (action.state === states.WORKING) {
                    <ion-spinner class="action-spinner" name="circular"></ion-spinner>
                  }
                </ion-button>
              }
            }
          </ion-item>
        }

        @if (item.mode == 'route') {
          <ion-item
            [lines]="item.lines"
            [button]="item.clickable"
            [disabled]="item.disabled"
            (click)="clickHandler(item.token)"
            [routerLink]="item.routerLink"
          >
            @if (item.unreadIndicator) {
              <div class="unread-indicator-wrapper" slot="start">
                <div class="unread-indicator"></div>
              </div>
            }
            @if (item.icon) {
              <ion-icon aria-hidden="true" [name]="item.icon" size="medium" slot="start"></ion-icon>
            }

            <ion-label [ngClass]="{ 'ion-text-nowrap': item.ellipsis }">
              <h2>{{ item.text }}</h2>

              @if (item.comments) {
                <ion-note color="medium"> {{ item.comments }} </ion-note>
              }
            </ion-label>
          </ion-item>
        }

        @if (item.mode == 'subtitule') {
          <ion-item
            [lines]="item.lines"
            [button]="item.clickable"
            [disabled]="item.disabled"
            (click)="clickHandler(item.token)"
          >
            @if (item.unreadIndicator) {
              <div class="unread-indicator-wrapper" slot="start">
                <div class="unread-indicator"></div>
              </div>
            }

            <ion-label [ngClass]="{ 'ion-text-nowrap': item.ellipsis }">
              <h1>{{ item.text }}</h1>
              <p>{{ item.subtitle }}</p>
            </ion-label>
          </ion-item>
        }

        @if (item.mode == 'avatar') {
          <ion-item
            [lines]="item.lines"
            [button]="item.clickable"
            [disabled]="item.disabled"
            (click)="clickHandler(item.token)"
          >
            <ion-avatar aria-hidden="true" slot="start">
              <img alt="" [src]="item.image" />
            </ion-avatar>
            <ion-label>{{ item.text }}</ion-label>
          </ion-item>
        }

        @if (item.mode == 'icon') {
          <ion-item
            [lines]="item.lines"
            [button]="item.clickable"
            [disabled]="item.disabled"
            (click)="clickHandler(item.token)"
          >
            <ion-icon aria-hidden="true" [name]="item.icon" size="medium" slot="start"></ion-icon>
            <ion-label>{{ item.text }}</ion-label>
          </ion-item>
        }
      }
    </ion-list>
  `, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}ion-list{margin:0!important;border-radius:1.5rem!important;padding:.25rem 0rem}ion-list-header ion-label{margin-top:1rem}ion-label{font-family:var(--ion-default-font),Arial,sans-serif}ion-note{font-family:var(--ion-default-font),Arial,sans-serif;font-weight:400}ion-button{font-family:var(--ion-default-font),Arial,sans-serif}.shadowed{box-shadow:.1875rem .625rem .5rem #1219541a}.bordered{border:1px solid}.unread-indicator{background:var(--ion-color-primary);width:.625rem;height:.625rem;border-radius:100%;position:absolute;inset-inline-start:.75rem;top:.75rem}.action-spinner{width:3.125rem;height:1rem}\n"] }]
        }], ctorParameters: () => [{ type: i1.IconService }], propDecorators: { props: [{
                type: Input
            }], onClick: [{
                type: Output
            }], onActionClick: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 