@globalpayments/vega 2.28.1 → 2.29.0

package/dist/collection/components/vega-sidenav/vega-sidenav-group/vega-sidenav-group.js

@@ -0,0 +1,152 @@
+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 { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
+import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimmers/component-usage-runtime-metrics';
+import { sanitizeVegaComponent } from '../../../utils/component';
+import ChangeManager from '../../../helpers/change-manager/change-manager';
+import { Observer } from '../../../helpers/change-manager/observer/observer';
+import { SIDENAV_LINK_SELECTED_TOPIC } from '../../../helpers/change-manager/subject/static-subject/static-subject-title';
+import { createEnterKeyHandlerToTriggerClick } from '../../../utils/accessibility';
+import { VegaSidenavGroupSubStateController } from './slimmers/controllers/vega-sidenav-group-sub-state-controller';
+import { isHTMLVegaSidenavLinkElement } from '../utils';
+/**
+ * @deprecated This component will be removed soon, please consider using `vega-left-nav-group` component instead.
+ * @vegaVersion 2.29.0
+ */
+export class VegaSidenavGroup {
+  constructor() {
+    this.subStateObserverSlimmer = new VegaSidenavGroupSubStateController();
+    this.globalSlimmers = {};
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.openState = 'close';
+    /**
+     * Specifies the text that serves as the label or title
+     *    for the side navigation group in the sidebar.
+     *
+     * @vegaVersion 2.29.0
+     */
+    this.label = '';
+    /**
+     * The below method is e2e-test covered in
+     * @see{module:vega-sidenav-group-toggle}
+     */
+    this.handleClick = (e) => {
+      const currentTarget = e.currentTarget;
+      if (currentTarget && currentTarget.dataset.root === '$1') {
+        e.preventDefault();
+        currentTarget.closest('.vega-li-main').classList.toggle('open');
+      }
+    };
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-group-e2e-disconnected}
+   */
+  /* istanbul ignore next */
+  disconnectedCallback() {
+    ChangeManager.unregister(SIDENAV_LINK_SELECTED_TOPIC, this.observer);
+  }
+  componentWillLoad() {
+    this.observer = new Observer(isHTMLVegaSidenavLinkElement, this.observerListener.bind(this));
+    ChangeManager.register(SIDENAV_LINK_SELECTED_TOPIC, this.observer);
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, null,
+      h("div", { class: { 'vega-li-main': true, 'sidenav-open': this.openState !== 'close' }, ref: (ref) => (this.groupContainer = ref) },
+        h("a", { href: `#${this.label}`, role: 'button', tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick(), "data-root": "$1", onClick: this.handleClick, "aria-label": this.label || 'No label defined' },
+          h("div", { class: "vega-links-icon" },
+            h("div", { class: "prefix-icon" },
+              h("vega-icon", { icon: this.icon, size: "size-24" }))),
+          h("span", { class: "vega-links-name" }, this.label),
+          h("div", { class: "suffix-icons" },
+            h("vega-icon", { icon: "chevron-down", size: "size-12" }),
+            h("vega-icon", { icon: "chevron-up", size: "size-12" }))),
+        h("div", { class: "vega-nav-list vega-nav-list-sub" },
+          h("slot", null)))), this.host);
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-group-observer-with-selected}
+   */
+  /* istanbul ignore next */
+  observerListener(castInput) {
+    const hasSelectedLinkItem = this.host.contains(castInput);
+    if (hasSelectedLinkItem) {
+      this.groupContainer.querySelector('a').classList.add('sub-selected');
+      this.groupContainer.classList.add('open');
+    }
+    else {
+      this.groupContainer.querySelector('a').classList.remove('sub-selected');
+      this.groupContainer.classList.remove('open');
+    }
+  }
+  static get is() { return "vega-sidenav-group"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-sidenav-group.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-sidenav-group.css"]
+  }; }
+  static get properties() { return {
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.29.0"
+          }],
+        "text": "Represents the icon attached to the side navigation\n   group header link."
+      },
+      "attribute": "icon",
+      "reflect": false
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.29.0"
+          }],
+        "text": "Specifies the text that serves as the label or title\n   for the side navigation group in the sidebar."
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "''"
+    }
+  }; }
+  static get states() { return {
+    "openState": {}
+  }; }
+  static get elementRef() { return "host"; }
+}
+__decorate([
+  InjectVegaSlimmer()
+], VegaSidenavGroup.prototype, "subStateObserverSlimmer", void 0);
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaSidenavGroup.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSidenavGroup.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);

package/dist/collection/components/vega-sidenav/vega-sidenav-link/slimmers/controllers/vega-sidenav-link-sub-state.controller.js

