genesys-spark-components 4.0.0-beta.37 → 4.0.0-beta.39

package/dist/collection/components/legacy/gux-tabs-advanced-legacy/gux-tab-advanced/gux-tab-advanced.css

@@ -1,117 +0,0 @@
-.gux-tab-sorting :focus-within {
-  margin-bottom: 4px;
-}
-
-gux-tab-advanced-legacy:not(:last-child) .gux-tab:not(.gux-dropdown-options) .gux-tab-button {
-  border-right: 1px solid #d7dce5;
-}
-gux-tab-advanced-legacy:not(:last-child) .gux-dropdown-options .gux-tab-options-button {
-  border-right: 1px solid #d7dce5;
-}
-gux-tab-advanced-legacy .gux-tab {
-  display: flex;
-  align-items: center;
-  width: 126px;
-  height: 50px;
-  padding-bottom: 2px;
-  overflow: hidden;
-  border-radius: 4px 4px 0 0;
-  transition: width 0.4s ease-out;
-}
-gux-tab-advanced-legacy .gux-tab .gux-tab-button {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  width: 125px;
-  height: 50px;
-  padding-right: 0;
-  padding-left: 16px;
-  color: #000;
-  background-color: #f6f7f9;
-  border: none;
-}
-gux-tab-advanced-legacy .gux-tab .gux-tab-button:focus-visible {
-  height: 90%;
-  border: 3px solid #aac9ff;
-  border-radius: 5px;
-  outline: none;
-}
-gux-tab-advanced-legacy .gux-tab.gux-show {
-  width: 160px;
-}
-gux-tab-advanced-legacy .gux-tab.gux-show.gux-disabled .gux-tab-button {
-  color: rgba(0, 0, 0, 0.5);
-}
-gux-tab-advanced-legacy .gux-tab.gux-show.gux-disabled .gux-tab-options-button {
-  color: rgba(46, 57, 76, 0.5);
-  pointer-events: none;
-  cursor: default;
-}
-gux-tab-advanced-legacy .gux-tab .gux-tab-options-button {
-  z-index: 1;
-  align-items: center;
-  justify-content: center;
-  width: 35px;
-  height: 30px;
-  padding: 0;
-  cursor: pointer;
-  background-color: #f6f7f9;
-  border: none;
-}
-gux-tab-advanced-legacy .gux-tab .gux-tab-options-button:focus-visible {
-  outline: none;
-}
-gux-tab-advanced-legacy .gux-tab .gux-tab-options-button:focus-visible gux-icon {
-  padding-right: 0;
-  padding-left: 0;
-  border: 3px solid #aac9ff;
-  border-radius: 5px;
-}
-gux-tab-advanced-legacy .gux-tab .gux-tab-options-button gux-icon {
-  width: 16px;
-  height: 16px;
-  padding-right: 16px;
-  padding-left: 8px;
-  transition: color 0.25s;
-}
-gux-tab-advanced-legacy .gux-tab:not(.gux-dropdown-options) .gux-tab-button {
-  width: 160px;
-  height: 30px;
-  padding-right: 16px;
-}
-gux-tab-advanced-legacy .gux-tab:not(.gux-dropdown-options) .gux-tab-button:focus-visible {
-  height: 90%;
-  border: 3px solid #aac9ff;
-  border-radius: 5px;
-  outline: none;
-}
-gux-tab-advanced-legacy .gux-tab .tab-icon-container {
-  display: flex;
-  flex: 0 0 16px;
-  align-items: center;
-  justify-content: center;
-  height: 14px;
-  margin-right: 8px;
-}
-gux-tab-advanced-legacy .gux-tab .tab-icon-container gux-icon {
-  width: 100%;
-}
-gux-tab-advanced-legacy .gux-tab.gux-selected {
-  padding-bottom: 0;
-  background-color: #fdfdfd;
-  border-bottom: 2px solid #2a60c8;
-}
-gux-tab-advanced-legacy .gux-tab.gux-selected .gux-tab-button {
-  background-color: #fdfdfd;
-}
-gux-tab-advanced-legacy .gux-tab.gux-selected .gux-tab-options-button {
-  background-color: #fdfdfd;
-}
-gux-tab-advanced-legacy .gux-tab:hover:not(.gux-selected):not(.gux-disabled) {
-  padding-bottom: 0;
-  border-bottom: 2px solid #8a97ad;
-}
-gux-tab-advanced-legacy .gux-tab gux-tooltip-title {
-  font-size: 14px;
-  white-space: nowrap;
-}

