npm - genesys-spark-components - Versions diffs - 4.0.0-beta.8 → 4.0.1 - Mend

genesys-spark-components 4.0.0-beta.8 → 4.0.1

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 (2110) hide show

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

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-24342df6.js');
+const index = require('./index-75c9f0d9.js');
+const usage = require('./usage-bfcc4d96.js');
-const guxButtonCss = ":host{display:inline-block;pointer-events:none;-webkit-user-select:none;user-select:none}:host(:focus){outline:none}:host(:focus) button{outline:none}::slotted(gux-icon){width:var(--gse-ui-button-icon-size);height:var(--gse-ui-button-icon-size)}::slotted(*){padding-left:8px;vertical-align:middle}::slotted(*:first-child){padding:0}button{font-family:var(--gse-ui-button-text-fontFamily);font-weight:var(--gse-ui-button-text-fontWeight);font-size:var(--gse-ui-button-text-fontSize);line-height:var(--gse-ui-button-text-lineHeight);color:var(--gse-ui-button-secondary-default-foregroundColor);background-color:var(--gse-ui-button-secondary-default-backgroundColor);width:100%;min-width:var(--gse-ui-button-icon-only-width);height:var(--gse-ui-button-height);padding:var(--gse-ui-button-padding);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;cursor:pointer;border:none;border-radius:var(--gse-ui-button-borderRadius)}button[disabled]{opacity:var(--gse-ui-button-disabled-opacity);cursor:default}button:hover:enabled{color:var(--gse-ui-button-secondary-hover-foregroundColor);background-color:var(--gse-ui-button-secondary-hover-backgroundColor)}button:active:enabled{color:var(--gse-ui-button-secondary-active-foregroundColor);background-color:var(--gse-ui-button-secondary-active-backgroundColor)}button:focus-visible:enabled{outline:3px solid #7b88f7;outline-offset:1px;border-radius:3px}button.gux-primary{color:var(--gse-ui-button-primary-default-foregroundColor);background-color:var(--gse-ui-button-primary-default-backgroundColor)}button.gux-primary:hover:enabled{color:var(--gse-ui-button-primary-hover-foregroundColor);background-color:var(--gse-ui-button-primary-hover-backgroundColor)}button.gux-primary:active:enabled{color:var(--gse-ui-button-primary-active-foregroundColor);background-color:var(--gse-ui-button-primary-active-backgroundColor)}button.gux-tertiary{color:var(--gse-ui-button-tertiary-default-foregroundColor);background-color:var(--gse-ui-button-tertiary-default-backgroundColor);border-width:var(--gse-ui-button-tertiary-default-border-width);border-style:var(--gse-ui-button-tertiary-default-border-style);border-color:var(--gse-ui-button-tertiary-default-border-color)}button.gux-tertiary:hover:enabled{color:var(--gse-ui-button-tertiary-hover-foregroundColor);background-color:var(--gse-ui-button-tertiary-hover-backgroundColor)}button.gux-tertiary:active:enabled{color:var(--gse-ui-button-tertiary-active-foregroundColor);background-color:var(--gse-ui-button-tertiary-active-backgroundColor)}button.gux-ghost{color:var(--gse-ui-button-ghost-default-foregroundColor);background-color:var(--gse-ui-button-ghost-default-backgroundColor)}button.gux-ghost:hover:enabled{color:var(--gse-ui-button-ghost-hover-foregroundColor);background-color:var(--gse-ui-button-ghost-hover-backgroundColor)}button.gux-ghost:active:enabled{color:var(--gse-ui-button-ghost-active-foregroundColor);background-color:var(--gse-ui-button-ghost-active-backgroundColor)}button.gux-danger{color:var(--gse-ui-button-danger-default-foregroundColor);background-color:var(--gse-ui-button-danger-default-backgroundColor)}button.gux-danger:hover:enabled{color:var(--gse-ui-button-danger-hover-foregroundColor);background-color:var(--gse-ui-button-danger-hover-backgroundColor)}button.gux-danger:active:enabled{color:var(--gse-ui-button-danger-active-foregroundColor);background-color:var(--gse-ui-button-danger-active-backgroundColor)}button.gux-inline{min-width:initial;height:initial;padding:0;color:var(--gse-ui-link-default-color);background:none;border:none}button.gux-inline[disabled]{color:var(--gse-ui-link-disabled-color)}button.gux-inline:hover:enabled{text-decoration:underline;color:var(--gse-ui-link-hover-color);background:none}button.gux-inline:active:enabled{text-decoration:underline;color:var(--gse-ui-link-active-color);background:none}";
+const guxButtonCss = ":host{display:inline-block;pointer-events:none;-webkit-user-select:none;user-select:none}:host(:focus){outline:none}:host(:focus) button{outline:none}::slotted(gux-icon){width:var(--gse-ui-button-icon-size);height:var(--gse-ui-button-icon-size)}::slotted(*){padding-left:var(--gse-core-spacing-3xs);vertical-align:middle}::slotted(*:first-child){padding:0}button{font-family:var(--gse-ui-button-text-fontFamily);font-size:var(--gse-ui-button-text-fontSize);font-weight:var(--gse-ui-button-text-fontWeight);line-height:var(--gse-ui-button-text-lineHeight);width:100%;min-width:var(--gse-ui-button-icon-only-width);height:var(--gse-ui-button-default-height);padding:var(--gse-ui-button-padding);overflow:hidden;color:var(--gse-ui-button-secondary-default-foregroundColor);text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;cursor:pointer;background-color:var(--gse-ui-button-secondary-default-backgroundColor);border:none;border-radius:var(--gse-ui-button-borderRadius)}button.gux-icon-only{padding:var(--gse-ui-button-paddingIconOnly)}button[disabled]{cursor:default;opacity:var(--gse-ui-button-disabled-opacity)}button:hover:enabled{color:var(--gse-ui-button-secondary-hover-foregroundColor);background-color:var(--gse-ui-button-secondary-hover-backgroundColor)}button:active:enabled{color:var(--gse-ui-button-secondary-active-foregroundColor);background-color:var(--gse-ui-button-secondary-active-backgroundColor)}button:focus-visible:enabled{outline:var(--gse-semantic-focusRing-default-border-color) var(--gse-semantic-focusRing-default-border-style) var(--gse-semantic-focusRing-default-border-width);outline-offset:var(--gse-semantic-focusRing-offset)}button.gux-primary{color:var(--gse-ui-button-primary-default-foregroundColor);background-color:var(--gse-ui-button-primary-default-backgroundColor)}button.gux-primary:hover:enabled{color:var(--gse-ui-button-primary-hover-foregroundColor);background-color:var(--gse-ui-button-primary-hover-backgroundColor)}button.gux-primary:active:enabled{color:var(--gse-ui-button-primary-active-foregroundColor);background-color:var(--gse-ui-button-primary-active-backgroundColor)}button.gux-tertiary{color:var(--gse-ui-button-tertiary-default-foregroundColor);background-color:var(--gse-ui-button-tertiary-default-backgroundColor);border-color:var(--gse-ui-button-tertiary-default-border-color);border-style:var(--gse-ui-button-tertiary-default-border-style);border-width:var(--gse-ui-button-tertiary-default-border-width)}button.gux-tertiary.gux-icon-only{padding:calc(var(--gse-ui-button-paddingIconOnly) - var(--gse-ui-button-tertiary-default-border-width))}button.gux-tertiary:hover:enabled{color:var(--gse-ui-button-tertiary-hover-foregroundColor);background-color:var(--gse-ui-button-tertiary-hover-backgroundColor)}button.gux-tertiary:active:enabled{color:var(--gse-ui-button-tertiary-active-foregroundColor);background-color:var(--gse-ui-button-tertiary-active-backgroundColor)}button.gux-ghost{color:var(--gse-ui-button-ghost-default-foregroundColor);background-color:var(--gse-ui-button-ghost-default-backgroundColor)}button.gux-ghost:hover:enabled{color:var(--gse-ui-button-ghost-hover-foregroundColor);background-color:var(--gse-ui-button-ghost-hover-backgroundColor)}button.gux-ghost:active:enabled{color:var(--gse-ui-button-ghost-active-foregroundColor);background-color:var(--gse-ui-button-ghost-active-backgroundColor)}button.gux-danger{color:var(--gse-ui-button-danger-default-foregroundColor);background-color:var(--gse-ui-button-danger-default-backgroundColor)}button.gux-danger:hover:enabled{color:var(--gse-ui-button-danger-hover-foregroundColor);background-color:var(--gse-ui-button-danger-hover-backgroundColor)}button.gux-danger:active:enabled{color:var(--gse-ui-button-danger-active-foregroundColor);background-color:var(--gse-ui-button-danger-active-backgroundColor)}button.gux-inline{min-width:initial;height:initial;padding:0;color:var(--gse-ui-link-default-foregroundColor);background:none;border:none}button.gux-inline[disabled]{color:var(--gse-ui-link-disabled-foregroundColor)}button.gux-inline:hover:enabled{color:var(--gse-ui-link-hover-foregroundColor);text-decoration:underline;background:none}button.gux-inline:active:enabled{color:var(--gse-ui-link-active-foregroundColor);text-decoration:underline;background:none}";
 const GuxButton = class {
   constructor(hostRef) {
@@ -14,32 +14,47 @@ const GuxButton = class {
     this.guxTitle = undefined;
     this.disabled = false;
     this.accent = 'secondary';
+    this.iconOnly = undefined;
+  }
+  connectedCallback() {
+    this.slotChanged();
   }
   componentWillLoad() {
     usage.trackComponent(this.root, { variant: this.accent });
-    this.makeSlotContentDisableable();
   }
   render() {
-    return (index.h("button", { type: this.type, title: this.guxTitle, disabled: this.disabled, class: `gux-${this.accent}` }, index.h("slot", null)));
+    return (index.h("button", { type: this.type, title: this.guxTitle, disabled: this.disabled, class: {
+        [`gux-${this.accent}`]: true,
+        'gux-icon-only': this.iconOnly
+      } }, index.h("slot", { onSlotchange: this.slotChanged.bind(this) })));
+  }
+  stopEventIfDisabled(event) {
+    if (this.disabled) {
+      event.stopImmediatePropagation();
+      event.stopPropagation();
+      event.preventDefault();
+    }
   }
   makeSlotContentDisableable() {
-    this.root.shadowRoot.addEventListener('click', (event) => {
-      if (this.disabled) {
-        event.stopImmediatePropagation();
-        event.stopPropagation();
-        event.preventDefault();
-      }
-    });
+    this.root.shadowRoot.addEventListener('click', (event) => this.stopEventIfDisabled(event));
     Array.from(this.root.children).forEach(slotElement => {
-      slotElement.addEventListener('click', (event) => {
-        if (this.disabled) {
-          event.stopImmediatePropagation();
-          event.stopPropagation();
-          event.preventDefault();
-        }
-      });
+      slotElement.addEventListener('click', (event) => this.stopEventIfDisabled(event));
     });
   }
+  hasIconOnly() {
+    const children = Array.from(this.root.children);
+    if (children.length === 1) {
+      const child = children[0];
+      if (child.tagName === 'GUX-ICON') {
+        return true;
+      }
+    }
+    return false;
+  }
+  slotChanged() {
+    this.makeSlotContentDisableable();
+    this.iconOnly = this.hasIconOnly();
+  }
   static get delegatesFocus() { return true; }
   get root() { return index.getElement(this); }
 };

package/dist/cjs/gux-calendar-beta.cjs.entry.js CHANGED Viewed

@@ -2,14 +2,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-0d0fdb85.js');
-const isoDates = require('./iso-dates-f78ffb80.js');
-const capitalizeFirstLetter = require('./capitalize-first-letter-8e2f04e5.js');
-const index$1 = require('./index-9bbde1aa.js');
-const afterNextRender = require('./after-next-render-a09f528a.js');
-const logError = require('./log-error-d46c02b7.js');
-const simulateNativeEvent = require('./simulate-native-event-fe3e62da.js');
-require('./get-closest-element-ab4b2eee.js');
+const index = require('./index-75c9f0d9.js');
+const isoDates = require('./iso-dates-d0cd4802.js');
+const capitalizeFirstLetter = require('./capitalize-first-letter-251c82ed.js');
+const index$1 = require('./index-dee802be.js');
+const afterNextRender = require('./after-next-render-a023ef47.js');
+const logError = require('./log-error-8a92241e.js');
+const simulateNativeEvent = require('./simulate-native-event-8209a457.js');
+require('./get-closest-element-26894e5a.js');
 function getFirstOfMonth(date) {
   return new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0);
@@ -46,7 +46,7 @@ const translationResources = {
 	nextMonth: nextMonth
 };
-const guxCalendarCss = ".gux-calendar-beta{box-sizing:border-box;display:inline-flex;flex-direction:column;background:var(--gse-ui-calendarMenu-date-selected-foregroundColor);box-shadow:rgba(34, 37, 41, 0.24) 0px 2px 4px;border-radius:var(--gse-ui-calendarMenu-single-body-borderRadius);font-size:var(--gse-ui-calendarMenu-month-defaultText-fontSize);font-family:var(--gse-ui-calendarMenu-month-defaultText-fontFamily)}.gux-calendar-beta .gux-header{display:flex;align-items:center;padding:var(--gse-ui-calendarMenu-header-padding);font-style:normal;font-weight:var(--gse-ui-calendarMenu-month-currentText-fontWeight);color:var(--gse-ui-calendarMenu-header-foregroundColor);text-align:center;background-color:var(--gse-ui-calendarMenu-header-backgroundColor);border-radius:var(--gse-ui-calendarMenu-single-header-borderRadius);justify-content:space-between;height:var(--gse-ui-calendarMenu-month-single-header-height)}.gux-calendar-beta .gux-header .gux-header-month-and-year{width:var(--gse-ui-calendarMenu-month-single-header-textWidth);color:var(--gse-ui-calendarMenu-month-selected-foregroundColor);font-family:var(--gse-ui-calendarMenu-month-headerText-fontFamily);line-height:var(--gse-ui-calendarMenu-month-headerText-lineHeight);font-size:var(--gse-ui-calendarMenu-month-headerText-fontSize)}.gux-calendar-beta .gux-header .gux-left,.gux-calendar-beta .gux-header .gux-right{color:var(--gse-ui-calendarMenu-month-monthHeader-foregroundColor);cursor:pointer;background:none;border:none;outline:none}.gux-calendar-beta .gux-header .gux-left:focus-visible,.gux-calendar-beta .gux-header .gux-right:focus-visible{outline:2px solid #aac9ff;outline-offset:1px}.gux-calendar-beta .gux-header .gux-left gux-icon,.gux-calendar-beta .gux-header .gux-right gux-icon{width:16px;height:16px}.gux-calendar-beta .gux-week-days{padding-top:24px;padding-right:24px;padding-left:24px;text-align:center;color:var(--gse-ui-calendarMenu-day-dayHeader-foregroundColor);font-family:var(--gse-ui-calendarMenu-day-headerText-fontFamily);font-size:var(--gse-ui-calendarMenu-day-headerText-fontSize);font-family:var(--gse-ui-calendarMenu-day-headerText-fontFamily);font-weight:var(--gse-ui-calendarMenu-day-headerText-fontWeight)}.gux-calendar-beta .gux-week-days .gux-week-day{display:inline-block;width:var(--gse-ui-calendarMenu-day-date-size);height:16px;font-weight:var(--gse-ui-calendarMenu-day-header-fontWeight)}.gux-calendar-beta .gux-content{padding:var(--gse-ui-calendarMenu-dateBody-padding);color:var(--gse-core-color-cornflower-900);background-color:var(--gse-ui-calendarMenu-backgroundColor);border-radius:var(--gse-ui-calendarMenu-single-body-borderRadius)}.gux-calendar-beta .gux-content-week .gux-content-date{display:inline-block;width:var(--gse-ui-calendarMenu-day-date-size);height:var(--gse-ui-calendarMenu-day-input-height);font-style:normal;font-weight:var(--gse-ui-calendarMenu-date-defaultText-fontWeight);line-height:32px;text-align:center;vertical-align:middle;border:none;outline:none;color:var(--gse-core-color-cornflower-600);font-size:var(--gse-ui-calendarMenu-date-defaultText-fontSize);font-family:var(--gse-ui-calendarMenu-date-currentText-fontFamily);opacity:var(--gse-ui-calendarMenu-disabled-opacity)}.gux-calendar-beta .gux-content-week .gux-content-date.gux-current-month{color:var(--gse-ui-calendarMenu-month-default-foregroundColor);opacity:1}.gux-calendar-beta .gux-content-week .gux-content-date.gux-hidden{display:none}.gux-calendar-beta .gux-content-week .gux-content-date.gux-disabled{pointer-events:none}.gux-calendar-beta .gux-content-week .gux-content-date.gux-selected{color:var(--gse-ui-calendarMenu-date-selected-foregroundColor);background-color:var(--gse-ui-calendarMenu-date-selected-backgroundColor);border:none;border-radius:var(--gse-ui-calendarMenu-month-borderRadius);outline:none}.gux-calendar-beta .gux-content-week .gux-content-date.gux-selected:hover{background-color:var(--gse-ui-calendarMenu-date-selected-hoverBackgroundColor)}.gux-calendar-beta .gux-content-week .gux-content-date:hover{cursor:pointer;background-color:var(--gse-ui-calendarMenu-date-hover-backgroundColor);border-radius:var(--gse-ui-calendarMenu-month-borderRadius)}.gux-calendar-beta .gux-content-week .gux-content-date:focus-visible{outline:1px solid #7b61ff;border-radius:var(--gse-ui-calendarMenu-month-focusBorderRadius)}.gux-calendar-beta .gux-content-week .gux-content-date .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}.gux-calendar-beta .gux-content-week .gux-content-date.gux-current-date{font-weight:var(--gse-ui-calendarMenu-date-currentText-fontWeight);font-family:var(--gse-ui-calendarMenu-month-currentText-fontFamily);font-size:var(--gse-ui-calendarMenu-date-currentText-fontSize)}";
+const guxCalendarCss = ".gux-calendar-beta{box-sizing:border-box;display:inline-flex;flex-direction:column;font-family:var(--gse-ui-calendarMenu-month-defaultText-fontFamily);font-size:var(--gse-ui-calendarMenu-month-defaultText-fontSize);background:var(--gse-ui-calendarMenu-date-selected-foregroundColor);border-radius:var(--gse-ui-calendarMenu-single-body-borderRadius);box-shadow:rgba(34, 37, 41, 0.24) 0 2px 4px}.gux-calendar-beta .gux-header{display:flex;align-items:center;justify-content:space-between;height:var(--gse-ui-calendarMenu-month-single-header-height);padding:var(--gse-ui-calendarMenu-header-padding);font-style:normal;font-weight:var(--gse-ui-calendarMenu-month-currentText-fontWeight);color:var(--gse-ui-calendarMenu-header-foregroundColor);text-align:center;background-color:var(--gse-ui-calendarMenu-header-backgroundColor);border-radius:var(--gse-ui-calendarMenu-single-header-borderRadius)}.gux-calendar-beta .gux-header .gux-header-month-and-year{width:var(--gse-ui-calendarMenu-month-single-header-textWidth);font-family:var(--gse-ui-calendarMenu-month-headerText-fontFamily);font-size:var(--gse-ui-calendarMenu-month-headerText-fontSize);line-height:var(--gse-ui-calendarMenu-month-headerText-lineHeight);color:var(--gse-ui-calendarMenu-month-selected-foregroundColor)}.gux-calendar-beta .gux-header .gux-left,.gux-calendar-beta .gux-header .gux-right{color:var(--gse-ui-calendarMenu-month-monthHeader-foregroundColor);cursor:pointer;background:none;border:none;outline:none}.gux-calendar-beta .gux-header .gux-left:focus-visible,.gux-calendar-beta .gux-header .gux-right:focus-visible{outline:2px solid #aac9ff;outline-offset:1px}.gux-calendar-beta .gux-header .gux-left gux-icon,.gux-calendar-beta .gux-header .gux-right gux-icon{width:16px;height:16px}.gux-calendar-beta .gux-week-days{padding-top:24px;padding-right:24px;padding-left:24px;font-family:var(--gse-ui-calendarMenu-day-headerText-fontFamily);font-size:var(--gse-ui-calendarMenu-day-headerText-fontSize);font-weight:var(--gse-ui-calendarMenu-day-headerText-fontWeight);color:var(--gse-ui-calendarMenu-day-dayHeader-foregroundColor);text-align:center}.gux-calendar-beta .gux-week-days .gux-week-day{display:inline-block;width:var(--gse-ui-calendarMenu-day-date-size);height:16px;font-weight:var(--gse-ui-calendarMenu-day-header-fontWeight)}.gux-calendar-beta .gux-content{padding:var(--gse-ui-calendarMenu-dateBody-padding);color:var(--gse-core-color-cornflower-900);background-color:var(--gse-ui-calendarMenu-backgroundColor);border-radius:var(--gse-ui-calendarMenu-single-body-borderRadius)}.gux-calendar-beta .gux-content-week .gux-content-date{display:inline-block;width:var(--gse-ui-calendarMenu-day-date-size);height:var(--gse-ui-calendarMenu-day-input-height);font-family:var(--gse-ui-calendarMenu-date-currentText-fontFamily);font-size:var(--gse-ui-calendarMenu-date-defaultText-fontSize);font-style:normal;font-weight:var(--gse-ui-calendarMenu-date-defaultText-fontWeight);line-height:32px;color:var(--gse-core-color-cornflower-600);text-align:center;vertical-align:middle;border:none;outline:none;opacity:var(--gse-ui-calendarMenu-disabled-opacity)}.gux-calendar-beta .gux-content-week .gux-content-date.gux-current-month{color:var(--gse-ui-calendarMenu-month-default-foregroundColor);opacity:1}.gux-calendar-beta .gux-content-week .gux-content-date.gux-hidden{display:none}.gux-calendar-beta .gux-content-week .gux-content-date.gux-disabled{pointer-events:none}.gux-calendar-beta .gux-content-week .gux-content-date.gux-selected{color:var(--gse-ui-calendarMenu-date-selected-foregroundColor);background-color:var(--gse-ui-calendarMenu-date-selected-backgroundColor);border:none;border-radius:var(--gse-ui-calendarMenu-month-borderRadius);outline:none}.gux-calendar-beta .gux-content-week .gux-content-date.gux-selected:hover{background-color:var(--gse-ui-calendarMenu-date-selected-hoverBackgroundColor)}.gux-calendar-beta .gux-content-week .gux-content-date:hover{cursor:pointer;background-color:var(--gse-ui-calendarMenu-date-hover-backgroundColor);border-radius:var(--gse-ui-calendarMenu-month-borderRadius)}.gux-calendar-beta .gux-content-week .gux-content-date:focus-visible{border-radius:var(--gse-ui-calendarMenu-month-focusBorderRadius);outline:var(--gse-semantic-focusRing-default-border-width) solid var(--gse-semantic-focusRing-default-border-color)}.gux-calendar-beta .gux-content-week .gux-content-date .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}.gux-calendar-beta .gux-content-week .gux-content-date.gux-current-date{font-family:var(--gse-ui-calendarMenu-month-currentText-fontFamily);font-size:var(--gse-ui-calendarMenu-date-currentText-fontSize);font-weight:var(--gse-ui-calendarMenu-date-currentText-fontWeight)}";
 const GuxCalendar = class {
   constructor(hostRef) {
@@ -88,6 +88,9 @@ const GuxCalendar = class {
     }
   }
   onDateClick(date) {
+    if (this.isInvalidDate(date)) {
+      return;
+    }
     this.focusedValue = new Date(date.getTime());
     this.slottedInput.value = date.toISOString().substring(0, 10);
     simulateNativeEvent.simulateNativeEvent(this.root, 'input');
@@ -147,6 +150,10 @@ const GuxCalendar = class {
         break;
     }
   }
+  isInvalidDate(date) {
+    return ((this.minValue && date.getTime() <= this.minValue.getTime()) ||
+      (this.maxValue && date.getTime() > this.maxValue.getTime()));
+  }
   getMonthDays() {
     var _a, _b;
     const firstOfMonth = getFirstOfMonth(this.getFocusedValue());
@@ -167,9 +174,8 @@ const GuxCalendar = class {
           dates: []
         };
       }
-      // Disable a date that is outside the defined date range boundaries
-      const disabled = (this.minValue && currentDate.getTime() <= this.minValue.getTime()) ||
-        (this.maxValue && currentDate.getTime() > this.maxValue.getTime());
+      // Check if a date is outside the defined date range boundaries
+      const disabled = this.isInvalidDate(currentDate);
       const focused = ((_a = this.getFocusedValue()) === null || _a === void 0 ? void 0 : _a.getTime()) === currentDate.getTime() &&
         ((_b = this.getFocusedValue()) === null || _b === void 0 ? void 0 : _b.getTime()) !== selectedValue.getTime(); // Do not show preview value for date if it's already selected
       const today = new Date();

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

@@ -2,13 +2,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-0d0fdb85.js');
-const afterNextRender = require('./after-next-render-a09f528a.js');
-const isoDates = require('./iso-dates-f78ffb80.js');
-const usage = require('./usage-24342df6.js');
-const index$1 = require('./index-9bbde1aa.js');
-const capitalizeFirstLetter = require('./capitalize-first-letter-8e2f04e5.js');
-require('./get-closest-element-ab4b2eee.js');
+const index = require('./index-75c9f0d9.js');
+const afterNextRender = require('./after-next-render-a023ef47.js');
+const isoDates = require('./iso-dates-d0cd4802.js');
+const usage = require('./usage-bfcc4d96.js');
+const index$1 = require('./index-dee802be.js');
+const capitalizeFirstLetter = require('./capitalize-first-letter-251c82ed.js');
+require('./get-closest-element-26894e5a.js');
 function addClassToElements(elements, className) {
   manipulateElementsClasses(elements, 'add', className);
@@ -54,7 +54,7 @@ function getDateMonthAndYearString(date, locale) {
   return capitalizeFirstLetter.capitalizeFirstLetter(date.toLocaleDateString(locale, { year: 'numeric', month: 'long' }));
 }
-const guxCalendarCss = ":host{display:inline-block}.gux-calendar{margin-top:2px;border:1px solid #b4bccb;border-radius:4px}.gux-calendar .gux-header{position:relative;display:flex;align-items:center;justify-content:space-between;height:16px;padding:16px;color:#fdfdfd;background-color:#2a60c8;border-top-left-radius:3px;border-top-right-radius:3px}.gux-calendar .gux-header button{position:absolute;padding:5px;color:#fdfdfd;cursor:pointer;background:none;border:none;outline:none}.gux-calendar .gux-header button:focus-visible{outline:#75a8ff auto 5px}.gux-calendar .gux-header button.gux-left{left:18px}.gux-calendar .gux-header button.gux-right{right:18px}.gux-calendar .gux-header button gux-icon{width:16px;height:16px;pointer-events:none}.gux-calendar .gux-header .gux-month-list{display:flex;justify-content:space-between;width:100%}.gux-calendar .gux-header .gux-month-list label{width:100%;text-align:center;font-size:12px;line-height:20px;font-family:Roboto, sans-serif;font-weight:400;font-weight:700}.gux-calendar .gux-content{display:flex;align-items:flex-start;padding:20px 24px;color:#2e394c;background-color:#fdfdfd;border-bottom-right-radius:3px;border-bottom-left-radius:3px}.gux-calendar .gux-content table{width:168px;text-align:left;table-layout:fixed;border-spacing:0;-ms-user-select:none;user-select:none}.gux-calendar .gux-content table:not(:last-child){padding-right:24px}.gux-calendar .gux-content table tr{height:28px}.gux-calendar .gux-content table tr:empty{display:none}.gux-calendar .gux-content table tr th,.gux-calendar .gux-content table tr td{width:28px;height:28px;padding:0;margin:0;text-align:center;font-family:Roboto, sans-serif;font-weight:400;font-size:12px;line-height:20px}.gux-calendar .gux-content table tr th{font-family:Roboto, sans-serif;font-weight:400;font-weight:700}.gux-calendar .gux-content table tr td{cursor:pointer}.gux-calendar .gux-content table tr td.gux-hovered{background-color:#deeaff}.gux-calendar .gux-content table tr td.gux-selected{color:#fdfdfd;background-color:#2a60c8;border-radius:4px}.gux-calendar .gux-content table tr td.gux-selected.gux-start-date{border-radius:4px 0 0 4px}.gux-calendar .gux-content table tr td.gux-selected.gux-end-date{border-radius:0 4px 4px 0}.gux-calendar .gux-content table tr td:hover:not(.gux-calendar .gux-content table tr td.gux-start-date):not(.gux-calendar .gux-content table tr td.gux-end-date){color:#fdfdfd;background-color:#2a60c8;border-radius:4px}.gux-calendar .gux-content table tr td.gux-disabled{color:rgba(46, 57, 76, 0.5);pointer-events:none}.gux-calendar .gux-content table tr td.gux-not-in-month{color:rgba(107, 117, 133, 0.5)}.gux-calendar .gux-content table tr td.gux-not-in-month:hover{color:#2e394c;background-color:#e2e6ee}.gux-calendar .gux-content table tr td.gux-not-in-month.gux-hidden{visibility:hidden}.gux-sr-only{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}";
+const guxCalendarCss = ":host{display:inline-block}.gux-calendar{margin-top:2px;border-radius:var(--gse-ui-calendarMenu-single-body-borderRadius);box-shadow:var(--gse-ui-calendarMenu-boxShadow-x) var(--gse-ui-calendarMenu-boxShadow-y) var(--gse-ui-calendarMenu-boxShadow-blur) var(--gse-ui-calendarMenu-boxShadow-spread) var(--gse-ui-calendarMenu-boxShadow-color)}.gux-calendar .gux-header{position:relative;display:flex;gap:var(--gse-ui-calendarMenu-header-gap);align-items:center;justify-content:space-between;height:var(--gse-ui-calendarMenu-month-single-header-height);padding:var(--gse-ui-calendarMenu-header-padding);font-weight:var(--gse-ui-calendarMenu-month-currentText-fontWeight);color:var(--gse-ui-calendarMenu-header-foregroundColor);background-color:var(--gse-ui-calendarMenu-header-backgroundColor);border-radius:var(--gse-ui-calendarMenu-single-header-borderRadius)}.gux-calendar .gux-header button{position:absolute;color:var(--gse-ui-calendarMenu-month-monthHeader-foregroundColor);cursor:pointer;background:none;border:none;outline:none}.gux-calendar .gux-header button:focus-visible{outline:var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color)}.gux-calendar .gux-header button.gux-left{left:18px}.gux-calendar .gux-header button.gux-right{right:18px}.gux-calendar .gux-header button gux-icon{width:var(--gse-ui-icon-size-sm);height:var(--gse-ui-icon-size-sm);pointer-events:none}.gux-calendar .gux-header .gux-month-list{display:flex;justify-content:space-between;width:100%;font-family:var(--gse-ui-calendarMenu-month-headerText-fontFamily);font-size:var(--gse-ui-calendarMenu-month-headerText-fontSize);line-height:var(--gse-ui-calendarMenu-month-headerText-lineHeight)}.gux-calendar .gux-header .gux-month-list label{width:100%;text-align:center}.gux-calendar .gux-content{display:flex;align-items:flex-start;padding:var(--gse-ui-calendarMenu-dateBody-padding);color:var(--gse-ui-calendarMenu-month-default-foregroundColor);background-color:var(--gse-ui-calendarMenu-backgroundColor);border-radius:var(--gse-ui-calendarMenu-single-body-borderRadius)}.gux-calendar .gux-content table{width:var(--gse-ui-calendarMenu-day-input-width);text-align:left;table-layout:fixed;border-spacing:0;-ms-user-select:none;user-select:none}.gux-calendar .gux-content table:not(:last-child){padding-right:24px}.gux-calendar .gux-content table tr{height:var(--gse-ui-calendarMenu-day-input-height)}.gux-calendar .gux-content table tr:empty{display:none}.gux-calendar .gux-content table tr th,.gux-calendar .gux-content table tr td{width:var(--gse-ui-calendarMenu-day-date-size);height:var(--gse-ui-calendarMenu-day-date-size);padding:0;margin:0;text-align:center}.gux-calendar .gux-content table tr th{font-family:var(--gse-ui-calendarMenu-day-headerText-fontFamily);font-size:var(--gse-ui-calendarMenu-day-headerText-fontSize);font-weight:var(--gse-ui-calendarMenu-day-headerText-fontWeight);line-height:var(--gse-ui-calendarMenu-day-headerText-lineHeight)}.gux-calendar .gux-content table tr td{font-family:var(--gse-ui-calendarMenu-date-defaultText-fontFamily);font-size:var(--gse-ui-calendarMenu-date-defaultText-fontSize);font-weight:var(--gse-ui-calendarMenu-date-defaultText-fontWeight);line-height:var(--gse-ui-calendarMenu-date-defaultText-lineHeight);color:var(--gse-ui-calendarMenu-date-default-foregroundColor);cursor:pointer}.gux-calendar .gux-content table tr td.gux-hovered{background-color:var(--gse-ui-calendarMenu-date-range-backgroundColor)}.gux-calendar .gux-content table tr td.gux-selected{color:var(--gse-ui-calendarMenu-date-selected-foregroundColor);background-color:var(--gse-ui-calendarMenu-date-selected-backgroundColor);border-radius:var(--gse-ui-calendarMenu-month-borderRadius)}.gux-calendar .gux-content table tr td.gux-selected:hover:not(.gux-calendar .gux-content table tr td.gux-selected.gux-start-date):not(.gux-calendar .gux-content table tr td.gux-selected.gux-end-date){background-color:var(--gse-ui-calendarMenu-date-selected-hoverBackgroundColor)}.gux-calendar .gux-content table tr td.gux-start-date,.gux-calendar .gux-content table tr td.gux-end-date{background-color:var(--gse-ui-calendarMenu-date-range-backgroundColor)}.gux-calendar .gux-content table tr td.gux-start-date .gux-date,.gux-calendar .gux-content table tr td.gux-end-date .gux-date{display:flex;align-items:center;justify-content:center;width:var(--gse-ui-calendarMenu-day-date-size);height:var(--gse-ui-calendarMenu-day-date-size);background-color:var(--gse-ui-calendarMenu-date-selected-backgroundColor);border-radius:var(--gse-ui-calendarMenu-month-borderRadius)}.gux-calendar .gux-content table tr td.gux-start-date .gux-date:hover,.gux-calendar .gux-content table tr td.gux-end-date .gux-date:hover{background-color:var(--gse-ui-calendarMenu-date-selected-hoverBackgroundColor)}.gux-calendar .gux-content table tr td.gux-start-date{border-radius:16px 0 0 16px}.gux-calendar .gux-content table tr td.gux-end-date{border-radius:0 16px 16px 0}.gux-calendar .gux-content table tr td:hover:not(.gux-calendar .gux-content table tr td.gux-start-date):not(.gux-calendar .gux-content table tr td.gux-end-date):not(.gux-calendar .gux-content table tr td.gux-hovered):not(.gux-calendar .gux-content table tr td.gux-selected){background-color:var(--gse-ui-calendarMenu-date-hover-backgroundColor);border-radius:var(--gse-ui-calendarMenu-month-borderRadius)}.gux-calendar .gux-content table tr td.gux-disabled{pointer-events:none;opacity:var(--gse-ui-calendarMenu-disabled-opacity)}.gux-calendar .gux-content table tr td.gux-not-in-month{opacity:var(--gse-ui-calendarMenu-disabled-opacity)}.gux-calendar .gux-content table tr td.gux-not-in-month:hover{background-color:var(--gse-ui-calendarMenu-date-hover-backgroundColor)}.gux-calendar .gux-content table tr td.gux-not-in-month.gux-hidden{visibility:hidden}.gux-calendar .gux-content table tr td.gux-current-date{font-family:var(--gse-ui-calendarMenu-date-currentText-fontFamily);font-size:var(--gse-ui-calendarMenu-date-currentText-fontSize);font-weight:var(--gse-ui-calendarMenu-date-currentText-fontWeight);line-height:var(--gse-ui-calendarMenu-date-currentText-lineHeight)}.gux-calendar .gux-content table tr td:focus-visible{border-radius:var(--gse-ui-calendarMenu-month-focusBorderRadius);outline:var(--gse-semantic-focusRing-default-border-width) solid var(--gse-semantic-focusRing-default-border-color)}.gux-sr-only{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}";
 const GuxCalendar = class {
   constructor(hostRef) {
@@ -128,6 +128,10 @@ const GuxCalendar = class {
     for (let i = 0; i < length; i++) {
       const date = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate(), 0, 0, 0, 0);
       const classes = [];
+      const today = new Date();
+      const isToday = currentDate.getFullYear() === today.getFullYear() &&
+        currentDate.getMonth() === today.getMonth() &&
+        currentDate.getDate() === today.getDate();
       let disabled = false;
       let hidden = false;
       if (date.getMonth() !== month) {
@@ -143,11 +147,19 @@ const GuxCalendar = class {
         disabled = true;
       }
       let isSelected = false;
+      if (isToday) {
+        classes.push('gux-current-date');
+      }
       if (this.mode === "range" /* CalendarModes.Range */) {
         const [start, end] = isoDates.fromIsoDateRange(this.value);
         const fromTimeStamp = start.getTime();
         const toTimeStamp = end.getTime();
-        if (date.getTime() === fromTimeStamp) {
+        if (date.getTime() === fromTimeStamp &&
+          date.getTime() === toTimeStamp) {
+          isSelected = true;
+          classes.push('gux-selected');
+        }
+        else if (date.getTime() === fromTimeStamp) {
           isSelected = true;
           classes.push('gux-selected');
           classes.push('gux-start-date');
@@ -170,7 +182,8 @@ const GuxCalendar = class {
         date,
         hidden,
         disabled,
-        selected: isSelected
+        selected: isSelected,
+        isToday
       });
       currentDate.setDate(currentDate.getDate() + 1);
     }
@@ -359,7 +372,7 @@ const GuxCalendar = class {
     })));
   }
   renderCalendarTable(index$1) {
-    return (index.h("table", null, index.h("tr", null, getWeekdays(this.locale, this.startDayOfWeek).map(day => (index.h("th", null, day)))), this.getMonthDays(index$1).map(week => (index.h("tr", null, week.map(day => (index.h("td", { tabindex: this.isFocusableDate(day) ? '0' : '-1', class: day.class, "aria-hidden": day.hidden ? 'true' : 'false', "aria-disabled": day.disabled ? 'true' : 'false', "data-date": day.date.getTime(), onClick: () => void this.onDateClick(day.date), onMouseEnter: () => this.onDateMouseEnter(day.date), onKeyDown: e => void this.onKeyDown(e) }, day.date.getDate(), index.h("span", { class: "gux-sr-only" }, getDateMonthAndYearString(day.date, this.locale))))))))));
+    return (index.h("table", null, index.h("tr", null, getWeekdays(this.locale, this.startDayOfWeek).map(day => (index.h("th", null, day)))), this.getMonthDays(index$1).map(week => (index.h("tr", null, week.map(day => (index.h("td", { tabindex: this.isFocusableDate(day) ? '0' : '-1', class: day.class, "aria-hidden": day.hidden ? 'true' : 'false', "aria-disabled": day.disabled ? 'true' : 'false', "data-date": day.date.getTime(), onClick: () => void this.onDateClick(day.date), onMouseEnter: () => this.onDateMouseEnter(day.date), onKeyDown: e => void this.onKeyDown(e) }, index.h("div", { class: "gux-date" }, day.date.getDate(), index.h("span", { class: "gux-sr-only" }, getDateMonthAndYearString(day.date, this.locale)))))))))));
   }
   render() {
     return (index.h("div", { class: "gux-calendar" }, index.h("div", { class: "gux-header" }, index.h("button", { type: "button", class: "gux-left", onClick: () => this.incrementPreviewDateByMonth(-1), tabindex: "-1", "aria-hidden": "true" }, index.h("gux-icon", { decorative: true, "icon-name": "chevron-small-left" })), this.renderMonthHeader(), index.h("button", { type: "button", class: "gux-right", onClick: () => this.incrementPreviewDateByMonth(1), tabindex: "-1", "aria-hidden": "true" }, index.h("gux-icon", { decorative: true, "icon-name": "chevron-small-right" }))), index.h("div", { class: "gux-content" }, Array.from(Array(this.numberOfMonths).keys()).map(index => this.renderCalendarTable(index)))));

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

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-24342df6.js');
+const index = require('./index-75c9f0d9.js');
+const usage = require('./usage-bfcc4d96.js');
 const guxCardCss = ":host{display:block;width:fit-content}.gux-card{box-sizing:border-box;padding:var(--gse-ui-card-padding);background-color:var(--gse-ui-card-backgroundColor);border:var(--gse-ui-card-default-border-width) var(--gse-ui-card-default-border-style) var(--gse-ui-card-default-border-color);border-radius:var(--gse-ui-card-borderRadius)}.gux-card.gux-bordered{border:var(--gse-ui-card-default-border-width) var(--gse-ui-card-default-border-style) var(--gse-ui-card-default-border-color)}.gux-card.gux-raised{border:var(--gse-ui-card-raised-border-width) var(--gse-ui-card-raised-border-style) var(--gse-ui-card-raised-border-color);box-shadow:var(--gse-ui-card-raised-boxShadow-x) var(--gse-ui-card-raised-boxShadow-y) var(--gse-ui-card-raised-boxShadow-blur) var(--gse-ui-card-raised-boxShadow-spread) var(--gse-ui-card-raised-boxShadow-color)}.gux-card.gux-borderless{border:var(--gse-ui-card-borderless-border-width) var(--gse-ui-card-borderless-border-style) var(--gse-ui-card-borderless-border-color)}";

package/dist/cjs/gux-column-manager-item.cjs.entry.js CHANGED Viewed

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-0d0fdb85.js');
-const index$1 = require('./index-9bbde1aa.js');
-const guxColumnManager_service = require('./gux-column-manager.service-94f84964.js');
-require('./get-closest-element-ab4b2eee.js');
-require('./clamp-1bb96117.js');
-require('./simulate-native-event-fe3e62da.js');
+const index = require('./index-75c9f0d9.js');
+const index$1 = require('./index-dee802be.js');
+const guxColumnManager_service = require('./gux-column-manager.service-7f1cc862.js');
+require('./get-closest-element-26894e5a.js');
+require('./clamp-a9926a57.js');
+require('./simulate-native-event-8209a457.js');
 function getNewIndex(oldIndex, dropIndex, mouseOnTopHalfOfDropElement) {
   if (oldIndex < dropIndex) {
@@ -27,7 +27,7 @@ const translationResources = {
 	activateReordering: activateReordering
 };
-const guxColumnManagerItemCss = ":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;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;margin-right:4px;color:#596373;cursor:grab;border-radius:4px}.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:2px solid #aac9ff;outline-offset:0}.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:2px;left:24px;color:transparent;pointer-events:none;opacity:0.25}.gux-container .gux-select gux-text-highlight.gux-active{opacity:1}.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}";
+const guxColumnManagerItemCss = ":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);place-content:stretch flex-start;align-items:center;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;display:flex;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:1px;left:calc(var(--gse-ui-icon-size-sm) + var(--gse-ui-checkbox-gap));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}";
 const GuxColumnManagerItem = class {
   constructor(hostRef) {
@@ -140,7 +140,6 @@ const GuxColumnManagerItem = class {
         }
         case 'End': {
           event.preventDefault();
-          console.log('End');
           this.internal_keyboard_reorder_move.emit({
             delta: Infinity,
             column: this.text
@@ -165,7 +164,7 @@ const GuxColumnManagerItem = class {
       } }, index.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) }, index.h("gux-icon", { "icon-name": "grab-vertical", decorative: true }), index.h("span", { class: "gux-sr-only" }, this.i18n('activateReordering', { columnName: this.text }))), index.h("div", { class: "gux-select" }, index.h("slot", { onSlotchange: () => this.onSlotChange() }), index.h("gux-text-highlight", { class: { 'gux-active': this.highlightActive }, highlight: this.highlight, text: this.text, strategy: "contains" })))));
+      }, type: "button", onClick: () => this.toggleReorderMode(), onKeyDown: event => this.keyboardReorder(event), ref: el => (this.reorderButtonElement = el) }, index.h("gux-icon", { "icon-name": "grab-vertical", decorative: true }), index.h("span", { class: "gux-sr-only" }, this.i18n('activateReordering', { columnName: this.text }))), index.h("div", { class: "gux-select" }, index.h("slot", { onSlotchange: () => this.onSlotChange() }), index.h("gux-text-highlight", { highlight: this.highlight, text: this.text, strategy: "contains", dimmed: !this.highlightActive })))));
   }
   get root() { return index.getElement(this); }
 };

