import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { RouterLink } from '@angular/router';
import { IonButton, IonIcon } from '@ionic/angular/standalone';
import { addIcons } from 'ionicons';
import { closeOutline } from 'ionicons/icons';
import * as i0 from "@angular/core";
/**
 * `val-cookie-banner` — bottom/top fixed banner asking the user to choose
 * a cookie consent option. Presentational only: emits events on each
 * action, the parent decides what to do (typically wiring to
 * `AnalyticsService` from `valtech-components`).
 *
 * @example
 * <val-cookie-banner
 *   [props]="bannerProps()"
 *   (accept)="onAccept()"
 *   (reject)="onReject()"
 *   (customize)="onCustomize()"
 *   (dismiss)="onDismiss()"
 * />
 *
 * Wire `props.visible` to `analytics.consentState().hasDecided === false`
 * so the banner auto-hides once the user makes a choice.
 */
export class CookieBannerComponent {
    constructor() {
        /** Fired when the user clicks the primary "accept" button. */
        this.accept = new EventEmitter();
        /** Fired when the user clicks the secondary "reject" button. */
        this.reject = new EventEmitter();
        /** Fired when the user clicks the tertiary "customize/configure" button. */
        this.customize = new EventEmitter();
        /** Fired when the user clicks the dismiss (X) icon. */
        this.dismiss = new EventEmitter();
        addIcons({ closeOutline });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CookieBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CookieBannerComponent, isStandalone: true, selector: "val-cookie-banner", inputs: { props: "props" }, outputs: { accept: "accept", reject: "reject", customize: "customize", dismiss: "dismiss" }, ngImport: i0, template: `
    @if (props?.visible) {
      <div
        class="val-cookie-banner"
        [class.val-cookie-banner--top]="props.position === 'top'"
        [class.val-cookie-banner--bottom]="props.position !== 'top'"
        [class.val-cookie-banner--translucent]="props.translucent"
        role="dialog"
        aria-modal="false"
        aria-live="polite"
      >
        <div class="val-cookie-banner__inner" [style.max-width]="props.maxWidth || '1200px'">
          @if (props.dismissible) {
            <button
              type="button"
              class="val-cookie-banner__dismiss"
              [attr.aria-label]="'dismiss'"
              (click)="dismiss.emit()"
            >
              <ion-icon name="close-outline"></ion-icon>
            </button>
          }

          <div class="val-cookie-banner__copy">
            @if (props.title) {
              <h3 class="val-cookie-banner__title">{{ props.title }}</h3>
            }
            <p class="val-cookie-banner__message">
              {{ props.message }}
              @if (props.policyLinkText && props.policyHref) {
                <a class="val-cookie-banner__policy" [href]="props.policyHref" target="_blank" rel="noopener">
                  {{ props.policyLinkText }}
                </a>
              }
            </p>
          </div>

          <div class="val-cookie-banner__actions">
            <ion-button fill="clear" size="small" [color]="props.rejectColor || 'dark'" (click)="reject.emit()">
              {{ props.rejectText }}
            </ion-button>

            @if (props.customizeText) {
              @if (props.customizeRouterLink) {
                <ion-button
                  fill="outline"
                  size="small"
                  [color]="props.customizeColor || 'dark'"
                  [routerLink]="props.customizeRouterLink"
                  (click)="customize.emit()"
                >
                  {{ props.customizeText }}
                </ion-button>
              } @else {
                <ion-button
                  fill="outline"
                  size="small"
                  [color]="props.customizeColor || 'dark'"
                  (click)="customize.emit()"
                >
                  {{ props.customizeText }}
                </ion-button>
              }
            }

            <ion-button fill="solid" size="small" [color]="props.acceptColor || 'primary'" (click)="accept.emit()">
              {{ props.acceptText }}
            </ion-button>
          </div>
        </div>
      </div>
    }
  `, isInline: true, styles: [":host{display:contents}.val-cookie-banner{position:fixed;left:0;right:0;z-index:1000;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:var(--ion-background-color, #fff);border-color:var(--val-border-color, rgba(0, 0, 0, .08));border-style:solid;border-width:0;box-shadow:0 -2px 16px #00000014;animation:val-cookie-banner-in .25s ease-out}.val-cookie-banner--bottom{bottom:0;border-top-width:1px}.val-cookie-banner--top{top:0;border-bottom-width:1px;padding:calc(12px + env(safe-area-inset-top,0px)) 16px 12px;box-shadow:0 2px 16px #00000014}.val-cookie-banner--translucent{background:color-mix(in srgb,var(--ion-background-color, #fff) 85%,transparent);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px)}.val-cookie-banner__inner{margin:0 auto;display:flex;flex-direction:row;align-items:center;gap:16px;position:relative}.val-cookie-banner__dismiss{position:absolute;top:-8px;right:-4px;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;border-radius:50%;cursor:pointer;color:var(--ion-color-medium);transition:color .15s ease,background .15s ease}.val-cookie-banner__dismiss:hover{color:var(--ion-color-dark);background:var(--ion-color-light-shade, rgba(0, 0, 0, .04))}.val-cookie-banner__dismiss ion-icon{font-size:1.125rem}.val-cookie-banner__copy{flex:1 1 auto;min-width:0}.val-cookie-banner__title{margin:0 0 4px;font-size:.875rem;font-weight:600;color:var(--ion-color-dark)}.val-cookie-banner__message{margin:0;font-size:.8125rem;line-height:1.45;color:var(--ion-color-dark)}.val-cookie-banner__policy{margin-left:4px;color:var(--ion-color-primary);text-decoration:underline;text-underline-offset:2px}.val-cookie-banner__actions{display:inline-flex;flex-direction:row;align-items:center;gap:8px;flex-shrink:0}@media (max-width: 768px){.val-cookie-banner__inner{flex-direction:column;align-items:stretch;gap:12px}.val-cookie-banner__actions{flex-wrap:wrap;justify-content:flex-end}}@media (max-width: 480px){.val-cookie-banner__actions{flex-direction:column;align-items:stretch}.val-cookie-banner__actions ion-button{width:100%}}@keyframes val-cookie-banner-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.val-cookie-banner--top{animation-name:val-cookie-banner-in-top}@keyframes val-cookie-banner-in-top{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion: reduce){.val-cookie-banner{animation:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CookieBannerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'val-cookie-banner', standalone: true, imports: [CommonModule, RouterLink, IonButton, IonIcon], template: `
    @if (props?.visible) {
      <div
        class="val-cookie-banner"
        [class.val-cookie-banner--top]="props.position === 'top'"
        [class.val-cookie-banner--bottom]="props.position !== 'top'"
        [class.val-cookie-banner--translucent]="props.translucent"
        role="dialog"
        aria-modal="false"
        aria-live="polite"
      >
        <div class="val-cookie-banner__inner" [style.max-width]="props.maxWidth || '1200px'">
          @if (props.dismissible) {
            <button
              type="button"
              class="val-cookie-banner__dismiss"
              [attr.aria-label]="'dismiss'"
              (click)="dismiss.emit()"
            >
              <ion-icon name="close-outline"></ion-icon>
            </button>
          }

          <div class="val-cookie-banner__copy">
            @if (props.title) {
              <h3 class="val-cookie-banner__title">{{ props.title }}</h3>
            }
            <p class="val-cookie-banner__message">
              {{ props.message }}
              @if (props.policyLinkText && props.policyHref) {
                <a class="val-cookie-banner__policy" [href]="props.policyHref" target="_blank" rel="noopener">
                  {{ props.policyLinkText }}
                </a>
              }
            </p>
          </div>

          <div class="val-cookie-banner__actions">
            <ion-button fill="clear" size="small" [color]="props.rejectColor || 'dark'" (click)="reject.emit()">
              {{ props.rejectText }}
            </ion-button>

            @if (props.customizeText) {
              @if (props.customizeRouterLink) {
                <ion-button
                  fill="outline"
                  size="small"
                  [color]="props.customizeColor || 'dark'"
                  [routerLink]="props.customizeRouterLink"
                  (click)="customize.emit()"
                >
                  {{ props.customizeText }}
                </ion-button>
              } @else {
                <ion-button
                  fill="outline"
                  size="small"
                  [color]="props.customizeColor || 'dark'"
                  (click)="customize.emit()"
                >
                  {{ props.customizeText }}
                </ion-button>
              }
            }

            <ion-button fill="solid" size="small" [color]="props.acceptColor || 'primary'" (click)="accept.emit()">
              {{ props.acceptText }}
            </ion-button>
          </div>
        </div>
      </div>
    }
  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:contents}.val-cookie-banner{position:fixed;left:0;right:0;z-index:1000;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:var(--ion-background-color, #fff);border-color:var(--val-border-color, rgba(0, 0, 0, .08));border-style:solid;border-width:0;box-shadow:0 -2px 16px #00000014;animation:val-cookie-banner-in .25s ease-out}.val-cookie-banner--bottom{bottom:0;border-top-width:1px}.val-cookie-banner--top{top:0;border-bottom-width:1px;padding:calc(12px + env(safe-area-inset-top,0px)) 16px 12px;box-shadow:0 2px 16px #00000014}.val-cookie-banner--translucent{background:color-mix(in srgb,var(--ion-background-color, #fff) 85%,transparent);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px)}.val-cookie-banner__inner{margin:0 auto;display:flex;flex-direction:row;align-items:center;gap:16px;position:relative}.val-cookie-banner__dismiss{position:absolute;top:-8px;right:-4px;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;border-radius:50%;cursor:pointer;color:var(--ion-color-medium);transition:color .15s ease,background .15s ease}.val-cookie-banner__dismiss:hover{color:var(--ion-color-dark);background:var(--ion-color-light-shade, rgba(0, 0, 0, .04))}.val-cookie-banner__dismiss ion-icon{font-size:1.125rem}.val-cookie-banner__copy{flex:1 1 auto;min-width:0}.val-cookie-banner__title{margin:0 0 4px;font-size:.875rem;font-weight:600;color:var(--ion-color-dark)}.val-cookie-banner__message{margin:0;font-size:.8125rem;line-height:1.45;color:var(--ion-color-dark)}.val-cookie-banner__policy{margin-left:4px;color:var(--ion-color-primary);text-decoration:underline;text-underline-offset:2px}.val-cookie-banner__actions{display:inline-flex;flex-direction:row;align-items:center;gap:8px;flex-shrink:0}@media (max-width: 768px){.val-cookie-banner__inner{flex-direction:column;align-items:stretch;gap:12px}.val-cookie-banner__actions{flex-wrap:wrap;justify-content:flex-end}}@media (max-width: 480px){.val-cookie-banner__actions{flex-direction:column;align-items:stretch}.val-cookie-banner__actions ion-button{width:100%}}@keyframes val-cookie-banner-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.val-cookie-banner--top{animation-name:val-cookie-banner-in-top}@keyframes val-cookie-banner-in-top{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion: reduce){.val-cookie-banner{animation:none}}\n"] }]
        }], ctorParameters: () => [], propDecorators: { props: [{
                type: Input
            }], accept: [{
                type: Output
            }], reject: [{
                type: Output
            }], customize: [{
                type: Output
            }], dismiss: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 