genesys-spark-components 4.0.0-beta.5 → 4.0.0-beta.51

package/dist/cjs/gux-tabs.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-2c2d30d0.js');
+const index = require('./index-75c9f0d9.js');
+const usage = require('./usage-b9ad66f0.js');
 
-const guxTabsCss = ".gux-tabs.gux-vertical{display:flex;height:100%}";
+const guxTabsCss = ":host{display:flex;flex-direction:column}:host .gux-tabs{display:flex;height:100%}:host .gux-tabs:not(.gux-vertical){flex-direction:column}:host .gux-panel-container{display:flex;flex-direction:column;height:100%}";
 
 const GuxTabs = class {
   constructor(hostRef) {
@@ -50,7 +50,7 @@ const GuxTabs = class {
     usage.trackComponent(this.root);
   }
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: `gux-tabs gux-${this.alignment} gux-${this.orientation}` }, index.h("slot", { name: "tab-list" }), index.h("div", { class: `gux-${this.alignment} gux-${this.orientation}` }, index.h("slot", { onSlotchange: this.onSlotchange.bind(this) })))));
+    return (index.h(index.Host, null, index.h("div", { class: `gux-tabs gux-${this.alignment} gux-${this.orientation}` }, index.h("slot", { name: "tab-list" }), index.h("div", { class: `gux-${this.alignment} gux-${this.orientation} gux-panel-container` }, index.h("slot", { onSlotchange: this.onSlotchange.bind(this) })))));
   }
   get root() { return index.getElement(this); }
   static get watchers() { return {

package/dist/cjs/gux-tag.cjs.entry.js

@@ -0,0 +1,79 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-75c9f0d9.js');
+const index$1 = require('./index-788d733b.js');
+const usage = require('./usage-b9ad66f0.js');
+require('./get-closest-element-26894e5a.js');
+
+const tag = "tag with label: {label}";
+const tagResources = {
+	tag: tag,
+	"tag-disabled": "disabled tag with label: {label}",
+	"remove-tag": "Remove tag with label: {label}"
+};
+
+const guxTagCss = ":host{display:inline-block;border-radius:var(--gse-ui-tag-borderRadius)}.gux-tag{display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-tag-removable-gap);align-content:stretch;align-items:center;justify-content:flex-start;height:var(--gse-ui-tag-height);padding:var(--gse-ui-tag-padding);font-family:var(--gse-ui-tag-text-fontFamily);font-size:var(--gse-ui-tag-text-fontSize);font-weight:var(--gse-ui-tag-text-fontWeight, 600);line-height:var(--gse-ui-tag-text-lineHeight);color:var(--gse-ui-tag-default-foregroundColor);background-color:var(--gse-ui-tag-default-backgroundColor);border-radius:var(--gse-ui-tag-borderRadius)}.gux-tag.gux-disabled{position:relative}.gux-tag.gux-disabled::before{position:absolute;inset:0;content:\"\";background-color:#fff;border-radius:var(--gse-ui-tag-borderRadius);opacity:var(--gse-ui-tag-disabled-opacity)}.gux-tag gux-tooltip-title{white-space:nowrap;cursor:default}.gux-tag gux-tooltip-title ::slotted(gux-icon){font-size:var(--gse-ui-tag-button-size)}.gux-tag .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-tag .gux-tag-remove-button{all:unset;display:flex;align-content:center;align-items:center;justify-content:center}.gux-tag .gux-tag-remove-button:not(:disabled):hover{cursor:pointer}.gux-tag .gux-tag-remove-button .gux-tag-remove-icon{width:var(--gse-ui-tag-button-size);height:var(--gse-ui-tag-button-size);margin-right:-4px}.gux-tag .gux-tag-remove-button:focus-within .gux-tag-remove-icon{border-radius:var(--gse-semantic-focusRing-cornerRadius);outline:var(--gse-semantic-focusRing-small-border-width) solid var(--gse-semantic-color-focus)}.gux-tag.gux-accent-default{color:var(--gse-ui-tag-default-foregroundColor);background-color:var(--gse-ui-tag-default-backgroundColor)}.gux-tag.gux-accent-1{color:var(--gse-ui-tag-accent1-foregroundColor);background-color:var(--gse-ui-tag-accent1-backgroundColor)}.gux-tag.gux-accent-2{color:var(--gse-ui-tag-accent2-foregroundColor);background-color:var(--gse-ui-tag-accent2-backgroundColor)}.gux-tag.gux-accent-3{color:var(--gse-ui-tag-accent3-foregroundColor);background-color:var(--gse-ui-tag-accent3-backgroundColor)}.gux-tag.gux-accent-4{color:var(--gse-ui-tag-accent4-foregroundColor);background-color:var(--gse-ui-tag-accent4-backgroundColor)}.gux-tag.gux-accent-5{color:var(--gse-ui-tag-accent5-foregroundColor);background-color:var(--gse-ui-tag-accent5-backgroundColor)}.gux-tag.gux-accent-6{color:var(--gse-ui-tag-accent6-foregroundColor);background-color:var(--gse-ui-tag-accent6-backgroundColor)}.gux-tag.gux-accent-7{color:var(--gse-ui-tag-accent7-foregroundColor);background-color:var(--gse-ui-tag-accent7-backgroundColor)}.gux-tag.gux-accent-8{color:var(--gse-ui-tag-accent8-foregroundColor);background-color:var(--gse-ui-tag-accent8-backgroundColor)}.gux-tag.gux-accent-9{color:var(--gse-ui-tag-accent9-foregroundColor);background-color:var(--gse-ui-tag-accent9-backgroundColor)}.gux-tag.gux-accent-10{color:var(--gse-ui-tag-accent10-foregroundColor);background-color:var(--gse-ui-tag-accent10-backgroundColor)}.gux-tag.gux-accent-inherit{color:inherit;background-color:inherit}";
+
+const GuxTag = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.guxdelete = index.createEvent(this, "guxdelete", 7);
+    this.accent = 'default';
+    this.disabled = false;
+    this.removable = false;
+    this.label = undefined;
+  }
+  onKeyDown(event) {
+    switch (event.key) {
+      case 'Backspace':
+      case 'Delete':
+        this.removeTag();
+    }
+  }
+  removeTag() {
+    if (this.disabled || !this.removable) {
+      return;
+    }
+    this.guxdelete.emit();
+  }
+  onSlotChange(event) {
+    const slotAssignedNodes = event.composedPath()[0].assignedNodes();
+    this.label = slotAssignedNodes
+      .map(nodeItem => nodeItem.textContent)
+      .join('');
+  }
+  renderTagTitle() {
+    return (index.h("gux-tooltip-title", null, index.h("span", null, index.h("slot", { "aria-hidden": "true", onSlotchange: this.onSlotChange.bind(this) }))));
+  }
+  renderSrText() {
+    return (index.h("div", { class: "gux-sr-only" }, this.disabled
+      ? this.i18n('tag-disabled', { label: this.label })
+      : this.i18n('tag', { label: this.label })));
+  }
+  renderRemoveButton() {
+    if (this.removable) {
+      return (index.h("button", { class: "gux-tag-remove-button", onClick: this.removeTag.bind(this), type: "button", disabled: this.disabled }, index.h("gux-icon", { class: "gux-tag-remove-icon", "icon-name": "close", "screenreader-text": this.i18n('remove-tag', { label: this.label }) })));
+    }
+  }
+  componentWillLoad() {
+    usage.trackComponent(this.root, {
+      variant: this.removable ? 'removable' : 'permenant'
+    });
+  }
+  async componentWillRender() {
+    this.i18n = await index$1.buildI18nForComponent(this.root, tagResources);
+  }
+  render() {
+    return (index.h("div", { class: {
+        'gux-tag': true,
+        [`gux-accent-${this.accent}`]: true,
+        'gux-disabled': this.disabled
+      }, "aria-disabled": this.disabled.toString() }, this.renderTagTitle(), this.renderSrText(), this.renderRemoveButton()));
+  }
+  get root() { return index.getElement(this); }
+};
+GuxTag.style = guxTagCss;
+
+exports.gux_tag = GuxTag;

