import { CommonModule } from '@angular/common';
import { Component, Input } from '@angular/core';
import { CURRENCY_INFO } from './types';
import * as i0 from "@angular/core";
/**
 * val-price-tag
 *
 * A component for displaying prices with currency formatting and discount support.
 *
 * @example Basic usage
 * ```html
 * <val-price-tag [props]="{ amount: 99.99, currency: 'MXN' }"></val-price-tag>
 * ```
 *
 * @example With discount
 * ```html
 * <val-price-tag
 *   [props]="{
 *     amount: 79.99,
 *     originalAmount: 99.99,
 *     currency: 'MXN',
 *     variant: 'sale',
 *     discountPercentage: 20
 *   }"
 * ></val-price-tag>
 * ```
 *
 * @example With period
 * ```html
 * <val-price-tag
 *   [props]="{
 *     amount: 10,
 *     currency: 'MXN',
 *     period: 'por boleto',
 *     size: 'large'
 *   }"
 * ></val-price-tag>
 * ```
 *
 * @example Highlight variant
 * ```html
 * <val-price-tag
 *   [props]="{
 *     amount: 500,
 *     currency: 'MXN',
 *     prefix: 'Desde',
 *     variant: 'highlight',
 *     size: 'xlarge'
 *   }"
 * ></val-price-tag>
 * ```
 */
