genesys-spark-components 3.0.0

package/dist/collection/components/beta/gux-chart-pie/gux-chart-pie.js

@@ -0,0 +1,266 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+import { Component, Element, h, Prop, Watch } from '@stencil/core';
+import { trackComponent } from '../../../usage-tracking';
+import { logError } from '../../../utils/error/log-error';
+import { VISUALIZATION_COLORS } from '../../../utils/theme/color-palette';
+const DEFAULT_COLOR_FIELD_NAME = 'category';
+const DEFAULT_LABEL_FIELD_NAME = 'value';
+export class GuxPieChart {
+  constructor() {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    this.baseChartSpec = {
+      $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
+      config: {
+        legend: {
+          symbolType: 'circle'
+        }
+      },
+      encoding: {
+        theta: { field: 'value', type: 'quantitative', stack: true },
+        color: {
+          field: DEFAULT_COLOR_FIELD_NAME,
+          type: 'nominal',
+          scale: { range: VISUALIZATION_COLORS },
+          legend: null
+        },
+        tooltip: { aggregate: 'count', type: 'quantitative' }
+      },
+      layer: [
+        {
+          mark: { type: 'arc', outerRadius: 80 }
+        },
+        {
+          mark: { type: 'text', radius: 90 },
+          encoding: {
+            text: { field: DEFAULT_LABEL_FIELD_NAME, type: 'quantitative' }
+          }
+        }
+      ],
+      view: { stroke: null }
+    };
+    this.legendPosition = 'right';
+  }
+  parseData() {
+    if (!this.outerRadius) {
+      logError('gux-chart-pie', '[gux-chart-pie] requires outer-radius');
+    }
+    let chartData = {};
+    if (this.chartData) {
+      chartData = { data: this.chartData };
+    }
+    if (this.includeLegend) {
+      this.baseChartSpec.encoding.color.legend = true;
+    }
+    if (this.legendPosition) {
+      this.baseChartSpec.config.legend.orient = this.legendPosition;
+    }
+    const colorFieldName = this.colorFieldName || DEFAULT_COLOR_FIELD_NAME;
+    if (colorFieldName) {
+      this.baseChartSpec.encoding.color.field = colorFieldName;
+    }
+    const legendTitle = this.legendTitle;
+    if (legendTitle) {
+      this.baseChartSpec.encoding.color.title = legendTitle;
+    }
+    const outerRadius = this.outerRadius;
+    this.baseChartSpec.layer = [
+      {
+        mark: { type: 'arc', outerRadius }
+      }
+    ];
+    const labelRadius = this.labelRadius;
+    const labelField = this.labelField || DEFAULT_LABEL_FIELD_NAME;
+    if (labelRadius) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      this.baseChartSpec.layer.push({
+        mark: { type: 'text', radius: labelRadius },
+        encoding: {
+          text: { field: labelField, type: 'quantitative' }
+        }
+      });
+    }
+    const spec = Object.assign(this.baseChartSpec, chartData);
+    this.visualizationSpec = spec;
+  }
+  componentWillLoad() {
+    trackComponent(this.root);
+    this.parseData();
+  }
+  render() {
+    return (h("gux-visualization-beta", { visualizationSpec: this.visualizationSpec }));
+  }
+  static get is() { return "gux-chart-pie-beta"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["gux-chart-pie.less"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["gux-chart-pie.css"]
+  }; }
+  static get properties() { return {
+    "chartData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Record<string, any>",
+        "resolved": "{ [x: string]: any; }",
+        "references": {
+          "Record": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Data to be rendered in the chart.\nData field names must match the values you set in xFieldName and yFieldName"
+      }
+    },
+    "includeLegend": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "include-legend",
+      "reflect": false
+    },
+    "legendPosition": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "| 'left'\n    | 'right'\n    | 'top'\n    | 'bottom'\n    | 'top-left'\n    | 'top-right'\n    | 'bottom-left'\n    | 'bottom-right'\n    | 'none'",
+        "resolved": "\"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"none\" | \"right\" | \"top\" | \"top-left\" | \"top-right\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "legend-position",
+      "reflect": false,
+      "defaultValue": "'right'"
+    },
+    "legendTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "legend-title",
+      "reflect": false
+    },
+    "colorFieldName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "color-field-name",
+      "reflect": false
+    },
+    "outerRadius": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "outer-radius",
+      "reflect": false
+    },
+    "labelRadius": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label-radius",
+      "reflect": false
+    },
+    "labelField": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label-field",
+      "reflect": false
+    },
+    "embedOptions": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "EmbedOptions",
+        "resolved": "EmbedOptions<string, Renderers>",
+        "references": {
+          "EmbedOptions": {
+            "location": "import",
+            "path": "vega-embed"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+  static get elementRef() { return "root"; }
+  static get watchers() { return [{
+      "propName": "chartData",
+      "methodName": "parseData"
+    }]; }
+}

package/dist/collection/components/beta/gux-error-message-beta/gux-error-message-beta.css

@@ -0,0 +1,24 @@
+.gux-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: flex-start;
+  justify-content: flex-start;
+  font-size: 11px;
+  color: #2e394c;
+}
+.gux-container gux-icon {
+  flex: 0 1 auto;
+  align-self: auto;
+  order: 0;
+  width: 16px;
+  height: 16px;
+  margin: 0 4px;
+  color: #ea0b0b;
+}
+.gux-container .gux-message {
+  flex: 0 1 auto;
+  align-self: auto;
+  order: 0;
+}

