Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 | 93x 93x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 1x 1x 2x 3x 3x | import { ComponentRender } from '../zd-component/component-render';
import { IImage } from './interfaces';
export class Image extends ComponentRender implements IImage {
/**
* Alternative text for the image, if the image cannot be displayed.
*/
public alt = '';
/**
* Path of the image to be shown if an error occurs.
*/
public errorImagePath = '';
/**
* Text to be shown if an error occurs.
*/
public errorImageText = '';
/**
* Defines how the image should be resized to fit its container.
* See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit\"
* alt=\"Object fit in MDN\" target=\"_blank\">MDN Web Docs</a>
* for more details.
*/
public objectFit = '';
/**
* Defines the component height. Possible values for this property can be
* <samp>'auto', '100%', '400px' or 400</samp>
*/
public height: string | number = 'auto';
/**
* Defines the component min height. Possible values for this property can be
* <samp>'auto', '100%', '400px' or 400</samp>
*/
public minHeight: string | number = 'auto';
/**
* Defines the component max height. Possible values for this property can be
* <samp>'auto', '100%', '400px' or 400</samp>
*/
public maxHeight: string | number = 'none';
/**
* Defines the component width. Possible values for this property can be
* <samp>'auto', '100%', '400px' or 400</samp>
*/
public width: string | number = 'auto';
/**
* Defines the component min width. Possible values for this property can be
* <samp>'auto', '100%', '400px' or 400</samp>
*/
public minWidth: string | number = 'auto';
/**
* Defines the component max height. Possible values for this property can be
* <samp>'auto', '100%', '400px' or 400</samp>
*/
public maxWidth: string | number = 'none';
/**
* Source of the image file.
*/
private srcValue = '';
public validImage?: boolean = undefined;
/* istanbul ignore next */
/**
* Creates a new Image.
* @param props Image properties
*/
constructor(props: IImage) {
super(props);
this.src = this.getInitValue('src', props.src, this.srcValue);
this.alt = this.getInitValue('alt', props.alt, this.alt);
this.errorImagePath = this.getInitValue('errorImagePath', props.errorImagePath, this.errorImagePath);
this.errorImageText = this.getInitValue('errorImageText', props.errorImageText, this.errorImageText);
this.height = this.getInitValue('height', props.height, this.height);
this.minHeight = this.getInitValue('minHeight', props.minHeight, this.minHeight);
this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
this.width = this.getInitValue('width', props.width, this.width);
this.minWidth = this.getInitValue('minWidth', props.minWidth, this.minWidth);
this.maxWidth = this.getInitValue('maxWidth', props.maxWidth, this.maxWidth);
this.objectFit = this.getInitValue('objectFit', props.objectFit, this.objectFit);
}
/**
* Event to be called after the error image is loaded
*/
public loadImage() {
this.validImage = true;
}
/**
* Event to be called after the image is not loaded
*/
public errorImage() {
this.validImage = false;
}
public get src() {
return this.srcValue;
}
public set src(src: string) {
this.validImage = true;
this.srcValue = src;
}
}
|