export class PriceTagComponent {
    get currencyInfo() {
        const currency = this.props.currency || 'MXN';
        return CURRENCY_INFO[currency] || CURRENCY_INFO['USD'];
    }
    get hasDiscount() {
        return !!(this.props.originalAmount &&
            this.props.originalAmount > this.props.amount);
    }
    getSymbol() {
        return this.props.currencySymbol || this.currencyInfo.symbol;
    }
    formatAmount() {
        const decimals = this.props.decimals ?? this.currencyInfo.decimals;
        const info = this.currencyInfo;
        // Format number
        const parts = this.props.amount.toFixed(decimals).split('.');
        const integerPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, info.thousandsSeparator);
        if (decimals > 0 && parts[1]) {
            return `${integerPart}${info.decimalSeparator}${parts[1]}`;
        }
        return integerPart;
    }
    formatPrice(amount) {
        const decimals = this.props.decimals ?? this.currencyInfo.decimals;
        const info = this.currencyInfo;
        const symbol = this.getSymbol();
        // Format number
        const parts = amount.toFixed(decimals).split('.');
        const integerPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, info.thousandsSeparator);
        const formattedNumber = decimals > 0 && parts[1]
            ? `${integerPart}${info.decimalSeparator}${parts[1]}`
            : integerPart;
        // Add symbol
        if (info.symbolPosition === 'prefix') {
            return `${symbol}${formattedNumber}`;
        }
        return `${formattedNumber}${symbol}`;
    }
    getPrefix() {
        return this.props.prefix || '';
    }
    getPeriod() {
        return this.props.period || '';
    }
    getColor() {
        if (this.props.color) {
            return `var(--ion-color-${this.props.color})`;
        }
        return 'var(--ion-color-dark)';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PriceTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PriceTagComponent, isStandalone: true, selector: "val-price-tag", inputs: { props: "props" }, ngImport: i0, template: `
    <div
      class="price-tag"
      [class]="props.cssClass"
      [class.size-small]="props.size === 'small'"
      [class.size-medium]="props.size === 'medium' || !props.size"
      [class.size-large]="props.size === 'large'"
      [class.size-xlarge]="props.size === 'xlarge'"
      [class.variant-default]="props.variant === 'default' || !props.variant"
      [class.variant-highlight]="props.variant === 'highlight'"
      [class.variant-sale]="props.variant === 'sale'"
      [class.variant-free]="props.variant === 'free'"
      [class.variant-badge]="props.variant === 'badge'"
      [class.has-discount]="hasDiscount"
      [class.align-left]="props.align === 'left'"
      [class.align-center]="props.align === 'center' || !props.align"
      [class.align-right]="props.align === 'right'"
      [style.--price-color]="getColor()"
    >
      @if (props.prefix) {
        <span class="price-prefix">{{ getPrefix() }}</span>
      }

      @if (hasDiscount && props.originalAmount) {
        <span class="original-price">
          {{ formatPrice(props.originalAmount) }}
        </span>
      }

      <span class="current-price">
        @if (props.variant === 'free' || props.amount === 0) {
          <span class="free-text">Gratis</span>
        } @else {
          @if (currencyInfo.symbolPosition === 'prefix' && props.showSymbol !== false) {
            <span class="currency-symbol">{{ getSymbol() }}</span>
          }
          <span class="amount">{{ formatAmount() }}</span>
          @if (currencyInfo.symbolPosition === 'suffix' && props.showSymbol !== false) {
            <span class="currency-symbol suffix">{{ getSymbol() }}</span>
          }
        }
      </span>

      @if (props.showCurrencyCode && props.currency) {
        <span class="currency-code">{{ props.currency }}</span>
      }

      @if (props.suffix) {
        <span class="price-suffix">{{ props.suffix }}</span>
      }

      @if (props.period) {
        <span class="price-period">{{ getPeriod() }}</span>
      }

      @if (props.discountPercentage && props.discountPercentage > 0) {
        <span class="discount-badge">
          -{{ props.discountPercentage }}%
        </span>
      }
    </div>
  `, isInline: true, styles: [":host{display:inline-block}.price-tag{--price-color: var(--ion-color-dark);display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:4px}.align-left{justify-content:flex-start}.align-center{justify-content:center}.align-right{justify-content:flex-end}.price-prefix{font-weight:400;color:var(--ion-color-medium);margin-right:4px}.original-price{text-decoration:line-through;color:var(--ion-color-medium);font-weight:400}.current-price{display:inline-flex;align-items:baseline;color:var(--price-color);font-weight:700}.currency-symbol{font-weight:600}.currency-symbol.suffix{margin-left:2px}.amount{font-variant-numeric:tabular-nums}.currency-code{font-size:.7em;color:var(--ion-color-medium);margin-left:4px;font-weight:500}.price-suffix{font-weight:400;color:var(--ion-color-medium);margin-left:4px}.price-period{font-weight:400;color:var(--ion-color-medium);font-size:.7em}.discount-badge{background:var(--ion-color-danger);color:#fff;padding:2px 6px;border-radius:4px;font-size:.65em;font-weight:700;margin-left:8px}.free-text{color:var(--ion-color-success);font-weight:700}.size-small .price-prefix,.size-small .price-suffix,.size-small .original-price{font-size:.75rem}.size-small .current-price{font-size:1rem}.size-small .currency-symbol{font-size:.75rem}.size-medium .price-prefix,.size-medium .price-suffix,.size-medium .original-price{font-size:.875rem}.size-medium .current-price{font-size:1.5rem}.size-medium .currency-symbol,.size-large .price-prefix,.size-large .price-suffix,.size-large .original-price{font-size:1rem}.size-large .current-price{font-size:2.25rem}.size-large .currency-symbol{font-size:1.5rem}.size-xlarge .price-prefix,.size-xlarge .price-suffix,.size-xlarge .original-price{font-size:1.125rem}.size-xlarge .current-price{font-size:3rem}.size-xlarge .currency-symbol{font-size:2rem}.variant-highlight .current-price{color:var(--ion-color-primary);text-shadow:0 2px 4px rgba(var(--ion-color-primary-rgb),.2)}.variant-sale .current-price{color:var(--ion-color-danger)}.variant-sale .original-price{color:var(--ion-color-medium-shade)}.variant-free .current-price{color:var(--ion-color-success)}.variant-badge{background:var(--ion-color-primary);color:#fff;padding:4px 12px;border-radius:20px}.variant-badge .current-price,.variant-badge .currency-symbol,.variant-badge .price-prefix,.variant-badge .price-suffix,.variant-badge .price-period{color:#fff}.has-discount .original-price{order:-1}@keyframes priceHighlight{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}:host(.animate) .current-price{animation:priceHighlight .5s ease-in-out}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PriceTagComponent, decorators: [{
            type: Component,
            args: [{ selector: 'val-price-tag', standalone: true, imports: [CommonModule], template: `
    <div
      class="price-tag"
      [class]="props.cssClass"
      [class.size-small]="props.size === 'small'"
      [class.size-medium]="props.size === 'medium' || !props.size"
      [class.size-large]="props.size === 'large'"
      [class.size-xlarge]="props.size === 'xlarge'"
      [class.variant-default]="props.variant === 'default' || !props.variant"
      [class.variant-highlight]="props.variant === 'highlight'"
      [class.variant-sale]="props.variant === 'sale'"
      [class.variant-free]="props.variant === 'free'"
      [class.variant-badge]="props.variant === 'badge'"
      [class.has-discount]="hasDiscount"
      [class.align-left]="props.align === 'left'"
      [class.align-center]="props.align === 'center' || !props.align"
      [class.align-right]="props.align === 'right'"
      [style.--price-color]="getColor()"
    >
      @if (props.prefix) {
        <span class="price-prefix">{{ getPrefix() }}</span>
      }

      @if (hasDiscount && props.originalAmount) {
        <span class="original-price">
          {{ formatPrice(props.originalAmount) }}
        </span>
      }

      <span class="current-price">
        @if (props.variant === 'free' || props.amount === 0) {
          <span class="free-text">Gratis</span>
        } @else {
          @if (currencyInfo.symbolPosition === 'prefix' && props.showSymbol !== false) {
            <span class="currency-symbol">{{ getSymbol() }}</span>
          }
          <span class="amount">{{ formatAmount() }}</span>
          @if (currencyInfo.symbolPosition === 'suffix' && props.showSymbol !== false) {
            <span class="currency-symbol suffix">{{ getSymbol() }}</span>
          }
        }
      </span>

      @if (props.showCurrencyCode && props.currency) {
        <span class="currency-code">{{ props.currency }}</span>
      }

      @if (props.suffix) {
        <span class="price-suffix">{{ props.suffix }}</span>
      }

      @if (props.period) {
        <span class="price-period">{{ getPeriod() }}</span>
      }

      @if (props.discountPercentage && props.discountPercentage > 0) {
        <span class="discount-badge">
          -{{ props.discountPercentage }}%
        </span>
      }
    </div>
  `, styles: [":host{display:inline-block}.price-tag{--price-color: var(--ion-color-dark);display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:4px}.align-left{justify-content:flex-start}.align-center{justify-content:center}.align-right{justify-content:flex-end}.price-prefix{font-weight:400;color:var(--ion-color-medium);margin-right:4px}.original-price{text-decoration:line-through;color:var(--ion-color-medium);font-weight:400}.current-price{display:inline-flex;align-items:baseline;color:var(--price-color);font-weight:700}.currency-symbol{font-weight:600}.currency-symbol.suffix{margin-left:2px}.amount{font-variant-numeric:tabular-nums}.currency-code{font-size:.7em;color:var(--ion-color-medium);margin-left:4px;font-weight:500}.price-suffix{font-weight:400;color:var(--ion-color-medium);margin-left:4px}.price-period{font-weight:400;color:var(--ion-color-medium);font-size:.7em}.discount-badge{background:var(--ion-color-danger);color:#fff;padding:2px 6px;border-radius:4px;font-size:.65em;font-weight:700;margin-left:8px}.free-text{color:var(--ion-color-success);font-weight:700}.size-small .price-prefix,.size-small .price-suffix,.size-small .original-price{font-size:.75rem}.size-small .current-price{font-size:1rem}.size-small .currency-symbol{font-size:.75rem}.size-medium .price-prefix,.size-medium .price-suffix,.size-medium .original-price{font-size:.875rem}.size-medium .current-price{font-size:1.5rem}.size-medium .currency-symbol,.size-large .price-prefix,.size-large .price-suffix,.size-large .original-price{font-size:1rem}.size-large .current-price{font-size:2.25rem}.size-large .currency-symbol{font-size:1.5rem}.size-xlarge .price-prefix,.size-xlarge .price-suffix,.size-xlarge .original-price{font-size:1.125rem}.size-xlarge .current-price{font-size:3rem}.size-xlarge .currency-symbol{font-size:2rem}.variant-highlight .current-price{color:var(--ion-color-primary);text-shadow:0 2px 4px rgba(var(--ion-color-primary-rgb),.2)}.variant-sale .current-price{color:var(--ion-color-danger)}.variant-sale .original-price{color:var(--ion-color-medium-shade)}.variant-free .current-price{color:var(--ion-color-success)}.variant-badge{background:var(--ion-color-primary);color:#fff;padding:4px 12px;border-radius:20px}.variant-badge .current-price,.variant-badge .currency-symbol,.variant-badge .price-prefix,.variant-badge .price-suffix,.variant-badge .price-period{color:#fff}.has-discount .original-price{order:-1}@keyframes priceHighlight{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}:host(.animate) .current-price{animation:priceHighlight .5s ease-in-out}\n"] }]
        }], propDecorators: { props: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 