valtech-components 2.0.305 → 2.0.307

package/fesm2022/valtech-components.mjs

@@ -1921,17 +1921,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * val-image
  *
  * Displays an image with various display options (bordered, shaded, dark, etc).
+ * Now includes a container wrapper for better flexbox support and alignment options.
  *
  * @example
- * <val-image [props]="{ src: 'url', alt: 'desc', width: 100, height: 100, bordered: true }"></val-image>
- *
- * @input props: ImageMetadata - Configuration for the image (src, alt, size, mode, etc.)
+ * <val-image [props]="{
+ *   src: 'url',
+ *   alt: 'desc',
+ *   width: 100,
+ *   height: 100,
+ *   bordered: true,
+ *   alignment: 'center',
+ *   caption: 'Image description'
+ * }"></val-image>
+ *
+ * @input props: ImageMetadata - Configuration for the image (src, alt, size, mode, alignment, caption, etc.)
  */
 class ImageComponent {
     constructor() {
         this.available = true;
     }
-    ngOnInit() { }
+    ngOnInit() {
+        // Set default values
+        if (!this.props.alignment) {
+            this.props.alignment = 'center';
+        }
+        if (!this.props.captionSize) {
+            this.props.captionSize = 'medium';
+        }
+        if (!this.props.mode) {
+            this.props.mode = 'box';
+        }
+    }
     changeToVisible() {
         setInterval(() => {
             this.available = true;
@@ -1939,70 +1959,120 @@ class ImageComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ImageComponent, isStandalone: true, selector: "val-image", inputs: { props: "props" }, ngImport: i0, template: `
-    @if (props.src.includes('--')) {
-      <img
-        [ngClass]="['image', props.mode, props.size]"
-        [ngStyle]="{
-          content: 'var(' + props.src + ')',
-        }"
-        [class.bordered]="props.bordered"
-        [class.shaded]="props.shaded"
-        [class.dark]="props.dark"
-        [class.limited]="props.limited"
-        [alt]="props.alt"
-        [style.width.px]="props.width"
-        [style.max-width.px]="props.width"
-        [style.height.px]="props.height"
-      />
-    } @else {
-      <img
-        [ngClass]="['image', props.mode, props.size]"
-        [class.bordered]="props.bordered"
-        [class.shaded]="props.shaded"
-        [class.dark]="props.dark"
-        [class.limited]="props.limited"
-        [src]="props.src"
-        [alt]="props.alt"
-        [style.width.rem]="props.width"
-        [style.max-width.rem]="props.width"
-        [style.height.px]="props.height"
-      />
-    }
-  `, 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)}.small{width:30%}.small.limited{max-width:6.25rem}.medium{width:50%}.medium.limited{max-width:15rem}.large{width:70%}.large.limited{max-width:28.125rem}.xlarge{width:100%}.xlarge.limited{max-width:43.75rem}.image{opacity:1;height:auto;display:block}.visible{animation:appereance ease-in 1s forwards}@keyframes appereance{0%{opacity:0;height:0}to{opacity:1;height:auto}}.rounded{border-radius:.5rem}.circular{border-radius:50%}.bordered{border:.0625rem solid var(--ion-color-medium)}.shaded{box-shadow:.1875rem .625rem .5rem #1219541a}@media (prefers-color-scheme: dark){.dark{filter:invert(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    <figure
+      class="val-image-container"
+      [class]="props.containerClass"
+      [ngClass]="{
+        'val-image-container--left': props.alignment === 'left',
+        'val-image-container--center': props.alignment === 'center' || !props.alignment,
+        'val-image-container--right': props.alignment === 'right',
+      }"
+    >
+      <div class="val-image-wrapper" [ngClass]="[props.size]">
+        @if (props.src.includes('--')) {
+          <img
+            class="val-image"
+            [ngClass]="[props.mode]"
+            [ngStyle]="{
+              content: 'var(' + props.src + ')',
+            }"
+            [class.bordered]="props.bordered"
+            [class.shaded]="props.shaded"
+            [class.dark]="props.dark"
+            [class.limited]="props.limited"
+            [alt]="props.alt"
+            [style.width.px]="props.width"
+            [style.height.px]="props.height"
+          />
+        } @else {
+          <img
+            class="val-image"
+            [ngClass]="[props.mode]"
+            [class.bordered]="props.bordered"
+            [class.shaded]="props.shaded"
+            [class.dark]="props.dark"
+            [class.limited]="props.limited"
+            [src]="props.src"
+            [alt]="props.alt"
+            [style.width.px]="props.width"
+            [style.height.px]="props.height"
+          />
+        }
+      </div>
+
+      @if (props.caption) {
+        <figcaption
+          class="val-image-caption"
+          [ngClass]="{
+            'val-image-caption--small': props.captionSize === 'small',
+            'val-image-caption--medium': props.captionSize === 'medium' || !props.captionSize,
+            'val-image-caption--large': props.captionSize === 'large',
+          }"
+        >
+          {{ props.caption }}
+        </figcaption>
+      }
+    </figure>
+  `, 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)}.val-image-container{margin:0;padding:0;display:inline-block;max-width:100%}.val-image-container--left{margin-right:auto;text-align:left}.val-image-container--center{margin-left:auto;margin-right:auto;text-align:center}.val-image-container--right{margin-left:auto;text-align:right}.val-image-wrapper{display:inline-block;position:relative}.val-image-wrapper.small{width:30%;min-width:5rem;max-width:9.375rem}.val-image-wrapper.medium{width:50%;min-width:7.5rem;max-width:18.75rem}.val-image-wrapper.large{width:70%;min-width:12.5rem;max-width:31.25rem}.val-image-wrapper.xlarge{width:100%;min-width:15.625rem;max-width:none}.val-image{width:100%;height:auto;display:block;opacity:1;max-width:100%}.val-image.rounded{border-radius:.5rem}.val-image.circular{border-radius:50%;aspect-ratio:1;object-fit:cover}.val-image.box{border-radius:0}.val-image.bordered{border:.0625rem solid var(--ion-color-medium)}.val-image.shaded{box-shadow:.1875rem .625rem .5rem #1219541a}@media (prefers-color-scheme: dark){.val-image.dark{filter:invert(1)}}.val-image.limited{max-width:100%}.val-image-caption{margin-top:.5rem;color:var(--ion-color-medium-shade, #666);font-style:italic;line-height:1.4}.val-image-caption--small{font-size:.75rem}.val-image-caption--medium{font-size:.875rem}.val-image-caption--large{font-size:1rem}.val-image.visible{animation:appearance ease-in 1s forwards}@keyframes appearance{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media (max-width: 768px){.val-image-wrapper.small{width:40%;max-width:7.5rem}.val-image-wrapper.medium{width:60%;max-width:15.625rem}.val-image-wrapper.large{width:80%;max-width:25rem}.val-image-wrapper.xlarge{width:100%}}.val-image-container{flex-shrink:0;align-self:flex-start}.flexbox-container .val-image-container--left{align-self:flex-start}.flexbox-container .val-image-container--center{align-self:center}.flexbox-container .val-image-container--right{align-self:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'val-image', standalone: true, imports: [CommonModule], template: `
-    @if (props.src.includes('--')) {
-      <img
-        [ngClass]="['image', props.mode, props.size]"
-        [ngStyle]="{
-          content: 'var(' + props.src + ')',
-        }"
-        [class.bordered]="props.bordered"
-        [class.shaded]="props.shaded"
-        [class.dark]="props.dark"
-        [class.limited]="props.limited"
-        [alt]="props.alt"
-        [style.width.px]="props.width"
-        [style.max-width.px]="props.width"
-        [style.height.px]="props.height"
-      />
-    } @else {
-      <img
-        [ngClass]="['image', props.mode, props.size]"
-        [class.bordered]="props.bordered"
-        [class.shaded]="props.shaded"
-        [class.dark]="props.dark"
-        [class.limited]="props.limited"
-        [src]="props.src"
-        [alt]="props.alt"
-        [style.width.rem]="props.width"
-        [style.max-width.rem]="props.width"
-        [style.height.px]="props.height"
-      />
-    }
-  `, 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)}.small{width:30%}.small.limited{max-width:6.25rem}.medium{width:50%}.medium.limited{max-width:15rem}.large{width:70%}.large.limited{max-width:28.125rem}.xlarge{width:100%}.xlarge.limited{max-width:43.75rem}.image{opacity:1;height:auto;display:block}.visible{animation:appereance ease-in 1s forwards}@keyframes appereance{0%{opacity:0;height:0}to{opacity:1;height:auto}}.rounded{border-radius:.5rem}.circular{border-radius:50%}.bordered{border:.0625rem solid var(--ion-color-medium)}.shaded{box-shadow:.1875rem .625rem .5rem #1219541a}@media (prefers-color-scheme: dark){.dark{filter:invert(1)}}\n"] }]
+    <figure
+      class="val-image-container"
+      [class]="props.containerClass"
+      [ngClass]="{
+        'val-image-container--left': props.alignment === 'left',
+        'val-image-container--center': props.alignment === 'center' || !props.alignment,
+        'val-image-container--right': props.alignment === 'right',
+      }"
+    >
+      <div class="val-image-wrapper" [ngClass]="[props.size]">
+        @if (props.src.includes('--')) {
+          <img
+            class="val-image"
+            [ngClass]="[props.mode]"
+            [ngStyle]="{
+              content: 'var(' + props.src + ')',
+            }"
+            [class.bordered]="props.bordered"
+            [class.shaded]="props.shaded"
+            [class.dark]="props.dark"
+            [class.limited]="props.limited"
+            [alt]="props.alt"
+            [style.width.px]="props.width"
+            [style.height.px]="props.height"
+          />
+        } @else {
+          <img
+            class="val-image"
+            [ngClass]="[props.mode]"
+            [class.bordered]="props.bordered"
+            [class.shaded]="props.shaded"
+            [class.dark]="props.dark"
+            [class.limited]="props.limited"
+            [src]="props.src"
+            [alt]="props.alt"
+            [style.width.px]="props.width"
+            [style.height.px]="props.height"
+          />
+        }
+      </div>
+
+      @if (props.caption) {
+        <figcaption
+          class="val-image-caption"
+          [ngClass]="{
+            'val-image-caption--small': props.captionSize === 'small',
+            'val-image-caption--medium': props.captionSize === 'medium' || !props.captionSize,
+            'val-image-caption--large': props.captionSize === 'large',
+          }"
+        >
+          {{ props.caption }}
+        </figcaption>
+      }
+    </figure>
+  `, 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)}.val-image-container{margin:0;padding:0;display:inline-block;max-width:100%}.val-image-container--left{margin-right:auto;text-align:left}.val-image-container--center{margin-left:auto;margin-right:auto;text-align:center}.val-image-container--right{margin-left:auto;text-align:right}.val-image-wrapper{display:inline-block;position:relative}.val-image-wrapper.small{width:30%;min-width:5rem;max-width:9.375rem}.val-image-wrapper.medium{width:50%;min-width:7.5rem;max-width:18.75rem}.val-image-wrapper.large{width:70%;min-width:12.5rem;max-width:31.25rem}.val-image-wrapper.xlarge{width:100%;min-width:15.625rem;max-width:none}.val-image{width:100%;height:auto;display:block;opacity:1;max-width:100%}.val-image.rounded{border-radius:.5rem}.val-image.circular{border-radius:50%;aspect-ratio:1;object-fit:cover}.val-image.box{border-radius:0}.val-image.bordered{border:.0625rem solid var(--ion-color-medium)}.val-image.shaded{box-shadow:.1875rem .625rem .5rem #1219541a}@media (prefers-color-scheme: dark){.val-image.dark{filter:invert(1)}}.val-image.limited{max-width:100%}.val-image-caption{margin-top:.5rem;color:var(--ion-color-medium-shade, #666);font-style:italic;line-height:1.4}.val-image-caption--small{font-size:.75rem}.val-image-caption--medium{font-size:.875rem}.val-image-caption--large{font-size:1rem}.val-image.visible{animation:appearance ease-in 1s forwards}@keyframes appearance{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media (max-width: 768px){.val-image-wrapper.small{width:40%;max-width:7.5rem}.val-image-wrapper.medium{width:60%;max-width:15.625rem}.val-image-wrapper.large{width:80%;max-width:25rem}.val-image-wrapper.xlarge{width:100%}}.val-image-container{flex-shrink:0;align-self:flex-start}.flexbox-container .val-image-container--left{align-self:flex-start}.flexbox-container .val-image-container--center{align-self:center}.flexbox-container .val-image-container--right{align-self:flex-end}\n"] }]
         }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input
             }] } });
