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

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

@@ -0,0 +1,160 @@
+import { firstDateInMonth, getWeekdays, getOffsetMonthDate, getDateMonthAndYearString } from "../gux-calendar.service";
+describe('calendar.service', () => {
+  describe('firstDateInMonth', () => {
+    [
+      {
+        year: 2022,
+        month: 0,
+        startDayOfWeek: 0,
+        expectedOutput: new Date('2021-12-26T01:00:00.000Z')
+      },
+      {
+        year: 2022,
+        month: 0,
+        startDayOfWeek: 1,
+        expectedOutput: new Date('2021-12-27T01:00:00.000Z')
+      },
+      {
+        year: 2022,
+        month: 0,
+        startDayOfWeek: 6,
+        expectedOutput: new Date('2022-01-01T01:00:00.000Z')
+      },
+      {
+        year: 2022,
+        month: 0,
+        startDayOfWeek: 7,
+        expectedOutput: new Date('2021-12-26T01:00:00.000Z')
+      }
+    ].forEach(({ year, month, startDayOfWeek, expectedOutput }) => {
+      it(`should work as expected for ${year}, ${month} and ${startDayOfWeek}`, () => {
+        expect(firstDateInMonth(month, year, startDayOfWeek)).toEqual(expectedOutput);
+      });
+    });
+  });
+  describe('getWeekdays', () => {
+    [
+      {
+        locale: 'en',
+        startDayOfWeek: 0,
+        expectedOutput: ['S', 'M', 'T', 'W', 'T', 'F', 'S']
+      },
+      {
+        locale: 'en',
+        startDayOfWeek: 1,
+        expectedOutput: ['M', 'T', 'W', 'T', 'F', 'S', 'S']
+      },
+      {
+        locale: 'en',
+        startDayOfWeek: 6,
+        expectedOutput: ['S', 'S', 'M', 'T', 'W', 'T', 'F']
+      },
+      {
+        locale: 'en',
+        startDayOfWeek: 7,
+        expectedOutput: ['S', 'M', 'T', 'W', 'T', 'F', 'S']
+      },
+      {
+        locale: 'en',
+        startDayOfWeek: 21,
+        expectedOutput: ['S', 'M', 'T', 'W', 'T', 'F', 'S']
+      }
+    ].forEach(({ locale, startDayOfWeek, expectedOutput }) => {
+      it(`should work as expected for ${locale} and ${startDayOfWeek}`, () => {
+        expect(getWeekdays(locale, startDayOfWeek)).toEqual(expectedOutput);
+      });
+    });
+  });
+  describe('getOffsetMonthDate', () => {
+    [
+      {
+        baseDate: new Date(2022, 0, 1),
+        monthDelta: 0,
+        expectedOutput: new Date(2022, 0, 1)
+      },
+      {
+        baseDate: new Date(2022, 0, 1),
+        monthDelta: 1,
+        expectedOutput: new Date(2022, 1, 1)
+      },
+      {
+        baseDate: new Date(2022, 0, 1),
+        monthDelta: 2,
+        expectedOutput: new Date(2022, 2, 1)
+      },
+      {
+        baseDate: new Date(2022, 1, 1),
+        monthDelta: 0,
+        expectedOutput: new Date(2022, 1, 1)
+      },
+      {
+        baseDate: new Date(2022, 0, 30),
+        monthDelta: 0,
+        expectedOutput: new Date(2022, 0, 1)
+      },
+      {
+        baseDate: new Date(2022, 0, 30),
+        monthDelta: 1,
+        expectedOutput: new Date(2022, 1, 1)
+      },
+      {
+        baseDate: new Date(2022, 0, 30),
+        monthDelta: 2,
+        expectedOutput: new Date(2022, 2, 1)
+      },
+      {
+        baseDate: new Date(2022, 11, 1),
+        monthDelta: 0,
+        expectedOutput: new Date(2022, 11, 1)
+      },
+      {
+        baseDate: new Date(2022, 11, 1),
+        monthDelta: 1,
+        expectedOutput: new Date(2023, 0, 1)
+      },
+      {
+        baseDate: new Date(2022, 11, 1),
+        monthDelta: 2,
+        expectedOutput: new Date(2023, 1, 1)
+      }
+    ].forEach(({ baseDate, monthDelta, expectedOutput }) => {
+      it(`should work as expected for ${baseDate.toISOString()} and monthDelta ${monthDelta}`, () => {
+        expect(getOffsetMonthDate(baseDate, monthDelta)).toEqual(expectedOutput);
+      });
+    });
+  });
+  describe('getDateMonthAndYearString', () => {
+    [
+      { locale: 'ar', expectedOutput: 'ديسمبر ٢٠٢٢' },
+      { locale: 'cs', expectedOutput: 'Prosinec 2022' },
+      { locale: 'da', expectedOutput: 'December 2022' },
+      { locale: 'de', expectedOutput: 'Dezember 2022' },
+      { locale: 'en', expectedOutput: 'December 2022' },
+      { locale: 'es', expectedOutput: 'Diciembre de 2022' },
+      { locale: 'es-es', expectedOutput: 'Diciembre de 2022' },
+      { locale: 'fi', expectedOutput: 'Joulukuu 2022' },
+      { locale: 'fr', expectedOutput: 'Décembre 2022' },
+      { locale: 'fr-ca', expectedOutput: 'Décembre 2022' },
+      { locale: 'he', expectedOutput: 'דצמבר 2022' },
+      { locale: 'it', expectedOutput: 'Dicembre 2022' },
+      { locale: 'ja', expectedOutput: '2022年12月' },
+      { locale: 'ko', expectedOutput: '2022년 12월' },
+      { locale: 'nl', expectedOutput: 'December 2022' },
+      { locale: 'no', expectedOutput: 'Desember 2022' },
+      { locale: 'pl', expectedOutput: 'Grudzień 2022' },
+      { locale: 'pt-br', expectedOutput: 'Dezembro de 2022' },
+      { locale: 'pt-pt', expectedOutput: 'Dezembro de 2022' },
+      { locale: 'ru', expectedOutput: 'Декабрь 2022 г.' },
+      { locale: 'sv', expectedOutput: 'December 2022' },
+      { locale: 'th', expectedOutput: 'ธันวาคม 2565' },
+      { locale: 'tr', expectedOutput: 'Aralık 2022' },
+      { locale: 'uk', expectedOutput: 'Грудень 2022 р.' },
+      { locale: 'zh-cn', expectedOutput: '2022年12月' },
+      { locale: 'zh-tw', expectedOutput: '2022年12月' }
+    ].forEach(({ locale, expectedOutput }) => {
+      it(`should work as expected for ${locale}`, () => {
+        expect(getDateMonthAndYearString(new Date(2022, 11, 31), locale)).toEqual(expectedOutput);
+      });
+    });
+  });
+});

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

