valtech-components 2.0.306 → 2.0.308
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 +134 -64
- package/esm2022/lib/components/atoms/image/types.mjs +1 -1
- package/esm2022/lib/components/organisms/article/article.component.mjs +24 -49
- package/fesm2022/valtech-components.mjs +155 -111
- package/fesm2022/valtech-components.mjs.map +1 -1
- package/lib/components/atoms/image/types.d.ts +8 -0
- package/lib/components/organisms/article/article.component.d.ts +2 -0
- package/package.json +1 -1
|
@@ -1921,17 +1921,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
1921
1921
|
* val-image
|
|
1922
1922
|
*
|
|
1923
1923
|
* Displays an image with various display options (bordered, shaded, dark, etc).
|
|
1924
|
+
* Now includes a container wrapper for better flexbox support and alignment options.
|
|
1924
1925
|
*
|
|
1925
1926
|
* @example
|
|
1926
|
-
* <val-image [props]="{
|
|
1927
|
-
*
|
|
1928
|
-
*
|
|
1927
|
+
* <val-image [props]="{
|
|
1928
|
+
* src: 'url',
|
|
1929
|
+
* alt: 'desc',
|
|
1930
|
+
* width: 100,
|
|
1931
|
+
* height: 100,
|
|
1932
|
+
* bordered: true,
|
|
1933
|
+
* alignment: 'center',
|
|
1934
|
+
* caption: 'Image description'
|
|
1935
|
+
* }"></val-image>
|
|
1936
|
+
*
|
|
1937
|
+
* @input props: ImageMetadata - Configuration for the image (src, alt, size, mode, alignment, caption, etc.)
|
|
1929
1938
|
*/
|
|
1930
1939
|
class ImageComponent {
|
|
1931
1940
|
constructor() {
|
|
1932
1941
|
this.available = true;
|
|
1933
1942
|
}
|
|
1934
|
-
ngOnInit() {
|
|
1943
|
+
ngOnInit() {
|
|
1944
|
+
// Set default values
|
|
1945
|
+
if (!this.props.alignment) {
|
|
1946
|
+
this.props.alignment = 'center';
|
|
1947
|
+
}
|
|
1948
|
+
if (!this.props.captionSize) {
|
|
1949
|
+
this.props.captionSize = 'medium';
|
|
1950
|
+
}
|
|
1951
|
+
if (!this.props.mode) {
|
|
1952
|
+
this.props.mode = 'box';
|
|
1953
|
+
}
|
|
1954
|
+
}
|
|
1935
1955
|
changeToVisible() {
|
|
1936
1956
|
setInterval(() => {
|
|
1937
1957
|
this.available = true;
|
|
@@ -1939,70 +1959,120 @@ class ImageComponent {
|
|
|
1939
1959
|
}
|
|
1940
1960
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1941
1961
|
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: `
|
|
1942
|
-
|
|
1943
|
-
|
|
1944
|
-
|
|
1945
|
-
|
|
1946
|
-
|
|
1947
|
-
|
|
1948
|
-
|
|
1949
|
-
|
|
1950
|
-
|
|
1951
|
-
|
|
1952
|
-
|
|
1953
|
-
|
|
1954
|
-
|
|
1955
|
-
|
|
1956
|
-
|
|
1957
|
-
|
|
1958
|
-
|
|
1959
|
-
|
|
1960
|
-
|
|
1961
|
-
|
|
1962
|
-
|
|
1963
|
-
|
|
1964
|
-
|
|
1965
|
-
|
|
1966
|
-
|
|
1967
|
-
|
|
1968
|
-
|
|
1969
|
-
|
|
1970
|
-
|
|
1971
|
-
|
|
1962
|
+
<figure
|
|
1963
|
+
class="val-image-container"
|
|
1964
|
+
[class]="props.containerClass"
|
|
1965
|
+
[ngClass]="{
|
|
1966
|
+
'val-image-container--left': props.alignment === 'left',
|
|
1967
|
+
'val-image-container--center': props.alignment === 'center' || !props.alignment,
|
|
1968
|
+
'val-image-container--right': props.alignment === 'right',
|
|
1969
|
+
}"
|
|
1970
|
+
>
|
|
1971
|
+
<div class="val-image-wrapper" [ngClass]="[props.size]">
|
|
1972
|
+
@if (props.src.includes('--')) {
|
|
1973
|
+
<img
|
|
1974
|
+
class="val-image"
|
|
1975
|
+
[ngClass]="[props.mode]"
|
|
1976
|
+
[ngStyle]="{
|
|
1977
|
+
content: 'var(' + props.src + ')',
|
|
1978
|
+
}"
|
|
1979
|
+
[class.bordered]="props.bordered"
|
|
1980
|
+
[class.shaded]="props.shaded"
|
|
1981
|
+
[class.dark]="props.dark"
|
|
1982
|
+
[class.limited]="props.limited"
|
|
1983
|
+
[alt]="props.alt"
|
|
1984
|
+
[style.width.px]="props.width"
|
|
1985
|
+
[style.height.px]="props.height"
|
|
1986
|
+
/>
|
|
1987
|
+
} @else {
|
|
1988
|
+
<img
|
|
1989
|
+
class="val-image"
|
|
1990
|
+
[ngClass]="[props.mode]"
|
|
1991
|
+
[class.bordered]="props.bordered"
|
|
1992
|
+
[class.shaded]="props.shaded"
|
|
1993
|
+
[class.dark]="props.dark"
|
|
1994
|
+
[class.limited]="props.limited"
|
|
1995
|
+
[src]="props.src"
|
|
1996
|
+
[alt]="props.alt"
|
|
1997
|
+
[style.width.px]="props.width"
|
|
1998
|
+
[style.height.px]="props.height"
|
|
1999
|
+
/>
|
|
2000
|
+
}
|
|
2001
|
+
</div>
|
|
2002
|
+
|
|
2003
|
+
@if (props.caption) {
|
|
2004
|
+
<figcaption
|
|
2005
|
+
class="val-image-caption"
|
|
2006
|
+
[ngClass]="{
|
|
2007
|
+
'val-image-caption--small': props.captionSize === 'small',
|
|
2008
|
+
'val-image-caption--medium': props.captionSize === 'medium' || !props.captionSize,
|
|
2009
|
+
'val-image-caption--large': props.captionSize === 'large',
|
|
2010
|
+
}"
|
|
2011
|
+
>
|
|
2012
|
+
{{ props.caption }}
|
|
2013
|
+
</figcaption>
|
|
2014
|
+
}
|
|
2015
|
+
</figure>
|
|
2016
|
+
`, 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"] }] }); }
|
|
1972
2017
|
}
|
|
1973
2018
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageComponent, decorators: [{
|
|
1974
2019
|
type: Component,
|
|
1975
2020
|
args: [{ selector: 'val-image', standalone: true, imports: [CommonModule], template: `
|
|
1976
|
-
|
|
1977
|
-
|
|
1978
|
-
|
|
1979
|
-
|
|
1980
|
-
|
|
1981
|
-
|
|
1982
|
-
|
|
1983
|
-
|
|
1984
|
-
|
|
1985
|
-
|
|
1986
|
-
|
|
1987
|
-
|
|
1988
|
-
|
|
1989
|
-
|
|
1990
|
-
|
|
1991
|
-
|
|
1992
|
-
|
|
1993
|
-
|
|
1994
|
-
|
|
1995
|
-
|
|
1996
|
-
|
|
1997
|
-
|
|
1998
|
-
|
|
1999
|
-
|
|
2000
|
-
|
|
2001
|
-
|
|
2002
|
-
|
|
2003
|
-
|
|
2004
|
-
|
|
2005
|
-
|
|
2021
|
+
<figure
|
|
2022
|
+
class="val-image-container"
|
|
2023
|
+
[class]="props.containerClass"
|
|
2024
|
+
[ngClass]="{
|
|
2025
|
+
'val-image-container--left': props.alignment === 'left',
|
|
2026
|
+
'val-image-container--center': props.alignment === 'center' || !props.alignment,
|
|
2027
|
+
'val-image-container--right': props.alignment === 'right',
|
|
2028
|
+
}"
|
|
2029
|
+
>
|
|
2030
|
+
<div class="val-image-wrapper" [ngClass]="[props.size]">
|
|
2031
|
+
@if (props.src.includes('--')) {
|
|
2032
|
+
<img
|
|
2033
|
+
class="val-image"
|
|
2034
|
+
[ngClass]="[props.mode]"
|
|
2035
|
+
[ngStyle]="{
|
|
2036
|
+
content: 'var(' + props.src + ')',
|
|
2037
|
+
}"
|
|
2038
|
+
[class.bordered]="props.bordered"
|
|
2039
|
+
[class.shaded]="props.shaded"
|
|
2040
|
+
[class.dark]="props.dark"
|
|
2041
|
+
[class.limited]="props.limited"
|
|
2042
|
+
[alt]="props.alt"
|
|
2043
|
+
[style.width.px]="props.width"
|
|
2044
|
+
[style.height.px]="props.height"
|
|
2045
|
+
/>
|
|
2046
|
+
} @else {
|
|
2047
|
+
<img
|
|
2048
|
+
class="val-image"
|
|
2049
|
+
[ngClass]="[props.mode]"
|
|
2050
|
+
[class.bordered]="props.bordered"
|
|
2051
|
+
[class.shaded]="props.shaded"
|
|
2052
|
+
[class.dark]="props.dark"
|
|
2053
|
+
[class.limited]="props.limited"
|
|
2054
|
+
[src]="props.src"
|
|
2055
|
+
[alt]="props.alt"
|
|
2056
|
+
[style.width.px]="props.width"
|
|
2057
|
+
[style.height.px]="props.height"
|
|
2058
|
+
/>
|
|
2059
|
+
}
|
|
2060
|
+
</div>
|
|
2061
|
+
|
|
2062
|
+
@if (props.caption) {
|
|
2063
|
+
<figcaption
|
|
2064
|
+
class="val-image-caption"
|
|
2065
|
+
[ngClass]="{
|
|
2066
|
+
'val-image-caption--small': props.captionSize === 'small',
|
|
2067
|
+
'val-image-caption--medium': props.captionSize === 'medium' || !props.captionSize,
|
|
2068
|
+
'val-image-caption--large': props.captionSize === 'large',
|
|
2069
|
+
}"
|
|
2070
|
+
>
|
|
2071
|
+
{{ props.caption }}
|
|
2072
|
+
</figcaption>
|
|
2073
|
+
}
|
|
2074
|
+
</figure>
|
|
2075
|
+
`, 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"] }]
|
|
2006
2076
|
}], ctorParameters: () => [], propDecorators: { props: [{
|
|
2007
2077
|
type: Input
|
|
2008
2078
|
}] } });
|
|
@@ -5744,6 +5814,22 @@ class ArticleComponent {
|
|
|
5744
5814
|
const { alignment, ...buttonProps } = buttonElement.props;
|
|
5745
5815
|
return buttonProps;
|
|
5746
5816
|
}
|
|
5817
|
+
getImageMetadata(element) {
|
|
5818
|
+
const imageElement = this.getImageElement(element);
|
|
5819
|
+
const props = imageElement.props;
|
|
5820
|
+
return {
|
|
5821
|
+
src: props.src,
|
|
5822
|
+
alt: props.alt,
|
|
5823
|
+
mode: props.rounded ? 'rounded' : 'box',
|
|
5824
|
+
size: 'medium',
|
|
5825
|
+
shaded: false,
|
|
5826
|
+
bordered: false,
|
|
5827
|
+
alignment: props.alignment || 'center',
|
|
5828
|
+
caption: props.caption,
|
|
5829
|
+
captionSize: 'medium',
|
|
5830
|
+
width: props.maxWidth ? parseInt(props.maxWidth.replace('px', '')) : undefined,
|
|
5831
|
+
};
|
|
5832
|
+
}
|
|
5747
5833
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ArticleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5748
5834
|
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: `
|
|
5749
5835
|
<article
|
|
@@ -5878,28 +5964,7 @@ class ArticleComponent {
|
|
|
5878
5964
|
|
|
5879
5965
|
<!-- Imagen -->
|
|
5880
5966
|
<ng-container *ngIf="element.type === 'image'">
|
|
5881
|
-
<
|
|
5882
|
-
class="val-article__image"
|
|
5883
|
-
[ngClass]="{
|
|
5884
|
-
'val-article__image--left': getImageElement(element).props.alignment === 'left',
|
|
5885
|
-
'val-article__image--center': getImageElement(element).props.alignment === 'center',
|
|
5886
|
-
'val-article__image--right': getImageElement(element).props.alignment === 'right',
|
|
5887
|
-
}"
|
|
5888
|
-
>
|
|
5889
|
-
<img
|
|
5890
|
-
[src]="getImageElement(element).props.src"
|
|
5891
|
-
[alt]="getImageElement(element).props.alt"
|
|
5892
|
-
[title]="getImageElement(element).props.title"
|
|
5893
|
-
[style.max-width]="getImageElement(element).props.maxWidth"
|
|
5894
|
-
[ngClass]="{
|
|
5895
|
-
'val-article__image-content--rounded': getImageElement(element).props.rounded,
|
|
5896
|
-
}"
|
|
5897
|
-
class="val-article__image-content"
|
|
5898
|
-
/>
|
|
5899
|
-
<figcaption *ngIf="getImageElement(element).props.caption" class="val-article__image-caption">
|
|
5900
|
-
{{ getImageElement(element).props.caption }}
|
|
5901
|
-
</figcaption>
|
|
5902
|
-
</figure>
|
|
5967
|
+
<val-image [props]="getImageMetadata(element)"></val-image>
|
|
5903
5968
|
</ng-container>
|
|
5904
5969
|
|
|
5905
5970
|
<!-- Video -->
|
|
@@ -5928,11 +5993,11 @@ class ArticleComponent {
|
|
|
5928
5993
|
</ng-container>
|
|
5929
5994
|
</div>
|
|
5930
5995
|
</article>
|
|
5931
|
-
`, isInline: true, styles: [".val-article{width:100%;margin:0 auto;
|
|
5996
|
+
`, 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"] }] }); }
|
|
5932
5997
|
}
|
|
5933
5998
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ArticleComponent, decorators: [{
|
|
5934
5999
|
type: Component,
|
|
5935
|
-
args: [{ selector: 'val-article', standalone: true, imports: [CommonModule, TitleComponent, TextComponent, ButtonComponent], template: `
|
|
6000
|
+
args: [{ selector: 'val-article', standalone: true, imports: [CommonModule, TitleComponent, TextComponent, ButtonComponent, ImageComponent], template: `
|
|
5936
6001
|
<article
|
|
5937
6002
|
class="val-article"
|
|
5938
6003
|
[class]="props.cssClass"
|
|
@@ -6065,28 +6130,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
6065
6130
|
|
|
6066
6131
|
<!-- Imagen -->
|
|
6067
6132
|
<ng-container *ngIf="element.type === 'image'">
|
|
6068
|
-
<
|
|
6069
|
-
class="val-article__image"
|
|
6070
|
-
[ngClass]="{
|
|
6071
|
-
'val-article__image--left': getImageElement(element).props.alignment === 'left',
|
|
6072
|
-
'val-article__image--center': getImageElement(element).props.alignment === 'center',
|
|
6073
|
-
'val-article__image--right': getImageElement(element).props.alignment === 'right',
|
|
6074
|
-
}"
|
|
6075
|
-
>
|
|
6076
|
-
<img
|
|
6077
|
-
[src]="getImageElement(element).props.src"
|
|
6078
|
-
[alt]="getImageElement(element).props.alt"
|
|
6079
|
-
[title]="getImageElement(element).props.title"
|
|
6080
|
-
[style.max-width]="getImageElement(element).props.maxWidth"
|
|
6081
|
-
[ngClass]="{
|
|
6082
|
-
'val-article__image-content--rounded': getImageElement(element).props.rounded,
|
|
6083
|
-
}"
|
|
6084
|
-
class="val-article__image-content"
|
|
6085
|
-
/>
|
|
6086
|
-
<figcaption *ngIf="getImageElement(element).props.caption" class="val-article__image-caption">
|
|
6087
|
-
{{ getImageElement(element).props.caption }}
|
|
6088
|
-
</figcaption>
|
|
6089
|
-
</figure>
|
|
6133
|
+
<val-image [props]="getImageMetadata(element)"></val-image>
|
|
6090
6134
|
</ng-container>
|
|
6091
6135
|
|
|
6092
6136
|
<!-- Video -->
|
|
@@ -6115,7 +6159,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
6115
6159
|
</ng-container>
|
|
6116
6160
|
</div>
|
|
6117
6161
|
</article>
|
|
6118
|
-
`,
|
|
6162
|
+
`, 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"] }]
|
|
6119
6163
|
}], ctorParameters: () => [], propDecorators: { props: [{
|
|
6120
6164
|
type: Input
|
|
6121
6165
|
}] } });
|