@skyra/discord-components-core
Version:
Web components to easily build and display fake Discord messages on your webpages.
109 lines (108 loc) • 2.98 kB
JavaScript
import { h, Host } from '@stencil/core';
import { validateImageExtension } from '../../util';
export class DiscordAttachment {
constructor() {
this.url = undefined;
this.height = undefined;
this.width = undefined;
this.alt = 'discord attachment';
}
componentWillRender() {
validateImageExtension(this.url);
}
render() {
return (h(Host, { class: "discord-attachment" }, h("div", { class: "discord-image-wrapper", style: { height: `${this.height}px`, width: `${this.width}px` } }, h("img", { alt: this.alt, src: this.url, height: this.height, width: this.width }))));
}
static get is() { return "discord-attachment"; }
static get originalStyleUrls() {
return {
"$": ["discord-attachment.css"]
};
}
static get styleUrls() {
return {
"$": ["discord-attachment.css"]
};
}
static get properties() {
return {
"url": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "important",
"text": "Should be a valid image URL, i.e. matching the regex `/\\.(bmp|jpe?g|png|gif|webp|tiff)$/i`"
}],
"text": "The URL for the image attachment"
},
"attribute": "url",
"reflect": false
},
"height": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The height of the image in pixels"
},
"attribute": "height",
"reflect": false
},
"width": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The width of the image in pixels"
},
"attribute": "width",
"reflect": false
},
"alt": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "default",
"text": "'discord attachment'"
}],
"text": "The alt text to show in case the image was unable to load"
},
"attribute": "alt",
"reflect": false,
"defaultValue": "'discord attachment'"
}
};
}
static get elementRef() { return "el"; }
}
//# sourceMappingURL=discord-attachment.js.map