valtech-components 2.0.564 → 2.0.566

package/fesm2022/valtech-components.mjs

@@ -5213,28 +5213,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * val-alert-box
  *
  * Displays an alert box with an icon and text, using a styled box container.
+ * Supports presets for reusable configurations.
  *
- * @example
+ * @example With preset (recommended):
+ * <val-alert-box preset="warning" [props]="{ text: 'Advertencia!' }"></val-alert-box>
+ *
+ * @example Static (backwards compatible):
  * <val-alert-box [props]="{ box: {...}, icon: {...}, text: { content: 'Alerta' } }"></val-alert-box>
  *
- * @input props: AlertBoxMetadata | ReactiveAlertBoxMetadata - Configuration for the alert box
+ * @input preset: string - Name of preset to apply (e.g., 'info', 'success', 'warning', 'error')
+ * @input props: AlertBoxMetadata | ReactiveAlertBoxMetadata - Configuration for the alert box (overrides preset values)
  */
 class AlertBoxComponent {
+    constructor() {
+        this.presets = inject(PresetService);
+        /**
+         * Alert box configuration object. Values here override preset values.
+         * Supports both legacy AlertBoxMetadata and ReactiveAlertBoxMetadata patterns.
+         */
+        this.props = {};
+        /**
+         * Resolved props after merging preset + explicit props.
+         */
+        this.resolvedProps = {};
+    }
     /** Whether this is using the legacy props pattern */
     get isLegacyProps() {
-        return 'text' in this.props && typeof this.props.text === 'object';
+        return 'text' in this.resolvedProps && typeof this.resolvedProps.text === 'object';
     }
     /** Get text props for legacy pattern */
     getLegacyTextProps() {
-        return this.props.text;
+        return this.resolvedProps.text;
     }
     ngOnInit() {
+        this.resolveProps();
         if (!this.isLegacyProps) {
             this.initializeTextProps();
         }
     }
+    ngOnChanges(changes) {
+        if (changes['preset'] || changes['props']) {
+            this.resolveProps();
+            if (!this.isLegacyProps) {
+                this.initializeTextProps();
+            }
+        }
+    }
+    /**
+     * Merge preset configuration with explicit props.
+     * Explicit props take precedence over preset values.
+     */
+    resolveProps() {
+        const presetProps = this.preset
+            ? this.presets.get('alertBox', this.preset)
+            : {};
+        this.resolvedProps = {
+            ...presetProps,
+            ...this.props,
+        };
+    }
     initializeTextProps() {
-        const reactiveProps = this.props;
+        const reactiveProps = this.resolvedProps;
         // Base text properties with styling
         this.computedTextProps = {
             size: reactiveProps.textStyle?.size || 'medium',
@@ -5247,10 +5286,10 @@ class AlertBoxComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AlertBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AlertBoxComponent, isStandalone: true, selector: "val-alert-box", inputs: { props: "props" }, ngImport: i0, template: `
-    <val-box [props]="props.box">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AlertBoxComponent, isStandalone: true, selector: "val-alert-box", inputs: { preset: "preset", props: "props" }, usesOnChanges: true, ngImport: i0, template: `
+    <val-box [props]="resolvedProps.box">
       <div class="content-container" body>
-        <val-icon [props]="props.icon"></val-icon>
+        <val-icon [props]="resolvedProps.icon"></val-icon>
         <!-- Support both legacy and reactive patterns -->
         @if (isLegacyProps) {
           <val-text class="text" [props]="getLegacyTextProps()" />
@@ -5264,9 +5303,9 @@ class AlertBoxComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AlertBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'val-alert-box', standalone: true, imports: [CommonModule, BoxComponent, IconComponent, TextComponent], template: `
-    <val-box [props]="props.box">
+    <val-box [props]="resolvedProps.box">
       <div class="content-container" body>
-        <val-icon [props]="props.icon"></val-icon>
+        <val-icon [props]="resolvedProps.icon"></val-icon>
         <!-- Support both legacy and reactive patterns -->
         @if (isLegacyProps) {
           <val-text class="text" [props]="getLegacyTextProps()" />
@@ -5276,7 +5315,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       </div>
     </val-box>
   `, styles: [":root{--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)}@media (prefers-color-scheme: dark){:root{--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)}.text{margin-left:.25rem}.content-container{display:flex;align-items:flex-start}\n"] }]
-        }], propDecorators: { props: [{
+        }], propDecorators: { preset: [{
+                type: Input
+            }], props: [{
                 type: Input
             }] } });
 
@@ -5358,15 +5399,37 @@ var CardSection;
  * val-card
  *
  * A flexible card component supporting images, titles, content, actions, and custom sections.
+ * Supports presets for reusable configurations.
  *
- * @example
- * <val-card [props]="{ type: 'native', title: 'Card', image: 'url', content: '...', actions: [...] }" (onClick)="handler($event)"></val-card>
+ * @example With preset (recommended):
+ * <val-card preset="feature" [props]="{ title: 'Card', image: 'url', content: '...' }" (onClick)="handler($event)"></val-card>
  *
- * @input props: CardMetadata - Configuration for the card (type, title, image, content, actions, etc.)
+ * @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
  */
 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.
          */
@@ -5375,64 +5438,82 @@ class CardComponent {
         this.actionTypes = ToolbarActionType;
         this.sections = CardSection;
     }
-    ngOnInit() { }
+    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: "14.0.0", version: "18.2.14", type: CardComponent, isStandalone: true, selector: "val-card", inputs: { props: "props" }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
-    <ion-card *ngIf="props.type === types.native">
-      <img alt="image" [src]="props.image" />
-      <ion-card-header *ngIf="props.title || props.overtitle">
-        <ion-card-title *ngIf="props.title">{{ props.title }}</ion-card-title>
-        <ion-card-subtitle *ngIf="props.overtitle">{{ props.overtitle }}</ion-card-subtitle>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.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">
+      <img alt="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="props.content">{{ props.content }}</ion-card-content>
+      <ion-card-content *ngIf="resolvedProps.content">{{ resolvedProps.content }}</ion-card-content>
 
       <val-button
-        *ngFor="let b of props.footerActions"
+        *ngFor="let b of resolvedProps.footerActions"
         [props]="b"
         (onClick)="clickHandler(sections.footer, b.token)"
       ></val-button>
     </ion-card>
 
     <ion-card
-      *ngIf="props.type === types.tappable"
-      (click)="clickHandler(sections.content, props.token)"
+      *ngIf="resolvedProps.type === types.tappable"
+      (click)="clickHandler(sections.content, resolvedProps.token)"
       class="tapable"
     >
-      <img alt="image" [src]="props.image" />
-      <ion-card-header *ngIf="props.title || props.overtitle">
-        <ion-card-title *ngIf="props.title">{{ props.title }}</ion-card-title>
-        <ion-card-subtitle *ngIf="props.overtitle">{{ props.overtitle }}</ion-card-subtitle>
+      <img alt="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="props.content">{{ props.content }}</ion-card-content>
+      <ion-card-content *ngIf="resolvedProps.content">{{ resolvedProps.content }}</ion-card-content>
     </ion-card>
 
     <ion-card
-      *ngIf="props.type === types.checker"
-      (click)="clickHandler(sections.content, props.token)"
+      *ngIf="resolvedProps.type === types.checker"
+      (click)="clickHandler(sections.content, resolvedProps.token)"
       class="tapable"
     >
-      <ion-card-header *ngIf="props.title || props.overtitle" class="checker">
+      <ion-card-header *ngIf="resolvedProps.title || resolvedProps.overtitle" class="checker">
         <div>
-          <ion-card-subtitle *ngIf="props.overtitle">{{ props.overtitle }}</ion-card-subtitle>
-          <ion-card-title *ngIf="props.title">{{ props.title }}</ion-card-title>
+          <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]="props.selected"></ion-checkbox>
+          <ion-checkbox [checked]="resolvedProps.selected"></ion-checkbox>
         </div>
       </ion-card-header>
 
-      <ion-card-content *ngIf="props.content">{{ props.content }}</ion-card-content>
+      <ion-card-content *ngIf="resolvedProps.content">{{ resolvedProps.content }}</ion-card-content>
     </ion-card>
 
-    <ion-card *ngIf="props.type === types.complex" class="complex">
+    <ion-card *ngIf="resolvedProps.type === types.complex" class="complex">
       <ion-card-header class="complex-header">
