import { CommonModule } from '@angular/common';
import { Component, EventEmitter, inject, Input, Output } from '@angular/core';
import { IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCheckbox, IonIcon, } from '@ionic/angular/standalone';
import { PresetService } from '../../../services/presets';
import { AvatarComponent } from '../../atoms/avatar/avatar.component';
import { ButtonComponent } from '../../atoms/button/button.component';
import { ImageComponent } from '../../atoms/image/image.component';
import { TextComponent } from '../../atoms/text/text.component';
import { ToolbarActionType } from '../../types';
import { CardSection, CardType } from './types';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
/**
 * val-card
 *
 * A flexible card component supporting images, titles, content, actions, and custom sections.
 * Supports presets for reusable configurations.
 *
 * @example With preset (recommended):
 * <val-card preset="feature" [props]="{ title: 'Card', image: 'url', content: '...' }" (onClick)="handler($event)"></val-card>
 *
 * @example Static (backwards compatible):
 * <val-card [props]="{ type: 'native', title: 'Card', image: 'url', content: '...' }" (onClick)="handler($event)"></val-card>
 *
 * @input preset: string - Name of preset to apply (e.g., 'feature', 'compact')
 * @input props: CardMetadata - Configuration for the card (overrides preset values)
 * @output onClick - Emits a CardClickEvent when the card or an action is clicked
 */
export class CardComponent {
    constructor() {
        this.presets = inject(PresetService);
        /**
         * Card configuration object. Values here override preset values.
         * @type {CardMetadata}
         * @property type - The card type (see CardType).
         * @property title - The card title.
         * @property image - The card image URL.
         * @property content - The card content.
         * @property actions - Array of action buttons (optional).
         * @property sections - Custom card sections (optional).
         * @property overtitle - Subtitle or overtitle (optional).
         */
        this.props = {};
        /**
         * Resolved props after merging preset + explicit props.
         */
        this.resolvedProps = {};
        /**
         * Event emitted when the card or an action is clicked.
         */
        this.onClick = new EventEmitter();
        this.types = CardType;
        this.actionTypes = ToolbarActionType;
        this.sections = CardSection;
    }
    ngOnInit() {
        this.resolveProps();
    }
    ngOnChanges(changes) {
        if (changes['preset'] || changes['props']) {
            this.resolveProps();
        }
    }
    /**
     * Merge preset configuration with explicit props.
     * Explicit props take precedence over preset values.
     */
    resolveProps() {
        const presetProps = this.preset ? this.presets.get('card', this.preset) : {};
        this.resolvedProps = {
            ...presetProps,
            ...this.props,
        };
    }
    clickHandler(section, token) {
        this.onClick.emit({ section, token });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CardComponent, isStandalone: true, selector: "val-card", inputs: { preset: "preset", props: "props" }, outputs: { onClick: "onClick" }, usesOnChanges: true, ngImport: i0, template: `
    <ion-card *ngIf="resolvedProps.type === types.native">
      @if (resolvedProps.image) {
        <img [alt]="resolvedProps.title || 'Card image'" [src]="resolvedProps.image" />
      }
      <ion-card-header *ngIf="resolvedProps.title || resolvedProps.overtitle">
        <ion-card-title *ngIf="resolvedProps.title">{{ resolvedProps.title }}</ion-card-title>
        <ion-card-subtitle *ngIf="resolvedProps.overtitle">{{ resolvedProps.overtitle }}</ion-card-subtitle>
      </ion-card-header>

      <ion-card-content *ngIf="resolvedProps.content">{{ resolvedProps.content }}</ion-card-content>

      @if (resolvedProps.footerActions && resolvedProps.footerActions.length > 0) {
        <div class="card-actions">
          <val-button
            *ngFor="let b of resolvedProps.footerActions"
            [props]="b"
            (onClick)="clickHandler(sections.footer, b.token)"
          ></val-button>
        </div>
      }
    </ion-card>

    <ion-card
      *ngIf="resolvedProps.type === types.tappable"
      (click)="clickHandler(sections.content, resolvedProps.token)"
      class="tapable"
    >
      @if (resolvedProps.image) {
        <img [alt]="resolvedProps.title || 'Card image'" [src]="resolvedProps.image" />
      }
      <ion-card-header *ngIf="resolvedProps.title || resolvedProps.overtitle">
        <ion-card-title *ngIf="resolvedProps.title">{{ resolvedProps.title }}</ion-card-title>
        <ion-card-subtitle *ngIf="resolvedProps.overtitle">{{ resolvedProps.overtitle }}</ion-card-subtitle>
      </ion-card-header>

      <ion-card-content *ngIf="resolvedProps.content">{{ resolvedProps.content }}</ion-card-content>
    </ion-card>

    <ion-card
      *ngIf="resolvedProps.type === types.checker"
      (click)="clickHandler(sections.content, resolvedProps.token)"
      class="tapable"
    >
      <ion-card-header *ngIf="resolvedProps.title || resolvedProps.overtitle" class="checker">
        <div>
          <ion-card-subtitle *ngIf="resolvedProps.overtitle">{{ resolvedProps.overtitle }}</ion-card-subtitle>
          <ion-card-title *ngIf="resolvedProps.title">{{ resolvedProps.title }}</ion-card-title>
        </div>
        <div>
          <ion-checkbox [checked]="resolvedProps.selected"></ion-checkbox>
        </div>
      </ion-card-header>

      <ion-card-content *ngIf="resolvedProps.content">{{ resolvedProps.content }}</ion-card-content>
    </ion-card>

    <ion-card *ngIf="resolvedProps.type === types.complex" class="complex">
      <ion-card-header class="complex-header">
        <ion-buttons style="display: flex; align-items: center" *ngIf="resolvedProps.leftActions?.length > 0">
          <ng-container *ngFor="let action of resolvedProps.leftActions">
            <ion-button
              *ngIf="action.type === actionTypes.ICON"
              (click)="clickHandler(sections.headerLeft, action.token)"
            >
              <ion-icon slot="icon-only" [name]="action.description" color="dark"></ion-icon>
            </ion-button>
            <val-avatar
              style="margin-right: 4px; cursor: pointer"
              *ngIf="action.type === actionTypes.AVATAR"
              [props]="{ size: 'small', image: action.description, default: '' }"
              (onClick)="clickHandler(sections.headerLeft, action.token)"
            ></val-avatar>
            <val-image
              *ngIf="action.type === actionTypes.IMAGE"
              [props]="action.image"
              (click)="clickHandler(sections.headerLeft, action.token)"
            ></val-image>
            <ion-button
              *ngIf="action.type === actionTypes.BUTTON"
              (click)="clickHandler(sections.headerLeft, action.token)"
            >
              {{ action.description }}
            </ion-button>
            <div *ngIf="resolvedProps.headerText">
              <val-text [props]="{ content: resolvedProps.headerText, color: 'dark', bold: true, size: 'medium' }" />
            </div>
          </ng-container>
        </ion-buttons>
        <ion-buttons style="display: flex; align-items: center" *ngIf="resolvedProps.rightActions?.length > 0">
          <ng-container *ngFor="let action of resolvedProps.rightActions">
            <ion-button
              *ngIf="action.type === actionTypes.ICON"
              (click)="clickHandler(sections.headerRight, action.token)"
            >
              <ion-icon slot="icon-only" [name]="action.description" color="dark"></ion-icon>
            </ion-button>
            <val-avatar
              style="margin-right: 4px; cursor: pointer"
              *ngIf="action.type === actionTypes.AVATAR"
              [props]="{ size: 'small', image: action.description, default: '' }"
              (onClick)="clickHandler(sections.headerRight, action.token)"
            ></val-avatar>
            <val-image
              *ngIf="action.type === actionTypes.IMAGE"
              [props]="action.image"
              (click)="clickHandler(sections.headerRight, action.token)"
            ></val-image>
            <ion-button
              *ngIf="action.type === actionTypes.BUTTON"
              (click)="clickHandler(sections.headerRight, action.token)"
            >
              {{ action.description }}
            </ion-button>
          </ng-container>
        </ion-buttons>
      </ion-card-header>

      <div class="tapable" (click)="clickHandler(sections.content, resolvedProps.token)">
        <ion-card-header *ngIf="resolvedProps.title || resolvedProps.overtitle" class="complex-header">
          <div>
            <ion-card-subtitle *ngIf="resolvedProps.overtitle">{{ resolvedProps.overtitle }}</ion-card-subtitle>
            <ion-card-title *ngIf="resolvedProps.title">{{ resolvedProps.title }}</ion-card-title>
          </div>
        </ion-card-header>

        @if (resolvedProps.image) {
          <img [alt]="resolvedProps.title || 'Card image'" [src]="resolvedProps.image" />
        }
        <ion-card-content *ngIf="resolvedProps.content" class="complex-content">{{ resolvedProps.content }}</ion-card-content>
      </div>
      @if (resolvedProps.footerActions && resolvedProps.footerActions.length > 0) {
        <div class="card-actions">
          <val-button
            *ngFor="let b of resolvedProps.footerActions"
            [props]="b"
            (onClick)="clickHandler(sections.footer, b.token)"
          ></val-button>
        </div>
      }
      <ion-buttons
        style="display: flex; align-items: center; justify-content: flex-end; margin: 8px"
        *ngIf="resolvedProps.footerComplexActions?.length > 0"
      >
        <ng-container *ngFor="let action of resolvedProps.footerComplexActions">
          <ion-button
            *ngIf="action.type === actionTypes.ICON"
            (click)="clickHandler(sections.footerExtra, action.token)"
          >
            <ion-icon slot="icon-only" [name]="action.description" color="dark"></ion-icon>
          </ion-button>
          <val-avatar
            style="margin-right: 4px; cursor: pointer"
            *ngIf="action.type === actionTypes.AVATAR"
            [props]="{ size: 'small', image: action.description, default: '' }"
            (onClick)="clickHandler(sections.footerExtra, action.token)"
          ></val-avatar>
          <val-image
            *ngIf="action.type === actionTypes.IMAGE"
            [props]="action.image"
            (click)="clickHandler(sections.footerExtra, action.token)"
          ></val-image>
          <ion-button
            *ngIf="action.type === actionTypes.BUTTON"
            (click)="clickHandler(sections.footerExtra, action.token)"
            color="dark"
          >
            {{ action.description }}
          </ion-button>
        </ng-container>
      </ion-buttons>
    </ion-card>
  `, 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-card.tapable{transition:transform .3s ease,box-shadow .3s ease}ion-card.tapable:hover{transform:scale(1.01);box-shadow:.1875rem .625rem .5rem #1219541a}.tapable{cursor:pointer}.checker{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.complex-header{padding:10px;display:flex;flex-direction:row;justify-content:space-between;align-items:center}.complex-content{padding-left:10px;padding-top:4px;padding-bottom:10px}.complex{border-radius:16px}img{width:100%;height:auto;max-height:250px;object-fit:cover;display:block;border-radius:24px}.card-actions{display:flex;gap:.5rem;padding:0 16px 16px;flex-wrap:wrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: AvatarComponent, selector: "val-avatar", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { 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"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardComponent, decorators: [{
            type: Component,
            args: [{ selector: 'val-card', standalone: true, imports: [
                        CommonModule,
                        ButtonComponent,
                        AvatarComponent,
                        ImageComponent,
                        TextComponent,
                        IonCard,
                        IonCardContent,
                        IonCardHeader,
                        IonCardTitle,
                        IonCardSubtitle,
                        IonCheckbox,
                        IonButtons,
                        IonButton,
                        IonIcon,
                    ], template: `
    <ion-card *ngIf="resolvedProps.type === types.native">
      @if (resolvedProps.image) {
        <img [alt]="resolvedProps.title || 'Card image'" [src]="resolvedProps.image" />
      }
      <ion-card-header *ngIf="resolvedProps.title || resolvedProps.overtitle">
        <ion-card-title *ngIf="resolvedProps.title">{{ resolvedProps.title }}</ion-card-title>
        <ion-card-subtitle *ngIf="resolvedProps.overtitle">{{ resolvedProps.overtitle }}</ion-card-subtitle>
      </ion-card-header>

      <ion-card-content *ngIf="resolvedProps.content">{{ resolvedProps.content }}</ion-card-content>

      @if (resolvedProps.footerActions && resolvedProps.footerActions.length > 0) {
        <div class="card-actions">
          <val-button
            *ngFor="let b of resolvedProps.footerActions"
            [props]="b"
            (onClick)="clickHandler(sections.footer, b.token)"
          ></val-button>
        </div>
      }
    </ion-card>

    <ion-card
      *ngIf="resolvedProps.type === types.tappable"
      (click)="clickHandler(sections.content, resolvedProps.token)"
      class="tapable"
    >
      @if (resolvedProps.image) {
        <img [alt]="resolvedProps.title || 'Card image'" [src]="resolvedProps.image" />
      }
      <ion-card-header *ngIf="resolvedProps.title || resolvedProps.overtitle">
        <ion-card-title *ngIf="resolvedProps.title">{{ resolvedProps.title }}</ion-card-title>
        <ion-card-subtitle *ngIf="resolvedProps.overtitle">{{ resolvedProps.overtitle }}</ion-card-subtitle>
      </ion-card-header>

      <ion-card-content *ngIf="resolvedProps.content">{{ resolvedProps.content }}</ion-card-content>
    </ion-card>

    <ion-card
      *ngIf="resolvedProps.type === types.checker"
      (click)="clickHandler(sections.content, resolvedProps.token)"
      class="tapable"
    >
      <ion-card-header *ngIf="resolvedProps.title || resolvedProps.overtitle" class="checker">
        <div>
          <ion-card-subtitle *ngIf="resolvedProps.overtitle">{{ resolvedProps.overtitle }}</ion-card-subtitle>
          <ion-card-title *ngIf="resolvedProps.title">{{ resolvedProps.title }}</ion-card-title>
        </div>
        <div>
          <ion-checkbox [checked]="resolvedProps.selected"></ion-checkbox>
        </div>
      </ion-card-header>

      <ion-card-content *ngIf="resolvedProps.content">{{ resolvedProps.content }}</ion-card-content>
    </ion-card>

    <ion-card *ngIf="resolvedProps.type === types.complex" class="complex">
      <ion-card-header class="complex-header">
        <ion-buttons style="display: flex; align-items: center" *ngIf="resolvedProps.leftActions?.length > 0">
          <ng-container *ngFor="let action of resolvedProps.leftActions">
            <ion-button
              *ngIf="action.type === actionTypes.ICON"
              (click)="clickHandler(sections.headerLeft, action.token)"
            >
              <ion-icon slot="icon-only" [name]="action.description" color="dark"></ion-icon>
            </ion-button>
            <val-avatar
              style="margin-right: 4px; cursor: pointer"
              *ngIf="action.type === actionTypes.AVATAR"
              [props]="{ size: 'small', image: action.description, default: '' }"
              (onClick)="clickHandler(sections.headerLeft, action.token)"
            ></val-avatar>
            <val-image
              *ngIf="action.type === actionTypes.IMAGE"
              [props]="action.image"
              (click)="clickHandler(sections.headerLeft, action.token)"
            ></val-image>
            <ion-button
              *ngIf="action.type === actionTypes.BUTTON"
              (click)="clickHandler(sections.headerLeft, action.token)"
            >
              {{ action.description }}
            </ion-button>
            <div *ngIf="resolvedProps.headerText">
              <val-text [props]="{ content: resolvedProps.headerText, color: 'dark', bold: true, size: 'medium' }" />
            </div>
          </ng-container>
        </ion-buttons>
        <ion-buttons style="display: flex; align-items: center" *ngIf="resolvedProps.rightActions?.length > 0">
          <ng-container *ngFor="let action of resolvedProps.rightActions">
            <ion-button
              *ngIf="action.type === actionTypes.ICON"
              (click)="clickHandler(sections.headerRight, action.token)"
            >
              <ion-icon slot="icon-only" [name]="action.description" color="dark"></ion-icon>
            </ion-button>
            <val-avatar
              style="margin-right: 4px; cursor: pointer"
              *ngIf="action.type === actionTypes.AVATAR"
              [props]="{ size: 'small', image: action.description, default: '' }"
              (onClick)="clickHandler(sections.headerRight, action.token)"
            ></val-avatar>
            <val-image
              *ngIf="action.type === actionTypes.IMAGE"
              [props]="action.image"
              (click)="clickHandler(sections.headerRight, action.token)"
            ></val-image>
            <ion-button
              *ngIf="action.type === actionTypes.BUTTON"
              (click)="clickHandler(sections.headerRight, action.token)"
            >
              {{ action.description }}
            </ion-button>
          </ng-container>
        </ion-buttons>
      </ion-card-header>

      <div class="tapable" (click)="clickHandler(sections.content, resolvedProps.token)">
        <ion-card-header *ngIf="resolvedProps.title || resolvedProps.overtitle" class="complex-header">
          <div>
            <ion-card-subtitle *ngIf="resolvedProps.overtitle">{{ resolvedProps.overtitle }}</ion-card-subtitle>
            <ion-card-title *ngIf="resolvedProps.title">{{ resolvedProps.title }}</ion-card-title>
          </div>
        </ion-card-header>

        @if (resolvedProps.image) {
          <img [alt]="resolvedProps.title || 'Card image'" [src]="resolvedProps.image" />
        }
        <ion-card-content *ngIf="resolvedProps.content" class="complex-content">{{ resolvedProps.content }}</ion-card-content>
      </div>
      @if (resolvedProps.footerActions && resolvedProps.footerActions.length > 0) {
        <div class="card-actions">
          <val-button
            *ngFor="let b of resolvedProps.footerActions"
            [props]="b"
            (onClick)="clickHandler(sections.footer, b.token)"
          ></val-button>
        </div>
      }
      <ion-buttons
        style="display: flex; align-items: center; justify-content: flex-end; margin: 8px"
        *ngIf="resolvedProps.footerComplexActions?.length > 0"
      >
        <ng-container *ngFor="let action of resolvedProps.footerComplexActions">
          <ion-button
            *ngIf="action.type === actionTypes.ICON"
            (click)="clickHandler(sections.footerExtra, action.token)"
          >
            <ion-icon slot="icon-only" [name]="action.description" color="dark"></ion-icon>
          </ion-button>
          <val-avatar
            style="margin-right: 4px; cursor: pointer"
            *ngIf="action.type === actionTypes.AVATAR"
            [props]="{ size: 'small', image: action.description, default: '' }"
            (onClick)="clickHandler(sections.footerExtra, action.token)"
          ></val-avatar>
          <val-image
            *ngIf="action.type === actionTypes.IMAGE"
            [props]="action.image"
            (click)="clickHandler(sections.footerExtra, action.token)"
          ></val-image>
          <ion-button
            *ngIf="action.type === actionTypes.BUTTON"
            (click)="clickHandler(sections.footerExtra, action.token)"
            color="dark"
          >
            {{ action.description }}
          </ion-button>
        </ng-container>
      </ion-buttons>
    </ion-card>
  `, 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-card.tapable{transition:transform .3s ease,box-shadow .3s ease}ion-card.tapable:hover{transform:scale(1.01);box-shadow:.1875rem .625rem .5rem #1219541a}.tapable{cursor:pointer}.checker{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.complex-header{padding:10px;display:flex;flex-direction:row;justify-content:space-between;align-items:center}.complex-content{padding-left:10px;padding-top:4px;padding-bottom:10px}.complex{border-radius:16px}img{width:100%;height:auto;max-height:250px;object-fit:cover;display:block;border-radius:24px}.card-actions{display:flex;gap:.5rem;padding:0 16px 16px;flex-wrap:wrap}\n"] }]
        }], ctorParameters: () => [], propDecorators: { preset: [{
                type: Input
            }], props: [{
                type: Input
            }], onClick: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 