Remove with Text
Remove GetEngineeringSpcReview Better error message EnforceCodeStyleInBuild NginxFileSystem Remove Reactors and Working Directory AppSettings Delete self contained Thunder Tests Back to .net8.0 api/v4/InfinityQS ApiExplorerSettings Wafer Counter
This commit is contained in:
310
Server/wwwroot/package/dist/collection/components/modal/modal.js
vendored
Normal file
310
Server/wwwroot/package/dist/collection/components/modal/modal.js
vendored
Normal file
@ -0,0 +1,310 @@
|
||||
import { Host, h } from "@stencil/core";
|
||||
import { queryShadowRoot, isHidden, isFocusable } from "../../global/utils/focus-trap";
|
||||
import { animationTo, KEYFRAMES } from "../../global/utils/animation";
|
||||
export class IfxModal {
|
||||
constructor() {
|
||||
this.focusableElements = [];
|
||||
this.handleTopFocus = () => {
|
||||
this.attemptFocus(this.getLastFocusableElement());
|
||||
};
|
||||
this.handleBottomFocus = () => {
|
||||
this.attemptFocus(this.getFirstFocusableElement());
|
||||
};
|
||||
this.handleKeypress = (event) => {
|
||||
if (!this.showModal) {
|
||||
return;
|
||||
}
|
||||
if (event.key === 'Escape') {
|
||||
this.doBeforeClose('ESCAPE_KEY');
|
||||
}
|
||||
};
|
||||
this.opened = false;
|
||||
this.showModal = this.opened || false;
|
||||
this.caption = 'Modal Title';
|
||||
this.closeOnOverlayClick = true;
|
||||
this.variant = 'default';
|
||||
this.alertIcon = '';
|
||||
this.okButtonLabel = 'OK';
|
||||
this.cancelButtonLabel = 'Cancel';
|
||||
this.slotButtonsPresent = false;
|
||||
}
|
||||
componentDidLoad() {
|
||||
// Query all focusable elements and store them in `focusableElements`.
|
||||
// Needed for the "focus trap" functionality.
|
||||
this.focusableElements = queryShadowRoot(this.hostElement.shadowRoot, (el) => isHidden(el) || el.matches('[data-focus-trap-edge]'), isFocusable);
|
||||
}
|
||||
getFirstFocusableElement() {
|
||||
return this.focusableElements[0];
|
||||
}
|
||||
getLastFocusableElement() {
|
||||
return this.focusableElements[this.focusableElements.length - 1];
|
||||
}
|
||||
attemptFocus(element) {
|
||||
if (element == null) {
|
||||
setTimeout(() => {
|
||||
this.closeButton.focus();
|
||||
});
|
||||
return;
|
||||
}
|
||||
setTimeout(() => {
|
||||
element.focus();
|
||||
}, 0);
|
||||
}
|
||||
open() {
|
||||
this.showModal = true;
|
||||
try {
|
||||
const anim = animationTo(this.modalContainer, KEYFRAMES.fadeIn, {
|
||||
duration: 200,
|
||||
});
|
||||
anim.addEventListener('finish', () => {
|
||||
this.attemptFocus(this.getFirstFocusableElement());
|
||||
this.ifxModalOpen.emit();
|
||||
});
|
||||
// this.attemptFocus(this.getFirstFocusableElement());
|
||||
// this.ifxModalOpen.emit();
|
||||
this.hostElement.addEventListener('keydown', this.handleKeypress);
|
||||
}
|
||||
catch (err) {
|
||||
this.ifxModalOpen.emit();
|
||||
}
|
||||
}
|
||||
close() {
|
||||
try {
|
||||
const anim = animationTo(this.modalContainer, KEYFRAMES.fadeOut, {
|
||||
duration: 200,
|
||||
});
|
||||
anim.addEventListener('finish', () => {
|
||||
this.showModal = false;
|
||||
this.ifxModalClose.emit();
|
||||
});
|
||||
this.hostElement.removeEventListener('keydown', this.handleKeypress);
|
||||
}
|
||||
catch (err) {
|
||||
this.showModal = false;
|
||||
this.ifxModalClose.emit();
|
||||
}
|
||||
}
|
||||
doBeforeClose(trigger) {
|
||||
const triggers = [];
|
||||
triggers.push(trigger);
|
||||
const prevented = triggers.some((event) => event.defaultPrevented);
|
||||
if (!prevented) {
|
||||
this.opened = false;
|
||||
}
|
||||
}
|
||||
openedChanged(newValue) {
|
||||
if (newValue === true) {
|
||||
this.open();
|
||||
}
|
||||
else {
|
||||
this.close();
|
||||
}
|
||||
}
|
||||
handleOverlayClick() {
|
||||
if (this.closeOnOverlayClick) {
|
||||
this.doBeforeClose('BACKDROP');
|
||||
}
|
||||
}
|
||||
handleButtonsSlotChange(e) {
|
||||
var _a;
|
||||
if (((_a = e.currentTarget.assignedElements()[0]) === null || _a === void 0 ? void 0 : _a.childElementCount) > 0) {
|
||||
this.slotButtonsPresent = true;
|
||||
}
|
||||
else {
|
||||
this.slotButtonsPresent = false;
|
||||
}
|
||||
}
|
||||
render() {
|
||||
const isAlertVariant = this.variant !== 'default';
|
||||
return (h(Host, null, h("div", { ref: (el) => (this.modalContainer = el), class: `modal-container ${this.showModal ? 'open' : ''}` }, h("div", { class: "modal-overlay", onClick: () => this.handleOverlayClick() }), h("div", { "data-focus-trap-edge": true, onFocus: this.handleTopFocus, tabindex: "0" }), h("div", { class: `modal-content-container`, role: "dialog", "aria-modal": "true", "aria-label": this.caption }, isAlertVariant ? (h("div", { class: `modal-icon-container ${this.variant === 'alert-brand' ? '' : 'danger'}` }, this.alertIcon ? h("ifx-icon", { icon: this.alertIcon }) : null)) : null, h("div", { class: "modal-content" }, h("div", { class: "modal-header" }, h("h2", null, this.caption), h("ifx-icon-button", { ref: (el) => (this.closeButton = el), icon: "cross-24", variant: "tertiary", onClick: () => this.doBeforeClose('CLOSE_BUTTON') })), h("div", { class: "modal-body" }, h("slot", { name: "content" /*onSlotchange={() => console.log('slots children modified')}*/ })), h("div", { class: `modal-footer ${this.slotButtonsPresent ? 'buttons-present' : ''}` }, h("slot", { name: "buttons", onSlotchange: (e) => this.handleButtonsSlotChange(e) })))), h("div", { "data-focus-trap-edge": true, onFocus: this.handleBottomFocus, tabindex: "0" }))));
|
||||
}
|
||||
static get is() { return "ifx-modal"; }
|
||||
static get encapsulation() { return "shadow"; }
|
||||
static get originalStyleUrls() {
|
||||
return {
|
||||
"$": ["modal.scss"]
|
||||
};
|
||||
}
|
||||
static get styleUrls() {
|
||||
return {
|
||||
"$": ["modal.css"]
|
||||
};
|
||||
}
|
||||
static get properties() {
|
||||
return {
|
||||
"opened": {
|
||||
"type": "boolean",
|
||||
"mutable": true,
|
||||
"complexType": {
|
||||
"original": "boolean",
|
||||
"resolved": "boolean",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": true,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "opened",
|
||||
"reflect": true,
|
||||
"defaultValue": "false"
|
||||
},
|
||||
"caption": {
|
||||
"type": "string",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "string",
|
||||
"resolved": "string",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "caption",
|
||||
"reflect": false,
|
||||
"defaultValue": "'Modal Title'"
|
||||
},
|
||||
"closeOnOverlayClick": {
|
||||
"type": "boolean",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "boolean",
|
||||
"resolved": "boolean",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "close-on-overlay-click",
|
||||
"reflect": false,
|
||||
"defaultValue": "true"
|
||||
},
|
||||
"variant": {
|
||||
"type": "string",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "'default' | 'alert-brand' | 'alert-danger'",
|
||||
"resolved": "\"alert-brand\" | \"alert-danger\" | \"default\"",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "variant",
|
||||
"reflect": false,
|
||||
"defaultValue": "'default'"
|
||||
},
|
||||
"alertIcon": {
|
||||
"type": "string",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "string",
|
||||
"resolved": "string",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "alert-icon",
|
||||
"reflect": false,
|
||||
"defaultValue": "''"
|
||||
},
|
||||
"okButtonLabel": {
|
||||
"type": "string",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "string",
|
||||
"resolved": "string",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "ok-button-label",
|
||||
"reflect": false,
|
||||
"defaultValue": "'OK'"
|
||||
},
|
||||
"cancelButtonLabel": {
|
||||
"type": "string",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "string",
|
||||
"resolved": "string",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "cancel-button-label",
|
||||
"reflect": false,
|
||||
"defaultValue": "'Cancel'"
|
||||
}
|
||||
};
|
||||
}
|
||||
static get states() {
|
||||
return {
|
||||
"showModal": {},
|
||||
"slotButtonsPresent": {}
|
||||
};
|
||||
}
|
||||
static get events() {
|
||||
return [{
|
||||
"method": "ifxModalOpen",
|
||||
"name": "ifxModalOpen",
|
||||
"bubbles": true,
|
||||
"cancelable": true,
|
||||
"composed": true,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"complexType": {
|
||||
"original": "any",
|
||||
"resolved": "any",
|
||||
"references": {}
|
||||
}
|
||||
}, {
|
||||
"method": "ifxModalClose",
|
||||
"name": "ifxModalClose",
|
||||
"bubbles": true,
|
||||
"cancelable": true,
|
||||
"composed": true,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"complexType": {
|
||||
"original": "any",
|
||||
"resolved": "any",
|
||||
"references": {}
|
||||
}
|
||||
}];
|
||||
}
|
||||
static get elementRef() { return "hostElement"; }
|
||||
static get watchers() {
|
||||
return [{
|
||||
"propName": "opened",
|
||||
"methodName": "openedChanged"
|
||||
}];
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=modal.js.map
|
||||
Reference in New Issue
Block a user