valtech-components 2.0.186 → 2.0.187

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.
@@ -13,38 +13,72 @@ export class ImageComponent {
13
13
  }, 100);
14
14
  }
15
15
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
16
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ImageComponent, isStandalone: true, selector: "val-image", inputs: { props: "props" }, ngImport: i0, template: `
17
- <img
18
- [ngClass]="['image', props.mode, props.size]"
19
- [class.bordered]="props.bordered"
20
- [class.shaded]="props.shaded"
21
- [class.dark]="props.dark"
22
- [class.limited]="props.limited"
23
- [src]="props.src"
24
- [alt]="props.alt"
25
- [style.width.px]="props.width"
26
- [style.max-width.px]="props.width"
27
- [style.height.px]="props.height"
28
- />
29
- `, isInline: true, styles: [".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"] }] }); }
16
+ 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: `
17
+ @if (props.src.includes('--')) {
18
+ <img
19
+ [ngClass]="['image', props.mode, props.size]"
20
+ [ngStyle]="{
21
+ content: 'var(' + props.src + ')'
22
+ }"
23
+ [class.bordered]="props.bordered"
24
+ [class.shaded]="props.shaded"
25
+ [class.dark]="props.dark"
26
+ [class.limited]="props.limited"
27
+ [alt]="props.alt"
28
+ [style.width.px]="props.width"
29
+ [style.max-width.px]="props.width"
30
+ [style.height.px]="props.height"
31
+ />
32
+ } @else {
33
+ <img
34
+ [ngClass]="['image', props.mode, props.size]"
35
+ [class.bordered]="props.bordered"
36
+ [class.shaded]="props.shaded"
37
+ [class.dark]="props.dark"
38
+ [class.limited]="props.limited"
39
+ [src]="props.src"
40
+ [alt]="props.alt"
41
+ [style.width.px]="props.width"
42
+ [style.max-width.px]="props.width"
43
+ [style.height.px]="props.height"
44
+ />
45
+ }
46
+ `, isInline: true, styles: [".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"] }] }); }
30
47
  }
31
48
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageComponent, decorators: [{
32
49
  type: Component,
33
50
  args: [{ selector: 'val-image', standalone: true, imports: [CommonModule], template: `
34
- <img
35
- [ngClass]="['image', props.mode, props.size]"
36
- [class.bordered]="props.bordered"
37
- [class.shaded]="props.shaded"
38
- [class.dark]="props.dark"
39
- [class.limited]="props.limited"
40
- [src]="props.src"
41
- [alt]="props.alt"
42
- [style.width.px]="props.width"
43
- [style.max-width.px]="props.width"
44
- [style.height.px]="props.height"
45
- />
51
+ @if (props.src.includes('--')) {
52
+ <img
53
+ [ngClass]="['image', props.mode, props.size]"
54
+ [ngStyle]="{
55
+ content: 'var(' + props.src + ')'
56
+ }"
57
+ [class.bordered]="props.bordered"
58
+ [class.shaded]="props.shaded"
59
+ [class.dark]="props.dark"
60
+ [class.limited]="props.limited"
61
+ [alt]="props.alt"
62
+ [style.width.px]="props.width"
63
+ [style.max-width.px]="props.width"
64
+ [style.height.px]="props.height"
65
+ />
66
+ } @else {
67
+ <img
68
+ [ngClass]="['image', props.mode, props.size]"
69
+ [class.bordered]="props.bordered"
70
+ [class.shaded]="props.shaded"
71
+ [class.dark]="props.dark"
72
+ [class.limited]="props.limited"
73
+ [src]="props.src"
74
+ [alt]="props.alt"
75
+ [style.width.px]="props.width"
76
+ [style.max-width.px]="props.width"
77
+ [style.height.px]="props.height"
78
+ />
79
+ }
46
80
  `, styles: [".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"] }]
47
81
  }], ctorParameters: () => [], propDecorators: { props: [{
48
82
  type: Input
49
83
  }] } });
