genesys-spark-components 4.26.0 → 4.26.1

package/dist/esm/gux-tooltip-title.entry.js

@@ -1,149 +1,150 @@
-import { r as registerInstance, h, g as getElement } from './index-39e65a0a.js';
-import { a as logWarn } from './log-error-0b15023e.js';
-import { O as OnMutation } from './on-mutation-c570b3ed.js';
-import { O as OnResize } from './on-resize-e2132936.js';
+import { r as registerInstance, h, g as getElement } from './index-da21b737.js';
+import { a as logWarn } from './log-error-274efeb7.js';
+import { O as OnMutation } from './on-mutation-1355c534.js';
+import { O as OnResize } from './on-resize-6a194a58.js';
 
 const guxTooltipTitleCss = "gux-tooltip-title{overflow:hidden}gux-tooltip{font-weight:normal;line-height:normal;text-align:left;overflow-wrap:break-word;white-space:normal}.gux-overflow-hidden .gux-title-container ::slotted(span){overflow:hidden;text-overflow:ellipsis}.gux-overflow-hidden .gux-title-container>*{overflow:hidden;text-overflow:ellipsis}.gux-title-container{display:flex;pointer-events:none}.gux-tooltip-icon-decorative .gux-title-container{position:relative;margin-left:20px}.gux-tooltip-icon-decorative .gux-title-container gux-icon,.gux-tooltip-icon-decorative .gux-title-container ::slotted(gux-icon){position:absolute;top:1px;left:-20px;flex-shrink:0;width:16px;height:16px}.gux-icon-only{line-height:0px}";
+const GuxTooltipTitleStyle0 = guxTooltipTitleCss;
 
 var __decorate = (undefined && undefined.__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;
+    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;
 };
 const GuxTooltipTitle = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.hasTooltip = false;