package/dist/collection/components/legacy/gux-tabs-advanced-legacy/gux-tab-advanced/gux-tab-advanced.js

@@ -1,320 +0,0 @@
-import { h, writeTask } from "@stencil/core";
-import { eventIsFrom } from "../../../../utils/dom/event-is-from";
-import { randomHTMLId } from "../../../../utils/dom/random-html-";
-import { afterNextRenderTimeout } from "../../../../utils/dom/after-next-render";
-import { buildI18nForComponent } from "../../../../i18n";
-import tabsResources from "../i18n/en.json";
-/**
- * @slot default - gux-icon (optional) and text node (required)
- * @slot dropdown-options - optional slot for tab options, must slot a gux-list element with gux-list-item children
- */
-export class GuxTabAdvancedLegacy {
-  constructor() {
-    this.dropdownOptionsButtonId = randomHTMLId();
-    this.tabTitle = '';
-    this.focusinFromClick = false;
-    this.tabId = undefined;
-    this.active = false;
-    this.guxDisabled = false;
-    this.popoverHidden = true;
-    this.hasAnimated = false;
-  }
-  onFocusin(event) {
-    if (!this.focusinFromClick &&
-      event.target.classList.contains('gux-tab-button')) {
-      void this.tooltipTitleElement.setShowTooltip();
-    }
-  }
-  onFocusout(event) {
-    if (!this.root.querySelector('.gux-tab').contains(event.relatedTarget)) {
-      this.popoverHidden = true;
-    }
-    if (event.target.classList.contains('gux-tab-button')) {
-      void this.tooltipTitleElement.setHideTooltip();
-    }
-    this.focusinFromClick = false;
-  }
-  onKeydown(event) {
-    switch (event.key) {
-      case 'ArrowDown':
-      case 'Enter':
-        if (eventIsFrom('.gux-tab-options-button', event)) {
-          event.preventDefault();
-          this.popoverHidden = false;
-          this.focusFirstItemInPopupList();
-        }
-        break;
-      case 'Escape':
-        if (eventIsFrom('gux-list[slot="dropdown-options"]', event)) {
-          event.stopPropagation();
-          this.popoverHidden = true;
-          afterNextRenderTimeout(() => {
-            var _a;
-            (_a = this.tabOptionsButtonElement) === null || _a === void 0 ? void 0 : _a.focus();
-          });
-        }
-        break;
-    }
-  }
-  onKeyup(event) {
-    switch (event.key) {
-      case ' ':
-        if (eventIsFrom('.gux-tab-options-button', event)) {
-          this.focusFirstItemInPopupList();
-        }
-    }
-  }
-  onClick(event) {
-    if (eventIsFrom('.gux-tab-options-button', event)) {
-      return;
-    }
-    if (!this.active && !this.guxDisabled) {
-      this.internalactivatetabpanel.emit(this.tabId);
-    }
-  }
-  onMouseDown() {
-    this.focusinFromClick = true;
-  }
-  // eslint-disable-next-line @typescript-eslint/require-await
-  async guxSetActive(active) {
-    this.active = active;
-  }
-  // eslint-disable-next-line @typescript-eslint/require-await
-  async guxGetActive() {
-    return this.active;
-  }
-  // eslint-disable-next-line @typescript-eslint/require-await
-  async guxFocus() {
-    this.buttonElement.focus();
-  }
-  get hasDropdownOptions() {
-    return Boolean(this.root.querySelector('gux-list[slot="dropdown-options"]'));
-  }
-  focusFirstItemInPopupList() {
-    const listElement = this.root.querySelector('gux-list[slot="dropdown-options"]');
-    afterNextRenderTimeout(() => {
-      void (listElement === null || listElement === void 0 ? void 0 : listElement.guxFocusFirstItem());
-    });
-  }
-  toggleOptions() {
-    this.popoverHidden = !this.popoverHidden;
-  }
-  onSelectDropdownOption(e) {
-    this.popoverHidden = true;
-    e.stopPropagation();
-    afterNextRenderTimeout(() => {
-      this.tabOptionsButtonElement.focus();
-    });
-  }
-  async componentWillLoad() {
-    this.i18n = await buildI18nForComponent(this.root, tabsResources, 'gux-tabs-advanced');
-  }
-  componentDidLoad() {
-    this.tabTitle = this.root
-      .querySelector('gux-tooltip-title')
-      .textContent.trim();
-    if (!this.hasAnimated) {
-      writeTask(() => {
-        this.root.querySelector('.gux-tab').classList.add('gux-show');
-        this.hasAnimated = true;
-      });
-    }
-  }
-  popoverOnClick(e) {
-    e.stopPropagation();
-  }
-  getDropdownOptions() {
-    if (this.hasDropdownOptions) {
-      return [
-        h("button", { id: this.dropdownOptionsButtonId, "aria-expanded": (!this.popoverHidden).toString(), type: "button", class: "gux-tab-options-button", ref: el => (this.tabOptionsButtonElement = el), onClick: () => this.toggleOptions(), tabIndex: this.active ? 0 : -1, disabled: this.guxDisabled }, h("gux-icon", { "icon-name": "menu-kebab-vertical", "screenreader-text": this.i18n('options', {
-            tabTitle: this.tabTitle
-          }) })),
-        h("gux-popover-list", { position: "top-end", for: this.dropdownOptionsButtonId, displayDismissButton: false, hidden: this.popoverHidden, closeOnClickOutside: true, onGuxdismiss: () => (this.popoverHidden = true), onClick: (e) => this.popoverOnClick(e), onFocusout: e => e.stopImmediatePropagation() }, h("div", { class: "gux-dropdown-option-container", onClick: (e) => this.onSelectDropdownOption(e) }, h("slot", { name: "dropdown-options" })))
-      ];
-    }
-    return null;
-  }
-  render() {
-    return [
-      h("div", { class: {
-          'gux-tab': true,
-          'gux-selected': this.active,
-          'gux-dropdown-options': this.hasDropdownOptions,
-          'gux-disabled': this.guxDisabled
-        } }, h("button", { class: "gux-tab-button", type: "button", role: "tab", "aria-selected": this.active.toString(), "aria-disabled": this.guxDisabled.toString(), "aria-controls": `gux-${this.tabId}-panel`, ref: el => (this.buttonElement = el), tabIndex: this.active ? 0 : -1, id: `gux-${this.tabId}-tab` }, h("gux-tooltip-title", { ref: el => (this.tooltipTitleElement = el) }, h("span", null, h("slot", null)))), this.getDropdownOptions())
-    ];
-  }
-  static get is() { return "gux-tab-advanced-legacy"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["gux-tab-advanced.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["gux-tab-advanced.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "tabId": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "unique id for the tab"
-        },
-        "attribute": "tab-id",
-        "reflect": false
-      },
-      "guxDisabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "gux-disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "active": {},
-      "popoverHidden": {},
-      "hasAnimated": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "internalactivatetabpanel",
-        "name": "internalactivatetabpanel",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "guxSetActive": {
-        "complexType": {
-          "signature": "(active: boolean) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      },
-      "guxGetActive": {
-        "complexType": {
-          "signature": "() => Promise<boolean>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "return": "Promise<boolean>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      },
-      "guxFocus": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "root"; }
-  static get listeners() {
-    return [{
-        "name": "focusin",
-        "method": "onFocusin",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "focusout",
-        "method": "onFocusout",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "keydown",
-        "method": "onKeydown",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "keyup",
-        "method": "onKeyup",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "click",
-        "method": "onClick",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "mousedown",
-        "method": "onMouseDown",
-        "target": undefined,
-        "capture": false,
-        "passive": true
-      }];
-  }
-}

package/dist/collection/components/legacy/gux-tabs-advanced-legacy/gux-tab-advanced-list/gux-tab-advanced-list.css

@@ -1,127 +0,0 @@
-/*
- * Typography styles and mixins.
- */
-/* Helpers */
-/* Base typography */
-/* Headings */
-/* Anchor */
-/* Custom Styles */
-gux-tab-advanced-list-legacy .gux-tab-container {
-  display: flex;
-  align-items: flex-end;
-  width: 100%;
-  height: 50px;
-  margin-bottom: 16px;
-  overflow-x: auto;
-  overflow-y: hidden;
-  background-color: #f6f7f9;
-  border-bottom: 1px solid #d7dce5;
-  border-radius: 4px 4px 0 0;
-}
-gux-tab-advanced-list-legacy .gux-tab-container .action-button-container {
-  display: flex;
-  border-radius: 4px;
-}
-gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .add-tab-button {
-  min-width: 35px;
-  height: 50px;
-  padding: 0;
-  margin-left: 2px;
-  color: #2e394c;
-  background-color: #e2e6ee;
-  border: none;
-  border-radius: 4px;
-  transition: color 0.25s;
-}
-gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .add-tab-button [slot=add-tab] {
-  display: inline-flex;
-  align-items: center;
-  padding: 0 12px;
-  white-space: nowrap;
-  font-family: var(--gse-core-fontFamily-body), sans-serif;
-  font-weight: var(--gse-core-fontWeight-bold);
-}
-gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .add-tab-button [slot=add-tab] gux-icon {
-  padding-right: 8px;
-}
-gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .add-tab-button:disabled {
-  opacity: 0.5;
-}
-gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .add-tab-button:hover {
-  background-color: #d7dce5;
-}
-gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .add-tab-button:active {
-  background-color: #c8cfda;
-}
-gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .add-tab-button:focus-visible {
-  outline: none;
-  box-shadow: inset 0 0 0 3px #aac9ff;
-}
-gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .add-tab-button:focus-visible {
-  border-radius: 5px;
-  outline: none;
-  box-shadow: inset 0 0 0 3px #aac9ff;
-}
-gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .add-tab-button gux-icon {
-  width: 16px;
-  height: 16px;
-}
-gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .gux-scroll-button-container {
-  display: flex;
-  border-radius: 4px;
-}
-gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .gux-scroll-button-container .gux-scroll-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 50px;
-  padding: 0;
-  color: #2e394c;
-  background-color: #e2e6ee;
-  border: none;
-  border-radius: 4px;
-  transition: color 0.25s;
-}
-gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .gux-scroll-button-container .gux-scroll-button:focus-visible {
-  border: 3px solid #aac9ff;
-  border-radius: 5px;
-  outline: none;
-}
-gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .gux-scroll-button-container .gux-scroll-button gux-icon {
-  width: 16px;
-  height: 16px;
-}
-gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .gux-scroll-button-container .gux-scroll-button:focus-visible {
-  border: 3px solid #aac9ff;
-  outline: none;
-}
-gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .gux-scroll-button-container .gux-scroll-button:hover {
-  background-color: #d7dce5;
-}
-gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .gux-scroll-button-container .gux-scroll-button:active {
-  background-color: #c8cfda;
-}
-gux-tab-advanced-list-legacy .gux-tab-container .action-button-container .gux-scroll-button-container .gux-scroll-button:focus-visible {
-  outline: var(--gse-semantic-focusRing-default-border-color) var(--gse-semantic-focusRing-default-border-style) var(--gse-semantic-focusRing-default-border-width);
-  outline-offset: var(--gse-semantic-focusRing-offset);
-}
-gux-tab-advanced-list-legacy .gux-tab-container .gux-scrollable-section {
-  display: flex;
-  align-items: flex-end;
-  height: 50px;
-  overflow-x: auto;
-  scroll-behavior: smooth;
-  scrollbar-width: none;
-}
-gux-tab-advanced-list-legacy .gux-tab-container .gux-scrollable-section::-webkit-scrollbar {
-  height: 0;
-}
-gux-tab-advanced-list-legacy .gux-sr-only {
-  position: absolute;
-  top: auto;
-  left: -10000px;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-}