npm - genesys-spark-components - Versions diffs - 4.0.0-beta.4 → 4.0.0-beta.41 - Mend

genesys-spark-components 4.0.0-beta.4 → 4.0.0-beta.41

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2021) hide show

package/dist/cjs/gux-toast.cjs.entry.js CHANGED Viewed

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-010f0789.js');
-const hasSlot = require('./has-slot-2e73d6e7.js');
+const index = require('./index-39160f18.js');
+const usage = require('./usage-7bd0f4a2.js');
+const hasSlot = require('./has-slot-429f8b9e.js');
-const guxToastCss = ".gux-toast{position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;gap:var(--gse-ui-toast-gap);width:var(--gse-ui-toast-wrappingWidth);padding:var(--gse-ui-toast-margin);margin-bottom:var(--gse-ui-toast-stacking-gap);border-radius:var(--gse-ui-toast-borderRadius);box-shadow:var(--gse-ui-toast-boxShadow-x) var(--gse-ui-toast-boxShadow-y) var(--gse-ui-toast-boxShadow-blur) var(--gse-ui-toast-boxShadow-spread) var(--gse-ui-toast-boxShadow-color)}.gux-toast .gux-icon ::slotted(gux-icon){width:var(--gse-ui-toast-icon) !important;height:var(--gse-ui-toast-icon) !important}.gux-toast .gux-icon gux-icon{width:var(--gse-ui-toast-icon) !important;height:var(--gse-ui-toast-icon) !important}.gux-toast .gux-icon.gux-icon-error{color:var(--gse-ui-toast-error-iconColor)}.gux-toast .gux-icon.gux-icon-warning{color:var(--gse-ui-toast-warning-iconColor)}.gux-toast .gux-icon.gux-icon-success{color:var(--gse-ui-toast-success-iconColor)}.gux-toast .gux-icon.gux-icon-info{color:var(--gse-ui-toast-info-iconColor)}.gux-toast .gux-icon.gux-icon-action{color:var(--gse-ui-toast-action-iconColor)}.gux-toast .gux-content{display:flex;flex:1 1 auto;flex-direction:column;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;align-self:auto;justify-content:flex-start;order:0;gap:var(--gse-ui-toast-gapButton)}.gux-toast .gux-content .gux-message{display:flex;flex-direction:column;gap:var(--gse-ui-toast-gapText)}.gux-toast .gux-content .gux-message .gux-message-title{font-family:var(--gse-ui-toast-heading-fontFamily);line-height:var(--gse-ui-toast-heading-lineHeight);font-size:var(--gse-ui-toast-heading-fontSize);font-weight:var(--gse-ui-toast-heading-fontWeight)}.gux-toast .gux-content .gux-message .gux-message-body{font-family:var(--gse-ui-toast-text-fontFamily);line-height:var(--gse-ui-toast-text-lineHeight);font-size:var(--gse-ui-toast-text-fontSize)}.gux-toast .gux-content .gux-buttons-bar{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;gap:var(--gse-ui-toast-buttonBar-gap)}.gux-toast.gux-toast-success{background-color:var(--gse-ui-toast-success-backgroundColor)}.gux-toast.gux-toast-success .gux-message{color:var(--gse-ui-toast-success-foregroundColor)}.gux-toast.gux-toast-warning{background-color:var(--gse-ui-toast-warning-backgroundColor)}.gux-toast.gux-toast-warning .gux-message{color:var(--gse-ui-toast-warning-foregroundColor)}.gux-toast.gux-toast-error{background-color:var(--gse-ui-toast-error-backgroundColor)}.gux-toast.gux-toast-error .gux-message{color:var(--gse-ui-toast-error-foregroundColor)}.gux-toast.gux-toast-info{background-color:var(--gse-ui-toast-info-backgroundColor)}.gux-toast.gux-toast-info .gux-message{color:var(--gse-ui-toast-info-foregroundColor)}.gux-toast.gux-toast-action{background-color:var(--gse-ui-toast-action-backgroundColor)}.gux-toast.gux-toast-action .gux-message{color:var(--gse-ui-toast-action-foregroundColor)}";
+const guxToastCss = ".gux-toast{position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-toast-gap);align-content:stretch;align-items:flex-start;justify-content:flex-start;width:var(--gse-ui-toast-wrappingWidth);padding:var(--gse-ui-toast-margin);margin-bottom:var(--gse-ui-toast-stacking-gap);border-radius:var(--gse-ui-toast-borderRadius);box-shadow:var(--gse-ui-toast-boxShadow-x) var(--gse-ui-toast-boxShadow-y) var(--gse-ui-toast-boxShadow-blur) var(--gse-ui-toast-boxShadow-spread) var(--gse-ui-toast-boxShadow-color)}.gux-toast .gux-icon ::slotted(gux-icon){width:var(--gse-ui-toast-icon) !important;height:var(--gse-ui-toast-icon) !important}.gux-toast .gux-icon gux-icon{width:var(--gse-ui-toast-icon) !important;height:var(--gse-ui-toast-icon) !important}.gux-toast .gux-icon.gux-icon-error{color:var(--gse-ui-toast-error-iconColor)}.gux-toast .gux-icon.gux-icon-warning{color:var(--gse-ui-toast-warning-iconColor)}.gux-toast .gux-icon.gux-icon-success{color:var(--gse-ui-toast-success-iconColor)}.gux-toast .gux-icon.gux-icon-info{color:var(--gse-ui-toast-info-iconColor)}.gux-toast .gux-icon.gux-icon-action{color:var(--gse-ui-toast-action-iconColor)}.gux-toast .gux-content{display:flex;flex:1 1 auto;flex-direction:column;flex-wrap:nowrap;gap:var(--gse-ui-toast-gapButton);align-content:stretch;align-items:flex-start;align-self:auto;justify-content:flex-start;order:0}.gux-toast .gux-content .gux-message{display:flex;flex-direction:column;gap:var(--gse-ui-toast-gapText)}.gux-toast .gux-content .gux-message .gux-message-title{font-family:var(--gse-ui-toast-heading-fontFamily);font-size:var(--gse-ui-toast-heading-fontSize);font-weight:var(--gse-ui-toast-heading-fontWeight);line-height:var(--gse-ui-toast-heading-lineHeight)}.gux-toast .gux-content .gux-message .gux-message-body{font-family:var(--gse-ui-toast-text-fontFamily);font-size:var(--gse-ui-toast-text-fontSize);line-height:var(--gse-ui-toast-text-lineHeight)}.gux-toast .gux-content .gux-buttons-bar{display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-toast-buttonBar-gap);justify-content:flex-start}.gux-toast.gux-toast-success{background-color:var(--gse-ui-toast-success-backgroundColor)}.gux-toast.gux-toast-success .gux-message{color:var(--gse-ui-toast-success-foregroundColor)}.gux-toast.gux-toast-warning{background-color:var(--gse-ui-toast-warning-backgroundColor)}.gux-toast.gux-toast-warning .gux-message{color:var(--gse-ui-toast-warning-foregroundColor)}.gux-toast.gux-toast-error{background-color:var(--gse-ui-toast-error-backgroundColor)}.gux-toast.gux-toast-error .gux-message{color:var(--gse-ui-toast-error-foregroundColor)}.gux-toast.gux-toast-info{background-color:var(--gse-ui-toast-info-backgroundColor)}.gux-toast.gux-toast-info .gux-message{color:var(--gse-ui-toast-info-foregroundColor)}.gux-toast.gux-toast-action{background-color:var(--gse-ui-toast-action-backgroundColor)}.gux-toast.gux-toast-action .gux-message{color:var(--gse-ui-toast-action-foregroundColor)}";
 const GuxToast = class {
   constructor(hostRef) {
@@ -41,7 +41,7 @@ const GuxToast = class {
     return (index.h("div", { class: "gux-buttons-bar" }, index.h("slot", { name: "link" })));
   }
   renderActions() {
-    return (index.h("div", { class: "gux-buttons-bar" }, this.hasSecondaryButton && (index.h("gux-button-slot-beta", null, index.h("slot", { name: "secondary-button" }))), index.h("gux-button-slot-beta", { accent: this.hasSecondaryButton ? 'primary' : 'tertiary' }, index.h("slot", { name: "primary-button" }))));
+    return (index.h("div", { class: "gux-buttons-bar" }, this.hasSecondaryButton && (index.h("gux-button-slot", null, index.h("slot", { name: "secondary-button" }))), index.h("gux-button-slot", { accent: this.hasSecondaryButton ? 'primary' : 'tertiary' }, index.h("slot", { name: "primary-button" }))));
   }
   render() {
     return (index.h("div", { class: `gux-toast gux-toast-${this.toastType}` }, index.h("div", { class: `gux-icon gux-icon-${this.toastType}` }, this.renderToastIcon()), index.h("div", { class: "gux-content" }, index.h("div", { class: "gux-message" }, index.h("gux-truncate", { class: "gux-message-title", "max-lines": 1 }, index.h("slot", { name: "title" })), index.h("gux-truncate", { class: "gux-message-body", "max-lines": 2 }, index.h("slot", { name: "message" }))), this.toastType !== 'action' && this.hasLink && this.renderLink(), this.toastType === 'action' &&

package/dist/cjs/gux-toggle-slider.cjs.entry.js CHANGED Viewed

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-0d0fdb85.js');
+const index = require('./index-39160f18.js');
-const guxToggleSliderCss = "gux-toggle-slider{display:flex;align-items:center;padding:2px;outline:none}gux-toggle-slider .gux-toggle-slider{position:relative;display:inline-block;flex:0 1 auto;align-self:auto;order:0;width:30px;height:16px;border-radius:8px}gux-toggle-slider .gux-toggle-slider.gux-disabled{pointer-events:none;cursor:default;opacity:0.5}gux-toggle-slider .gux-toggle-slider:focus-visible{outline:none;outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}gux-toggle-slider .gux-toggle-slider .gux-slider{position:absolute;inset:0;background-color:#6b7585;border-radius:8px;transition:background-color 0.5s ease}gux-toggle-slider .gux-toggle-slider .gux-slider .gux-switch{position:absolute;bottom:1px;left:1px;width:14px;height:14px;content:'';background-color:#fdfdfd;border-radius:50%;transition:0.5s}gux-toggle-slider .gux-toggle-slider .gux-slider .gux-switch gux-icon{position:absolute;inset:0;width:12px;height:12px;padding:1px;color:#fdfdfd;opacity:0;transition:color 0.5s linear}gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider{background-color:#2a60c8}gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider .gux-switch{transform:translateX(14px)}gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider .gux-switch gux-icon{color:#2a60c8;opacity:1;transition:opacity 0.25s linear;transition-delay:0.25s}";
+const guxToggleSliderCss = "gux-toggle-slider{display:flex;align-items:center;padding:2px;outline:none}gux-toggle-slider .gux-toggle-slider{position:relative;display:inline-block;flex:0 1 auto;align-self:auto;order:0;width:var(--gse-ui-toggle-track-width);height:var(--gse-ui-toggle-track-height);border-radius:var(--gse-ui-toggle-track-borderRadius)}gux-toggle-slider .gux-toggle-slider.gux-error .gux-slider{background-color:var(--gse-ui-toggle-track-error-off-backgroundColor)}gux-toggle-slider .gux-toggle-slider.gux-error .gux-slider .gux-switch{border:var(--gse-ui-toggle-handle-error-border-width) var(--gse-ui-toggle-handle-error-border-style) var(--gse-ui-toggle-handle-error-border-color)}gux-toggle-slider .gux-toggle-slider.gux-error.gux-checked .gux-slider{background-color:var(--gse-ui-toggle-track-error-on-backgroundColor)}gux-toggle-slider .gux-toggle-slider.gux-disabled{pointer-events:none;cursor:default;background-color:var(--gse-ui-toggle-track-disabled-off-backgroundColor);opacity:var(--gse-ui-toggle-disabled-opacity)}gux-toggle-slider .gux-toggle-slider:focus-visible{border-radius:var(--gse-ui-toggle-focus-borderRadius);outline:var(--gse-ui-toggle-focus-border-width) var(--gse-ui-toggle-focus-border-style) var(--gse-ui-toggle-focus-border-color);outline-offset:var(--gse-ui-toggle-focus-offset)}gux-toggle-slider .gux-toggle-slider .gux-slider{position:absolute;inset:0;background-color:var(--gse-ui-toggle-track-enabled-off-backgroundColor);border-radius:calc(var(--gse-ui-toggle-track-height) / 2);transition:background-color 0.5s ease}gux-toggle-slider .gux-toggle-slider .gux-slider:hover{background-color:var(--gse-ui-toggle-track-hover-off-backgroundColor)}gux-toggle-slider .gux-toggle-slider .gux-slider .gux-switch{position:absolute;bottom:calc((var(--gse-ui-toggle-track-height) - var(--gse-ui-toggle-handle-width)) / 2);left:calc((var(--gse-ui-toggle-track-height) - var(--gse-ui-toggle-handle-width)) / 2);width:calc(var(--gse-ui-toggle-handle-width) - 4px);height:calc(var(--gse-ui-toggle-handle-height) - 4px);color:var(--gse-ui-toggle-handle-foregroundColor);content:\"\";background-color:var(--gse-ui-toggle-handle-backgroundColor);border:var(--gse-ui-toggle-handle-enabled-border-width) var(--gse-ui-toggle-handle-enabled-border-style) var(--gse-ui-toggle-handle-enabled-border-color);border-radius:var(--gse-ui-toggle-handle-borderRadius);transition:0.5s}gux-toggle-slider .gux-toggle-slider .gux-slider .gux-switch gux-icon{position:absolute;inset:0;width:calc(var(--gse-ui-toggle-handle-width) - 2);height:calc(var(--gse-ui-toggle-handle-width) - 2);padding:1px;color:#fdfdfd;opacity:0;transition:color 0.5s linear}gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider{background-color:var(--gse-ui-toggle-track-enabled-on-backgroundColor)}gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider.gux-disabled{background-color:var(--gse-ui-toggle-track-disabled-on-backgroundColor)}gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider.gux-disabled .gux-switch{border:var(--gse-ui-toggle-handle-hover-disabled-border-width) var(--gse-ui-toggle-handle-hover-disabled-border-style) var(--gse-ui-toggle-handle-hover-disabled-border-color)}gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider:hover{background-color:var(--gse-ui-toggle-track-hover-on-backgroundColor)}gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider:hover .gux-switch{border:var(--gse-ui-toggle-handle-hover-border-width) var(--gse-ui-toggle-handle-hover-border-style) var(--gse-ui-toggle-handle-hover-border-color)}gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider .gux-switch{transform:translateX(calc(var(--gse-ui-toggle-track-width) - var(--gse-ui-toggle-track-height)))}gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider .gux-switch gux-icon{color:#2a60c8;opacity:1;transition:opacity 0.25s linear;transition-delay:0.25s}";
 const GuxToggleSlider = class {
   constructor(hostRef) {
@@ -28,11 +28,13 @@ const GuxToggleSlider = class {
     }
   }
   render() {
+    const isError = this.errorId.length > 0;
     return (index.h("div", { class: {
         'gux-toggle-slider': true,
         'gux-checked': this.checked,
-        'gux-disabled': this.disabled
-      }, role: "checkbox", "aria-checked": this.checked.toString(), "aria-disabled": this.disabled.toString(), tabindex: this.disabled ? '' : '0', ref: el => (this.checkboxElement = el) }, index.h("div", { class: "gux-slider" }, index.h("div", { class: "gux-switch" }, index.h("gux-icon", { "icon-name": "checkmark", decorative: true })))));
+        'gux-disabled': this.disabled,
+        'gux-error': isError
+      }, role: "checkbox", "aria-checked": this.checked.toString(), "aria-disabled": this.disabled.toString(), tabindex: this.disabled ? '' : '0', ref: el => (this.checkboxElement = el) }, index.h("div", { class: "gux-slider" }, index.h("div", { class: "gux-switch" }, !isError && index.h("gux-icon", { "icon-name": "checkmark", decorative: true })))));
   }
 };
 GuxToggleSlider.style = guxToggleSliderCss;

package/dist/cjs/gux-toggle.cjs.entry.js CHANGED Viewed

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-010f0789.js');
-const randomHtmlId = require('./random-html-id-b86b61c0.js');
-const index$1 = require('./index-9bbde1aa.js');
-require('./get-closest-element-ab4b2eee.js');
+const index = require('./index-39160f18.js');
+const usage = require('./usage-7bd0f4a2.js');
+const randomHtmlId = require('./random-html-id-32ef8847.js');
+const index$1 = require('./index-ff762de3.js');
+require('./get-closest-element-26894e5a.js');
 const defaultAriaLabel = "Toggle Switch";
 const toggleIsLoading = "Toggle is loading";
@@ -17,7 +17,7 @@ const translationResources = {
 	toggleIsFinishedLoading: toggleIsFinishedLoading
 };
-const guxToggleCss = ":host{display:block;margin:2px;color:#2e394c;outline:none}:host(.gux-display-inline){display:inline-block}.gux-toggle-container{cursor:pointer}.gux-toggle-container.gux-disabled{pointer-events:none;cursor:default}.gux-toggle-container.gux-disabled .gux-toggle-input .gux-toggle-label .gux-toggle-label-text{opacity:0.5}.gux-toggle-container.gux-toggle-label-left .gux-toggle-input{flex-direction:row-reverse}.gux-toggle-container.gux-toggle-label-left .gux-toggle-input .gux-toggle-label .gux-toggle-label-text{place-items:end}.gux-toggle-container.gux-toggle-label-left .gux-toggle-error{float:right}.gux-toggle-container .gux-toggle-input{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start}.gux-toggle-container .gux-toggle-input .gux-toggle-label{position:relative;display:inline-block;padding:0 4px}.gux-toggle-container .gux-toggle-input .gux-toggle-label .gux-toggle-label-text{display:grid;grid-template-areas:'inner-div';place-items:start}.gux-toggle-container .gux-toggle-input .gux-toggle-label .gux-toggle-label-text .gux-toggle-label-text-inner{position:relative;grid-area:inner-div}.gux-toggle-container .gux-toggle-input .gux-toggle-label .gux-toggle-label-text .gux-toggle-label-text-inner.gux-hidden{visibility:hidden}.gux-toggle-container .gux-toggle-input .gux-toggle-label .gux-toggle-label-loading{position:absolute;inset:0;display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:center}.gux-toggle-container .gux-toggle-error .gux-toggle-error-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-toggle-container .gux-toggle-error .gux-toggle-error-container gux-icon{flex:0 1 auto;align-self:auto;order:0;width:16px;height:16px;margin:0 4px;color:#ea0b0b}.gux-toggle-container .gux-toggle-error .gux-toggle-error-container .gux-toggle-error-message{flex:0 1 auto;align-self:auto;order:0}";
+const guxToggleCss = ":host{display:block;margin:2px;color:#2e394c;outline:none}:host(.gux-display-inline){display:inline-block}.gux-toggle-container{cursor:pointer}.gux-toggle-container.gux-disabled{pointer-events:none;cursor:default}.gux-toggle-container.gux-disabled .gux-toggle-input .gux-toggle-label .gux-toggle-label-text{opacity:var(--gse-ui-toggle-disabled-opacity)}.gux-toggle-container.gux-toggle-label-left .gux-toggle-input{flex-direction:row-reverse}.gux-toggle-container.gux-toggle-label-left .gux-toggle-input .gux-toggle-label .gux-toggle-label-text{place-items:end}.gux-toggle-container.gux-toggle-label-left .gux-toggle-error{float:right}.gux-toggle-container .gux-toggle-input{display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-toggle-gap);align-content:stretch;align-items:flex-start;justify-content:flex-start}.gux-toggle-container .gux-toggle-input .gux-toggle-label{position:relative;display:inline-block;padding:0 4px;font-family:var(--gse-ui-toggle-label-fontFamily);font-size:var(--gse-ui-toggle-label-fontSize);font-weight:var(--gse-ui-toggle-label-fontWeight)}.gux-toggle-container .gux-toggle-input .gux-toggle-label .gux-toggle-label-text{display:grid;grid-template-areas:\"inner-div\";place-items:start;font-family:var(--gse-ui-toggle-label-fontWeight)}.gux-toggle-container .gux-toggle-input .gux-toggle-label .gux-toggle-label-text .gux-toggle-label-text-inner{position:relative;grid-area:inner-div}.gux-toggle-container .gux-toggle-input .gux-toggle-label .gux-toggle-label-text .gux-toggle-label-text-inner.gux-hidden{visibility:hidden}.gux-toggle-container .gux-toggle-input .gux-toggle-label .gux-toggle-label-loading{position:absolute;inset:0;display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:center}.gux-toggle-container .gux-toggle-error .gux-toggle-error-container{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;font-size:var(--gse-ui-toggle-label-fontSize);color:var(--gse-ui-formControl-helper-errorColor)}.gux-toggle-container .gux-toggle-error .gux-toggle-error-container gux-icon{flex:0 1 auto;align-self:auto;order:0;width:var(--gse-ui-button-icon-size);height:var(--gse-ui-button-icon-size);margin:0 4px;color:var(--gse-ui-formControl-helper-errorColor)}.gux-toggle-container .gux-toggle-error .gux-toggle-error-container .gux-toggle-error-message{flex:0 1 auto;align-self:auto;order:0}";
 const GuxToggle = class {
   constructor(hostRef) {

package/dist/cjs/gux-tooltip-title.cjs.entry.js CHANGED Viewed

@@ -2,9 +2,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-0d0fdb85.js');
-const logError = require('./log-error-d46c02b7.js');
-const onMutation = require('./on-mutation-247f99dd.js');
+const index = require('./index-39160f18.js');
+const logError = require('./log-error-8a92241e.js');
+const onMutation = require('./on-mutation-f396cc0e.js');
+const afterNextRender = require('./after-next-render-a023ef47.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;left:-20px;flex-shrink:0;width:16px}";
@@ -54,6 +55,10 @@ const GuxTooltipTitle = class {
   onMutation() {
     this.titleName = this.setTooltipTitleText();
     this.checkForTooltipHideOrShow();
+    // Handle checking if the tooltip should hide/show for dynamic content
+    afterNextRender.afterNextRenderTimeout(() => {
+      this.checkForTooltipHideOrShow();
+    }, 500);
   }
   componentWillLoad() {
     this.titleName = this.setTooltipTitleText();

package/dist/cjs/gux-tooltip.cjs.entry.js CHANGED Viewed

@@ -2,14 +2,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-0d0fdb85.js');
-const floatingUi_dom_esm = require('./floating-ui.dom.esm-cad0a9cf.js');
-const randomHtmlId = require('./random-html-id-b86b61c0.js');
-const usage = require('./usage-010f0789.js');
-const findElementById = require('./find-element-by-id-99f1f933.js');
-const afterNextRender = require('./after-next-render-a09f528a.js');
+const index = require('./index-39160f18.js');
+const floatingUi_dom_esm = require('./floating-ui.dom.esm-793074c6.js');
+const randomHtmlId = require('./random-html-id-32ef8847.js');
+const usage = require('./usage-7bd0f4a2.js');
+const findElementById = require('./find-element-by-id-9c3e0b1b.js');
+const afterNextRender = require('./after-next-render-a023ef47.js');
-const guxTooltipCss = ":host{position:fixed;z-index:var(--gux-zindex-tooltip, 1);display:none;width:max-content;max-width:250px;overflow:hidden;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;padding:6px 12px;color:#2e394c;pointer-events:none;background-color:#fdfdfd;border:1px solid #b4bccb;border-radius:4px}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}";
+const guxTooltipCss = ":host{position:fixed;z-index:var(--gux-zindex-tooltip, 1);display:none;width:max-content;max-width:250px;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);align-content:center;justify-content: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);pointer-events:none;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[data-placement=bottom] .gux-arrow,.gux-container[data-placement=bottom-start] .gux-arrow,.gux-container[data-placement=bottom-end] .gux-arrow{border-top:var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color);border-left:var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color)}.gux-container[data-placement=top] .gux-arrow,.gux-container[data-placement=top-start] .gux-arrow,.gux-container[data-placement=top-end] .gux-arrow{border-right:var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color);border-bottom:var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color)}.gux-container[data-placement=left] .gux-arrow,.gux-container[data-placement=left-start] .gux-arrow,.gux-container[data-placement=left-end] .gux-arrow{border-top:var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color);border-right:var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color)}.gux-container[data-placement=right] .gux-arrow,.gux-container[data-placement=right-start] .gux-arrow,.gux-container[data-placement=right-end] .gux-arrow{border-bottom:var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color);border-left:var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color)}.gux-container .gux-arrow{position:absolute;width:13px;height:13px;background:inherit;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[data-placement=bottom] .gux-arrow,.gux-container.gux-dark[data-placement=bottom-start] .gux-arrow,.gux-container.gux-dark[data-placement=bottom-end] .gux-arrow{border-top:var(--gse-ui-tooltip-dark-border-width) var(--gse-ui-tooltip-dark-border-style) var(--gse-ui-tooltip-dark-border-color);border-left:var(--gse-ui-tooltip-dark-border-width) var(--gse-ui-tooltip-dark-border-style) var(--gse-ui-tooltip-dark-border-color)}.gux-container.gux-dark[data-placement=top] .gux-arrow,.gux-container.gux-dark[data-placement=top-start] .gux-arrow,.gux-container.gux-dark[data-placement=top-end] .gux-arrow{border-right:var(--gse-ui-tooltip-dark-border-width) var(--gse-ui-tooltip-dark-border-style) var(--gse-ui-tooltip-dark-border-color);border-bottom:var(--gse-ui-tooltip-dark-border-width) var(--gse-ui-tooltip-dark-border-style) var(--gse-ui-tooltip-dark-border-color)}.gux-container.gux-dark[data-placement=left] .gux-arrow,.gux-container.gux-dark[data-placement=left-start] .gux-arrow,.gux-container.gux-dark[data-placement=left-end] .gux-arrow{border-top:var(--gse-ui-tooltip-dark-border-width) var(--gse-ui-tooltip-dark-border-style) var(--gse-ui-tooltip-dark-border-color);border-right:var(--gse-ui-tooltip-dark-border-width) var(--gse-ui-tooltip-dark-border-style) var(--gse-ui-tooltip-dark-border-color)}.gux-container.gux-dark[data-placement=right] .gux-arrow,.gux-container.gux-dark[data-placement=right-start] .gux-arrow,.gux-container.gux-dark[data-placement=right-end] .gux-arrow{border-bottom:var(--gse-ui-tooltip-dark-border-width) var(--gse-ui-tooltip-dark-border-style) var(--gse-ui-tooltip-dark-border-color);border-left:var(--gse-ui-tooltip-dark-border-width) var(--gse-ui-tooltip-dark-border-style) 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 GuxTooltip = class {
   constructor(hostRef) {
@@ -21,6 +21,8 @@ const GuxTooltip = class {
     this.id = randomHtmlId.randomHTMLId('gux-tooltip');
     this.for = undefined;
     this.placement = 'bottom-start';
+    this.accent = 'light';
+    this.anchor = false;
     this.isShown = false;
   }
   handleKeyDown(event) {
@@ -51,17 +53,41 @@ const GuxTooltip = class {
     });
   }
   updatePosition() {
+    const middleware = [floatingUi_dom_esm.offset(16), floatingUi_dom_esm.flip(), floatingUi_dom_esm.shift()];
+    if (this.anchor) {
+      middleware.push(floatingUi_dom_esm.arrow({ element: this.arrowElement }));
+    }
     void floatingUi_dom_esm.computePosition(this.forElement, this.root, {
       placement: this.placement,
       strategy: 'fixed',
-      middleware: [floatingUi_dom_esm.offset(16), floatingUi_dom_esm.flip(), floatingUi_dom_esm.shift()]
-    }).then(({ x, y, placement }) => {
+      middleware: middleware
+    }).then(({ x, y, middlewareData, placement }) => {
       Object.assign(this.root.style, {
         left: `${x}px`,
         top: `${y}px`
       });
-      // data-placement is currently only used for e2e tests
-      this.root.setAttribute('data-placement', placement);
+      //data-placement needed on the for e2e tests.
+      this.root.setAttribute('data-placement', this.placement);
+      const side = placement.split('-')[0];
+      const staticSide = {
+        top: 'bottom',
+        right: 'left',
+        bottom: 'top',
+        left: 'right'
+      }[side];
+      if (middlewareData.arrow) {
+        //This is 13 because this makes the arrow look aligned.
+        const arrowLen = 13;
+        const { x, y } = middlewareData.arrow;
+        Object.assign(this.arrowElement.style, {
+          left: x != null ? `${x}px` : '',
+          top: y != null ? `${y}px` : '',
+          right: '',
+          bottom: '',
+          [staticSide]: `${-arrowLen / 2}px`,
+          transform: 'rotate(45deg)'
+        });
+      }
     });
   }
   show() {
@@ -89,6 +115,11 @@ const GuxTooltip = class {
       console.error(`gux-tooltip: invalid element supplied to 'for': "${this.for}"`);
     }
   }
+  renderAnchor() {
+    if (this.anchor) {
+      return (index.h("div", { ref: (el) => (this.arrowElement = el), class: "gux-arrow" }));
+    }
+  }
   connectedCallback() {
     this.getForElement();
     if (this.forElement) {
@@ -103,7 +134,7 @@ const GuxTooltip = class {
     }
   }
   componentWillLoad() {
-    usage.trackComponent(this.root);
+    usage.trackComponent(this.root, { variant: this.placement });
   }
   disconnectedCallback() {
     var _a, _b, _c, _d, _e;
@@ -117,7 +148,10 @@ const GuxTooltip = class {
     (_e = this.forElement) === null || _e === void 0 ? void 0 : _e.removeEventListener('focusout', this.focusoutHandler);
   }
   render() {
-    return (index.h(index.Host, { id: this.id, class: { 'gux-show': this.isShown }, role: "tooltip" }, index.h("div", { class: "gux-container" }, index.h("slot", null))));
+    return (index.h(index.Host, { id: this.id, class: { 'gux-show': this.isShown }, role: "tooltip" }, index.h("div", { class: {
+        'gux-container': true,
+        [`gux-${this.accent}`]: true
+      }, "data-placement": this.placement }, index.h("slot", null), this.renderAnchor())));
   }
   get root() { return index.getElement(this); }
 };

package/dist/cjs/gux-truncate.cjs.entry.js CHANGED Viewed

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-0d0fdb85.js');
-const onMutation = require('./on-mutation-247f99dd.js');
-const onResize = require('./on-resize-ee6a4b87.js');
+const index = require('./index-39160f18.js');
+const onMutation = require('./on-mutation-f396cc0e.js');
+const onResize = require('./on-resize-b4982908.js');
 function getTextContentFromNodes(elements) {
   return elements