-    this.showTooltip = false;
-    this.iconOnly = false;
-    this.titleName = '';
-  }
-  onmouseenter(event) {
-    if (!event.buttons) {
-      this.showTooltip = true;
-    }
-  }
-  onmouseleave() {
-    this.showTooltip = false;
-  }
-  onmousedown() {
-    this.showTooltip = false;
-  }
-  async setShowTooltip() {
-    if (this.tooltipElement) {
-      this.showTooltip = true;
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-      await this.tooltipElement.showTooltip();
-    }
-  }
-  async setHideTooltip() {
-    if (this.tooltipElement) {
-      this.showTooltip = false;
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-      await this.tooltipElement.hideTooltip();
-    }
-  }
-  onMutation() {
-    this.titleName = this.setTooltipTitleText();
-    this.checkForTooltipHideOrShow();
-  }
-  onResize() {
-    this.titleName = this.setTooltipTitleText();
-    this.checkForTooltipHideOrShow();
-  }
-  componentWillLoad() {
-    this.titleName = this.setTooltipTitleText();
-  }
-  componentDidLoad() {
-    this.logWarnNoIconSrText();
-  }
-  logWarnNoIconSrText() {
-    if (this.iconOnly && !this.titleName) {
-      logWarn(this.root, 'No screenreader-text provided. Provide a localized screenreader-text property for the gux-icon. The screenreader-text property is used for the icon screenreader text and the tooltip.');
-    }
-  }
-  addIconDecorative() {
-    this.root.classList.add('gux-tooltip-icon-decorative');
-  }
-  getTitleElements() {
-    var _a;
-    const slot = this.root.querySelector('slot');
-    const target = (_a = this.root.querySelector('.gux-title-container span')) === null || _a === void 0 ? void 0 : _a.children;
-    if (slot) {
-      return slot.assignedElements();
-    }
-    else if (target) {
-      return Array.from(target);
-    }
-    return [];
-  }
-  getTitleTextContent() {
-    if (this.root.querySelector('slot')) {
-      return this.root
-        .querySelector('slot')
-        .assignedNodes()
-        .map(node => node.textContent.trim())
-        .join('');
-    }
-    else if (this.root.querySelector('.gux-title-container')) {
-      return this.root.querySelector('.gux-title-container').textContent.trim();
-    }
-    return '';
-  }
-  setTooltipTitleText() {
-    let tooltipTitleText = this.getTitleTextContent();
-    this.getTitleElements().forEach(element => {
-      if (element.tagName === 'GUX-ICON' && !this.getTitleTextContent()) {
-        this.iconOnly = true;
-        tooltipTitleText = element.getAttribute('screenreader-text');
-      }
-      else if (element.tagName === 'GUX-ICON' && this.getTitleTextContent()) {
-        this.addIconDecorative();
-      }
-    });
-    return tooltipTitleText;
-  }
-  checkForTooltipHideOrShow() {
-    const titleContainer = this.root.querySelector('.gux-title-container');
-    this.root.classList.remove('gux-overflow-hidden');
-    if (this.iconOnly && this.titleName) {
-      this.hasTooltip = true;
-    }
-    else if ((titleContainer === null || titleContainer === void 0 ? void 0 : titleContainer.scrollWidth) > (titleContainer === null || titleContainer === void 0 ? void 0 : titleContainer.offsetWidth)) {
-      this.root.classList.add('gux-overflow-hidden');
-      this.hasTooltip = true;
-    }
-    else {
-      this.hasTooltip = false;
-    }
-  }
-  render() {
-    return [
-      h("span", { class: {
-          'gux-title-container': true,
-          'gux-icon-only': this.iconOnly
-        } }, h("slot", null)),
-      this.renderTooltip()
-    ];
-  }
-  renderTooltip() {
-    if (this.hasTooltip) {
-      return (h("gux-tooltip", { "aria-hidden": "true", ref: el => (this.tooltipElement = el), hidden: !this.showTooltip }, this.titleName));
-    }
-  }
-  get root() { return getElement(this); }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.hasTooltip = false;
+        this.showTooltip = false;
+        this.iconOnly = false;
+        this.titleName = '';
+    }
+    onmouseenter(event) {
+        if (!event.buttons) {
+            this.showTooltip = true;
+        }
+    }
+    onmouseleave() {
+        this.showTooltip = false;
+    }
+    onmousedown() {
+        this.showTooltip = false;
+    }
+    async setShowTooltip() {
+        if (this.tooltipElement) {
+            this.showTooltip = true;
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+            await this.tooltipElement.showTooltip();
+        }
+    }
+    async setHideTooltip() {
+        if (this.tooltipElement) {
+            this.showTooltip = false;
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+            await this.tooltipElement.hideTooltip();
+        }
+    }
+    onMutation() {
+        this.titleName = this.setTooltipTitleText();
+        this.checkForTooltipHideOrShow();
+    }
+    onResize() {
+        this.titleName = this.setTooltipTitleText();
+        this.checkForTooltipHideOrShow();
+    }
+    componentWillLoad() {
+        this.titleName = this.setTooltipTitleText();
+    }
+    componentDidLoad() {
+        this.logWarnNoIconSrText();
+    }
+    logWarnNoIconSrText() {
+        if (this.iconOnly && !this.titleName) {
+            logWarn(this.root, 'No screenreader-text provided. Provide a localized screenreader-text property for the gux-icon. The screenreader-text property is used for the icon screenreader text and the tooltip.');
+        }
+    }
+    addIconDecorative() {
+        this.root.classList.add('gux-tooltip-icon-decorative');
+    }
+    getTitleElements() {
+        var _a;
+        const slot = this.root.querySelector('slot');
+        const target = (_a = this.root.querySelector('.gux-title-container span')) === null || _a === void 0 ? void 0 : _a.children;
+        if (slot) {
+            return slot.assignedElements();
+        }
+        else if (target) {
+            return Array.from(target);
+        }
+        return [];
+    }
+    getTitleTextContent() {
+        if (this.root.querySelector('slot')) {
+            return this.root
+                .querySelector('slot')
+                .assignedNodes()
+                .map(node => node.textContent.trim())
+                .join('');
+        }
+        else if (this.root.querySelector('.gux-title-container')) {
+            return this.root.querySelector('.gux-title-container').textContent.trim();
+        }
+        return '';
+    }
+    setTooltipTitleText() {
+        let tooltipTitleText = this.getTitleTextContent();
+        this.getTitleElements().forEach(element => {
+            if (element.tagName === 'GUX-ICON' && !this.getTitleTextContent()) {
+                this.iconOnly = true;
+                tooltipTitleText = element.getAttribute('screenreader-text');
+            }
+            else if (element.tagName === 'GUX-ICON' && this.getTitleTextContent()) {
+                this.addIconDecorative();
+            }
+        });
+        return tooltipTitleText;
+    }
+    checkForTooltipHideOrShow() {
+        const titleContainer = this.root.querySelector('.gux-title-container');
+        this.root.classList.remove('gux-overflow-hidden');
+        if (this.iconOnly && this.titleName) {
+            this.hasTooltip = true;
+        }
+        else if ((titleContainer === null || titleContainer === void 0 ? void 0 : titleContainer.scrollWidth) > (titleContainer === null || titleContainer === void 0 ? void 0 : titleContainer.offsetWidth)) {
+            this.root.classList.add('gux-overflow-hidden');
+            this.hasTooltip = true;
+        }
+        else {
+            this.hasTooltip = false;
+        }
+    }
+    render() {
+        return [
+            h("span", { key: '524a31711682c1d110d6d34bc7c16ad32d05b97c', class: {
+                    'gux-title-container': true,
+                    'gux-icon-only': this.iconOnly
+                } }, h("slot", { key: 'c09f9f8836a8715f89c120d72f76634a2d2cfb26' })),
+            this.renderTooltip()
+        ];
+    }
+    renderTooltip() {
+        if (this.hasTooltip) {
+            return (h("gux-tooltip", { "aria-hidden": "true", ref: el => (this.tooltipElement = el), hidden: !this.showTooltip }, this.titleName));
+        }
+    }
+    get root() { return getElement(this); }
 };
 __decorate([
-  OnMutation({ childList: true, subtree: true, characterData: true })
+    OnMutation({ childList: true, subtree: true, characterData: true })
 ], GuxTooltipTitle.prototype, "onMutation", null);
 __decorate([
-  OnResize()
+    OnResize()
 ], GuxTooltipTitle.prototype, "onResize", null);
