import { Component, Input, Output, EventEmitter } from '@angular/core';
import { IonIcon } from '@ionic/angular/standalone';
import { CommonModule } from '@angular/common';
import { addIcons } from 'ionicons';
import { ellipse, checkmarkCircle, timeOutline, calendar, flag } from 'ionicons/icons';
import * as i0 from "@angular/core";
addIcons({ ellipse, checkmarkCircle, timeOutline, calendar, flag });
/**
 * val-timeline
 *
 * A timeline component for displaying chronological events.
 * Supports vertical and horizontal orientations.
 *
 * @example Basic timeline
 * <val-timeline [props]="{
 *   items: [
 *     { title: 'Order placed', date: 'Jan 1', icon: 'cart' },
 *     { title: 'Processing', date: 'Jan 2', active: true },
 *     { title: 'Shipped', date: 'Jan 3' },
 *     { title: 'Delivered', date: 'Jan 5' }
 *   ]
 * }"></val-timeline>
 *
 * @example Alternate timeline
 * <val-timeline [props]="{
 *   items: [...],
 *   alternate: true,
 *   connectorStyle: 'dashed'
 * }"></val-timeline>
 *
 * @input props: TimelineMetadata - Configuration for the timeline
 * @output itemClick: { item: TimelineItemMetadata, index: number }
 */
