@heartlandone/vega 2.80.0 → 2.81.0

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

@@ -125,7 +125,7 @@ export class VegaDivider {
       "mutable": false,
       "complexType": {
         "original": "ResponsiveType<MarginType>",
-        "resolved": "\"0\" | \"size-112\" | \"size-12\" | \"size-16\" | \"size-2\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-4\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-8\" | \"size-80\" | { S?: MarginType; M?: MarginType; L?: MarginType; XL?: MarginType; default?: MarginType; } | { left?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; right?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; top?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; bottom?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; x?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; y?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; }",
+        "resolved": "\"0\" | \"auto\" | \"size-112\" | \"size-12\" | \"size-16\" | \"size-2\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-4\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-8\" | \"size-80\" | { S?: MarginType; M?: MarginType; L?: MarginType; XL?: MarginType; default?: MarginType; } | { left?: MarginValueType; right?: MarginValueType; top?: MarginValueType; bottom?: MarginValueType; x?: MarginValueType; y?: MarginValueType; }",
         "references": {
           "ResponsiveType": {
             "location": "import",

package/dist/collection/components/vega-dropdown/slimmers/controllers/vega-dropdown-appender-controller.js

@@ -4,9 +4,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   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, MapToComponentMethod, methodPlaceholder } from 'vega-slimmer/core';
+import { createDynamicSlimmer, InjectVegaSlimmer, MapToComponentField, MapToComponentMethod, methodPlaceholder, } from 'vega-slimmer/core';
 import { ElementAppenderSlimmer } from '../../../../helpers/slimmers/element-appender/element-appender-slimmer';
 import { getDeepActiveElementInShadow } from '../../../../utils/ui';
+import { AriaDialogFocusableTrapSlimmer } from '../../../../helpers/slimmers/aria-dialog-focusable-trap-slimmer';
 /**
  * The `VegaDropdownAppenderController` class is responsible for managing the visibility and
  * behavior of a dropdown component.
@@ -18,6 +19,18 @@ export class VegaDropdownAppenderController extends ElementAppenderSlimmer {
    */
   constructor() {
     super(() => this.generateShowConfigFactory(), () => this.trigger);
+    this.ariaDialogFocusableTrapSlimmer = createDynamicSlimmer(VegaDropdownAppenderController, AriaDialogFocusableTrapSlimmer, [], [
+      { mapFrom: 'show', mapTo: 'show' },
+      { mapFrom: 'hide', mapTo: 'hide' },
+      { mapFrom: 'ariaComponentDidLoad', mapTo: 'componentDidLoad' },
+    ], [
+      {
+        // eslint-disable-next-line jsdoc/require-jsdoc
+        triggerEl: () => this.host,
+        // eslint-disable-next-line jsdoc/require-jsdoc
+        dialogEl: () => this.renderer.getDropdownContentBoxRef(),
+      },
+    ]);
     this.lastFocusedElement = null;
   }
   /**
@@ -32,6 +45,20 @@ export class VegaDropdownAppenderController extends ElementAppenderSlimmer {
   disconnectedCallback() {
     methodPlaceholder();
   }
+  /**
+   * Component lifecycle - [componentDidRender]{@link VegaPopover.componentDidRender}
+   */
+  componentDidRender() {
+    methodPlaceholder();
+  }
+  /**
+   * This controller extends `ElementAppenderSlimmer`, which already uses `componentDidLoad`.
+   * To avoid overriding the parent lifecycle mapping, we expose `ariaComponentDidLoad`
+   * here and map it to `componentDidLoad` for the ARIA slimmer.
+   */
+  ariaComponentDidLoad() {
+    methodPlaceholder();
+  }
   /**
    * The function `watchIsDropdownShow` checks if the dropdown is shown and performs certain actions
    * based on the result.
@@ -162,12 +189,21 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "isScreenPosition", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDropdownAppenderController.prototype, "ariaDialogFocusableTrapSlimmer", void 0);
 __decorate([
   MapToComponentMethod('connectedCallback')
 ], VegaDropdownAppenderController.prototype, "connectedCallback", null);
 __decorate([
   MapToComponentMethod('disconnectedCallback')
 ], VegaDropdownAppenderController.prototype, "disconnectedCallback", null);
+__decorate([
+  MapToComponentMethod('componentDidRender')
+], VegaDropdownAppenderController.prototype, "componentDidRender", null);
+__decorate([
+  MapToComponentMethod('componentDidLoad')
+], VegaDropdownAppenderController.prototype, "ariaComponentDidLoad", null);
 __decorate([
   MapToComponentMethod('watchIsDropdownShow')
 ], VegaDropdownAppenderController.prototype, "watchIsDropdownShow", null);

package/dist/collection/components/vega-dropdown/slimmers/renderers/vega-dropdown-renderer.js

@@ -57,7 +57,7 @@ export class VegaDropdownRenderer extends VegaSlimmer {
   }
   renderDropdown() {
     const eventPreventFlag = this.host && this.host.dataset.vegaNoEventPrevent === 'true' ? 'true' : 'false';
-    return (h("vega-dropdown-content-box", { ref: (e) => (this.dropdownContentBoxRef = e), style: { maxHeight: `${this.maxHeight}px` }, "data-parent-ref": this.host, "data-vega-no-event-prevent": eventPreventFlag },
+    return (h("vega-dropdown-content-box", { ref: (e) => (this.dropdownContentBoxRef = e), style: { maxHeight: `${this.maxHeight}px` }, "data-parent-ref": this.host, role: "dialog", "aria-modal": "true", "aria-label": "Dropdown menu list", "data-vega-no-event-prevent": eventPreventFlag },
       h("div", { ref: (e) => (this.dropdownRef = e), class: "vega-dropdown" },
         h("div", { class: "vega-dropdown-actions" },
           this.resetRenderer.render(),
@@ -133,6 +133,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDropdownRenderer.prototype, "resetRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownRenderer.prototype, "isDropdownShow", void 0);
 __decorate([
   MapToComponentMethod('componentDidRender')
 ], VegaDropdownRenderer.prototype, "componentDidRender", null);

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

@@ -591,6 +591,43 @@
   margin-left: 2px;
 }
 
+:host(.v-m-auto),
+.v-m-auto {
+  margin: auto;
+}
+
+:host(.v-mx-auto),
+.v-mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+:host(.v-my-auto),
+.v-my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+:host(.v-mt-auto),
+.v-mt-auto {
+  margin-top: auto;
+}
+
+:host(.v-mb-auto),
+.v-mb-auto {
+  margin-bottom: auto;
+}
+
+:host(.v-mr-auto),
+.v-mr-auto {
+  margin-right: auto;
+}
+
+:host(.v-ml-auto),
+.v-ml-auto {
+  margin-left: auto;
+}
+
 @media (min-width: 320px) {
   :host(.S\:v-m-0),
   .S\:v-m-0 {
@@ -1072,6 +1109,36 @@
   .S\:v-ml-size-2 {
     margin-left: 2px;
   }
+  :host(.S\:v-m-auto),
+  .S\:v-m-auto {
+    margin: auto;
+  }
+  :host(.S\:v-mx-auto),
+  .S\:v-mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  :host(.S\:v-my-auto),
+  .S\:v-my-auto {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+  :host(.S\:v-mt-auto),
+  .S\:v-mt-auto {
+    margin-top: auto;
+  }
+  :host(.S\:v-mb-auto),
+  .S\:v-mb-auto {
+    margin-bottom: auto;
+  }
+  :host(.S\:v-mr-auto),
+  .S\:v-mr-auto {
+    margin-right: auto;
+  }
+  :host(.S\:v-ml-auto),
+  .S\:v-ml-auto {
+    margin-left: auto;
+  }
 }
 @media (min-width: 768px) {
   :host(.M\:v-m-0),
@@ -1554,6 +1621,36 @@
   .M\:v-ml-size-2 {
     margin-left: 2px;
   }
+  :host(.M\:v-m-auto),
+  .M\:v-m-auto {
+    margin: auto;
+  }
+  :host(.M\:v-mx-auto),
+  .M\:v-mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  :host(.M\:v-my-auto),
+  .M\:v-my-auto {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+  :host(.M\:v-mt-auto),
+  .M\:v-mt-auto {
+    margin-top: auto;
+  }
+  :host(.M\:v-mb-auto),
+  .M\:v-mb-auto {
+    margin-bottom: auto;
+  }
+  :host(.M\:v-mr-auto),
+  .M\:v-mr-auto {
+    margin-right: auto;
+  }
+  :host(.M\:v-ml-auto),
+  .M\:v-ml-auto {
+    margin-left: auto;
+  }
 }
 @media (min-width: 1024px) {
   :host(.L\:v-m-0),
@@ -2036,6 +2133,36 @@
   .L\:v-ml-size-2 {
     margin-left: 2px;
   }
+  :host(.L\:v-m-auto),
+  .L\:v-m-auto {
+    margin: auto;
+  }
+  :host(.L\:v-mx-auto),
+  .L\:v-mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  :host(.L\:v-my-auto),
+  .L\:v-my-auto {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+  :host(.L\:v-mt-auto),
+  .L\:v-mt-auto {
+    margin-top: auto;
+  }
+  :host(.L\:v-mb-auto),
+  .L\:v-mb-auto {
+    margin-bottom: auto;
+  }
+  :host(.L\:v-mr-auto),
+  .L\:v-mr-auto {
+    margin-right: auto;
+  }
+  :host(.L\:v-ml-auto),
+  .L\:v-ml-auto {
+    margin-left: auto;
+  }
 }
 @media (min-width: 1440px) {
   :host(.XL\:v-m-0),
@@ -2518,6 +2645,36 @@
   .XL\:v-ml-size-2 {
     margin-left: 2px;
   }
+  :host(.XL\:v-m-auto),
+  .XL\:v-m-auto {
+    margin: auto;
+  }
+  :host(.XL\:v-mx-auto),
+  .XL\:v-mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  :host(.XL\:v-my-auto),
+  .XL\:v-my-auto {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+  :host(.XL\:v-mt-auto),
+  .XL\:v-mt-auto {
+    margin-top: auto;
+  }
+  :host(.XL\:v-mb-auto),
+  .XL\:v-mb-auto {
+    margin-bottom: auto;
+  }
+  :host(.XL\:v-mr-auto),
+  .XL\:v-mr-auto {
+    margin-right: auto;
+  }
+  :host(.XL\:v-ml-auto),
+  .XL\:v-ml-auto {
+    margin-left: auto;
+  }
 }
 /* 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 */
 :host(.v-gap-0),

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

@@ -108,7 +108,7 @@ export class VegaFlex {
       "mutable": false,
       "complexType": {
         "original": "ResponsiveType<MarginType>",
-        "resolved": "\"0\" | \"size-112\" | \"size-12\" | \"size-16\" | \"size-2\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-4\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-8\" | \"size-80\" | { S?: MarginType; M?: MarginType; L?: MarginType; XL?: MarginType; default?: MarginType; } | { left?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; right?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; top?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; bottom?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; x?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; y?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; }",
+        "resolved": "\"0\" | \"auto\" | \"size-112\" | \"size-12\" | \"size-16\" | \"size-2\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-4\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-8\" | \"size-80\" | { S?: MarginType; M?: MarginType; L?: MarginType; XL?: MarginType; default?: MarginType; } | { left?: MarginValueType; right?: MarginValueType; top?: MarginValueType; bottom?: MarginValueType; x?: MarginValueType; y?: MarginValueType; }",
         "references": {
           "ResponsiveType": {
             "location": "import",

package/dist/collection/components/vega-input/slimmers/renderers/vega-input-input-renderer.js

@@ -72,7 +72,7 @@ export class VegaInputInputRenderer extends VegaSlimmer {
   }
   render() {
     return (h("div", { class: "vega-input-input" },
-      h("input", Object.assign({ part: "input", name: this.name, type: this.getInputType(), autoComplete: this.autocomplete, inputmode: this.inputmode, readOnly: this.readOnly, value: this.value, ref: this.setInputRef, placeholder: this.placeholder, disabled: this.disabled, minLength: this.minLength, maxLength: this.maxLength, 
+      h("input", Object.assign({ part: "input", name: this.name, type: this.getInputType(), autoComplete: this.autocomplete, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, readOnly: this.readOnly, value: this.value, ref: this.setInputRef, placeholder: this.placeholder, disabled: this.disabled, minLength: this.minLength, maxLength: this.maxLength, 
         /* eslint-disable-next-line react/jsx-no-bind */
         onBlur: (e) => this.handleInputBlur(e), 
         /* eslint-disable-next-line react/jsx-no-bind */
@@ -137,6 +137,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaInputInputRenderer.prototype, "inputmode", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputInputRenderer.prototype, "enterkeyhint", void 0);
 __decorate([
   MapToComponentField()
 ], VegaInputInputRenderer.prototype, "readOnly", void 0);

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

@@ -761,6 +761,31 @@ export class VegaInput {
       "attribute": "inputmode",
       "reflect": false
     },
+    "enterkeyhint": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "InputEnterKeyHintTypes",
+        "resolved": "\"done\" | \"enter\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\"",
+        "references": {
+          "InputEnterKeyHintTypes": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.81.0"
+          }],
+        "text": "Configures the action label (or icon) to present for the enter key on virtual keyboards.\n\n- `'enter'` \u2014 Insert a new line.\n- `'done'` \u2014 Nothing more to input, close the virtual keyboard.\n- `'go'` \u2014 Navigate to the target of the typed text.\n- `'next'` \u2014 Move to the next field that will accept text.\n- `'previous'` \u2014 Move to the previous field that will accept text.\n- `'search'` \u2014 Execute a search query.\n- `'send'` \u2014 Deliver the content (e.g. a message).\n\nSee https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/enterkeyhint for more details."
+      },
+      "attribute": "enterkeyhint",
+      "reflect": false
+    },
     "readOnly": {
       "type": "boolean",
       "mutable": false,

package/dist/collection/components/vega-modal/slimmers/controllers/vega-modal-layout-controller.js

@@ -26,6 +26,7 @@ export class VegaModalLayoutController extends VegaSlimmer {
       // eslint-disable-next-line jsdoc/require-jsdoc
       () => {
         this.setModalWidth('update');
+        this.setModalHeight();
         this.setContentMaxHeight();
       },
       isDeferred: true,
@@ -36,6 +37,7 @@ export class VegaModalLayoutController extends VegaSlimmer {
    * Component lifecycle - [connectedCallback]
    */
   componentDidLoad() {
+    this.setModalHeight();
     this.setContentMaxHeight();
   }
   /*
@@ -55,6 +57,12 @@ export class VegaModalLayoutController extends VegaSlimmer {
   watchContentMaxHeight() {
     this.setContentMaxHeight();
   }
+  /**
+   * Listen watchHeight method to be called
+   */
+  watchHeight() {
+    this.setModalHeight();
+  }
   /*
    * The below method is e2e-test covered in
    * @see{module:vega-modal-default-e2e}
@@ -75,12 +83,34 @@ export class VegaModalLayoutController extends VegaSlimmer {
     if (this.isModalWidthSet && flag === 'initialize')
       return;
     const size = this.getModalSize();
-    const dialog = this.host.shadowRoot.querySelector('.modal-dialog');
+    const dialog = this.renderer.getModalDialogRef();
     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-height-e2e}
+   */
+  /* istanbul ignore next */
+  /**
+   * Set height of modal.
+   */
+  setModalHeight() {
+    const height = ResponsiveFormatFacade.formatCustom(this.height);
+    const dialog = this.renderer.getModalDialogRef();
+    if (!dialog)
+      return;
+    if (typeof height === 'number' || typeof height === 'string') {
+      dialog.style.height = parseToPixelString(height);
+      dialog.classList.add('with-height');
+    }
+    else {
+      dialog.style.removeProperty('height');
+      dialog.classList.remove('with-height');
+    }
+  }
   /*
    * The below method is e2e-test covered in
    * @see{module:vega-modal-content-max-height-responsive-e2e}
@@ -129,6 +159,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaModalLayoutController.prototype, "size", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalLayoutController.prototype, "height", void 0);
 __decorate([
   MapToComponentField()
 ], VegaModalLayoutController.prototype, "renderer", void 0);
@@ -144,3 +177,6 @@ __decorate([
 __decorate([
   MapToComponentMethod('watchContentMaxHeight')
 ], VegaModalLayoutController.prototype, "watchContentMaxHeight", null);
+__decorate([
+  MapToComponentMethod('watchHeight')
+], VegaModalLayoutController.prototype, "watchHeight", null);

package/dist/collection/components/vega-modal/slimmers/renderers/vega-modal-renderer.js

@@ -23,15 +23,22 @@ export class VegaModalRenderer extends VegaSlimmer {
   getModalFooterRef() {
     return this.modalFooter;
   }
+  getModalDialogRef() {
+    return this.modalDialog;
+  }
   getModalContainerRef() {
     return this.modalContainer;
   }
   render() {
+    const margin = formatAndValidResponsiveToken(this.margin, 'margin');
     return (h(Host, { class: {
         'align-center': this.deprecatedPropertySlimmer.getValue() && this.openState.isOpen,
         'animation': this.animation,
       } },
-      h("div", { class: "modal-dialog", role: "dialog", "aria-modal": "true", "aria-labelledby": this.titleId, tabIndex: -1 }, this.renderContainer())));
+      h("div", { class: {
+          'modal-dialog': true,
+          [margin]: !!margin,
+        }, role: "dialog", "aria-modal": "true", "aria-labelledby": this.titleId, tabIndex: -1, ref: (node) => (this.modalDialog = node) }, this.renderContainer())));
   }
   renderContainer() {
     const padding = formatAndValidResponsiveToken(this.padding, 'padding');
@@ -110,6 +117,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaModalRenderer.prototype, "padding", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalRenderer.prototype, "margin", void 0);
 __decorate([
   MapToComponentField()
 ], VegaModalRenderer.prototype, "showCloseButton", void 0);