gov-gui
Version:
Gov UI Component Library Typscript Build
491 lines (490 loc) • 17.7 kB
JavaScript
import { h } from "@stencil/core";
import { getGlobalPropsClasses } from "../../global/global-styles-helper";
import { getAnimationClasses } from "../../global/animation-helpers";
export class GovPopups {
constructor() {
/** Modal title/header */
this.header = '';
/** Modal subheader */
this.subheader = '';
/** Cancel button text */
this.cancelButtonText = 'Cancel';
/** Confirm button text */
this.confirmButtonText = 'Confirm';
/** Show/hide cancel button */
this.showCancelButton = true;
/** Show/hide confirm button */
this.showConfirmButton = true;
/** Controls visibility of the modal */
this.visible = false;
/** Modal variant (style theme) */
this.confirmButtonVariant = 'primary';
this.cancelButtonVariant = 'white';
/** Allow clicking on the backdrop to close the modal */
this.backdropClose = true;
/** Prevent closing the modal manually */
this.disableClose = false;
this.animationDelay = '2s';
this.allClasses = '';
/** Handles the confirm button action */
this.handleConfirm = () => {
this.confirmClicked.emit();
this.closeModal();
};
/** Handles the cancel button action */
this.handleCancel = () => {
this.cancelClicked.emit();
this.closeModal();
};
this.handleBackdropClick = () => {
if (this.backdropClose && !this.disableClose) {
this.closeModal();
}
};
}
/** Watches for visibility changes */
watchVisibility(newValue) {
newValue ? this.popupOpened.emit() : this.popupClosed.emit();
}
//watching for any change in animations to trigger them
watchAnimations() {
this.provideClass();
}
watchAnimationsDelay() {
this.provideClass();
}
watchAnimationsSpeed() {
this.provideClass();
}
/** Opens the modal */
async openModal() {
this.visible = true;
}
/** Closes the modal */
async closeModal() {
if (!this.disableClose) {
this.visible = false;
}
}
// inject the animations and styles on component load
componentWillLoad() {
const animationClasses = getAnimationClasses({
animation: this.animation,
animationDelay: this.animationDelay,
animationSpeed: this.animationSpeed
});
this.allClasses = getGlobalPropsClasses({
classes: ' ' + animationClasses,
});
}
//Called on change of any animation related property to trigger change
provideClass() {
const animationClasses = getAnimationClasses({
animation: this.animation,
animationDelay: this.animationDelay,
animationSpeed: this.animationSpeed
});
this.allClasses = getGlobalPropsClasses({
classes: ' ' + animationClasses,
});
}
render() {
return (h("div", { key: '1e1f840e307b3b7007e0003d9a67ebbb4d1ec952' }, this.visible && (h("div", { key: '70b74db6131423d194ac4eab7feabc921d108e7f', class: "modal-backdrop", onClick: () => this.handleBackdropClick }, h("div", { key: '9ab8d74725c7e4da885f7f39de00292d303e09e9', class: `modal`, onClick: (e) => e.stopPropagation() }, h("div", { key: '38c9f3b8041dda841e64871a812d646b0f7210e2', class: `modal-content ${this.allClasses}` }, this.header && h("h2", { key: '47d06acb3bb1518b2ca48471f9577f212d86f7b0', class: "modal-header" }, this.header), !this.disableClose && (h("span", { key: 'b31c6ecb9ece572bb041ecd012a6a367890f1eab', class: "close", onClick: () => this.closeModal() }, "\u00D7")), h("div", { key: 'df79d3273c5f683a4939648e2a2aee5543cb09fd', class: "modal-subheader" }, h("slot", { key: '71a6fffa6a13fb5dd6fa6ea7b78bcb948f275f42', name: "subheader" }, this.subheader && h("p", { key: '514f9f3db84b54b2eb37e35c13d28a12b69b1583' }, this.subheader))), h("div", { key: '0b6e4f60cc4deff411d6aa5031a86b86714756e7', class: "content" }, h("slot", { key: '4e2ba0504589d57a76da6b75207ab03f5189a4b1' })), h("div", { key: '5d3f27e3bc72dd1ec78af13bdcc7f2171a7a28ea', class: "buttons" }, this.showCancelButton && (h("gov-button", { key: '06bec1b57691eb1b4ac6782864f94e7dd1f66055', variant: this.cancelButtonVariant, onClick: this.handleCancel, label: this.cancelButtonText })), this.showConfirmButton && (h("gov-button", { key: '83470924c0452da53bdb7615f1aa126bf2213480', variant: this.confirmButtonVariant, onClick: this.handleConfirm, label: this.confirmButtonText })))))))));
}
static get is() { return "gov-popups"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["gov-popups.css"]
};
}
static get styleUrls() {
return {
"$": ["gov-popups.css"]
};
}
static get properties() {
return {
"header": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Modal title/header"
},
"getter": false,
"setter": false,
"attribute": "header",
"reflect": false,
"defaultValue": "''"
},
"subheader": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Modal subheader"
},
"getter": false,
"setter": false,
"attribute": "subheader",
"reflect": false,
"defaultValue": "''"
},
"cancelButtonText": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Cancel button text"
},
"getter": false,
"setter": false,
"attribute": "cancel-button-text",
"reflect": false,
"defaultValue": "'Cancel'"
},
"confirmButtonText": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Confirm button text"
},
"getter": false,
"setter": false,
"attribute": "confirm-button-text",
"reflect": false,
"defaultValue": "'Confirm'"
},
"showCancelButton": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Show/hide cancel button"
},
"getter": false,
"setter": false,
"attribute": "show-cancel-button",
"reflect": false,
"defaultValue": "true"
},
"showConfirmButton": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Show/hide confirm button"
},
"getter": false,
"setter": false,
"attribute": "show-confirm-button",
"reflect": false,
"defaultValue": "true"
},
"confirmButtonVariant": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Modal variant (style theme)"
},
"getter": false,
"setter": false,
"attribute": "confirm-button-variant",
"reflect": false,
"defaultValue": "'primary'"
},
"cancelButtonVariant": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "cancel-button-variant",
"reflect": false,
"defaultValue": "'white'"
},
"backdropClose": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Allow clicking on the backdrop to close the modal"
},
"getter": false,
"setter": false,
"attribute": "backdrop-close",
"reflect": false,
"defaultValue": "true"
},
"disableClose": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Prevent closing the modal manually"
},
"getter": false,
"setter": false,
"attribute": "disable-close",
"reflect": false,
"defaultValue": "false"
},
"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 {
"visible": {}
};
}
static get events() {
return [{
"method": "popupOpened",
"name": "popupOpened",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emits when the modal opens"
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "popupClosed",
"name": "popupClosed",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emits when the modal closes"
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "confirmClicked",
"name": "confirmClicked",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emits when the confirm button is clicked"
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "cancelClicked",
"name": "cancelClicked",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emits when the cancel button is clicked"
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}];
}
static get methods() {
return {
"openModal": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Opens the modal",
"tags": []
}
},
"closeModal": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Closes the modal",
"tags": []
}
}
};
}
static get watchers() {
return [{
"propName": "visible",
"methodName": "watchVisibility"
}, {
"propName": "animation",
"methodName": "watchAnimations"
}, {
"propName": "animationDelay",
"methodName": "watchAnimationsDelay"
}, {
"propName": "animationSpeed",
"methodName": "watchAnimationsSpeed"
}];
}
}
//# sourceMappingURL=gov-popups.js.map