gov-gui
Version:
Gov UI Component Library Typscript Build
259 lines (258 loc) • 9.09 kB
JavaScript
import { h } from "@stencil/core";
import { getGlobalPropsClasses } from "../../global/global-styles-helper";
import { getAnimationClasses } from "../../global/animation-helpers";
export class GovAlert {
constructor() {
this.showIcons = true;
this.isVisible = true; // State to control visibility
this.animationDelay = '2s';
this.validVariants = ['success', 'info', 'warning', 'danger'];
this.allClasses = '';
}
getIcon(variantClass) {
switch (variantClass) {
case 'success':
return h("gov-icon", { name: "checkCircle", size: "lg", variant: "success" }); // Check mark for success
//return '✔'; // Check mark for success
case 'info':
return h("gov-icon", { name: "infoCircle", size: "lg", variant: "info" });
//return 'ℹ'; // Info icon (exclamation mark)
case 'warning':
return h("gov-icon", { name: "exclamationCircle", size: "lg", variant: "warning" });
//return '!'; // Triangle with exclamation mark for warning
case 'danger':
return h("gov-icon", { name: "error", size: "md", variant: "danger" });
//return '⚠'; // Danger icon (you can change this if you prefer another symbol)
default:
return '';
}
}
watchAnimations() {
this.provideClass();
}
watchAnimationsDelay() {
this.provideClass();
}
watchAnimationsSpeed() {
this.provideClass();
}
// inject the global styles on component load
componentWillLoad() {
const animationClasses = getAnimationClasses({
animation: this.animation,
animationDelay: this.animationDelay,
animationSpeed: this.animationSpeed
});
this.allClasses = getGlobalPropsClasses({
classes: ' ' + animationClasses,
});
}
provideClass() {
const animationClasses = getAnimationClasses({
animation: this.animation,
animationDelay: this.animationDelay,
animationSpeed: this.animationSpeed
});
this.allClasses = getGlobalPropsClasses({
classes: ' ' + animationClasses,
});
}
handleClose() {
this.isVisible = false; // Set visibility to false
}
render() {
if (!this.isVisible)
return null; // Return nothing if not visible
const variantClass = this.validVariants.includes(this.variant) ? this.variant : '';
const icon = this.getIcon(variantClass);
return (h("div", { class: `alert ${variantClass} ${this.allClasses}` }, h("div", { class: "icon-text-container" }, this.showIcons && h("div", { class: `alert-icon` }, icon), " ", h("div", { class: "content" }, this.header && h("div", { class: `alert-header ${variantClass}` }, this.header), h("div", { class: `alert-label ${variantClass}` }, this.label))), this.showIcons && h("button", { class: `close-button ${variantClass}`, onClick: () => this.handleClose() }, h("gov-icon", { name: "closeOutline", size: "md", variant: variantClass }))));
}
static get is() { return "gov-alert"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["gov-alert.css"]
};
}
static get styleUrls() {
return {
"$": ["gov-alert.css"]
};
}
static get properties() {
return {
"label": {
"type": "any",
"mutable": false,
"complexType": {
"original": "string | number",
"resolved": "number | string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "label",
"reflect": false
},
"header": {
"type": "any",
"mutable": false,
"complexType": {
"original": "string | number",
"resolved": "number | string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "header",
"reflect": false
},
"icon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "icon",
"reflect": false
},
"variant": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "variant",
"reflect": false
},
"showIcons": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "show-icons",
"reflect": false,
"defaultValue": "true"
},
"animation": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "animation",
"reflect": false
},
"animationDelay": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'2s' | '3s' | '4s' | '5s'",
"resolved": "\"2s\" | \"3s\" | \"4s\" | \"5s\"",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "animation-delay",
"reflect": false,
"defaultValue": "'2s'"
},
"animationSpeed": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'slow' | 'slower' | 'fast' | 'faster'",
"resolved": "\"fast\" | \"faster\" | \"slow\" | \"slower\"",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "animation-speed",
"reflect": false
}
};
}
static get states() {
return {
"isVisible": {}
};
}
static get watchers() {
return [{
"propName": "animation",
"methodName": "watchAnimations"
}, {
"propName": "animationDelay",
"methodName": "watchAnimationsDelay"
}, {
"propName": "animationSpeed",
"methodName": "watchAnimationsSpeed"
}];
}
}
//# sourceMappingURL=gov-alert.js.map