import { CommonModule } from '@angular/common';
import { Component, EventEmitter, inject, Input, Output } from '@angular/core';
import { IonIcon, IonRippleEffect } from '@ionic/angular/standalone';
import { PresetService } from '../../../services/presets';
import * as i0 from "@angular/core";
const IONIC_COLORS = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
export class PillComponent {
    constructor() {
        this.presets = inject(PresetService);
        /** Pill configuration. Overrides preset values when both are set. */
        this.props = {};
        /** Emits when a clickable badge pill is activated. */
        this.pillClick = new EventEmitter();
        /** Emits when a notification-pill action button is pressed. */
        this.pillAction = new EventEmitter();
        this.resolvedProps = {};
    }
    ngOnInit() {
        this.resolveProps();
    }
    ngOnChanges(changes) {
        if (changes['preset'] || changes['props'])
            this.resolveProps();
    }
    resolveProps() {
        const presetProps = this.preset ? this.presets.get('pill', this.preset) : {};
        this.resolvedProps = { ...presetProps, ...this.props };
    }
    get isNotificationPill() {
        return !!this.resolvedProps.notification && !this.resolvedProps.label;
    }
    get isTextPill() {
        return !!this.resolvedProps.label;
    }
    get pillColor() {
        return this.resolvedProps.color || 'medium';
    }
    get pillWeight() {
        return this.resolvedProps.weight || 'medium';
    }
    get pillSize() {
        return this.resolvedProps.size || 'small';
    }
    getIconColor() {
        const c = this.resolvedProps.notification?.iconColor || 'warning';
        return IONIC_COLORS.includes(c) ? `var(--ion-color-${c})` : c;
    }
    onPillClick(event) {
        if (!this.resolvedProps.clickable)
            return;
        event?.preventDefault();
        this.pillClick.emit({ token: this.resolvedProps.token, label: this.resolvedProps.label });
    }
    onActionClick(actionToken, event) {
        event.stopPropagation();
        this.pillAction.emit({ actionToken, pillToken: this.resolvedProps.token });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PillComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PillComponent, isStandalone: true, selector: "val-pill", inputs: { preset: "preset", props: "props" }, outputs: { pillClick: "pillClick", pillAction: "pillAction" }, usesOnChanges: true, ngImport: i0, template: `
    @if (isNotificationPill) {
      <!-- Notification mode -->
      <div class="notif-pill" [attr.aria-live]="'polite'">
        @if (resolvedProps.notification?.icon) {
          <div class="notif-pill__icon-wrap" [style.color]="getIconColor()">
            <ion-icon [name]="resolvedProps.notification!.icon!" />
          </div>
        }

        <div class="notif-pill__content">
          @if (resolvedProps.notification?.time) {
            <span class="notif-pill__time">{{ resolvedProps.notification!.time }}</span>
          }
          <span class="notif-pill__title">{{ resolvedProps.notification!.title }}</span>
          @if (resolvedProps.notification?.body) {
            <span class="notif-pill__body">{{ resolvedProps.notification!.body }}</span>
          }
        </div>

        @if (resolvedProps.notification?.actions?.length) {
          <div class="notif-pill__actions">
            @for (action of resolvedProps.notification!.actions!; track action.token) {
              <button
                class="notif-pill__action-btn"
                [attr.aria-label]="action.ariaLabel || action.token"
                (click)="onActionClick(action.token, $event)"
              >
                <ion-icon [name]="action.icon" />
              </button>
            }
          </div>
        }
      </div>
    } @else if (isTextPill) {
      <!-- Badge mode -->
      <span
        class="val-pill"
        [class.val-pill--clickable]="resolvedProps.clickable"
        [class.val-pill--solid]="resolvedProps.solid"
        [class.val-pill--small]="pillSize === 'small'"
        [class.val-pill--medium]="pillSize === 'medium'"
        [class.val-pill--large]="pillSize === 'large'"
        [class.val-pill--w-normal]="pillWeight === 'normal'"
        [class.val-pill--w-medium]="pillWeight === 'medium'"
        [class.val-pill--w-bold]="pillWeight === 'bold'"
        [style.--val-pill-color]="'var(--ion-color-' + pillColor + ')'"
        [style.--val-pill-color-rgb]="'var(--ion-color-' + pillColor + '-rgb)'"
        [style.--val-pill-color-contrast]="'var(--ion-color-' + pillColor + '-contrast)'"
        [attr.role]="resolvedProps.clickable ? 'button' : null"
        [attr.tabindex]="resolvedProps.clickable ? 0 : null"
        [attr.aria-label]="resolvedProps.clickable ? resolvedProps.ariaLabel || resolvedProps.label : null"
        (click)="onPillClick()"
        (keydown.enter)="onPillClick()"
        (keydown.space)="onPillClick($event)"
      >
        @if (resolvedProps.icon) {
          <ion-icon class="val-pill__icon" [name]="resolvedProps.icon" />
        }
        <span class="val-pill__label">{{ resolvedProps.label }}</span>
      </span>
    }
  `, 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)}.val-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;white-space:nowrap;line-height:1;background:rgba(var(--val-pill-color-rgb),.12);color:var(--val-pill-color);border:.0625rem solid rgba(var(--val-pill-color-rgb),.22);transition:background .15s ease,transform .15s ease,box-shadow .15s ease}.val-pill__icon{font-size:1em;flex-shrink:0}.val-pill__label{display:inline-block}.val-pill--solid{background:var(--val-pill-color);color:var(--val-pill-color-contrast);border-color:var(--val-pill-color)}.val-pill--small{padding:5px 12px;font-size:.75rem}.val-pill--medium{padding:7px 14px;font-size:.875rem}.val-pill--large{padding:9px 18px;font-size:1rem}.val-pill--w-normal{font-weight:400}.val-pill--w-medium{font-weight:600}.val-pill--w-bold{font-weight:700}.val-pill--clickable{cursor:pointer;-webkit-tap-highlight-color:transparent}.val-pill--clickable:hover{background:rgba(var(--val-pill-color-rgb),.2);transform:translateY(-1px)}.val-pill--clickable:active{transform:translateY(0) scale(.98)}.val-pill--clickable:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--val-pill-color-rgb),.3)}.val-pill--clickable.val-pill--solid:hover{filter:brightness(1.08)}:host-context(body.dark) .val-pill:not(.val-pill--solid),:host-context(html.ion-palette-dark) .val-pill:not(.val-pill--solid),:host-context([data-theme=dark]) .val-pill:not(.val-pill--solid){background:rgba(var(--val-pill-color-rgb),.22);border-color:rgba(var(--val-pill-color-rgb),.32)}.notif-pill{display:inline-flex;align-items:center;gap:12px;padding:10px 14px;border-radius:999px;background:var(--ion-color-dark);color:var(--ion-color-dark-contrast);max-width:100%;box-sizing:border-box;box-shadow:.1875rem .625rem .5rem #1219541a}.notif-pill__icon-wrap{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;border-radius:50%;background:#ffffff1a;font-size:1rem}.notif-pill__content{display:flex;align-items:baseline;gap:8px;flex:1;min-width:0;overflow:hidden}.notif-pill__time{font-size:.72rem;font-weight:600;opacity:.55;flex-shrink:0;letter-spacing:.02em}.notif-pill__title{font-size:.875rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.notif-pill__body{font-size:.75rem;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:1}.notif-pill__actions{display:flex;align-items:center;gap:6px;flex-shrink:0;margin-left:4px}.notif-pill__action-btn{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:none;background:#ffffff1f;color:var(--ion-color-dark-contrast);cursor:pointer;font-size:.9rem;transition:background .15s ease,transform .1s ease;-webkit-tap-highlight-color:transparent}.notif-pill__action-btn:hover{background:#ffffff38}.notif-pill__action-btn:active{transform:scale(.9)}.notif-pill__action-btn:focus-visible{outline:none;box-shadow:0 0 0 2px #ffffff80}\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: PillComponent, decorators: [{
            type: Component,
            args: [{ selector: 'val-pill', standalone: true, imports: [CommonModule, IonIcon, IonRippleEffect], template: `
    @if (isNotificationPill) {
      <!-- Notification mode -->
      <div class="notif-pill" [attr.aria-live]="'polite'">
        @if (resolvedProps.notification?.icon) {
          <div class="notif-pill__icon-wrap" [style.color]="getIconColor()">
            <ion-icon [name]="resolvedProps.notification!.icon!" />
          </div>
        }

        <div class="notif-pill__content">
          @if (resolvedProps.notification?.time) {
            <span class="notif-pill__time">{{ resolvedProps.notification!.time }}</span>
          }
          <span class="notif-pill__title">{{ resolvedProps.notification!.title }}</span>
          @if (resolvedProps.notification?.body) {
            <span class="notif-pill__body">{{ resolvedProps.notification!.body }}</span>
          }
        </div>

        @if (resolvedProps.notification?.actions?.length) {
          <div class="notif-pill__actions">
            @for (action of resolvedProps.notification!.actions!; track action.token) {
              <button
                class="notif-pill__action-btn"
                [attr.aria-label]="action.ariaLabel || action.token"
                (click)="onActionClick(action.token, $event)"
              >
                <ion-icon [name]="action.icon" />
              </button>
            }
          </div>
        }
      </div>
    } @else if (isTextPill) {
      <!-- Badge mode -->
      <span
        class="val-pill"
        [class.val-pill--clickable]="resolvedProps.clickable"
        [class.val-pill--solid]="resolvedProps.solid"
        [class.val-pill--small]="pillSize === 'small'"
        [class.val-pill--medium]="pillSize === 'medium'"
        [class.val-pill--large]="pillSize === 'large'"
        [class.val-pill--w-normal]="pillWeight === 'normal'"
        [class.val-pill--w-medium]="pillWeight === 'medium'"
        [class.val-pill--w-bold]="pillWeight === 'bold'"
        [style.--val-pill-color]="'var(--ion-color-' + pillColor + ')'"
        [style.--val-pill-color-rgb]="'var(--ion-color-' + pillColor + '-rgb)'"
        [style.--val-pill-color-contrast]="'var(--ion-color-' + pillColor + '-contrast)'"
        [attr.role]="resolvedProps.clickable ? 'button' : null"
        [attr.tabindex]="resolvedProps.clickable ? 0 : null"
        [attr.aria-label]="resolvedProps.clickable ? resolvedProps.ariaLabel || resolvedProps.label : null"
        (click)="onPillClick()"
        (keydown.enter)="onPillClick()"
        (keydown.space)="onPillClick($event)"
      >
        @if (resolvedProps.icon) {
          <ion-icon class="val-pill__icon" [name]="resolvedProps.icon" />
        }
        <span class="val-pill__label">{{ resolvedProps.label }}</span>
      </span>
    }
  `, 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)}.val-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;white-space:nowrap;line-height:1;background:rgba(var(--val-pill-color-rgb),.12);color:var(--val-pill-color);border:.0625rem solid rgba(var(--val-pill-color-rgb),.22);transition:background .15s ease,transform .15s ease,box-shadow .15s ease}.val-pill__icon{font-size:1em;flex-shrink:0}.val-pill__label{display:inline-block}.val-pill--solid{background:var(--val-pill-color);color:var(--val-pill-color-contrast);border-color:var(--val-pill-color)}.val-pill--small{padding:5px 12px;font-size:.75rem}.val-pill--medium{padding:7px 14px;font-size:.875rem}.val-pill--large{padding:9px 18px;font-size:1rem}.val-pill--w-normal{font-weight:400}.val-pill--w-medium{font-weight:600}.val-pill--w-bold{font-weight:700}.val-pill--clickable{cursor:pointer;-webkit-tap-highlight-color:transparent}.val-pill--clickable:hover{background:rgba(var(--val-pill-color-rgb),.2);transform:translateY(-1px)}.val-pill--clickable:active{transform:translateY(0) scale(.98)}.val-pill--clickable:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--val-pill-color-rgb),.3)}.val-pill--clickable.val-pill--solid:hover{filter:brightness(1.08)}:host-context(body.dark) .val-pill:not(.val-pill--solid),:host-context(html.ion-palette-dark) .val-pill:not(.val-pill--solid),:host-context([data-theme=dark]) .val-pill:not(.val-pill--solid){background:rgba(var(--val-pill-color-rgb),.22);border-color:rgba(var(--val-pill-color-rgb),.32)}.notif-pill{display:inline-flex;align-items:center;gap:12px;padding:10px 14px;border-radius:999px;background:var(--ion-color-dark);color:var(--ion-color-dark-contrast);max-width:100%;box-sizing:border-box;box-shadow:.1875rem .625rem .5rem #1219541a}.notif-pill__icon-wrap{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;border-radius:50%;background:#ffffff1a;font-size:1rem}.notif-pill__content{display:flex;align-items:baseline;gap:8px;flex:1;min-width:0;overflow:hidden}.notif-pill__time{font-size:.72rem;font-weight:600;opacity:.55;flex-shrink:0;letter-spacing:.02em}.notif-pill__title{font-size:.875rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.notif-pill__body{font-size:.75rem;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:1}.notif-pill__actions{display:flex;align-items:center;gap:6px;flex-shrink:0;margin-left:4px}.notif-pill__action-btn{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:none;background:#ffffff1f;color:var(--ion-color-dark-contrast);cursor:pointer;font-size:.9rem;transition:background .15s ease,transform .1s ease;-webkit-tap-highlight-color:transparent}.notif-pill__action-btn:hover{background:#ffffff38}.notif-pill__action-btn:active{transform:scale(.9)}.notif-pill__action-btn:focus-visible{outline:none;box-shadow:0 0 0 2px #ffffff80}\n"] }]
        }], propDecorators: { preset: [{
                type: Input
            }], props: [{
                type: Input
            }], pillClick: [{
                type: Output
            }], pillAction: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 