50
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW1hZ2UuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdmFsdGVjaC1jb21wb25lbnRzL3NyYy9saWIvY29tcG9uZW50cy9hdG9tcy9pbWFnZS9pbWFnZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDOzs7QUF1QnpELE1BQU0sT0FBTyxjQUFjO0lBTXpCO1FBRkEsY0FBUyxHQUFZLElBQUksQ0FBQztJQUVYLENBQUM7SUFFaEIsUUFBUSxLQUFJLENBQUM7SUFFYixlQUFlO1FBQ2IsV0FBVyxDQUFDLEdBQUcsRUFBRTtZQUNmLElBQUksQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDO1FBQ3hCLENBQUMsRUFBRSxHQUFHLENBQUMsQ0FBQztJQUNWLENBQUM7K0dBZFUsY0FBYzttR0FBZCxjQUFjLGlHQWhCZjs7Ozs7Ozs7Ozs7OztHQWFULDZwQkFkUyxZQUFZOzs0RkFpQlgsY0FBYztrQkFwQjFCLFNBQVM7K0JBQ0UsV0FBVyxjQUNULElBQUksV0FDUCxDQUFDLFlBQVksQ0FBQyxZQUNiOzs7Ozs7Ozs7Ozs7O0dBYVQ7d0RBS0QsS0FBSztzQkFESixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgSW1hZ2VNZXRhZGF0YSB9IGZyb20gJy4vdHlwZXMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd2YWwtaW1hZ2UnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlXSxcbiAgdGVtcGxhdGU6IGBcbiAgICA8aW1nXG4gICAgICBbbmdDbGFzc109XCJbJ2ltYWdlJywgcHJvcHMubW9kZSwgcHJvcHMuc2l6ZV1cIlxuICAgICAgW2NsYXNzLmJvcmRlcmVkXT1cInByb3BzLmJvcmRlcmVkXCJcbiAgICAgIFtjbGFzcy5zaGFkZWRdPVwicHJvcHMuc2hhZGVkXCJcbiAgICAgIFtjbGFzcy5kYXJrXT1cInByb3BzLmRhcmtcIlxuICAgICAgW2NsYXNzLmxpbWl0ZWRdPVwicHJvcHMubGltaXRlZFwiXG4gICAgICBbc3JjXT1cInByb3BzLnNyY1wiXG4gICAgICBbYWx0XT1cInByb3BzLmFsdFwiXG4gICAgICBbc3R5bGUud2lkdGgucHhdPVwicHJvcHMud2lkdGhcIlxuICAgICAgW3N0eWxlLm1heC13aWR0aC5weF09XCJwcm9wcy53aWR0aFwiXG4gICAgICBbc3R5bGUuaGVpZ2h0LnB4XT1cInByb3BzLmhlaWdodFwiXG4gICAgLz5cbiAgYCxcbiAgc3R5bGVVcmxzOiBbJy4vaW1hZ2UuY29tcG9uZW50LnNjc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgSW1hZ2VDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBASW5wdXQoKVxuICBwcm9wczogSW1hZ2VNZXRhZGF0YTtcblxuICBhdmFpbGFibGU6IGJvb2xlYW4gPSB0cnVlO1xuXG4gIGNvbnN0cnVjdG9yKCkge31cblxuICBuZ09uSW5pdCgpIHt9XG5cbiAgY2hhbmdlVG9WaXNpYmxlKCkge1xuICAgIHNldEludGVydmFsKCgpID0+IHtcbiAgICAgIHRoaXMuYXZhaWxhYmxlID0gdHJ1ZTtcbiAgICB9LCAxMDApO1xuICB9XG59XG4iXX0=
84
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW1hZ2UuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdmFsdGVjaC1jb21wb25lbnRzL3NyYy9saWIvY29tcG9uZW50cy9hdG9tcy9pbWFnZS9pbWFnZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDOzs7QUF3Q3pELE1BQU0sT0FBTyxjQUFjO0lBTXpCO1FBRkEsY0FBUyxHQUFZLElBQUksQ0FBQztJQUVYLENBQUM7SUFFaEIsUUFBUSxLQUFJLENBQUM7SUFFYixlQUFlO1FBQ2IsV0FBVyxDQUFDLEdBQUcsRUFBRTtZQUNmLElBQUksQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDO1FBQ3hCLENBQUMsRUFBRSxHQUFHLENBQUMsQ0FBQztJQUNWLENBQUM7K0dBZFUsY0FBYzttR0FBZCxjQUFjLGlHQWpDZjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBOEJULDZwQkEvQlMsWUFBWTs7NEZBa0NYLGNBQWM7a0JBckMxQixTQUFTOytCQUNFLFdBQVcsY0FDVCxJQUFJLFdBQ1AsQ0FBQyxZQUFZLENBQUMsWUFDYjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBOEJUO3dEQUtELEtBQUs7c0JBREosS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEltYWdlTWV0YWRhdGEgfSBmcm9tICcuL3R5cGVzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAndmFsLWltYWdlJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZV0sXG4gIHRlbXBsYXRlOiBgXG4gICAgQGlmIChwcm9wcy5zcmMuaW5jbHVkZXMoJy0tJykpIHtcbiAgICAgIDxpbWdcbiAgICAgICAgW25nQ2xhc3NdPVwiWydpbWFnZScsIHByb3BzLm1vZGUsIHByb3BzLnNpemVdXCJcbiAgICAgICAgW25nU3R5bGVdPVwie1xuICAgICAgICAgIGNvbnRlbnQ6ICd2YXIoJyArIHByb3BzLnNyYyArICcpJ1xuICAgICAgICB9XCJcbiAgICAgICAgW2NsYXNzLmJvcmRlcmVkXT1cInByb3BzLmJvcmRlcmVkXCJcbiAgICAgICAgW2NsYXNzLnNoYWRlZF09XCJwcm9wcy5zaGFkZWRcIlxuICAgICAgICBbY2xhc3MuZGFya109XCJwcm9wcy5kYXJrXCJcbiAgICAgICAgW2NsYXNzLmxpbWl0ZWRdPVwicHJvcHMubGltaXRlZFwiXG4gICAgICAgIFthbHRdPVwicHJvcHMuYWx0XCJcbiAgICAgICAgW3N0eWxlLndpZHRoLnB4XT1cInByb3BzLndpZHRoXCJcbiAgICAgICAgW3N0eWxlLm1heC13aWR0aC5weF09XCJwcm9wcy53aWR0aFwiXG4gICAgICAgIFtzdHlsZS5oZWlnaHQucHhdPVwicHJvcHMuaGVpZ2h0XCJcbiAgICAgIC8+XG4gICAgfSBAZWxzZSB7XG4gICAgICA8aW1nXG4gICAgICAgIFtuZ0NsYXNzXT1cIlsnaW1hZ2UnLCBwcm9wcy5tb2RlLCBwcm9wcy5zaXplXVwiXG4gICAgICAgIFtjbGFzcy5ib3JkZXJlZF09XCJwcm9wcy5ib3JkZXJlZFwiXG4gICAgICAgIFtjbGFzcy5zaGFkZWRdPVwicHJvcHMuc2hhZGVkXCJcbiAgICAgICAgW2NsYXNzLmRhcmtdPVwicHJvcHMuZGFya1wiXG4gICAgICAgIFtjbGFzcy5saW1pdGVkXT1cInByb3BzLmxpbWl0ZWRcIlxuICAgICAgICBbc3JjXT1cInByb3BzLnNyY1wiXG4gICAgICAgIFthbHRdPVwicHJvcHMuYWx0XCJcbiAgICAgICAgW3N0eWxlLndpZHRoLnB4XT1cInByb3BzLndpZHRoXCJcbiAgICAgICAgW3N0eWxlLm1heC13aWR0aC5weF09XCJwcm9wcy53aWR0aFwiXG4gICAgICAgIFtzdHlsZS5oZWlnaHQucHhdPVwicHJvcHMuaGVpZ2h0XCJcbiAgICAgIC8+XG4gICAgfVxuICBgLFxuICBzdHlsZVVybHM6IFsnLi9pbWFnZS5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBJbWFnZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dCgpXG4gIHByb3BzOiBJbWFnZU1ldGFkYXRhO1xuXG4gIGF2YWlsYWJsZTogYm9vbGVhbiA9IHRydWU7XG5cbiAgY29uc3RydWN0b3IoKSB7fVxuXG4gIG5nT25Jbml0KCkge31cblxuICBjaGFuZ2VUb1Zpc2libGUoKSB7XG4gICAgc2V0SW50ZXJ2YWwoKCkgPT4ge1xuICAgICAgdGhpcy5hdmFpbGFibGUgPSB0cnVlO1xuICAgIH0sIDEwMCk7XG4gIH1cbn1cbiJdfQ==
@@ -704,36 +704,70 @@ class ImageComponent {
704
704
  }, 100);
