valtech-components 2.0.358 → 2.0.360
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/atoms/image/image.component.mjs +352 -11
- package/esm2022/lib/components/atoms/image/types.mjs +1 -1
- package/esm2022/lib/components/molecules/plain-code-box/plain-code-box.component.mjs +3 -3
- package/esm2022/lib/services/lang-provider/content.mjs +26 -1
- package/fesm2022/valtech-components.mjs +377 -12
- package/fesm2022/valtech-components.mjs.map +1 -1
- package/lib/components/atoms/image/image.component.d.ts +31 -0
- package/lib/components/atoms/image/types.d.ts +2 -0
- package/lib/components/organisms/article/article.component.d.ts +4 -4
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { EventEmitter, Component, Input, Output, Injectable, inject, InjectionToken, Inject, ChangeDetectorRef, Pipe, ChangeDetectionStrategy, ViewChild } from '@angular/core';
|
|
2
|
+
import { EventEmitter, Component, Input, Output, Injectable, inject, InjectionToken, Inject, ChangeDetectorRef, HostListener, Pipe, ChangeDetectionStrategy, ViewChild } from '@angular/core';
|
|
3
3
|
import { IonAvatar, IonCard, IonIcon, IonButton, IonSpinner, IonText, IonProgressBar, IonCardContent, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCheckbox, IonButtons, IonTextarea, IonDatetime, IonDatetimeButton, IonModal, IonInput, IonSelect, IonSelectOption, IonLabel, IonRadioGroup, IonRadio, IonSearchbar, IonToolbar, IonTitle, IonMenuButton, IonFooter, IonHeader, IonList, IonListHeader, IonNote, IonItem, IonContent } from '@ionic/angular/standalone';
|
|
4
4
|
import * as i1 from '@angular/common';
|
|
5
5
|
import { CommonModule, NgStyle, AsyncPipe, NgFor, NgClass } from '@angular/common';
|
|
@@ -1796,7 +1796,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
1796
1796
|
* Displays an image with various display options (bordered, shaded, dark, etc).
|
|
1797
1797
|
* Now includes a container wrapper for better flexbox support and alignment options.
|
|
1798
1798
|
*
|
|
1799
|
-
*
|
|
1799
|
+
* NEW: Optional preview mode with full-screen zoom capabilities:
|
|
1800
|
+
* - Click to open full-screen preview (when previewMode is enabled)
|
|
1801
|
+
* - Pinch-to-zoom on mobile devices
|
|
1802
|
+
* - Mouse wheel zoom on desktop
|
|
1803
|
+
* - Pan/drag to navigate zoomed images
|
|
1804
|
+
* - Zoom controls with buttons
|
|
1805
|
+
* - Keyboard shortcuts (Esc to close, +/- to zoom, 0 to reset)
|
|
1806
|
+
* - Touch-friendly interface with gesture support
|
|
1807
|
+
*
|
|
1808
|
+
* @example Basic usage:
|
|
1800
1809
|
* <val-image [props]="{
|
|
1801
1810
|
* src: 'url',
|
|
1802
1811
|
* alt: 'desc',
|
|
@@ -1807,11 +1816,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
1807
1816
|
* caption: 'Image description'
|
|
1808
1817
|
* }"></val-image>
|
|
1809
1818
|
*
|
|
1810
|
-
* @
|
|
1819
|
+
* @example With preview mode:
|
|
1820
|
+
* <val-image [props]="{
|
|
1821
|
+
* src: 'url',
|
|
1822
|
+
* alt: 'desc',
|
|
1823
|
+
* previewMode: true,
|
|
1824
|
+
* bordered: true,
|
|
1825
|
+
* alignment: 'center'
|
|
1826
|
+
* }"></val-image>
|
|
1827
|
+
*
|
|
1828
|
+
* @input props: ImageMetadata - Configuration for the image (src, alt, size, mode, alignment, caption, previewMode, etc.)
|
|
1811
1829
|
*/
|
|
1812
1830
|
class ImageComponent {
|
|
1813
1831
|
constructor() {
|
|
1814
1832
|
this.available = true;
|
|
1833
|
+
// Preview mode properties
|
|
1834
|
+
this.isPreviewOpen = false;
|
|
1835
|
+
this.zoomLevel = 1;
|
|
1836
|
+
this.minZoom = 0.5;
|
|
1837
|
+
this.maxZoom = 5;
|
|
1838
|
+
this.panX = 0;
|
|
1839
|
+
this.panY = 0;
|
|
1840
|
+
// Touch and mouse interaction properties
|
|
1841
|
+
this.isDragging = false;
|
|
1842
|
+
this.lastPanX = 0;
|
|
1843
|
+
this.lastPanY = 0;
|
|
1844
|
+
this.startX = 0;
|
|
1845
|
+
this.startY = 0;
|
|
1846
|
+
// Touch gesture properties
|
|
1847
|
+
this.initialDistance = 0;
|
|
1848
|
+
this.initialZoom = 1;
|
|
1849
|
+
this.touches = [];
|
|
1850
|
+
// Lang service
|
|
1851
|
+
this.langService = inject(LangService);
|
|
1852
|
+
// Math for template
|
|
1853
|
+
this.Math = Math;
|
|
1815
1854
|
}
|
|
1816
1855
|
ngOnInit() {
|
|
1817
1856
|
// Set default values
|
|
@@ -1830,8 +1869,144 @@ class ImageComponent {
|
|
|
1830
1869
|
this.available = true;
|
|
1831
1870
|
}, 100);
|
|
1832
1871
|
}
|
|
1872
|
+
// Preview mode methods
|
|
1873
|
+
openPreview() {
|
|
1874
|
+
if (!this.props.previewMode)
|
|
1875
|
+
return;
|
|
1876
|
+
this.isPreviewOpen = true;
|
|
1877
|
+
this.resetZoom();
|
|
1878
|
+
document.body.style.overflow = 'hidden'; // Prevent background scrolling
|
|
1879
|
+
}
|
|
1880
|
+
closePreview() {
|
|
1881
|
+
this.isPreviewOpen = false;
|
|
1882
|
+
document.body.style.overflow = ''; // Restore scrolling
|
|
1883
|
+
}
|
|
1884
|
+
// Zoom methods
|
|
1885
|
+
zoomIn() {
|
|
1886
|
+
if (this.zoomLevel < this.maxZoom) {
|
|
1887
|
+
this.zoomLevel = Math.min(this.zoomLevel * 1.2, this.maxZoom);
|
|
1888
|
+
}
|
|
1889
|
+
}
|
|
1890
|
+
zoomOut() {
|
|
1891
|
+
if (this.zoomLevel > this.minZoom) {
|
|
1892
|
+
this.zoomLevel = Math.max(this.zoomLevel / 1.2, this.minZoom);
|
|
1893
|
+
// Reset pan if zoomed out to 1x or less
|
|
1894
|
+
if (this.zoomLevel <= 1) {
|
|
1895
|
+
this.panX = 0;
|
|
1896
|
+
this.panY = 0;
|
|
1897
|
+
}
|
|
1898
|
+
}
|
|
1899
|
+
}
|
|
1900
|
+
resetZoom() {
|
|
1901
|
+
this.zoomLevel = 1;
|
|
1902
|
+
this.panX = 0;
|
|
1903
|
+
this.panY = 0;
|
|
1904
|
+
}
|
|
1905
|
+
// Mouse events
|
|
1906
|
+
onMouseDown(event) {
|
|
1907
|
+
if (this.zoomLevel <= 1)
|
|
1908
|
+
return;
|
|
1909
|
+
this.isDragging = true;
|
|
1910
|
+
this.startX = event.clientX - this.panX;
|
|
1911
|
+
this.startY = event.clientY - this.panY;
|
|
1912
|
+
event.preventDefault();
|
|
1913
|
+
}
|
|
1914
|
+
onMouseMove(event) {
|
|
1915
|
+
if (!this.isDragging || this.zoomLevel <= 1)
|
|
1916
|
+
return;
|
|
1917
|
+
this.panX = event.clientX - this.startX;
|
|
1918
|
+
this.panY = event.clientY - this.startY;
|
|
1919
|
+
event.preventDefault();
|
|
1920
|
+
}
|
|
1921
|
+
onMouseUp(event) {
|
|
1922
|
+
this.isDragging = false;
|
|
1923
|
+
}
|
|
1924
|
+
// Touch events for mobile
|
|
1925
|
+
onTouchStart(event) {
|
|
1926
|
+
event.preventDefault();
|
|
1927
|
+
this.touches = Array.from(event.touches);
|
|
1928
|
+
if (this.touches.length === 1) {
|
|
1929
|
+
// Single touch - start dragging
|
|
1930
|
+
if (this.zoomLevel > 1) {
|
|
1931
|
+
this.isDragging = true;
|
|
1932
|
+
this.startX = this.touches[0].clientX - this.panX;
|
|
1933
|
+
this.startY = this.touches[0].clientY - this.panY;
|
|
1934
|
+
}
|
|
1935
|
+
}
|
|
1936
|
+
else if (this.touches.length === 2) {
|
|
1937
|
+
// Two touches - start pinch zoom
|
|
1938
|
+
this.isDragging = false;
|
|
1939
|
+
this.initialDistance = this.getDistance(this.touches[0], this.touches[1]);
|
|
1940
|
+
this.initialZoom = this.zoomLevel;
|
|
1941
|
+
}
|
|
1942
|
+
}
|
|
1943
|
+
onTouchMove(event) {
|
|
1944
|
+
event.preventDefault();
|
|
1945
|
+
this.touches = Array.from(event.touches);
|
|
1946
|
+
if (this.touches.length === 1 && this.isDragging && this.zoomLevel > 1) {
|
|
1947
|
+
// Single touch - drag
|
|
1948
|
+
this.panX = this.touches[0].clientX - this.startX;
|
|
1949
|
+
this.panY = this.touches[0].clientY - this.startY;
|
|
1950
|
+
}
|
|
1951
|
+
else if (this.touches.length === 2) {
|
|
1952
|
+
// Two touches - pinch zoom
|
|
1953
|
+
const currentDistance = this.getDistance(this.touches[0], this.touches[1]);
|
|
1954
|
+
const scale = currentDistance / this.initialDistance;
|
|
1955
|
+
this.zoomLevel = Math.min(Math.max(this.initialZoom * scale, this.minZoom), this.maxZoom);
|
|
1956
|
+
// Reset pan if zoomed out to 1x or less
|
|
1957
|
+
if (this.zoomLevel <= 1) {
|
|
1958
|
+
this.panX = 0;
|
|
1959
|
+
this.panY = 0;
|
|
1960
|
+
}
|
|
1961
|
+
}
|
|
1962
|
+
}
|
|
1963
|
+
onTouchEnd(event) {
|
|
1964
|
+
this.isDragging = false;
|
|
1965
|
+
this.touches = Array.from(event.touches);
|
|
1966
|
+
}
|
|
1967
|
+
// Mouse wheel zoom
|
|
1968
|
+
onWheel(event) {
|
|
1969
|
+
event.preventDefault();
|
|
1970
|
+
const delta = event.deltaY > 0 ? -1 : 1;
|
|
1971
|
+
const zoomFactor = 1 + delta * 0.1;
|
|
1972
|
+
this.zoomLevel = Math.min(Math.max(this.zoomLevel * zoomFactor, this.minZoom), this.maxZoom);
|
|
1973
|
+
// Reset pan if zoomed out to 1x or less
|
|
1974
|
+
if (this.zoomLevel <= 1) {
|
|
1975
|
+
this.panX = 0;
|
|
1976
|
+
this.panY = 0;
|
|
1977
|
+
}
|
|
1978
|
+
}
|
|
1979
|
+
// Helper methods
|
|
1980
|
+
getDistance(touch1, touch2) {
|
|
1981
|
+
const dx = touch1.clientX - touch2.clientX;
|
|
1982
|
+
const dy = touch1.clientY - touch2.clientY;
|
|
1983
|
+
return Math.sqrt(dx * dx + dy * dy);
|
|
1984
|
+
}
|
|
1985
|
+
// Keyboard shortcuts
|
|
1986
|
+
onKeyDown(event) {
|
|
1987
|
+
if (!this.isPreviewOpen)
|
|
1988
|
+
return;
|
|
1989
|
+
switch (event.key) {
|
|
1990
|
+
case 'Escape':
|
|
1991
|
+
this.closePreview();
|
|
1992
|
+
break;
|
|
1993
|
+
case '+':
|
|
1994
|
+
case '=':
|
|
1995
|
+
event.preventDefault();
|
|
1996
|
+
this.zoomIn();
|
|
1997
|
+
break;
|
|
1998
|
+
case '-':
|
|
1999
|
+
event.preventDefault();
|
|
2000
|
+
this.zoomOut();
|
|
2001
|
+
break;
|
|
2002
|
+
case '0':
|
|
2003
|
+
event.preventDefault();
|
|
2004
|
+
this.resetZoom();
|
|
2005
|
+
break;
|
|
2006
|
+
}
|
|
2007
|
+
}
|
|
1833
2008
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1834
|
-
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: `
|
|
2009
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ImageComponent, isStandalone: true, selector: "val-image", inputs: { props: "props" }, host: { listeners: { "document:keydown": "onKeyDown($event)" } }, ngImport: i0, template: `
|
|
1835
2010
|
<figure
|
|
1836
2011
|
class="val-image-container"
|
|
1837
2012
|
[class]="props.containerClass"
|
|
@@ -1848,7 +2023,11 @@ class ImageComponent {
|
|
|
1848
2023
|
@if (props.src.includes('--')) {
|
|
1849
2024
|
<img
|
|
1850
2025
|
class="val-image"
|
|
1851
|
-
[ngClass]="[
|
|
2026
|
+
[ngClass]="[
|
|
2027
|
+
props.mode,
|
|
2028
|
+
!props.width ? props.size : '',
|
|
2029
|
+
props.previewMode ? 'val-image--preview-enabled' : '',
|
|
2030
|
+
]"
|
|
1852
2031
|
[ngStyle]="{
|
|
1853
2032
|
content: 'var(' + props.src + ')',
|
|
1854
2033
|
}"
|
|
@@ -1861,11 +2040,16 @@ class ImageComponent {
|
|
|
1861
2040
|
[style.width.rem]="props.width"
|
|
1862
2041
|
[style.max-width.rem]="props.width"
|
|
1863
2042
|
[style.height.px]="props.height"
|
|
2043
|
+
(click)="props.previewMode ? openPreview() : null"
|
|
1864
2044
|
/>
|
|
1865
2045
|
} @else {
|
|
1866
2046
|
<img
|
|
1867
2047
|
class="val-image"
|
|
1868
|
-
[ngClass]="[
|
|
2048
|
+
[ngClass]="[
|
|
2049
|
+
props.mode,
|
|
2050
|
+
!props.width ? props.size : '',
|
|
2051
|
+
props.previewMode ? 'val-image--preview-enabled' : '',
|
|
2052
|
+
]"
|
|
1869
2053
|
[class.bordered]="props.bordered"
|
|
1870
2054
|
[class.shaded]="props.shaded"
|
|
1871
2055
|
[class.dark]="props.dark"
|
|
@@ -1876,6 +2060,7 @@ class ImageComponent {
|
|
|
1876
2060
|
[style.width.rem]="props.width"
|
|
1877
2061
|
[style.max-width.rem]="props.width"
|
|
1878
2062
|
[style.height.px]="props.height"
|
|
2063
|
+
(click)="props.previewMode ? openPreview() : null"
|
|
1879
2064
|
/>
|
|
1880
2065
|
}
|
|
1881
2066
|
</div>
|
|
@@ -1893,7 +2078,78 @@ class ImageComponent {
|
|
|
1893
2078
|
</figcaption>
|
|
1894
2079
|
}
|
|
1895
2080
|
</figure>
|
|
1896
|
-
|
|
2081
|
+
|
|
2082
|
+
<!-- Modal de previsualización -->
|
|
2083
|
+
@if (isPreviewOpen) {
|
|
2084
|
+
<div class="val-image-preview-modal" (click)="closePreview()">
|
|
2085
|
+
<div class="val-image-preview-container">
|
|
2086
|
+
<!-- Botón de cerrar -->
|
|
2087
|
+
<button
|
|
2088
|
+
class="val-image-preview-close"
|
|
2089
|
+
(click)="closePreview()"
|
|
2090
|
+
[attr.aria-label]="langService.getText('ImageComponent', 'close')"
|
|
2091
|
+
>
|
|
2092
|
+
<span>×</span>
|
|
2093
|
+
</button>
|
|
2094
|
+
|
|
2095
|
+
<!-- Controles de zoom -->
|
|
2096
|
+
<div class="val-image-preview-controls">
|
|
2097
|
+
<button
|
|
2098
|
+
class="val-image-preview-zoom-btn"
|
|
2099
|
+
(click)="zoomOut()"
|
|
2100
|
+
[disabled]="zoomLevel <= minZoom"
|
|
2101
|
+
[attr.aria-label]="langService.getText('ImageComponent', 'zoomOut')"
|
|
2102
|
+
>
|
|
2103
|
+
<span>−</span>
|
|
2104
|
+
</button>
|
|
2105
|
+
<span class="val-image-preview-zoom-level">{{ Math.round(zoomLevel * 100) }}%</span>
|
|
2106
|
+
<button
|
|
2107
|
+
class="val-image-preview-zoom-btn"
|
|
2108
|
+
(click)="zoomIn()"
|
|
2109
|
+
[disabled]="zoomLevel >= maxZoom"
|
|
2110
|
+
[attr.aria-label]="langService.getText('ImageComponent', 'zoomIn')"
|
|
2111
|
+
>
|
|
2112
|
+
<span>+</span>
|
|
2113
|
+
</button>
|
|
2114
|
+
<button
|
|
2115
|
+
class="val-image-preview-reset-btn"
|
|
2116
|
+
(click)="resetZoom()"
|
|
2117
|
+
[attr.aria-label]="langService.getText('ImageComponent', 'resetZoom')"
|
|
2118
|
+
>
|
|
2119
|
+
<span>⌂</span>
|
|
2120
|
+
</button>
|
|
2121
|
+
</div>
|
|
2122
|
+
|
|
2123
|
+
<!-- Imagen ampliada -->
|
|
2124
|
+
<div
|
|
2125
|
+
class="val-image-preview-viewport"
|
|
2126
|
+
(click)="$event.stopPropagation()"
|
|
2127
|
+
(touchstart)="onTouchStart($event)"
|
|
2128
|
+
(touchmove)="onTouchMove($event)"
|
|
2129
|
+
(touchend)="onTouchEnd($event)"
|
|
2130
|
+
(wheel)="onWheel($event)"
|
|
2131
|
+
(mousedown)="onMouseDown($event)"
|
|
2132
|
+
(mousemove)="onMouseMove($event)"
|
|
2133
|
+
(mouseup)="onMouseUp($event)"
|
|
2134
|
+
(mouseleave)="onMouseUp($event)"
|
|
2135
|
+
>
|
|
2136
|
+
<img
|
|
2137
|
+
#previewImage
|
|
2138
|
+
class="val-image-preview-img"
|
|
2139
|
+
[src]="props.src.includes('--') ? null : props.src"
|
|
2140
|
+
[ngStyle]="{
|
|
2141
|
+
content: props.src.includes('--') ? 'var(' + props.src + ')' : null,
|
|
2142
|
+
transform: 'scale(' + zoomLevel + ') translate(' + panX + 'px, ' + panY + 'px)',
|
|
2143
|
+
cursor: isDragging ? 'grabbing' : zoomLevel > 1 ? 'grab' : 'default',
|
|
2144
|
+
}"
|
|
2145
|
+
[alt]="props.alt"
|
|
2146
|
+
draggable="false"
|
|
2147
|
+
/>
|
|
2148
|
+
</div>
|
|
2149
|
+
</div>
|
|
2150
|
+
</div>
|
|
2151
|
+
}
|
|
2152
|
+
`, 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;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{width:100%;height:auto;display:block;opacity:1;max-width:100%}.val-image.center{margin:0 auto}.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%}@media (max-width: 768px){.val-image .val-image-wrapper.small{width:40%}.val-image .val-image-wrapper.medium{width:60%}.val-image .val-image-wrapper.large{width:80%}.val-image .val-image-wrapper.xlarge{width:100%}}.val-image.small{width:30%}.val-image.medium{width:50%}.val-image.large{width:70%}.val-image.xlarge{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)}}.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}.val-image--preview-enabled{cursor:pointer;transition:opacity .2s ease,transform .2s ease}.val-image--preview-enabled:hover{opacity:.9;transform:scale(1.02)}.val-image-preview-modal{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000f2;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:10000;display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease-out}.val-image-preview-container{position:relative;width:100%;height:100%;display:flex;flex-direction:column}.val-image-preview-close{position:absolute;top:20px;right:20px;z-index:10001;background:#ffffff1a;border:none;color:#fff;width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:24px;font-weight:700;transition:background .2s ease}.val-image-preview-close:hover{background:#fff3}.val-image-preview-close span{line-height:1}.val-image-preview-controls{position:absolute;bottom:20px;left:50%;transform:translate(-50%);z-index:10001;display:flex;align-items:center;gap:10px;background:#000000b3;padding:10px 20px;border-radius:25px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.val-image-preview-zoom-btn,.val-image-preview-reset-btn{background:#ffffff1a;border:none;color:#fff;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:20px;font-weight:700;transition:all .2s ease}.val-image-preview-zoom-btn:hover:not(:disabled),.val-image-preview-reset-btn:hover:not(:disabled){background:#fff3;transform:scale(1.1)}.val-image-preview-zoom-btn:disabled,.val-image-preview-reset-btn:disabled{opacity:.4;cursor:not-allowed}.val-image-preview-zoom-btn span,.val-image-preview-reset-btn span{line-height:1}.val-image-preview-zoom-level{color:#fff;font-size:14px;font-weight:600;min-width:50px;text-align:center}.val-image-preview-viewport{flex:1;overflow:hidden;display:flex;align-items:center;justify-content:center;touch-action:none}.val-image-preview-img{max-width:90vw;max-height:90vh;object-fit:contain;transition:transform .1s ease-out;transform-origin:center center;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (max-width: 768px){.val-image-preview-close{top:10px;right:10px;width:40px;height:40px;font-size:20px}.val-image-preview-controls{bottom:10px;padding:8px 16px}.val-image-preview-zoom-btn,.val-image-preview-reset-btn{width:35px;height:35px;font-size:18px}.val-image-preview-zoom-level{font-size:12px;min-width:40px}.val-image-preview-img{max-width:95vw;max-height:85vh}}\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"] }] }); }
|
|
1897
2153
|
}
|
|
1898
2154
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageComponent, decorators: [{
|
|
1899
2155
|
type: Component,
|
|
@@ -1914,7 +2170,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
1914
2170
|
@if (props.src.includes('--')) {
|
|
1915
2171
|
<img
|
|
1916
2172
|
class="val-image"
|
|
1917
|
-
[ngClass]="[
|
|
2173
|
+
[ngClass]="[
|
|
2174
|
+
props.mode,
|
|
2175
|
+
!props.width ? props.size : '',
|
|
2176
|
+
props.previewMode ? 'val-image--preview-enabled' : '',
|
|
2177
|
+
]"
|
|
1918
2178
|
[ngStyle]="{
|
|
1919
2179
|
content: 'var(' + props.src + ')',
|
|
1920
2180
|
}"
|
|
@@ -1927,11 +2187,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
1927
2187
|
[style.width.rem]="props.width"
|
|
1928
2188
|
[style.max-width.rem]="props.width"
|
|
1929
2189
|
[style.height.px]="props.height"
|
|
2190
|
+
(click)="props.previewMode ? openPreview() : null"
|
|
1930
2191
|
/>
|
|
1931
2192
|
} @else {
|
|
1932
2193
|
<img
|
|
1933
2194
|
class="val-image"
|
|
1934
|
-
[ngClass]="[
|
|
2195
|
+
[ngClass]="[
|
|
2196
|
+
props.mode,
|
|
2197
|
+
!props.width ? props.size : '',
|
|
2198
|
+
props.previewMode ? 'val-image--preview-enabled' : '',
|
|
2199
|
+
]"
|
|
1935
2200
|
[class.bordered]="props.bordered"
|
|
1936
2201
|
[class.shaded]="props.shaded"
|
|
1937
2202
|
[class.dark]="props.dark"
|
|
@@ -1942,6 +2207,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
1942
2207
|
[style.width.rem]="props.width"
|
|
1943
2208
|
[style.max-width.rem]="props.width"
|
|
1944
2209
|
[style.height.px]="props.height"
|
|
2210
|
+
(click)="props.previewMode ? openPreview() : null"
|
|
1945
2211
|
/>
|
|
1946
2212
|
}
|
|
1947
2213
|
</div>
|
|
@@ -1959,9 +2225,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
1959
2225
|
</figcaption>
|
|
1960
2226
|
}
|
|
1961
2227
|
</figure>
|
|
1962
|
-
|
|
2228
|
+
|
|
2229
|
+
<!-- Modal de previsualización -->
|
|
2230
|
+
@if (isPreviewOpen) {
|
|
2231
|
+
<div class="val-image-preview-modal" (click)="closePreview()">
|
|
2232
|
+
<div class="val-image-preview-container">
|
|
2233
|
+
<!-- Botón de cerrar -->
|
|
2234
|
+
<button
|
|
2235
|
+
class="val-image-preview-close"
|
|
2236
|
+
(click)="closePreview()"
|
|
2237
|
+
[attr.aria-label]="langService.getText('ImageComponent', 'close')"
|
|
2238
|
+
>
|
|
2239
|
+
<span>×</span>
|
|
2240
|
+
</button>
|
|
2241
|
+
|
|
2242
|
+
<!-- Controles de zoom -->
|
|
2243
|
+
<div class="val-image-preview-controls">
|
|
2244
|
+
<button
|
|
2245
|
+
class="val-image-preview-zoom-btn"
|
|
2246
|
+
(click)="zoomOut()"
|
|
2247
|
+
[disabled]="zoomLevel <= minZoom"
|
|
2248
|
+
[attr.aria-label]="langService.getText('ImageComponent', 'zoomOut')"
|
|
2249
|
+
>
|
|
2250
|
+
<span>−</span>
|
|
2251
|
+
</button>
|
|
2252
|
+
<span class="val-image-preview-zoom-level">{{ Math.round(zoomLevel * 100) }}%</span>
|
|
2253
|
+
<button
|
|
2254
|
+
class="val-image-preview-zoom-btn"
|
|
2255
|
+
(click)="zoomIn()"
|
|
2256
|
+
[disabled]="zoomLevel >= maxZoom"
|
|
2257
|
+
[attr.aria-label]="langService.getText('ImageComponent', 'zoomIn')"
|
|
2258
|
+
>
|
|
2259
|
+
<span>+</span>
|
|
2260
|
+
</button>
|
|
2261
|
+
<button
|
|
2262
|
+
class="val-image-preview-reset-btn"
|
|
2263
|
+
(click)="resetZoom()"
|
|
2264
|
+
[attr.aria-label]="langService.getText('ImageComponent', 'resetZoom')"
|
|
2265
|
+
>
|
|
2266
|
+
<span>⌂</span>
|
|
2267
|
+
</button>
|
|
2268
|
+
</div>
|
|
2269
|
+
|
|
2270
|
+
<!-- Imagen ampliada -->
|
|
2271
|
+
<div
|
|
2272
|
+
class="val-image-preview-viewport"
|
|
2273
|
+
(click)="$event.stopPropagation()"
|
|
2274
|
+
(touchstart)="onTouchStart($event)"
|
|
2275
|
+
(touchmove)="onTouchMove($event)"
|
|
2276
|
+
(touchend)="onTouchEnd($event)"
|
|
2277
|
+
(wheel)="onWheel($event)"
|
|
2278
|
+
(mousedown)="onMouseDown($event)"
|
|
2279
|
+
(mousemove)="onMouseMove($event)"
|
|
2280
|
+
(mouseup)="onMouseUp($event)"
|
|
2281
|
+
(mouseleave)="onMouseUp($event)"
|
|
2282
|
+
>
|
|
2283
|
+
<img
|
|
2284
|
+
#previewImage
|
|
2285
|
+
class="val-image-preview-img"
|
|
2286
|
+
[src]="props.src.includes('--') ? null : props.src"
|
|
2287
|
+
[ngStyle]="{
|
|
2288
|
+
content: props.src.includes('--') ? 'var(' + props.src + ')' : null,
|
|
2289
|
+
transform: 'scale(' + zoomLevel + ') translate(' + panX + 'px, ' + panY + 'px)',
|
|
2290
|
+
cursor: isDragging ? 'grabbing' : zoomLevel > 1 ? 'grab' : 'default',
|
|
2291
|
+
}"
|
|
2292
|
+
[alt]="props.alt"
|
|
2293
|
+
draggable="false"
|
|
2294
|
+
/>
|
|
2295
|
+
</div>
|
|
2296
|
+
</div>
|
|
2297
|
+
</div>
|
|
2298
|
+
}
|
|
2299
|
+
`, 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;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{width:100%;height:auto;display:block;opacity:1;max-width:100%}.val-image.center{margin:0 auto}.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%}@media (max-width: 768px){.val-image .val-image-wrapper.small{width:40%}.val-image .val-image-wrapper.medium{width:60%}.val-image .val-image-wrapper.large{width:80%}.val-image .val-image-wrapper.xlarge{width:100%}}.val-image.small{width:30%}.val-image.medium{width:50%}.val-image.large{width:70%}.val-image.xlarge{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)}}.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}.val-image--preview-enabled{cursor:pointer;transition:opacity .2s ease,transform .2s ease}.val-image--preview-enabled:hover{opacity:.9;transform:scale(1.02)}.val-image-preview-modal{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000f2;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:10000;display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease-out}.val-image-preview-container{position:relative;width:100%;height:100%;display:flex;flex-direction:column}.val-image-preview-close{position:absolute;top:20px;right:20px;z-index:10001;background:#ffffff1a;border:none;color:#fff;width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:24px;font-weight:700;transition:background .2s ease}.val-image-preview-close:hover{background:#fff3}.val-image-preview-close span{line-height:1}.val-image-preview-controls{position:absolute;bottom:20px;left:50%;transform:translate(-50%);z-index:10001;display:flex;align-items:center;gap:10px;background:#000000b3;padding:10px 20px;border-radius:25px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.val-image-preview-zoom-btn,.val-image-preview-reset-btn{background:#ffffff1a;border:none;color:#fff;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:20px;font-weight:700;transition:all .2s ease}.val-image-preview-zoom-btn:hover:not(:disabled),.val-image-preview-reset-btn:hover:not(:disabled){background:#fff3;transform:scale(1.1)}.val-image-preview-zoom-btn:disabled,.val-image-preview-reset-btn:disabled{opacity:.4;cursor:not-allowed}.val-image-preview-zoom-btn span,.val-image-preview-reset-btn span{line-height:1}.val-image-preview-zoom-level{color:#fff;font-size:14px;font-weight:600;min-width:50px;text-align:center}.val-image-preview-viewport{flex:1;overflow:hidden;display:flex;align-items:center;justify-content:center;touch-action:none}.val-image-preview-img{max-width:90vw;max-height:90vh;object-fit:contain;transition:transform .1s ease-out;transform-origin:center center;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (max-width: 768px){.val-image-preview-close{top:10px;right:10px;width:40px;height:40px;font-size:20px}.val-image-preview-controls{bottom:10px;padding:8px 16px}.val-image-preview-zoom-btn,.val-image-preview-reset-btn{width:35px;height:35px;font-size:18px}.val-image-preview-zoom-level{font-size:12px;min-width:40px}.val-image-preview-img{max-width:95vw;max-height:85vh}}\n"] }]
|
|
1963
2300
|
}], ctorParameters: () => [], propDecorators: { props: [{
|
|
1964
2301
|
type: Input
|
|
2302
|
+
}], onKeyDown: [{
|
|
2303
|
+
type: HostListener,
|
|
2304
|
+
args: ['document:keydown', ['$event']]
|
|
1965
2305
|
}] } });
|
|
1966
2306
|
|
|
1967
2307
|
/**
|
|
@@ -5879,7 +6219,7 @@ class PlainCodeBoxComponent {
|
|
|
5879
6219
|
<pre><code [class]="'language-' + (props.language || 'bash')" #codeBlock><ng-container *ngFor="let line of props.lines; let i = index"><span [class]="line.type ? 'line-' + line.type : 'line-normal'">{{ line.text }}</span><br *ngIf="i < props.lines.length - 1">
|
|
5880
6220
|
</ng-container></code></pre>
|
|
5881
6221
|
</div>
|
|
5882
|
-
`, isInline: true, styles: [".code-box-container{position:relative;background-color:#282c34;border-radius:16px;overflow:hidden;box-shadow:0 4px 15px #0009;margin:0}@media (prefers-color-scheme: light){.code-box-container{background-color:#fff;box-shadow:0 2px 4px #0000001a}}.copy-button{position:absolute;top:8px;right:8px;z-index:10;--padding-start: 2px;--padding-end: 2px;--padding-top: 2px;--padding-bottom: 2px;min-width:28px;min-height:28px;height:28px;width:28px;color:#61afef;background:#0006;border-radius:6px;box-shadow:0 1px 4px #0000000d;display:flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease}.copy-button:hover{background:#00000080;color:#8cc4ff}.copy-button ion-icon{font-size:1.2em;margin:0}@media (prefers-color-scheme: light){.copy-button{color:var(--ion-color-primary, #007bff);background:#ffffffb3}.copy-button:hover{background:#ffffffe6;color:var(--ion-color-primary-tint, #3880ff)}}pre{margin:0;padding:0;background-color:transparent;min-width:100%;min-height:100%;white-space:pre-wrap;word-break:normal;font-family:Roboto Mono,monospace}code{font-family:Roboto Mono,monospace;font-size:.9em;line-height:1.6;display:block;white-space:inherit;word-break:inherit;color:#abb2bf;margin:0
|
|
6222
|
+
`, isInline: true, styles: [".code-box-container{position:relative;background-color:#282c34;border-radius:16px;overflow:hidden;box-shadow:0 4px 15px #0009;margin:0}@media (prefers-color-scheme: light){.code-box-container{background-color:#fff;box-shadow:0 2px 4px #0000001a}}.copy-button{position:absolute;top:8px;right:8px;z-index:10;--padding-start: 2px;--padding-end: 2px;--padding-top: 2px;--padding-bottom: 2px;min-width:28px;min-height:28px;height:28px;width:28px;color:#61afef;background:#0006;border-radius:6px;box-shadow:0 1px 4px #0000000d;display:flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease}.copy-button:hover{background:#00000080;color:#8cc4ff}.copy-button ion-icon{font-size:1.2em;margin:0}@media (prefers-color-scheme: light){.copy-button{color:var(--ion-color-primary, #007bff);background:#ffffffb3}.copy-button:hover{background:#ffffffe6;color:var(--ion-color-primary-tint, #3880ff)}}pre{margin:0;padding:0;background-color:transparent;min-width:100%;min-height:100%;white-space:pre-wrap;word-break:normal;font-family:Roboto Mono,monospace}code{font-family:Roboto Mono,monospace;font-size:.9em;line-height:1.6;display:block;white-space:inherit;word-break:inherit;color:#abb2bf;margin:0}@media (prefers-color-scheme: light){code{color:#333}}code .line-normal{color:#abb2bf}@media (prefers-color-scheme: light){code .line-normal{color:#333}}code .line-command{color:#c678dd}@media (prefers-color-scheme: light){code .line-command{color:var(--ion-color-primary, #3880ff)}}code .line-error{color:#e06c75}@media (prefers-color-scheme: light){code .line-error{color:var(--ion-color-danger, #eb445a)}}code .line-success{color:#98c379}@media (prefers-color-scheme: light){code .line-success{color:var(--ion-color-success, #2dd36f)}}code .token.comment{color:#5c6370}code .token.selector,code .token.string{color:#98c379}code .token.punctuation{color:#abb2bf}code .token.operator{color:#c678dd}code .token.boolean,code .token.number{color:#d19a66}code .token.function{color:#61afef}code .token.keyword{color:#c678dd}code .token.class-name{color:#e6c07b}code .token.tag{color:#e06c75}code .token.attr-name{color:#d19a66}code .token.attr-value{color:#98c379}code .token.property{color:#56b6c2}code .token.variable{color:#e06c75}@media (max-width: 600px){.code-box-container{border-radius:16px}.copy-button{top:6px;right:6px;min-width:24px;min-height:24px;height:24px;width:24px}.copy-button ion-icon{font-size:1em}pre{padding:0;margin:0}code{font-size:.8em;line-height:1.5;margin:0}}@media (min-width: 601px) and (max-width: 1024px){code{font-size:.9em}}@media (min-width: 1025px){code{font-size:1em}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: 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"] }] }); }
|
|
5883
6223
|
}
|
|
5884
6224
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PlainCodeBoxComponent, decorators: [{
|
|
5885
6225
|
type: Component,
|
|
@@ -5891,7 +6231,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
5891
6231
|
<pre><code [class]="'language-' + (props.language || 'bash')" #codeBlock><ng-container *ngFor="let line of props.lines; let i = index"><span [class]="line.type ? 'line-' + line.type : 'line-normal'">{{ line.text }}</span><br *ngIf="i < props.lines.length - 1">
|
|
5892
6232
|
</ng-container></code></pre>
|
|
5893
6233
|
</div>
|
|
5894
|
-
`, styles: [".code-box-container{position:relative;background-color:#282c34;border-radius:16px;overflow:hidden;box-shadow:0 4px 15px #0009;margin:0}@media (prefers-color-scheme: light){.code-box-container{background-color:#fff;box-shadow:0 2px 4px #0000001a}}.copy-button{position:absolute;top:8px;right:8px;z-index:10;--padding-start: 2px;--padding-end: 2px;--padding-top: 2px;--padding-bottom: 2px;min-width:28px;min-height:28px;height:28px;width:28px;color:#61afef;background:#0006;border-radius:6px;box-shadow:0 1px 4px #0000000d;display:flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease}.copy-button:hover{background:#00000080;color:#8cc4ff}.copy-button ion-icon{font-size:1.2em;margin:0}@media (prefers-color-scheme: light){.copy-button{color:var(--ion-color-primary, #007bff);background:#ffffffb3}.copy-button:hover{background:#ffffffe6;color:var(--ion-color-primary-tint, #3880ff)}}pre{margin:0;padding:0;background-color:transparent;min-width:100%;min-height:100%;white-space:pre-wrap;word-break:normal;font-family:Roboto Mono,monospace}code{font-family:Roboto Mono,monospace;font-size:.9em;line-height:1.6;display:block;white-space:inherit;word-break:inherit;color:#abb2bf;margin:0
|
|
6234
|
+
`, styles: [".code-box-container{position:relative;background-color:#282c34;border-radius:16px;overflow:hidden;box-shadow:0 4px 15px #0009;margin:0}@media (prefers-color-scheme: light){.code-box-container{background-color:#fff;box-shadow:0 2px 4px #0000001a}}.copy-button{position:absolute;top:8px;right:8px;z-index:10;--padding-start: 2px;--padding-end: 2px;--padding-top: 2px;--padding-bottom: 2px;min-width:28px;min-height:28px;height:28px;width:28px;color:#61afef;background:#0006;border-radius:6px;box-shadow:0 1px 4px #0000000d;display:flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease}.copy-button:hover{background:#00000080;color:#8cc4ff}.copy-button ion-icon{font-size:1.2em;margin:0}@media (prefers-color-scheme: light){.copy-button{color:var(--ion-color-primary, #007bff);background:#ffffffb3}.copy-button:hover{background:#ffffffe6;color:var(--ion-color-primary-tint, #3880ff)}}pre{margin:0;padding:0;background-color:transparent;min-width:100%;min-height:100%;white-space:pre-wrap;word-break:normal;font-family:Roboto Mono,monospace}code{font-family:Roboto Mono,monospace;font-size:.9em;line-height:1.6;display:block;white-space:inherit;word-break:inherit;color:#abb2bf;margin:0}@media (prefers-color-scheme: light){code{color:#333}}code .line-normal{color:#abb2bf}@media (prefers-color-scheme: light){code .line-normal{color:#333}}code .line-command{color:#c678dd}@media (prefers-color-scheme: light){code .line-command{color:var(--ion-color-primary, #3880ff)}}code .line-error{color:#e06c75}@media (prefers-color-scheme: light){code .line-error{color:var(--ion-color-danger, #eb445a)}}code .line-success{color:#98c379}@media (prefers-color-scheme: light){code .line-success{color:var(--ion-color-success, #2dd36f)}}code .token.comment{color:#5c6370}code .token.selector,code .token.string{color:#98c379}code .token.punctuation{color:#abb2bf}code .token.operator{color:#c678dd}code .token.boolean,code .token.number{color:#d19a66}code .token.function{color:#61afef}code .token.keyword{color:#c678dd}code .token.class-name{color:#e6c07b}code .token.tag{color:#e06c75}code .token.attr-name{color:#d19a66}code .token.attr-value{color:#98c379}code .token.property{color:#56b6c2}code .token.variable{color:#e06c75}@media (max-width: 600px){.code-box-container{border-radius:16px}.copy-button{top:6px;right:6px;min-width:24px;min-height:24px;height:24px;width:24px}.copy-button ion-icon{font-size:1em}pre{padding:0;margin:0}code{font-size:.8em;line-height:1.5;margin:0}}@media (min-width: 601px) and (max-width: 1024px){code{font-size:.9em}}@media (min-width: 1025px){code{font-size:1em}}\n"] }]
|
|
5895
6235
|
}], ctorParameters: () => [], propDecorators: { props: [{
|
|
5896
6236
|
type: Input
|
|
5897
6237
|
}], codeBlock: [{
|
|
@@ -8257,6 +8597,10 @@ const globalContentData = {
|
|
|
8257
8597
|
copied: '¡Copiado al portapapeles!',
|
|
8258
8598
|
seeMore: 'ver más',
|
|
8259
8599
|
selected: 'seleccionados',
|
|
8600
|
+
// Image preview
|
|
8601
|
+
zoomIn: 'Acercar',
|
|
8602
|
+
zoomOut: 'Alejar',
|
|
8603
|
+
resetZoom: 'Restablecer zoom',
|
|
8260
8604
|
},
|
|
8261
8605
|
en: {
|
|
8262
8606
|
// Common buttons
|
|
@@ -8312,12 +8656,33 @@ const globalContentData = {
|
|
|
8312
8656
|
copied: 'Copied to clipboard!',
|
|
8313
8657
|
seeMore: 'see more',
|
|
8314
8658
|
selected: 'selected',
|
|
8659
|
+
// Image preview
|
|
8660
|
+
zoomIn: 'Zoom in',
|
|
8661
|
+
zoomOut: 'Zoom out',
|
|
8662
|
+
resetZoom: 'Reset zoom',
|
|
8315
8663
|
},
|
|
8316
8664
|
};
|
|
8317
8665
|
const GlobalContent = new TextContent(globalContentData);
|
|
8666
|
+
// ImageComponent specific content
|
|
8667
|
+
const imageComponentData = {
|
|
8668
|
+
es: {
|
|
8669
|
+
close: 'Cerrar',
|
|
8670
|
+
zoomIn: 'Acercar',
|
|
8671
|
+
zoomOut: 'Alejar',
|
|
8672
|
+
resetZoom: 'Restablecer zoom',
|
|
8673
|
+
},
|
|
8674
|
+
en: {
|
|
8675
|
+
close: 'Close',
|
|
8676
|
+
zoomIn: 'Zoom in',
|
|
8677
|
+
zoomOut: 'Zoom out',
|
|
8678
|
+
resetZoom: 'Reset zoom',
|
|
8679
|
+
},
|
|
8680
|
+
};
|
|
8681
|
+
const ImageComponentContent = new TextContent(imageComponentData);
|
|
8318
8682
|
const content = {
|
|
8319
8683
|
_global: GlobalContent,
|
|
8320
8684
|
LangSettings,
|
|
8685
|
+
ImageComponent: ImageComponentContent,
|
|
8321
8686
|
};
|
|
8322
8687
|
|
|
8323
8688
|
/**
|