package/dist/collection/components/beta/gux-error-message-beta/gux-error-message-beta.js

@@ -0,0 +1,26 @@
+import { Component, Element, h } from '@stencil/core';
+import { trackComponent } from '../../../usage-tracking';
+/**
+ * @slot error(default) - Required slot for error
+ */
+export class GuxErrorMessageBeta {
+  componentWillLoad() {
+    trackComponent(this.root);
+  }
+  render() {
+    return (h("div", { class: "gux-container" },
+      h("gux-icon", { "icon-name": "alert-warning-octogon", decorative: true }),
+      h("div", { class: "gux-message" },
+        h("slot", null),
+        h("slot", { name: "error" }))));
+  }
+  static get is() { return "gux-error-message-beta"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["gux-error-message-beta.less"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["gux-error-message-beta.css"]
+  }; }
+  static get elementRef() { return "root"; }
+}

package/dist/collection/components/beta/gux-flyout-menu/gux-flyout-menu.css

@@ -0,0 +1,34 @@
+:host {
+  z-index: 2;
+  color: #2e394c;
+  cursor: default;
+}
+:host(:focus) {
+  outline: none;
+}
+:host(:focus-visible) {
+  outline: none;
+  box-shadow: 0 0 0 1px #fdfdfd, 0 0 0 4px #aac9ff;
+}
+.gux-flyout-menu-content {
+  display: none;
+  margin: 0;
+}
+.gux-flyout-menu-content.gux-shown {
+  display: flex;
+}
+.gux-arrow,
+.gux-arrow::before {
+  position: absolute;
+  top: -3px;
+  width: 10px;
+  height: 10px;
+  background: inherit;
+}
+.gux-arrow::before {
+  visibility: visible;
+  content: '';
+  border-top: 1px solid #b4bccb;
+  border-left: 1px solid #b4bccb;
+  transform: rotate(45deg);
+}

package/dist/collection/components/beta/gux-flyout-menu/gux-flyout-menu.js