705
705
  }
706
706
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
707
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ImageComponent, isStandalone: true, selector: "val-image", inputs: { props: "props" }, ngImport: i0, template: `
708
- <img
709
- [ngClass]="['image', props.mode, props.size]"
710
- [class.bordered]="props.bordered"
711
- [class.shaded]="props.shaded"
712
- [class.dark]="props.dark"
713
- [class.limited]="props.limited"
714
- [src]="props.src"
715
- [alt]="props.alt"
716
- [style.width.px]="props.width"
717
- [style.max-width.px]="props.width"
718
- [style.height.px]="props.height"
719
- />
720
- `, isInline: true, styles: [".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"] }] }); }
707
+ 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: `
708
+ @if (props.src.includes('--')) {
709
+ <img
710
+ [ngClass]="['image', props.mode, props.size]"
711
+ [ngStyle]="{
712
+ content: 'var(' + props.src + ')'
713
+ }"
714
+ [class.bordered]="props.bordered"
715
+ [class.shaded]="props.shaded"
716
+ [class.dark]="props.dark"
717
+ [class.limited]="props.limited"
718
+ [alt]="props.alt"
719
+ [style.width.px]="props.width"
720
+ [style.max-width.px]="props.width"
721
+ [style.height.px]="props.height"
722
+ />
723
+ } @else {
724
+ <img
725
+ [ngClass]="['image', props.mode, props.size]"
726
+ [class.bordered]="props.bordered"
727
+ [class.shaded]="props.shaded"
728
+ [class.dark]="props.dark"
729
+ [class.limited]="props.limited"
730
+ [src]="props.src"
731
+ [alt]="props.alt"
732
+ [style.width.px]="props.width"
733
+ [style.max-width.px]="props.width"
734
+ [style.height.px]="props.height"
735
+ />
736
+ }
737
+ `, isInline: true, styles: [".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"] }] }); }
721
738
  }