@@ -5633,6 +5703,624 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * val-article
+ *
+ * Componente para crear artículos, blogs y documentación de forma declarativa.
+ * Permite combinar múltiples elementos (títulos, texto, imágenes, código, etc.)
+ * con espaciado automático y soporte multi-idioma.
+ *
+ * @example Uso básico:
+ * ```html
+ * <val-article [props]="articleConfig"></val-article>
+ * ```
+ *
+ * @example Con ArticleBuilder:
+ * ```typescript
+ * articleConfig = new ArticleBuilder()
+ *   .title(titleProps)
+ *   .paragraph(textProps)
+ *   .code('console.log("Hello World")', 'javascript')
+ *   .build();
+ * ```
+ *
+ * @input props: ArticleMetadata - Configuración completa del artículo
+ */
+class ArticleComponent {
+    constructor() { }
+    ngOnInit() {
+        // Validación básica
+        if (!this.props || !this.props.elements) {
+            console.warn('val-article: props.elements is required');
+        }
+    }
+    /**
+     * Función de trackBy para optimizar el rendering de elementos
+     */
+    trackByFn(index, element) {
+        return element.id || index;
+    }
+    /**
+     * Obtiene las clases CSS para el espaciado del elemento
+     */
+    getElementSpacingClass(element) {
+        const spacing = element.spacing || this.props.defaultSpacing;
+        const classes = [];
+        if (spacing?.top) {
+            classes.push(`val-article__spacing-top--${spacing.top}`);
+        }
+        if (spacing?.bottom) {
+            classes.push(`val-article__spacing-bottom--${spacing.bottom}`);
+        }
+        if (spacing?.horizontal) {
+            classes.push(`val-article__spacing-horizontal--${spacing.horizontal}`);
+        }
+        return classes.join(' ');
+    }
+    // === FUNCIONES DE TIPO PARA TYPESCRIPT ===
+    getTitleElement(element) {
+        return element;
+    }
+    getSubtitleElement(element) {
+        return element;
+    }
+    getTextElement(element) {
+        return element;
+    }
+    getQuoteElement(element) {
+        return element;
+    }
+    getHighlightElement(element) {
+        return element;
+    }
+    getCodeElement(element) {
+        return element;
+    }
+    getListElement(element) {
+        return element;
+    }
+    getButtonElement(element) {
+        return element;
+    }
+    getSeparatorElement(element) {
+        return element;
+    }
+    getImageElement(element) {
+        return element;
+    }
+    getVideoElement(element) {
+        return element;
+    }
+    getCustomElement(element) {
+        return element;
+    }
+    // === FUNCIONES AUXILIARES PARA PROPS ===
+    getQuoteTextProps(element) {
+        const quoteElement = this.getQuoteElement(element);
+        const { author, source, ...textProps } = quoteElement.props;
+        return textProps;
+    }
+    getHighlightTextProps(element) {
+        const highlightElement = this.getHighlightElement(element);
+        const { backgroundColor, rounded, ...textProps } = highlightElement.props;
+        return textProps;
+    }
+    getHighlightColor(element) {
+        const highlightElement = this.getHighlightElement(element);
+        return highlightElement.props.backgroundColor || 'var(--ion-color-light)';
+    }
+    getButtonProps(element) {
+        const buttonElement = this.getButtonElement(element);
+        const { alignment, ...buttonProps } = buttonElement.props;
+        return buttonProps;
+    }
+    getImageMetadata(element) {
+        const imageElement = this.getImageElement(element);
+        const props = imageElement.props;
+        return {
+            src: props.src,
+            alt: props.alt,
+            mode: props.rounded ? 'rounded' : 'box',
+            size: 'medium',
+            shaded: false,
+            bordered: false,
+            alignment: props.alignment || 'center',
+            caption: props.caption,
+            captionSize: 'medium',
+            width: props.maxWidth ? parseInt(props.maxWidth.replace('px', '')) : undefined,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ArticleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ArticleComponent, isStandalone: true, selector: "val-article", inputs: { props: "props" }, ngImport: i0, template: `
+    <article
+      class="val-article"
+      [class]="props.cssClass"
+      [ngClass]="{
+        'val-article--centered': props.centered,
+        'val-article--light': props.theme === 'light',
+        'val-article--dark': props.theme === 'dark',
+      }"
+      [style.max-width]="props.maxWidth"
+    >
+      <div
+        *ngFor="let element of props.elements; trackBy: trackByFn"
+        class="val-article__element"
+        [class]="element.cssClass"
+        [ngClass]="getElementSpacingClass(element)"
+        [style.display]="element.visible === false ? 'none' : 'block'"
+      >
+        <!-- Título -->
+        <ng-container *ngIf="element.type === 'title'">
+          <val-title [props]="getTitleElement(element).props"></val-title>
+        </ng-container>
+
+        <!-- Subtítulo -->
+        <ng-container *ngIf="element.type === 'subtitle'">
+          <val-title [props]="getSubtitleElement(element).props"></val-title>
+        </ng-container>
+
+        <!-- Texto/Párrafo -->
+        <ng-container *ngIf="element.type === 'text' || element.type === 'paragraph'">
+          <val-text [props]="getTextElement(element).props"></val-text>
+        </ng-container>
+
+        <!-- Cita -->
+        <ng-container *ngIf="element.type === 'quote'">
+          <div class="val-article__quote">
+            <div class="val-article__quote-content">
+              <val-text [props]="getQuoteTextProps(element)"></val-text>
+            </div>
+            <div *ngIf="getQuoteElement(element).props.author" class="val-article__quote-author">
+              — {{ getQuoteElement(element).props.author }}
+              <span *ngIf="getQuoteElement(element).props.source" class="val-article__quote-source">
+                , {{ getQuoteElement(element).props.source }}
+              </span>
+            </div>
+          </div>
+        </ng-container>
+
+        <!-- Texto destacado -->
+        <ng-container *ngIf="element.type === 'highlight'">
+          <div
+            class="val-article__highlight"
+            [ngClass]="{
+              'val-article__highlight--rounded': getHighlightElement(element).props.rounded,
+            }"
+            [style.background-color]="getHighlightColor(element)"
+          >
+            <val-text [props]="getHighlightTextProps(element)"></val-text>
+          </div>
+        </ng-container>
+
+        <!-- Código -->
+        <ng-container *ngIf="element.type === 'code'">
+          <div class="val-article__code">
+            <div *ngIf="getCodeElement(element).props.language" class="val-article__code-language">
+              {{ getCodeElement(element).props.language }}
+            </div>
+            <pre
+              class="val-article__code-content"
+              [ngClass]="{
+                'val-article__code-content--dark': getCodeElement(element).props.theme === 'dark',
+              }"
+            ><code>{{ getCodeElement(element).props.code }}</code></pre>
+          </div>
+        </ng-container>
+
+        <!-- Lista -->
+        <ng-container *ngIf="element.type === 'list'">
+          <ul *ngIf="getListElement(element).props.listType !== 'ordered'" class="val-article__list">
+            <li *ngFor="let item of getListElement(element).props.items" class="val-article__list-item">
+              <span *ngIf="getListElement(element).props.listType === 'checklist'" class="val-article__list-check"
+                >✓</span
+              >
+              {{ item.text }}
+            </li>
+          </ul>
+          <ol
+            *ngIf="getListElement(element).props.listType === 'ordered'"
+            class="val-article__list val-article__list--ordered"
+          >
+            <li *ngFor="let item of getListElement(element).props.items" class="val-article__list-item">
+              {{ item.text }}
+            </li>
+          </ol>
+        </ng-container>
+
+        <!-- Botón -->
+        <ng-container *ngIf="element.type === 'button'">
+          <div
+            class="val-article__button-container"
+            [ngClass]="{
+              'val-article__button-container--left': getButtonElement(element).props.alignment === 'left',
+              'val-article__button-container--center': getButtonElement(element).props.alignment === 'center',
+              'val-article__button-container--right': getButtonElement(element).props.alignment === 'right',
+            }"
+          >
+            <val-button [props]="getButtonProps(element)"></val-button>
+          </div>
+        </ng-container>
+
+        <!-- Separador -->
+        <ng-container *ngIf="element.type === 'separator'">
+          <div class="val-article__separator">
+            <hr
+              *ngIf="getSeparatorElement(element).props.style === 'line'"
+              class="val-article__separator-line"
+              [ngClass]="{
+                'val-article__separator-line--thin': getSeparatorElement(element).props.thickness === 'thin',
+                'val-article__separator-line--thick': getSeparatorElement(element).props.thickness === 'thick',
+              }"
+            />
+            <div *ngIf="getSeparatorElement(element).props.style === 'dots'" class="val-article__separator-dots">
+              • • •
+            </div>
+            <div
+              *ngIf="getSeparatorElement(element).props.style === 'space'"
+              class="val-article__separator-space"
+            ></div>
+          </div>
+        </ng-container>
+
+        <!-- Imagen -->
+        <ng-container *ngIf="element.type === 'image'">
+          <val-image [props]="getImageMetadata(element)"></val-image>
+        </ng-container>
+
+        <!-- Video -->
+        <ng-container *ngIf="element.type === 'video'">
+          <div class="val-article__video">
+            <video
+              [src]="getVideoElement(element).props.src"
+              [poster]="getVideoElement(element).props.poster"
+              [controls]="getVideoElement(element).props.controls !== false"
+              [autoplay]="getVideoElement(element).props.autoplay"
+              [muted]="getVideoElement(element).props.muted"
+              [style.max-width]="getVideoElement(element).props.maxWidth"
+              class="val-article__video-content"
+            >
+              Tu navegador no soporta el elemento video.
+            </video>
+            <div *ngIf="getVideoElement(element).props.title" class="val-article__video-title">
+              {{ getVideoElement(element).props.title }}
+            </div>
+          </div>
+        </ng-container>
+
+        <!-- Contenido personalizado -->
+        <ng-container *ngIf="element.type === 'custom'">
+          <div class="val-article__custom" [innerHTML]="getCustomElement(element).props.htmlContent"></div>
+        </ng-container>
+      </div>
+    </article>
+  `, isInline: true, styles: [".val-article{width:100%;margin:0 auto;line-height:1.6;color:var(--ion-color-dark, #1f2937);display:block;position:static}.val-article--centered{margin:0 auto}.val-article--light{background-color:var(--ion-color-light, #ffffff);color:var(--ion-color-dark, #1f2937)}.val-article--dark{background-color:var(--ion-color-dark, #1f2937);color:var(--ion-color-light, #ffffff)}.val-article__element{position:relative}.val-article__element:last-child{margin-bottom:0!important}.val-article__spacing-top--none{margin-top:0!important}.val-article__spacing-top--small{margin-top:.5rem!important}.val-article__spacing-top--medium{margin-top:1rem!important}.val-article__spacing-top--large{margin-top:1.5rem!important}.val-article__spacing-top--xlarge{margin-top:2.5rem!important}.val-article__spacing-bottom--none{margin-bottom:0!important}.val-article__spacing-bottom--small{margin-bottom:.5rem!important}.val-article__spacing-bottom--medium{margin-bottom:1rem!important}.val-article__spacing-bottom--large{margin-bottom:1.5rem!important}.val-article__spacing-bottom--xlarge{margin-bottom:2.5rem!important}.val-article__spacing-horizontal--none{margin-left:0!important;margin-right:0!important}.val-article__spacing-horizontal--small{margin-left:.5rem!important;margin-right:.5rem!important}.val-article__spacing-horizontal--medium{margin-left:1rem!important;margin-right:1rem!important}.val-article__spacing-horizontal--large{margin-left:1.5rem!important;margin-right:1.5rem!important}.val-article__spacing-horizontal--xlarge{margin-left:2.5rem!important;margin-right:2.5rem!important}.val-article__quote{border-left:4px solid #0969da;padding:1rem;margin:1rem 0;background-color:var(--ion-color-light-shade, #f8f9fa);border-radius:0 8px 8px 0;font-style:italic}.val-article__quote-content{margin-bottom:.5rem;font-size:1.1em}.val-article__quote-author{font-size:.9em;color:var(--ion-color-medium, #6c757d);font-style:normal;font-weight:500;text-align:right}.val-article__quote-source{font-weight:400;opacity:.8}.val-article__highlight{padding:1rem;margin:.5rem 0;background-color:var(--ion-color-warning-tint, #fff3cd);border:1px solid var(--ion-color-warning, #ffc107);border-radius:4px}.val-article__highlight--rounded{border-radius:12px}.val-article__code{margin:1rem 0;border-radius:8px;overflow:hidden;border:1px solid #e1e5e9}.val-article__code-language{background-color:var(--ion-color-medium-tint, #f8f9fa);padding:.5rem 1rem;font-size:.875em;font-weight:500;color:var(--ion-color-dark, #495057);border-bottom:1px solid #e1e5e9;text-transform:uppercase;letter-spacing:.5px}.val-article__code-content{background-color:#f6f8fa;color:#24292e;padding:1rem;margin:0;overflow-x:auto;font-family:SFMono-Regular,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.875em;line-height:1.5}.val-article__code-content code{background:none;padding:0;font-size:inherit;color:inherit}.val-article__code-content--dark{background-color:#161b22;color:#f0f6fc}.val-article__list{margin:1rem 0;padding-left:1.5rem}.val-article__list--ordered{list-style-type:decimal}.val-article__list-item{margin-bottom:.5rem;line-height:1.6;position:relative}.val-article__list-item:last-child{margin-bottom:0}.val-article__list-check{color:var(--ion-color-success, #28a745);font-weight:700;margin-right:.5rem;position:absolute;left:-1.5rem}.val-article .val-article__list:has(.val-article__list-check){list-style:none;padding-left:1rem}.val-article__button-container{margin:1rem 0}.val-article__button-container--left{text-align:left}.val-article__button-container--center{text-align:center}.val-article__button-container--right{text-align:right}.val-article__separator{margin:1.5rem 0;text-align:center}.val-article__separator-line{border:none;height:1px;background-color:#d0d7de;margin:0}.val-article__separator-line--thin{height:1px}.val-article__separator-line--thick{height:3px}.val-article__separator-dots{color:#d0d7de;font-size:1.5em;letter-spacing:.5em;-webkit-user-select:none;user-select:none}.val-article__separator-space{height:1.5rem}.val-article__image{margin:1.5rem 0;text-align:center}.val-article__image--left{text-align:left}.val-article__image--center{text-align:center}.val-article__image--right{text-align:right}.val-article__image-content{max-width:100%;height:auto;border-radius:4px;box-shadow:0 2px 8px #0000001a;transition:transform .2s ease}.val-article__image-content:hover{transform:scale(1.02)}.val-article__image-content--rounded{border-radius:12px}.val-article__image-caption{margin-top:.5rem;font-size:.875em;color:var(--ion-color-medium, #6c757d);font-style:italic;text-align:center}.val-article__video{margin:1.5rem 0;text-align:center}.val-article__video-content{max-width:100%;height:auto;border-radius:8px;box-shadow:0 4px 12px #00000026}.val-article__video-title{margin-top:.5rem;font-size:.9em;color:var(--ion-color-medium, #6c757d);font-weight:500}.val-article__custom{margin:1rem 0}.val-article__custom *{max-width:100%}@media (max-width: 768px){.val-article__code-content{font-size:.8em;padding:.5rem}.val-article__image-content:hover{transform:none}.val-article__quote{padding:.5rem;margin:.5rem 0}.val-article__highlight{padding:.5rem}}@media (prefers-color-scheme: dark){.val-article--auto{background-color:var(--ion-color-dark, #1f2937);color:var(--ion-color-light, #ffffff)}.val-article--auto .val-article__quote{background-color:#ffffff0d}.val-article--auto .val-article__highlight{background-color:#ffc1071a;border-color:var(--ion-color-warning-shade, #e0a800)}.val-article--auto .val-article__code-content{background-color:#161b22;color:#f0f6fc}}.val-article__element{animation:fadeInUp .3s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (prefers-contrast: high){.val-article__separator-line{background-color:currentColor;opacity:.5}.val-article__quote{border-left-width:6px}}@media (prefers-reduced-motion: reduce){.val-article .val-article__element{animation:none}.val-article__image-content{transition:none}.val-article__image-content:hover{transform:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ArticleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-article', standalone: true, imports: [CommonModule, TitleComponent, TextComponent, ButtonComponent, ImageComponent], template: `
+    <article
+      class="val-article"
+      [class]="props.cssClass"
+      [ngClass]="{
+        'val-article--centered': props.centered,
+        'val-article--light': props.theme === 'light',
+        'val-article--dark': props.theme === 'dark',
+      }"
+      [style.max-width]="props.maxWidth"
+    >
+      <div
+        *ngFor="let element of props.elements; trackBy: trackByFn"
+        class="val-article__element"
+        [class]="element.cssClass"
+        [ngClass]="getElementSpacingClass(element)"
+        [style.display]="element.visible === false ? 'none' : 'block'"
+      >
+        <!-- Título -->
+        <ng-container *ngIf="element.type === 'title'">
+          <val-title [props]="getTitleElement(element).props"></val-title>
+        </ng-container>
+
+        <!-- Subtítulo -->
+        <ng-container *ngIf="element.type === 'subtitle'">
+          <val-title [props]="getSubtitleElement(element).props"></val-title>
+        </ng-container>
+
+        <!-- Texto/Párrafo -->
+        <ng-container *ngIf="element.type === 'text' || element.type === 'paragraph'">
+          <val-text [props]="getTextElement(element).props"></val-text>
+        </ng-container>
+
+        <!-- Cita -->
+        <ng-container *ngIf="element.type === 'quote'">
+          <div class="val-article__quote">
+            <div class="val-article__quote-content">
+              <val-text [props]="getQuoteTextProps(element)"></val-text>
+            </div>
+            <div *ngIf="getQuoteElement(element).props.author" class="val-article__quote-author">
+              — {{ getQuoteElement(element).props.author }}
+              <span *ngIf="getQuoteElement(element).props.source" class="val-article__quote-source">
+                , {{ getQuoteElement(element).props.source }}
+              </span>
+            </div>
+          </div>
+        </ng-container>
+
+        <!-- Texto destacado -->
+        <ng-container *ngIf="element.type === 'highlight'">
+          <div
+            class="val-article__highlight"
+            [ngClass]="{
+              'val-article__highlight--rounded': getHighlightElement(element).props.rounded,
+            }"
+            [style.background-color]="getHighlightColor(element)"
+          >
+            <val-text [props]="getHighlightTextProps(element)"></val-text>
+          </div>
+        </ng-container>
+
+        <!-- Código -->
+        <ng-container *ngIf="element.type === 'code'">
+          <div class="val-article__code">
+            <div *ngIf="getCodeElement(element).props.language" class="val-article__code-language">
+              {{ getCodeElement(element).props.language }}
+            </div>
+            <pre
+              class="val-article__code-content"
+              [ngClass]="{
+                'val-article__code-content--dark': getCodeElement(element).props.theme === 'dark',
+              }"
+            ><code>{{ getCodeElement(element).props.code }}</code></pre>
+          </div>
+        </ng-container>
+
+        <!-- Lista -->
+        <ng-container *ngIf="element.type === 'list'">
+          <ul *ngIf="getListElement(element).props.listType !== 'ordered'" class="val-article__list">
+            <li *ngFor="let item of getListElement(element).props.items" class="val-article__list-item">
+              <span *ngIf="getListElement(element).props.listType === 'checklist'" class="val-article__list-check"
+                >✓</span
+              >
+              {{ item.text }}
+            </li>
+          </ul>
+          <ol
+            *ngIf="getListElement(element).props.listType === 'ordered'"
+            class="val-article__list val-article__list--ordered"
+          >
+            <li *ngFor="let item of getListElement(element).props.items" class="val-article__list-item">
+              {{ item.text }}
+            </li>
+          </ol>
+        </ng-container>
+
+        <!-- Botón -->
+        <ng-container *ngIf="element.type === 'button'">
+          <div
+            class="val-article__button-container"
+            [ngClass]="{
+              'val-article__button-container--left': getButtonElement(element).props.alignment === 'left',
+              'val-article__button-container--center': getButtonElement(element).props.alignment === 'center',
+              'val-article__button-container--right': getButtonElement(element).props.alignment === 'right',
+            }"
+          >
+            <val-button [props]="getButtonProps(element)"></val-button>
+          </div>
+        </ng-container>
+
+        <!-- Separador -->
+        <ng-container *ngIf="element.type === 'separator'">
+          <div class="val-article__separator">
+            <hr
+              *ngIf="getSeparatorElement(element).props.style === 'line'"
+              class="val-article__separator-line"
+              [ngClass]="{
+                'val-article__separator-line--thin': getSeparatorElement(element).props.thickness === 'thin',
+                'val-article__separator-line--thick': getSeparatorElement(element).props.thickness === 'thick',
+              }"
+            />
+            <div *ngIf="getSeparatorElement(element).props.style === 'dots'" class="val-article__separator-dots">
+              • • •
+            </div>
+            <div
+              *ngIf="getSeparatorElement(element).props.style === 'space'"
+              class="val-article__separator-space"
+            ></div>
+          </div>
+        </ng-container>
+
+        <!-- Imagen -->
+        <ng-container *ngIf="element.type === 'image'">
+          <val-image [props]="getImageMetadata(element)"></val-image>
+        </ng-container>
+
+        <!-- Video -->
+        <ng-container *ngIf="element.type === 'video'">
+          <div class="val-article__video">
+            <video
+              [src]="getVideoElement(element).props.src"
+              [poster]="getVideoElement(element).props.poster"
+              [controls]="getVideoElement(element).props.controls !== false"
+              [autoplay]="getVideoElement(element).props.autoplay"
+              [muted]="getVideoElement(element).props.muted"
+              [style.max-width]="getVideoElement(element).props.maxWidth"
+              class="val-article__video-content"
+            >
+              Tu navegador no soporta el elemento video.
+            </video>
+            <div *ngIf="getVideoElement(element).props.title" class="val-article__video-title">
+              {{ getVideoElement(element).props.title }}
+            </div>
+          </div>
+        </ng-container>
+
+        <!-- Contenido personalizado -->
+        <ng-container *ngIf="element.type === 'custom'">
+          <div class="val-article__custom" [innerHTML]="getCustomElement(element).props.htmlContent"></div>
+        </ng-container>
+      </div>
+    </article>
+  `, styles: [".val-article{width:100%;margin:0 auto;line-height:1.6;color:var(--ion-color-dark, #1f2937);display:block;position:static}.val-article--centered{margin:0 auto}.val-article--light{background-color:var(--ion-color-light, #ffffff);color:var(--ion-color-dark, #1f2937)}.val-article--dark{background-color:var(--ion-color-dark, #1f2937);color:var(--ion-color-light, #ffffff)}.val-article__element{position:relative}.val-article__element:last-child{margin-bottom:0!important}.val-article__spacing-top--none{margin-top:0!important}.val-article__spacing-top--small{margin-top:.5rem!important}.val-article__spacing-top--medium{margin-top:1rem!important}.val-article__spacing-top--large{margin-top:1.5rem!important}.val-article__spacing-top--xlarge{margin-top:2.5rem!important}.val-article__spacing-bottom--none{margin-bottom:0!important}.val-article__spacing-bottom--small{margin-bottom:.5rem!important}.val-article__spacing-bottom--medium{margin-bottom:1rem!important}.val-article__spacing-bottom--large{margin-bottom:1.5rem!important}.val-article__spacing-bottom--xlarge{margin-bottom:2.5rem!important}.val-article__spacing-horizontal--none{margin-left:0!important;margin-right:0!important}.val-article__spacing-horizontal--small{margin-left:.5rem!important;margin-right:.5rem!important}.val-article__spacing-horizontal--medium{margin-left:1rem!important;margin-right:1rem!important}.val-article__spacing-horizontal--large{margin-left:1.5rem!important;margin-right:1.5rem!important}.val-article__spacing-horizontal--xlarge{margin-left:2.5rem!important;margin-right:2.5rem!important}.val-article__quote{border-left:4px solid #0969da;padding:1rem;margin:1rem 0;background-color:var(--ion-color-light-shade, #f8f9fa);border-radius:0 8px 8px 0;font-style:italic}.val-article__quote-content{margin-bottom:.5rem;font-size:1.1em}.val-article__quote-author{font-size:.9em;color:var(--ion-color-medium, #6c757d);font-style:normal;font-weight:500;text-align:right}.val-article__quote-source{font-weight:400;opacity:.8}.val-article__highlight{padding:1rem;margin:.5rem 0;background-color:var(--ion-color-warning-tint, #fff3cd);border:1px solid var(--ion-color-warning, #ffc107);border-radius:4px}.val-article__highlight--rounded{border-radius:12px}.val-article__code{margin:1rem 0;border-radius:8px;overflow:hidden;border:1px solid #e1e5e9}.val-article__code-language{background-color:var(--ion-color-medium-tint, #f8f9fa);padding:.5rem 1rem;font-size:.875em;font-weight:500;color:var(--ion-color-dark, #495057);border-bottom:1px solid #e1e5e9;text-transform:uppercase;letter-spacing:.5px}.val-article__code-content{background-color:#f6f8fa;color:#24292e;padding:1rem;margin:0;overflow-x:auto;font-family:SFMono-Regular,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.875em;line-height:1.5}.val-article__code-content code{background:none;padding:0;font-size:inherit;color:inherit}.val-article__code-content--dark{background-color:#161b22;color:#f0f6fc}.val-article__list{margin:1rem 0;padding-left:1.5rem}.val-article__list--ordered{list-style-type:decimal}.val-article__list-item{margin-bottom:.5rem;line-height:1.6;position:relative}.val-article__list-item:last-child{margin-bottom:0}.val-article__list-check{color:var(--ion-color-success, #28a745);font-weight:700;margin-right:.5rem;position:absolute;left:-1.5rem}.val-article .val-article__list:has(.val-article__list-check){list-style:none;padding-left:1rem}.val-article__button-container{margin:1rem 0}.val-article__button-container--left{text-align:left}.val-article__button-container--center{text-align:center}.val-article__button-container--right{text-align:right}.val-article__separator{margin:1.5rem 0;text-align:center}.val-article__separator-line{border:none;height:1px;background-color:#d0d7de;margin:0}.val-article__separator-line--thin{height:1px}.val-article__separator-line--thick{height:3px}.val-article__separator-dots{color:#d0d7de;font-size:1.5em;letter-spacing:.5em;-webkit-user-select:none;user-select:none}.val-article__separator-space{height:1.5rem}.val-article__image{margin:1.5rem 0;text-align:center}.val-article__image--left{text-align:left}.val-article__image--center{text-align:center}.val-article__image--right{text-align:right}.val-article__image-content{max-width:100%;height:auto;border-radius:4px;box-shadow:0 2px 8px #0000001a;transition:transform .2s ease}.val-article__image-content:hover{transform:scale(1.02)}.val-article__image-content--rounded{border-radius:12px}.val-article__image-caption{margin-top:.5rem;font-size:.875em;color:var(--ion-color-medium, #6c757d);font-style:italic;text-align:center}.val-article__video{margin:1.5rem 0;text-align:center}.val-article__video-content{max-width:100%;height:auto;border-radius:8px;box-shadow:0 4px 12px #00000026}.val-article__video-title{margin-top:.5rem;font-size:.9em;color:var(--ion-color-medium, #6c757d);font-weight:500}.val-article__custom{margin:1rem 0}.val-article__custom *{max-width:100%}@media (max-width: 768px){.val-article__code-content{font-size:.8em;padding:.5rem}.val-article__image-content:hover{transform:none}.val-article__quote{padding:.5rem;margin:.5rem 0}.val-article__highlight{padding:.5rem}}@media (prefers-color-scheme: dark){.val-article--auto{background-color:var(--ion-color-dark, #1f2937);color:var(--ion-color-light, #ffffff)}.val-article--auto .val-article__quote{background-color:#ffffff0d}.val-article--auto .val-article__highlight{background-color:#ffc1071a;border-color:var(--ion-color-warning-shade, #e0a800)}.val-article--auto .val-article__code-content{background-color:#161b22;color:#f0f6fc}}.val-article__element{animation:fadeInUp .3s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (prefers-contrast: high){.val-article__separator-line{background-color:currentColor;opacity:.5}.val-article__quote{border-left-width:6px}}@media (prefers-reduced-motion: reduce){.val-article .val-article__element{animation:none}.val-article__image-content{transition:none}.val-article__image-content:hover{transform:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { props: [{
+                type: Input
+            }] } });
+
+/**
+ * Configuración de espaciado predefinida
+ */
+const ARTICLE_SPACING = {
+    NONE: { top: 'none', bottom: 'none' },
+    SMALL: { top: 'small', bottom: 'small' },
+    MEDIUM: { top: 'medium', bottom: 'medium' },
+    LARGE: { top: 'large', bottom: 'large' },
+    XLARGE: { top: 'xlarge', bottom: 'xlarge' },
+    // Espaciados específicos para elementos
+    TITLE: { top: 'large', bottom: 'medium' },
+    SUBTITLE: { top: 'medium', bottom: 'small' },
+    PARAGRAPH: { top: 'small', bottom: 'medium' },
+    QUOTE: { top: 'medium', bottom: 'medium' },
+    CODE: { top: 'medium', bottom: 'medium' },
+    LIST: { top: 'small', bottom: 'medium' },
+    BUTTON: { top: 'medium', bottom: 'medium' },
+    IMAGE: { top: 'large', bottom: 'large' },
+    SEPARATOR: { top: 'large', bottom: 'large' },
+};
+/**
+ * Función helper para crear elementos de artículo de forma fácil
+ */
+class ArticleBuilder {
+    constructor() {
+        this.elements = [];
+    }
+    /**
+     * Añade un título al artículo
+     */
+    title(props, options) {
+        this.elements.push({
+            type: 'title',
+            props,
+            spacing: ARTICLE_SPACING.TITLE,
+            ...options,
+        });
+        return this;
+    }
+    /**
+     * Añade un subtítulo al artículo
+     */
+    subtitle(props, options) {
+        this.elements.push({
+            type: 'subtitle',
+            props,
+            spacing: ARTICLE_SPACING.SUBTITLE,
+            ...options,
+        });
+        return this;
+    }
+    /**
+     * Añade un párrafo al artículo
+     */
+    paragraph(props, options) {
+        this.elements.push({
+            type: 'paragraph',
+            props,
+            spacing: ARTICLE_SPACING.PARAGRAPH,
+            ...options,
+        });
+        return this;
+    }
+    /**
+     * Añade una cita al artículo
+     */
+    quote(props, options) {
+        this.elements.push({
+            type: 'quote',
+            props,
+            spacing: ARTICLE_SPACING.QUOTE,
+            ...options,
+        });
+        return this;
+    }
+    /**
+     * Añade código al artículo
+     */
+    code(code, language, options) {
+        this.elements.push({
+            type: 'code',
+            props: { code, language },
+            spacing: ARTICLE_SPACING.CODE,
+            ...options,
+        });
+        return this;
+    }
+    /**
+     * Añade una lista al artículo
+     */
+    list(items, listType, options) {
+        this.elements.push({
+            type: 'list',
+            props: { items, listType },
+            spacing: ARTICLE_SPACING.LIST,
+            ...options,
+        });
+        return this;
+    }
+    /**
+     * Añade un botón al artículo
+     */
+    button(props, alignment, options) {
+        this.elements.push({
+            type: 'button',
+            props: { ...props, alignment },
+            spacing: ARTICLE_SPACING.BUTTON,
+            ...options,
+        });
+        return this;
+    }
+    /**
+     * Añade un separador al artículo
+     */
+    separator(style, options) {
+        this.elements.push({
+            type: 'separator',
+            props: { style },
+            spacing: ARTICLE_SPACING.SEPARATOR,
+            ...options,
+        });
+        return this;
+    }
+    /**
+     * Añade una imagen al artículo
+     */
+    image(src, alt, caption, options) {
+        this.elements.push({
+            type: 'image',
+            props: { src, alt, caption },
+            spacing: ARTICLE_SPACING.IMAGE,
+            ...options,
+        });
+        return this;
+    }
+    /**
+     * Construye el artículo final
+     */
+    build(config) {
+        return {
+            elements: this.elements,
+            defaultSpacing: ARTICLE_SPACING.MEDIUM,
+            maxWidth: '800px',
+            centered: true,
+            theme: 'auto',
+            ...config,
+        };
+    }
+    /**
+     * Resetea el builder para crear un nuevo artículo
+     */
+    clear() {
+        this.elements = [];
+        return this;
+    }
+}
+
 /**
  * val-banner
  *
@@ -7454,5 +8142,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ActionType, AlertBoxComponent, AvatarComponent, BannerComponent, BaseDefault, BoxComponent, ButtonComponent, ButtonGroupComponent, CardComponent, CardSection, CardType, CheckInputComponent, ClearDefault, ClearDefaultBlock, ClearDefaultFull, ClearDefaultRound, ClearDefaultRoundBlock, ClearDefaultRoundFull, CommentInputComponent, ComponentContentHelper, ComponentStates, ContentLoaderComponent, ContentService, DateInputComponent, DisplayComponent, DividerComponent, DownloadService, EmailInputComponent, ExpandableTextComponent, FileInputComponent, FooterComponent, FormComponent, FormFooterComponent, GlobalContent, HeaderComponent, HintComponent, HourInputComponent, HrefComponent, Icon, IconComponent, IconService, ImageComponent, InAppBrowserService, InputType, ItemListComponent, LANGUAGES, LangService, LanguageSelectorComponent, LayeredCardComponent, LayoutComponent, LinkComponent, LinkProcessorService, LinksCakeComponent, ListContentHelper, LocalStorageService, MOTION, NavigationService, NoContentComponent, NotesBoxComponent, NumberInputComponent, OutlineDefault, OutlineDefaultBlock, OutlineDefaultFull, OutlineDefaultRound, OutlineDefaultRoundBlock, OutlineDefaultRoundFull, PasswordInputComponent, PinInputComponent, PopoverSelectorComponent, PrimarySolidBlockButton, PrimarySolidBlockHrefButton, PrimarySolidBlockIconButton, PrimarySolidBlockIconHrefButton, PrimarySolidDefaultRoundButton, PrimarySolidDefaultRoundHrefButton, PrimarySolidDefaultRoundIconButton, PrimarySolidDefaultRoundIconHrefButton, PrimarySolidFullButton, PrimarySolidFullHrefButton, PrimarySolidFullIconButton, PrimarySolidFullIconHrefButton, PrimarySolidLargeRoundButton, PrimarySolidLargeRoundHrefButton, PrimarySolidLargeRoundIconButton, PrimarySolidLargeRoundIconHrefButton, PrimarySolidSmallRoundButton, PrimarySolidSmallRoundHrefButton, PrimarySolidSmallRoundIconButton, PrimarySolidSmallRoundIconHrefButton, ProcessLinksPipe, ProgressBarComponent, ProgressStatusComponent, PrompterComponent, RadioInputComponent, SearchSelectorComponent, SearchbarComponent, SecondarySolidBlockButton, SecondarySolidBlockHrefButton, SecondarySolidBlockIconButton, SecondarySolidBlockIconHrefButton, SecondarySolidDefaultRoundButton, SecondarySolidDefaultRoundHrefButton, SecondarySolidDefaultRoundIconButton, SecondarySolidDefaultRoundIconHrefButton, SecondarySolidFullButton, SecondarySolidFullHrefButton, SecondarySolidFullIconButton, SecondarySolidFullIconHrefButton, SecondarySolidLargeRoundButton, SecondarySolidLargeRoundHrefButton, SecondarySolidLargeRoundIconButton, SecondarySolidLargeRoundIconHrefButton, SecondarySolidSmallRoundButton, SecondarySolidSmallRoundHrefButton, SecondarySolidSmallRoundIconButton, SecondarySolidSmallRoundIconHrefButton, SelectSearchComponent, SimpleComponent, SolidBlockButton, SolidDefault, SolidDefaultBlock, SolidDefaultButton, SolidDefaultFull, SolidDefaultRound, SolidDefaultRoundBlock, SolidDefaultRoundButton, SolidDefaultRoundFull, SolidFullButton, SolidLargeButton, SolidLargeRoundButton, SolidSmallButton, SolidSmallRoundButton, TextComponent, TextContent, TextInputComponent, ThemeOption, ThemeService, TitleBlockComponent, TitleComponent, ToastService, ToolbarActionType, ToolbarComponent, ValtechConfigService, WizardComponent, WizardFooterComponent, applyDefaultValueToControl, content, createButtonProps, createComponentContentHelper, createContentHelper, createReactiveProps, createTextProps, createTitleProps, fromContent, fromContentWithInterpolation, fromMultipleContent, globalContentData, goToTop, interpolateContent, isAtEnd, maxLength, replaceSpecialChars, resolveColor, resolveInputDefaultValue, shouldUseReactiveContent };
+export { ARTICLE_SPACING, ActionType, AlertBoxComponent, ArticleBuilder, ArticleComponent, AvatarComponent, BannerComponent, BaseDefault, BoxComponent, ButtonComponent, ButtonGroupComponent, CardComponent, CardSection, CardType, CheckInputComponent, ClearDefault, ClearDefaultBlock, ClearDefaultFull, ClearDefaultRound, ClearDefaultRoundBlock, ClearDefaultRoundFull, CommentInputComponent, ComponentContentHelper, ComponentStates, ContentLoaderComponent, ContentService, DateInputComponent, DisplayComponent, DividerComponent, DownloadService, EmailInputComponent, ExpandableTextComponent, FileInputComponent, FooterComponent, FormComponent, FormFooterComponent, GlobalContent, HeaderComponent, HintComponent, HourInputComponent, HrefComponent, Icon, IconComponent, IconService, ImageComponent, InAppBrowserService, InputType, ItemListComponent, LANGUAGES, LangService, LanguageSelectorComponent, LayeredCardComponent, LayoutComponent, LinkComponent, LinkProcessorService, LinksCakeComponent, ListContentHelper, LocalStorageService, MOTION, NavigationService, NoContentComponent, NotesBoxComponent, NumberInputComponent, OutlineDefault, OutlineDefaultBlock, OutlineDefaultFull, OutlineDefaultRound, OutlineDefaultRoundBlock, OutlineDefaultRoundFull, PasswordInputComponent, PinInputComponent, PopoverSelectorComponent, PrimarySolidBlockButton, PrimarySolidBlockHrefButton, PrimarySolidBlockIconButton, PrimarySolidBlockIconHrefButton, PrimarySolidDefaultRoundButton, PrimarySolidDefaultRoundHrefButton, PrimarySolidDefaultRoundIconButton, PrimarySolidDefaultRoundIconHrefButton, PrimarySolidFullButton, PrimarySolidFullHrefButton, PrimarySolidFullIconButton, PrimarySolidFullIconHrefButton, PrimarySolidLargeRoundButton, PrimarySolidLargeRoundHrefButton, PrimarySolidLargeRoundIconButton, PrimarySolidLargeRoundIconHrefButton, PrimarySolidSmallRoundButton, PrimarySolidSmallRoundHrefButton, PrimarySolidSmallRoundIconButton, PrimarySolidSmallRoundIconHrefButton, ProcessLinksPipe, ProgressBarComponent, ProgressStatusComponent, PrompterComponent, RadioInputComponent, SearchSelectorComponent, SearchbarComponent, SecondarySolidBlockButton, SecondarySolidBlockHrefButton, SecondarySolidBlockIconButton, SecondarySolidBlockIconHrefButton, SecondarySolidDefaultRoundButton, SecondarySolidDefaultRoundHrefButton, SecondarySolidDefaultRoundIconButton, SecondarySolidDefaultRoundIconHrefButton, SecondarySolidFullButton, SecondarySolidFullHrefButton, SecondarySolidFullIconButton, SecondarySolidFullIconHrefButton, SecondarySolidLargeRoundButton, SecondarySolidLargeRoundHrefButton, SecondarySolidLargeRoundIconButton, SecondarySolidLargeRoundIconHrefButton, SecondarySolidSmallRoundButton, SecondarySolidSmallRoundHrefButton, SecondarySolidSmallRoundIconButton, SecondarySolidSmallRoundIconHrefButton, SelectSearchComponent, SimpleComponent, SolidBlockButton, SolidDefault, SolidDefaultBlock, SolidDefaultButton, SolidDefaultFull, SolidDefaultRound, SolidDefaultRoundBlock, SolidDefaultRoundButton, SolidDefaultRoundFull, SolidFullButton, SolidLargeButton, SolidLargeRoundButton, SolidSmallButton, SolidSmallRoundButton, TextComponent, TextContent, TextInputComponent, ThemeOption, ThemeService, TitleBlockComponent, TitleComponent, ToastService, ToolbarActionType, ToolbarComponent, ValtechConfigService, WizardComponent, WizardFooterComponent, applyDefaultValueToControl, content, createButtonProps, createComponentContentHelper, createContentHelper, createReactiveProps, createTextProps, createTitleProps, fromContent, fromContentWithInterpolation, fromMultipleContent, globalContentData, goToTop, interpolateContent, isAtEnd, maxLength, replaceSpecialChars, resolveColor, resolveInputDefaultValue, shouldUseReactiveContent };
 //# sourceMappingURL=valtech-components.mjs.map