export class TimelineComponent {
    constructor() {
        this.itemClick = new EventEmitter();
    }
    getItemColor(item) {
        const color = item.color || this.props.color || 'primary';
        return `var(--ion-color-${color})`;
    }
    onItemClick(item, index) {
        this.itemClick.emit({ item, index });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TimelineComponent, isStandalone: true, selector: "val-timeline", inputs: { props: "props" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: `
    <div
      class="timeline"
      [class.vertical]="props.orientation !== 'horizontal'"
      [class.horizontal]="props.orientation === 'horizontal'"
      [class.alternate]="props.alternate"
    >
      @for (item of props.items; track item.token; let i = $index; let isLast = $last) {
        <div
          class="timeline-item"
          [class.active]="item.active"
          [class.left]="props.alternate && i % 2 === 0"
          [class.right]="props.alternate && i % 2 !== 0"
          (click)="onItemClick(item, i)"
        >
          <div class="timeline-marker" [style.--marker-color]="getItemColor(item)">
            @if (item.icon) {
              <ion-icon [name]="item.icon"></ion-icon>
            } @else {
              <div class="marker-dot"></div>
            }
          </div>

          @if (!isLast && props.showConnectors !== false) {
            <div
              class="timeline-connector"
              [class.dashed]="props.connectorStyle === 'dashed'"
            ></div>
          }

          <div class="timeline-content">
            @if (item.date) {
              <div class="timeline-date">{{ item.date }}</div>
            }
            <div class="timeline-title">{{ item.title }}</div>
            @if (item.content) {
              <div class="timeline-description">{{ item.content }}</div>
            }
          </div>
        </div>
      }
    </div>
  `, isInline: true, styles: [":host{display:block}.timeline{position:relative}.timeline.vertical{display:flex;flex-direction:column}.timeline.vertical .timeline-item{display:flex;position:relative;padding-bottom:24px}.timeline.vertical .timeline-item:last-child{padding-bottom:0}.timeline.vertical .timeline-marker{flex-shrink:0;z-index:1}.timeline.vertical .timeline-connector{position:absolute;left:11px;top:28px;bottom:0;width:2px;background-color:var(--ion-color-light-shade)}.timeline.vertical .timeline-connector.dashed{background:repeating-linear-gradient(to bottom,var(--ion-color-light-shade),var(--ion-color-light-shade) 4px,transparent 4px,transparent 8px)}.timeline.vertical .timeline-content{margin-left:16px;flex:1}.timeline.vertical.alternate .timeline-item{width:50%}.timeline.vertical.alternate .timeline-item.left{align-self:flex-start;flex-direction:row-reverse;text-align:right;padding-right:24px}.timeline.vertical.alternate .timeline-item.left .timeline-content{margin-left:0;margin-right:16px}.timeline.vertical.alternate .timeline-item.left .timeline-connector{left:auto;right:-13px}.timeline.vertical.alternate .timeline-item.right{align-self:flex-end;padding-left:24px}.timeline.vertical.alternate .timeline-item.right .timeline-connector{left:11px}.timeline.horizontal{display:flex;flex-direction:row;overflow-x:auto}.timeline.horizontal .timeline-item{display:flex;flex-direction:column;align-items:center;min-width:120px;position:relative}.timeline.horizontal .timeline-connector{position:absolute;top:11px;left:50%;width:100%;height:2px;background-color:var(--ion-color-light-shade)}.timeline.horizontal .timeline-connector.dashed{background:repeating-linear-gradient(to right,var(--ion-color-light-shade),var(--ion-color-light-shade) 4px,transparent 4px,transparent 8px)}.timeline.horizontal .timeline-content{margin-top:12px;text-align:center}.timeline-marker{width:24px;height:24px;border-radius:50%;background-color:var(--marker-color, var(--ion-color-primary));display:flex;align-items:center;justify-content:center;color:#fff}.timeline-marker ion-icon{font-size:.875rem}.timeline-marker .marker-dot{width:8px;height:8px;border-radius:50%;background-color:#fff}.timeline-item.active .timeline-marker{box-shadow:0 0 0 4px rgba(var(--ion-color-primary-rgb),.3)}.timeline-date{font-size:.75rem;color:var(--ion-color-medium);margin-bottom:4px}.timeline-title{font-weight:600;font-size:.875rem;color:var(--ion-text-color)}.timeline-description{font-size:.8125rem;color:var(--ion-color-medium);margin-top:4px;line-height:1.4}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineComponent, decorators: [{
            type: Component,
            args: [{ selector: 'val-timeline', standalone: true, imports: [CommonModule, IonIcon], template: `
    <div
      class="timeline"
      [class.vertical]="props.orientation !== 'horizontal'"
      [class.horizontal]="props.orientation === 'horizontal'"
      [class.alternate]="props.alternate"
    >
      @for (item of props.items; track item.token; let i = $index; let isLast = $last) {
        <div
          class="timeline-item"
          [class.active]="item.active"
          [class.left]="props.alternate && i % 2 === 0"
          [class.right]="props.alternate && i % 2 !== 0"
          (click)="onItemClick(item, i)"
        >
          <div class="timeline-marker" [style.--marker-color]="getItemColor(item)">
            @if (item.icon) {
              <ion-icon [name]="item.icon"></ion-icon>
            } @else {
              <div class="marker-dot"></div>
            }
          </div>

          @if (!isLast && props.showConnectors !== false) {
            <div
              class="timeline-connector"
              [class.dashed]="props.connectorStyle === 'dashed'"
            ></div>
          }

          <div class="timeline-content">
            @if (item.date) {
              <div class="timeline-date">{{ item.date }}</div>
            }
            <div class="timeline-title">{{ item.title }}</div>
            @if (item.content) {
              <div class="timeline-description">{{ item.content }}</div>
            }
          </div>
        </div>
      }
    </div>
  `, styles: [":host{display:block}.timeline{position:relative}.timeline.vertical{display:flex;flex-direction:column}.timeline.vertical .timeline-item{display:flex;position:relative;padding-bottom:24px}.timeline.vertical .timeline-item:last-child{padding-bottom:0}.timeline.vertical .timeline-marker{flex-shrink:0;z-index:1}.timeline.vertical .timeline-connector{position:absolute;left:11px;top:28px;bottom:0;width:2px;background-color:var(--ion-color-light-shade)}.timeline.vertical .timeline-connector.dashed{background:repeating-linear-gradient(to bottom,var(--ion-color-light-shade),var(--ion-color-light-shade) 4px,transparent 4px,transparent 8px)}.timeline.vertical .timeline-content{margin-left:16px;flex:1}.timeline.vertical.alternate .timeline-item{width:50%}.timeline.vertical.alternate .timeline-item.left{align-self:flex-start;flex-direction:row-reverse;text-align:right;padding-right:24px}.timeline.vertical.alternate .timeline-item.left .timeline-content{margin-left:0;margin-right:16px}.timeline.vertical.alternate .timeline-item.left .timeline-connector{left:auto;right:-13px}.timeline.vertical.alternate .timeline-item.right{align-self:flex-end;padding-left:24px}.timeline.vertical.alternate .timeline-item.right .timeline-connector{left:11px}.timeline.horizontal{display:flex;flex-direction:row;overflow-x:auto}.timeline.horizontal .timeline-item{display:flex;flex-direction:column;align-items:center;min-width:120px;position:relative}.timeline.horizontal .timeline-connector{position:absolute;top:11px;left:50%;width:100%;height:2px;background-color:var(--ion-color-light-shade)}.timeline.horizontal .timeline-connector.dashed{background:repeating-linear-gradient(to right,var(--ion-color-light-shade),var(--ion-color-light-shade) 4px,transparent 4px,transparent 8px)}.timeline.horizontal .timeline-content{margin-top:12px;text-align:center}.timeline-marker{width:24px;height:24px;border-radius:50%;background-color:var(--marker-color, var(--ion-color-primary));display:flex;align-items:center;justify-content:center;color:#fff}.timeline-marker ion-icon{font-size:.875rem}.timeline-marker .marker-dot{width:8px;height:8px;border-radius:50%;background-color:#fff}.timeline-item.active .timeline-marker{box-shadow:0 0 0 4px rgba(var(--ion-color-primary-rgb),.3)}.timeline-date{font-size:.75rem;color:var(--ion-color-medium);margin-bottom:4px}.timeline-title{font-weight:600;font-size:.875rem;color:var(--ion-text-color)}.timeline-description{font-size:.8125rem;color:var(--ion-color-medium);margin-top:4px;line-height:1.4}\n"] }]
        }], propDecorators: { props: [{
                type: Input
            }], itemClick: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 