package/dist/cjs/gux-column-manager.cjs.entry.js ADDED Viewed

@@ -0,0 +1,126 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-75c9f0d9.js');
+const index$1 = require('./index-dee802be.js');
+const usage = require('./usage-bfcc4d96.js');
+const guxColumnManager_service = require('./gux-column-manager.service-7f1cc862.js');
+require('./get-closest-element-26894e5a.js');
+require('./clamp-a9926a57.js');
+require('./simulate-native-event-8209a457.js');
+const search = "Search";
+const searchResults = "search results";
+const selectedColumnCount = "{count} / {total} Columns Selected";
+const selectAllColumnsScreenReader = "{count} of {total} columns selected: check checkbox to select all {total} columns";
+const unselectAllColumnsScreenReader = "{count} of {total} columns selected: uncheck checkbox to unselect all {total} columns";
+const movePositionPrompt = "Press space or enter to move the {columnName} column to position {newPositionNumber} from position {oldPositionNumber}.";
+const reorderingModeActive = "Reordering mode active. Reposition the {columnName} column using the up arrow key, the down arrow key, the home key and the end key. Press Escape to deactivate reordering mode.";
+const translationResources = {
+	search: search,
+	searchResults: searchResults,
+	selectedColumnCount: selectedColumnCount,
+	selectAllColumnsScreenReader: selectAllColumnsScreenReader,
+	unselectAllColumnsScreenReader: unselectAllColumnsScreenReader,
+	movePositionPrompt: movePositionPrompt,
+	reorderingModeActive: reorderingModeActive
+};
+const guxColumnManagerCss = ".gux-container{width:320px;min-width:320px;padding:var(--gse-ui-dataTableItems-editColumn-editColumnContent-padding)}.gux-container .gux-search gux-content-search{width:100%}.gux-container .gux-search gux-content-search input[type=search]::-webkit-search-decoration,.gux-container .gux-search gux-content-search input[type=search]::-webkit-search-cancel-button,.gux-container .gux-search gux-content-search input[type=search]::-webkit-search-results-button,.gux-container .gux-search gux-content-search input[type=search]::-webkit-search-results-decoration{display:none;-webkit-appearance:none}.gux-container .gux-select{padding:var(--gse-ui-dataTableItems-editColumn-editColumnContent-padding);margin-left:24px}.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}";
+const GuxColumnManager = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.guxorderchange = index.createEvent(this, "guxorderchange", 7);
+    this.highlightResults = {
+      matchCount: 0,
+      currentMatch: 0
+    };
+    this.keyboardOrderChange = guxColumnManager_service.getEmptyKeyboardOrderChange();
+  }
+  watchKeyboardOrderChange() {
+    guxColumnManager_service.setKeyboardReorderPositionIndicator(this.root, this.keyboardOrderChange);
+  }
+  async componentWillLoad() {
+    usage.trackComponent(this.root);
+    this.i18n = await index$1.buildI18nForComponent(this.root, translationResources);
+  }
+  componentDidLoad() {
+    guxColumnManager_service.setMainCheckboxElementCheckedState(this.root, this.mainCheckboxElement);
+  }
+  handleInternalorderchange(event) {
+    event.stopPropagation();
+    this.emitOrderChange(event.detail);
+  }
+  emitOrderChange(orderChange) {
+    const { oldIndex, newIndex } = orderChange;
+    if (oldIndex !== newIndex) {
+      const newOrder = guxColumnManager_service.getNewOrder(this.root, orderChange);
+      this.guxorderchange.emit(newOrder);
+    }
+  }
+  handleInternalkeyboardorderstart(event) {
+    event.stopPropagation();
+    const columnName = event.detail;
+    const oldIndex = guxColumnManager_service.getIndexInParent(event.target);
+    this.keyboardOrderChange = {
+      oldIndex,
+      newIndex: oldIndex
+    };
+    void this.announceElement.guxAnnounce(this.i18n('reorderingModeActive', { columnName }));
+  }
+  handleInternalkeyboardreordermove(event) {
+    event.stopPropagation();
+    const { delta, column } = event.detail;
+    this.keyboardOrderChange = guxColumnManager_service.getNewKeyboardOrderChange(this.root, this.keyboardOrderChange, delta);
+    const columnName = column;
+    const newPositionNumber = this.keyboardOrderChange.newIndex + 1;
+    const oldPositionNumber = this.keyboardOrderChange.oldIndex + 1;
+    void this.announceElement.guxAnnounce(this.i18n('movePositionPrompt', {
+      columnName,
+      newPositionNumber,
+      oldPositionNumber
+    }));
+  }
+  handleInternalkeyboarddoreorder(event) {
+    event.stopPropagation();
+    this.emitOrderChange(this.keyboardOrderChange);
+    void event.target.guxFocus();
+  }
+  handleInternalkeyboardorderfinish(event) {
+    event.stopPropagation();
+    this.keyboardOrderChange = guxColumnManager_service.getEmptyKeyboardOrderChange();
+  }
+  onSearchInput() {
+    this.highlightResults = guxColumnManager_service.setHighlights(this.root, this.searchElement);
+  }
+  onGuxCurrentMatchChanged(event) {
+    this.highlightResults = guxColumnManager_service.setHighlights(this.root, this.searchElement, event.detail);
+  }
+  onMainCheckboxChange() {
+    guxColumnManager_service.setAllCheckboxInputs(this.root, this.mainCheckboxElement.checked);
+    index.forceUpdate(this.root);
+  }
+  onListChange() {
+    guxColumnManager_service.setMainCheckboxElementCheckedState(this.root, this.mainCheckboxElement);
+    index.forceUpdate(this.root);
+  }
+  onSlotChange() {
+    this.onListChange();
+  }
+  renderSelectedColumnCount() {
+    const { count, total } = guxColumnManager_service.getSelectedColumnCount(this.root);
+    return (index.h("div", null, index.h("span", { "aria-hidden": "true" }, this.i18n('selectedColumnCount', { count, total })), index.h("span", { class: "gux-sr-only" }, count === total ? (index.h("span", null, ": ", this.i18n('unselectAllColumnsScreenReader', { count, total }))) : (index.h("span", null, ": ", this.i18n('selectAllColumnsScreenReader', { count, total }))))));
+  }
+  render() {
+    return (index.h("div", { class: "gux-container" }, index.h("div", { class: "gux-sr-only", "aria-live": "polite" }, `${this.highlightResults.matchCount} ${this.i18n('searchResults')}`), index.h("div", { class: "gux-search" }, index.h("gux-content-search", { "match-count": this.highlightResults.matchCount, "current-match": this.highlightResults.currentMatch, onGuxcurrentmatchchanged: event => this.onGuxCurrentMatchChanged(event) }, index.h("input", { type: "search", placeholder: this.i18n('search'), onInput: () => this.onSearchInput(), ref: el => (this.searchElement = el) }))), index.h("div", { class: "gux-select" }, index.h("gux-form-field-checkbox", null, index.h("input", { slot: "input", type: "checkbox", ref: el => (this.mainCheckboxElement = el), onChange: () => this.onMainCheckboxChange() }), index.h("label", { slot: "label" }, this.renderSelectedColumnCount()))), index.h("div", { class: "gux-list", onChange: () => this.onListChange() }, index.h("slot", { onSlotchange: () => this.onSlotChange() })), index.h("gux-announce-beta", { ref: el => (this.announceElement = el) })));
+  }
+  get root() { return index.getElement(this); }
+  static get watchers() { return {
+    "keyboardOrderChange": ["watchKeyboardOrderChange"]
+  }; }
+};
+GuxColumnManager.style = guxColumnManagerCss;
+exports.gux_column_manager = GuxColumnManager;

