@heartlandone/vega-sandbox-pr-1475-b1e358890f4e71c36ade3ba715f51e7030022002 2.26.0

package/dist/collection/components/vega-dialog/vega-dialog.css

@@ -0,0 +1,64 @@
+/* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */
+/**
+ * Deprecated. Not for use in new websites.
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word
+ */
+/* This file is generated by vega-design 2.0.77 */
+: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;
+  }
+}

package/dist/collection/components/vega-dialog/vega-dialog.js

@@ -0,0 +1,331 @@
+var __decorate = (this && this.__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;
+};
+import { Component, Element, h, Host, Prop, State } from '@stencil/core';
+import { sanitizeVegaComponent } from '../../utils/component';
+import { getCurrentBreakpoint } from '../../utils/public-api';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
+import { PageResizeObserverSlimmer } from '../../helpers/slimmers/page-resize-observer-slimmer';
+import { DomNodeSubjectObserverFactory } from '../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaClick, VegaClose } from '../../helpers/event-manager/event-id/vega-event-id';
+import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
+/**
+ * @version 1.24.0
+ */
+export class VegaDialog {
+  constructor() {
+    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.
+     *
+     * @version 1.24.0
+     */
+    this.type = 'default';
+    /**
+     * Determines whether the cancel button should be displayed.
+     *
+     * @version 1.24.0
+     */
+    this.showCancel = true;
+    /**
+     * Represents a dictionary that contains the configuration options
+     *    for the modal component used to display the dialog.
+     *
+     * @version 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();
+  }
+  static get is() { return "vega-dialog"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-dialog.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-dialog.css"]
+  }; }
+  static get properties() { return {
+    "dialogTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.24.0"
+          }],
+        "text": "Specifies the title of the dialog."
+      },
+      "attribute": "dialog-title",
+      "reflect": false
+    },
+    "content": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.24.0"
+          }],
+        "text": "Specifies the text content of the dialog."
+      },
+      "attribute": "content",
+      "reflect": false
+    },
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'default' | 'danger'",
+        "resolved": "\"danger\" | \"default\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.24.0"
+          }],
+        "text": "Specifies the type of the dialog.\n\nUse the value `danger` when the dialog's primary action is destructive."
+      },
+      "attribute": "type",
+      "reflect": false,
+      "defaultValue": "'default'"
+    },
+    "okButton": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaDialogActionButtonProps",
+        "resolved": "{ size?: ResponsiveType<VegaButtonSize>; icon?: string; label?: string; disabled?: boolean; iconAlign?: VegaButtonIconAlign; variant?: VegaButtonVariant; }",
+        "references": {
+          "VegaDialogActionButtonProps": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.24.0"
+          }],
+        "text": "Represents a dictionary that contains the configuration options\n   for the action button in the dialog."
+      }
+    },
+    "handleOk": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaDialogAction",
+        "resolved": "(e: CustomEvent<void>) => boolean",
+        "references": {
+          "VegaDialogAction": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.24.0"
+          }],
+        "text": "Represents the function that will be executed when the\n   user clicks the action button in the dialog."
+      }
+    },
+    "cancelButton": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaDialogActionButtonProps",
+        "resolved": "{ size?: ResponsiveType<VegaButtonSize>; icon?: string; label?: string; disabled?: boolean; iconAlign?: VegaButtonIconAlign; variant?: VegaButtonVariant; }",
+        "references": {
+          "VegaDialogActionButtonProps": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.24.0"
+          }],
+        "text": "Represents a dictionary that contains the configuration options\n   for the cancel button in the dialog."
+      }
+    },
+    "handleCancel": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaDialogAction",
+        "resolved": "(e: CustomEvent<void>) => boolean",
+        "references": {
+          "VegaDialogAction": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.24.0"
+          }],
+        "text": "Represents the function that will be executed when the user\n   clicks the cancel button in the dialog."
+      }
+    },
+    "showCancel": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.24.0"
+          }],
+        "text": "Determines whether the cancel button should be displayed."
+      },
+      "attribute": "show-cancel",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "modalProps": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Partial<VegaComponentInterface<HTMLVegaModalElement>>",
+        "resolved": "{ size?: ResponsiveType<SizeType>; animation?: boolean; backdrop?: VegaModalBackdrop; backdropColor?: VegaModalBackdropColor; contentMaxHeight?: ResponsiveType<number>; handleClose?: () => boolean; isVerticallyCenter?: boolean; isVerticallyCentered?: boolean; modal?: (option: \"hide\" | \"show\") => Promise<void>; modalTitle?: string; open?: boolean; padding?: ResponsiveType<PaddingType>; showCloseButton?: boolean; }",
+        "references": {
+          "Partial": {
+            "location": "global"
+          },
+          "VegaComponentInterface": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          },
+          "HTMLVegaModalElement": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.24.0"
+          }],
+        "text": "Represents a dictionary that contains the configuration options\n   for the modal component used to display the dialog."
+      },
+      "defaultValue": "{}"
+    }
+  }; }
+  static get states() { return {
+    "currentBreakpoint": {}
+  }; }
+  static get elementRef() { return "host"; }
+}
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaDialog.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDialog.prototype, "pageResizeObserverSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDialog.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);

package/dist/collection/components/vega-divider/interface.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/vega-divider/slimmers/controllers/vega-divider-size-controller.js

@@ -0,0 +1,62 @@
+var __decorate = (this && this.__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;
+};
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import responsiveFormatFacade from '../../../../helpers/formatter/responsive-map-formatter/responsive-format-facade';
+import { Spacing } from '../../../../constants/public-api';
+/**
+ * The divider size controller.
+ */
+export class VegaDividerSizeController extends VegaSlimmer {
+  /**
+   * The function `getSize` adjusts the height or width of an element based on its
+   * direction.
+   *
+   * @returns {VegaDividerSizeType} The current size value.
+   */
+  getSize() {
+    const size = {};
+    const direction = responsiveFormatFacade.formatCustom(this.direction);
+    const margin = responsiveFormatFacade.formatCustom(this.margin);
+    if (direction === 'vertical') {
+      size.height = `calc(100% - ${this.getDirectionMargin(margin, 'top')}px - ${this.getDirectionMargin(margin, 'bottom')}px)`;
+    }
+    else {
+      size.width = `calc(100% - ${this.getDirectionMargin(margin, 'left')}px - ${this.getDirectionMargin(margin, 'right')}px)`;
+    }
+    return size;
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-divider-size-in-horizontal-e2e}
+   * @see{module:vega-divider-size-in-vertical-e2e}
+   */
+  /* istanbul ignore next */
+  /**
+   * Get the direction margin.
+   *
+   * @param {MarginType} margin - The current margin of divider.
+   * @param {SpacingDirection} direction - The direction of margin.
+   * @returns {number} The current margin value.
+   */
+  getDirectionMargin(margin, direction) {
+    const directionMargin = typeof margin === 'string'
+      ? margin
+      : ['top', 'bottom'].includes(direction)
+        ? margin.y || margin[direction]
+        : margin.x || margin[direction];
+    return directionMargin ? Spacing[directionMargin] : 0;
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaDividerSizeController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDividerSizeController.prototype, "direction", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDividerSizeController.prototype, "margin", void 0);