-GuxTooltipTitle.style = guxTooltipTitleCss;
+GuxTooltipTitle.style = GuxTooltipTitleStyle0;
 
 export { GuxTooltipTitle as gux_tooltip_title };

package/dist/esm/gux-tooltip.entry.js

@@ -1,143 +1,144 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-39e65a0a.js';
-import { a as autoUpdate, c as computePosition, o as offset, f as flip, s as shift, h as hide } from './floating-ui.dom.esm-393a5c50.js';
-import { r as randomHTMLId } from './random-html-id-3354d85c.js';
-import { t as trackComponent } from './usage-66f89ebe.js';
-import { f as findElementById } from './find-element-by-id-a3c82a2d.js';
-import { b as afterNextRender } from './after-next-render-84ec18ad.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-da21b737.js';
+import { a as autoUpdate, o as offset, f as flip, s as shift, h as hide, c as computePosition } from './floating-ui.dom.esm-8b93f9de.js';
+import { r as randomHTMLId } from './random-html-id-81ac821b.js';
+import { t as trackComponent } from './usage-584e4793.js';
+import { f as findElementById } from './find-element-by-id-d0ce6208.js';
+import { b as afterNextRender } from './after-next-render-07a41f53.js';
 
 const guxTooltipCss = ":host{position:fixed;z-index:var(--gse-semantic-zIndex-tooltip);display:none;width:max-content;max-width:250px;pointer-events:none;box-shadow:var(--gse-ui-tooltip-boxShadow-x) var(--gse-ui-tooltip-boxShadow-y) var(--gse-ui-tooltip-boxShadow-blur) var(--gse-ui-tooltip-boxShadow-spread) var(--gse-ui-tooltip-boxShadow-color);opacity:0}:host(.gux-show){display:block;animation-name:fade-in;animation-duration:250ms;animation-delay:1s;animation-fill-mode:forwards}.gux-container{box-sizing:border-box;display:flex;flex-direction:row;gap:var(--gse-ui-tooltip-gap);place-content:center flex-start;padding:var(--gse-ui-tooltip-padding);font-family:var(--gse-ui-tooltip-text-fontFamily);font-size:var(--gse-ui-tooltip-text-fontSize);font-weight:var(--gse-ui-tooltip-text-fontWeight);line-height:var(--gse-ui-tooltip-text-lineHeight);color:var(--gse-ui-tooltip-light-foregroundColor);background-color:var(--gse-ui-tooltip-light-backgroundColor);border:var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color);border-radius:var(--gse-ui-tooltip-borderRadius)}.gux-container ::slotted(gux-icon){align-self:center;width:var(--gse-ui-icon-size-sm);height:var(--gse-ui-icon-size-sm);color:var(--gse-ui-tooltip-light-iconColor)}.gux-container.gux-dark{color:var(--gse-ui-tooltip-dark-foregroundColor);background-color:var(--gse-ui-tooltip-dark-backgroundColor);border-color:var(--gse-ui-tooltip-dark-border-color)}.gux-container.gux-dark ::slotted(gux-icon){align-self:center;width:var(--gse-ui-icon-size-sm);height:var(--gse-ui-icon-size-sm);color:var(--gse-ui-tooltip-dark-iconColor)}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}";