-        <ion-buttons style="display: flex; align-items: center" *ngIf="props.leftActions.length > 0">
-          <ng-container *ngFor="let action of props.leftActions">
+        <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)"
@@ -5456,13 +5537,13 @@ class CardComponent {
             >
               {{ action.description }}
             </ion-button>
-            <div *ngIf="props.headerText">
-              <val-text [props]="{ content: props.headerText, color: 'dark', bold: true, size: 'medium' }" />
+            <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="props.rightActions.length > 0">
-          <ng-container *ngFor="let action of props.rightActions">
+        <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)"
@@ -5490,27 +5571,27 @@ class CardComponent {
         </ion-buttons>
       </ion-card-header>
 
-      <div class="tapable" (click)="clickHandler(sections.content, props.token)">
-        <ion-card-header *ngIf="props.title || props.overtitle" class="complex-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="props.overtitle">{{ props.overtitle }}</ion-card-subtitle>
-            <ion-card-title *ngIf="props.title">{{ props.title }}</ion-card-title>
+            <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>
 
-        <img alt="image" [src]="props.image" />
-        <ion-card-content *ngIf="props.content" class="complex-content">{{ props.content }}</ion-card-content>
+        <img alt="image" [src]="resolvedProps.image" />
+        <ion-card-content *ngIf="resolvedProps.content" class="complex-content">{{ resolvedProps.content }}</ion-card-content>
       </div>
       <val-button
-        *ngFor="let b of props.footerActions"
+        *ngFor="let b of resolvedProps.footerActions"
         [props]="b"
         (onClick)="clickHandler(sections.footer, b.token)"
       ></val-button>
       <ion-buttons
         style="display: flex; align-items: center; justify-content: flex-end; margin: 8px"
-        *ngIf="props.footerComplexActions.length > 0"
+        *ngIf="resolvedProps.footerComplexActions?.length > 0"
       >
-        <ng-container *ngFor="let action of props.footerComplexActions">
+        <ng-container *ngFor="let action of resolvedProps.footerComplexActions">
           <ion-button
             *ngIf="action.type === actionTypes.ICON"
             (click)="clickHandler(sections.footerExtra, action.token)"
@@ -5558,58 +5639,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         IonButton,
                         IonIcon,
                     ], template: `
-    <ion-card *ngIf="props.type === types.native">
-      <img alt="image" [src]="props.image" />
-      <ion-card-header *ngIf="props.title || props.overtitle">
-        <ion-card-title *ngIf="props.title">{{ props.title }}</ion-card-title>
-        <ion-card-subtitle *ngIf="props.overtitle">{{ props.overtitle }}</ion-card-subtitle>
+    <ion-card *ngIf="resolvedProps.type === types.native">
+      <img alt="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="props.content">{{ props.content }}</ion-card-content>
+      <ion-card-content *ngIf="resolvedProps.content">{{ resolvedProps.content }}</ion-card-content>
 
       <val-button
-        *ngFor="let b of props.footerActions"
+        *ngFor="let b of resolvedProps.footerActions"
         [props]="b"
         (onClick)="clickHandler(sections.footer, b.token)"
       ></val-button>
     </ion-card>
 
     <ion-card
-      *ngIf="props.type === types.tappable"
-      (click)="clickHandler(sections.content, props.token)"
+      *ngIf="resolvedProps.type === types.tappable"
+      (click)="clickHandler(sections.content, resolvedProps.token)"
       class="tapable"
     >
-      <img alt="image" [src]="props.image" />
-      <ion-card-header *ngIf="props.title || props.overtitle">
-        <ion-card-title *ngIf="props.title">{{ props.title }}</ion-card-title>
-        <ion-card-subtitle *ngIf="props.overtitle">{{ props.overtitle }}</ion-card-subtitle>
+      <img alt="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="props.content">{{ props.content }}</ion-card-content>
+      <ion-card-content *ngIf="resolvedProps.content">{{ resolvedProps.content }}</ion-card-content>
     </ion-card>
 
     <ion-card
-      *ngIf="props.type === types.checker"
-      (click)="clickHandler(sections.content, props.token)"
+      *ngIf="resolvedProps.type === types.checker"
+      (click)="clickHandler(sections.content, resolvedProps.token)"
       class="tapable"
     >
-      <ion-card-header *ngIf="props.title || props.overtitle" class="checker">
+      <ion-card-header *ngIf="resolvedProps.title || resolvedProps.overtitle" class="checker">
         <div>
-          <ion-card-subtitle *ngIf="props.overtitle">{{ props.overtitle }}</ion-card-subtitle>
-          <ion-card-title *ngIf="props.title">{{ props.title }}</ion-card-title>
+          <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]="props.selected"></ion-checkbox>
+          <ion-checkbox [checked]="resolvedProps.selected"></ion-checkbox>
         </div>
       </ion-card-header>
 
-      <ion-card-content *ngIf="props.content">{{ props.content }}</ion-card-content>
+      <ion-card-content *ngIf="resolvedProps.content">{{ resolvedProps.content }}</ion-card-content>
     </ion-card>
 
-    <ion-card *ngIf="props.type === types.complex" class="complex">
+    <ion-card *ngIf="resolvedProps.type === types.complex" class="complex">
       <ion-card-header class="complex-header">
-        <ion-buttons style="display: flex; align-items: center" *ngIf="props.leftActions.length > 0">
-          <ng-container *ngFor="let action of props.leftActions">
+        <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)"
@@ -5633,13 +5714,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             >
               {{ action.description }}
             </ion-button>
-            <div *ngIf="props.headerText">
-              <val-text [props]="{ content: props.headerText, color: 'dark', bold: true, size: 'medium' }" />
+            <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="props.rightActions.length > 0">
-          <ng-container *ngFor="let action of props.rightActions">
+        <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)"
@@ -5667,27 +5748,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </ion-buttons>
       </ion-card-header>
 
-      <div class="tapable" (click)="clickHandler(sections.content, props.token)">
-        <ion-card-header *ngIf="props.title || props.overtitle" class="complex-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="props.overtitle">{{ props.overtitle }}</ion-card-subtitle>
-            <ion-card-title *ngIf="props.title">{{ props.title }}</ion-card-title>
+            <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>
 
-        <img alt="image" [src]="props.image" />
-        <ion-card-content *ngIf="props.content" class="complex-content">{{ props.content }}</ion-card-content>
+        <img alt="image" [src]="resolvedProps.image" />
+        <ion-card-content *ngIf="resolvedProps.content" class="complex-content">{{ resolvedProps.content }}</ion-card-content>
       </div>
       <val-button
-        *ngFor="let b of props.footerActions"
+        *ngFor="let b of resolvedProps.footerActions"
         [props]="b"
         (onClick)="clickHandler(sections.footer, b.token)"
       ></val-button>
       <ion-buttons
         style="display: flex; align-items: center; justify-content: flex-end; margin: 8px"
-        *ngIf="props.footerComplexActions.length > 0"
+        *ngIf="resolvedProps.footerComplexActions?.length > 0"
       >
-        <ng-container *ngFor="let action of props.footerComplexActions">
+        <ng-container *ngFor="let action of resolvedProps.footerComplexActions">
           <ion-button
             *ngIf="action.type === actionTypes.ICON"
             (click)="clickHandler(sections.footerExtra, action.token)"
@@ -5716,7 +5797,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       </ion-buttons>
     </ion-card>
   `, styles: [":root{--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)}@media (prefers-color-scheme: dark){:root{--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{border-radius:24px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { props: [{
+        }], ctorParameters: () => [], propDecorators: { preset: [{
+                type: Input
+            }], props: [{
                 type: Input
             }], onClick: [{
                 type: Output
@@ -5936,31 +6019,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * val-email-input
  *
  * An email input field integrated with Angular forms.
- * For i18n support, pass the translated placeholder text via props.
+ * Supports presets for reusable configurations.
  *
- * @example Static placeholder:
- * <val-email-input [props]="{ control: myControl, placeholder: 'Enter your email' }"></val-email-input>
+ * @example With preset (recommended):
+ * <val-email-input preset="form-field" [props]="{ control: myControl, placeholder: 'Email' }"></val-email-input>
  *
- * @example With i18n:
- * ```typescript
- * // In component
- * emailProps = {
- *   control: this.emailControl,
- *   placeholder: this.langService.getText('Login', 'emailPlaceholder')
- * };
- * ```
+ * @example Static (backwards compatible):
+ * <val-email-input [props]="{ control: myControl, placeholder: 'Enter your email' }"></val-email-input>
  *
- * @input props: InputMetadata - Configuration for the input (form control, placeholder, etc.)
+ * @input preset: string - Name of preset to apply (e.g., 'form-field')
+ * @input props: InputMetadata - Configuration for the input (overrides preset values)
  */
 class EmailInputComponent {
-    ngOnInit() { }
+    constructor() {
+        this.presets = inject(PresetService);
+        /**
+         * Input configuration object. Values here override preset values.
+         * @type {InputMetadata}
+         * @property control - The Angular FormControl for the input.
+         * @property placeholder - The placeholder text.
+         */
+        this.props = {};
+        /**
+         * Resolved props after merging preset + explicit props.
+         */
+        this.resolvedProps = {};
+    }
+    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('emailInput', this.preset) : {};
+        this.resolvedProps = {
+            ...presetProps,
+            ...this.props,
+        };
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EmailInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EmailInputComponent, isStandalone: true, selector: "val-email-input", inputs: { props: "props" }, ngImport: i0, template: ` <ion-input [formControl]="props.control" type="email" [placeholder]="props.placeholder"></ion-input> `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EmailInputComponent, isStandalone: true, selector: "val-email-input", inputs: { preset: "preset", props: "props" }, usesOnChanges: true, ngImport: i0, template: ` <ion-input [formControl]="resolvedProps.control" type="email" [placeholder]="resolvedProps.placeholder"></ion-input> `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EmailInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-email-input', standalone: true, imports: [CommonModule, ReactiveFormsModule, IonInput], template: ` <ion-input [formControl]="props.control" type="email" [placeholder]="props.placeholder"></ion-input> ` }]
-        }], propDecorators: { props: [{
+            args: [{ selector: 'val-email-input', standalone: true, imports: [CommonModule, ReactiveFormsModule, IonInput], template: ` <ion-input [formControl]="resolvedProps.control" type="email" [placeholder]="resolvedProps.placeholder"></ion-input> ` }]
+        }], propDecorators: { preset: [{
+                type: Input
+            }], props: [{
                 type: Input
             }] } });
 
@@ -7473,35 +7585,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * val-password-input
  *
  * A password input field with show/hide toggle, integrated with Angular forms.
- * For i18n support, pass the translated placeholder text via props.
+ * Supports presets for reusable configurations.
  *
- * @example Static placeholder:
- * <val-password-input [props]="{ control: myControl, placeholder: 'Enter password' }"></val-password-input>
+ * @example With preset (recommended):
+ * <val-password-input preset="form-field" [props]="{ control: myControl, placeholder: 'Password' }"></val-password-input>
  *
- * @example With i18n:
- * ```typescript
- * // In component
- * passwordProps = {
- *   control: this.passwordControl,
- *   placeholder: this.langService.getText('Login', 'passwordPlaceholder')
- * };
- * ```
+ * @example Static (backwards compatible):
+ * <val-password-input [props]="{ control: myControl, placeholder: 'Enter password' }"></val-password-input>
  *
- * @input props: InputMetadata - Configuration for the input (form control, placeholder, etc.)
+ * @input preset: string - Name of preset to apply (e.g., 'form-field', 'login')
+ * @input props: InputMetadata - Configuration for the input (overrides preset values)
  */
 class PasswordInputComponent {
     constructor(icon) {
+        this.presets = inject(PresetService);
+        /**
+         * Input configuration object. Values here override preset values.
+         * @type {InputMetadata}
+         * @property control - The Angular FormControl for the input.
+         * @property placeholder - The placeholder text.
+         */
+        this.props = {};
+        /**
+         * Resolved props after merging preset + explicit props.
+         */
+        this.resolvedProps = {};
         this.hidePassword = true;
     }
-    ngOnInit() { }
+    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('passwordInput', this.preset) : {};
+        this.resolvedProps = {
+            ...presetProps,
+            ...this.props,
+        };
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PasswordInputComponent, deps: [{ token: IconService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PasswordInputComponent, isStandalone: true, selector: "val-password-input", inputs: { props: "props" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PasswordInputComponent, isStandalone: true, selector: "val-password-input", inputs: { preset: "preset", props: "props" }, usesOnChanges: true, ngImport: i0, template: `
     <div class="input-container">
       <ion-input
         class="sign-in__input-password"
-        [formControl]="props.control"
+        [formControl]="resolvedProps.control"
         [type]="hidePassword ? 'password' : 'text'"
-        [placeholder]="props.placeholder"
+        [placeholder]="resolvedProps.placeholder"
       ></ion-input>
       <ion-button color="dark" fill="clear" (click)="hidePassword = !hidePassword" size="small">
         <ion-icon slot="icon-only" [name]="hidePassword ? 'eye-off-outline' : 'eye-outline'"></ion-icon>
@@ -7515,16 +7652,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
     <div class="input-container">
       <ion-input
         class="sign-in__input-password"
-        [formControl]="props.control"
+        [formControl]="resolvedProps.control"
         [type]="hidePassword ? 'password' : 'text'"
-        [placeholder]="props.placeholder"
+        [placeholder]="resolvedProps.placeholder"
       ></ion-input>
       <ion-button color="dark" fill="clear" (click)="hidePassword = !hidePassword" size="small">
         <ion-icon slot="icon-only" [name]="hidePassword ? 'eye-off-outline' : 'eye-outline'"></ion-icon>
       </ion-button>
     </div>
   `, styles: [":root{--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)}@media (prefers-color-scheme: dark){:root{--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)}.section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.input-container{display:flex;align-items:center;flex-direction:row}\n"] }]
-        }], ctorParameters: () => [{ type: IconService }], propDecorators: { props: [{
+        }], ctorParameters: () => [{ type: IconService }], propDecorators: { preset: [{
+                type: Input
+            }], props: [{
                 type: Input
             }] } });
 