package/dist/cjs/gux-text-highlight.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-2c2d30d0.js');
+const index = require('./index-75c9f0d9.js');
+const usage = require('./usage-b9ad66f0.js');
 
 const conversion = /[ +]/g;
 const expressions = new Map();
@@ -47,7 +47,7 @@ function convertToRegex(word) {
   return new RegExp(newexp + '$', 'i');
 }
 
-const guxTextHighlightCss = "mark{background-color:#ffff00;color:#000000}";
+const guxTextHighlightCss = "span{color:var(--gse-ui-search-match-firstLevel-foregroundColour)}span mark{background-color:var(--gse-ui-search-match-firstLevel-backgroundColor)}.gux-dimmed mark{background-color:var(--gse-ui-search-match-subsequentLevel-backgroundColor)}";
 
 const GuxTextHighlight = class {
   constructor(hostRef) {
@@ -55,6 +55,7 @@ const GuxTextHighlight = class {
     this.text = undefined;
     this.highlight = undefined;
     this.strategy = 'start';
+    this.dimmed = false;
   }
   componentWillLoad() {
     usage.trackComponent(this.root);
@@ -70,15 +71,15 @@ const GuxTextHighlight = class {
           return this.renderFuzzy();
       }
     }
-    return (index.h("span", null, this.text));
+    return (index.h("span", { class: { 'gux-dimmed': this.dimmed } }, this.text));
   }
   renderStartsWith() {
     if (this.text.toLowerCase().startsWith(this.highlight.toLowerCase())) {
       const highlight = this.text.substring(0, this.highlight.length);
       const after = this.text.substring(this.highlight.length);
-      return (index.h("span", null, index.h("mark", null, highlight), after));
+      return (index.h("span", { class: { 'gux-dimmed': this.dimmed } }, index.h("mark", null, highlight), after));
     }
-    return (index.h("span", null, this.text));
+    return (index.h("span", { class: { 'gux-dimmed': this.dimmed } }, this.text));
   }
   renderContains() {
     const html = {
@@ -94,7 +95,7 @@ const GuxTextHighlight = class {
       html.highlighted += before + `<mark>${highlight}</mark>`;
       html.remaining = html.remaining.substring(index + highlight.length);
     }
-    return (index.h("span", { innerHTML: html.highlighted + html.remaining }));
+    return (index.h("span", { class: { 'gux-dimmed': this.dimmed }, innerHTML: html.highlighted + html.remaining }));
   }
   renderFuzzy() {
     if (matchesFuzzy(this.highlight, this.text)) {
@@ -108,9 +109,9 @@ const GuxTextHighlight = class {
         highlighted: '',
         remaining: this.text
       });
-      return (index.h("span", { innerHTML: html.highlighted + html.remaining }));
+      return (index.h("span", { class: { 'gux-dimmed': this.dimmed }, innerHTML: html.highlighted + html.remaining }));
     }
-    return (index.h("span", null, this.text));
+    return (index.h("span", { class: { 'gux-dimmed': this.dimmed } }, this.text));
   }
   get root() { return index.getElement(this); }
 };

