genesys-spark-components 4.0.0-beta.43 → 4.0.0-beta.45

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-time-zone-picker/gux-form-field-time-zone-picker.css

@@ -0,0 +1,107 @@
+/*
+ * Typography styles and mixins.
+ */
+/* Helpers */
+/* Base typography */
+/* Headings */
+/* Anchor */
+/* Custom Styles */
+/* stylelint-disable-next-line selector-class-pattern */ /* stylelint-disable-next-line selector-class-pattern */
+/* stylelint-disable-next-line selector-class-pattern */
+/* stylelint-disable-next-line selector-class-pattern */
+.gux-form-field-fieldset-container {
+  display: flex;
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: none;
+}
+
+.gux-form-field-error {
+  display: none;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: var(--gse-ui-formControl-helper-errorPadding);
+  font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
+  font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
+  line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
+  color: var(--gse-ui-formControl-helper-errorColor);
+}
+.gux-form-field-error.gux-show {
+  display: flex;
+}
+.gux-form-field-error gux-icon {
+  flex: 0 1 auto;
+  align-self: auto;
+  order: 0;
+  min-width: var(--gse-ui-icon-size-sm);
+  min-height: var(--gse-ui-icon-size-sm);
+  margin-right: var(--gse-ui-formControl-helper-gap);
+  color: var(--gse-ui-formControl-helper-errorColor);
+}
+.gux-form-field-error .gux-message {
+  flex: 0 1 auto;
+  align-self: auto;
+  order: 0;
+}
+
+.gux-form-field-legend-label.gux-required::after {
+  color: var(--gse-ui-formControl-label-indicator-requiredColor);
+  content: " *";
+}
+.gux-form-field-legend-label.gux-beside {
+  position: relative;
+  top: 8px;
+  float: left;
+  width: fit-content;
+  min-width: 45px;
+  margin-right: var(--gse-ui-formControl-label-gap);
+}
+.gux-form-field-legend-label.gux-above {
+  padding: var(--gse-ui-formControl-label-padding);
+}
+.gux-form-field-legend-label.gux-screenreader {
+  position: absolute;
+  top: auto;
+  left: -10000px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+.gux-form-field-help {
+  display: none;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: stretch;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: var(--gse-ui-formControl-helper-padding);
+  font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
+  font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
+  line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
+  color: var(--gse-ui-formControl-helper-defaultColor);
+}
+.gux-form-field-help.gux-show {
+  display: flex;
+}
+.gux-form-field-help .gux-message {
+  flex: 0 1 auto;
+  align-self: none;
+  order: 0;
+}
+
+::slotted(label) {
+  font-family: var(--gse-ui-formControl-label-text-fontFamily);
+  font-size: var(--gse-ui-formControl-label-text-fontSize);
+  font-weight: var(--gse-ui-formControl-label-text-fontWeight);
+  line-height: var(--gse-ui-formControl-label-text-lineHeight);
+  color: var(--gse-ui-formControl-label-labelColor);
+}
+
+.gux-input-and-error-container {
+  flex-grow: 1;
+}

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-time-zone-picker/gux-form-field-time-zone-picker.js

@@ -0,0 +1,156 @@
+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 { h } from "@stencil/core";
+import { buildI18nForComponent } from "../../../../../i18n";
+import { OnMutation } from "../../../../../utils/decorator/on-mutation";
+import { onDisabledChange, onRequiredChange } from "../../../../../utils/dom/on-attribute-change";
+import { hasSlot } from "../../../../../utils/dom/has-slot";
+import { getSlotTextContent } from "../../../../../utils/dom/get-slot-text-content";
+import { GuxFormFieldHelp, GuxFormFieldError, GuxFormFieldFieldsetContainer, GuxFormFieldLegendLabel } from "../../functional-components/functional-components";
+import { getComputedLabelPosition, validateFormIds } from "../../gux-form-field.service";
+import { trackComponent } from "../../../../../utils/tracking/usage";
+import componentResources from "./i18n/en.json";
+/**
+ * @slot Required slot for gux-time-zone-picker-beta tag
+ * @slot label - Required slot for label tag
+ * @slot error - Optional slot for error message
+ * @slot help - Optional slot for help message
+ */
+export class GuxFormFieldTimeZonePicker {
+  constructor() {
+    this.labelPosition = undefined;
+    this.computedLabelPosition = 'above';
+    this.disabled = undefined;
+    this.required = undefined;
+    this.hasError = false;
+    this.hasHelp = false;
+  }
+  watchValue(hasError) {
+    const timeZonePickerSlot = this.root.querySelector('gux-time-zone-picker-beta');
+    if (timeZonePickerSlot) {
+      timeZonePickerSlot.hasError = hasError;
+    }
+  }
+  onMutation() {
+    this.hasError = hasSlot(this.root, 'error');
+    this.hasHelp = hasSlot(this.root, 'help');
+  }
+  async componentWillLoad() {
+    this.getI18nValue = await buildI18nForComponent(this.root, componentResources);
+    this.setInput();
+    this.setLabel();
+    this.hasError = hasSlot(this.root, 'error');
+    this.hasHelp = hasSlot(this.root, 'help');
+    trackComponent(this.root, { variant: this.variant });
+  }
+  disconnectedCallback() {
+    if (this.disabledObserver) {
+      this.disabledObserver.disconnect();
+    }
+    if (this.requiredObserver) {
+      this.requiredObserver.disconnect();
+    }
+  }
+  render() {
+    return (h(GuxFormFieldFieldsetContainer, { labelPosition: this.computedLabelPosition }, h(GuxFormFieldLegendLabel, { position: this.computedLabelPosition, required: this.required }, h("slot", { name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent(this.root, 'error'), this.hasError)), h("div", { class: "gux-input-and-error-container" }, h("div", { class: {
+        'gux-input': true,
+        'gux-input-error': this.hasError,
+        'gux-time-zone-picker-container': true,
+        'gux-disabled': this.disabled
+      } }, h("slot", null)), h(GuxFormFieldError, { show: this.hasError }, h("slot", { name: "error" })), h(GuxFormFieldHelp, { show: !this.hasError && this.hasHelp }, h("slot", { name: "help" })))));
+  }
+  renderScreenReaderText(text, condition = true) {
+    if (condition) {
+      return (h("gux-screen-reader-beta", null, text));
+    }
+  }
+  get variant() {
+    const labelPositionVariant = this.labelPosition
+      ? this.labelPosition.toLowerCase()
+      : 'none';
+    const type = 'timeZonePicker';
+    return `${type}-${labelPositionVariant}`;
+  }
+  setInput() {
+    this.timeZonePickerElement = this.root.querySelector('gux-time-zone-picker-beta');
+    this.disabled = this.timeZonePickerElement.disabled;
+    this.required = this.timeZonePickerElement.required;
+    this.disabledObserver = onDisabledChange(this.timeZonePickerElement, (disabled) => {
+      this.disabled = disabled;
+    });
+    this.requiredObserver = onRequiredChange(this.timeZonePickerElement, (required) => {
+      this.required = required;
+    });
+    validateFormIds(this.root, this.timeZonePickerElement);
+  }
+  setLabel() {
+    this.label = this.root.querySelector('label[slot="label"]');
+    this.computedLabelPosition = getComputedLabelPosition(this.label, this.labelPosition);
+  }
+  static get is() { return "gux-form-field-time-zone-picker"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["gux-form-field-time-zone-picker.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["gux-form-field-time-zone-picker.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "labelPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "GuxFormFieldLabelPosition",
+          "resolved": "\"above\" | \"beside\" | \"screenreader\"",
+          "references": {
+            "GuxFormFieldLabelPosition": {
+              "location": "import",
+              "path": "../../gux-form-field.types",
+              "id": "src/components/stable/gux-form-field/gux-form-field.types.ts::GuxFormFieldLabelPosition"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label-position",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "computedLabelPosition": {},
+      "disabled": {},
+      "required": {},
+      "hasError": {},
+      "hasHelp": {}
+    };
+  }
+  static get elementRef() { return "root"; }
+  static get watchers() {
+    return [{
+        "propName": "hasError",
+        "methodName": "watchValue"
+      }];
+  }
+}
+__decorate([
+  OnMutation({ childList: true, subtree: true })
+], GuxFormFieldTimeZonePicker.prototype, "onMutation", null);

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-time-zone-picker/tests/gux-form-field-time-zone-picker.e2e.js

@@ -0,0 +1,123 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { newSparkE2EPage, a11yCheck } from "../../../../../../test/e2eTestUtils";
+const axeExclusions = [];
+async function newNonrandomE2EPage({ html }) {
+  const page = await newE2EPage();
+  await page.evaluateOnNewDocument(() => {
+    Math.random = () => 0.5;
+  });
+  await page.setContent(html);
+  await page.waitForChanges();
+  return page;
+}
+describe('gux-form-field-time-zone-picker', () => {
+  describe('#render', () => {
+    describe('label-position', () => {
+      [
+        '',
+        'label-position="above"',
+        'label-position="beside"',
+        'label-position="screenreader"'
+      ].forEach((componentAttribute, index) => {
+        const html = `
+        <gux-form-field-time-zone-picker ${componentAttribute}>
+        <gux-time-zone-picker-beta
+        value="Etc/GMT+1"
+        workspace-default="Etc/GMT"
+        local-default="America/Detroit"
+        >
+        </gux-time-zone-picker-beta>
+        <label slot="label">Select Time Zone</label>
+        </gux-form-field-time-zone-picker>
+        `;
+        it(`should render component as expected (${index + 1})`, async () => {
+          const page = await newNonrandomE2EPage({ html });
+          const element = await page.find('gux-form-field-time-zone-picker');
+          const elementShadowDom = await element.find('pierce/.gux-form-field-container');
+          expect(element.outerHTML).toMatchSnapshot();
+          expect(elementShadowDom).toMatchSnapshot();
+        });
+        it(`should be accessible (${index + 1})`, async () => {
+          const page = await newSparkE2EPage({ html });
+          await a11yCheck(page, axeExclusions);
+        });
+      });
+    });
+    describe('input attributes', () => {
+      ['', 'disabled', 'required'].forEach((inputAttribute, index) => {
+        const html = `
+          <gux-form-field-time-zone-picker>
+          <gux-time-zone-picker-beta
+          value="Etc/GMT+1"
+          workspace-default="Etc/GMT"
+          local-default="America/Detroit"
+          ${inputAttribute}
+        >
+        </gux-time-zone-picker-beta>
+          </gux-form-field-time-zone-picker>
+          `;
+        it(`should render component as expected (${index + 1})`, async () => {
+          const page = await newNonrandomE2EPage({ html });
+          const element = await page.find('gux-form-field-time-zone-picker');
+          const elementShadowDom = await element.find('pierce/.gux-form-field-fieldset-container');
+          expect(element.outerHTML).toMatchSnapshot();
+          expect(elementShadowDom).toMatchSnapshot();
+        });
+        it(`should be accessible (${index + 1})`, async () => {
+          const page = await newSparkE2EPage({ html });
+          await a11yCheck(page, axeExclusions);
+        });
+      });
+    });
+    describe('help', () => {
+      const html = `
+      <gux-form-field-time-zone-picker>
+      <gux-time-zone-picker-beta
+      value="Etc/GMT+1"
+      workspace-default="Etc/GMT"
+      local-default="America/Detroit"
+        >
+        </gux-time-zone-picker-beta>
+        <label slot="label">Select Time Zone</label>
+        <span slot="help">This is a help message</span>
+        </gux-form-field-time-zone-picker>
+      `;
+      it('should render component as expected', async () => {
+        const page = await newNonrandomE2EPage({ html });
+        const element = await page.find('gux-form-field-time-zone-picker');
+        const elementShadowDom = await element.find('pierce/.gux-form-field-container');
+        expect(element.outerHTML).toMatchSnapshot();
+        expect(elementShadowDom).toMatchSnapshot();
+      });
+      it('should be accessible', async () => {
+        const page = await newSparkE2EPage({ html });
+        await a11yCheck(page, axeExclusions);
+      });
+    });
+    describe('error', () => {
+      const html = `
+        <gux-form-field-time-zone-picker>
+        <gux-time-zone-picker-beta
+        value="Etc/GMT+1"
+        workspace-default="Etc/GMT"
+        local-default="America/Detroit"
+      >
+      </gux-time-zone-picker-beta>
+      <label slot="label">Select Time Zone</label>
+      <span slot="error">This is an error message</span>
+      </gux-form-field-time-zone-picker>
+        `;
+      it('should render component as expected', async () => {
+        const page = await newNonrandomE2EPage({ html });
+        const element = await page.find('gux-form-field-time-zone-picker');
+        const elementShadowDom = await element.find('pierce/.gux-form-field-container');
+        expect(element.outerHTML).toMatchSnapshot();
+        expect(elementShadowDom).toMatchSnapshot();
+      });
+      it('should be accessible', async () => {
+        const page = await newSparkE2EPage({ html });
+        await a11yCheck(page, axeExclusions);
+      });
+    });
+  });
+});

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-time-zone-picker/tests/gux-form-field-time-zone-picker.spec.js

@@ -0,0 +1,103 @@
+import { newSpecPage } from "../../../../../../test/specTestUtils";
+import { GuxFormFieldTimeZonePicker } from "../gux-form-field-time-zone-picker";
+import { GuxScreenReader } from "../../../../../beta/gux-screen-reader/gux-screen-reader";
+const components = [GuxFormFieldTimeZonePicker, GuxScreenReader];
+const language = 'en';
+describe('gux-form-field-time-zone-picker', () => {
+  it('should build', async () => {
+    const html = `
+    <gux-form-field-time-zone-picker>
+      <gux-time-zone-picker-beta
+        value="Etc/GMT+1"
+        workspace-default="Etc/GMT"
+        local-default="America/Detroit"
+      >
+      </gux-time-zone-picker-beta>
+      <label slot="label">Select Time Zone</label>
+    </gux-form-field-time-zone-picker>
+    `;
+    const page = await newSpecPage({ components, html, language });
+    expect(page.rootInstance).toBeInstanceOf(GuxFormFieldTimeZonePicker);
+  });
+  describe('#render', () => {
+    describe('label-position', () => {
+      [
+        '',
+        'label-position="above"',
+        'label-position="beside"',
+        'label-position="screenreader"'
+      ].forEach((componentAttribute, index) => {
+        it(`should render component as expected (${index + 1})`, async () => {
+          const html = `
+            <gux-form-field-time-zone-picker ${componentAttribute}>
+            <gux-time-zone-picker-beta
+            value="Etc/GMT+1"
+            workspace-default="Etc/GMT"
+            local-default="America/Detroit"
+          >
+          </gux-time-zone-picker-beta>
+          <label slot="label">Select Time Zone</label>
+            </gux-form-field-time-zone-picker>
+          `;
+          const page = await newSpecPage({ components, html, language });
+          expect(page.root).toMatchSnapshot();
+        });
+      });
+    });
+    describe('help', () => {
+      it('should render component as expected', async () => {
+        const html = `
+        <gux-form-field-time-zone-picker>
+        <gux-time-zone-picker-beta
+        value="Etc/GMT+1"
+        workspace-default="Etc/GMT"
+        local-default="America/Detroit"
+      >
+      </gux-time-zone-picker-beta>
+      <label slot="label">Select Time Zone</label>
+      <span slot="help">This is a help message</span>
+      </gux-form-field-time-zone-picker>
+        `;
+        const page = await newSpecPage({ components, html, language });
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+    describe('error', () => {
+      it('should render component as expected', async () => {
+        const html = `
+          <gux-form-field-time-zone-picker>
+          <gux-time-zone-picker-beta
+          value="Etc/GMT+1"
+          workspace-default="Etc/GMT"
+          local-default="America/Detroit"
+        >
+        </gux-time-zone-picker-beta>
+        <label slot="label">Select Time Zone</label>
+        <span slot="error">This is an error message</span>
+        </gux-form-field-time-zone-picker>
+          `;
+        const page = await newSpecPage({ components, html, language });
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+    describe('input attributes', () => {
+      ['', 'disabled', 'required'].forEach((inputAttribute, index) => {
+        it(`should render component as expected (${index + 1})`, async () => {
+          const html = `
+            <gux-form-field-time-zone-picker>
+            <gux-time-zone-picker-beta
+            value="Etc/GMT+1"
+            workspace-default="Etc/GMT"
+            local-default="America/Detroit"
+            ${inputAttribute}
+          >
+          </gux-time-zone-picker-beta>
+            </gux-form-field-time-zone-picker>
+            `;
+          const page = await newSpecPage({ components, html, language });
+          expect(page.root).toMatchSnapshot();
+        });
+      });
+    });
+  });
+});

package/dist/collection/components/stable/gux-form-field/helper-components/gux-form-field-input-clear-button/gux-form-field-input-clear-button.css

@@ -14,7 +14,6 @@ button:not(:disabled):focus-visible, button:not(:disabled):hover {
 button gux-icon {
   width: var(--gse-ui-icon-size-sm);
   height: var(--gse-ui-icon-size-sm);
-  margin-right: var(--gse-ui-formControl-input-gap);
   border-radius: var(--gse-ui-formControl-input-borderRadius);
 }
 button:focus {

package/dist/collection/components/stable/gux-pagination/gux-pagination-items-per-page/tests/gux-pagination-items-per-page.spec.js

@@ -1,5 +1,4 @@
 import { newSpecPage } from "../../../../../test/specTestUtils";
-import MutationObserver from "mutation-observer";
 import { GuxPaginationItemsPerPage } from "../gux-pagination-items-per-page";
 import { GuxDropdown } from "../../../gux-dropdown/gux-dropdown";
 import { GuxListbox } from "../../../gux-listbox/gux-listbox";
@@ -12,9 +11,6 @@ const components = [
 ];
 const language = 'en';
 describe('gux-pagination-items-per-page', () => {
-  beforeEach(async () => {
-    global.MutationObserver = MutationObserver;
-  });
   describe('#render', () => {
     [
       { itemsPerPage: 25 },

package/dist/collection/components/stable/gux-popover/gux-popover.js

@@ -174,7 +174,7 @@ export class GuxPopover {
             "Placement": {
               "location": "import",
               "path": "@floating-ui/dom",
-              "id": ""
+              "id": "../../node_modules/@floating-ui/dom/index.d.ts::Placement"
             }
           }
         },

package/dist/collection/components/stable/gux-popover/tests/gux-popover.spec.js

@@ -1,6 +1,5 @@
 import { newSpecPage } from "../../../../test/specTestUtils";
 import * as floatingUi from "@floating-ui/dom";
-import MutationObserver from "mutation-observer";
 import { GuxPopover } from "../gux-popover";
 const components = [GuxPopover];
 const language = 'en';
@@ -15,9 +14,6 @@ const html = `
     </gux-popover>
   </div>`;
 describe('gux-popover', () => {
-  beforeEach(async () => {
-    global.MutationObserver = MutationObserver;
-  });
   afterEach(async () => {
     jest.spyOn(floatingUi, 'autoUpdate').mockRestore();
   });

package/dist/collection/components/stable/gux-popover-list/gux-popover-list.js

@@ -164,7 +164,7 @@ export class GuxPopoverList {
             "Placement": {
               "location": "import",
               "path": "@floating-ui/dom",
-              "id": ""
+              "id": "../../node_modules/@floating-ui/dom/index.d.ts::Placement"
             }
           }
         },

package/dist/collection/components/stable/gux-popover-list/tests/gux-popover-list.spec.js

@@ -1,6 +1,5 @@
 import { newSpecPage } from "../../../../test/specTestUtils";
 import * as floatingUi from "@floating-ui/dom";
-import MutationObserver from "mutation-observer";
 import { GuxPopoverList } from "../gux-popover-list";
 const components = [GuxPopoverList];
 const language = 'en';
@@ -14,9 +13,6 @@ const html = `
     </gux-popover-list>
   </div>`;
 describe('gux-popover-list', () => {
-  beforeEach(async () => {
-    global.MutationObserver = MutationObserver;
-  });
   afterEach(async () => {
     jest.spyOn(floatingUi, 'autoUpdate').mockRestore();
   });

package/dist/collection/components/stable/gux-popup/tests/gux-popup.spec.js

@@ -1,7 +1,6 @@
 import { newSpecPage } from "../../../../test/specTestUtils";
 import * as floatingUi from "@floating-ui/dom";
 import { GuxPopup } from "../gux-popup";
-import MutationObserver from "mutation-observer";
 const components = [GuxPopup];
 const language = 'en';
 function getGuxPopupHtml(expanded, disabled) {
@@ -17,9 +16,6 @@ function getGuxPopupHtml(expanded, disabled) {
 `;
 }
 describe('gux-popup', () => {
-  beforeEach(async () => {
-    global.MutationObserver = MutationObserver;
-  });
   afterEach(async () => {
     jest.spyOn(floatingUi, 'autoUpdate').mockRestore();
   });

package/dist/collection/components/stable/gux-rating/tests/gux-rating.spec.js

@@ -1,6 +1,3 @@
-jest.mock('../../../../utils/dom/random-html-id', () => ({
-  randomHTMLId: () => 'random'
-}));
 import { newSpecPage } from "../../../../test/specTestUtils";
 import { GuxRating } from "../gux-rating";
 const components = [GuxRating];

package/dist/collection/components/stable/gux-table/gux-sort-control/tests/gux-sort-control.spec.js

@@ -1,13 +1,9 @@
 import { newSpecPage } from "../../../../../test/specTestUtils";
-import MutationObserver from "mutation-observer";
 import { GuxSortControl } from "../gux-sort-control";
 import markup from "./gux-sort-control.markup";
 const components = [GuxSortControl];
 const language = 'en';
 describe('gux-sort-control', () => {
-  beforeEach(async () => {
-    global.MutationObserver = MutationObserver;
-  });
   describe('#render', () => {
     [
       markup.notSorted,

package/dist/collection/components/stable/gux-table/tests/gux-table.spec.js

@@ -1,12 +1,8 @@
 import { newSpecPage } from "../../../../test/specTestUtils";
 import { GuxTable } from "../gux-table";
-import MutationObserver from "mutation-observer";
 const components = [GuxTable];
 const language = 'en';
 describe('gux-table', () => {
-  beforeEach(async () => {
-    global.MutationObserver = MutationObserver;
-  });
   it('should build', async () => {
     const html = `
       <gux-table>

package/dist/collection/components/stable/gux-table-toolbar/tests/gux-table-toolbar.spec.js

@@ -6,7 +6,6 @@ import { newSpecPage } from "../../../../test/specTestUtils";
 import { GuxTableToolbar } from "../gux-table-toolbar";
 import { GuxTableToolbarAction } from "../gux-table-toolbar-action/gux-table-toolbar-action";
 import { GuxTableToolbarMenuButton } from "../gux-table-toolbar-menu-button/gux-table-toolbar-menu-button";
-import MutationObserver from "mutation-observer";
 import { GuxTableToolbarCustomAction } from "../gux-table-toolbar-custom-action/gux-table-toolbar-custom-action";
 const components = [
   GuxTableToolbar,
@@ -15,9 +14,6 @@ const components = [
   GuxTableToolbarMenuButton
 ];
 const language = 'en';
-beforeEach(async () => {
-  global.MutationObserver = MutationObserver;
-});
 const html = `<gux-table-toolbar>
 <div slot="search-and-filter">
   <gux-form-field-search label-position="screenreader">

package/dist/collection/components/stable/gux-tooltip/gux-tooltip.js

@@ -189,7 +189,7 @@ export class GuxTooltip {
             "Placement": {
               "location": "import",
               "path": "@floating-ui/dom",
-              "id": ""
+              "id": "../../node_modules/@floating-ui/dom/index.d.ts::Placement"
             }
           }
         },

package/dist/collection/components/stable/gux-truncate/tests/gux-truncate.spec.js

@@ -2,15 +2,11 @@ jest.mock('../../../../utils/decorator/on-resize', () => ({
   __esModule: true,
   OnResize: jest.fn()
 }));
-import MutationObserver from "mutation-observer";
 import { newSpecPage } from "../../../../test/specTestUtils";
 import { GuxTruncate } from "../gux-truncate";
 const components = [GuxTruncate];
 const language = 'en';
 describe('gux-truncate', () => {
-  beforeEach(async () => {
-    global.MutationObserver = MutationObserver;
-  });
   describe('#render', () => {
     [
       '<gux-truncate>Some text to truncate</gux-truncate>',