@@ -0,0 +1,31 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxCalendar } from "../gux-calendar";
+const components = [GuxCalendar];
+const language = 'en';
+describe('gux-datepicker', () => {
+  it('should build', async () => {
+    const page = await newSpecPage({
+      components,
+      html: `<gux-calendar></gux-calendar>`,
+      language
+    });
+    expect(page.rootInstance).toBeInstanceOf(GuxCalendar);
+  });
+  describe('#render', () => {
+    [
+      `<gux-calendar mode="single" value="1997-08-29"></gux-calendar>`,
+      `<gux-calendar mode="range" number-of-months="2" value="2019-11-25/2019-12-02"></gux-calendar>`,
+      `<gux-calendar mode="single" value="1997-08-29" start-day-of-week="6"></gux-calendar>`,
+      `<gux-calendar mode="single" value="1997-08-29" lang="ar"></gux-calendar>`
+    ].forEach((input, index) => {
+      it(`should render component as expected (${index + 1})`, async () => {
+        const page = await newSpecPage({
+          components,
+          html: input,
+          language
+        });
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+  });
+});

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

@@ -1,5 +1,5 @@
-import { h } from '@stencil/core';
-import { trackComponent } from '@utils/tracking/usage';
+import { h } from "@stencil/core";
+import { trackComponent } from "../../../utils/tracking/usage";
 /**
  * @slot - Content of card.
  */
@@ -39,7 +39,8 @@ export class GuxCard {
           "references": {
             "GuxCardAccent": {
               "location": "import",
-              "path": "./gux-card.types"
+              "path": "./gux-card.types",
+              "id": "src/components/stable/gux-card/gux-card.types.ts::GuxCardAccent"
             }
           }
         },

package/dist/collection/components/stable/gux-card/tests/gux-card.e2e.js

@@ -0,0 +1,16 @@
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+describe('#render different card accents', () => {
+  [
+    '<gux-card><span>This is a content slot</span></gux-card>',
+    '<gux-card accent="bordered"><span>This is a content slot</span></gux-card>',
+    '<gux-card accent="raised"><span>This is a content slot</span></gux-card>',
+    '<gux-card accent="borderless"><span>This is a content slot</span></gux-card>'
+  ].forEach((html, index) => {
+    it(`should render component as expected (${index + 1})`, async () => {
+      const page = await newSparkE2EPage({ html });
+      const element = await page.find('gux-card');
+      await a11yCheck(page);
+      expect(element.outerHTML).toMatchSnapshot();
+    });
+  });
+});

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

@@ -0,0 +1,17 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxCard } from "../gux-card";
+const components = [GuxCard];
+const language = 'en';
+describe('#render different card accents', () => {
+  [
+    '<gux-card><span>This is a content slot</span></gux-card>',
+    '<gux-card accent="bordered"><span>This is a content slot</span></gux-card>',
+    '<gux-card accent="raised"><span>This is a content slot</span></gux-card>',
+    '<gux-card accent="borderless"><span>This is a content slot</span></gux-card>'
+  ].forEach((html, index) => {
+    it(`should render component as expected (${index + 1})`, async () => {
+      const page = await newSpecPage({ components, html, language });
+      expect(page.root).toMatchSnapshot();
+    });
+  });
+});

package/dist/collection/components/stable/gux-column-manager/gux-column-manager-item/gux-column-manager-item.css

@@ -0,0 +1,83 @@
+/**
+  * @prop --gse-ui-dataTableItems-editColumn-editColumnItem-gap
+  */
+:host([gs-reorder-indicator=above]) .gux-container {
+  border-top-color: #aac9ff;
+}
+
+:host([gs-reorder-indicator=below]) .gux-container {
+  border-bottom-color: #aac9ff;
+}
+
+.gux-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: var(--gse-ui-dataTableItems-editColumn-editColumnItem-gap);
+  align-content: stretch;
+  align-items: center;
+  justify-content: flex-start;
+  margin-bottom: -2px;
+  border-top: 2px solid transparent;
+  border-bottom: 2px solid transparent;
+}
+.gux-container.gux-drop-above {
+  border-top-color: #aac9ff;
+}
+.gux-container.gux-drop-below {
+  border-bottom-color: #aac9ff;
+}
+.gux-container.gux-dragging {
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+  opacity: 0.4;
+}
+.gux-container .gux-reorder {
+  all: unset;
+  flex: 0 1 auto;
+  align-self: auto;
+  order: 0;
+  color: #596373;
+  cursor: grab;
+  border-radius: 4px;
+}
+.gux-container .gux-reorder gux-icon {
+  width: var(--gse-ui-icon-size-sm);
+  height: var(--gse-ui-icon-size-sm);
+}
+.gux-container .gux-reorder.gux-reordering:focus-visible gux-icon {
+  color: #2a60c8;
+}
+.gux-container .gux-reorder:active {
+  pointer-events: none;
+  cursor: grabbing !important;
+}
+.gux-container .gux-reorder:hover, .gux-container .gux-reorder:focus-visible {
+  outline: var(--gse-semantic-focusRing-small-border-color) var(--gse-semantic-focusRing-small-border-style) var(--gse-semantic-focusRing-small-border-width);
+}
+.gux-container .gux-reorder:hover gux-icon, .gux-container .gux-reorder:focus-visible gux-icon {
+  color: #2a60c8;
+}
+.gux-container .gux-select {
+  position: relative;
+  flex: 1 1 auto;
+  align-self: auto;
+  order: 1;
+}
+.gux-container .gux-select gux-text-highlight {
+  position: absolute;
+  top: 0;
+  left: 31px;
+  color: transparent;
+  pointer-events: none;
+}
+
+.gux-sr-only:not(:focus):not(:active) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}

package/dist/collection/components/stable/gux-column-manager/gux-column-manager-item/gux-column-manager-item.js

@@ -0,0 +1,363 @@
+import { h, Host } from "@stencil/core";
+import { buildI18nForComponent } from "../../../../i18n";
+import { getIndexInParent } from "../gux-column-manager.service";
+import { getNewIndex } from "./gux-column-manager-item.service";
+import translationResources from "./i18n/en.json";
+/**
+ * @slot - slot for gux-form-field-checkbox
+ */
+export class GuxColumnManagerItem {
+  constructor() {
+    this.orderId = undefined;
+    this.highlightActive = undefined;
+    this.highlight = undefined;
+    this.text = undefined;
+    this.pendingReorder = 'none';
+    this.isDragging = false;
+    this.isReordering = false;
+  }
+  // eslint-disable-next-line @typescript-eslint/require-await
+  async guxSetHighlight(highlight = '', highlightActive = false) {
+    this.highlight = highlight;
+    this.highlightActive = highlightActive;
+  }
+  // eslint-disable-next-line @typescript-eslint/require-await
+  async guxFocus() {
+    this.reorderButtonElement.focus();
+  }
+  onBlur() {
+    this.setReorderMode(false);
+  }
+  onDragStart(event) {
+    this.isDragging = true;
+    const oldIndex = getIndexInParent(this.root);
+    event.dataTransfer.setData('oldIndex', String(oldIndex));
+    event.dataTransfer.effectAllowed = 'move';
+  }
+  onDragEnter(event) {
+    event.dataTransfer.dropEffect = 'move';
+    this.pendingReorder = this.mouseOnTopHalf(event) ? 'above' : 'below';
+  }
+  onDragOver(event) {
+    event.preventDefault();
+    this.pendingReorder = this.mouseOnTopHalf(event) ? 'above' : 'below';
+  }
+  onDragLeave() {
+    this.pendingReorder = 'none';
+  }
+  onDragEnd() {
+    this.isDragging = false;
+  }
+  onDrop(event) {
+    const oldIndex = Number(event.dataTransfer.getData('oldIndex'));
+    const dropIndex = getIndexInParent(this.root);
+    event.stopPropagation(); // stops the browser from redirecting.
+    event.stopImmediatePropagation();
+    this.pendingReorder = 'none';
+    const newIndex = getNewIndex(oldIndex, dropIndex, this.mouseOnTopHalf(event));
+    this.internal_order_change.emit({ oldIndex, newIndex });
+    return false;
+  }
+  mouseOnTopHalf(event) {
+    const rect = this.root.getBoundingClientRect();
+    return event.clientY - rect.top <= (rect.bottom - rect.top) / 2;
+  }
+  onSlotChange() {
+    this.text = this.root.querySelector('gux-form-field-checkbox label').textContent;
+  }
+  setReorderMode(isReordering, doReorder = false) {
+    if (this.isReordering !== isReordering) {
+      this.isReordering = isReordering;
+      if (isReordering) {
+        this.internal_keyboard_reorder_start.emit(this.text);
+      }
+      else {
+        if (doReorder) {
+          this.internal_keyboard_reorder_emit.emit();
+        }
+        this.internal_keyboard_reorder_finish.emit();
+      }
+    }
+  }
+  toggleReorderMode() {
+    this.setReorderMode(!this.isReordering, true);
+  }
+  keyboardReorder(event) {
+    if (this.isReordering) {
+      switch (event.key) {
+        case 'ArrowUp': {
+          event.preventDefault();
+          this.internal_keyboard_reorder_move.emit({
+            delta: -1,
+            column: this.text
+          });
+          break;
+        }
+        case 'ArrowDown': {
+          event.preventDefault();
+          this.internal_keyboard_reorder_move.emit({
+            delta: 1,
+            column: this.text
+          });
+          break;
+        }
+        case 'Home': {
+          event.preventDefault();
+          this.internal_keyboard_reorder_move.emit({
+            delta: -Infinity,
+            column: this.text
+          });
+          break;
+        }
+        case 'End': {
+          event.preventDefault();
+          this.internal_keyboard_reorder_move.emit({
+            delta: Infinity,
+            column: this.text
+          });
+          break;
+        }
+        case 'Escape': {
+          event.preventDefault();
+          this.setReorderMode(false);
+        }
+      }
+    }
+  }
+  async componentWillLoad() {
+    this.i18n = await buildI18nForComponent(this.root, translationResources);
+  }
+  render() {
+    return (h(Host, { draggable: "true" }, h("div", { class: {
+        'gux-container': true,
+        [`gux-drop-${this.pendingReorder}`]: true,
+        'gux-dragging': this.isDragging
+      } }, h("button", { class: {
+        'gux-reorder': true,
+        'gux-reordering': this.isReordering
+      }, type: "button", onClick: () => this.toggleReorderMode(), onKeyDown: event => this.keyboardReorder(event), ref: el => (this.reorderButtonElement = el) }, h("gux-icon", { "icon-name": "grab-vertical", decorative: true }), h("span", { class: "gux-sr-only" }, this.i18n('activateReordering', { columnName: this.text }))), h("div", { class: "gux-select" }, h("slot", { onSlotchange: () => this.onSlotChange() }), h("gux-text-highlight", { highlight: this.highlight, text: this.text, strategy: "contains", dimmed: !this.highlightActive })))));
+  }
+  static get is() { return "gux-column-manager-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["gux-column-manager-item.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["gux-column-manager-item.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "orderId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "order-id",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "highlightActive": {},
+      "highlight": {},
+      "text": {},
+      "pendingReorder": {},
+      "isDragging": {},
+      "isReordering": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "internal_order_change",
+        "name": "internal_order_change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "InternalOrderChange",
+          "resolved": "{ oldIndex: number; newIndex: number; }",
+          "references": {
+            "InternalOrderChange": {
+              "location": "import",
+              "path": "../gux-column-manager.types",
+              "id": "src/components/stable/gux-column-manager/gux-column-manager.types.ts::InternalOrderChange"
+            }
+          }
+        }
+      }, {
+        "method": "internal_keyboard_reorder_start",
+        "name": "internal_keyboard_reorder_start",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }, {
+        "method": "internal_keyboard_reorder_move",
+        "name": "internal_keyboard_reorder_move",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "InternalKeyboardReorderMove",
+          "resolved": "{ delta: number; column: string; }",
+          "references": {
+            "InternalKeyboardReorderMove": {
+              "location": "import",
+              "path": "../gux-column-manager.types",
+              "id": "src/components/stable/gux-column-manager/gux-column-manager.types.ts::InternalKeyboardReorderMove"
+            }
+          }
+        }
+      }, {
+        "method": "internal_keyboard_reorder_emit",
+        "name": "internal_keyboard_reorder_emit",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "internal_keyboard_reorder_finish",
+        "name": "internal_keyboard_reorder_finish",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "guxSetHighlight": {
+        "complexType": {
+          "signature": "(highlight?: string, highlightActive?: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "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": "blur",
+        "method": "onBlur",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "dragstart",
+        "method": "onDragStart",
+        "target": undefined,
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "dragenter",
+        "method": "onDragEnter",
+        "target": undefined,
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "dragover",
+        "method": "onDragOver",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "dragleave",
+        "method": "onDragLeave",
+        "target": undefined,
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "dragend",
+        "method": "onDragEnd",
+        "target": undefined,
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "drop",
+        "method": "onDrop",
+        "target": undefined,
+        "capture": false,
+        "passive": true
+      }];
+  }
+}