+const GuxTooltipStyle0 = guxTooltipCss;
 
 const GuxTooltip = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.pointerenterHandler = () => this.show();
-    this.pointerleaveHandler = () => this.hide();
-    this.focusinHandler = () => this.show();
-    this.focusoutHandler = () => this.hide();
-    this.forElementListeners = new Map([
-      ['pointerenter', this.pointerenterHandler],
-      ['pointerleave', this.pointerleaveHandler],
-      ['focusin', this.focusinHandler],
-      ['focusout', this.focusoutHandler]
-    ]);
-    this.id = randomHTMLId('gux-tooltip');
-    this.for = undefined;
-    this.placement = 'bottom-start';
-    this.accent = 'light';
-    this.isShown = false;
-  }
-  handleKeyDown(event) {
-    if (event.key === 'Escape' && this.isShown) {
-      this.hide();
-    }
-  }
-  /*
-   * Show tooltip
-   */
-  // eslint-disable-next-line @typescript-eslint/require-await
-  async showTooltip() {
-    this.show();
-  }
-  /*
-   * Hide tooltip
-   */
-  // eslint-disable-next-line @typescript-eslint/require-await
-  async hideTooltip() {
-    this.hide();
-  }
-  runUpdatePosition() {
-    this.cleanupUpdatePosition = autoUpdate(this.forElement, this.root, () => this.updatePosition(), {
-      ancestorScroll: true,
-      elementResize: true,
-      animationFrame: false,
-      ancestorResize: true
-    });
-  }
-  updatePosition() {
-    const middleware = [offset(16), flip(), shift(), hide()];
-    void computePosition(this.forElement, this.root, {
-      placement: this.placement,
-      strategy: 'fixed',
-      middleware: middleware
-    }).then(({ x, y, middlewareData }) => {
-      var _a;
-      Object.assign(this.root.style, {
-        left: `${x}px`,
-        top: `${y}px`,
-        visibility: ((_a = middlewareData.hide) === null || _a === void 0 ? void 0 : _a.referenceHidden) ? 'hidden' : 'visible'
-      });
-      //data-placement needed on the for e2e tests.
-      this.root.setAttribute('data-placement', this.placement);
-    });
-  }
-  show() {
-    this.isShown = true;
-    afterNextRender(() => {
-      this.runUpdatePosition();
-    });
-  }
-  hide() {
-    if (this.cleanupUpdatePosition) {
-      this.cleanupUpdatePosition();
-    }
-    this.isShown = false;
-  }
-  getForElement() {
-    if (this.for) {
-      return findElementById(this.root, this.for);
-    }
-    else {
-      return this.root.parentElement;
-    }
-  }
-  logForAttributeError() {
-    if (this.root.isConnected) {
-      console.error(`gux-tooltip: invalid element supplied to 'for': "${this.for}"`);
-    }
-  }
-  setForElement() {
-    this.forElement = this.getForElement();
-    if (this.forElement) {
-      this.forElement.setAttribute('aria-describedby', this.id);
-      this.forElementListeners.forEach((handler, type) => this.forElement.addEventListener(type, handler));
-    }
-    else {
-      this.logForAttributeError();
-    }
-  }
-  disconnectForElement() {
-    if (this.forElement) {
-      this.forElement.removeAttribute('aria-describedby');
-      this.forElementListeners.forEach((handler, type) => this.forElement.removeEventListener(type, handler));
-    }
-  }
-  updateForElement() {
-    this.disconnectForElement();
-    this.setForElement();
-  }
-  connectedCallback() {
-    this.setForElement();
-  }
-  componentWillLoad() {
-    trackComponent(this.root, { variant: this.placement });
-  }
-  disconnectedCallback() {
-    if (this.cleanupUpdatePosition) {
-      this.cleanupUpdatePosition();
-    }
-    this.disconnectForElement();
-  }
-  render() {
-    return (h(Host, { id: this.id, class: { 'gux-show': this.isShown }, role: "tooltip" }, h("div", { class: {
-        'gux-container': true,
-        [`gux-${this.accent}`]: true
-      }, "data-placement": this.placement }, h("slot", null))));
-  }
-  get root() { return getElement(this); }
-  static get watchers() { return {
-    "for": ["updateForElement"]
-  }; }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.pointerenterHandler = () => this.show();
+        this.pointerleaveHandler = () => this.hide();
+        this.focusinHandler = () => this.show();
+        this.focusoutHandler = () => this.hide();
+        this.forElementListeners = new Map([
+            ['pointerenter', this.pointerenterHandler],
+            ['pointerleave', this.pointerleaveHandler],
+            ['focusin', this.focusinHandler],
+            ['focusout', this.focusoutHandler]
+        ]);
+        this.id = randomHTMLId('gux-tooltip');
+        this.for = undefined;
+        this.placement = 'bottom-start';
+        this.accent = 'light';
+        this.isShown = false;
+    }
+    handleKeyDown(event) {
+        if (event.key === 'Escape' && this.isShown) {
+            this.hide();
+        }
+    }
+    /*
+     * Show tooltip
+     */
+    // eslint-disable-next-line @typescript-eslint/require-await
+    async showTooltip() {
+        this.show();
+    }
+    /*
+     * Hide tooltip
+     */
+    // eslint-disable-next-line @typescript-eslint/require-await
+    async hideTooltip() {
+        this.hide();
+    }
+    runUpdatePosition() {
+        this.cleanupUpdatePosition = autoUpdate(this.forElement, this.root, () => this.updatePosition(), {
+            ancestorScroll: true,
+            elementResize: true,
+            animationFrame: false,
+            ancestorResize: true
+        });
+    }
+    updatePosition() {
+        const middleware = [offset(16), flip(), shift(), hide()];
+        void computePosition(this.forElement, this.root, {
+            placement: this.placement,
+            strategy: 'fixed',
+            middleware: middleware
+        }).then(({ x, y, middlewareData }) => {
+            var _a;
+            Object.assign(this.root.style, {
+                left: `${x}px`,
+                top: `${y}px`,
+                visibility: ((_a = middlewareData.hide) === null || _a === void 0 ? void 0 : _a.referenceHidden) ? 'hidden' : 'visible'
+            });
+            //data-placement needed on the for e2e tests.
+            this.root.setAttribute('data-placement', this.placement);
+        });
+    }
+    show() {
+        this.isShown = true;
+        afterNextRender(() => {
+            this.runUpdatePosition();
+        });
+    }
+    hide() {
+        if (this.cleanupUpdatePosition) {
+            this.cleanupUpdatePosition();
+        }
+        this.isShown = false;
+    }
+    getForElement() {
+        if (this.for) {
+            return findElementById(this.root, this.for);
+        }
+        else {
+            return this.root.parentElement;
+        }
+    }
+    logForAttributeError() {
+        if (this.root.isConnected) {
+            console.error(`gux-tooltip: invalid element supplied to 'for': "${this.for}"`);
+        }
+    }
+    setForElement() {
+        this.forElement = this.getForElement();
+        if (this.forElement) {
+            this.forElement.setAttribute('aria-describedby', this.id);
+            this.forElementListeners.forEach((handler, type) => this.forElement.addEventListener(type, handler));
+        }
+        else {
+            this.logForAttributeError();
+        }
+    }
+    disconnectForElement() {
+        if (this.forElement) {
+            this.forElement.removeAttribute('aria-describedby');
+            this.forElementListeners.forEach((handler, type) => this.forElement.removeEventListener(type, handler));
+        }
+    }
+    updateForElement() {
+        this.disconnectForElement();
+        this.setForElement();
+    }
+    connectedCallback() {
+        this.setForElement();
+    }
+    componentWillLoad() {
+        trackComponent(this.root, { variant: this.placement });
+    }
+    disconnectedCallback() {
+        if (this.cleanupUpdatePosition) {
+            this.cleanupUpdatePosition();
+        }
+        this.disconnectForElement();
+    }
+    render() {
+        return (h(Host, { key: 'a7066dbd22cbf308e07fbb3829886eefcecddff8', id: this.id, class: { 'gux-show': this.isShown }, role: "tooltip" }, h("div", { key: 'd004181fd4991d522c18a1e43a57029a929eb795', class: {
+                'gux-container': true,
+                [`gux-${this.accent}`]: true
+            }, "data-placement": this.placement }, h("slot", { key: '4d518923b91d8d10345e244d3b94bc1138b110e0' }))));
+    }
+    get root() { return getElement(this); }
+    static get watchers() { return {
+        "for": ["updateForElement"]
+    }; }
 };
-GuxTooltip.style = guxTooltipCss;
+GuxTooltip.style = GuxTooltipStyle0;
 
 export { GuxTooltip as gux_tooltip };