@genexus/genexus-ide-ui 0.0.45 → 0.0.47

package/dist/components/ch-paginator2.js

@@ -32,59 +32,55 @@ const ChPaginator = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   navigateClickedHandler(eventInfo) {
     eventInfo.stopPropagation();
-    switch (eventInfo.detail.type) {
-      case "first":
-        this.first();
-        break;
-      case "previous":
-        this.previous();
-        break;
-      case "next":
-        this.next();
-        break;
-      case "last":
-        this.last();
-        break;
-    }
-    this.pageNavigationRequested.emit({ type: eventInfo.detail.type });
+    this.navigate(eventInfo.detail.type);
   }
   pageChangedHandler(eventInfo) {
     eventInfo.stopPropagation();
-    const emitPageNavigationRequested = this.activePage !== eventInfo.detail.page;
-    this.activePage = eventInfo.detail.page;
-    if (emitPageNavigationRequested) {
-      this.pageNavigationRequested.emit({
-        type: "goto",
-        page: eventInfo.detail.page
-      });
-    }
-  }
-  loadElements() {
-    this.elPages = this.el.querySelector("ch-paginator-pages");
-    this.elFirst = this.el.querySelector("ch-paginator-navigate[type='first']");
-    this.elPrevious = this.el.querySelector("ch-paginator-navigate[type='previous']");
-    this.elNext = this.el.querySelector("ch-paginator-navigate[type='next']");
-    this.elLast = this.el.querySelector("ch-paginator-navigate[type='last']");
+    this.navigate("goto", eventInfo.detail.page);
   }
   keyDownHandler(eventInfo) {
     switch (eventInfo.key) {
       case "Home":
-        this.first();
-        this.elFirst.focus();
+        this.navigate("first");
         break;
       case "PageUp":
-        this.previous();
-        this.elPrevious.focus();
+        this.navigate("previous");
         break;
       case "PageDown":
-        this.next();
-        this.elNext.focus();
+        this.navigate("next");
         break;
       case "End":
+        this.navigate("last");
+        break;
+    }
+  }
+  navigate(type, page) {
+    var _a, _b, _c, _d;
+    const emitPageNavigationRequested = !page || page !== this.activePage;
+    switch (type) {
+      case "first":
+        this.first();
+        (_a = this.elFirst) === null || _a === void 0 ? void 0 : _a.focus();
+        break;
+      case "previous":
+        this.previous();
+        (_b = this.elPrevious) === null || _b === void 0 ? void 0 : _b.focus();
+        break;
+      case "next":
+        this.next();
+        (_c = this.elNext) === null || _c === void 0 ? void 0 : _c.focus();
+        break;
+      case "last":
         this.last();
-        this.elLast.focus();
+        (_d = this.elLast) === null || _d === void 0 ? void 0 : _d.focus();
+        break;
+      case "goto":
+        this.goto(page);
         break;
     }
+    if (emitPageNavigationRequested) {
+      this.pageNavigationRequested.emit({ type, page });
+    }
   }
   first() {
     this.activePage = 1;
@@ -101,6 +97,16 @@ const ChPaginator = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   last() {
     this.activePage = this.totalPages;
   }
+  goto(page) {
+    this.activePage = Math.max(Math.min(page, this.totalPages), 1);
+  }
+  loadElements() {
+    this.elPages = this.el.querySelector("ch-paginator-pages");
+    this.elFirst = this.el.querySelector("ch-paginator-navigate[type='first']");
+    this.elPrevious = this.el.querySelector("ch-paginator-navigate[type='previous']");
+    this.elNext = this.el.querySelector("ch-paginator-navigate[type='next']");
+    this.elLast = this.el.querySelector("ch-paginator-navigate[type='last']");
+  }
   render() {
     if (this.elPages) {
       this.elPages.totalPages = this.totalPages;

package/dist/components/ch-style.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
-import { C as CH_GLOBAL_STYLESHEET } from './ch-global-stylesheet.js';
+import { a as appendStyle, e as enableStyleSheet } from './ch-global-stylesheet.js';
 
 const chStyleCss = ":host{display:none}";
 
@@ -14,15 +14,15 @@ const ChStyle$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       fetch(this.href).then(response => {
         if (response.ok) {
           response.text().then(style => {
-            CH_GLOBAL_STYLESHEET.replace(style);
-            CH_GLOBAL_STYLESHEET.disabled = false;
+            appendStyle(style);
+            enableStyleSheet();
           });
         }
       });
     }
     else {
-      CH_GLOBAL_STYLESHEET.replace(this.el.innerText);
-      CH_GLOBAL_STYLESHEET.disabled = false;
+      appendStyle(this.el.innerText);
+      enableStyleSheet();
     }
   }
   get el() { return this; }

package/dist/components/ch-test-tree-x.js

@@ -4,8 +4,10 @@ import { d as defineCustomElement$4 } from './tree-x.js';
 import { d as defineCustomElement$3 } from './tree-x-list.js';
 import { d as defineCustomElement$2 } from './tree-x-list-item.js';
 
-const testTreeXCss = "ch-test-tree-x{display:grid;grid-template-columns:350px max-content;grid-template-rows:1fr;height:100%}.tree-buttons{display:grid;grid-auto-rows:max-content;row-gap:8px}:not(.ch-tree-x-dragging-item) ch-tree-x-list-item:not([selected])::part(header):hover{background-color:#e8e8e9}.ch-tree-x-list-item--drag-enter{background-color:#eee;box-shadow:inset 0 0 1px 0px black}.ch-tree-x-list-item--drag-enter[selected]::part(header){background-color:#eee}ch-tree-x-list-item::part(header){border:1px solid transparent}ch-tree-x-list-item[selected]::part(header){background-color:#cfdee6;border-color:#0266a0}ch-tree-x-list-item.ch-tree-x-list-item--editing::part(header){background-color:rgba(207, 222, 230, 0.5);border-color:transparent}ch-tree-x-list-item:not(.ch-tree-x-list-item--editing)::part(header):focus-visible{border-color:black;z-index:1}.ch-tree-x-drag-info{padding-inline:6px;padding-block:2px;background-color:#cfdee6;border:1px solid #0266a0;border-radius:10px;font-size:8px}";
+const testTreeXCss = "ch-test-tree-x{display:grid;grid-template-columns:500px max-content;grid-template-rows:1fr;height:100%}.tree-buttons{display:grid;grid-auto-rows:max-content;row-gap:8px}:not(.ch-tree-x-dragging-item) ch-tree-x-list-item:not([selected])::part(header):hover{background-color:#e8e8e9}.ch-tree-x-list-item--drag-enter{background-color:#eee;box-shadow:inset 0 0 1px 0px black}.ch-tree-x-list-item--drag-enter[selected]::part(header){background-color:#eee}ch-tree-x-list-item::part(header){border:1px solid transparent}ch-tree-x-list-item[selected]::part(header){background-color:#cfdee6;border-color:#0266a0}ch-tree-x-list-item.ch-tree-x-list-item--editing::part(header){background-color:rgba(207, 222, 230, 0.5);border-color:transparent}ch-tree-x-list-item:not(.ch-tree-x-list-item--editing)::part(header):focus-visible{border-color:black;z-index:1}.ch-tree-x-drag-info{padding-inline:6px;padding-block:2px;background-color:#cfdee6;border:1px solid #0266a0;border-radius:10px;font-size:8px}";
 
+const DEFAULT_DRAG_DISABLED_VALUE = false;
+const DEFAULT_DROP_DISABLED_VALUE = false;
 const DEFAULT_EXPANDED_VALUE = false;
 const DEFAULT_INDETERMINATE_VALUE = false;
 const DEFAULT_LAZY_VALUE = false;
@@ -23,6 +25,16 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
      * of items.
      */
     this.waitDropProcessing = false;
+    /**
+     * This attribute lets you specify if the drag operation is disabled in all
+     * items by default. If `true`, the control can't be dragged.
+     */
+    this.dragDisabled = DEFAULT_DRAG_DISABLED_VALUE;
+    /**
+     * This attribute lets you specify if the drop operation is disabled in all
+     * items by default. If `true`, the control won't accept any drops.
+     */
+    this.dropDisabled = DEFAULT_DROP_DISABLED_VALUE;
     /**
      * This property lets you define the model of the ch-tree-x control.
      */
@@ -91,7 +103,7 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       }
       const promise = this.dropItemsCallback(dataTransferInfo);
       this.waitDropProcessing = true;