@@ -0,0 +1,28 @@
+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 } from 'vega-slimmer/core';
+import { SubStateObserverSlimmer } from '../../../../../helpers/slimmers/sub-state/sub-state-observer-slimmer';
+/** The class `VegaSidenavLinkSubStateController` is a TypeScript class that observes and manages sub-states for a sidenav link component. */
+export class VegaSidenavLinkSubStateController extends SubStateObserverSlimmer {
+  /**
+   * The constructor function initializes a sidenav with specified subStates in TypeScript.
+   */
+  constructor() {
+    super({
+      parent: 'vega-sidenav',
+      subStates: [
+        {
+          subStateName: 'openState',
+          parentStateName: 'openState',
+        },
+      ],
+    });
+  }
+}
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaSidenavLinkSubStateController.prototype, "openState", void 0);

package/dist/collection/components/vega-sidenav/vega-sidenav-link/vega-sidenav-link.css

@@ -0,0 +1,136 @@
+/* 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 */ /* 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
+ */
+:host {
+  display: block;
+  margin-top: 4px;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  width: 100%;
+  box-sizing: border-box;
+}
+:host a {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  overflow: hidden;
+  color: rgba(var(--v-text-sidebar-link, 188, 186, 213, 1));
+  cursor: pointer;
+  text-decoration: none;
+  border-radius: 8px;
+  box-sizing: border-box;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+:host a.selected {
+  color: rgba(var(--v-text-sidebar-link-selected, 252, 252, 252, 1));
+  background: transparent;
+}
+:host .vega-links-icon {
+  padding: 8px;
+  box-sizing: border-box;
+}
+:host a.selected .vega-links-icon {
+  border-radius: 8px;
+  background-color: rgba(var(--v-bg-sidebar-item-selected, 19, 98, 226, 0.4));
+}
+:host a .vega-links-icon > div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  border-radius: 8px;
+  height: 100%;
+  width: 100%;
+}
+:host a.selected .vega-links-icon > div {
+  background-color: rgba(var(--v-bg-action, 19, 98, 226, 1));
+}
+:host .vega-links-icon .prefix-icon {
+  width: 40px;
+  height: 40px;
+}
+:host a .vega-links-name {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  opacity: 0;
+  pointer-events: none;
+  overflow: hidden;
+  font-family: "Inter", sans-serif;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 24px;
+  letter-spacing: 0px;
+  flex: 1 1 0%;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  transition-duration: 300ms;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  :host a .vega-links-name {
+    font-family: "Inter", sans-serif;
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  :host a .vega-links-name {
+    font-family: "Inter", sans-serif;
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  :host a .vega-links-name {
+    font-family: "Inter", sans-serif;
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
+}
+
+:host(.has-group-parent:not([icon])) .vega-links-name {
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+:host(.sidenav-open) a:focus {
+  border-color: rgba(var(--v-border-color-sidebar-item-focus, 19, 98, 226, 1));
+}
+:host(.sidenav-open) a:not(.selected):hover {
+  background-color: rgba(var(--v-bg-sidebar-item-hover, 252, 252, 252, 1));
+  color: rgba(var(--v-text-sidebar-link-hover, 18, 18, 39, 1));
+}
+:host(.sidenav-open) a.selected {
+  background-color: rgba(var(--v-bg-sidebar-item-selected, 19, 98, 226, 0.4));
+}
+:host(.sidenav-open) a.selected .vega-links-icon {
+  background: transparent;
+}
+:host(.sidenav-open) a .vega-links-name {
+  opacity: 1;
+  pointer-events: auto;
+  overflow-wrap: break-word;
+}
+
+@media (min-width: 768px) {
+  :host {
+    width: 224px;
+  }
+}

package/dist/collection/components/vega-sidenav/vega-sidenav-link/vega-sidenav-link.js

@@ -0,0 +1,264 @@
+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, Host, h, Element, Prop, Event, State } from '@stencil/core';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
+import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimmers/component-usage-runtime-metrics';
+import { sanitizeVegaComponent } from '../../../utils/component';
+import { Observer } from '../../../helpers/change-manager/observer/observer';
+import ChangeManager from '../../../helpers/change-manager/change-manager';
+import { SIDENAV_LINK_SELECTED_TOPIC } from '../../../helpers/change-manager/subject/static-subject/static-subject-title';
+import { isHTMLVegaSidenavLinkElement } from '../utils';
+import { VegaSidenavLinkSubStateController } from './slimmers/controllers/vega-sidenav-link-sub-state.controller';
+import { findParent } from '../../../utils/ui';
+import domNodeSubjectFactory from '../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import changeManager from '../../../helpers/change-manager/change-manager';
+import { VegaInternalSidenavLinkClick } from '../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { createEventEmitSlimmer, } from '../../../helpers/event-manager/slimmers/event-emit-slimmer';
+import { VegaClick } from '../../../helpers/event-manager/event-id/vega-event-id';
+import internalVegaEventManager from '../../../helpers/event-manager/internal-vega-event-manager';
+/**
+ * @deprecated This component will be removed soon, please consider using `vega-left-nav-link` component instead.
+ * @vegaVersion 2.29.0
+ */
+export class VegaSidenavLink {
+  constructor() {
+    this.globalSlimmers = {};
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.subStateObserverSlimmer = new VegaSidenavLinkSubStateController();
+    this.clickEventEmitter = createEventEmitSlimmer(VegaSidenavLink, VegaClick);
+    this.openState = 'close';
+    /**
+     * Indicates whether the link item is selected.
+     *
+     * @vegaVersion 2.29.0
+     */
+    this.selected = false;
+    /**
+     * Determines if the side nav should stay open when the
+     *    sidenav-link element is clicked.
+     *
+     * @vegaVersion 2.29.0
+     */
+    this.showSideBarOnClickLink = false;
+    /**
+     * The below method is e2e-test covered in
+     * @see{module:vega-sidenav-link-click-event}
+     */
+    /* istanbul ignore next */
+    this.handleClick = (e) => {
+      if (!this.selected) {
+        this.selected = true;
+      }
+      this.clickEventEmitter.emit();
+      this.notifyParentSidenavClick();
+      if (internalVegaEventManager.getSemantics(this.host).namespace === 'native') {
+        e.stopPropagation();
+      }
+    };
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-link-e2e-disconnected}
+   */
+  /* istanbul ignore next */
+  disconnectedCallback() {
+    ChangeManager.unregister(SIDENAV_LINK_SELECTED_TOPIC, this.observer);
+  }
+  componentWillLoad() {
+    const parent = findParent(this.host, 'vega-sidenav-group');
+    if (parent) {
+      this.host.classList.add('has-group-parent');
+    }
+    this.observer = new Observer(isHTMLVegaSidenavLinkElement, this.observerListener.bind(this));
+    ChangeManager.register(SIDENAV_LINK_SELECTED_TOPIC, this.observer);
+  }
+  componentDidRender() {
+    if (this.selected) {
+      ChangeManager.notify(SIDENAV_LINK_SELECTED_TOPIC, this.host);
+    }
+  }
+  render() {
+    const url = this.url || 'javascript:void(0);';
+    return sanitizeVegaComponent(h(Host, { class: { 'sidenav-open': this.openState !== 'close' } },
+      h("a", { href: url, onClick: this.handleClick, class: { selected: this.selected === true } },
+        this.icon ? (h("div", { class: "vega-links-icon" },
+          h("div", { class: "prefix-icon" },
+            h("vega-icon", { icon: this.icon, size: "size-24" })))) : null,
+        h("span", { class: "vega-links-name" },
+          h("slot", null)))), this.host);
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-link-observer-with-click}
+   */
+  /* istanbul ignore next */
+  observerListener(castInput) {
+    if (castInput !== this.host) {
+      this.selected = false;
+    }
+  }
+  /**
+   * Notify the parent sidenav element the child link has been clicked
+   */
+  notifyParentSidenavClick() {
+    const sidenav = findParent(this.host, 'vega-sidenav');
+    if (sidenav) {
+      changeManager.notify(domNodeSubjectFactory.getSubject(sidenav, VegaInternalSidenavLinkClick), {
+        host: this.host,
+        detail: this.showSideBarOnClickLink,
+      });
+    }
+  }
+  static get is() { return "vega-sidenav-link"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-sidenav-link.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-sidenav-link.css"]
+  }; }
+  static get properties() { return {
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.29.0"
+          }],
+        "text": "Specifies the icon displayed for the side navigation link.\n   Icons are only displayed for top-level links."
+      },
+      "attribute": "icon",
+      "reflect": false
+    },
+    "selected": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.29.0"
+          }],
+        "text": "Indicates whether the link item is selected."
+      },
+      "attribute": "selected",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "url": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.29.0"
+          }],
+        "text": "Specifies the destination URL to which the side navigation link\n   navigates when clicked."
+      },
+      "attribute": "url",
+      "reflect": false
+    },
+    "showSideBarOnClickLink": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.29.0"
+          }],
+        "text": "Determines if the side nav should stay open when the\n   sidenav-link element is clicked."
+      },
+      "attribute": "show-side-bar-on-click-link",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "openState": {}
+  }; }
+  static get events() { return [{
+      "method": "vegaClick",
+      "name": "vegaClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.29.0"
+          }],
+        "text": "An event emitter notifying about the occurrence of a click event."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "click",
+      "name": "click",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.29.0"
+          }],
+        "text": "An event emitter notifying about the occurrence of a click event."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "host"; }
+}
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaSidenavLink.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSidenavLink.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSidenavLink.prototype, "subStateObserverSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSidenavLink.prototype, "clickEventEmitter", void 0);