valtech-components 2.0.691 → 2.0.692

package/src/lib/components/templates/maintenance-page/maintenance-page.component.scss

@@ -1,44 +0,0 @@
-.maintenance-content {
-  --background: var(--ion-background-color, #f5f5f5);
-}
-
-.maintenance-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-height: 100%;
-  padding: 2rem;
-  text-align: center;
-}
-
-.maintenance-icon {
-  margin-bottom: 2rem;
-
-  .default-icon {
-    width: 120px;
-    height: 120px;
-    color: var(--ion-color-primary, #4a1d96);
-    opacity: 0.8;
-
-    svg {
-      width: 100%;
-      height: 100%;
-    }
-  }
-}
-
-.maintenance-title {
-  font-size: 2rem;
-  font-weight: 700;
-  color: var(--ion-text-color, #1a1a1a);
-  margin: 0 0 1rem;
-}
-
-.maintenance-message {
-  font-size: 1.125rem;
-  color: var(--ion-color-medium, #666);
-  margin: 0;
-  max-width: 400px;
-  line-height: 1.6;
-}

package/src/lib/components/templates/maintenance-page/maintenance-page.component.ts

@@ -1,120 +0,0 @@
-/**
- * MaintenancePageComponent
- *
- * Página de mantenimiento que se muestra cuando la aplicación está en modo mantenimiento.
- */
-
-import { CommonModule } from '@angular/common';
-import { Component, computed, inject, Input } from '@angular/core';
-import { IonContent } from '@ionic/angular/standalone';
-
-import { ImageComponent } from '../../atoms/image/image.component';
-import { I18nService } from '../../../services/i18n';
-import { MaintenancePageMetadata } from './types';
-
-/**
- * val-maintenance-page
- *
- * Página completa de mantenimiento con imagen, título y mensaje personalizables.
- * Se integra con i18n para textos por defecto en múltiples idiomas.
- *
- * @example
- * ```html
- * <!-- Uso básico (usa textos por defecto) -->
- * <val-maintenance-page />
- *
- * <!-- Personalizado -->
- * <val-maintenance-page
- *   [props]="{
- *     title: 'En mantenimiento',
- *     message: 'Volvemos pronto',
- *     image: 'assets/maintenance.svg'
- *   }"
- * />
- * ```
- *
- * @example
- * ```typescript
- * // En app.component.ts
- * @Component({
- *   template: \`
- *     @if (appConfig.isMaintenanceMode()) {
- *       <val-maintenance-page />
- *     } @else {
- *       <ion-router-outlet />
- *     }
- *   \`
- * })
- * export class AppComponent {
- *   appConfig = inject(AppConfigService);
- * }
- * ```
- */
-@Component({
-  selector: 'val-maintenance-page',
-  standalone: true,
-  imports: [CommonModule, IonContent, ImageComponent],
-  template: `
-    <ion-content class="maintenance-content">
-      <div class="maintenance-container">
-        <div class="maintenance-icon">
-          @if (props.image) {
-            <val-image
-              [props]="{
-                src: props.image,
-                alt: 'Maintenance',
-                mode: 'box',
-                size: 'large',
-                shaded: false,
-                bordered: false
-              }"
-            />
-          } @else {
-            <div class="default-icon">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="currentColor"
-              >
-                <path
-                  d="M12 6v6l4 2m6-2a10 10 0 11-20 0 10 10 0 0120 0z"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  fill="none"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-              </svg>
-            </div>
-          }
-        </div>
-
-        <h1 class="maintenance-title">{{ title() }}</h1>
-        <p class="maintenance-message">{{ message() }}</p>
-      </div>
-    </ion-content>
-  `,
-  styleUrls: ['./maintenance-page.component.scss'],
-})
-export class MaintenancePageComponent {
-  /**
-   * Configuración de la página de mantenimiento.
-   */
-  @Input() props: MaintenancePageMetadata = {};
-
-  private i18n = inject(I18nService);
-
-  /**
-   * Título de la página (reactivo a cambios de idioma).
-   */
-  title = computed(
-    () => this.props.title || this.i18n.t('maintenanceMode', 'AppConfig')
-  );
-
-  /**
-   * Mensaje de la página (reactivo a cambios de idioma).
-   */
-  message = computed(
-    () => this.props.message || this.i18n.t('maintenanceMessage', 'AppConfig')
-  );
-}

package/src/lib/components/templates/maintenance-page/types.ts

@@ -1,12 +0,0 @@
-/**
- * Props para val-maintenance-page component.
- *
- * @property title - Título personalizado (opcional, usa i18n por defecto)
- * @property message - Mensaje personalizado (opcional, usa i18n por defecto)
- * @property image - Ruta a imagen personalizada (opcional)
- */
-export type MaintenancePageMetadata = {
-  title?: string;
-  message?: string;
-  image?: string;
-};

package/src/lib/components/templates/page-content/page-content.component.ts

@@ -1,188 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, EventEmitter, inject, Input, Output } from '@angular/core';
-import { IonContent } from '@ionic/angular/standalone';
-import { HeaderComponent } from '../../organisms/header/header.component';
-import { UpdateBannerComponent } from '../../molecules/update-banner/update-banner.component';
-import { ThemeService } from '../../../services/theme.service';
-import { NavigationService } from '../../../services/navigation';
-import { VALTECH_APP_CONFIG } from '../../../services/app-config/config';
-import { PageContentMetadata } from './types';
-import { resolveColor } from '../../../shared/utils/styles';
-
-/**
- * val-page-content
- *
- * A page content template with corporate header, main content area,
- * and footer slots. Supports dark mode and customizable backgrounds.
- *
- * @example
- * <val-page-content
- *   [props]="{
- *     header: { ... },
- *     background: '--main-background',
- *     homeRoute: '/'
- *   }"
- *   (onHeaderClick)="handleHeaderAction($event)"
- * >
- *   <div content>
- *     <!-- Main page content -->
- *   </div>
- *   <div footer>
- *     <val-company-footer [props]="footerProps"></val-company-footer>
- *   </div>
- * </val-page-content>
- *
- * @input props - Page content configuration
- * @output onHeaderClick - Emits when a header action is clicked
- */
-@Component({
-  selector: 'val-page-content',
-  standalone: true,
-  imports: [CommonModule, HeaderComponent, IonContent, UpdateBannerComponent],
-  template: `
-    <div class="ion-page">
-      <val-header
-        [props]="headerProps"
-        (onClick)="onHeaderClickHandler($event)"
-      />
-      <ion-content
-        [fullscreen]="true"
-        [ngStyle]="{
-          '--background': getBackground()
-        }"
-      >
-        @if (showUpdateBanner) {
-          <val-update-banner />
-        }
-        <div class="page-wrapper">
-          <main>
-            <ng-content select="[content]"></ng-content>
-          </main>
-          <ng-content select="[footer]"></ng-content>
-        </div>
-      </ion-content>
-      <ng-content select="[extra-footer]"></ng-content>
-    </div>
-  `,
-  styles: `
-    .page-wrapper {
-      display: flex;
-      flex-direction: column;
-      min-height: 100%;
-    }
-
-    main {
-      flex: 1;
-    }
-  `,
-})
-export class PageContentComponent {
-  /**
-   * Page content configuration.
-   */
-  @Input() props: PageContentMetadata = {};
-
-  private appConfigEnabled = inject(VALTECH_APP_CONFIG, { optional: true });
-
-  constructor(
-    private theme: ThemeService,
-    private nav: NavigationService
-  ) {}
-
-  /**
-   * Whether to show the update banner.
-   * Only shows if AppConfigService is configured and not disabled via props.
-   */
-  get showUpdateBanner(): boolean {
-    return this.appConfigEnabled !== null && this.props.showUpdateBanner !== false;
-  }
-
-  /**
-   * Emits when a header action is clicked.
-   */
-  @Output() onHeaderClick = new EventEmitter<string>();
-
-  /**
-   * Default header configuration (cached to avoid infinite change detection).
-   */
-  private readonly defaultHeader = {
-    bordered: true,
-    translucent: true,
-    toolbar: {
-      withBack: false,
-      withActions: true,
-      textColor: 'dark' as const,
-      withMenu: true,
-      title: '',
-      languageSelector: undefined as undefined,
-      actions: [
-        {
-          token: 'header-logo',
-          description: '',
-          position: 'left' as const,
-          type: 'IMAGE' as const,
-          image: {
-            width: 10,
-            src: '--main-logo',
-            alt: 'header logo',
-            mode: 'box' as const,
-            shaded: false,
-            bordered: false,
-            size: 'small' as const,
-            limited: false,
-            flex: true,
-          },
-        },
-      ],
-    },
-  };
-
-  /**
-   * Gets header props, using cached default if not provided.
-   * Injects languageSelector into toolbar when provided at page level.
-   */
-  get headerProps() {
-    const header = this.props.header || this.defaultHeader;
-
-    // Inject languageSelector into toolbar if provided at page level
-    if (this.props.languageSelector && !header.toolbar.languageSelector) {
-      return {
-        ...header,
-        toolbar: {
-          ...header.toolbar,
-          languageSelector: this.props.languageSelector,
-        },
-      };
-    }
-
-    return header;
-  }
-
-  /**
-   * Gets the background color based on theme.
-   */
-  getBackground(): string {
-    if (this.theme.IsDark) {
-      return 'var(--ion-background-color)';
-    }
-
-    const bg = this.props.background;
-    if (!bg) {
-      return 'var(--ion-background-color)';
-    }
-
-    return resolveColor(bg);
-  }
-
-  /**
-   * Handles header action clicks.
-   */
-  onHeaderClickHandler(token: string): void {
-    this.onHeaderClick.emit(token);
-
-    // Navigate to home route if configured and logo was clicked
-    if (token === 'header-logo' && this.props.homeRoute) {
-      this.nav.navigateByUrl(this.props.homeRoute);
-    }
-  }
-}

package/src/lib/components/templates/page-content/page-content.stories.ts

@@ -1,169 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { moduleMetadata } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
-import { PageContentComponent } from './page-content.component';
-import { HeaderComponent } from '../../organisms/header/header.component';
-import { IonContent } from '@ionic/angular/standalone';
-
-const meta: Meta<PageContentComponent> = {
-  title: 'Templates/PageContent',
-  component: PageContentComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [CommonModule, PageContentComponent, HeaderComponent, IonContent],
-    }),
-  ],
-  tags: ['autodocs'],
-  argTypes: {
-    props: {
-      description: 'Page content configuration object',
-      control: 'object',
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-## val-page-content
-
-A page content template with corporate header and footer slots.
-
-### Problem it solves
-
-Application pages need consistent structure with:
-- Corporate header with logo and menu toggle
-- Main content area with proper spacing
-- Footer section
-- Dark mode support
-- Customizable backgrounds
-
-### Usage
-
-\`\`\`html
-<val-page-content
-  [props]="{
-    background: '--main-background',
-    homeRoute: '/'
-  }"
-  (onHeaderClick)="handleHeaderAction($event)"
->
-  <div content>
-    <val-page-template [props]="pageProps">
-      <!-- Page content -->
-    </val-page-template>
-  </div>
-
-  <div footer>
-    <val-company-footer [props]="footerProps"></val-company-footer>
-  </div>
-
-  <div extra-footer>
-    <!-- Fixed footer content if needed -->
-  </div>
-</val-page-content>
-\`\`\`
-
-### Content Slots
-
-- **[content]**: Main scrollable content area
-- **[footer]**: Footer inside scrollable area
-- **[extra-footer]**: Fixed content outside scroll
-
-### Features
-
-- Corporate header with logo and menu
-- Dark mode background handling
-- CSS variable background support
-- Header action event handling
-- Scroll-aware content area
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<PageContentComponent>;
-
-export const Default: Story = {
-  render: () => ({
-    props: {
-      pageProps: {
-        homeRoute: '/',
-      },
-    },
-    template: `
-      <div style="height: 600px;">
-        <val-page-content [props]="pageProps">
-          <div content>
-            <div style="padding: 16px;">
-              <h1>Page Content</h1>
-              <p>This is the main content area of the page.</p>
-              <p>It scrolls within the ion-content container.</p>
-            </div>
-          </div>
-          <div footer>
-            <div style="padding: 16px; background: var(--ion-color-light);">
-              <p>Footer content goes here</p>
-            </div>
-          </div>
-        </val-page-content>
-      </div>
-    `,
-  }),
-};
-
-export const WithCustomBackground: Story = {
-  render: () => ({
-    props: {
-      pageProps: {
-        background: '#f5f5f5',
-        homeRoute: '/',
-      },
-    },
-    template: `
-      <div style="height: 600px;">
-        <val-page-content [props]="pageProps">
-          <div content>
-            <div style="padding: 16px;">
-              <h1>Custom Background</h1>
-              <p>This page has a custom light gray background.</p>
-            </div>
-          </div>
-        </val-page-content>
-      </div>
-    `,
-  }),
-};
-
-export const FullPage: Story = {
-  render: () => ({
-    props: {
-      pageProps: {
-        homeRoute: '/',
-      },
-    },
-    template: `
-      <div style="height: 800px;">
-        <val-page-content [props]="pageProps">
-          <div content>
-            <div style="padding: 16px;">
-              <h1>Full Page Example</h1>
-              <p>This demonstrates a full page layout with header and footer.</p>
-              <div style="height: 500px; background: linear-gradient(180deg, #f0f0f0, #e0e0e0); border-radius: 8px; padding: 16px; margin: 16px 0;">
-                <p>Tall content area</p>
-              </div>
-              <p>More content below the tall section.</p>
-            </div>
-          </div>
-          <div footer>
-            <div style="padding: 32px 16px; background: var(--ion-color-dark); color: white; text-align: center;">
-              <p>Company Footer</p>
-              <small>&copy; 2024 All rights reserved</small>
-            </div>
-          </div>
-        </val-page-content>
-      </div>
-    `,
-  }),
-};

package/src/lib/components/templates/page-content/types.ts

@@ -1,28 +0,0 @@
-import { HeaderMetadata } from '../../organisms/header/types';
-import { LanguageSelectorMetadata } from '../../molecules/language-selector/types';
-
-/**
- * Configuration for the page content component.
- */
-export interface PageContentMetadata {
-  /** Header configuration */
-  header?: HeaderMetadata;
-  /** Background color or CSS variable */
-  background?: string;
-  /** Background color for dark mode */
-  backgroundDark?: string;
-  /** Route to navigate to when header logo is clicked */
-  homeRoute?: string;
-  /**
-   * Language selector configuration.
-   * When provided, displays a language selector icon in the header (left of menu button).
-   * Uses 'icon' mode by default for compact display.
-   */
-  languageSelector?: LanguageSelectorMetadata;
-  /**
-   * Whether to show the update banner when a new version is available.
-   * Requires AppConfigService to be configured with provideValtechAppConfig().
-   * @default true
-   */
-  showUpdateBanner?: boolean;
-}