package/dist/cjs/gux-column-manager.service-7f1cc862.js ADDED Viewed

@@ -0,0 +1,93 @@
+'use strict';
+const clamp = require('./clamp-a9926a57.js');
+const simulateNativeEvent = require('./simulate-native-event-8209a457.js');
+function getNewOrder(root, { oldIndex, newIndex }) {
+  const order = Array.from(root.children).map(x => x.orderId);
+  const [element] = order.splice(oldIndex, 1);
+  order.splice(newIndex, 0, element);
+  return order;
+}
+function setKeyboardReorderPositionIndicator(root, { oldIndex, newIndex }) {
+  getColumnManagerItems(root).forEach((item, index) => {
+    if (index !== newIndex) {
+      item.removeAttribute('gs-reorder-indicator');
+    }
+    else {
+      const position = newIndex < oldIndex ? 'above' : 'below';
+      item.setAttribute('gs-reorder-indicator', position);
+    }
+  });
+}
+function getNewKeyboardOrderChange(root, currentKeyboardOrderChange, delta) {
+  const newIndex = clamp.clamp(currentKeyboardOrderChange.newIndex + delta, 0, Array.from(root.children).length - 1);
+  return Object.assign({}, currentKeyboardOrderChange, { newIndex });
+}
+function getEmptyKeyboardOrderChange() {
+  return { oldIndex: null, newIndex: null };
+}
+function getIndexInParent(target) {
+  return Array.from(target.parentNode.children).indexOf(target);
+}
+function setAllCheckboxInputs(root, checked) {
+  getCheckboxInputs(root).forEach(checkboxInput => {
+    if (checkboxInput.checked !== checked) {
+      checkboxInput.checked = checked;
+      simulateNativeEvent.simulateNativeEvent(checkboxInput, 'input');
+      simulateNativeEvent.simulateNativeEvent(checkboxInput, 'change');
+    }
+  });
+}
+function setMainCheckboxElementCheckedState(root, mainCheckboxElement) {
+  const { count, total } = getSelectedColumnCount(root);
+  if (count === 0) {
+    mainCheckboxElement.indeterminate = false;
+    mainCheckboxElement.checked = false;
+  }
+  else if (count === total) {
+    mainCheckboxElement.indeterminate = false;
+    mainCheckboxElement.checked = true;
+  }
+  else {
+    mainCheckboxElement.indeterminate = true;
+  }
+}
+function getSelectedColumnCount(root) {
+  const total = getCheckboxInputs(root).length;
+  const count = getCheckedCheckboxInputs(root).length;
+  return { count, total };
+}
+function setHighlights(root, searchElement, currentMatch = 1) {
+  return getColumnManagerItems(root).reduce((acc, item) => {
+    const searchString = searchElement.value.toLowerCase();
+    if (searchString &&
+      item.textContent.toLowerCase().includes(searchString)) {
+      const matchCount = acc.matchCount + 1;
+      void item.guxSetHighlight(searchElement.value, matchCount === currentMatch);
+      return { matchCount, currentMatch };
+    }
+    void item.guxSetHighlight();
+    return acc;
+  }, { matchCount: 0, currentMatch: 0 });
+}
+function getCheckboxInputs(root) {
+  return Array.from(root.querySelectorAll('input[type=checkbox]'));
+}
+function getCheckedCheckboxInputs(root) {
+  const checkboxInputs = getCheckboxInputs(root);
+  return checkboxInputs.filter(x => x.checked);
+}
+function getColumnManagerItems(root) {
+  return Array.from(root.querySelectorAll('gux-column-manager-item'));
+}
+exports.getEmptyKeyboardOrderChange = getEmptyKeyboardOrderChange;
+exports.getIndexInParent = getIndexInParent;
+exports.getNewKeyboardOrderChange = getNewKeyboardOrderChange;
+exports.getNewOrder = getNewOrder;
+exports.getSelectedColumnCount = getSelectedColumnCount;
+exports.setAllCheckboxInputs = setAllCheckboxInputs;
+exports.setHighlights = setHighlights;
+exports.setKeyboardReorderPositionIndicator = setKeyboardReorderPositionIndicator;
+exports.setMainCheckboxElementCheckedState = setMainCheckboxElementCheckedState;