package/dist/cjs/gux-time-beta.cjs.entry.js

@@ -2,24 +2,27 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-2c2d30d0.js');
-const DateTimeFormatter = require('./DateTimeFormatter-8deff48e.js');
-const index$1 = require('./index-9bbde1aa.js');
-require('./get-closest-element-ab4b2eee.js');
+const index = require('./index-75c9f0d9.js');
+const usage = require('./usage-b9ad66f0.js');
+const getValidTimezone = require('./get-valid-timezone-7bb7bdc6.js');
+const index$1 = require('./index-788d733b.js');
+require('./get-closest-element-26894e5a.js');
 
 const GuxTime = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.datetime = new Date().toISOString();
     this.format = 'short';
+    this.timeZone = undefined;
   }
   componentWillLoad() {
     usage.trackComponent(this.root);
-    this.formatter = new DateTimeFormatter.DateTimeFormatter(index$1.getDesiredLocale(this.root));
+    this.formatter = new getValidTimezone.DateTimeFormatter(index$1.getDesiredLocale(this.root));
   }
   render() {
-    return (index.h(index.Host, null, this.formatter.formatTime(new Date(this.datetime), this.format)));
+    return (index.h(index.Host, null, this.formatter.formatTime(new Date(this.datetime), this.format, {
+      timeZone: getValidTimezone.getValidTimezone(this.timeZone)
+    })));
   }
   get root() { return index.getElement(this); }
 };