@@ -0,0 +1,195 @@
+import { createPopper } from '@popperjs/core';
+import { Component, Element, h, Host, Listen, State, Watch } from '@stencil/core';
+import { trackComponent } from '../../../usage-tracking';
+import { hideDelay, moveFocusDelay } from './gux-menu/gux-menu.common';
+export class GuxFlyoutMenu {
+  constructor() {
+    this.isShown = false;
+  }
+  forceUpdate(isShown) {
+    if (isShown) {
+      if (this.popperInstance) {
+        void this.popperInstance.update();
+      }
+    }
+  }
+  onKeydown(event) {
+    event.stopPropagation();
+    if (this.isShown) {
+      switch (event.key) {
+        case 'Escape':
+        case 'ArrowLeft':
+        case 'ArrowUp':
+          this.root.focus();
+          return;
+        case 'ArrowDown':
+          event.preventDefault();
+          this.focusOnMenu();
+          return;
+        case 'Enter':
+          this.hideDelayTimeout = setTimeout(() => {
+            this.focusOnMenu();
+          }, moveFocusDelay);
+          return;
+      }
+    }
+  }
+  // Using 'keyup' here because the native click handler behavior
+  // for buttons is triggered on keyup when using the space key
+  onKeyup(event) {
+    event.stopPropagation();
+    switch (event.key) {
+      case ' ':
+        if (this.menuContentElement.contains(document.activeElement)) {
+          this.root.focus();
+        }
+        else {
+          this.hideDelayTimeout = setTimeout(() => {
+            this.focusOnMenu();
+          }, moveFocusDelay);
+        }
+        return;
+    }
+  }
+  onmouseenter() {
+    this.show();
+  }
+  onMouseleave() {
+    this.hide();
+  }
+  onClick(event) {
+    if (event.detail !== 0) {
+      this.hide();
+    }
+    this.root.focus();
+  }
+  onFocusin() {
+    this.show();
+  }
+  onFocusout() {
+    this.hide();
+  }
+  show() {
+    clearTimeout(this.hideDelayTimeout);
+    this.isShown = true;
+  }
+  hide() {
+    if (this.isShown) {
+      this.hideDelayTimeout = setTimeout(() => {
+        this.isShown = false;
+      }, hideDelay);
+    }
+  }
+  runPopper() {
+    this.popperInstance = createPopper(this.targetElement, document.querySelector('gux-menu'), {
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: [0, 16]
+          }
+        },
+        {
+          name: 'arrow',
+          options: {
+            padding: 16 // 16px from the edges of the popper
+          }
+        }
+      ],
+      placement: 'bottom-start'
+    });
+  }
+  destroyPopper() {
+    if (this.popperInstance) {
+      this.popperInstance.destroy();
+      this.popperInstance = null;
+    }
+  }
+  focusOnMenu() {
+    if (this.menuContentElement.contains(document.activeElement)) {
+      return;
+    }
+    const menu = this.root.querySelector('gux-menu');
+    const menuItems = Array.from(menu.children);
+    const nextFocusableElement = menuItems[0];
+    void nextFocusableElement.guxFocus();
+  }
+  componentWillLoad() {
+    trackComponent(this.root);
+  }
+  componentDidLoad() {
+    this.runPopper();
+  }
+  disconnectedCallback() {
+    this.destroyPopper();
+  }
+  render() {
+    return (h(Host, { tabIndex: 0, "aria-haspopup": "true" },
+      h("span", { ref: el => (this.targetElement = el) },
+        h("slot", { name: "target" })),
+      h("div", { class: {
+          'gux-flyout-menu-content': true,
+          'gux-shown': this.isShown
+        }, ref: el => (this.menuContentElement = el) },
+        h("slot", { name: "menu" }))));
+  }
+  static get is() { return "gux-flyout-menu-beta"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["gux-flyout-menu.less"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["gux-flyout-menu.css"]
+  }; }
+  static get states() { return {
+    "isShown": {}
+  }; }
+  static get elementRef() { return "root"; }
+  static get watchers() { return [{
+      "propName": "isShown",
+      "methodName": "forceUpdate"
+    }]; }
+  static get listeners() { return [{
+      "name": "keydown",
+      "method": "onKeydown",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "keyup",
+      "method": "onKeyup",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "mouseenter",
+      "method": "onmouseenter",
+      "target": undefined,
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "mouseleave",
+      "method": "onMouseleave",
+      "target": undefined,
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "click",
+      "method": "onClick",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "focusin",
+      "method": "onFocusin",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "focusout",
+      "method": "onFocusout",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

package/dist/collection/components/beta/gux-flyout-menu/gux-menu/gux-menu-option/gux-menu-option.css

@@ -0,0 +1,29 @@
+gux-menu-option {
+  display: block;
+  flex: 1 1 auto;
+  align-self: auto;
+}
+gux-menu-option .gux-menu-option-button {
+  all: unset;
+  width: 100%;
+  width: 125px;
+  height: 32px;
+  padding: 0 16px;
+  line-height: 32px;
+  color: #2e394c;
+  background-color: #fdfdfd;
+}
+gux-menu-option .gux-menu-option-button:focus-within,
+gux-menu-option .gux-menu-option-button:hover {
+  color: #fdfdfd;
+  background-color: #2a60c8;
+}
+gux-menu-option .gux-menu-option-button:enabled {
+  cursor: pointer;
+}
+gux-menu-option .gux-menu-option-button .gux-menu-option-button-text {
+  display: block;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/dist/collection/components/beta/gux-flyout-menu/gux-menu/gux-menu-option/gux-menu-option.js

@@ -0,0 +1,58 @@
+import { Component, Element, h, Listen, Method } from '@stencil/core';
+import { menuNavigation } from '../gux-menu.common';
+export class GuxMenuOption {
+  /**
+   * Focus on the components button element
+   */
+  // eslint-disable-next-line @typescript-eslint/require-await
+  async guxFocus() {
+    this.buttonElement.focus();
+  }
+  onKeydown(event) {
+    menuNavigation(event, this.root);
+    switch (event.key) {
+      case 'ArrowRight':
+      case 'Enter':
+        event.stopPropagation();
+        break;
+    }
+  }
+  render() {
+    return (h("button", { type: "button", class: "gux-menu-option-button", role: "menuitem", "aria-haspopup": "false", tabIndex: -1, ref: el => (this.buttonElement = el) },
+      h("span", { class: "gux-menu-option-button-text" },
+        h("slot", null))));
+  }
+  static get is() { return "gux-menu-option"; }
+  static get originalStyleUrls() { return {
+    "$": ["gux-menu-option.less"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["gux-menu-option.css"]
+  }; }
+  static get methods() { return {
+    "guxFocus": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Focus on the components button element",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "root"; }
+  static get listeners() { return [{
+      "name": "keydown",
+      "method": "onKeydown",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}