gov-gui
Version:
Gov UI Component Library Typscript Build
682 lines (681 loc) • 24.3 kB
JavaScript
import { h } from "@stencil/core";
import { getGlobalPropsClasses } from "../../global/global-styles-helper";
import { getAnimationClasses } from "../../global/animation-helpers";
export class GovModal {
constructor() {
/** Controls the visibility of the modal (two-way binding) */
this.isOpen = false;
/** Modal header/title */
this.header = '';
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;
/** Cancel button variant */
this.cancelButtonVariant = 'secondary';
/** Confirm button variant */
this.confirmButtonVariant = 'primary';
/** Allow closing by clicking backdrop */
this.backdropClose = true;
/** Prevent all manual closing */
this.disableClose = false;
/** Modal size variant */
this.size = 'medium';
/** Fullscreen modal */
this.fullscreen = false;
/** Close modal on ESC key */
this.closeOnEsc = true;
/** Show header section */
this.showHeader = true;
this.showSubHeader = true;
/** Show footer section */
this.showFooter = true;
this.visible = this.isOpen;
this.animationDelay = '2s';
this.allClasses = '';
this.handleConfirm = () => {
this.confirm.emit();
this.close();
};
this.handleCancel = () => {
this.cancel.emit();
this.close();
};
this.handleBackdropClick = () => {
if (this.backdropClose && !this.disableClose) {
this.close();
}
};
}
handleIsOpenChange(newValue) {
this.visible = newValue;
}
watchVisibility(newValue) {
newValue ? this.opened.emit() : this.closed.emit();
this.isOpenChange.emit(newValue);
}
//watching for any change in animations to trigger them
watchAnimations() {
this.provideClass();
}
watchAnimationsDelay() {
this.provideClass();
}
watchAnimationsSpeed() {
this.provideClass();
}
/** Handles ESC key press */
handleKeyDown(ev) {
if (this.visible && this.closeOnEsc && !this.disableClose && ev.key === 'Escape') {
this.close();
}
}
/** Open the modal */
async open() {
this.visible = true;
}
/** Close the modal */
async close() {
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() {
const modalClasses = [
'modal',
this.size,
this.fullscreen ? 'fullscreen' : '',
].filter(c => c).join(' ');
return (h("div", { key: '1151bee80f6579ac415d1d19bb6f831f9159581c' }, this.visible && (h("div", { key: 'becc0d0d5a351a5b6345f734d8e77fb2a917f542', class: "modal-backdrop", onClick: this.handleBackdropClick }, h("div", { key: 'b2097f69e8de484626c068dc982e1ee2a4a99ff9', class: modalClasses, onClick: (e) => e.stopPropagation() }, h("div", { key: '3b7db0578ff7e12209ebb638d40d426d5a26f31d', class: `modal-content ${this.allClasses}` }, this.showHeader && (h("div", { key: '91b3f12a185c75de125ae6eed1ff625906b325bf', class: "modal-header" }, h("slot", { key: 'adcec3ddb53f2ea649373eeb8d279f98ecc98353', name: "header" }, this.header && h("h2", { key: '622d8b32045dc6b49e3e93693672eaa8f7968e46' }, this.header)), !this.disableClose && (h("button", { key: '903fe6ffd16aa71fe5f766fbb5271feb4cfbb2d7', class: "close", onClick: () => this.close(), "aria-label": "Close" })))), this.showSubHeader && (h("div", { key: 'ac7d86edf64683445f40e03f09d76886508714ec', class: "modal-Subheader" }, h("slot", { key: '43e66222edc0f42646866e3d71a6278b920c57d7', name: "Subheader" }, this.Subheader && h("p", { key: 'a8dba88585eaa80a2645c418d9a7daa3f26e8826' }, this.Subheader)))), h("div", { key: '06f2f9a9c4b028201978275ce983d87ef6bba739', class: "modal-body" }, h("slot", { key: '55b1ff33a58c17f7eeef19c96cf7af6c73bfd724' })), this.showFooter && (h("div", { key: 'f116cc691f2c56ee26b30c5b62aa3aef81300790', class: "modal-footer" }, h("slot", { key: '879320b9362aaf78f33f595574bc302a57979403', name: "footer" }, h("div", { key: 'a69a5602e1a33222bdd895cdef8d495475745d75', class: "button-group" }, this.showCancelButton && (h("gov-button", { key: '030f7b3da9eb0e952c68db79886e48b344fc679c', variant: this.cancelButtonVariant, onClick: this.handleCancel, label: this.cancelButtonText })), this.showConfirmButton && (h("gov-button", { key: '4160791f6a9d04917241abd732a805c55a5299b6', variant: this.confirmButtonVariant, onClick: this.handleConfirm, label: this.confirmButtonText }))))))))))));
}
static get is() { return "gov-modal"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["gov-modal.css"]
};
}
static get styleUrls() {
return {
"$": ["gov-modal.css"]
};
}
static get properties() {
return {
"isOpen": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Controls the visibility of the modal (two-way binding)"
},
"getter": false,
"setter": false,
"attribute": "is-open",
"reflect": true,
"defaultValue": "false"
},
"header": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Modal header/title"
},
"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": ""
},
"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"
},
"cancelButtonVariant": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Cancel button variant"
},
"getter": false,
"setter": false,
"attribute": "cancel-button-variant",
"reflect": false,
"defaultValue": "'secondary'"
},
"confirmButtonVariant": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Confirm button variant"
},
"getter": false,
"setter": false,
"attribute": "confirm-button-variant",
"reflect": false,
"defaultValue": "'primary'"
},
"backdropClose": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Allow closing by clicking backdrop"
},
"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 all manual closing"
},
"getter": false,
"setter": false,
"attribute": "disable-close",
"reflect": false,
"defaultValue": "false"
},
"size": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'small' | 'medium' | 'large'",
"resolved": "\"large\" | \"medium\" | \"small\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Modal size variant"
},
"getter": false,
"setter": false,
"attribute": "size",
"reflect": false,
"defaultValue": "'medium'"
},
"fullscreen": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Fullscreen modal"
},
"getter": false,
"setter": false,
"attribute": "fullscreen",
"reflect": false,
"defaultValue": "false"
},
"closeOnEsc": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Close modal on ESC key"
},
"getter": false,
"setter": false,
"attribute": "close-on-esc",
"reflect": false,
"defaultValue": "true"
},
"showHeader": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Show header section"
},
"getter": false,
"setter": false,
"attribute": "show-header",
"reflect": false,
"defaultValue": "true"
},
"showSubHeader": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "show-sub-header",
"reflect": false,
"defaultValue": "true"
},
"showFooter": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Show footer section"
},
"getter": false,
"setter": false,
"attribute": "show-footer",
"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 {
"visible": {}
};
}
static get events() {
return [{
"method": "opened",
"name": "opened",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when modal opens"
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "closed",
"name": "closed",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when modal closes"
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "confirm",
"name": "confirm",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted on confirm button click"
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "cancel",
"name": "cancel",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted on cancel button click"
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "isOpenChange",
"name": "isOpenChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted for two-way binding"
},
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
}
}];
}
static get methods() {
return {
"open": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Open the modal",
"tags": []
}
},
"close": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Close the modal",
"tags": []
}
}
};
}
static get watchers() {
return [{
"propName": "isOpen",
"methodName": "handleIsOpenChange"
}, {
"propName": "visible",
"methodName": "watchVisibility"
}, {
"propName": "animation",
"methodName": "watchAnimations"
}, {
"propName": "animationDelay",
"methodName": "watchAnimationsDelay"
}, {
"propName": "animationSpeed",
"methodName": "watchAnimationsSpeed"
}];
}
static get listeners() {
return [{
"name": "keydown",
"method": "handleKeyDown",
"target": "document",
"capture": false,
"passive": false
}];
}
}
//# sourceMappingURL=gov-modal.js.map