package/dist/cjs/gux-time-picker.cjs.entry.js

@@ -0,0 +1,392 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index$1 = require('./index-75c9f0d9.js');
+const onClickOutside = require('./on-click-outside-3c0f8816.js');
+const simulateNativeEvent = require('./simulate-native-event-8209a457.js');
+const afterNextRender = require('./after-next-render-a023ef47.js');
+const index = require('./index-788d733b.js');
+const usage = require('./usage-b9ad66f0.js');
+require('./get-closest-element-26894e5a.js');
+
+const am = "AM";
+const clockButton = "Toggle suggested times";
+const hoursInput = "Input hours";
+const minutesInput = "Input minutes";
+const pm = "PM";
+const timeOptionsState = "Time options open: {state}";
+const toggleAmPM = "{amOrPm} selected, click to toggle";
+const translationResources = {
+	am: am,
+	"time-separator": ":",
+	clockButton: clockButton,
+	hoursInput: hoursInput,
+	minutesInput: minutesInput,
+	pm: pm,
+	timeOptionsState: timeOptionsState,
+	toggleAmPM: toggleAmPM
+};
+
+function getTimeDisplayValues(minuteInterval, clockType) {
+  const minuteOptions = [0, 15, 30, 45]
+    .filter(option => Number.isInteger(option / minuteInterval))
+    .map(x => String(x).padStart(2, '0'));
+  const hourOptions = clockType === '12h'
+    ? ['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11']
+    : Array.from(Array(24).keys()).map(x => String(x).padStart(2, '0'));
+  return hourOptions.reduce((acc, hourOption) => {
+    return acc.concat(minuteOptions.map(minuteOption => `${hourOption}:${minuteOption}`));
+  }, []);
+}
+function getLocaleClockType(root) {
+  const locale = index.getDesiredLocale(root);
+  const date = new Date('January 19, 1975 15:00:00 UTC+00:00');
+  const time = new Intl.DateTimeFormat(locale, {
+    timeStyle: 'short',
+    timeZone: 'UTC'
+  }).format(date);
+  // The localization team has requested that arabic uses the 24h clock.
+  if (locale.startsWith('ar')) {
+    return '24h';
+  }
+  return new RegExp('.*15.*').test(time) ? '24h' : '12h';
+}
+function incrementHour(value, delta) {
+  const [hour, minute] = value.split(':');
+  const newHour = ((parseInt(hour, 10) + delta + 24) % 24)
+    .toString()
+    .padStart(2, '0');
+  return `${newHour}:${minute}`;
+}
+function incrementMinute(value, delta, step) {
+  const [hour, minute] = value.split(':');
+  const minuteInt = parseInt(minute, 10);
+  let newMinuteInt = (minuteInt + delta + 60) % 60;
+  while (newMinuteInt % step !== 0) {
+    newMinuteInt = (newMinuteInt + delta + 60) % 60;
+  }
+  const newMinute = newMinuteInt.toString().padStart(2, '0');
+  return `${hour}:${newMinute}`;
+}
+function getDisplayValue(value, clockType) {
+  const [hour, minute] = value.split(':');
+  if (clockType === '12h') {
+    return `${(parseInt(hour, 10) % 12 || 12).toString()}:${minute}`;
+  }
+  return `${hour}:${minute}`;
+}
+function getValue(displayValue, clockType, isAm) {
+  const [hour, minute] = displayValue.split(':');
+  if (clockType === '12h') {
+    if (isAm) {
+      return `${(parseInt(hour, 10) % 12)
+        .toString()
+        .padStart(2, '0')}:${minute}`;
+    }
+    return `${((parseInt(hour, 10) % 12) + 12)
+      .toString()
+      .padStart(2, '0')}:${minute}`;
+  }
+  return `${hour}:${minute}`;
+}
+function getHourDisplayValue(value, clockType) {
+  const [hour] = getDisplayValue(value, clockType).split(':');
+  return hour;
+}
+function getMinuteDisplayValue(value) {
+  const [, minute] = value.split(':');
+  return minute;
+}
+function isAm(value) {
+  const [hour] = value.split(':');
+  return parseInt(hour, 10) < 12;
+}
+function getHoursPattern(clockType) {
+  if (clockType === '12h') {
+    return '^(0?[1-9]|1[012])$';
+  }
+  return '^([01]?[0-9]|2[0-3])$';
+}
+function getMinutesPattern() {
+  return '^[0-5][0-9]$';
+}
+function getValidValueHourChange(value, clockType, change, selectionStart, hourInputLength) {
+  const [displayValue, minute] = getDisplayValue(value, clockType).split(':');
+  let wantedDisplayValue = displayValue;
+  if (change === 'Backspace') {
+    if (clockType == '12h' && hourInputLength == 1) {
+      wantedDisplayValue = wantedDisplayValue
+        .split('')
+        .filter((_, i) => i == selectionStart - 1)
+        .join('');
+    }
+    else {
+      wantedDisplayValue = wantedDisplayValue
+        .split('')
+        .filter((_, i) => i !== selectionStart - 1)
+        .join('')
+        .padStart(2, '0');
+    }
+  }
+  else {
+    wantedDisplayValue = parseInt(wantedDisplayValue.slice(0, selectionStart) +
+      change +
+      wantedDisplayValue.slice(selectionStart + 1), 10)
+      .toString()
+      .slice(-2)
+      .padStart(2, '0');
+  }
+  if (!new RegExp(getHoursPattern(clockType)).test(wantedDisplayValue)) {
+    if (clockType === '12h') {
+      wantedDisplayValue = change;
+    }
+    else {
+      wantedDisplayValue = change.padStart(2, '0');
+    }
+  }
+  return getValue(`${wantedDisplayValue}:${minute}`, clockType, isAm(value));
+}
+function getValidValueMinuteChange(value, change, selectionStart) {
+  const [hour, minute] = value.split(':');
+  let wanted = minute;
+  if (change === 'Backspace') {
+    wanted = wanted
+      .split('')
+      .filter((_, i) => i !== selectionStart - 1)
+      .join('')
+      .padStart(2, '0');
+  }
+  else {
+    wanted = (wanted.slice(0, selectionStart) +
+      change +
+      wanted.slice(selectionStart + 1))
+      .slice(-2)
+      .padStart(2, '0');
+  }
+  if (!new RegExp(getMinutesPattern()).test(wanted)) {
+    wanted = change.padStart(2, '0');
+  }
+  return `${hour}:${wanted}`;
+}
+
+const guxTimePickerCss = ".gux-time-picker{position:relative;display:inline-block}.gux-time-picker.gux-error .gux-input-time{border-color:var(--gse-ui-formControl-input-error-border-color)}.gux-time-picker .gux-input-time{box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-formControl-input-gap);align-content:stretch;align-items:center;justify-content:center;width:100%;height:var(--gse-ui-formControl-input-textfield-height);padding:var(--gse-ui-formControl-input-padding);font-family:var(--gse-ui-formControl-input-contentText-fontFamily);font-size:var(--gse-ui-formControl-input-contentText-fontSize);line-height:var(--gse-ui-formControl-input-contentText-lineHeight);color:var(--gse-ui-formControl-input-populatedColor);white-space:nowrap;background-color:var(--gse-ui-formControl-input-backgroundColor);background-image:none;border:var(--gse-ui-formControl-input-default-border-width) var(--gse-ui-formControl-input-default-border-style) var(--gse-ui-formControl-input-default-border-color);border-radius:var(--gse-ui-formControl-input-borderRadius)}.gux-time-picker .gux-input-time:focus-within{border:var(--gse-ui-timePicker-focusTime-border-width) var(--gse-ui-timePicker-focusTime-border-style) var(--gse-ui-timePicker-focusTime-border-color);border-radius:4px}.gux-time-picker .gux-input-time:hover:not(:disabled){border:var(--gse-ui-formControl-input-hover-border-width) var(--gse-ui-formControl-input-hover-border-style) var(--gse-ui-formControl-input-hover-border-color)}.gux-time-picker .gux-input-time input{flex:1 1 auto;align-self:auto;order:0;width:2ch;padding:0;font-size:var(--gse-ui-formControl-label-text-fontSize);background-color:var(--gse-ui-formControl-input-backgroundColor);border:none;outline:none}.gux-time-picker .gux-input-time input.gux-input-time-hours{text-align:right}.gux-time-picker .gux-input-time input::placeholder{color:var(--gse-ui-formControl-input-placeholderColor);opacity:1}.gux-time-picker .gux-input-time .gux-input-time-am-pm-selector{display:grid;grid-template:auto 1fr/auto 1fr auto;place-items:flex-end;padding:0;font-family:var(--gse-ui-formControl-input-prefixSufix-text-fontFamily);font-size:var(--gse-ui-formControl-input-prefixSufix-text-fontSize);font-weight:var(--gse-ui-formControl-input-prefixSufix-text-fontWeight);line-height:var(--gse-ui-formControl-input-prefixSufix-text-lineHeight);color:var(--gse-ui-formControl-input-populatedColor);background:transparent;border:none;outline:none}.gux-time-picker .gux-input-time .gux-input-time-am-pm-selector:focus-visible{border:var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);border-radius:var(--gse-ui-formControl-focusRing-borderRadius);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-time-picker .gux-input-time .gux-input-time-am-pm-selector .gux-meridiem{grid-row:1/1;grid-column:1/1;visibility:hidden}.gux-time-picker .gux-input-time .gux-input-time-am-pm-selector .gux-meridiem.gux-visible{visibility:visible}.gux-time-picker .gux-input-time .gux-clock-button{display:flex;flex:0 1 auto;align-items:center;align-self:auto;justify-content:center;order:0;padding:0;color:var(--gse-ui-formControl-input-inputIcon-iconEndColor);background:transparent;border:none}.gux-time-picker .gux-input-time .gux-clock-button.gux-active:not(:disabled){color:#4856cb;cursor:pointer}.gux-time-picker .gux-input-time .gux-clock-button:focus{outline:none}.gux-time-picker .gux-input-time .gux-clock-button:focus-visible{border:var(--gse-ui-timePicker-focusClock-border-width) var(--gse-ui-timePicker-focusClock-border-style) var(--gse-ui-timePicker-focusClock-border-color);border-radius:4px}.gux-time-picker .gux-input-time .gux-clock-button gux-icon{width:var(--gse-ui-icon-size-sm);height:var(--gse-ui-icon-size-sm);padding:3px}.gux-time-picker .gux-time-separator{padding:0 1ch}.gux-time-picker .gux-list-container{max-height:150px;padding:var(--gse-ui-menu-padding);margin:0;overflow-y:scroll;list-style:none;background-color:var(--gse-ui-menu-backgroundColor);border:var(--gse-ui-menu-border-width) var(--gse-ui-menu-border-style) var(--gse-ui-menu-border-color);border-radius:var(--gse-ui-menu-borderRadius);box-shadow:var(--gse-ui-menu-boxShadow-x) var(--gse-ui-menu-boxShadow-y) var(--gse-ui-menu-boxShadow-blur) var(--gse-ui-menu-boxShadow-spread) var(--gse-ui-menu-boxShadow-color)}";
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const GuxTimePicker = class {
+  constructor(hostRef) {
+    index$1.registerInstance(this, hostRef);
+    this.value = '00:00';
+    this.interval = 60;
+    this.step = 1;
+    this.disabled = false;
+    this.required = false;
+    this.hasError = false;
+    this.clockType = undefined;
+    this.expanded = false;
+  }
+  onFocus() {
+    this.valueLastChange = this.value;
+  }
+  onBlur() {
+    if (this.valueLastChange !== this.value) {
+      simulateNativeEvent.simulateNativeEvent(this.root, 'change');
+    }
+  }
+  onClickOutside() {
+    this.expanded = false;
+  }
+  handleKeydown(event) {
+    switch (event.key) {
+      case 'Escape':
+      case 'Tab':
+        this.expanded = false;
+        break;
+    }
+  }
+  async componentWillLoad() {
+    usage.trackComponent(this.root);
+    this.i18n = await index.buildI18nForComponent(this.root, translationResources);
+    this.clockType = this.clockType || getLocaleClockType(this.root);
+  }
+  updateValue(value, fireChange = false) {
+    if (value !== this.value) {
+      this.value = value;
+      simulateNativeEvent.simulateNativeEvent(this.root, 'input');
+      if (fireChange) {
+        if (this.valueLastChange !== this.value) {
+          simulateNativeEvent.simulateNativeEvent(this.root, 'change');
+          this.valueLastChange = this.value;
+        }
+      }
+    }
+  }
+  valueToId(value) {
+    return `gux-id-${value.replace(':', '-')}`;
+  }
+  focusRelevantItemInPopupList() {
+    afterNextRender.afterNextRender(() => {
+      void this.listElement.guxFocusItemByClosestId(this.valueToId(this.value));
+    });
+  }
+  toggleDropdown() {
+    this.expanded = !this.expanded;
+    if (this.expanded) {
+      this.focusRelevantItemInPopupList();
+    }
+  }
+  handleClickDropdownValue(displayValue) {
+    const value = getValue(displayValue, this.clockType, isAm(this.value));
+    this.updateValue(value, true);
+    this.clockButton.focus();
+    this.expanded = false;
+  }
+  onHourKeyDown(event) {
+    switch (event.key) {
+      case 'Tab':
+      case 'ArrowLeft':
+      case 'ArrowRight':
+      case 'Escape':
+        break;
+      case 'ArrowDown':
+        event.preventDefault();
+        this.updateValue(incrementHour(this.value, -1));
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        this.updateValue(incrementHour(this.value, 1));
+        break;
+      case 'Backspace':
+      case '0':
+      case '1':
+      case '2':
+      case '3':
+      case '4':
+      case '5':
+      case '6':
+      case '7':
+      case '8':
+      case '9':
+        {
+          event.preventDefault();
+          this.hourInputElement.setSelectionRange(2, 2);
+          this.updateValue(getValidValueHourChange(this.value, this.clockType, event.key, this.hourInputElement.selectionStart, this.hourInputElement.value.length));
+        }
+        break;
+      default:
+        event.preventDefault();
+    }
+  }
+  onMinuteKeyDown(event) {
+    switch (event.key) {
+      case 'Tab':
+      case 'ArrowLeft':
+      case 'ArrowRight':
+      case 'Escape':
+        break;
+      case 'ArrowDown':
+        event.preventDefault();
+        this.updateValue(incrementMinute(this.value, -1, this.step));
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        this.updateValue(incrementMinute(this.value, 1, this.step));
+        break;
+      case 'Backspace':
+      case '0':
+      case '1':
+      case '2':
+      case '3':
+      case '4':
+      case '5':
+      case '6':
+      case '7':
+      case '8':
+      case '9': {
+        event.preventDefault();
+        this.minuteInputElement.setSelectionRange(2, 2);
+        this.updateValue(getValidValueMinuteChange(this.value, event.key, this.minuteInputElement.selectionStart));
+        break;
+      }
+      default:
+        event.preventDefault();
+    }
+  }
+  onAmPmButtonKeyDown(event) {
+    switch (event.key) {
+      case 'ArrowDown':
+      case 'ArrowUp':
+        this.toggleAmPm(event);
+        break;
+    }
+  }
+  onListKeyDown(event) {
+    switch (event.key) {
+      case 'Escape':
+        this.expanded = false;
+        this.clockButton.focus();
+        break;
+    }
+  }
+  toggleAmPm(event) {
+    event.preventDefault();
+    this.updateValue(incrementHour(this.value, 12), true);
+  }
+  getAmPmString() {
+    return isAm(this.value) ? this.i18n('am') : this.i18n('pm');
+  }
+  renderNumberInput() {
+    return (index$1.h("div", { class: "gux-input-time-container" }, index$1.h("input", { class: "gux-input-time-hours", type: "text", disabled: this.disabled, value: getHourDisplayValue(this.value, this.clockType), onKeyDown: e => this.onHourKeyDown(e), "aria-label": this.i18n('hoursInput'), pattern: getHoursPattern(this.clockType), ref: el => (this.hourInputElement = el) }), index$1.h("span", { class: "gux-time-separator" }, this.i18n('time-separator')), index$1.h("input", { class: "gux-input-time-minutes", type: "text", disabled: this.disabled, value: getMinuteDisplayValue(this.value), onKeyDown: e => this.onMinuteKeyDown(e), "aria-label": this.i18n('minutesInput'), pattern: getMinutesPattern(), ref: el => (this.minuteInputElement = el) })));
+  }
+  renderAmPmSelector() {
+    if (this.clockType === '12h') {
+      return (index$1.h("button", { class: "gux-input-time-am-pm-selector", type: "button", disabled: this.disabled, "aria-label": this.i18n('toggleAmPM', { amOrPm: this.getAmPmString() }), onClick: (e) => this.toggleAmPm(e), onKeyDown: (e) => this.onAmPmButtonKeyDown(e) }, index$1.h("div", { class: {
+          'gux-meridiem': true,
+          'gux-visible': isAm(this.value)
+        } }, this.i18n('am')), index$1.h("div", { class: {
+          'gux-meridiem': true,
+          'gux-visible': !isAm(this.value)
+        } }, this.i18n('pm'))));
+    }
+  }
+  renderClockButton() {
+    return (index$1.h("button", { class: {
+        'gux-clock-button': true,
+        'gux-active': this.expanded
+      }, type: "button", disabled: this.disabled, "aria-label": this.i18n('clockButton'), "aria-expanded": this.expanded.toString(), onClick: this.toggleDropdown.bind(this), ref: el => (this.clockButton = el) }, index$1.h("gux-icon", { decorative: true, "icon-name": "clock-outline" })));
+  }
+  renderTimeListItems() {
+    return getTimeDisplayValues(this.interval, this.clockType).map(displayValue => {
+      const value = getValue(displayValue, this.clockType, isAm(this.value));
+      return (index$1.h("gux-list-item", { id: this.valueToId(value), onClick: () => this.handleClickDropdownValue(displayValue) }, displayValue));
+    });
+  }
+  renderTarget() {
+    return (index$1.h("div", { class: "gux-input-time", slot: "target" }, this.renderNumberInput(), this.renderAmPmSelector(), this.renderClockButton()));
+  }
+  renderPopup() {
+    return (index$1.h("div", { slot: "popup", class: "gux-list-container", onKeyDown: (e) => this.onListKeyDown(e) }, index$1.h("gux-list", { ref: el => (this.listElement = el) }, this.renderTimeListItems())));
+  }
+  render() {
+    return (index$1.h("gux-popup", { class: {
+        'gux-time-picker': true,
+        'gux-error': this.hasError
+      }, expanded: this.expanded, disabled: this.disabled }, this.renderTarget(), this.renderPopup()));
+  }
+  get root() { return index$1.getElement(this); }
+};
+__decorate([
+  onClickOutside.OnClickOutside({ triggerEvents: 'mousedown' })
+], GuxTimePicker.prototype, "onClickOutside", null);
+GuxTimePicker.style = guxTimePickerCss;
+
+exports.gux_time_picker = GuxTimePicker;