@heartlandone/vega-sandbox-pr-1479-67b1af6617cd7ddd88b398d2d9e81f66e06d5403 2.27.0

package/dist/esm/vega-dialog_2.entry.js

@@ -0,0 +1,711 @@
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent, F as Fragment } from './index-187f71d1.js';
+import { s as sanitizeVegaComponent } from './component-cae24190.js';
+import { g as getCurrentBreakpoint } from './breakpoints-36a3ed69.js';
+import { I as InjectVegaSlimmer, c as MapToComponentField, M as MapToComponentMethod, V as VegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
+import './state-background-color-formatter-0540d006.js';
+import { f as formatAndValidResponsiveToken } from './design-token-3671ce60.js';
+import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-b3f6ac79.js';
+import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-994c1e1b.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-9461cd67.js';
+import { c as VegaClose, a as VegaClick, B as VegaOpen } from './vega-event-id-7465a011.js';
+import { D as DefaultModalSize } from './ui-8424715a.js';
+import { R as ResponsiveFormatFacade } from './responsive-format-facade-5a1329a7.js';
+import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
+import { g as getDeviceType, D as DeviceType, f as findParent } from './ui-0132dbb5.js';
+import { I as InternalVegaZIndexManager } from './internal-vega-z-index-manager-0553458e.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-eee9fd41.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-345c46c5.js';
+import { C as ComponentGlobalStyleSlimmer } from './component-global-style-slimmer-000e0c11.js';
+import { c as createDeprecatedPropertySlimmer } from './deprecated-property-slimmer-43d184b3.js';
+import './type-guard-63caf78b.js';
+import './regex-dfe11abf.js';
+import './typography-a8fc4764.js';
+import './change-manager-6a7eb88c.js';
+import './observer-3959f9dd.js';
+import './number-e2519d1c.js';
+import './pixel-f32c07ce.js';
+import './dynamic-slimmer-90b8af32.js';
+import './internal-vega-event-manager-722461c1.js';
+import './vega-env-manager-8f8dc473.js';
+import './feature-flag-controller-10780eeb.js';
+import './index-0863eec6.js';
+import './object-261e7344.js';
+
+const vegaDialogCss = ":host vega-modal{padding-left:16px;padding-right:16px}@media (min-width: 768px){:host vega-modal{padding:0px}}:host .vega-dialog-actions-container{display:flex;justify-content:center;flex-direction:column;gap:12px}@media (min-width: 768px){:host .vega-dialog-actions-container{justify-content:flex-end;flex-direction:row}}:host .vega-dialog-modal-content{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:500;line-height:30px;letter-spacing:0px;color:rgba(var(--v-text-primary, 32, 54, 69, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-dialog-modal-content{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:28px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-dialog-modal-content{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:28px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-dialog-modal-content{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:28px;letter-spacing:0px}}";
+
+var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const VegaDialog = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.globalSlimmers = {};
+    /**
+     * The below method is e2e-test covered in
+     * @see{module:vega-dialog-resize-e2e}
+     */
+    this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer();
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    /**
+     * the default size for DESKTOP and TABLET
+     */
+    this.dialogDefaultSize = 480;
+    this.currentBreakpoint = getCurrentBreakpoint();
+    /**
+     * Specifies the type of the dialog.
+     *
+     * Use the value `danger` when the dialog's primary action is destructive.
+     *
+     * @vegaVersion 1.24.0
+     */
+    this.type = 'default';
+    /**
+     * Determines whether the cancel button should be displayed.
+     *
+     * @vegaVersion 1.24.0
+     */
+    this.showCancel = true;
+    /**
+     * Represents a dictionary that contains the configuration options
+     *    for the modal component used to display the dialog.
+     *
+     * @vegaVersion 1.24.0
+     */
+    this.modalProps = {};
+    this.handleCancelBtnClick = (e) => {
+      const event = new CustomEvent('vegaClick', {
+        detail: e.detail,
+      });
+      if (!this.handleCancel || this.handleCancel(event)) {
+        this.host.remove();
+      }
+    };
+    this.handleOkBtnClick = (e) => {
+      const event = new CustomEvent('vegaClick', {
+        detail: e.detail,
+      });
+      if (!this.handleOk || this.handleOk(event)) {
+        this.host.remove();
+      }
+    };
+  }
+  render() {
+    var _a, _b;
+    const isSmallScreen = ['default', 'S'].includes(this.currentBreakpoint);
+    const actionButtonSize = { default: 'default', M: 'small' };
+    const isDanger = this.type === 'danger';
+    const mergedOkButtonProps = Object.assign(Object.assign({ size: actionButtonSize }, this.okButton), { block: isSmallScreen, danger: isDanger });
+    const mergedCancelButtonProps = Object.assign(Object.assign({ size: actionButtonSize, variant: 'secondary' }, this.cancelButton), { block: isSmallScreen, danger: isDanger });
+    const mergedModalProps = Object.assign(Object.assign({}, this.modalProps), { isVerticallyCentered: this.modalProps.isVerticallyCentered !== undefined ||
+        this.modalProps.isVerticallyCenter !== undefined
+        ? this.modalProps.isVerticallyCentered || this.modalProps.isVerticallyCenter
+        : isSmallScreen, size: this.modalProps.size || this.dialogDefaultSize, open: true, modalTitle: this.dialogTitle, backdrop: 'static' });
+    return sanitizeVegaComponent(h(Host, null, h("vega-modal", Object.assign({}, mergedModalProps, { ref: (ref) => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClose, () => {
+          this.onModalClose();
+        });
+      } }), h("div", { slot: "modal-content", class: "vega-dialog-modal-content" }, this.content), h("div", { slot: "modal-footer" }, h("div", { class: "vega-dialog-actions-container" }, this.showCancel && (h("vega-button", Object.assign({}, mergedCancelButtonProps, { ref: (ref) => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, (input) => {
+          this.handleCancelBtnClick(input);
+        });
+      } }), ((_a = this.cancelButton) === null || _a === void 0 ? void 0 : _a.label) || 'Cancel')), h("vega-button", Object.assign({}, mergedOkButtonProps, { ref: (ref) => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, (input) => {
+          this.handleOkBtnClick(input);
+        });
+      } }), ((_b = this.okButton) === null || _b === void 0 ? void 0 : _b.label) || 'OK'))))), this.host);
+  }
+  onModalClose() {
+    this.host.remove();
+  }
+  get host() { return getElement(this); }
+};
+__decorate$2([
+  InjectVegaGlobalSlimmer()
+], VegaDialog.prototype, "globalSlimmers", void 0);
+__decorate$2([
+  InjectVegaSlimmer()
+], VegaDialog.prototype, "pageResizeObserverSlimmer", void 0);
+__decorate$2([
+  InjectVegaSlimmer()
+], VegaDialog.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+VegaDialog.style = vegaDialogCss;
+
+const vegaModalDisableBodyScrollCss = "body.disable-scroll-in-desktop{max-height:100vh !important;overflow:hidden !important}";
+
+const VegaModalRuntimeMetricsPayloadDefinition = [
+  {
+    payloadKey: 'IS_VERTICALLY_CENTER',
+    payloadDescription: '@deprecated Determines whether the modal is vertically centered on the screen.',
+    /**
+     * The function checks if the `isVerticallyCenter` property of the `host` element is equal to 'true'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.isVerticallyCenter === true,
+  },
+  {
+    payloadKey: 'IS_NOT_VERTICALLY_CENTER',
+    payloadDescription: '@deprecated Determines whether the modal is vertically centered on the screen.',
+    /**
+     * The function checks if the `isVerticallyCenter` property of the `host` element is equal to 'false'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.isVerticallyCenter === false,
+  },
+];
+
+var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Nested modal controller
+ */
+class VegaNestedModalController extends VegaSlimmer {
+  /**
+   * Component lifecycle - [connectedCallback]
+   */
+  connectedCallback() {
+    this.appendNestedModalToBody();
+  }
+  /**
+   * The function appends all nested 'vega-modal' elements found within the host element to the document
+   * body.
+   */
+  appendNestedModalToBody() {
+    this.host.querySelectorAll('vega-modal').forEach((modal) => {
+      document.body.append(modal);
+    });
+  }
+}
+__decorate$1([
+  MapToComponentField()
+], VegaNestedModalController.prototype, "host", void 0);
+__decorate$1([
+  MapToComponentMethod('connectedCallback')
+], VegaNestedModalController.prototype, "connectedCallback", null);
+
+const vegaModalCss = ":host(.v-p-0),.v-p-0{padding:0px}:host(.v-px-0),.v-px-0{padding-left:0px;padding-right:0px}:host(.v-py-0),.v-py-0{padding-top:0px;padding-bottom:0px}:host(.v-pt-0),.v-pt-0{padding-top:0px}:host(.v-pb-0),.v-pb-0{padding-bottom:0px}:host(.v-pr-0),.v-pr-0{padding-right:0px}:host(.v-pl-0),.v-pl-0{padding-left:0px}:host(.v-p-size-0),.v-p-size-0{padding:0px}:host(.v-px-size-0),.v-px-size-0{padding-left:0px;padding-right:0px}:host(.v-py-size-0),.v-py-size-0{padding-top:0px;padding-bottom:0px}:host(.v-pt-size-0),.v-pt-size-0{padding-top:0px}:host(.v-pb-size-0),.v-pb-size-0{padding-bottom:0px}:host(.v-pr-size-0),.v-pr-size-0{padding-right:0px}:host(.v-pl-size-0),.v-pl-size-0{padding-left:0px}:host(.v-p-size-4),.v-p-size-4{padding:4px}:host(.v-px-size-4),.v-px-size-4{padding-left:4px;padding-right:4px}:host(.v-py-size-4),.v-py-size-4{padding-top:4px;padding-bottom:4px}:host(.v-pt-size-4),.v-pt-size-4{padding-top:4px}:host(.v-pb-size-4),.v-pb-size-4{padding-bottom:4px}:host(.v-pr-size-4),.v-pr-size-4{padding-right:4px}:host(.v-pl-size-4),.v-pl-size-4{padding-left:4px}:host(.v-p-size-8),.v-p-size-8{padding:8px}:host(.v-px-size-8),.v-px-size-8{padding-left:8px;padding-right:8px}:host(.v-py-size-8),.v-py-size-8{padding-top:8px;padding-bottom:8px}:host(.v-pt-size-8),.v-pt-size-8{padding-top:8px}:host(.v-pb-size-8),.v-pb-size-8{padding-bottom:8px}:host(.v-pr-size-8),.v-pr-size-8{padding-right:8px}:host(.v-pl-size-8),.v-pl-size-8{padding-left:8px}:host(.v-p-size-12),.v-p-size-12{padding:12px}:host(.v-px-size-12),.v-px-size-12{padding-left:12px;padding-right:12px}:host(.v-py-size-12),.v-py-size-12{padding-top:12px;padding-bottom:12px}:host(.v-pt-size-12),.v-pt-size-12{padding-top:12px}:host(.v-pb-size-12),.v-pb-size-12{padding-bottom:12px}:host(.v-pr-size-12),.v-pr-size-12{padding-right:12px}:host(.v-pl-size-12),.v-pl-size-12{padding-left:12px}:host(.v-p-size-16),.v-p-size-16{padding:16px}:host(.v-px-size-16),.v-px-size-16{padding-left:16px;padding-right:16px}:host(.v-py-size-16),.v-py-size-16{padding-top:16px;padding-bottom:16px}:host(.v-pt-size-16),.v-pt-size-16{padding-top:16px}:host(.v-pb-size-16),.v-pb-size-16{padding-bottom:16px}:host(.v-pr-size-16),.v-pr-size-16{padding-right:16px}:host(.v-pl-size-16),.v-pl-size-16{padding-left:16px}:host(.v-p-size-20),.v-p-size-20{padding:20px}:host(.v-px-size-20),.v-px-size-20{padding-left:20px;padding-right:20px}:host(.v-py-size-20),.v-py-size-20{padding-top:20px;padding-bottom:20px}:host(.v-pt-size-20),.v-pt-size-20{padding-top:20px}:host(.v-pb-size-20),.v-pb-size-20{padding-bottom:20px}:host(.v-pr-size-20),.v-pr-size-20{padding-right:20px}:host(.v-pl-size-20),.v-pl-size-20{padding-left:20px}:host(.v-p-size-24),.v-p-size-24{padding:24px}:host(.v-px-size-24),.v-px-size-24{padding-left:24px;padding-right:24px}:host(.v-py-size-24),.v-py-size-24{padding-top:24px;padding-bottom:24px}:host(.v-pt-size-24),.v-pt-size-24{padding-top:24px}:host(.v-pb-size-24),.v-pb-size-24{padding-bottom:24px}:host(.v-pr-size-24),.v-pr-size-24{padding-right:24px}:host(.v-pl-size-24),.v-pl-size-24{padding-left:24px}:host(.v-p-size-32),.v-p-size-32{padding:32px}:host(.v-px-size-32),.v-px-size-32{padding-left:32px;padding-right:32px}:host(.v-py-size-32),.v-py-size-32{padding-top:32px;padding-bottom:32px}:host(.v-pt-size-32),.v-pt-size-32{padding-top:32px}:host(.v-pb-size-32),.v-pb-size-32{padding-bottom:32px}:host(.v-pr-size-32),.v-pr-size-32{padding-right:32px}:host(.v-pl-size-32),.v-pl-size-32{padding-left:32px}:host(.v-p-size-40),.v-p-size-40{padding:40px}:host(.v-px-size-40),.v-px-size-40{padding-left:40px;padding-right:40px}:host(.v-py-size-40),.v-py-size-40{padding-top:40px;padding-bottom:40px}:host(.v-pt-size-40),.v-pt-size-40{padding-top:40px}:host(.v-pb-size-40),.v-pb-size-40{padding-bottom:40px}:host(.v-pr-size-40),.v-pr-size-40{padding-right:40px}:host(.v-pl-size-40),.v-pl-size-40{padding-left:40px}:host(.v-p-size-48),.v-p-size-48{padding:48px}:host(.v-px-size-48),.v-px-size-48{padding-left:48px;padding-right:48px}:host(.v-py-size-48),.v-py-size-48{padding-top:48px;padding-bottom:48px}:host(.v-pt-size-48),.v-pt-size-48{padding-top:48px}:host(.v-pb-size-48),.v-pb-size-48{padding-bottom:48px}:host(.v-pr-size-48),.v-pr-size-48{padding-right:48px}:host(.v-pl-size-48),.v-pl-size-48{padding-left:48px}:host(.v-p-size-64),.v-p-size-64{padding:64px}:host(.v-px-size-64),.v-px-size-64{padding-left:64px;padding-right:64px}:host(.v-py-size-64),.v-py-size-64{padding-top:64px;padding-bottom:64px}:host(.v-pt-size-64),.v-pt-size-64{padding-top:64px}:host(.v-pb-size-64),.v-pb-size-64{padding-bottom:64px}:host(.v-pr-size-64),.v-pr-size-64{padding-right:64px}:host(.v-pl-size-64),.v-pl-size-64{padding-left:64px}:host(.v-p-size-72),.v-p-size-72{padding:72px}:host(.v-px-size-72),.v-px-size-72{padding-left:72px;padding-right:72px}:host(.v-py-size-72),.v-py-size-72{padding-top:72px;padding-bottom:72px}:host(.v-pt-size-72),.v-pt-size-72{padding-top:72px}:host(.v-pb-size-72),.v-pb-size-72{padding-bottom:72px}:host(.v-pr-size-72),.v-pr-size-72{padding-right:72px}:host(.v-pl-size-72),.v-pl-size-72{padding-left:72px}:host(.v-p-size-80),.v-p-size-80{padding:80px}:host(.v-px-size-80),.v-px-size-80{padding-left:80px;padding-right:80px}:host(.v-py-size-80),.v-py-size-80{padding-top:80px;padding-bottom:80px}:host(.v-pt-size-80),.v-pt-size-80{padding-top:80px}:host(.v-pb-size-80),.v-pb-size-80{padding-bottom:80px}:host(.v-pr-size-80),.v-pr-size-80{padding-right:80px}:host(.v-pl-size-80),.v-pl-size-80{padding-left:80px}:host(.v-p-size-112),.v-p-size-112{padding:112px}:host(.v-px-size-112),.v-px-size-112{padding-left:112px;padding-right:112px}:host(.v-py-size-112),.v-py-size-112{padding-top:112px;padding-bottom:112px}:host(.v-pt-size-112),.v-pt-size-112{padding-top:112px}:host(.v-pb-size-112),.v-pb-size-112{padding-bottom:112px}:host(.v-pr-size-112),.v-pr-size-112{padding-right:112px}:host(.v-pl-size-112),.v-pl-size-112{padding-left:112px}:host(.v-p-size-2),.v-p-size-2{padding:2px}:host(.v-px-size-2),.v-px-size-2{padding-left:2px;padding-right:2px}:host(.v-py-size-2),.v-py-size-2{padding-top:2px;padding-bottom:2px}:host(.v-pt-size-2),.v-pt-size-2{padding-top:2px}:host(.v-pb-size-2),.v-pb-size-2{padding-bottom:2px}:host(.v-pr-size-2),.v-pr-size-2{padding-right:2px}:host(.v-pl-size-2),.v-pl-size-2{padding-left:2px}@media (min-width: 320px){:host(.S\\:v-p-0),.S\\:v-p-0{padding:0px}:host(.S\\:v-px-0),.S\\:v-px-0{padding-left:0px;padding-right:0px}:host(.S\\:v-py-0),.S\\:v-py-0{padding-top:0px;padding-bottom:0px}:host(.S\\:v-pt-0),.S\\:v-pt-0{padding-top:0px}:host(.S\\:v-pb-0),.S\\:v-pb-0{padding-bottom:0px}:host(.S\\:v-pr-0),.S\\:v-pr-0{padding-right:0px}:host(.S\\:v-pl-0),.S\\:v-pl-0{padding-left:0px}:host(.S\\:v-p-size-0),.S\\:v-p-size-0{padding:0px}:host(.S\\:v-px-size-0),.S\\:v-px-size-0{padding-left:0px;padding-right:0px}:host(.S\\:v-py-size-0),.S\\:v-py-size-0{padding-top:0px;padding-bottom:0px}:host(.S\\:v-pt-size-0),.S\\:v-pt-size-0{padding-top:0px}:host(.S\\:v-pb-size-0),.S\\:v-pb-size-0{padding-bottom:0px}:host(.S\\:v-pr-size-0),.S\\:v-pr-size-0{padding-right:0px}:host(.S\\:v-pl-size-0),.S\\:v-pl-size-0{padding-left:0px}:host(.S\\:v-p-size-4),.S\\:v-p-size-4{padding:4px}:host(.S\\:v-px-size-4),.S\\:v-px-size-4{padding-left:4px;padding-right:4px}:host(.S\\:v-py-size-4),.S\\:v-py-size-4{padding-top:4px;padding-bottom:4px}:host(.S\\:v-pt-size-4),.S\\:v-pt-size-4{padding-top:4px}:host(.S\\:v-pb-size-4),.S\\:v-pb-size-4{padding-bottom:4px}:host(.S\\:v-pr-size-4),.S\\:v-pr-size-4{padding-right:4px}:host(.S\\:v-pl-size-4),.S\\:v-pl-size-4{padding-left:4px}:host(.S\\:v-p-size-8),.S\\:v-p-size-8{padding:8px}:host(.S\\:v-px-size-8),.S\\:v-px-size-8{padding-left:8px;padding-right:8px}:host(.S\\:v-py-size-8),.S\\:v-py-size-8{padding-top:8px;padding-bottom:8px}:host(.S\\:v-pt-size-8),.S\\:v-pt-size-8{padding-top:8px}:host(.S\\:v-pb-size-8),.S\\:v-pb-size-8{padding-bottom:8px}:host(.S\\:v-pr-size-8),.S\\:v-pr-size-8{padding-right:8px}:host(.S\\:v-pl-size-8),.S\\:v-pl-size-8{padding-left:8px}:host(.S\\:v-p-size-12),.S\\:v-p-size-12{padding:12px}:host(.S\\:v-px-size-12),.S\\:v-px-size-12{padding-left:12px;padding-right:12px}:host(.S\\:v-py-size-12),.S\\:v-py-size-12{padding-top:12px;padding-bottom:12px}:host(.S\\:v-pt-size-12),.S\\:v-pt-size-12{padding-top:12px}:host(.S\\:v-pb-size-12),.S\\:v-pb-size-12{padding-bottom:12px}:host(.S\\:v-pr-size-12),.S\\:v-pr-size-12{padding-right:12px}:host(.S\\:v-pl-size-12),.S\\:v-pl-size-12{padding-left:12px}:host(.S\\:v-p-size-16),.S\\:v-p-size-16{padding:16px}:host(.S\\:v-px-size-16),.S\\:v-px-size-16{padding-left:16px;padding-right:16px}:host(.S\\:v-py-size-16),.S\\:v-py-size-16{padding-top:16px;padding-bottom:16px}:host(.S\\:v-pt-size-16),.S\\:v-pt-size-16{padding-top:16px}:host(.S\\:v-pb-size-16),.S\\:v-pb-size-16{padding-bottom:16px}:host(.S\\:v-pr-size-16),.S\\:v-pr-size-16{padding-right:16px}:host(.S\\:v-pl-size-16),.S\\:v-pl-size-16{padding-left:16px}:host(.S\\:v-p-size-20),.S\\:v-p-size-20{padding:20px}:host(.S\\:v-px-size-20),.S\\:v-px-size-20{padding-left:20px;padding-right:20px}:host(.S\\:v-py-size-20),.S\\:v-py-size-20{padding-top:20px;padding-bottom:20px}:host(.S\\:v-pt-size-20),.S\\:v-pt-size-20{padding-top:20px}:host(.S\\:v-pb-size-20),.S\\:v-pb-size-20{padding-bottom:20px}:host(.S\\:v-pr-size-20),.S\\:v-pr-size-20{padding-right:20px}:host(.S\\:v-pl-size-20),.S\\:v-pl-size-20{padding-left:20px}:host(.S\\:v-p-size-24),.S\\:v-p-size-24{padding:24px}:host(.S\\:v-px-size-24),.S\\:v-px-size-24{padding-left:24px;padding-right:24px}:host(.S\\:v-py-size-24),.S\\:v-py-size-24{padding-top:24px;padding-bottom:24px}:host(.S\\:v-pt-size-24),.S\\:v-pt-size-24{padding-top:24px}:host(.S\\:v-pb-size-24),.S\\:v-pb-size-24{padding-bottom:24px}:host(.S\\:v-pr-size-24),.S\\:v-pr-size-24{padding-right:24px}:host(.S\\:v-pl-size-24),.S\\:v-pl-size-24{padding-left:24px}:host(.S\\:v-p-size-32),.S\\:v-p-size-32{padding:32px}:host(.S\\:v-px-size-32),.S\\:v-px-size-32{padding-left:32px;padding-right:32px}:host(.S\\:v-py-size-32),.S\\:v-py-size-32{padding-top:32px;padding-bottom:32px}:host(.S\\:v-pt-size-32),.S\\:v-pt-size-32{padding-top:32px}:host(.S\\:v-pb-size-32),.S\\:v-pb-size-32{padding-bottom:32px}:host(.S\\:v-pr-size-32),.S\\:v-pr-size-32{padding-right:32px}:host(.S\\:v-pl-size-32),.S\\:v-pl-size-32{padding-left:32px}:host(.S\\:v-p-size-40),.S\\:v-p-size-40{padding:40px}:host(.S\\:v-px-size-40),.S\\:v-px-size-40{padding-left:40px;padding-right:40px}:host(.S\\:v-py-size-40),.S\\:v-py-size-40{padding-top:40px;padding-bottom:40px}:host(.S\\:v-pt-size-40),.S\\:v-pt-size-40{padding-top:40px}:host(.S\\:v-pb-size-40),.S\\:v-pb-size-40{padding-bottom:40px}:host(.S\\:v-pr-size-40),.S\\:v-pr-size-40{padding-right:40px}:host(.S\\:v-pl-size-40),.S\\:v-pl-size-40{padding-left:40px}:host(.S\\:v-p-size-48),.S\\:v-p-size-48{padding:48px}:host(.S\\:v-px-size-48),.S\\:v-px-size-48{padding-left:48px;padding-right:48px}:host(.S\\:v-py-size-48),.S\\:v-py-size-48{padding-top:48px;padding-bottom:48px}:host(.S\\:v-pt-size-48),.S\\:v-pt-size-48{padding-top:48px}:host(.S\\:v-pb-size-48),.S\\:v-pb-size-48{padding-bottom:48px}:host(.S\\:v-pr-size-48),.S\\:v-pr-size-48{padding-right:48px}:host(.S\\:v-pl-size-48),.S\\:v-pl-size-48{padding-left:48px}:host(.S\\:v-p-size-64),.S\\:v-p-size-64{padding:64px}:host(.S\\:v-px-size-64),.S\\:v-px-size-64{padding-left:64px;padding-right:64px}:host(.S\\:v-py-size-64),.S\\:v-py-size-64{padding-top:64px;padding-bottom:64px}:host(.S\\:v-pt-size-64),.S\\:v-pt-size-64{padding-top:64px}:host(.S\\:v-pb-size-64),.S\\:v-pb-size-64{padding-bottom:64px}:host(.S\\:v-pr-size-64),.S\\:v-pr-size-64{padding-right:64px}:host(.S\\:v-pl-size-64),.S\\:v-pl-size-64{padding-left:64px}:host(.S\\:v-p-size-72),.S\\:v-p-size-72{padding:72px}:host(.S\\:v-px-size-72),.S\\:v-px-size-72{padding-left:72px;padding-right:72px}:host(.S\\:v-py-size-72),.S\\:v-py-size-72{padding-top:72px;padding-bottom:72px}:host(.S\\:v-pt-size-72),.S\\:v-pt-size-72{padding-top:72px}:host(.S\\:v-pb-size-72),.S\\:v-pb-size-72{padding-bottom:72px}:host(.S\\:v-pr-size-72),.S\\:v-pr-size-72{padding-right:72px}:host(.S\\:v-pl-size-72),.S\\:v-pl-size-72{padding-left:72px}:host(.S\\:v-p-size-80),.S\\:v-p-size-80{padding:80px}:host(.S\\:v-px-size-80),.S\\:v-px-size-80{padding-left:80px;padding-right:80px}:host(.S\\:v-py-size-80),.S\\:v-py-size-80{padding-top:80px;padding-bottom:80px}:host(.S\\:v-pt-size-80),.S\\:v-pt-size-80{padding-top:80px}:host(.S\\:v-pb-size-80),.S\\:v-pb-size-80{padding-bottom:80px}:host(.S\\:v-pr-size-80),.S\\:v-pr-size-80{padding-right:80px}:host(.S\\:v-pl-size-80),.S\\:v-pl-size-80{padding-left:80px}:host(.S\\:v-p-size-112),.S\\:v-p-size-112{padding:112px}:host(.S\\:v-px-size-112),.S\\:v-px-size-112{padding-left:112px;padding-right:112px}:host(.S\\:v-py-size-112),.S\\:v-py-size-112{padding-top:112px;padding-bottom:112px}:host(.S\\:v-pt-size-112),.S\\:v-pt-size-112{padding-top:112px}:host(.S\\:v-pb-size-112),.S\\:v-pb-size-112{padding-bottom:112px}:host(.S\\:v-pr-size-112),.S\\:v-pr-size-112{padding-right:112px}:host(.S\\:v-pl-size-112),.S\\:v-pl-size-112{padding-left:112px}:host(.S\\:v-p-size-2),.S\\:v-p-size-2{padding:2px}:host(.S\\:v-px-size-2),.S\\:v-px-size-2{padding-left:2px;padding-right:2px}:host(.S\\:v-py-size-2),.S\\:v-py-size-2{padding-top:2px;padding-bottom:2px}:host(.S\\:v-pt-size-2),.S\\:v-pt-size-2{padding-top:2px}:host(.S\\:v-pb-size-2),.S\\:v-pb-size-2{padding-bottom:2px}:host(.S\\:v-pr-size-2),.S\\:v-pr-size-2{padding-right:2px}:host(.S\\:v-pl-size-2),.S\\:v-pl-size-2{padding-left:2px}}@media (min-width: 768px){:host(.M\\:v-p-0),.M\\:v-p-0{padding:0px}:host(.M\\:v-px-0),.M\\:v-px-0{padding-left:0px;padding-right:0px}:host(.M\\:v-py-0),.M\\:v-py-0{padding-top:0px;padding-bottom:0px}:host(.M\\:v-pt-0),.M\\:v-pt-0{padding-top:0px}:host(.M\\:v-pb-0),.M\\:v-pb-0{padding-bottom:0px}:host(.M\\:v-pr-0),.M\\:v-pr-0{padding-right:0px}:host(.M\\:v-pl-0),.M\\:v-pl-0{padding-left:0px}:host(.M\\:v-p-size-0),.M\\:v-p-size-0{padding:0px}:host(.M\\:v-px-size-0),.M\\:v-px-size-0{padding-left:0px;padding-right:0px}:host(.M\\:v-py-size-0),.M\\:v-py-size-0{padding-top:0px;padding-bottom:0px}:host(.M\\:v-pt-size-0),.M\\:v-pt-size-0{padding-top:0px}:host(.M\\:v-pb-size-0),.M\\:v-pb-size-0{padding-bottom:0px}:host(.M\\:v-pr-size-0),.M\\:v-pr-size-0{padding-right:0px}:host(.M\\:v-pl-size-0),.M\\:v-pl-size-0{padding-left:0px}:host(.M\\:v-p-size-4),.M\\:v-p-size-4{padding:4px}:host(.M\\:v-px-size-4),.M\\:v-px-size-4{padding-left:4px;padding-right:4px}:host(.M\\:v-py-size-4),.M\\:v-py-size-4{padding-top:4px;padding-bottom:4px}:host(.M\\:v-pt-size-4),.M\\:v-pt-size-4{padding-top:4px}:host(.M\\:v-pb-size-4),.M\\:v-pb-size-4{padding-bottom:4px}:host(.M\\:v-pr-size-4),.M\\:v-pr-size-4{padding-right:4px}:host(.M\\:v-pl-size-4),.M\\:v-pl-size-4{padding-left:4px}:host(.M\\:v-p-size-8),.M\\:v-p-size-8{padding:8px}:host(.M\\:v-px-size-8),.M\\:v-px-size-8{padding-left:8px;padding-right:8px}:host(.M\\:v-py-size-8),.M\\:v-py-size-8{padding-top:8px;padding-bottom:8px}:host(.M\\:v-pt-size-8),.M\\:v-pt-size-8{padding-top:8px}:host(.M\\:v-pb-size-8),.M\\:v-pb-size-8{padding-bottom:8px}:host(.M\\:v-pr-size-8),.M\\:v-pr-size-8{padding-right:8px}:host(.M\\:v-pl-size-8),.M\\:v-pl-size-8{padding-left:8px}:host(.M\\:v-p-size-12),.M\\:v-p-size-12{padding:12px}:host(.M\\:v-px-size-12),.M\\:v-px-size-12{padding-left:12px;padding-right:12px}:host(.M\\:v-py-size-12),.M\\:v-py-size-12{padding-top:12px;padding-bottom:12px}:host(.M\\:v-pt-size-12),.M\\:v-pt-size-12{padding-top:12px}:host(.M\\:v-pb-size-12),.M\\:v-pb-size-12{padding-bottom:12px}:host(.M\\:v-pr-size-12),.M\\:v-pr-size-12{padding-right:12px}:host(.M\\:v-pl-size-12),.M\\:v-pl-size-12{padding-left:12px}:host(.M\\:v-p-size-16),.M\\:v-p-size-16{padding:16px}:host(.M\\:v-px-size-16),.M\\:v-px-size-16{padding-left:16px;padding-right:16px}:host(.M\\:v-py-size-16),.M\\:v-py-size-16{padding-top:16px;padding-bottom:16px}:host(.M\\:v-pt-size-16),.M\\:v-pt-size-16{padding-top:16px}:host(.M\\:v-pb-size-16),.M\\:v-pb-size-16{padding-bottom:16px}:host(.M\\:v-pr-size-16),.M\\:v-pr-size-16{padding-right:16px}:host(.M\\:v-pl-size-16),.M\\:v-pl-size-16{padding-left:16px}:host(.M\\:v-p-size-20),.M\\:v-p-size-20{padding:20px}:host(.M\\:v-px-size-20),.M\\:v-px-size-20{padding-left:20px;padding-right:20px}:host(.M\\:v-py-size-20),.M\\:v-py-size-20{padding-top:20px;padding-bottom:20px}:host(.M\\:v-pt-size-20),.M\\:v-pt-size-20{padding-top:20px}:host(.M\\:v-pb-size-20),.M\\:v-pb-size-20{padding-bottom:20px}:host(.M\\:v-pr-size-20),.M\\:v-pr-size-20{padding-right:20px}:host(.M\\:v-pl-size-20),.M\\:v-pl-size-20{padding-left:20px}:host(.M\\:v-p-size-24),.M\\:v-p-size-24{padding:24px}:host(.M\\:v-px-size-24),.M\\:v-px-size-24{padding-left:24px;padding-right:24px}:host(.M\\:v-py-size-24),.M\\:v-py-size-24{padding-top:24px;padding-bottom:24px}:host(.M\\:v-pt-size-24),.M\\:v-pt-size-24{padding-top:24px}:host(.M\\:v-pb-size-24),.M\\:v-pb-size-24{padding-bottom:24px}:host(.M\\:v-pr-size-24),.M\\:v-pr-size-24{padding-right:24px}:host(.M\\:v-pl-size-24),.M\\:v-pl-size-24{padding-left:24px}:host(.M\\:v-p-size-32),.M\\:v-p-size-32{padding:32px}:host(.M\\:v-px-size-32),.M\\:v-px-size-32{padding-left:32px;padding-right:32px}:host(.M\\:v-py-size-32),.M\\:v-py-size-32{padding-top:32px;padding-bottom:32px}:host(.M\\:v-pt-size-32),.M\\:v-pt-size-32{padding-top:32px}:host(.M\\:v-pb-size-32),.M\\:v-pb-size-32{padding-bottom:32px}:host(.M\\:v-pr-size-32),.M\\:v-pr-size-32{padding-right:32px}:host(.M\\:v-pl-size-32),.M\\:v-pl-size-32{padding-left:32px}:host(.M\\:v-p-size-40),.M\\:v-p-size-40{padding:40px}:host(.M\\:v-px-size-40),.M\\:v-px-size-40{padding-left:40px;padding-right:40px}:host(.M\\:v-py-size-40),.M\\:v-py-size-40{padding-top:40px;padding-bottom:40px}:host(.M\\:v-pt-size-40),.M\\:v-pt-size-40{padding-top:40px}:host(.M\\:v-pb-size-40),.M\\:v-pb-size-40{padding-bottom:40px}:host(.M\\:v-pr-size-40),.M\\:v-pr-size-40{padding-right:40px}:host(.M\\:v-pl-size-40),.M\\:v-pl-size-40{padding-left:40px}:host(.M\\:v-p-size-48),.M\\:v-p-size-48{padding:48px}:host(.M\\:v-px-size-48),.M\\:v-px-size-48{padding-left:48px;padding-right:48px}:host(.M\\:v-py-size-48),.M\\:v-py-size-48{padding-top:48px;padding-bottom:48px}:host(.M\\:v-pt-size-48),.M\\:v-pt-size-48{padding-top:48px}:host(.M\\:v-pb-size-48),.M\\:v-pb-size-48{padding-bottom:48px}:host(.M\\:v-pr-size-48),.M\\:v-pr-size-48{padding-right:48px}:host(.M\\:v-pl-size-48),.M\\:v-pl-size-48{padding-left:48px}:host(.M\\:v-p-size-64),.M\\:v-p-size-64{padding:64px}:host(.M\\:v-px-size-64),.M\\:v-px-size-64{padding-left:64px;padding-right:64px}:host(.M\\:v-py-size-64),.M\\:v-py-size-64{padding-top:64px;padding-bottom:64px}:host(.M\\:v-pt-size-64),.M\\:v-pt-size-64{padding-top:64px}:host(.M\\:v-pb-size-64),.M\\:v-pb-size-64{padding-bottom:64px}:host(.M\\:v-pr-size-64),.M\\:v-pr-size-64{padding-right:64px}:host(.M\\:v-pl-size-64),.M\\:v-pl-size-64{padding-left:64px}:host(.M\\:v-p-size-72),.M\\:v-p-size-72{padding:72px}:host(.M\\:v-px-size-72),.M\\:v-px-size-72{padding-left:72px;padding-right:72px}:host(.M\\:v-py-size-72),.M\\:v-py-size-72{padding-top:72px;padding-bottom:72px}:host(.M\\:v-pt-size-72),.M\\:v-pt-size-72{padding-top:72px}:host(.M\\:v-pb-size-72),.M\\:v-pb-size-72{padding-bottom:72px}:host(.M\\:v-pr-size-72),.M\\:v-pr-size-72{padding-right:72px}:host(.M\\:v-pl-size-72),.M\\:v-pl-size-72{padding-left:72px}:host(.M\\:v-p-size-80),.M\\:v-p-size-80{padding:80px}:host(.M\\:v-px-size-80),.M\\:v-px-size-80{padding-left:80px;padding-right:80px}:host(.M\\:v-py-size-80),.M\\:v-py-size-80{padding-top:80px;padding-bottom:80px}:host(.M\\:v-pt-size-80),.M\\:v-pt-size-80{padding-top:80px}:host(.M\\:v-pb-size-80),.M\\:v-pb-size-80{padding-bottom:80px}:host(.M\\:v-pr-size-80),.M\\:v-pr-size-80{padding-right:80px}:host(.M\\:v-pl-size-80),.M\\:v-pl-size-80{padding-left:80px}:host(.M\\:v-p-size-112),.M\\:v-p-size-112{padding:112px}:host(.M\\:v-px-size-112),.M\\:v-px-size-112{padding-left:112px;padding-right:112px}:host(.M\\:v-py-size-112),.M\\:v-py-size-112{padding-top:112px;padding-bottom:112px}:host(.M\\:v-pt-size-112),.M\\:v-pt-size-112{padding-top:112px}:host(.M\\:v-pb-size-112),.M\\:v-pb-size-112{padding-bottom:112px}:host(.M\\:v-pr-size-112),.M\\:v-pr-size-112{padding-right:112px}:host(.M\\:v-pl-size-112),.M\\:v-pl-size-112{padding-left:112px}:host(.M\\:v-p-size-2),.M\\:v-p-size-2{padding:2px}:host(.M\\:v-px-size-2),.M\\:v-px-size-2{padding-left:2px;padding-right:2px}:host(.M\\:v-py-size-2),.M\\:v-py-size-2{padding-top:2px;padding-bottom:2px}:host(.M\\:v-pt-size-2),.M\\:v-pt-size-2{padding-top:2px}:host(.M\\:v-pb-size-2),.M\\:v-pb-size-2{padding-bottom:2px}:host(.M\\:v-pr-size-2),.M\\:v-pr-size-2{padding-right:2px}:host(.M\\:v-pl-size-2),.M\\:v-pl-size-2{padding-left:2px}}@media (min-width: 1024px){:host(.L\\:v-p-0),.L\\:v-p-0{padding:0px}:host(.L\\:v-px-0),.L\\:v-px-0{padding-left:0px;padding-right:0px}:host(.L\\:v-py-0),.L\\:v-py-0{padding-top:0px;padding-bottom:0px}:host(.L\\:v-pt-0),.L\\:v-pt-0{padding-top:0px}:host(.L\\:v-pb-0),.L\\:v-pb-0{padding-bottom:0px}:host(.L\\:v-pr-0),.L\\:v-pr-0{padding-right:0px}:host(.L\\:v-pl-0),.L\\:v-pl-0{padding-left:0px}:host(.L\\:v-p-size-0),.L\\:v-p-size-0{padding:0px}:host(.L\\:v-px-size-0),.L\\:v-px-size-0{padding-left:0px;padding-right:0px}:host(.L\\:v-py-size-0),.L\\:v-py-size-0{padding-top:0px;padding-bottom:0px}:host(.L\\:v-pt-size-0),.L\\:v-pt-size-0{padding-top:0px}:host(.L\\:v-pb-size-0),.L\\:v-pb-size-0{padding-bottom:0px}:host(.L\\:v-pr-size-0),.L\\:v-pr-size-0{padding-right:0px}:host(.L\\:v-pl-size-0),.L\\:v-pl-size-0{padding-left:0px}:host(.L\\:v-p-size-4),.L\\:v-p-size-4{padding:4px}:host(.L\\:v-px-size-4),.L\\:v-px-size-4{padding-left:4px;padding-right:4px}:host(.L\\:v-py-size-4),.L\\:v-py-size-4{padding-top:4px;padding-bottom:4px}:host(.L\\:v-pt-size-4),.L\\:v-pt-size-4{padding-top:4px}:host(.L\\:v-pb-size-4),.L\\:v-pb-size-4{padding-bottom:4px}:host(.L\\:v-pr-size-4),.L\\:v-pr-size-4{padding-right:4px}:host(.L\\:v-pl-size-4),.L\\:v-pl-size-4{padding-left:4px}:host(.L\\:v-p-size-8),.L\\:v-p-size-8{padding:8px}:host(.L\\:v-px-size-8),.L\\:v-px-size-8{padding-left:8px;padding-right:8px}:host(.L\\:v-py-size-8),.L\\:v-py-size-8{padding-top:8px;padding-bottom:8px}:host(.L\\:v-pt-size-8),.L\\:v-pt-size-8{padding-top:8px}:host(.L\\:v-pb-size-8),.L\\:v-pb-size-8{padding-bottom:8px}:host(.L\\:v-pr-size-8),.L\\:v-pr-size-8{padding-right:8px}:host(.L\\:v-pl-size-8),.L\\:v-pl-size-8{padding-left:8px}:host(.L\\:v-p-size-12),.L\\:v-p-size-12{padding:12px}:host(.L\\:v-px-size-12),.L\\:v-px-size-12{padding-left:12px;padding-right:12px}:host(.L\\:v-py-size-12),.L\\:v-py-size-12{padding-top:12px;padding-bottom:12px}:host(.L\\:v-pt-size-12),.L\\:v-pt-size-12{padding-top:12px}:host(.L\\:v-pb-size-12),.L\\:v-pb-size-12{padding-bottom:12px}:host(.L\\:v-pr-size-12),.L\\:v-pr-size-12{padding-right:12px}:host(.L\\:v-pl-size-12),.L\\:v-pl-size-12{padding-left:12px}:host(.L\\:v-p-size-16),.L\\:v-p-size-16{padding:16px}:host(.L\\:v-px-size-16),.L\\:v-px-size-16{padding-left:16px;padding-right:16px}:host(.L\\:v-py-size-16),.L\\:v-py-size-16{padding-top:16px;padding-bottom:16px}:host(.L\\:v-pt-size-16),.L\\:v-pt-size-16{padding-top:16px}:host(.L\\:v-pb-size-16),.L\\:v-pb-size-16{padding-bottom:16px}:host(.L\\:v-pr-size-16),.L\\:v-pr-size-16{padding-right:16px}:host(.L\\:v-pl-size-16),.L\\:v-pl-size-16{padding-left:16px}:host(.L\\:v-p-size-20),.L\\:v-p-size-20{padding:20px}:host(.L\\:v-px-size-20),.L\\:v-px-size-20{padding-left:20px;padding-right:20px}:host(.L\\:v-py-size-20),.L\\:v-py-size-20{padding-top:20px;padding-bottom:20px}:host(.L\\:v-pt-size-20),.L\\:v-pt-size-20{padding-top:20px}:host(.L\\:v-pb-size-20),.L\\:v-pb-size-20{padding-bottom:20px}:host(.L\\:v-pr-size-20),.L\\:v-pr-size-20{padding-right:20px}:host(.L\\:v-pl-size-20),.L\\:v-pl-size-20{padding-left:20px}:host(.L\\:v-p-size-24),.L\\:v-p-size-24{padding:24px}:host(.L\\:v-px-size-24),.L\\:v-px-size-24{padding-left:24px;padding-right:24px}:host(.L\\:v-py-size-24),.L\\:v-py-size-24{padding-top:24px;padding-bottom:24px}:host(.L\\:v-pt-size-24),.L\\:v-pt-size-24{padding-top:24px}:host(.L\\:v-pb-size-24),.L\\:v-pb-size-24{padding-bottom:24px}:host(.L\\:v-pr-size-24),.L\\:v-pr-size-24{padding-right:24px}:host(.L\\:v-pl-size-24),.L\\:v-pl-size-24{padding-left:24px}:host(.L\\:v-p-size-32),.L\\:v-p-size-32{padding:32px}:host(.L\\:v-px-size-32),.L\\:v-px-size-32{padding-left:32px;padding-right:32px}:host(.L\\:v-py-size-32),.L\\:v-py-size-32{padding-top:32px;padding-bottom:32px}:host(.L\\:v-pt-size-32),.L\\:v-pt-size-32{padding-top:32px}:host(.L\\:v-pb-size-32),.L\\:v-pb-size-32{padding-bottom:32px}:host(.L\\:v-pr-size-32),.L\\:v-pr-size-32{padding-right:32px}:host(.L\\:v-pl-size-32),.L\\:v-pl-size-32{padding-left:32px}:host(.L\\:v-p-size-40),.L\\:v-p-size-40{padding:40px}:host(.L\\:v-px-size-40),.L\\:v-px-size-40{padding-left:40px;padding-right:40px}:host(.L\\:v-py-size-40),.L\\:v-py-size-40{padding-top:40px;padding-bottom:40px}:host(.L\\:v-pt-size-40),.L\\:v-pt-size-40{padding-top:40px}:host(.L\\:v-pb-size-40),.L\\:v-pb-size-40{padding-bottom:40px}:host(.L\\:v-pr-size-40),.L\\:v-pr-size-40{padding-right:40px}:host(.L\\:v-pl-size-40),.L\\:v-pl-size-40{padding-left:40px}:host(.L\\:v-p-size-48),.L\\:v-p-size-48{padding:48px}:host(.L\\:v-px-size-48),.L\\:v-px-size-48{padding-left:48px;padding-right:48px}:host(.L\\:v-py-size-48),.L\\:v-py-size-48{padding-top:48px;padding-bottom:48px}:host(.L\\:v-pt-size-48),.L\\:v-pt-size-48{padding-top:48px}:host(.L\\:v-pb-size-48),.L\\:v-pb-size-48{padding-bottom:48px}:host(.L\\:v-pr-size-48),.L\\:v-pr-size-48{padding-right:48px}:host(.L\\:v-pl-size-48),.L\\:v-pl-size-48{padding-left:48px}:host(.L\\:v-p-size-64),.L\\:v-p-size-64{padding:64px}:host(.L\\:v-px-size-64),.L\\:v-px-size-64{padding-left:64px;padding-right:64px}:host(.L\\:v-py-size-64),.L\\:v-py-size-64{padding-top:64px;padding-bottom:64px}:host(.L\\:v-pt-size-64),.L\\:v-pt-size-64{padding-top:64px}:host(.L\\:v-pb-size-64),.L\\:v-pb-size-64{padding-bottom:64px}:host(.L\\:v-pr-size-64),.L\\:v-pr-size-64{padding-right:64px}:host(.L\\:v-pl-size-64),.L\\:v-pl-size-64{padding-left:64px}:host(.L\\:v-p-size-72),.L\\:v-p-size-72{padding:72px}:host(.L\\:v-px-size-72),.L\\:v-px-size-72{padding-left:72px;padding-right:72px}:host(.L\\:v-py-size-72),.L\\:v-py-size-72{padding-top:72px;padding-bottom:72px}:host(.L\\:v-pt-size-72),.L\\:v-pt-size-72{padding-top:72px}:host(.L\\:v-pb-size-72),.L\\:v-pb-size-72{padding-bottom:72px}:host(.L\\:v-pr-size-72),.L\\:v-pr-size-72{padding-right:72px}:host(.L\\:v-pl-size-72),.L\\:v-pl-size-72{padding-left:72px}:host(.L\\:v-p-size-80),.L\\:v-p-size-80{padding:80px}:host(.L\\:v-px-size-80),.L\\:v-px-size-80{padding-left:80px;padding-right:80px}:host(.L\\:v-py-size-80),.L\\:v-py-size-80{padding-top:80px;padding-bottom:80px}:host(.L\\:v-pt-size-80),.L\\:v-pt-size-80{padding-top:80px}:host(.L\\:v-pb-size-80),.L\\:v-pb-size-80{padding-bottom:80px}:host(.L\\:v-pr-size-80),.L\\:v-pr-size-80{padding-right:80px}:host(.L\\:v-pl-size-80),.L\\:v-pl-size-80{padding-left:80px}:host(.L\\:v-p-size-112),.L\\:v-p-size-112{padding:112px}:host(.L\\:v-px-size-112),.L\\:v-px-size-112{padding-left:112px;padding-right:112px}:host(.L\\:v-py-size-112),.L\\:v-py-size-112{padding-top:112px;padding-bottom:112px}:host(.L\\:v-pt-size-112),.L\\:v-pt-size-112{padding-top:112px}:host(.L\\:v-pb-size-112),.L\\:v-pb-size-112{padding-bottom:112px}:host(.L\\:v-pr-size-112),.L\\:v-pr-size-112{padding-right:112px}:host(.L\\:v-pl-size-112),.L\\:v-pl-size-112{padding-left:112px}:host(.L\\:v-p-size-2),.L\\:v-p-size-2{padding:2px}:host(.L\\:v-px-size-2),.L\\:v-px-size-2{padding-left:2px;padding-right:2px}:host(.L\\:v-py-size-2),.L\\:v-py-size-2{padding-top:2px;padding-bottom:2px}:host(.L\\:v-pt-size-2),.L\\:v-pt-size-2{padding-top:2px}:host(.L\\:v-pb-size-2),.L\\:v-pb-size-2{padding-bottom:2px}:host(.L\\:v-pr-size-2),.L\\:v-pr-size-2{padding-right:2px}:host(.L\\:v-pl-size-2),.L\\:v-pl-size-2{padding-left:2px}}@media (min-width: 1440px){:host(.XL\\:v-p-0),.XL\\:v-p-0{padding:0px}:host(.XL\\:v-px-0),.XL\\:v-px-0{padding-left:0px;padding-right:0px}:host(.XL\\:v-py-0),.XL\\:v-py-0{padding-top:0px;padding-bottom:0px}:host(.XL\\:v-pt-0),.XL\\:v-pt-0{padding-top:0px}:host(.XL\\:v-pb-0),.XL\\:v-pb-0{padding-bottom:0px}:host(.XL\\:v-pr-0),.XL\\:v-pr-0{padding-right:0px}:host(.XL\\:v-pl-0),.XL\\:v-pl-0{padding-left:0px}:host(.XL\\:v-p-size-0),.XL\\:v-p-size-0{padding:0px}:host(.XL\\:v-px-size-0),.XL\\:v-px-size-0{padding-left:0px;padding-right:0px}:host(.XL\\:v-py-size-0),.XL\\:v-py-size-0{padding-top:0px;padding-bottom:0px}:host(.XL\\:v-pt-size-0),.XL\\:v-pt-size-0{padding-top:0px}:host(.XL\\:v-pb-size-0),.XL\\:v-pb-size-0{padding-bottom:0px}:host(.XL\\:v-pr-size-0),.XL\\:v-pr-size-0{padding-right:0px}:host(.XL\\:v-pl-size-0),.XL\\:v-pl-size-0{padding-left:0px}:host(.XL\\:v-p-size-4),.XL\\:v-p-size-4{padding:4px}:host(.XL\\:v-px-size-4),.XL\\:v-px-size-4{padding-left:4px;padding-right:4px}:host(.XL\\:v-py-size-4),.XL\\:v-py-size-4{padding-top:4px;padding-bottom:4px}:host(.XL\\:v-pt-size-4),.XL\\:v-pt-size-4{padding-top:4px}:host(.XL\\:v-pb-size-4),.XL\\:v-pb-size-4{padding-bottom:4px}:host(.XL\\:v-pr-size-4),.XL\\:v-pr-size-4{padding-right:4px}:host(.XL\\:v-pl-size-4),.XL\\:v-pl-size-4{padding-left:4px}:host(.XL\\:v-p-size-8),.XL\\:v-p-size-8{padding:8px}:host(.XL\\:v-px-size-8),.XL\\:v-px-size-8{padding-left:8px;padding-right:8px}:host(.XL\\:v-py-size-8),.XL\\:v-py-size-8{padding-top:8px;padding-bottom:8px}:host(.XL\\:v-pt-size-8),.XL\\:v-pt-size-8{padding-top:8px}:host(.XL\\:v-pb-size-8),.XL\\:v-pb-size-8{padding-bottom:8px}:host(.XL\\:v-pr-size-8),.XL\\:v-pr-size-8{padding-right:8px}:host(.XL\\:v-pl-size-8),.XL\\:v-pl-size-8{padding-left:8px}:host(.XL\\:v-p-size-12),.XL\\:v-p-size-12{padding:12px}:host(.XL\\:v-px-size-12),.XL\\:v-px-size-12{padding-left:12px;padding-right:12px}:host(.XL\\:v-py-size-12),.XL\\:v-py-size-12{padding-top:12px;padding-bottom:12px}:host(.XL\\:v-pt-size-12),.XL\\:v-pt-size-12{padding-top:12px}:host(.XL\\:v-pb-size-12),.XL\\:v-pb-size-12{padding-bottom:12px}:host(.XL\\:v-pr-size-12),.XL\\:v-pr-size-12{padding-right:12px}:host(.XL\\:v-pl-size-12),.XL\\:v-pl-size-12{padding-left:12px}:host(.XL\\:v-p-size-16),.XL\\:v-p-size-16{padding:16px}:host(.XL\\:v-px-size-16),.XL\\:v-px-size-16{padding-left:16px;padding-right:16px}:host(.XL\\:v-py-size-16),.XL\\:v-py-size-16{padding-top:16px;padding-bottom:16px}:host(.XL\\:v-pt-size-16),.XL\\:v-pt-size-16{padding-top:16px}:host(.XL\\:v-pb-size-16),.XL\\:v-pb-size-16{padding-bottom:16px}:host(.XL\\:v-pr-size-16),.XL\\:v-pr-size-16{padding-right:16px}:host(.XL\\:v-pl-size-16),.XL\\:v-pl-size-16{padding-left:16px}:host(.XL\\:v-p-size-20),.XL\\:v-p-size-20{padding:20px}:host(.XL\\:v-px-size-20),.XL\\:v-px-size-20{padding-left:20px;padding-right:20px}:host(.XL\\:v-py-size-20),.XL\\:v-py-size-20{padding-top:20px;padding-bottom:20px}:host(.XL\\:v-pt-size-20),.XL\\:v-pt-size-20{padding-top:20px}:host(.XL\\:v-pb-size-20),.XL\\:v-pb-size-20{padding-bottom:20px}:host(.XL\\:v-pr-size-20),.XL\\:v-pr-size-20{padding-right:20px}:host(.XL\\:v-pl-size-20),.XL\\:v-pl-size-20{padding-left:20px}:host(.XL\\:v-p-size-24),.XL\\:v-p-size-24{padding:24px}:host(.XL\\:v-px-size-24),.XL\\:v-px-size-24{padding-left:24px;padding-right:24px}:host(.XL\\:v-py-size-24),.XL\\:v-py-size-24{padding-top:24px;padding-bottom:24px}:host(.XL\\:v-pt-size-24),.XL\\:v-pt-size-24{padding-top:24px}:host(.XL\\:v-pb-size-24),.XL\\:v-pb-size-24{padding-bottom:24px}:host(.XL\\:v-pr-size-24),.XL\\:v-pr-size-24{padding-right:24px}:host(.XL\\:v-pl-size-24),.XL\\:v-pl-size-24{padding-left:24px}:host(.XL\\:v-p-size-32),.XL\\:v-p-size-32{padding:32px}:host(.XL\\:v-px-size-32),.XL\\:v-px-size-32{padding-left:32px;padding-right:32px}:host(.XL\\:v-py-size-32),.XL\\:v-py-size-32{padding-top:32px;padding-bottom:32px}:host(.XL\\:v-pt-size-32),.XL\\:v-pt-size-32{padding-top:32px}:host(.XL\\:v-pb-size-32),.XL\\:v-pb-size-32{padding-bottom:32px}:host(.XL\\:v-pr-size-32),.XL\\:v-pr-size-32{padding-right:32px}:host(.XL\\:v-pl-size-32),.XL\\:v-pl-size-32{padding-left:32px}:host(.XL\\:v-p-size-40),.XL\\:v-p-size-40{padding:40px}:host(.XL\\:v-px-size-40),.XL\\:v-px-size-40{padding-left:40px;padding-right:40px}:host(.XL\\:v-py-size-40),.XL\\:v-py-size-40{padding-top:40px;padding-bottom:40px}:host(.XL\\:v-pt-size-40),.XL\\:v-pt-size-40{padding-top:40px}:host(.XL\\:v-pb-size-40),.XL\\:v-pb-size-40{padding-bottom:40px}:host(.XL\\:v-pr-size-40),.XL\\:v-pr-size-40{padding-right:40px}:host(.XL\\:v-pl-size-40),.XL\\:v-pl-size-40{padding-left:40px}:host(.XL\\:v-p-size-48),.XL\\:v-p-size-48{padding:48px}:host(.XL\\:v-px-size-48),.XL\\:v-px-size-48{padding-left:48px;padding-right:48px}:host(.XL\\:v-py-size-48),.XL\\:v-py-size-48{padding-top:48px;padding-bottom:48px}:host(.XL\\:v-pt-size-48),.XL\\:v-pt-size-48{padding-top:48px}:host(.XL\\:v-pb-size-48),.XL\\:v-pb-size-48{padding-bottom:48px}:host(.XL\\:v-pr-size-48),.XL\\:v-pr-size-48{padding-right:48px}:host(.XL\\:v-pl-size-48),.XL\\:v-pl-size-48{padding-left:48px}:host(.XL\\:v-p-size-64),.XL\\:v-p-size-64{padding:64px}:host(.XL\\:v-px-size-64),.XL\\:v-px-size-64{padding-left:64px;padding-right:64px}:host(.XL\\:v-py-size-64),.XL\\:v-py-size-64{padding-top:64px;padding-bottom:64px}:host(.XL\\:v-pt-size-64),.XL\\:v-pt-size-64{padding-top:64px}:host(.XL\\:v-pb-size-64),.XL\\:v-pb-size-64{padding-bottom:64px}:host(.XL\\:v-pr-size-64),.XL\\:v-pr-size-64{padding-right:64px}:host(.XL\\:v-pl-size-64),.XL\\:v-pl-size-64{padding-left:64px}:host(.XL\\:v-p-size-72),.XL\\:v-p-size-72{padding:72px}:host(.XL\\:v-px-size-72),.XL\\:v-px-size-72{padding-left:72px;padding-right:72px}:host(.XL\\:v-py-size-72),.XL\\:v-py-size-72{padding-top:72px;padding-bottom:72px}:host(.XL\\:v-pt-size-72),.XL\\:v-pt-size-72{padding-top:72px}:host(.XL\\:v-pb-size-72),.XL\\:v-pb-size-72{padding-bottom:72px}:host(.XL\\:v-pr-size-72),.XL\\:v-pr-size-72{padding-right:72px}:host(.XL\\:v-pl-size-72),.XL\\:v-pl-size-72{padding-left:72px}:host(.XL\\:v-p-size-80),.XL\\:v-p-size-80{padding:80px}:host(.XL\\:v-px-size-80),.XL\\:v-px-size-80{padding-left:80px;padding-right:80px}:host(.XL\\:v-py-size-80),.XL\\:v-py-size-80{padding-top:80px;padding-bottom:80px}:host(.XL\\:v-pt-size-80),.XL\\:v-pt-size-80{padding-top:80px}:host(.XL\\:v-pb-size-80),.XL\\:v-pb-size-80{padding-bottom:80px}:host(.XL\\:v-pr-size-80),.XL\\:v-pr-size-80{padding-right:80px}:host(.XL\\:v-pl-size-80),.XL\\:v-pl-size-80{padding-left:80px}:host(.XL\\:v-p-size-112),.XL\\:v-p-size-112{padding:112px}:host(.XL\\:v-px-size-112),.XL\\:v-px-size-112{padding-left:112px;padding-right:112px}:host(.XL\\:v-py-size-112),.XL\\:v-py-size-112{padding-top:112px;padding-bottom:112px}:host(.XL\\:v-pt-size-112),.XL\\:v-pt-size-112{padding-top:112px}:host(.XL\\:v-pb-size-112),.XL\\:v-pb-size-112{padding-bottom:112px}:host(.XL\\:v-pr-size-112),.XL\\:v-pr-size-112{padding-right:112px}:host(.XL\\:v-pl-size-112),.XL\\:v-pl-size-112{padding-left:112px}:host(.XL\\:v-p-size-2),.XL\\:v-p-size-2{padding:2px}:host(.XL\\:v-px-size-2),.XL\\:v-px-size-2{padding-left:2px;padding-right:2px}:host(.XL\\:v-py-size-2),.XL\\:v-py-size-2{padding-top:2px;padding-bottom:2px}:host(.XL\\:v-pt-size-2),.XL\\:v-pt-size-2{padding-top:2px}:host(.XL\\:v-pb-size-2),.XL\\:v-pb-size-2{padding-bottom:2px}:host(.XL\\:v-pr-size-2),.XL\\:v-pr-size-2{padding-right:2px}:host(.XL\\:v-pl-size-2),.XL\\:v-pl-size-2{padding-left:2px}}:host{display:none;box-sizing:border-box;overflow-y:auto;text-align:left;position:fixed;top:0px;left:0px;right:0px;bottom:0px;align-items:flex-start}.modal-dialog{margin-left:auto;margin-right:auto;margin-top:64px;margin-bottom:64px}:host(.align-center){align-items:center}.modal-container{background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));color:rgba(var(--v-text-primary, 32, 54, 69, 1));box-shadow:var(--v-shadow-modal, 0px 6px 40px 0px rgba(2, 2, 15, 0.04), 0px 4px 24px 0px rgba(2, 2, 15, 0.08), 0px 8px 80px 0px rgba(2, 2, 15, 0.16));border-radius:12px;box-sizing:border-box;pointer-events:auto;overflow:hidden}:host(.animation) .modal-container{animation-name:animatetop;animation-duration:0.4s}.vega-modal-header{display:flex;align-items:flex-start;flex-direction:row;gap:8px;padding-bottom:0px}.vega-modal-header.vega-modal-header-with-title,.vega-modal-header.vega-modal-header-with-icon{padding-bottom:16px}.vega-modal-header-with-content-scroll:not(.vega-modal-header-with-title):not(.vega-modal-header-with-icon){padding-top:0px;padding-bottom:0px}.vega-modal-header-with-content-scroll.vega-modal-header-with-icon,.vega-modal-header-with-content-scroll.vega-modal-header-with-title{box-shadow:var(--v-shadow-modal-header, 0px 1px 0px 0px rgba(45, 76, 97, 0.15))}.vega-modal-title{color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:24px;font-weight:700;line-height:32px;letter-spacing:0px;flex-grow:1;word-break:break-word}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-modal-title{font-family:\"Inter\", sans-serif;font-size:24px;font-weight:700;line-height:32px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-modal-title{font-family:\"Inter\", sans-serif;font-size:24px;font-weight:700;line-height:32px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-modal-title{font-family:\"Inter\", sans-serif;font-size:28px;font-weight:700;line-height:36px;letter-spacing:0px}}.vega-modal-close-btn{cursor:pointer}.vega-modal-content{padding-top:0px;padding-bottom:0px}.vega-modal-content-with-scroll{padding-top:24px;padding-bottom:24px;overflow:auto}.vega-modal-footer:not(.vega-modal-footer-with-slot){padding-top:0px}.vega-modal-footer-with-content-scroll:not(.vega-modal-footer-with-slot){padding-top:0px;padding-bottom:0px}.vega-modal-footer-with-content-scroll.vega-modal-footer-with-slot{box-shadow:var(--v-shadow-modal-footer, 0px -2px 8px 0px rgba(45, 76, 97, 0.2), 0px -1px 0px 0px rgba(45, 76, 97, 0.15))}.vega-modal-footer-with-content-scroll.vega-modal-footer-with-slot.vega-modal-footer-with-content-scroll-to-bottom{box-shadow:var(--v-shadow-modal-footer-no-scroll, 0px -1px 0px 0px rgba(45, 76, 97, 0.15))}@keyframes animatetop{from{top:-300px;opacity:0}to{top:0;opacity:1}}";
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const VegaModal = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.vegaClose = createEvent(this, "vegaClose", 7);
+    this.close = createEvent(this, "close", 7);
+    this.vegaOpen = createEvent(this, "vegaOpen", 7);
+    this.modalOpen = createEvent(this, "modalOpen", 7);
+    this.globalSlimmers = {};
+    /**
+     * The below method is e2e-test covered in
+     * @see{module:vega-modal-resize-e2e}
+     */
+    this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer({
+      callback: /* istanbul ignore next */ () => {
+        this.setModalWidth('update');
+        this.setContentMaxHeight();
+      },
+      isDeferred: true,
+    });
+    this.nestedModalController = new VegaNestedModalController();
+    this.openEventEmitter = createEventEmitSlimmer(VegaModal, VegaOpen);
+    this.closeEventEmitter = createEventEmitSlimmer(VegaModal, VegaClose);
+    this.childNodesEventPrevent = new ChildNodesEventPreventSlimmer([VegaOpen, VegaClose], () => this.modalContainer);
+    this.componentGlobalStyleSlimmer = new ComponentGlobalStyleSlimmer(vegaModalDisableBodyScrollCss);
+    this.deprecatedPropertySlimmer = createDeprecatedPropertySlimmer(VegaModal, 'isVerticallyCentered', 'isVerticallyCenter', false);
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaModalRuntimeMetricsPayloadDefinition);
+    this.isModalWidthSet = false;
+    /**
+     * Provides options for controlling the behavior of the backdrop.
+     * - `default`:
+     *      indicates that the user can close the modal
+     *      by clicking on the backdrop.
+     * - `static`:
+     *      means that the user cannot close the modal by
+     *      clicking on the backdrop.
+     * - `none`:
+     *      specifies that the backdrop will not be rendered.
+     *
+     * _Note_:
+     *    When changing this value, a page refresh is required
+     *    for the changes to take effect.
+     *
+     * @vegaVersion 1.0.6
+     */
+    this.backdrop = 'default';
+    /**
+     * Determines whether the modal is initially open.
+     *
+     * @vegaVersion 1.0.6
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.open = false;
+    /**
+     * Specifies whether the modal uses an animated transition
+     *    when it appears.
+     *
+     * @vegaVersion 1.0.11
+     */
+    this.animation = false;
+    /**
+     * Represents the title displayed within the modal.
+     *
+     * @vegaVersion 1.3.0
+     */
+    this.modalTitle = '';
+    /**
+     * Specifies the background color of the modal's backdrop.
+     *
+     * @vegaVersion 1.3.0
+     */
+    this.backdropColor = 'default';
+    /**
+     * Determines whether the modal is vertically centered
+     *    on the screen.
+     * @deprecated This property will be removed soon and replaced by prop isVerticallyCentered
+     *
+     * @vegaVersion 1.3.0
+     */
+    this.isVerticallyCenter = false;
+    /**
+     * Determines whether the modal is vertically centered
+     *    on the screen.
+     *
+     * @vegaVersion 2.2.0
+     */
+    this.isVerticallyCentered = false;
+    /**
+     * Determines whether the modal displays a close button to
+     *    allow hiding or closing of the modal.
+     *
+     * @vegaVersion 1.3.0
+     */
+    this.showCloseButton = true;
+    /**
+     * Specifies the amount of space or padding within the modal.
+     *
+     * It can be set as a ResponsiveType or any size value.
+     *
+     * @vegaVersion 1.0.10
+     */
+    this.padding = 'size-24';
+    /**
+     * Provides a callback function that is triggered when a user clicks the
+     *    close button located in the top right corner of the modal.
+     *
+     * If the callback function returns `true`, the modal will be closed.
+     *
+     * If the callback function returns `false` or does not return any value, the modal will remain open.
+     *
+     * @vegaVersion 1.22.0
+     */
+    this.handleClose = undefined;
+    /**
+     * The below method is e2e-test covered in
+     * @see{module:vega-modal-toggle-interactive-e2e}
+     */
+    /* istanbul ignore next */
+    this.closeModal = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!this.handleClose || this.handleClose()) {
+        this.open = false;
+      }
+    };
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-size-number-e2e}
+   * @see{module:vega-modal-size-responsive-e2e}
+   */
+  /* istanbul ignore next */
+  watchSize() {
+    this.setModalWidth('update');
+  }
+  watchOpen() {
+    this.toggle();
+  }
+  disconnectedCallback() {
+    this.open = false;
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-resize-e2e}
+   */
+  /* istanbul ignore next */
+  componentDidLoad() {
+    if (this.open) {
+      this.toggle();
+    }
+    if (getDeviceType() !== DeviceType.DESKTOP && this.backdrop !== 'none') {
+      this.disableBackdropTouchMove();
+    }
+    if (this.isContentScrollable) {
+      this.listenContentScroll();
+    }
+    this.setContentMaxHeight();
+  }
+  /**
+   * Clicking on a non-static current modal should close this modal, not other modals.
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-toggle-interactive-e2e}
+   */
+  /* istanbul ignore next */
+  listenDataTarget(e) {
+    /*
+     * vega-backdrop cannot be clicked and is completely covered by vega-modal. Click events cannot be added to the backdrop.
+     */
+    const target = e.composedPath()[0];
+    if (target.tagName === 'VEGA-MODAL' && this.backdrop === 'default' && target === this.host) {
+      this.open = false;
+    }
+    if (this.host.id &&
+      (target.getAttribute('data-target') === this.host.id ||
+        findParent(target, `[data-target=${this.host.id}]`))) {
+      e.preventDefault();
+      this.open = true;
+    }
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-toggle-interactive-e2e}
+   */
+  /* istanbul ignore next */
+  listenDataDismiss(e) {
+    const target = e.target.closest(`[data-dismiss='modal']`);
+    if (target) {
+      e.preventDefault();
+      this.open = false;
+    }
+  }
+  /**
+   * Invoke this method to show or hide the modal.
+   *
+   * @vegaVersion 1.0.6
+   */
+  /* The below method is e2e-test covered in
+   * @see{module:vega-modal-toggle-interactive-e2e}
+   */
+  /* istanbul ignore next
+   *
+   */
+  async modal(option) {
+    switch (option) {
+      case 'show':
+        this.open = true;
+        break;
+      case 'hide':
+        this.open = false;
+        break;
+    }
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, { class: {
+        'align-center': this.deprecatedPropertySlimmer.getValue() && this.open,
+        'animation': this.animation,
+      } }, h("div", { class: "modal-dialog" }, this.renderContainer())), this.host);
+  }
+  renderContainer() {
+    const padding = formatAndValidResponsiveToken(this.padding, 'padding');
+    return (h("div", { class: "modal-container", ref: (node) => (this.modalContainer = node) }, this.renderHeader(padding), this.renderContent(padding), this.renderFooter(padding)));
+  }
+  renderHeader(padding) {
+    return (h("div", { class: {
+        'vega-modal-header': true,
+        'vega-modal-header-with-title': this.hasModalTitle(),
+        'vega-modal-header-with-icon': this.showCloseButton,
+        'vega-modal-header-with-content-scroll': this.isContentScrollable(),
+        [padding]: true,
+      } }, this.renderTitle(), this.showCloseButton && this.renderCloseBtn()));
+  }
+  renderContent(padding) {
+    return (h("div", { class: {
+        'vega-modal-content': true,
+        'vega-modal-content-with-scroll': this.isContentScrollable(),
+        [padding]: true,
+      }, ref: (e) => (this.modalContent = e) }, h(Fragment, null, h("slot", null), h("slot", { name: "content" }), h("slot", { name: "modal-content" }))));
+  }
+  renderFooter(padding) {
+    return (h("div", { class: {
+        'vega-modal-footer': true,
+        'vega-modal-footer-with-slot': this.hasModalFooter(),
+        'vega-modal-footer-with-content-scroll': this.isContentScrollable(),
+        [padding]: true,
+      }, ref: (e) => (this.modalFooter = e) }, h(Fragment, null, h("slot", { name: "footer" }), h("slot", { name: "modal-footer" }))));
+  }
+  renderTitle() {
+    return (h("div", { class: "vega-modal-title" }, this.modalTitle ? (h("div", { innerHTML: this.modalTitle })) : (h(Fragment, null, h("slot", { name: "title" }), h("slot", { name: "modal-title" })))));
+  }
+  renderCloseBtn() {
+    return (h("div", { "aria-label": "Close Button", class: "vega-modal-close-btn", "data-dismiss": "modal", onClick: this.closeModal, role: 'button', tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick() }, h("vega-icon", { icon: "close", size: "size-16" })));
+  }
+  hasModalFooter() {
+    return (this.host.querySelector(`[slot='modal-footer']`) !== null ||
+      this.host.querySelector(`[slot='footer']`) !== null);
+  }
+  isContentScrollable() {
+    return Boolean(this.contentMaxHeight);
+  }
+  hasModalTitle() {
+    return (Boolean(this.modalTitle) ||
+      this.host.querySelector(`[slot='modal-title']`) !== null ||
+      this.host.querySelector(`[slot='title']`) !== null);
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-content-scroll-to-bottom}
+   */
+  /* istanbul ignore next */
+  listenContentScroll() {
+    this.modalContent.addEventListener('scroll', () => {
+      if (this.modalContent.scrollHeight - this.modalContent.scrollTop <=
+        this.modalContent.clientHeight) {
+        this.modalFooter.classList.add('vega-modal-footer-with-content-scroll-to-bottom');
+      }
+      else {
+        this.modalFooter.classList.remove('vega-modal-footer-with-content-scroll-to-bottom');
+      }
+    });
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-toggle-interactive-e2e}
+   */
+  /* istanbul ignore next */
+  toggle() {
+    this.open ? this.pushToModalStack() : this.deleteFromModalStack();
+    this.updateDocumentRootOverflow();
+    this.setBackdrop();
+    this.setModalZIndex();
+    this.setModalWidth();
+    this.emitEvent();
+    this.setModalVisibility();
+  }
+  setModalZIndex() {
+    if (this.open) {
+      InternalVegaZIndexManager.setZIndex(this.backdropRef, 'base');
+      InternalVegaZIndexManager.setZIndex(this.host, 'base');
+    }
+    else {
+      InternalVegaZIndexManager.removeZIndex(this.backdropRef, 'base');
+      InternalVegaZIndexManager.removeZIndex(this.host, 'base');
+      const length = this.getVisibleModalLength();
+      if (length > 0) {
+        InternalVegaZIndexManager.setZIndex(this.backdropRef, 'base');
+        InternalVegaZIndexManager.setZIndex(VegaModal.openedModalStack[length - 1], 'base');
+      }
+      this.removeBackdropWhileNoModalShow();
+    }
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-default-e2e}
+   * @see{module:vega-modal-size-number-e2e}
+   * @see{module:vega-modal-size-responsive-e2e}
+   * @see{module:vega-modal-resize-e2e}
+   * While call toggle method for modal show or hide, it will call this method.
+   * but we should really update the modal width while first initialize modal, window resize and size changed.
+   * So to avoid repeated calls by toggle, we add a flag as parameter,
+   */
+  /* istanbul ignore next */
+  setModalWidth(flag = 'initialize') {
+    if (this.isModalWidthSet && flag === 'initialize')
+      return;
+    const size = this.getModalSize();
+    const dialog = this.host.shadowRoot.querySelector('.modal-dialog');
+    typeof size === 'number'
+      ? (dialog.style['width'] = `${size}px`)
+      : (dialog.style['width'] = `${size}`);
+    this.isModalWidthSet = true;
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-content-max-height-responsive-e2e}
+   */
+  /* istanbul ignore next */
+  setContentMaxHeight() {
+    const maxHeight = ResponsiveFormatFacade.formatCustom(this.contentMaxHeight);
+    if (maxHeight) {
+      this.modalContent.style.maxHeight = `${maxHeight}px`;
+    }
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-toggle-interactive-e2e}
+   */
+  /* istanbul ignore next */
+  setModalVisibility() {
+    this.host.style['display'] = this.open ? 'flex' : 'none';
+  }
+  emitEvent() {
+    this.open ? this.openEventEmitter.emit() : this.closeEventEmitter.emit();
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-default-e2e}
+   * @see{module:vega-modal-size-number-e2e}
+   * @see{module:vega-modal-size-responsive-e2e}
+   * @see{module:vega-modal-resize-e2e}
+   * @see{module:vega-modal-default-width-S-320-e2e}
+   * @see{module:vega-modal-default-width-S-600-e2e}
+   */
+  /* istanbul ignore next */
+  getModalSize() {
+    const size = ResponsiveFormatFacade.format(this.size, 'size');
+    if (size) {
+      return size;
+    }
+    else {
+      return DefaultModalSize[getCurrentBreakpoint()];
+    }
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-backdrop-color-default-e2e}
+   * @see{module:vega-modal-backdrop-color-semi-e2e}
+   * @see{module:vega-modal-backdrop-color-none-e2e}
+   * @see{module:vega-modal-default-e2e}
+   */
+  /* istanbul ignore next */
+  setBackdrop() {
+    if (this.backdrop === 'none')
+      return;
+    let backdrop = document.querySelector('vega-backdrop.modal-backdrop');
+    if (!backdrop) {
+      backdrop = document.createElement('vega-backdrop');
+      backdrop.classList.add('modal-backdrop');
+      backdrop.color = VegaModal.backdropColorMap[this.backdropColor];
+      backdrop.visible = true;
+      document.querySelector('body').append(backdrop);
+    }
+    this.backdropRef = backdrop;
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-disconnected-callback-e2e }
+   */
+  /* istanbul ignore next */
+  removeBackdropWhileNoModalShow() {
+    if (this.getVisibleModalLength() === 0) {
+      this.backdropRef && this.backdropRef.remove();
+    }
+  }
+  //TODO: Record the nest modal by an array.
+  /**
+   * Get visible modal length
+   */
+  getVisibleModalLength() {
+    return VegaModal.openedModalStack.length;
+  }
+  /**
+   * In desktop, we should add 'overflow: hidden' to the body to prevent the body scroll.
+   */
+  updateDocumentRootOverflow() {
+    if (this.backdrop === 'none')
+      return;
+    if (this.open && this.getVisibleModalLength() === 1) {
+      document.body.classList.add('disable-scroll-in-desktop');
+    }
+    else if (!this.open && this.getVisibleModalLength() === 0) {
+      document.body.classList.remove('disable-scroll-in-desktop');
+    }
+  }
+  pushToModalStack() {
+    VegaModal.openedModalStack.push(this.host);
+  }
+  deleteFromModalStack() {
+    VegaModal.openedModalStack = VegaModal.openedModalStack.filter((modal) => modal !== this.host);
+  }
+  /**
+   * There are two situations in modal scrolling:
+   * 1. Scrolls the non-modal content part in vega-modal (e.g. backdrop, modal dialog).
+   * 2. Scrolls the modal content (if scrollable) in vega-modal.
+   * On the mobile side, we need to prevent scrolling in the area outside the modal content.
+   *
+   * TODO: If the modal content is too long, a scroll bar will appear and the body cannot be scrolled,
+   * but on the IOS side, the body content of the scrolling modal will occasionally appear scrolling.
+   * This problem is reproduced on the following websites, and there is no solution yet.
+   * https://v5.bootcss.com/docs/components/modal/
+   * https://mui.com/material-ui/react-dialog/
+   */
+  /* istanbul ignore next */
+  disableBackdropTouchMove() {
+    this.host.addEventListener('touchstart', (e) => {
+      this.touchStartY = e.targetTouches[0].pageY;
+    }, { capture: true });
+    this.host.addEventListener('touchmove', (e) => {
+      const isScrolledTop = this.host.scrollTop <= 0;
+      const isScrolledBottom = this.host.scrollHeight - this.host.scrollTop <= this.host.clientHeight;
+      const isToBottomMove = this.touchStartY < e.targetTouches[0].pageY;
+      const isToTopMove = this.touchStartY > e.targetTouches[0].pageY;
+      if (e.target === this.host &&
+        ((isScrolledTop && isToBottomMove) || (isScrolledBottom && isToTopMove))) {
+        e.preventDefault();
+      }
+    }, { capture: true });
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "size": ["watchSize"],
+    "open": ["watchOpen"]
+  }; }
+};
+VegaModal.openedModalStack = [];
+VegaModal.backdropColorMap = {
+  default: 'bg-backdrop-modal',
+  semi: 'bg-backdrop-popover',
+  none: 'bg-transparent',
+};
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaModal.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "pageResizeObserverSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "nestedModalController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "openEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "closeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "childNodesEventPrevent", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "componentGlobalStyleSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "deprecatedPropertySlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+VegaModal.style = vegaModalCss;
+
+export { VegaDialog as vega_dialog, VegaModal as vega_modal };