722
739
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImageComponent, decorators: [{
723
740
  type: Component,
724
741
  args: [{ selector: 'val-image', standalone: true, imports: [CommonModule], template: `
725
- <img
726
- [ngClass]="['image', props.mode, props.size]"
727
- [class.bordered]="props.bordered"
728
- [class.shaded]="props.shaded"
729
- [class.dark]="props.dark"
730
- [class.limited]="props.limited"
731
- [src]="props.src"
732
- [alt]="props.alt"
733
- [style.width.px]="props.width"
734
- [style.max-width.px]="props.width"
735
- [style.height.px]="props.height"
736
- />
742
+ @if (props.src.includes('--')) {
743
+ <img
744
+ [ngClass]="['image', props.mode, props.size]"
745
+ [ngStyle]="{
746
+ content: 'var(' + props.src + ')'
747
+ }"
748
+ [class.bordered]="props.bordered"
749
+ [class.shaded]="props.shaded"
750
+ [class.dark]="props.dark"
751
+ [class.limited]="props.limited"
752
+ [alt]="props.alt"
753
+ [style.width.px]="props.width"
754
+ [style.max-width.px]="props.width"
755
+ [style.height.px]="props.height"
756
+ />
757
+ } @else {
758
+ <img
759
+ [ngClass]="['image', props.mode, props.size]"
760
+ [class.bordered]="props.bordered"
761
+ [class.shaded]="props.shaded"
762
+ [class.dark]="props.dark"
763
+ [class.limited]="props.limited"
764
+ [src]="props.src"
765
+ [alt]="props.alt"
766
+ [style.width.px]="props.width"
767
+ [style.max-width.px]="props.width"
768
+ [style.height.px]="props.height"
769
+ />
770
+ }
737
771
  `, styles: [".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"] }]
738
772
  }], ctorParameters: () => [], propDecorators: { props: [{
739
773
  type: Input