-      promise.then(response => {
+      promise.then(async (response) => {
         this.waitDropProcessing = false;
         if (!response.acceptDrop) {
           return;
@@ -102,6 +114,11 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
           // Add the UI models to the new container and remove the UI models from
           // the old containers
           draggedItems.forEach(this.moveItemToNewParent(newParentUIModel));
+          // When the selected items are moved, the tree must remove its internal
+          // state to not have undefined references
+          if (dataTransferInfo.draggingSelectedItems) {
+            await this.treeRef.clearSelectedItemsInfo();
+          }
         }
         // Add the new items
         else {
@@ -131,9 +148,12 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       // Reference the new parent in the item
       itemUIModelExtended.parentItem = newParentUIModel;
     };
-    this.renderSubModel = (treeSubModel) => (h("ch-tree-x-list-item", { id: treeSubModel.id, caption: treeSubModel.caption, checkbox: treeSubModel.checkbox, checked: treeSubModel.checked, class: treeSubModel.class, disabled: treeSubModel.disabled, expanded: treeSubModel.expanded, indeterminate: treeSubModel.indeterminate, lazyLoad: treeSubModel.lazy, leaf: treeSubModel.leaf, leftImgSrc: treeSubModel.leftImgSrc, metadata: treeSubModel.metadata, rightImgSrc: treeSubModel.rightImgSrc, selected: treeSubModel.selected, showExpandableButton: treeSubModel.showExpandableButton, toggleCheckboxes: treeSubModel.toggleCheckboxes }, !treeSubModel.leaf &&
-      treeSubModel.items != null &&
-      treeSubModel.items.length !== 0 && (h("ch-tree-x-list", { slot: "tree" }, treeSubModel.items.map(this.renderSubModel)))));
+    this.renderSubModel = (treeSubModel, lastItem, level) => {
+      var _a, _b;
+      return (h("ch-tree-x-list-item", { id: treeSubModel.id, caption: treeSubModel.caption, checkbox: treeSubModel.checkbox, checked: treeSubModel.checked, class: treeSubModel.class, disabled: treeSubModel.disabled, dragDisabled: (_a = treeSubModel.dragDisabled) !== null && _a !== void 0 ? _a : this.dragDisabled, dropDisabled: (_b = treeSubModel.dropDisabled) !== null && _b !== void 0 ? _b : this.dropDisabled, expanded: treeSubModel.expanded, indeterminate: treeSubModel.indeterminate, lastItem: lastItem, lazyLoad: treeSubModel.lazy, leaf: treeSubModel.leaf, leftImgSrc: treeSubModel.leftImgSrc, level: level, metadata: treeSubModel.metadata, rightImgSrc: treeSubModel.rightImgSrc, selected: treeSubModel.selected, showExpandableButton: treeSubModel.showExpandableButton, showLines: this.showLines, toggleCheckboxes: treeSubModel.toggleCheckboxes }, !treeSubModel.leaf &&
+        treeSubModel.items != null &&
+        treeSubModel.items.length !== 0 && (h("ch-tree-x-list", { slot: "tree", level: level + 1 }, treeSubModel.items.map((subModel, index) => this.renderSubModel(subModel, this.showLines && index === treeSubModel.items.length - 1, level + 1))))));
+    };
     this.flattenItemUIModel = (parentModel) => (item) => {
       var _a, _b, _c, _d;
       this.flattenedTreeModel.set(item.id, {
@@ -326,7 +346,7 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.flattenModel();
   }
   render() {
-    return (h(Host, null, h("ch-tree-x", { multiSelection: this.multiSelection, showLines: this.showLines, waitDropProcessing: this.waitDropProcessing, onDroppableZoneEnter: this.handleDroppableZoneEnter, onExpandedItemChange: this.handleExpandedItemChange, onItemsDropped: this.handleItemsDropped, onSelectedItemsChange: this.handleSelectedItemsChange, ref: el => (this.treeRef = el) }, h("ch-tree-x-list", null, this.treeModel.items.map(this.renderSubModel))), h("div", { class: "tree-buttons" })));
+    return (h(Host, null, h("ch-tree-x", { multiSelection: this.multiSelection, waitDropProcessing: this.waitDropProcessing, onDroppableZoneEnter: this.handleDroppableZoneEnter, onExpandedItemChange: this.handleExpandedItemChange, onItemsDropped: this.handleItemsDropped, onSelectedItemsChange: this.handleSelectedItemsChange, ref: el => (this.treeRef = el) }, h("ch-tree-x-list", { level: 0 }, this.treeModel.items.map((subModel, index) => this.renderSubModel(subModel, this.showLines && index === this.treeModel.items.length - 1, 0)))), h("div", { class: "tree-buttons" })));
   }
   static get watchers() { return {
     "treeModel": ["handleTreeModelChange"]
@@ -334,12 +354,14 @@ const ChTestTreeX$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   static get style() { return testTreeXCss; }
 }, [0, "ch-test-tree-x", {
     "checkDroppableZoneCallback": [16],
+    "dragDisabled": [4, "drag-disabled"],
+    "dropDisabled": [4, "drop-disabled"],
     "dropItemsCallback": [16],
     "treeModel": [1040],
     "lazyLoadTreeItemsCallback": [16],
     "modifyItemCaptionCallback": [16],
     "multiSelection": [1028, "multi-selection"],
-    "showLines": [1025, "show-lines"],
+    "showLines": [1, "show-lines"],
     "sortItemsCallback": [16],
     "waitDropProcessing": [32],
     "scrollIntoVisible": [64],

package/dist/components/ch-window2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { C as CH_GLOBAL_STYLESHEET } from './ch-global-stylesheet.js';
+import { b as adoptGlobalStyleSheet } from './ch-global-stylesheet.js';
 import { d as defineCustomElement$1 } from './ch-window-close2.js';
 
 const chWindowCss = ":host{--ch-window-offset-x:0px;--ch-window-offset-y:0px;--ch-window-separation-x:0px;--ch-window-separation-y:0px;--ch-window-x-outside:0px;--ch-window-y-outside:0px}:host(:not([hidden])){display:contents}:host(:is(:not([modal]),[modal=\"false\"])) .mask{pointer-events:none}.window{pointer-events:all}.mask{display:flex;position:fixed;inset:0;left:calc( var(--ch-window-inset-inline-start) + var(--ch-window-offset-x) + var(--ch-window-separation-x) );inset-block-start:calc( var(--ch-window-inset-block-start) + var(--ch-window-offset-y) + var(--ch-window-separation-y) );width:var(--ch-window-mask-width);height:var(--ch-window-mask-height);z-index:var(--ch-window-mask-z-index, 1000)}:host(:is([x-align=\"outside-start\"],[x-align=\"inside-start\"])) .mask{justify-content:flex-start}:host([x-align=center]) .mask{justify-content:center}:host(:is([x-align=\"outside-end\"],[x-align=\"inside-end\"])) .mask{justify-content:flex-end}:host(:is([y-align=\"outside-start\"],[y-align=\"inside-start\"])) .mask{align-items:flex-start}:host([y-align=center]) .mask{align-items:center}:host(:is([y-align=\"outside-end\"],[y-align=\"inside-end\"])) .mask{align-items:flex-end}.window{display:flex;flex-direction:column;transform:translate(var(--ch-window-x-outside), var(--ch-window-y-outside)) translate(var(--ch-window-x-drag, 0px), var(--ch-window-y-drag, 0px));z-index:inherit}:host([x-align=outside-start]) .window{--ch-window-x-outside:-100%}:host([x-align=outside-end]) .window{--ch-window-x-outside:100%}:host([y-align=outside-start]) .window{--ch-window-y-outside:-100%}:host([y-align=outside-end]) .window{--ch-window-y-outside:100%}.separation{position:fixed;inset:0;pointer-events:all}.separation--x{top:var(--ch-window-inset-block-start);width:var(--ch-window-separation);height:var(--ch-window-mask-height)}.separation--y{left:var(--ch-window-inset-inline-start);width:var(--ch-window-mask-width);height:var(--ch-window-separation)}.separation--both{width:calc(var(--ch-window-separation) * 4);height:calc(var(--ch-window-separation) * 4)}:host([x-align=outside-start]) .separation{left:calc( var(--ch-window-inset-inline-start) - var(--ch-window-separation) )}:host([x-align=outside-start]) .separation--both{left:calc( var(--ch-window-inset-inline-start) - var(--ch-window-separation) * 3 )}:host([x-align=outside-end]) .separation{left:calc( var(--ch-window-inset-inline-start) + var(--ch-window-mask-width) )}:host([x-align=outside-end]) .separation--both{left:calc( var(--ch-window-inset-inline-start) + var(--ch-window-mask-width) - var(--ch-window-separation) )}:host([y-align=outside-start]) .separation{top:calc(var(--ch-window-inset-block-start) - var(--ch-window-separation))}:host([y-align=outside-start]) .separation--both{top:calc( var(--ch-window-inset-block-start) - var(--ch-window-separation) * 3 )}:host([y-align=outside-end]) .separation{top:calc( var(--ch-window-inset-block-start) + var(--ch-window-mask-height) )}:host([y-align=outside-end]) .separation--both{top:calc( var(--ch-window-inset-block-start) + var(--ch-window-mask-height) - var(--ch-window-separation) )}";
@@ -225,7 +225,7 @@ const ChWindow = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     });
   }
   loadGlobalStyleSheet() {
-    this.el.shadowRoot.adoptedStyleSheets.push(CH_GLOBAL_STYLESHEET);
+    adoptGlobalStyleSheet(this.el.shadowRoot.adoptedStyleSheets);
   }
   render() {
     const separationY = this.yAlign === "outside-start" || this.yAlign === "outside-end";

package/dist/components/combo-box-item.js

@@ -4,7 +4,7 @@ import { c as commonClassesNames } from './classesNames.js';
 import { d as defineCustomElement$2 } from './icon.js';
 import { d as defineCustomElement$1 } from './icon2.js';
 
-const comboBoxItemCss = ":host(.gxg--disabled) .form-element,:host(.gxg--disabled.form-element){pointer-events:none;background-color:var(--color-background-disabled) !important;color:var(--color-on-background--disabled) !important;border-color:var(--gxg-border-color--disabled) !important;cursor:default !important}:host{display:block;cursor:pointer;box-sizing:border-box;display:flex;align-items:center;font-family:var(--font-family-primary);font-size:var(--font-size-sm);background-color:var(--color-background);color:var(--color-on-background);opacity:1;overflow:hidden}:host .container{display:flex;align-items:center;padding:var(--spacing-comp-00) var(--spacing-comp-01);width:100%;height:var(--gxg-list-item-height);box-sizing:border-box;}:host gxg-icon{flex-shrink:0}.description{white-space:nowrap;width:100%;overflow:hidden;text-overflow:ellipsis}:host(.no-icon) .container{padding-left:var(--spacing-comp-02)}:host([hidden]){display:none}:host(.display-none){display:none}:host(:hover){background-color:var(--gxg-background-color-item-hover)}:host([selected]){background-color:var(--gxg-background-color-item-selected);color:var(--gxg-color-selected)}:host(.large){font-size:var(--font-size-lg);min-height:auto}:host(.large) gxg-icon{margin-right:var(--spacing-comp-01)}";
+const comboBoxItemCss = ":host(.gxg--disabled) .form-element,:host(.gxg--disabled.form-element){pointer-events:none;background-color:var(--gxg-background-color--disabled) !important;color:var(--gxg-color--disabled) !important;border-color:var(--gxg-border-color--disabled) !important;cursor:default !important}:host{display:block;cursor:pointer;box-sizing:border-box;display:flex;align-items:center;font-family:var(--font-family-primary);font-size:var(--font-size-sm);background-color:var(--color-background);color:var(--color-on-background);opacity:1;overflow:hidden}:host .container{display:flex;align-items:center;padding:var(--spacing-comp-00) var(--spacing-comp-01);width:100%;height:var(--gxg-list-item-height);box-sizing:border-box;}:host gxg-icon{flex-shrink:0}.description{white-space:nowrap;width:100%;overflow:hidden;text-overflow:ellipsis}:host(.no-icon) .container{padding-left:var(--spacing-comp-02)}:host([hidden]){display:none}:host(.display-none){display:none}:host(:hover){background-color:var(--gxg-background-color--hover)}:host([selected]){background-color:var(--gxg-background-color--selected);color:var(--gxg-color--selected)}:host([selected]:hover){background-color:var(--gxg-background-color--selected-hover)}:host(.large){font-size:var(--font-size-lg);min-height:auto}:host(.large) gxg-icon{margin-right:var(--spacing-comp-01)}";
 
 const GxgComboBoxItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -68,7 +68,7 @@ const GxgComboBoxItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
       return "disabled";
     }
     else if (this.selected) {
-      return "auto";
+      return "primary-enabled";
     }
     else {
       return "auto";

package/dist/components/combo-box.js

@@ -44,7 +44,7 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       clearButton: "clear-button",
       toggleButton: "toggle-button",
     };
-    this.setInitialValueTimes = 0;
+    this.componentDidLoadFlag = false;
     /**
      * The presence of this attribute makes the input disabled
      */
@@ -117,7 +117,6 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.inputTextValue = "";
     this.listIsOpen = false;
     this.inputTextIcon = undefined;
-    this.inputTextIconPosition = null;
     this.noMatch = false;
     this.lastAllowedValue = undefined;
     this.slottedContent = null;
@@ -290,7 +289,7 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.getNewItem = (direction) => {
       const filteredItems = this.getFilteredItems();
       const indexInFiltered = filteredItems === null || filteredItems === void 0 ? void 0 : filteredItems.findIndex((item) => {
-        return item === this.selectedItem;
+        return item.selected;
       });
       if (direction === "next") {
         if (indexInFiltered === -1) {
@@ -321,7 +320,6 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       return value;
     };
     this.setInitialValue = () => {
-      this.setInitialValueTimes++;
       const firstItem = this.getEnabledItems()[0];
       if (!this.value || this.removedItem !== undefined) {
         if (firstItem) {
@@ -338,6 +336,8 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         const item = this.getItemByValue(this.value);
         if (item) {
           this.text = item.innerText;
+          this.inputTextIcon = item.icon;
+          item.selected = true;
         }
         else {
           if (this.strict) {
@@ -379,7 +379,6 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.clearIcon = () => {
       if (!this.disabled) {
         this.inputTextIcon = null;
-        this.inputTextIconPosition = null;
       }
     };
   }
@@ -388,16 +387,13 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.valueBeforeDisabled = this.value;
       this.textBeforeDisabled = this.text;
       this.iconBeforeDisabled = this.inputTextIcon;
-      this.iconPositionBeforeDisabled = this.inputTextIconPosition;
       this.value = null;
       this.inputTextIcon = null;
-      this.inputTextIconPosition = null;
     }
     else {
       this.value = this.valueBeforeDisabled;
       this.text = this.textBeforeDisabled;
       this.inputTextIcon = this.iconBeforeDisabled;
-      this.inputTextIconPosition = this.iconPositionBeforeDisabled;
     }
   }
   componentDidUpdate() {
@@ -413,6 +409,7 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   componentDidLoad() {
     this.resizeObserver();
+    this.componentDidLoadFlag = true;
   }
   disconnectedCallback() {
     this.cleanup();
@@ -452,7 +449,7 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   itemDidLoadHandler() {
     this.setIndexes();
-    this.setInitialValue();
+    //this.setInitialValue();
   }
   keyDownComboItemHandler(event) {
     event.stopPropagation();
@@ -467,37 +464,39 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   /*********************************
   WATCH
   *********************************/
-  onValueChanged(newValue) {
-    if (this.setInitialValueTimes > 1) {
-      this.valueChanged.emit(newValue);
-    }
-    this.clearSelectedItem();
-    let value;
-    let newItem = undefined;
-    if (this.userTyped) {
-      value = this.getValueByText(newValue);
-    }
-    else {
-      !this.listIsOpen && this.showAllItems();
-      value = newValue;
-    }
-    newItem = this.getItemByValue(value);
-    if (newItem) {
-      this.setSelectedItem(newItem);
-      this.setIcon(newItem.icon);
-      (newItem === null || newItem === void 0 ? void 0 : newItem.textContent) && (this.text = newItem.textContent);
-    }
-    else {
-      //this.setIcon(undefined);
-      if (this.strict) {
-        this.text = undefined;
-        this.value = undefined;
+  onValueChanged(newValue, oldvalue) {
+    setTimeout(() => {
+      if (this.componentDidLoadFlag) {
+        this.valueChanged.emit(newValue);
+      }
+      this.clearSelectedItem();
+      let value;
+      let newItem = undefined;
+      if (this.userTyped) {
+        value = this.getValueByText(newValue);
       }
       else {
-        this.text = newValue;
+        !this.listIsOpen && this.showAllItems();
+        value = newValue;
       }
-    }
-    this.userTyped = false;
+      newItem = this.getItemByValue(value);
+      if (newItem) {
+        this.setSelectedItem(newItem);
+        this.setIcon(newItem.icon);
+        (newItem === null || newItem === void 0 ? void 0 : newItem.textContent) && (this.text = newItem.textContent);
+      }
+      else {
+        //this.setIcon(undefined);
+        if (this.strict) {
+          this.text = undefined;
+          this.value = undefined;
+        }
+        else {
+          this.text = newValue;
+        }
+      }
+      this.userTyped = false;
+    }, 20);
   }
   listIsOpenHandler(newValue) {
     let isOpen = false;
@@ -531,11 +530,9 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   setIcon(icon) {
     if (icon) {
       this.inputTextIcon = icon;
-      this.inputTextIconPosition = "start";
     }
     else {
       this.inputTextIcon = null;
-      this.inputTextIconPosition = null;
     }
   }
   focus() {
@@ -605,7 +602,7 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         large: state.large,
       }, style: { maxWidth: this.maxWidth, minWidth: this.minWidth }, exportParts: this.exportparts ? this.exportparts : null }, h("div", { class: {
         "main-container": true,
-      }, ref: (el) => (this.mainContainer = el) }, this.label ? (h("gxg-label", { labelPosition: this.labelPosition, center: this.centerLabel, width: this.labelWidth }, this.label)) : null, h("div", { class: "search-and-items-container", ref: (el) => (this.searchItemsContainer = el) }, h("div", { class: { "search-container": true } }, h("gxg-form-text", { placeholder: this.placeholder, onInput: this.inputHandler.bind(this), onKeyDown: this.keyDownHandler, onClick: this.inputTextClickHandler, value: this.text, icon: this.fixedIcon || this.inputTextIcon, iconPosition: this.fixedIcon ? "start" : this.inputTextIconPosition, readonly: this.disableFilter, ref: (el) => (this.inputText = el), validationStatus: this.validationStatus, disabled: this.disabled, onValueChanged: this.handleValueChangeFormText, cursorEnd: this.cursorEnd, preventValueChangedEmit: true, preventValueChangeOnDisabled: true, class: { "clear-icon": clearIcon }, part: this.parts.input }), h("div", { class: "buttons-wrapper" }, clearIcon ? (h("gxg-button", { class: { "button-icon delete-icon": true }, icon: "menus/delete", type: "tertiary", onClick: () => this.clearCombo(), tabindex: "-1", fit: true, disabled: this.disabled, part: this.parts.clearButton })) : null, h("gxg-button", { class: { "button-icon": true }, icon: "navigation/arrow-down", type: "secondary-icon-only", onClick: this.toggleListButtonClickHandler, fit: true, disabled: this.disabled, tabindex: "-1", part: this.parts.toggleButton }))), h("div", { class: {
+      }, ref: (el) => (this.mainContainer = el) }, this.label ? (h("gxg-label", { labelPosition: this.labelPosition, center: this.centerLabel, width: this.labelWidth }, this.label)) : null, h("div", { class: "search-and-items-container", ref: (el) => (this.searchItemsContainer = el) }, h("div", { class: { "search-container": true } }, h("gxg-form-text", { placeholder: this.placeholder, onInput: this.inputHandler.bind(this), onKeyDown: this.keyDownHandler, onClick: this.inputTextClickHandler, value: this.text, icon: this.fixedIcon || this.inputTextIcon, iconPosition: "start", readonly: this.disableFilter, ref: (el) => (this.inputText = el), validationStatus: this.validationStatus, disabled: this.disabled, onValueChanged: this.handleValueChangeFormText, cursorEnd: this.cursorEnd, preventValueChangedEmit: true, preventValueChangeOnDisabled: true, class: { "clear-icon": clearIcon }, part: this.parts.input }), h("div", { class: "buttons-wrapper" }, clearIcon ? (h("gxg-button", { class: { "button-icon delete-icon": true }, icon: "menus/delete", type: "tertiary", onClick: () => this.clearCombo(), tabindex: "-1", fit: true, disabled: this.disabled, part: this.parts.clearButton })) : null, h("gxg-button", { class: { "button-icon": true }, icon: "navigation/arrow-down", type: "secondary-icon-only", onClick: this.toggleListButtonClickHandler, fit: true, disabled: this.disabled, tabindex: "-1", part: this.parts.toggleButton }))), h("div", { class: {
         "items-container": true,
         "items-container--show": this.listIsOpen,
         "items-container--no-match": this.noMatch,
@@ -649,7 +646,6 @@ const GxgComboBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "inputTextValue": [32],
     "listIsOpen": [32],
     "inputTextIcon": [32],
-    "inputTextIconPosition": [32],
     "noMatch": [32],
     "lastAllowedValue": [32],
     "slottedContent": [32],

package/dist/components/common.js

@@ -30,17 +30,23 @@ const renderFormItems = (componentType = "gxg-combo-box-item", options, group =
  * @param gxOptions An array of GxOptions's
  * @returns The first option in the array that is 'selected'. If no one found it returns null.
  */
-const getSelectedGxOption = (gxOptions) => {
-  let found;
-  if (gxOptions === null || gxOptions === void 0 ? void 0 : gxOptions.length) {
+const getSelectedGxOption = (gxOptions, onlyId = true) => {
+  if ((gxOptions === null || gxOptions === void 0 ? void 0 : gxOptions.length) > 0) {
+    let found = null;
     for (let i = 0; i < gxOptions.length; i++) {
       if (gxOptions[i].selected) {
         found = gxOptions[i];
         break;
       }
     }
+    if (found && onlyId) {
+      return found.id;
+    }
+    else if (!found && onlyId) {
+      return gxOptions[0].id;
+    }
+    return found;
   }
-  return found;
 };
 
 export { getSelectedGxOption as g, renderFormItems as r };

package/dist/components/container.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$1 } from './title.js';
 
-const containerCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:6px;height:6px}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host{--gxg-container-elements-spacing:var(--spacing-comp-03);display:block}:host([full-height]){height:100%}:host([full-height]) .container{height:100%;display:flex;flex-direction:column}:host([full-height]) .content{flex-grow:1}.heading,.content,.footer{padding:var(--gxg-container--padding)}.container--padding-s{--gxg-container--padding:var(--spacing-comp-02)}.container--padding-m{--gxg-container--padding:var(--spacing-comp-03)}.container--padding-l{--gxg-container--padding:var(--spacing-comp-04)}.container--display-border{border:1px solid var(--gx-ide-container-border-color)}.container--display-border-top{border-top:1px solid var(--gx-ide-container-border-color)}.container--display-border-end{border-inline-end:1px solid var(--gx-ide-container-border-color)}.container--display-border-bottom{border-bottom:1px solid var(--gx-ide-container-border-color)}.container--display-border-start{border-inline-start:1px solid var(--gx-ide-container-border-color)}.heading{display:flex;flex-direction:column;gap:var(--gxg-container--padding);width:100%;box-sizing:border-box;border-bottom:1px solid var(--gx-ide-container-border-color)}.heading--no-border{border-bottom:0}.heading--no-padding{padding:0}.content{display:block;overflow-x:auto;}.content::-webkit-scrollbar{width:6px;height:6px}.content::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.content::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.content::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.content--no-padding{padding:0}.content--no-border-top{border-top:none}.content--flex{display:flex}.content--no-gap{gap:0}.content--align-items-start{align-items:start}.content--align-items-center{align-items:center}.content--align-items-end{align-items:end}.content--justify-content-start{justify-content:start}.content--justify-content-center{justify-content:center}.content--justify-content-end{justify-content:end}.footer{display:flex;gap:var(--gxg-container-elements-spacing);flex-wrap:wrap;justify-content:space-between;align-items:center;border-top:1px solid var(--gx-ide-container-border-color)}.footer__start,.footer__end{display:flex;gap:var(--gxg-container-elements-spacing)}.footer--no-border{border-top:0}.footer--no-padding{padding:0}";
+const containerCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:6px;height:6px}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host{--gxg-container-elements-spacing:var(--spacing-comp-03);display:block}:host .content{display:flex;flex-direction:column;gap:var(--gx-ide-form-items-gap)}:host([full-height]){height:100%}:host([full-height]) .container{height:100%;display:flex;flex-direction:column}:host([full-height]) .content{flex-grow:1}.heading,.content,.footer{padding:var(--gxg-container--padding)}.container--padding-s{--gxg-container--padding:var(--spacing-comp-02)}.container--padding-m{--gxg-container--padding:var(--spacing-comp-03)}.container--padding-l{--gxg-container--padding:var(--spacing-comp-04)}.container--display-border{border:1px solid var(--gx-ide-container-border-color)}.container--display-border-top{border-top:1px solid var(--gx-ide-container-border-color)}.container--display-border-end{border-inline-end:1px solid var(--gx-ide-container-border-color)}.container--display-border-bottom{border-bottom:1px solid var(--gx-ide-container-border-color)}.container--display-border-start{border-inline-start:1px solid var(--gx-ide-container-border-color)}.heading{display:flex;flex-direction:column;gap:var(--gxg-container--padding);width:100%;box-sizing:border-box;border-bottom:1px solid var(--gx-ide-container-border-color)}.heading--no-border{border-bottom:0}.heading--no-padding{padding:0}.content{display:block;overflow-x:auto;}.content::-webkit-scrollbar{width:6px;height:6px}.content::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.content::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.content::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.content--no-padding{padding:0}.content--no-border-top{border-top:none}.content--flex{display:flex}.content--no-gap{gap:0}.content--align-items-start{align-items:start}.content--align-items-center{align-items:center}.content--align-items-end{align-items:end}.content--justify-content-start{justify-content:start}.content--justify-content-center{justify-content:center}.content--justify-content-end{justify-content:end}.footer{display:flex;gap:var(--gxg-container-elements-spacing);flex-wrap:wrap;justify-content:space-between;align-items:center;border-top:1px solid var(--gx-ide-container-border-color)}.footer__start,.footer__end{display:flex;gap:var(--gxg-container-elements-spacing)}.footer--no-border{border-top:0}.footer--no-padding{padding:0}";
 
 const GxIdeContainer = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/date-picker.js

@@ -11,7 +11,7 @@ var datepicker_min = createCommonjsModule(function (module, exports) {
 
 const datepicker = /*@__PURE__*/getDefaultExportFromCjs(datepicker_min);
 
-const datePickerCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:6px;height:6px}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.qs-datepicker-container{font-size:1rem;font-family:sans-serif;color:black;position:absolute;width:15.625em;display:flex;flex-direction:column;z-index:9001;user-select:none;border:1px solid gray;border-radius:0.263921875em;overflow:hidden;background:white;box-shadow:0 1.25em 1.25em -0.9375em rgba(0, 0, 0, 0.3)}.qs-datepicker-container *{box-sizing:border-box}.qs-centered{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%)}.qs-hidden{display:none}.qs-overlay{position:absolute;top:0;left:0;background:rgba(0, 0, 0, 0.75);color:white;width:100%;height:100%;padding:0.5em;z-index:1;opacity:1;transition:opacity 0.3s;display:flex;flex-direction:column}.qs-overlay.qs-hidden{opacity:0;z-index:-1}.qs-overlay .qs-overlay-year{border:none;background:transparent;border-bottom:1px solid white;border-radius:0;color:white;font-size:0.875em;padding:0.25em 0;width:80%;text-align:center;margin:0 auto;display:block}.qs-overlay .qs-overlay-year::-webkit-inner-spin-button{-webkit-appearance:none}.qs-overlay .qs-close{padding:0.5em;cursor:pointer;position:absolute;top:0;right:0}.qs-overlay .qs-submit{border:1px solid white;border-radius:0.263921875em;padding:0.5em;margin:0 auto auto;cursor:pointer;background:rgba(128, 128, 128, 0.4)}.qs-overlay .qs-submit.qs-disabled{color:gray;border-color:gray;cursor:not-allowed}.qs-overlay .qs-overlay-month-container{display:flex;flex-wrap:wrap;flex-grow:1}.qs-overlay .qs-overlay-month{display:flex;justify-content:center;align-items:center;width:calc(100% / 3);cursor:pointer;opacity:0.5;transition:opacity 0.15s}.qs-overlay .qs-overlay-month.active,.qs-overlay .qs-overlay-month:hover{opacity:1}.qs-controls{width:100%;display:flex;justify-content:space-between;align-items:center;flex-grow:1;flex-shrink:0;background:lightgray;filter:blur(0px);transition:filter 0.3s}.qs-controls.qs-blur{filter:blur(5px)}.qs-arrow{height:1.5625em;width:1.5625em;position:relative;cursor:pointer;border-radius:0.263921875em;transition:background 0.15s}.qs-arrow:hover{background:rgba(0, 0, 0, 0.1)}.qs-arrow:hover.qs-left:after{border-right-color:black}.qs-arrow:hover.qs-right:after{border-left-color:black}.qs-arrow:after{content:\"\";border:0.390625em solid transparent;position:absolute;top:50%;transition:border 0.2s}.qs-arrow.qs-left:after{border-right-color:gray;right:50%;transform:translate(25%, -50%)}.qs-arrow.qs-right:after{border-left-color:gray;left:50%;transform:translate(-25%, -50%)}.qs-month-year{font-weight:bold;transition:border 0.2s;border-bottom:1px solid transparent;cursor:pointer}.qs-month-year:hover{border-bottom:1px solid gray}.qs-month-year:focus,.qs-month-year:active:focus{outline:none}.qs-month{padding-right:0.5ex}.qs-year{padding-left:0.5ex}.qs-squares{display:flex;flex-wrap:wrap;padding:0.3125em;filter:blur(0px);transition:filter 0.3s}.qs-squares.qs-blur{filter:blur(5px)}.qs-square{width:calc(100% / 7);height:1.5625em;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.1s;border-radius:0.263921875em}.qs-square:not(.qs-empty):not(.qs-disabled):not(.qs-day):not(.qs-active):hover{background:orange}.qs-current{font-weight:bold;text-decoration:underline}.qs-active,.qs-range-start,.qs-range-end{background:lightblue}.qs-range-start:not(.qs-range-6){border-top-right-radius:0;border-bottom-right-radius:0}.qs-range-middle{background:#d4ebf2}.qs-range-middle:not(.qs-range-0):not(.qs-range-6){border-radius:0}.qs-range-middle.qs-range-0{border-top-right-radius:0;border-bottom-right-radius:0}.qs-range-middle.qs-range-6{border-top-left-radius:0;border-bottom-left-radius:0}.qs-range-end:not(.qs-range-0){border-top-left-radius:0;border-bottom-left-radius:0}.qs-disabled,.qs-outside-current-month{opacity:0.2}.qs-disabled{cursor:not-allowed}.qs-empty{cursor:default}.qs-day{cursor:default;font-weight:bold;color:gray}.qs-event{position:relative}.qs-event:after{content:\"\";position:absolute;width:0.46875em;height:0.46875em;border-radius:50%;background:#07f;bottom:0;right:0}:host{display:block}:host label{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;display:flex;align-items:center;cursor:default}#date-picker{width:100%;font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;border-width:var(--border-width-sm);border-color:var(--gray-02);border-style:var(--border-style-regular);border-radius:var(--border-radius-sm);padding-left:var(--spacing-comp-01);padding-right:var(--spacing-comp-01);color:var(--color-on-background);background-color:var(--color-background);height:20px;box-sizing:border-box;padding:0 5px;cursor:pointer;z-index:100}#date-picker:focus{outline-style:solid;outline-color:var(--color-primary-active);outline-width:var(--border-width-md);outline-offset:-2px}.qs-datepicker{padding:4px 0 0 0}.qs-datepicker-container{border:none;box-shadow:var(--box-shadow-01);padding:0;width:181px;background:var(--color-background);margin-top:6px}.qs-datepicker .qs-controls{background-color:transparent;color:var(--color-on-background)}.qs-datepicker .qs-square{border:1px solid var(--gray-01);border-radius:0;width:var(--spacing-comp-05);height:var(--spacing-comp-05);margin:0.5px;color:var(--color-on-background);font-family:var(--font-family-primary)}.qs-month-year{font-size:var(--font-size-xs);font-family:var(--font-family-primary);text-transform:uppercase;font-weight:var(--font-weight-regular)}.qs-datepicker .qs-square.qs-day{color:var(--color-on-background);border:0;height:var(--spacing-comp-04);font-family:var(--font-family-primary);font-weight:var(--font-weight-extra-bold)}.qs-datepicker .qs-square.qs-active,.qs-datepicker .qs-square:not(.qs-empty):not(.qs-disabled):not(.qs-day):not(.qs-active):hover{background-color:var(--color-primary-hover-opacity-01);border-color:var(--color-primary-active)}.qs-datepicker .qs-arrow:after{width:3px;height:3px;border:1px solid black;top:4px}.qs-datepicker .qs-arrow:hover{background-color:transparent}.qs-datepicker .qs-arrow:hover:after{border-color:var(--color-primary-active)}.qs-datepicker .qs-arrow.qs-right:after,.qs-datepicker .qs-arrow.qs-left:after{border-color:var(--color-on-background)}.qs-datepicker .qs-arrow.qs-left:after{border-right:0;border-bottom:0;transform:rotate(-45deg) !important;left:13px}.qs-datepicker .qs-arrow.qs-right:after{border-left:0;border-bottom:0;transform:rotate(45deg) !important;left:-4px}.qs-disabled,.qs-outside-current-month{opacity:0.4}:host(.rtl) .qs-datepicker-container{right:0}.qs-overlay{background-color:var(--color-background);font-family:var(--font-family-primary)}.qs-overlay .qs-close{color:var(--color-on-background);margin-top:4px;margin-right:4px}.qs-overlay .qs-overlay-year{font-size:var(--font-size-lg);color:var(--color-on-background)}.qs-overlay .qs-overlay-year:focus-visible{outline:none}.qs-overlay .qs-overlay-month{font-size:var(--font-size-lg);color:var(--color-on-background)}.qs-overlay .qs-submit{border-radius:var(--border-radius-xs);border:none;padding:0.2em;padding-inline-start:var(--spacing-comp-04);padding-inline-end:var(--spacing-comp-04);background:var(--color-primary-enabled);font-size:var(--font-size-lg);transition:background 0.25s}.qs-overlay .qs-submit:hover{background:var(--color-primary-hover)}.qs-overlay .qs-submit.qs-disabled{color:var(--color-on-disabled);background:var(--color-primary-disabled);opacity:1}.qs-overlay-month-container{flex-wrap:wrap;flex-grow:0.8;margin-top:10px;margin-bottom:10px}:host(.large) #date-picker{font-size:var(--font-size-lg);height:var(--spacing-comp-05)}:host(.large) label,:host(.large) .qs-month-year,:host(.large) .qs-square.qs-day,:host(.large) .qs-square{font-size:var(--font-size-lg)}";
+const datePickerCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:6px;height:6px}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.qs-datepicker-container{font-size:1rem;font-family:sans-serif;color:black;position:absolute;width:15.625em;display:flex;flex-direction:column;z-index:9001;user-select:none;border:1px solid gray;border-radius:0.263921875em;overflow:hidden;background:white;box-shadow:0 1.25em 1.25em -0.9375em rgba(0, 0, 0, 0.3)}.qs-datepicker-container *{box-sizing:border-box}.qs-centered{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%)}.qs-hidden{display:none}.qs-overlay{position:absolute;top:0;left:0;background:rgba(0, 0, 0, 0.75);color:white;width:100%;height:100%;padding:0.5em;z-index:1;opacity:1;transition:opacity 0.3s;display:flex;flex-direction:column}.qs-overlay.qs-hidden{opacity:0;z-index:-1}.qs-overlay .qs-overlay-year{border:none;background:transparent;border-bottom:1px solid white;border-radius:0;color:white;font-size:0.875em;padding:0.25em 0;width:80%;text-align:center;margin:0 auto;display:block}.qs-overlay .qs-overlay-year::-webkit-inner-spin-button{-webkit-appearance:none}.qs-overlay .qs-close{padding:0.5em;cursor:pointer;position:absolute;top:0;right:0}.qs-overlay .qs-submit{border:1px solid white;border-radius:0.263921875em;padding:0.5em;margin:0 auto auto;cursor:pointer;background:rgba(128, 128, 128, 0.4)}.qs-overlay .qs-submit.qs-disabled{color:gray;border-color:gray;cursor:not-allowed}.qs-overlay .qs-overlay-month-container{display:flex;flex-wrap:wrap;flex-grow:1}.qs-overlay .qs-overlay-month{display:flex;justify-content:center;align-items:center;width:calc(100% / 3);cursor:pointer;opacity:0.5;transition:opacity 0.15s}.qs-overlay .qs-overlay-month.active,.qs-overlay .qs-overlay-month:hover{opacity:1}.qs-controls{width:100%;display:flex;justify-content:space-between;align-items:center;flex-grow:1;flex-shrink:0;background:lightgray;filter:blur(0px);transition:filter 0.3s}.qs-controls.qs-blur{filter:blur(5px)}.qs-arrow{height:1.5625em;width:1.5625em;position:relative;cursor:pointer;border-radius:0.263921875em;transition:background 0.15s}.qs-arrow:hover{background:rgba(0, 0, 0, 0.1)}.qs-arrow:hover.qs-left:after{border-right-color:black}.qs-arrow:hover.qs-right:after{border-left-color:black}.qs-arrow:after{content:\"\";border:0.390625em solid transparent;position:absolute;top:50%;transition:border 0.2s}.qs-arrow.qs-left:after{border-right-color:gray;right:50%;transform:translate(25%, -50%)}.qs-arrow.qs-right:after{border-left-color:gray;left:50%;transform:translate(-25%, -50%)}.qs-month-year{font-weight:bold;transition:border 0.2s;border-bottom:1px solid transparent;cursor:pointer}.qs-month-year:hover{border-bottom:1px solid gray}.qs-month-year:focus,.qs-month-year:active:focus{outline:none}.qs-month{padding-right:0.5ex}.qs-year{padding-left:0.5ex}.qs-squares{display:flex;flex-wrap:wrap;padding:0.3125em;filter:blur(0px);transition:filter 0.3s}.qs-squares.qs-blur{filter:blur(5px)}.qs-square{width:calc(100% / 7);height:1.5625em;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.1s;border-radius:0.263921875em}.qs-square:not(.qs-empty):not(.qs-disabled):not(.qs-day):not(.qs-active):hover{background:orange}.qs-current{font-weight:bold;text-decoration:underline}.qs-active,.qs-range-start,.qs-range-end{background:lightblue}.qs-range-start:not(.qs-range-6){border-top-right-radius:0;border-bottom-right-radius:0}.qs-range-middle{background:#d4ebf2}.qs-range-middle:not(.qs-range-0):not(.qs-range-6){border-radius:0}.qs-range-middle.qs-range-0{border-top-right-radius:0;border-bottom-right-radius:0}.qs-range-middle.qs-range-6{border-top-left-radius:0;border-bottom-left-radius:0}.qs-range-end:not(.qs-range-0){border-top-left-radius:0;border-bottom-left-radius:0}.qs-disabled,.qs-outside-current-month{opacity:0.2}.qs-disabled{cursor:not-allowed}.qs-empty{cursor:default}.qs-day{cursor:default;font-weight:bold;color:gray}.qs-event{position:relative}.qs-event:after{content:\"\";position:absolute;width:0.46875em;height:0.46875em;border-radius:50%;background:#07f;bottom:0;right:0}:host{display:block}:host label{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;display:flex;align-items:center;cursor:default}#date-picker{width:100%;font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;border-width:var(--border-width-sm);border-color:var(--gray-02);border-style:var(--border-style-regular);border-radius:var(--border-radius-sm);padding-left:var(--spacing-comp-01);padding-right:var(--spacing-comp-01);color:var(--color-on-background);background-color:var(--color-background);height:20px;box-sizing:border-box;padding:0 5px;cursor:pointer;z-index:100}#date-picker:focus{outline-style:solid;outline-color:var(--gxg-border-color--focused);outline-width:var(--border-width-md);outline-offset:-2px}.qs-datepicker{padding:4px 0 0 0}.qs-datepicker-container{border:none;box-shadow:var(--box-shadow-01);padding:0;width:181px;background:var(--color-background);margin-top:6px}.qs-datepicker .qs-controls{background-color:transparent;color:var(--color-on-background)}.qs-datepicker .qs-square{border:1px solid var(--gray-01);border-radius:0;width:var(--spacing-comp-05);height:var(--spacing-comp-05);margin:0.5px;color:var(--color-on-background);font-family:var(--font-family-primary)}.qs-month-year{font-size:var(--font-size-xs);font-family:var(--font-family-primary);text-transform:uppercase;font-weight:var(--font-weight-regular)}.qs-datepicker .qs-square.qs-day{color:var(--color-on-background);border:0;height:var(--spacing-comp-04);font-family:var(--font-family-primary);font-weight:var(--font-weight-extra-bold)}.qs-datepicker .qs-square.qs-active,.qs-datepicker .qs-square:not(.qs-empty):not(.qs-disabled):not(.qs-day):not(.qs-active):hover{background-color:var(--color-primary-hover-opacity-01);border-color:var(--color-primary-active)}.qs-datepicker .qs-arrow:after{width:3px;height:3px;border:1px solid black;top:4px}.qs-datepicker .qs-arrow:hover{background-color:transparent}.qs-datepicker .qs-arrow:hover:after{border-color:var(--color-primary-active)}.qs-datepicker .qs-arrow.qs-right:after,.qs-datepicker .qs-arrow.qs-left:after{border-color:var(--color-on-background)}.qs-datepicker .qs-arrow.qs-left:after{border-right:0;border-bottom:0;transform:rotate(-45deg) !important;left:13px}.qs-datepicker .qs-arrow.qs-right:after{border-left:0;border-bottom:0;transform:rotate(45deg) !important;left:-4px}.qs-disabled,.qs-outside-current-month{opacity:0.4}:host(.rtl) .qs-datepicker-container{right:0}.qs-overlay{background-color:var(--color-background);font-family:var(--font-family-primary)}.qs-overlay .qs-close{color:var(--color-on-background);margin-top:4px;margin-right:4px}.qs-overlay .qs-overlay-year{font-size:var(--font-size-lg);color:var(--color-on-background)}.qs-overlay .qs-overlay-year:focus-visible{outline:none}.qs-overlay .qs-overlay-month{font-size:var(--font-size-lg);color:var(--color-on-background)}.qs-overlay .qs-submit{border-radius:var(--border-radius-xs);border:none;padding:0.2em;padding-inline-start:var(--spacing-comp-04);padding-inline-end:var(--spacing-comp-04);background:var(--color-primary-enabled);font-size:var(--font-size-lg);transition:background 0.25s}.qs-overlay .qs-submit:hover{background:var(--color-primary-hover)}.qs-overlay .qs-submit.qs-disabled{color:var(--color-on-disabled);background:var(--color-primary-disabled);opacity:1}.qs-overlay-month-container{flex-wrap:wrap;flex-grow:0.8;margin-top:10px;margin-bottom:10px}:host(.large) #date-picker{font-size:var(--font-size-lg);height:var(--spacing-comp-05)}:host(.large) label,:host(.large) .qs-month-year,:host(.large) .qs-square.qs-day,:host(.large) .qs-square{font-size:var(--font-size-lg)}";
 
 const GxgDatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {