import { NgStyle } from '@angular/common';
import { Component, EventEmitter, inject, Input, Output } from '@angular/core';
import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
import { ThemeService } from '../../../services/theme.service';
import { DividerComponent } from '../../atoms/divider/divider.component';
import { ExpandableTextComponent } from '../../molecules/expandable-text/expandable-text.component';
import { LinkComponent } from '../../molecules/link/link.component';
import { HeaderComponent } from '../../organisms/header/header.component';
import * as i0 from "@angular/core";
export class SimpleComponent {
    constructor() {
        this.onClick = new EventEmitter();
        this.onScrollEvent = new EventEmitter();
        this.theme = inject(ThemeService);
    }
    onClickHandler(token) {
        this.onClick.emit(token);
    }
    onScrollHandler($event) {
        this.onScrollEvent.emit(true);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SimpleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SimpleComponent, isStandalone: true, selector: "val-simple", inputs: { props: "props" }, outputs: { onClick: "onClick", onScrollEvent: "onScrollEvent" }, ngImport: i0, template: `
    <val-header [props]="props.header" />

    <ion-content
      [fullscreen]="true"
      [ngStyle]="{
        '--background': theme.IsDark ? 'var(--ion-background-color)' : props.background,
      }"
      [scrollEvents]="true"
      (ionScroll)="onScrollHandler($event)"
    >
      <ion-header collapse="condense">
        <ion-toolbar style="--background: transparent;">
          <ion-title style="padding: 0;" size="large">{{ props.pageTitle }}</ion-title>
        </ion-toolbar>
      </ion-header>
      @if (props.pageDescription) {
        <div class="description-container">
          <val-expandable-text
            [props]="{
              limit: 180,
              content: props.pageDescription,
              color: 'primary',
              expandText: 'más',
            }"
          />
        </div>
      }
      @if (props.link) {
        <val-link [props]="props.link" (onClick)="onClickHandler($event)"></val-link>
      }
      @if (props.withDivider) {
        <val-divider [props]="{ fill: 'solid', size: 'medium', color: 'dark' }" />
      }
      <div class="layout-container">
        <ng-content select="[inner-container]"></ng-content>
      </div>
    </ion-content>
    <ng-content select="[outter-container]"></ng-content>
  `, 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)}.description-container{padding:0 16px}.layout-container{margin:0 auto;padding:0;width:100%;box-sizing:border-box;margin-bottom:1rem;padding-top:.5rem}@media (max-width: 768px){.layout-container{max-width:100%}}@media (min-width: 768px){.layout-container{margin:0 auto;max-width:var(--val-container-sm, 540px);margin-bottom:1.5rem}}@media (min-width: 1200px){.layout-container{margin:0 auto;max-width:var(--val-container-md, 720px)}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: HeaderComponent, selector: "val-header", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: DividerComponent, selector: "val-divider", inputs: ["props"] }, { kind: "component", type: LinkComponent, selector: "val-link", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: ExpandableTextComponent, selector: "val-expandable-text", inputs: ["props"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SimpleComponent, decorators: [{
            type: Component,
            args: [{ selector: 'val-simple', standalone: true, imports: [
                        NgStyle,
                        IonHeader,
                        IonToolbar,
                        IonTitle,
                        IonContent,
                        HeaderComponent,
                        DividerComponent,
                        LinkComponent,
                        ExpandableTextComponent,
                    ], template: `
    <val-header [props]="props.header" />

    <ion-content
      [fullscreen]="true"
      [ngStyle]="{
        '--background': theme.IsDark ? 'var(--ion-background-color)' : props.background,
      }"
      [scrollEvents]="true"
      (ionScroll)="onScrollHandler($event)"
    >
      <ion-header collapse="condense">
        <ion-toolbar style="--background: transparent;">
          <ion-title style="padding: 0;" size="large">{{ props.pageTitle }}</ion-title>
        </ion-toolbar>
      </ion-header>
      @if (props.pageDescription) {
        <div class="description-container">
          <val-expandable-text
            [props]="{
              limit: 180,
              content: props.pageDescription,
              color: 'primary',
              expandText: 'más',
            }"
          />
        </div>
      }
      @if (props.link) {
        <val-link [props]="props.link" (onClick)="onClickHandler($event)"></val-link>
      }
      @if (props.withDivider) {
        <val-divider [props]="{ fill: 'solid', size: 'medium', color: 'dark' }" />
      }
      <div class="layout-container">
        <ng-content select="[inner-container]"></ng-content>
      </div>
    </ion-content>
    <ng-content select="[outter-container]"></ng-content>
  `, 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)}.description-container{padding:0 16px}.layout-container{margin:0 auto;padding:0;width:100%;box-sizing:border-box;margin-bottom:1rem;padding-top:.5rem}@media (max-width: 768px){.layout-container{max-width:100%}}@media (min-width: 768px){.layout-container{margin:0 auto;max-width:var(--val-container-sm, 540px);margin-bottom:1.5rem}}@media (min-width: 1200px){.layout-container{margin:0 auto;max-width:var(--val-container-md, 720px)}}\n"] }]
        }], propDecorators: { props: [{
                type: Input
            }], onClick: [{
                type: Output
            }], onScrollEvent: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 