@@ -8042,8 +8181,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * val-select-input
  *
  * A select/dropdown input integrated with Angular forms, using Ionic's select component.
+ * Supports presets for reusable configurations.
  *
- * @example
+ * @example With preset (recommended):
+ * <val-select-input preset="form-field" [props]="{
+ *   control: myControl,
+ *   label: 'Seleccionar',
+ *   options: [{ id: '1', name: 'Opción 1' }]
+ * }"></val-select-input>
+ *
+ * @example Static (backwards compatible):
  * <val-select-input [props]="{
  *   control: myControl,
  *   label: 'Seleccionar',
@@ -8052,39 +8199,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  *   okText: 'Aceptar'
  * }"></val-select-input>
  *
- * @input props: InputMetadata - Configuration for the select input (form control, label, options, etc.)
+ * @input preset: string - Name of preset to apply (e.g., 'form-field')
+ * @input props: InputMetadata - Configuration for the select input (overrides preset values)
  */
 class SearchSelectorComponent {
     constructor() {
         this.i18n = inject(I18nService);
+        this.presets = inject(PresetService);
+        /**
+         * Input configuration object. Values here override preset values.
+         * @type {InputMetadata}
+         * @property control - The Angular FormControl for the select input.
+         * @property label - The label for the select.
+         * @property options - The available options for the select.
+         * @property placeholder - The placeholder text.
+         * @property modalHeader - Custom header text for the modal (optional, uses label if not provided).
+         * @property cancelText - Custom cancel button text (default: 'Cancelar').
+         * @property okText - Custom OK button text (default: 'Aceptar').
+         */
+        this.props = {};
+        /**
+         * Resolved props after merging preset + explicit props.
+         */
+        this.resolvedProps = {};
     }
     ngOnInit() {
-        if (this.props?.withDefault || this.props?.value) {
-            applyDefaultValueToControl(this.props);
+        this.resolveProps();
+        this.setupComponent();
+    }
+    ngOnChanges(changes) {
+        if (changes['preset'] || changes['props']) {
+            this.resolveProps();
+            this.setupComponent();
+        }
+    }
+    /**
+     * Merge preset configuration with explicit props.
+     * Explicit props take precedence over preset values.
+     */
+    resolveProps() {
+        const presetProps = this.preset ? this.presets.get('selectInput', this.preset) : {};
+        this.resolvedProps = {
+            ...presetProps,
+            ...this.props,
+        };
+    }
+    setupComponent() {
+        if (this.resolvedProps?.withDefault || this.resolvedProps?.value) {
+            applyDefaultValueToControl(this.resolvedProps);
         }
         // Set modal header from props or use label as fallback, then i18n default
-        const headerText = this.props.modalHeader || this.props.label || this.i18n.t('selectOption');
+        const headerText = this.resolvedProps.modalHeader || this.resolvedProps.label || this.i18n.t('selectOption');
         this.customModalOptions = {
             header: headerText,
             breakpoints: [0, 0.6],
             initialBreakpoint: 0.6,
         };
         // Set button texts from props or use i18n defaults
-        this.cancelText = this.props.cancelText || this.i18n.t('cancel');
-        this.okText = this.props.okText || this.i18n.t('ok');
+        this.cancelText = this.resolvedProps.cancelText || this.i18n.t('cancel');
+        this.okText = this.resolvedProps.okText || this.i18n.t('ok');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SearchSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SearchSelectorComponent, isStandalone: true, selector: "val-select-input", inputs: { props: "props" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SearchSelectorComponent, isStandalone: true, selector: "val-select-input", inputs: { preset: "preset", props: "props" }, usesOnChanges: true, ngImport: i0, template: `
     <ion-select
-      [formControl]="props.control"
-      [label]="props.label"
+      [formControl]="resolvedProps.control"
+      [label]="resolvedProps.label"
       [interfaceOptions]="customModalOptions"
       interface="modal"
-      [placeholder]="[props.placeholder]"
+      [placeholder]="[resolvedProps.placeholder]"
       [cancelText]="cancelText"
       [okText]="okText"
     >
-      @for (o of props.options; track o.id) {
+      @for (o of resolvedProps.options; track o.id) {
         <ion-select-option [value]="o.id">{{ o.name }}</ion-select-option>
       }
     </ion-select>
@@ -8094,20 +8280,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             type: Component,
             args: [{ selector: 'val-select-input', standalone: true, imports: [ReactiveFormsModule, IonSelect, IonSelectOption], template: `
     <ion-select
-      [formControl]="props.control"
-      [label]="props.label"
+      [formControl]="resolvedProps.control"
+      [label]="resolvedProps.label"
       [interfaceOptions]="customModalOptions"
       interface="modal"
-      [placeholder]="[props.placeholder]"
+      [placeholder]="[resolvedProps.placeholder]"
       [cancelText]="cancelText"
       [okText]="okText"
     >
-      @for (o of props.options; track o.id) {
+      @for (o of resolvedProps.options; track o.id) {
         <ion-select-option [value]="o.id">{{ o.name }}</ion-select-option>
       }
     </ion-select>
   ` }]
-        }], propDecorators: { props: [{
+        }], propDecorators: { preset: [{
+                type: Input
+            }], props: [{
                 type: Input
             }] } });
 
@@ -8628,39 +8816,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * val-text-input
  *
  * A text input field integrated with Angular forms.
- * For i18n support, pass the translated placeholder text via props.
+ * Supports presets for reusable configurations.
  *
- * @example Static placeholder:
- * <val-text-input [props]="{ control: myControl, placeholder: 'Enter text' }"></val-text-input>
+ * @example With preset (recommended):
+ * <val-text-input preset="form-field" [props]="{ control: myControl, placeholder: 'Enter text' }"></val-text-input>
  *
- * @example With i18n:
- * ```typescript
- * // In component
- * textProps = {
- *   control: this.textControl,
- *   placeholder: this.langService.getText('MyComponent', 'namePlaceholder')
- * };
- * ```
+ * @example Static (backwards compatible):
+ * <val-text-input [props]="{ control: myControl, placeholder: 'Enter text' }"></val-text-input>
  *
- * @input props: InputMetadata - Configuration for the input (form control, placeholder, label, etc.)
+ * @input preset: string - Name of preset to apply (e.g., 'form-field', 'search')
+ * @input props: InputMetadata - Configuration for the input (overrides preset values)
  */
 class TextInputComponent {
     constructor() {
+        this.presets = inject(PresetService);
+        /**
+         * Input configuration object. Values here override preset values.
+         * @type {InputMetadata}
+         * @property control - The Angular FormControl for the input.
+         * @property placeholder - The placeholder text.
+         * @property label, name, hint, type, validators, etc. - See InputMetadata for all options.
+         */
+        this.props = {};
+        /**
+         * Resolved props after merging preset + explicit props.
+         * Preset values are overridden by explicit props.
+         */
+        this.resolvedProps = {};
         this.states = ComponentStates;
     }
     ngOnInit() {
+        this.resolveProps();
         // Apply default values on initialization
-        if (this.props?.withDefault || this.props?.value) {
-            applyDefaultValueToControl(this.props);
+        if (this.resolvedProps?.withDefault || this.resolvedProps?.value) {
+            applyDefaultValueToControl(this.resolvedProps);
         }
     }
+    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('textInput', this.preset) : {};
+        // Merge: preset defaults < explicit props
+        this.resolvedProps = {
+            ...presetProps,
+            ...this.props,
+        };
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TextInputComponent, isStandalone: true, selector: "val-text-input", inputs: { props: "props" }, ngImport: i0, template: ` <ion-input [formControl]="props.control" type="text" [placeholder]="props.placeholder" /> `, isInline: true, styles: [":root{--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)}@media (prefers-color-scheme: dark){:root{--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)}.section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TextInputComponent, isStandalone: true, selector: "val-text-input", inputs: { preset: "preset", props: "props" }, usesOnChanges: true, ngImport: i0, template: ` <ion-input [formControl]="resolvedProps.control" type="text" [placeholder]="resolvedProps.placeholder" /> `, isInline: true, styles: [":root{--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)}@media (prefers-color-scheme: dark){:root{--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)}.section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-text-input', standalone: true, imports: [ReactiveFormsModule, IonInput], template: ` <ion-input [formControl]="props.control" type="text" [placeholder]="props.placeholder" /> `, styles: [":root{--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)}@media (prefers-color-scheme: dark){:root{--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)}.section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}\n"] }]
-        }], propDecorators: { props: [{
+            args: [{ selector: 'val-text-input', standalone: true, imports: [ReactiveFormsModule, IonInput], template: ` <ion-input [formControl]="resolvedProps.control" type="text" [placeholder]="resolvedProps.placeholder" /> `, styles: [":root{--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)}@media (prefers-color-scheme: dark){:root{--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)}.section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}\n"] }]
+        }], propDecorators: { preset: [{
+                type: Input
+            }], props: [{
                 type: Input
             }] } });
 
@@ -18315,7 +18532,7 @@ class FormComponent {
         ></val-button-group>
       </form>
     </div>
-  `, isInline: true, styles: [":root{--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)}@media (prefers-color-scheme: dark){:root{--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)}.section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}\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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextInputComponent, selector: "val-text-input", inputs: ["props"] }, { kind: "component", type: CheckInputComponent, selector: "val-check-input", inputs: ["props"] }, { kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: DividerComponent, selector: "val-divider", inputs: ["props"] }, { kind: "component", type: HintComponent, selector: "val-hint", inputs: ["props"] }, { kind: "component", type: CommentInputComponent, selector: "val-comment-input", inputs: ["props"] }, { kind: "component", type: DateInputComponent, selector: "val-date-input", inputs: ["props"] }, { kind: "component", type: FileInputComponent, selector: "val-file-input", inputs: ["props"] }, { kind: "component", type: HourInputComponent, selector: "val-hour-input", inputs: ["props"] }, { kind: "component", type: EmailInputComponent, selector: "val-email-input", inputs: ["props"] }, { kind: "component", type: NumberInputComponent, selector: "val-number-input", inputs: ["props"] }, { kind: "component", type: NumberFromToComponent, selector: "val-number-from-to", inputs: ["props"] }, { kind: "component", type: RadioInputComponent, selector: "val-radio-input", inputs: ["props"] }, { kind: "component", type: PasswordInputComponent, selector: "val-password-input", inputs: ["props"] }, { kind: "component", type: PinInputComponent, selector: "val-pin-input", inputs: ["props"] }, { kind: "component", type: SelectSearchComponent, selector: "val-select-search", inputs: ["label", "labelProperty", "valueProperty", "multiple", "placeholder", "props"] }, { kind: "component", type: MultiSelectSearchComponent, selector: "val-multi-select-search", inputs: ["label", "labelProperty", "valueProperty", "placeholder", "props"] }, { kind: "component", type: SearchSelectorComponent, selector: "val-select-input", inputs: ["props"] }] }); }
+  `, isInline: true, styles: [":root{--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)}@media (prefers-color-scheme: dark){:root{--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)}.section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}\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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextInputComponent, selector: "val-text-input", inputs: ["preset", "props"] }, { kind: "component", type: CheckInputComponent, selector: "val-check-input", inputs: ["props"] }, { kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: DividerComponent, selector: "val-divider", inputs: ["props"] }, { kind: "component", type: HintComponent, selector: "val-hint", inputs: ["props"] }, { kind: "component", type: CommentInputComponent, selector: "val-comment-input", inputs: ["props"] }, { kind: "component", type: DateInputComponent, selector: "val-date-input", inputs: ["props"] }, { kind: "component", type: FileInputComponent, selector: "val-file-input", inputs: ["props"] }, { kind: "component", type: HourInputComponent, selector: "val-hour-input", inputs: ["props"] }, { kind: "component", type: EmailInputComponent, selector: "val-email-input", inputs: ["preset", "props"] }, { kind: "component", type: NumberInputComponent, selector: "val-number-input", inputs: ["props"] }, { kind: "component", type: NumberFromToComponent, selector: "val-number-from-to", inputs: ["props"] }, { kind: "component", type: RadioInputComponent, selector: "val-radio-input", inputs: ["props"] }, { kind: "component", type: PasswordInputComponent, selector: "val-password-input", inputs: ["preset", "props"] }, { kind: "component", type: PinInputComponent, selector: "val-pin-input", inputs: ["props"] }, { kind: "component", type: SelectSearchComponent, selector: "val-select-search", inputs: ["label", "labelProperty", "valueProperty", "multiple", "placeholder", "props"] }, { kind: "component", type: MultiSelectSearchComponent, selector: "val-multi-select-search", inputs: ["label", "labelProperty", "valueProperty", "placeholder", "props"] }, { kind: "component", type: SearchSelectorComponent, selector: "val-select-input", inputs: ["preset", "props"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
@@ -34401,7 +34618,7 @@ class DocsApiTableComponent {
         <p class="docs-api-table__empty">No items to display.</p>
       }
     </div>
-  `, isInline: true, styles: [".docs-api-table{--table-bg: var(--ion-background-color, #fff);--table-border: var(--ion-border-color, #e0e0e0);--table-header-bg: #f8f9fa;--table-row-hover: rgba(0, 0, 0, .02);--table-text: var(--ion-text-color, #1a1a1a);--table-text-secondary: #5b6570;--code-bg: #f1f3f5;--code-text: #0d6efd;--type-bg: #e9ecef;--type-text: #495057;margin:1.5rem 0;font-family:var(--ion-font-family, system-ui, -apple-system, sans-serif)}.docs-api-table__title{font-size:1.25rem;font-weight:700;margin:0 0 1rem;color:var(--table-text)}.docs-api-table__wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}.docs-api-table__table{width:100%;min-width:550px;border-collapse:separate;border-spacing:0;font-size:.875rem;line-height:1.5;table-layout:fixed}.docs-api-table__th{text-align:left;padding:.625rem .75rem;font-weight:600;font-size:.8125rem;color:var(--table-text-secondary);background:var(--table-header-bg);border-bottom:2px solid var(--table-border);white-space:nowrap}.docs-api-table__th--name{width:120px}.docs-api-table__th--type{width:130px}.docs-api-table__th--default{width:80px}.docs-api-table__th--description{width:auto}.docs-api-table__td{padding:.625rem .75rem;border-bottom:1px solid var(--table-border);vertical-align:top;color:var(--table-text)}.docs-api-table__td--description{color:var(--table-text-secondary);line-height:1.5}.docs-api-table__row{transition:background-color .15s ease}.docs-api-table__row:hover{background:var(--table-row-hover)}.docs-api-table__row:last-child .docs-api-table__td{border-bottom:none}.docs-api-table__row--deprecated{opacity:.65}.docs-api-table__row--deprecated .docs-api-table__code{text-decoration:line-through}.docs-api-table__code{display:inline-block;font-family:SF Mono,Fira Code,Monaco,Consolas,monospace;font-size:.75rem;font-weight:500;color:var(--code-text);background:var(--code-bg);padding:.125rem .375rem;border-radius:4px;word-break:break-word}.docs-api-table__type,.docs-api-table__default{display:inline-block;font-family:SF Mono,Fira Code,Monaco,Consolas,monospace;font-size:.6875rem;font-weight:500;color:var(--type-text);background:var(--type-bg);padding:.1875rem .375rem;border-radius:4px;white-space:normal;word-break:break-word}.docs-api-table__required{color:var(--ion-color-danger, #dc3545);font-weight:700;margin-left:.25rem;font-size:1rem;vertical-align:middle}.docs-api-table__badge{display:inline-block;margin-left:.5rem;padding:.1875rem .5rem;font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.025em;border-radius:4px;background:#e9ecef;color:#495057;vertical-align:middle}.docs-api-table__badge--deprecated{background:#fff3cd;color:#856404}.docs-api-table__deprecation-note{margin-top:.5rem;font-size:.75rem;font-style:italic;color:#856404}.docs-api-table__empty{padding:3rem;text-align:center;color:var(--table-text-secondary);font-style:italic}.docs-api-table--bordered .docs-api-table__wrapper{border:1px solid var(--table-border);border-radius:12px;overflow-x:auto;overflow-y:hidden;background:var(--table-bg)}.docs-api-table--bordered .docs-api-table__th:first-child{border-top-left-radius:11px}.docs-api-table--bordered .docs-api-table__th:last-child{border-top-right-radius:11px}@media (max-width: 768px){.docs-api-table__table{display:block}.docs-api-table__table thead{display:none}.docs-api-table__table tbody{display:block}.docs-api-table__row{display:block;padding:1rem;margin-bottom:.5rem;border:1px solid var(--table-border);border-radius:8px;background:var(--table-bg)}.docs-api-table__row:last-child{margin-bottom:0}.docs-api-table__row:hover{background:var(--table-row-hover)}.docs-api-table__td{display:block;padding:.375rem 0;border:none!important}.docs-api-table__td:before{content:attr(data-label);display:block;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--table-text-secondary);margin-bottom:.25rem}.docs-api-table__td--name{padding-bottom:.5rem;margin-bottom:.5rem;border-bottom:1px solid var(--table-border)!important}.docs-api-table__td--description:before{display:none}.docs-api-table--bordered .docs-api-table__wrapper{border:none;border-radius:0;background:transparent}}:host-context(.dark) .docs-api-table,:host-context([color-scheme=dark]) .docs-api-table{--table-bg: #1e1e1e;--table-border: #3a3a3a;--table-header-bg: #252525;--table-row-hover: rgba(255, 255, 255, .03);--table-text: #f4f5f8;--table-text-secondary: #a0a0a0;--code-bg: rgba(56, 139, 253, .15);--code-text: #79b8ff;--type-bg: rgba(255, 255, 255, .08);--type-text: #c9d1d9}:host-context(.dark) .docs-api-table__badge,:host-context([color-scheme=dark]) .docs-api-table__badge{background:#ffffff14;color:#c9d1d9}:host-context(.dark) .docs-api-table__badge--deprecated,:host-context([color-scheme=dark]) .docs-api-table__badge--deprecated{background:#ffc10726;color:#ffc107}:host-context(.dark) .docs-api-table__deprecation-note,:host-context([color-scheme=dark]) .docs-api-table__deprecation-note{color:#ffc107}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+  `, isInline: true, styles: [".docs-api-table{--table-bg: var(--ion-background-color, #fff);--table-border: var(--ion-border-color, #e0e0e0);--table-header-bg: #f8f9fa;--table-row-hover: rgba(0, 0, 0, .02);--table-text: var(--ion-text-color, #1a1a1a);--table-text-secondary: #5b6570;--code-bg: #f1f3f5;--code-text: #0d6efd;--type-bg: #e9ecef;--type-text: #495057;margin:1.5rem 0;font-family:var(--ion-font-family, system-ui, -apple-system, sans-serif)}.docs-api-table__title{font-size:1.25rem;font-weight:700;margin:0 0 1rem;color:var(--table-text)}.docs-api-table__wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}.docs-api-table__table{width:100%;min-width:620px;border-collapse:separate;border-spacing:0;font-size:.875rem;line-height:1.5;table-layout:fixed}.docs-api-table__th{text-align:left;padding:.625rem .75rem;font-weight:600;font-size:.8125rem;color:var(--table-text-secondary);background:var(--table-header-bg);border-bottom:2px solid var(--table-border);white-space:nowrap}.docs-api-table__th--name{width:120px}.docs-api-table__th--type{width:160px}.docs-api-table__th--default{width:110px}.docs-api-table__th--description{width:auto}.docs-api-table__td{padding:.625rem .75rem;border-bottom:1px solid var(--table-border);vertical-align:top;color:var(--table-text)}.docs-api-table__td--description{color:var(--table-text-secondary);line-height:1.5}.docs-api-table__row{transition:background-color .15s ease}.docs-api-table__row:hover{background:var(--table-row-hover)}.docs-api-table__row:last-child .docs-api-table__td{border-bottom:none}.docs-api-table__row--deprecated{opacity:.65}.docs-api-table__row--deprecated .docs-api-table__code{text-decoration:line-through}.docs-api-table__code{display:inline-block;font-family:SF Mono,Fira Code,Monaco,Consolas,monospace;font-size:.75rem;font-weight:500;color:var(--code-text);background:var(--code-bg);padding:.125rem .375rem;border-radius:4px;word-break:break-word}.docs-api-table__type,.docs-api-table__default{display:inline-block;font-family:SF Mono,Fira Code,Monaco,Consolas,monospace;font-size:.6875rem;font-weight:500;color:var(--type-text);background:var(--type-bg);padding:.1875rem .375rem;border-radius:4px;white-space:normal;word-break:break-word}.docs-api-table__required{color:var(--ion-color-danger, #dc3545);font-weight:700;margin-left:.25rem;font-size:1rem;vertical-align:middle}.docs-api-table__badge{display:inline-block;margin-left:.5rem;padding:.1875rem .5rem;font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.025em;border-radius:4px;background:#e9ecef;color:#495057;vertical-align:middle}.docs-api-table__badge--deprecated{background:#fff3cd;color:#856404}.docs-api-table__deprecation-note{margin-top:.5rem;font-size:.75rem;font-style:italic;color:#856404}.docs-api-table__empty{padding:3rem;text-align:center;color:var(--table-text-secondary);font-style:italic}.docs-api-table--bordered .docs-api-table__wrapper{border:1px solid var(--table-border);border-radius:12px;overflow-x:auto;overflow-y:hidden;background:var(--table-bg)}.docs-api-table--bordered .docs-api-table__th:first-child{border-top-left-radius:11px}.docs-api-table--bordered .docs-api-table__th:last-child{border-top-right-radius:11px}@media (max-width: 768px){.docs-api-table__table{display:block}.docs-api-table__table thead{display:none}.docs-api-table__table tbody{display:block}.docs-api-table__row{display:block;padding:1rem;margin-bottom:.5rem;border:1px solid var(--table-border);border-radius:8px;background:var(--table-bg)}.docs-api-table__row:last-child{margin-bottom:0}.docs-api-table__row:hover{background:var(--table-row-hover)}.docs-api-table__td{display:block;padding:.375rem 0;border:none!important}.docs-api-table__td:before{content:attr(data-label);display:block;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--table-text-secondary);margin-bottom:.25rem}.docs-api-table__td--name{padding-bottom:.5rem;margin-bottom:.5rem;border-bottom:1px solid var(--table-border)!important}.docs-api-table__td--description:before{display:none}.docs-api-table--bordered .docs-api-table__wrapper{border:none;border-radius:0;background:transparent}}:host-context(.dark) .docs-api-table,:host-context([color-scheme=dark]) .docs-api-table{--table-bg: #1e1e1e;--table-border: #3a3a3a;--table-header-bg: #252525;--table-row-hover: rgba(255, 255, 255, .03);--table-text: #f4f5f8;--table-text-secondary: #a0a0a0;--code-bg: rgba(56, 139, 253, .15);--code-text: #79b8ff;--type-bg: rgba(255, 255, 255, .08);--type-text: #c9d1d9}:host-context(.dark) .docs-api-table__badge,:host-context([color-scheme=dark]) .docs-api-table__badge{background:#ffffff14;color:#c9d1d9}:host-context(.dark) .docs-api-table__badge--deprecated,:host-context([color-scheme=dark]) .docs-api-table__badge--deprecated{background:#ffc10726;color:#ffc107}:host-context(.dark) .docs-api-table__deprecation-note,:host-context([color-scheme=dark]) .docs-api-table__deprecation-note{color:#ffc107}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DocsApiTableComponent, decorators: [{
             type: Component,
@@ -34488,7 +34705,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         <p class="docs-api-table__empty">No items to display.</p>
       }
     </div>
-  `, styles: [".docs-api-table{--table-bg: var(--ion-background-color, #fff);--table-border: var(--ion-border-color, #e0e0e0);--table-header-bg: #f8f9fa;--table-row-hover: rgba(0, 0, 0, .02);--table-text: var(--ion-text-color, #1a1a1a);--table-text-secondary: #5b6570;--code-bg: #f1f3f5;--code-text: #0d6efd;--type-bg: #e9ecef;--type-text: #495057;margin:1.5rem 0;font-family:var(--ion-font-family, system-ui, -apple-system, sans-serif)}.docs-api-table__title{font-size:1.25rem;font-weight:700;margin:0 0 1rem;color:var(--table-text)}.docs-api-table__wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}.docs-api-table__table{width:100%;min-width:550px;border-collapse:separate;border-spacing:0;font-size:.875rem;line-height:1.5;table-layout:fixed}.docs-api-table__th{text-align:left;padding:.625rem .75rem;font-weight:600;font-size:.8125rem;color:var(--table-text-secondary);background:var(--table-header-bg);border-bottom:2px solid var(--table-border);white-space:nowrap}.docs-api-table__th--name{width:120px}.docs-api-table__th--type{width:130px}.docs-api-table__th--default{width:80px}.docs-api-table__th--description{width:auto}.docs-api-table__td{padding:.625rem .75rem;border-bottom:1px solid var(--table-border);vertical-align:top;color:var(--table-text)}.docs-api-table__td--description{color:var(--table-text-secondary);line-height:1.5}.docs-api-table__row{transition:background-color .15s ease}.docs-api-table__row:hover{background:var(--table-row-hover)}.docs-api-table__row:last-child .docs-api-table__td{border-bottom:none}.docs-api-table__row--deprecated{opacity:.65}.docs-api-table__row--deprecated .docs-api-table__code{text-decoration:line-through}.docs-api-table__code{display:inline-block;font-family:SF Mono,Fira Code,Monaco,Consolas,monospace;font-size:.75rem;font-weight:500;color:var(--code-text);background:var(--code-bg);padding:.125rem .375rem;border-radius:4px;word-break:break-word}.docs-api-table__type,.docs-api-table__default{display:inline-block;font-family:SF Mono,Fira Code,Monaco,Consolas,monospace;font-size:.6875rem;font-weight:500;color:var(--type-text);background:var(--type-bg);padding:.1875rem .375rem;border-radius:4px;white-space:normal;word-break:break-word}.docs-api-table__required{color:var(--ion-color-danger, #dc3545);font-weight:700;margin-left:.25rem;font-size:1rem;vertical-align:middle}.docs-api-table__badge{display:inline-block;margin-left:.5rem;padding:.1875rem .5rem;font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.025em;border-radius:4px;background:#e9ecef;color:#495057;vertical-align:middle}.docs-api-table__badge--deprecated{background:#fff3cd;color:#856404}.docs-api-table__deprecation-note{margin-top:.5rem;font-size:.75rem;font-style:italic;color:#856404}.docs-api-table__empty{padding:3rem;text-align:center;color:var(--table-text-secondary);font-style:italic}.docs-api-table--bordered .docs-api-table__wrapper{border:1px solid var(--table-border);border-radius:12px;overflow-x:auto;overflow-y:hidden;background:var(--table-bg)}.docs-api-table--bordered .docs-api-table__th:first-child{border-top-left-radius:11px}.docs-api-table--bordered .docs-api-table__th:last-child{border-top-right-radius:11px}@media (max-width: 768px){.docs-api-table__table{display:block}.docs-api-table__table thead{display:none}.docs-api-table__table tbody{display:block}.docs-api-table__row{display:block;padding:1rem;margin-bottom:.5rem;border:1px solid var(--table-border);border-radius:8px;background:var(--table-bg)}.docs-api-table__row:last-child{margin-bottom:0}.docs-api-table__row:hover{background:var(--table-row-hover)}.docs-api-table__td{display:block;padding:.375rem 0;border:none!important}.docs-api-table__td:before{content:attr(data-label);display:block;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--table-text-secondary);margin-bottom:.25rem}.docs-api-table__td--name{padding-bottom:.5rem;margin-bottom:.5rem;border-bottom:1px solid var(--table-border)!important}.docs-api-table__td--description:before{display:none}.docs-api-table--bordered .docs-api-table__wrapper{border:none;border-radius:0;background:transparent}}:host-context(.dark) .docs-api-table,:host-context([color-scheme=dark]) .docs-api-table{--table-bg: #1e1e1e;--table-border: #3a3a3a;--table-header-bg: #252525;--table-row-hover: rgba(255, 255, 255, .03);--table-text: #f4f5f8;--table-text-secondary: #a0a0a0;--code-bg: rgba(56, 139, 253, .15);--code-text: #79b8ff;--type-bg: rgba(255, 255, 255, .08);--type-text: #c9d1d9}:host-context(.dark) .docs-api-table__badge,:host-context([color-scheme=dark]) .docs-api-table__badge{background:#ffffff14;color:#c9d1d9}:host-context(.dark) .docs-api-table__badge--deprecated,:host-context([color-scheme=dark]) .docs-api-table__badge--deprecated{background:#ffc10726;color:#ffc107}:host-context(.dark) .docs-api-table__deprecation-note,:host-context([color-scheme=dark]) .docs-api-table__deprecation-note{color:#ffc107}\n"] }]
+  `, styles: [".docs-api-table{--table-bg: var(--ion-background-color, #fff);--table-border: var(--ion-border-color, #e0e0e0);--table-header-bg: #f8f9fa;--table-row-hover: rgba(0, 0, 0, .02);--table-text: var(--ion-text-color, #1a1a1a);--table-text-secondary: #5b6570;--code-bg: #f1f3f5;--code-text: #0d6efd;--type-bg: #e9ecef;--type-text: #495057;margin:1.5rem 0;font-family:var(--ion-font-family, system-ui, -apple-system, sans-serif)}.docs-api-table__title{font-size:1.25rem;font-weight:700;margin:0 0 1rem;color:var(--table-text)}.docs-api-table__wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}.docs-api-table__table{width:100%;min-width:620px;border-collapse:separate;border-spacing:0;font-size:.875rem;line-height:1.5;table-layout:fixed}.docs-api-table__th{text-align:left;padding:.625rem .75rem;font-weight:600;font-size:.8125rem;color:var(--table-text-secondary);background:var(--table-header-bg);border-bottom:2px solid var(--table-border);white-space:nowrap}.docs-api-table__th--name{width:120px}.docs-api-table__th--type{width:160px}.docs-api-table__th--default{width:110px}.docs-api-table__th--description{width:auto}.docs-api-table__td{padding:.625rem .75rem;border-bottom:1px solid var(--table-border);vertical-align:top;color:var(--table-text)}.docs-api-table__td--description{color:var(--table-text-secondary);line-height:1.5}.docs-api-table__row{transition:background-color .15s ease}.docs-api-table__row:hover{background:var(--table-row-hover)}.docs-api-table__row:last-child .docs-api-table__td{border-bottom:none}.docs-api-table__row--deprecated{opacity:.65}.docs-api-table__row--deprecated .docs-api-table__code{text-decoration:line-through}.docs-api-table__code{display:inline-block;font-family:SF Mono,Fira Code,Monaco,Consolas,monospace;font-size:.75rem;font-weight:500;color:var(--code-text);background:var(--code-bg);padding:.125rem .375rem;border-radius:4px;word-break:break-word}.docs-api-table__type,.docs-api-table__default{display:inline-block;font-family:SF Mono,Fira Code,Monaco,Consolas,monospace;font-size:.6875rem;font-weight:500;color:var(--type-text);background:var(--type-bg);padding:.1875rem .375rem;border-radius:4px;white-space:normal;word-break:break-word}.docs-api-table__required{color:var(--ion-color-danger, #dc3545);font-weight:700;margin-left:.25rem;font-size:1rem;vertical-align:middle}.docs-api-table__badge{display:inline-block;margin-left:.5rem;padding:.1875rem .5rem;font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.025em;border-radius:4px;background:#e9ecef;color:#495057;vertical-align:middle}.docs-api-table__badge--deprecated{background:#fff3cd;color:#856404}.docs-api-table__deprecation-note{margin-top:.5rem;font-size:.75rem;font-style:italic;color:#856404}.docs-api-table__empty{padding:3rem;text-align:center;color:var(--table-text-secondary);font-style:italic}.docs-api-table--bordered .docs-api-table__wrapper{border:1px solid var(--table-border);border-radius:12px;overflow-x:auto;overflow-y:hidden;background:var(--table-bg)}.docs-api-table--bordered .docs-api-table__th:first-child{border-top-left-radius:11px}.docs-api-table--bordered .docs-api-table__th:last-child{border-top-right-radius:11px}@media (max-width: 768px){.docs-api-table__table{display:block}.docs-api-table__table thead{display:none}.docs-api-table__table tbody{display:block}.docs-api-table__row{display:block;padding:1rem;margin-bottom:.5rem;border:1px solid var(--table-border);border-radius:8px;background:var(--table-bg)}.docs-api-table__row:last-child{margin-bottom:0}.docs-api-table__row:hover{background:var(--table-row-hover)}.docs-api-table__td{display:block;padding:.375rem 0;border:none!important}.docs-api-table__td:before{content:attr(data-label);display:block;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--table-text-secondary);margin-bottom:.25rem}.docs-api-table__td--name{padding-bottom:.5rem;margin-bottom:.5rem;border-bottom:1px solid var(--table-border)!important}.docs-api-table__td--description:before{display:none}.docs-api-table--bordered .docs-api-table__wrapper{border:none;border-radius:0;background:transparent}}:host-context(.dark) .docs-api-table,:host-context([color-scheme=dark]) .docs-api-table{--table-bg: #1e1e1e;--table-border: #3a3a3a;--table-header-bg: #252525;--table-row-hover: rgba(255, 255, 255, .03);--table-text: #f4f5f8;--table-text-secondary: #a0a0a0;--code-bg: rgba(56, 139, 253, .15);--code-text: #79b8ff;--type-bg: rgba(255, 255, 255, .08);--type-text: #c9d1d9}:host-context(.dark) .docs-api-table__badge,:host-context([color-scheme=dark]) .docs-api-table__badge{background:#ffffff14;color:#c9d1d9}:host-context(.dark) .docs-api-table__badge--deprecated,:host-context([color-scheme=dark]) .docs-api-table__badge--deprecated{background:#ffc10726;color:#ffc107}:host-context(.dark) .docs-api-table__deprecation-note,:host-context([color-scheme=dark]) .docs-api-table__deprecation-note{color:#ffc107}\n"] }]
         }], propDecorators: { props: [{
                 type: Input
             }] } });
@@ -34641,7 +34858,7 @@ class DocsCodeExampleComponent {
         </div>
       }
     </div>
-  `, isInline: true, styles: [".docs-code-example{margin:1.5rem 0;border:1px solid #f2f6f7;border-radius:12px;overflow:hidden;box-shadow:0 2px 4px #0000000d;background:#fff}.docs-code-example__header{padding:1rem 1.25rem;border-bottom:1px solid #f2f6f7;background:#fff}.docs-code-example__title{font-size:1rem;font-weight:600;margin:0 0 .25rem;color:var(--ion-text-color, #1a1a1a)}.docs-code-example__description{font-size:.875rem;color:var(--ion-color-medium, #666);margin:0}.docs-code-example__external-link{display:inline-flex;align-items:center;gap:.25rem;margin-top:.5rem;font-size:.8125rem;color:#555;text-decoration:none}.docs-code-example__external-link:hover{color:#1a1a1a;text-decoration:underline}.docs-code-example__external-link ion-icon{font-size:.875rem}.docs-code-example__preview{padding:1.5rem;background:#fff;border-bottom:1px solid #f2f6f7}.docs-code-example__tabs{background:#f6f9fa}.docs-code-example__tab-list{display:flex;gap:2px;border-bottom:1px solid #f2f6f7;overflow-x:auto;scrollbar-width:thin;font-size:12px}.docs-code-example__tab{padding:10px 18px 8px;font-family:Roboto Mono,SF Mono,Monaco,monospace;font-size:.95em;font-weight:500;color:#899396;background:transparent;border:1px solid transparent;border-bottom:none;border-radius:8px 8px 0 0;cursor:pointer;transition:background .2s,color .2s;margin-bottom:-1px;white-space:nowrap}.docs-code-example__tab:hover{background:#e8eef2}.docs-code-example__tab--active{background:#fff;color:#19422d;border:1px solid #f2f6f7;border-bottom:1px solid #ffffff;font-weight:600;z-index:2}.docs-code-example__code-panel{position:relative;background:#fff}.docs-code-example__code-header{position:sticky;top:10px;float:right;z-index:10;height:0;margin-right:15px}.docs-code-example__copy-btn{--padding-start: 2px;--padding-end: 2px;min-width:28px;min-height:28px;height:28px;width:28px;--color: var(--ion-color-primary);--background: rgba(255, 255, 255, .7);border-radius:6px;box-shadow:0 1px 4px #0000000d;opacity:0;transition:opacity .2s ease}.docs-code-example__code-panel:hover .docs-code-example__copy-btn{opacity:1}.docs-code-example__copy-btn:hover{--background: rgba(255, 255, 255, .9)}.docs-code-example__pre{margin:0;padding:1rem 1.25rem;overflow-x:auto;overflow-y:auto;max-height:30rem;min-height:3rem;background:#fff;white-space:pre;word-break:normal}.docs-code-example__pre--line-numbers{padding-left:3rem;counter-reset:line}.docs-code-example__code{display:block;font-family:Roboto Mono,SF Mono,Monaco,Courier New,monospace;font-size:.85em;line-height:1.5;color:#24292f;white-space:inherit;word-break:normal;tab-size:2}.docs-code-example__code .token{text-decoration:none!important}.docs-code-example__code .token.comment,.docs-code-example__code .token.prolog,.docs-code-example__code .token.doctype,.docs-code-example__code .token.cdata{color:#6a737d}.docs-code-example__code .token.punctuation{color:#24292f}.docs-code-example__code .token.property,.docs-code-example__code .token.tag,.docs-code-example__code .token.boolean,.docs-code-example__code .token.number,.docs-code-example__code .token.constant,.docs-code-example__code .token.symbol,.docs-code-example__code .token.deleted{color:#005cc5}.docs-code-example__code .token.selector,.docs-code-example__code .token.attr-name,.docs-code-example__code .token.string,.docs-code-example__code .token.char,.docs-code-example__code .token.builtin,.docs-code-example__code .token.inserted{color:#22863a}.docs-code-example__code .token.operator,.docs-code-example__code .token.entity,.docs-code-example__code .token.url{color:#24292f}.docs-code-example__code .token.atrule,.docs-code-example__code .token.attr-value,.docs-code-example__code .token.keyword{color:#d73a49}.docs-code-example__code .token.function,.docs-code-example__code .token.class-name{color:#6f42c1}.docs-code-example__code .token.regex,.docs-code-example__code .token.important,.docs-code-example__code .token.variable{color:#e36209}@media (max-width: 600px){.docs-code-example{border-radius:8px}.docs-code-example__tab-list{font-size:11px}.docs-code-example__pre{max-height:20rem}.docs-code-example__code{font-size:.75em}}@media (prefers-color-scheme: dark){.docs-code-example{background:#21252b;border-color:#3b4048;box-shadow:0 4px 15px #0009}.docs-code-example__header{background:#21252b;border-color:#3b4048}.docs-code-example__title{color:#c9d1d9}.docs-code-example__preview{background:#161b22;border-color:#3b4048}.docs-code-example__tabs{background:#1a1a1a}.docs-code-example__tab-list{border-color:#3b4048}.docs-code-example__tab{color:#8b949e}.docs-code-example__tab:hover{background:#21252b}.docs-code-example__tab--active{background:#282c34;color:#c9d1d9;border-color:#3b4048;border-bottom-color:#282c34}.docs-code-example__code-panel,.docs-code-example__pre{background:#161b22}.docs-code-example__code{color:#c9d1d9}.docs-code-example__copy-btn{--background: rgba(0, 0, 0, .4)}.docs-code-example__copy-btn:hover{--background: rgba(0, 0, 0, .6)}.docs-code-example__code .token.comment,.docs-code-example__code .token.prolog,.docs-code-example__code .token.doctype,.docs-code-example__code .token.cdata{color:#8b949e}.docs-code-example__code .token.punctuation{color:#c9d1d9}.docs-code-example__code .token.property,.docs-code-example__code .token.tag,.docs-code-example__code .token.boolean,.docs-code-example__code .token.number,.docs-code-example__code .token.constant,.docs-code-example__code .token.symbol,.docs-code-example__code .token.deleted{color:#79c0ff}.docs-code-example__code .token.selector,.docs-code-example__code .token.attr-name,.docs-code-example__code .token.string,.docs-code-example__code .token.char,.docs-code-example__code .token.builtin,.docs-code-example__code .token.inserted{color:#7ee787}.docs-code-example__code .token.operator,.docs-code-example__code .token.entity,.docs-code-example__code .token.url{color:#c9d1d9}.docs-code-example__code .token.atrule,.docs-code-example__code .token.attr-value,.docs-code-example__code .token.keyword{color:#ff7b72}.docs-code-example__code .token.function,.docs-code-example__code .token.class-name{color:#d2a8ff}.docs-code-example__code .token.regex,.docs-code-example__code .token.important,.docs-code-example__code .token.variable{color:#ffa657}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { 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"] }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: [".docs-code-example{margin:1.5rem 0;border:1px solid #f2f6f7;border-radius:12px;overflow:hidden;box-shadow:0 2px 4px #0000000d;background:#fff}.docs-code-example__header{padding:1rem 1.25rem;border-bottom:1px solid #f2f6f7;background:#fff}.docs-code-example__title{font-size:1rem;font-weight:600;margin:0 0 .25rem;color:var(--ion-text-color, #1a1a1a)}.docs-code-example__description{font-size:.875rem;color:var(--ion-color-medium, #666);margin:0}.docs-code-example__external-link{display:inline-flex;align-items:center;gap:.25rem;margin-top:.5rem;font-size:.8125rem;color:#555;text-decoration:none}.docs-code-example__external-link:hover{color:#1a1a1a;text-decoration:underline}.docs-code-example__external-link ion-icon{font-size:.875rem}.docs-code-example__preview{padding:1.5rem;background:#fff;border-bottom:1px solid #f2f6f7}.docs-code-example__tabs{background:#f6f9fa}.docs-code-example__tab-list{display:flex;gap:2px;border-bottom:1px solid #f2f6f7;overflow-x:auto;scrollbar-width:thin;font-size:12px}.docs-code-example__tab{padding:10px 18px 8px;font-family:Roboto Mono,SF Mono,Monaco,monospace;font-size:.95em;font-weight:500;color:#899396;background:transparent;border:1px solid transparent;border-bottom:none;border-radius:8px 8px 0 0;cursor:pointer;transition:background .2s,color .2s;margin-bottom:-1px;white-space:nowrap}.docs-code-example__tab:hover{background:#e8eef2}.docs-code-example__tab--active{background:#fff;color:#19422d;border:1px solid #f2f6f7;border-bottom:1px solid #ffffff;font-weight:600;z-index:2}.docs-code-example__code-panel{position:relative;background:#fff}.docs-code-example__code-header{position:sticky;top:10px;float:right;z-index:10;height:0;margin-right:15px}.docs-code-example__copy-btn{--padding-start: 2px;--padding-end: 2px;min-width:28px;min-height:28px;height:28px;width:28px;--color: var(--ion-color-primary);--background: rgba(255, 255, 255, .7);border-radius:6px;box-shadow:0 1px 4px #0000000d;opacity:0;transition:opacity .2s ease}.docs-code-example__code-panel:hover .docs-code-example__copy-btn{opacity:1}.docs-code-example__copy-btn:hover{--background: rgba(255, 255, 255, .9)}.docs-code-example__pre{margin:0;padding:1rem 1.25rem;overflow-x:auto;overflow-y:auto;max-height:30rem;min-height:3rem;background:#fff;white-space:pre;word-break:normal}.docs-code-example__pre--line-numbers{padding-left:3rem;counter-reset:line}.docs-code-example__code{display:block;font-family:Roboto Mono,SF Mono,Monaco,Courier New,monospace;font-size:.75em;line-height:1.5;color:#24292f;white-space:inherit;word-break:normal;tab-size:2}.docs-code-example__code .token{text-decoration:none!important}.docs-code-example__code .token.comment,.docs-code-example__code .token.prolog,.docs-code-example__code .token.doctype,.docs-code-example__code .token.cdata{color:#6a737d}.docs-code-example__code .token.punctuation{color:#24292f}.docs-code-example__code .token.property,.docs-code-example__code .token.tag,.docs-code-example__code .token.boolean,.docs-code-example__code .token.number,.docs-code-example__code .token.constant,.docs-code-example__code .token.symbol,.docs-code-example__code .token.deleted{color:#005cc5}.docs-code-example__code .token.selector,.docs-code-example__code .token.attr-name,.docs-code-example__code .token.string,.docs-code-example__code .token.char,.docs-code-example__code .token.builtin,.docs-code-example__code .token.inserted{color:#22863a}.docs-code-example__code .token.operator,.docs-code-example__code .token.entity,.docs-code-example__code .token.url{color:#24292f}.docs-code-example__code .token.atrule,.docs-code-example__code .token.attr-value,.docs-code-example__code .token.keyword{color:#d73a49}.docs-code-example__code .token.function,.docs-code-example__code .token.class-name{color:#6f42c1}.docs-code-example__code .token.regex,.docs-code-example__code .token.important,.docs-code-example__code .token.variable{color:#e36209}@media (max-width: 600px){.docs-code-example{border-radius:8px}.docs-code-example__tab-list{font-size:11px}.docs-code-example__pre{max-height:20rem}.docs-code-example__code{font-size:.7em}}@media (prefers-color-scheme: dark){.docs-code-example{background:#21252b;border-color:#3b4048;box-shadow:0 4px 15px #0009}.docs-code-example__header{background:#21252b;border-color:#3b4048}.docs-code-example__title{color:#c9d1d9}.docs-code-example__preview{background:#161b22;border-color:#3b4048}.docs-code-example__tabs{background:#1a1a1a}.docs-code-example__tab-list{border-color:#3b4048}.docs-code-example__tab{color:#8b949e}.docs-code-example__tab:hover{background:#21252b}.docs-code-example__tab--active{background:#282c34;color:#c9d1d9;border-color:#3b4048;border-bottom-color:#282c34}.docs-code-example__code-panel,.docs-code-example__pre{background:#161b22}.docs-code-example__code{color:#c9d1d9}.docs-code-example__copy-btn{--background: rgba(0, 0, 0, .4)}.docs-code-example__copy-btn:hover{--background: rgba(0, 0, 0, .6)}.docs-code-example__code .token.comment,.docs-code-example__code .token.prolog,.docs-code-example__code .token.doctype,.docs-code-example__code .token.cdata{color:#8b949e}.docs-code-example__code .token.punctuation{color:#c9d1d9}.docs-code-example__code .token.property,.docs-code-example__code .token.tag,.docs-code-example__code .token.boolean,.docs-code-example__code .token.number,.docs-code-example__code .token.constant,.docs-code-example__code .token.symbol,.docs-code-example__code .token.deleted{color:#79c0ff}.docs-code-example__code .token.selector,.docs-code-example__code .token.attr-name,.docs-code-example__code .token.string,.docs-code-example__code .token.char,.docs-code-example__code .token.builtin,.docs-code-example__code .token.inserted{color:#7ee787}.docs-code-example__code .token.operator,.docs-code-example__code .token.entity,.docs-code-example__code .token.url{color:#c9d1d9}.docs-code-example__code .token.atrule,.docs-code-example__code .token.attr-value,.docs-code-example__code .token.keyword{color:#ff7b72}.docs-code-example__code .token.function,.docs-code-example__code .token.class-name{color:#d2a8ff}.docs-code-example__code .token.regex,.docs-code-example__code .token.important,.docs-code-example__code .token.variable{color:#ffa657}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { 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"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DocsCodeExampleComponent, decorators: [{
             type: Component,
@@ -34724,7 +34941,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </div>
       }
     </div>
-  `, styles: [".docs-code-example{margin:1.5rem 0;border:1px solid #f2f6f7;border-radius:12px;overflow:hidden;box-shadow:0 2px 4px #0000000d;background:#fff}.docs-code-example__header{padding:1rem 1.25rem;border-bottom:1px solid #f2f6f7;background:#fff}.docs-code-example__title{font-size:1rem;font-weight:600;margin:0 0 .25rem;color:var(--ion-text-color, #1a1a1a)}.docs-code-example__description{font-size:.875rem;color:var(--ion-color-medium, #666);margin:0}.docs-code-example__external-link{display:inline-flex;align-items:center;gap:.25rem;margin-top:.5rem;font-size:.8125rem;color:#555;text-decoration:none}.docs-code-example__external-link:hover{color:#1a1a1a;text-decoration:underline}.docs-code-example__external-link ion-icon{font-size:.875rem}.docs-code-example__preview{padding:1.5rem;background:#fff;border-bottom:1px solid #f2f6f7}.docs-code-example__tabs{background:#f6f9fa}.docs-code-example__tab-list{display:flex;gap:2px;border-bottom:1px solid #f2f6f7;overflow-x:auto;scrollbar-width:thin;font-size:12px}.docs-code-example__tab{padding:10px 18px 8px;font-family:Roboto Mono,SF Mono,Monaco,monospace;font-size:.95em;font-weight:500;color:#899396;background:transparent;border:1px solid transparent;border-bottom:none;border-radius:8px 8px 0 0;cursor:pointer;transition:background .2s,color .2s;margin-bottom:-1px;white-space:nowrap}.docs-code-example__tab:hover{background:#e8eef2}.docs-code-example__tab--active{background:#fff;color:#19422d;border:1px solid #f2f6f7;border-bottom:1px solid #ffffff;font-weight:600;z-index:2}.docs-code-example__code-panel{position:relative;background:#fff}.docs-code-example__code-header{position:sticky;top:10px;float:right;z-index:10;height:0;margin-right:15px}.docs-code-example__copy-btn{--padding-start: 2px;--padding-end: 2px;min-width:28px;min-height:28px;height:28px;width:28px;--color: var(--ion-color-primary);--background: rgba(255, 255, 255, .7);border-radius:6px;box-shadow:0 1px 4px #0000000d;opacity:0;transition:opacity .2s ease}.docs-code-example__code-panel:hover .docs-code-example__copy-btn{opacity:1}.docs-code-example__copy-btn:hover{--background: rgba(255, 255, 255, .9)}.docs-code-example__pre{margin:0;padding:1rem 1.25rem;overflow-x:auto;overflow-y:auto;max-height:30rem;min-height:3rem;background:#fff;white-space:pre;word-break:normal}.docs-code-example__pre--line-numbers{padding-left:3rem;counter-reset:line}.docs-code-example__code{display:block;font-family:Roboto Mono,SF Mono,Monaco,Courier New,monospace;font-size:.85em;line-height:1.5;color:#24292f;white-space:inherit;word-break:normal;tab-size:2}.docs-code-example__code .token{text-decoration:none!important}.docs-code-example__code .token.comment,.docs-code-example__code .token.prolog,.docs-code-example__code .token.doctype,.docs-code-example__code .token.cdata{color:#6a737d}.docs-code-example__code .token.punctuation{color:#24292f}.docs-code-example__code .token.property,.docs-code-example__code .token.tag,.docs-code-example__code .token.boolean,.docs-code-example__code .token.number,.docs-code-example__code .token.constant,.docs-code-example__code .token.symbol,.docs-code-example__code .token.deleted{color:#005cc5}.docs-code-example__code .token.selector,.docs-code-example__code .token.attr-name,.docs-code-example__code .token.string,.docs-code-example__code .token.char,.docs-code-example__code .token.builtin,.docs-code-example__code .token.inserted{color:#22863a}.docs-code-example__code .token.operator,.docs-code-example__code .token.entity,.docs-code-example__code .token.url{color:#24292f}.docs-code-example__code .token.atrule,.docs-code-example__code .token.attr-value,.docs-code-example__code .token.keyword{color:#d73a49}.docs-code-example__code .token.function,.docs-code-example__code .token.class-name{color:#6f42c1}.docs-code-example__code .token.regex,.docs-code-example__code .token.important,.docs-code-example__code .token.variable{color:#e36209}@media (max-width: 600px){.docs-code-example{border-radius:8px}.docs-code-example__tab-list{font-size:11px}.docs-code-example__pre{max-height:20rem}.docs-code-example__code{font-size:.75em}}@media (prefers-color-scheme: dark){.docs-code-example{background:#21252b;border-color:#3b4048;box-shadow:0 4px 15px #0009}.docs-code-example__header{background:#21252b;border-color:#3b4048}.docs-code-example__title{color:#c9d1d9}.docs-code-example__preview{background:#161b22;border-color:#3b4048}.docs-code-example__tabs{background:#1a1a1a}.docs-code-example__tab-list{border-color:#3b4048}.docs-code-example__tab{color:#8b949e}.docs-code-example__tab:hover{background:#21252b}.docs-code-example__tab--active{background:#282c34;color:#c9d1d9;border-color:#3b4048;border-bottom-color:#282c34}.docs-code-example__code-panel,.docs-code-example__pre{background:#161b22}.docs-code-example__code{color:#c9d1d9}.docs-code-example__copy-btn{--background: rgba(0, 0, 0, .4)}.docs-code-example__copy-btn:hover{--background: rgba(0, 0, 0, .6)}.docs-code-example__code .token.comment,.docs-code-example__code .token.prolog,.docs-code-example__code .token.doctype,.docs-code-example__code .token.cdata{color:#8b949e}.docs-code-example__code .token.punctuation{color:#c9d1d9}.docs-code-example__code .token.property,.docs-code-example__code .token.tag,.docs-code-example__code .token.boolean,.docs-code-example__code .token.number,.docs-code-example__code .token.constant,.docs-code-example__code .token.symbol,.docs-code-example__code .token.deleted{color:#79c0ff}.docs-code-example__code .token.selector,.docs-code-example__code .token.attr-name,.docs-code-example__code .token.string,.docs-code-example__code .token.char,.docs-code-example__code .token.builtin,.docs-code-example__code .token.inserted{color:#7ee787}.docs-code-example__code .token.operator,.docs-code-example__code .token.entity,.docs-code-example__code .token.url{color:#c9d1d9}.docs-code-example__code .token.atrule,.docs-code-example__code .token.attr-value,.docs-code-example__code .token.keyword{color:#ff7b72}.docs-code-example__code .token.function,.docs-code-example__code .token.class-name{color:#d2a8ff}.docs-code-example__code .token.regex,.docs-code-example__code .token.important,.docs-code-example__code .token.variable{color:#ffa657}}\n"] }]
+  `, styles: [".docs-code-example{margin:1.5rem 0;border:1px solid #f2f6f7;border-radius:12px;overflow:hidden;box-shadow:0 2px 4px #0000000d;background:#fff}.docs-code-example__header{padding:1rem 1.25rem;border-bottom:1px solid #f2f6f7;background:#fff}.docs-code-example__title{font-size:1rem;font-weight:600;margin:0 0 .25rem;color:var(--ion-text-color, #1a1a1a)}.docs-code-example__description{font-size:.875rem;color:var(--ion-color-medium, #666);margin:0}.docs-code-example__external-link{display:inline-flex;align-items:center;gap:.25rem;margin-top:.5rem;font-size:.8125rem;color:#555;text-decoration:none}.docs-code-example__external-link:hover{color:#1a1a1a;text-decoration:underline}.docs-code-example__external-link ion-icon{font-size:.875rem}.docs-code-example__preview{padding:1.5rem;background:#fff;border-bottom:1px solid #f2f6f7}.docs-code-example__tabs{background:#f6f9fa}.docs-code-example__tab-list{display:flex;gap:2px;border-bottom:1px solid #f2f6f7;overflow-x:auto;scrollbar-width:thin;font-size:12px}.docs-code-example__tab{padding:10px 18px 8px;font-family:Roboto Mono,SF Mono,Monaco,monospace;font-size:.95em;font-weight:500;color:#899396;background:transparent;border:1px solid transparent;border-bottom:none;border-radius:8px 8px 0 0;cursor:pointer;transition:background .2s,color .2s;margin-bottom:-1px;white-space:nowrap}.docs-code-example__tab:hover{background:#e8eef2}.docs-code-example__tab--active{background:#fff;color:#19422d;border:1px solid #f2f6f7;border-bottom:1px solid #ffffff;font-weight:600;z-index:2}.docs-code-example__code-panel{position:relative;background:#fff}.docs-code-example__code-header{position:sticky;top:10px;float:right;z-index:10;height:0;margin-right:15px}.docs-code-example__copy-btn{--padding-start: 2px;--padding-end: 2px;min-width:28px;min-height:28px;height:28px;width:28px;--color: var(--ion-color-primary);--background: rgba(255, 255, 255, .7);border-radius:6px;box-shadow:0 1px 4px #0000000d;opacity:0;transition:opacity .2s ease}.docs-code-example__code-panel:hover .docs-code-example__copy-btn{opacity:1}.docs-code-example__copy-btn:hover{--background: rgba(255, 255, 255, .9)}.docs-code-example__pre{margin:0;padding:1rem 1.25rem;overflow-x:auto;overflow-y:auto;max-height:30rem;min-height:3rem;background:#fff;white-space:pre;word-break:normal}.docs-code-example__pre--line-numbers{padding-left:3rem;counter-reset:line}.docs-code-example__code{display:block;font-family:Roboto Mono,SF Mono,Monaco,Courier New,monospace;font-size:.75em;line-height:1.5;color:#24292f;white-space:inherit;word-break:normal;tab-size:2}.docs-code-example__code .token{text-decoration:none!important}.docs-code-example__code .token.comment,.docs-code-example__code .token.prolog,.docs-code-example__code .token.doctype,.docs-code-example__code .token.cdata{color:#6a737d}.docs-code-example__code .token.punctuation{color:#24292f}.docs-code-example__code .token.property,.docs-code-example__code .token.tag,.docs-code-example__code .token.boolean,.docs-code-example__code .token.number,.docs-code-example__code .token.constant,.docs-code-example__code .token.symbol,.docs-code-example__code .token.deleted{color:#005cc5}.docs-code-example__code .token.selector,.docs-code-example__code .token.attr-name,.docs-code-example__code .token.string,.docs-code-example__code .token.char,.docs-code-example__code .token.builtin,.docs-code-example__code .token.inserted{color:#22863a}.docs-code-example__code .token.operator,.docs-code-example__code .token.entity,.docs-code-example__code .token.url{color:#24292f}.docs-code-example__code .token.atrule,.docs-code-example__code .token.attr-value,.docs-code-example__code .token.keyword{color:#d73a49}.docs-code-example__code .token.function,.docs-code-example__code .token.class-name{color:#6f42c1}.docs-code-example__code .token.regex,.docs-code-example__code .token.important,.docs-code-example__code .token.variable{color:#e36209}@media (max-width: 600px){.docs-code-example{border-radius:8px}.docs-code-example__tab-list{font-size:11px}.docs-code-example__pre{max-height:20rem}.docs-code-example__code{font-size:.7em}}@media (prefers-color-scheme: dark){.docs-code-example{background:#21252b;border-color:#3b4048;box-shadow:0 4px 15px #0009}.docs-code-example__header{background:#21252b;border-color:#3b4048}.docs-code-example__title{color:#c9d1d9}.docs-code-example__preview{background:#161b22;border-color:#3b4048}.docs-code-example__tabs{background:#1a1a1a}.docs-code-example__tab-list{border-color:#3b4048}.docs-code-example__tab{color:#8b949e}.docs-code-example__tab:hover{background:#21252b}.docs-code-example__tab--active{background:#282c34;color:#c9d1d9;border-color:#3b4048;border-bottom-color:#282c34}.docs-code-example__code-panel,.docs-code-example__pre{background:#161b22}.docs-code-example__code{color:#c9d1d9}.docs-code-example__copy-btn{--background: rgba(0, 0, 0, .4)}.docs-code-example__copy-btn:hover{--background: rgba(0, 0, 0, .6)}.docs-code-example__code .token.comment,.docs-code-example__code .token.prolog,.docs-code-example__code .token.doctype,.docs-code-example__code .token.cdata{color:#8b949e}.docs-code-example__code .token.punctuation{color:#c9d1d9}.docs-code-example__code .token.property,.docs-code-example__code .token.tag,.docs-code-example__code .token.boolean,.docs-code-example__code .token.number,.docs-code-example__code .token.constant,.docs-code-example__code .token.symbol,.docs-code-example__code .token.deleted{color:#79c0ff}.docs-code-example__code .token.selector,.docs-code-example__code .token.attr-name,.docs-code-example__code .token.string,.docs-code-example__code .token.char,.docs-code-example__code .token.builtin,.docs-code-example__code .token.inserted{color:#7ee787}.docs-code-example__code .token.operator,.docs-code-example__code .token.entity,.docs-code-example__code .token.url{color:#c9d1d9}.docs-code-example__code .token.atrule,.docs-code-example__code .token.attr-value,.docs-code-example__code .token.keyword{color:#ff7b72}.docs-code-example__code .token.function,.docs-code-example__code .token.class-name{color:#d2a8ff}.docs-code-example__code .token.regex,.docs-code-example__code .token.important,.docs-code-example__code .token.variable{color:#ffa657}}\n"] }]
         }], propDecorators: { props: [{
                 type: Input
             }], previewTpl: [{