@genexus/genexus-ide-ui 0.0.45 → 0.0.47

package/dist/esm/gx-ide-new-environment.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0da01575.js';
 import { L as Locale } from './locale-e183487a.js';
-import { r as renderFormItems } from './common-a3df0966.js';
+import { r as renderFormItems } from './common-ec35ec2f.js';
 import { f as formSubmitValidation } from './form-validation-09bd4504.js';
 
 const newEnvironmentCss = ".gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:999;border-bottom:1px solid var(--gray-01)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){box-shadow:var(--box-shadow-01) !important;height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--font-weight-regular);font-size:var(--font-size-lg);line-height:1.6em;height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}:host{display:block;border:1px solid var(--gxg-border-color--regular);background-color:var(--color-background)}:host(.gxi-new-environment--shadow){border:none;box-shadow:var(--box-shadow-01)}.header{grid-template-columns:repeat(2, 1fr);grid-template-rows:1fr;grid-template-columns:auto 1fr auto}.header *:nth-child(1){grid-area:1/1/2/2}.header *:nth-child(2){grid-area:1/2/2/3}.gxg-tabs{margin-top:0;box-shadow:none}.grid--basic{flex-grow:1;grid-template-columns:1fr 1fr;gap:0;height:100%}.grid--basic>*:first-child{border-right:1px solid var(--gx-ide-container-border-color)}.advanced-second-row{grid-template-columns:repeat(2, 1fr);grid-template-rows:1fr}.advanced-second-row>*:nth-child(1){grid-area:1/1/2/2}.advanced-second-row>*:nth-child(2){grid-area:1/2/2/3}.advanced-second-row-col-left{grid-template-columns:repeat(2, 1fr);grid-template-rows:repeat(4, 1fr);grid-template-columns:1fr auto}.advanced-second-row-col-left>*{display:flex;align-items:self-end}.advanced-second-row-col-left>*:nth-child(1){grid-area:1/1/2/2}.advanced-second-row-col-left>*:nth-child(2){grid-area:1/2/2/3}.advanced-second-row-col-left>*:nth-child(3){grid-area:2/1/3/2}.advanced-second-row-col-left>*:nth-child(4){grid-area:2/2/3/3}.advanced-second-row-col-left>*:nth-child(5){grid-area:3/1/4/2}.advanced-second-row-col-left>*:nth-child(6){grid-area:3/2/4/3}.advanced-second-row-col-left>*:nth-child(7){grid-area:4/1/5/2}.advanced-second-row-col-left>*:nth-child(8){grid-area:4/2/5/3}.advanced-second-row-col-right{grid-template-columns:1fr;grid-template-rows:repeat(4, 1fr);grid-auto-rows:1fr}.advanced-second-row-col-right *:nth-child(1){grid-area:1/1/2/2}.advanced-second-row-col-right *:nth-child(2){grid-area:2/1/3/2}.advanced-second-row-col-right *:nth-child(3){grid-area:3/1/4/2}.advanced-second-row-col-right *:nth-child(4){grid-area:4/1/5/2}";

package/dist/esm/gx-ide-new-kb.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0da01575.js';
 import { L as Locale } from './locale-e183487a.js';
-import { r as renderFormItems, g as getSelectedGxOption } from './common-a3df0966.js';
+import { g as getSelectedGxOption, r as renderFormItems } from './common-ec35ec2f.js';
 import { f as formSubmitValidation } from './form-validation-09bd4504.js';
 
 const newKbCss = ".gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:999;border-bottom:1px solid var(--gray-01)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){box-shadow:var(--box-shadow-01) !important;height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--font-weight-regular);font-size:var(--font-size-lg);line-height:1.6em;height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}:host{display:block;border:1px solid var(--gxg-border-color--regular);background-color:var(--color-background)}.header{grid-template-columns:auto 1fr;grid-template-areas:\"kb-name-label kb-input\"}.header--is-advanced{grid-template-columns:auto 1fr min-content;grid-template-areas:\"kb-name-label kb-input .\" \"location-label location-input location-icon\"}.header .kb-input{grid-area:kb-input}.header .kb-name-label{grid-area:kb-label}.header .location-label{grid-area:location-label}.header .location-input{grid-area:location-input}.header .location-icon{grid-area:location-icon}.gxg-tabs{margin-top:0;box-shadow:none}.basic-row-first{grid-template-areas:\"prototyping-target user-interface-language\";grid-template-columns:repeat(2, 1fr)}.basic-row-second{grid-template-areas:\"prototyping-environment data-source\";grid-template-columns:repeat(2, 1fr);grid-column-gap:0;grid-row-gap:0;flex-grow:1}.basic-row-second>*:first-child{border-right:1px solid var(--gx-ide-container-border-color)}.knowledge-base-storage{grid-template-areas:\"knowledge-base-storage__col-left knowledge-base-storage__col-right\";grid-template-columns:repeat(2, 1fr);flex-grow:1;gap:0}.knowledge-base-storage>*:first-child{border-right:1px solid var(--gx-ide-container-border-color)}.knowledge-base-storage__col-left{grid-area:knowledge-base-storage__col-left;grid-template-columns:1fr auto;grid-template-areas:\"server-name-combo-box server-name-button\" \"database-name .\" \"collation-combo-box collation-button\" \"create-data-in-kb .\"}.knowledge-base-storage__col-left .server-name-combo-box{grid-area:server-name-combo-box}.knowledge-base-storage__col-left .server-name-button{grid-area:server-name-button;align-self:end}.knowledge-base-storage__col-left .database-name{grid-area:database-name}.knowledge-base-storage__col-left .collation-combo-box{grid-area:collation-combo-box}.knowledge-base-storage__col-left .collation-button{grid-area:collation-button;align-self:end}.knowledge-base-storage__col-left .create-data-in-kb{grid-area:create-data-in-kb}.knowledge-base-storage__col-right{grid-area:knowledge-base-storage__col-right;grid-template-columns:1fr;grid-template-areas:\"authentication-type\" \"user-name\" \"password\" \"save-password\"}.knowledge-base-storage__col-right .authentication-type{grid-area:authentication-type}.knowledge-base-storage__col-right .user-name{grid-area:user-name}.knowledge-base-storage__col-right .password{grid-area:password}.knowledge-base-storage__col-right .save-password{grid-area:save-password}.knowledge-base-storage__col-right--windows-authentication{grid-template-areas:\"authentication-type\"}";
@@ -9,52 +9,23 @@ const GxIdeNewKb = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.componentDidRenderEvent = createEvent(this, "componentDidRenderEvent", 7);
-    /**
-     * An object with the initial value for each multi-option element.
-     */
-    this._initialComboValue = {
-      prototypingTargets: null,
-      userInterfaceLanguages: null,
-      prototypingEnvironments: null,
-      defaultDataSources: null,
-      serverNames: null,
-      collations: null,
-      authenticationTypes: null
-    };
-    /* Used to evaluate what front end options need to be updated on 'getFrontEndsCallback'*/
-    this.previousFrontEndsState = [];
     // 7.LISTENERS //
     // 8.PUBLIC METHODS API //
     // 9.LOCAL METHODS //
-    /**
-     * Set the initial/selected option for multi-option components
-     */
-    this.setInitialValues = () => {
-      if (this._initialComboValue) {
-        Object.keys(this._initialComboValue).forEach(property => {
-          const selectedOption = getSelectedGxOption(this[property]);
-          const value = (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.selected)
-            ? selectedOption.id
-            : null;
-          if (value) {
-            this._initialComboValue[property] = value;
-          }
-        });
-      }
-    };
     /**
      * @description If Server Name first option is selected, "Create Data in Knowledge Base Folder" should be disabled
      */
     this.evaluateCreateDataInKbDisabled = (e) => {
+      var _a, _b;
       if (e) {
-        if (this.serverNames[0].id === e.detail) {
+        if (((_a = this.serverNames[0]) === null || _a === void 0 ? void 0 : _a.id) === e.detail) {
           this.createDataInKbDisabled = true;
         }
         else {
           this.createDataInKbDisabled = false;
         }
       }
-      else if (this.serverNames[0].selected) {
+      else if ((_b = this.serverNames[0]) === null || _b === void 0 ? void 0 : _b.selected) {
         this.createDataInKbDisabled = true;
       }
     };
@@ -115,23 +86,18 @@ const GxIdeNewKb = class {
         const updatedFrontEndsPromise = this.getFrontEndsCallback(selectedPrototypingEnvironmentId);
         updatedFrontEndsPromise
           .then(newFrontEndsOptions => {
-          if ((newFrontEndsOptions === null || newFrontEndsOptions === void 0 ? void 0 : newFrontEndsOptions.length) > 0) {
-            let newFrontEndOptionIndex;
-            const updatedFrontEnds = [];
-            this.previousFrontEndsState.forEach(prevFrontEndOption => {
-              const optionFound = newFrontEndsOptions.find((newFrontEndOption, index) => {
-                newFrontEndOptionIndex = index;
-                return newFrontEndOption.id === prevFrontEndOption.id;
-              });
-              if (optionFound) {
-                updatedFrontEnds.push(newFrontEndsOptions[newFrontEndOptionIndex]);
-              }
-              else {
-                updatedFrontEnds.push(prevFrontEndOption);
-              }
+          const updatedFrontEnds = [];
+          newFrontEndsOptions.forEach(newFrontEnd => {
+            const foundActualFrontEnd = this.frontEnds.find(actualFrontEnd => {
+              return newFrontEnd.id === actualFrontEnd.id;
             });
-            this.frontEnds = updatedFrontEnds;
-          }
+            if (foundActualFrontEnd) {
+              // update newFrontEnd checked status with actual frontEnd checked status
+              newFrontEnd.checked = foundActualFrontEnd.checked;
+            }
+            updatedFrontEnds.push(newFrontEnd);
+          });
+          this.frontEnds = updatedFrontEnds;
         })
           .catch(() => {
           // to do
@@ -195,17 +161,37 @@ const GxIdeNewKb = class {
     };
     // 10.RENDER() FUNCTION //
     this.renderTabBasic = () => {
-      var _a, _b, _c, _d;
-      return (h("gxg-tab", { tab: "basic", "no-padding": true, flexContainer: true }, h("gx-ide-container", { displayBorderBottom: true }, h("div", { class: "grid basic-row-first" }, h("gxg-combo-box", { disableFilter: true, label: this._componentLocale.tabBasic.prototypingTarget, value: (_a = this._initialComboValue["prototypingTargets"]) !== null && _a !== void 0 ? _a : this.prototypingTargets[0].id, ref: (el) => (this.prototypingTargetEl = el), onValueChanged: this.prototypingTargetValueChangedHandler, class: "prototyping-target", part: "prototyping-target" }, renderFormItems("gxg-combo-box-item", this.prototypingTargets, "prototyping-target")), h("gxg-combo-box", { disableFilter: true, label: this._componentLocale.tabBasic.userInterfaceLanguage, value: (_b = this._initialComboValue["userInterfaceLanguages"]) !== null && _b !== void 0 ? _b : this.userInterfaceLanguages[0].id, ref: (el) => (this.userInterfaceLanguageEl = el), class: "user-interface-language", part: "user-interface-language" }, renderFormItems("gxg-combo-box-item", this.userInterfaceLanguages, "user-interface-language")))), h("div", { class: "grid basic-row-second" }, h("gx-ide-container", { noHeadingBorder: true, containerTitle: this._componentLocale.tabBasic.backEnd.backEndLabel }, h("gxg-combo-box", { disableFilter: true, label: this._componentLocale.tabBasic.backEnd.prototypingEnvironment, value: (_c = this._initialComboValue["prototypingEnvironments"]) !== null && _c !== void 0 ? _c : this.prototypingEnvironments[0].id, ref: (el) => (this.prototypingEnvironmentEl = el), onValueChanged: this.prototypingEnvironmentValueChangedHandler, class: "prototyping-environment", part: "prototyping-environment" }, renderFormItems("gxg-combo-box-item", this.prototypingEnvironments, "prototyping-environment")), h("gxg-combo-box", { label: this._componentLocale.tabBasic.backEnd.dataSource, disableFilter: true, value: (_d = this._initialComboValue["defaultDataSources"]) !== null && _d !== void 0 ? _d : this.defaultDataSources[0].id, ref: (el) => (this.dataSourceEl = el), class: "data-source", part: "data-source" }, renderFormItems("gxg-combo-box-item", this.defaultDataSources, "data-source"))), h("gx-ide-container", { noHeadingBorder: true, containerTitle: this._componentLocale.tabBasic.frontEnd.frontEndLabel }, h("gxg-form-checkbox-group", { ref: el => (this.frontEndsEl = el) }, renderFormItems("gxg-form-checkbox", this.frontEnds, "front-end"))))));
+      return (h("gxg-tab", { tab: "basic", "no-padding": true, flexContainer: true }, h("gx-ide-container", { displayBorderBottom: true }, h("div", { class: "grid basic-row-first" }, h("gxg-combo-box", { disableFilter: true, label: this._componentLocale.tabBasic.prototypingTarget.label, value: getSelectedGxOption(this.prototypingTargets), ref: (el) => (this.prototypingTargetEl = el), disabled: this.prototypingTargets.length === 0, placeholder: this.prototypingTargets.length === 0
+          ? this._componentLocale.tabBasic.prototypingTarget
+            .disabledPlaceholder
+          : "", onValueChanged: this.prototypingTargetValueChangedHandler, class: "prototyping-target", part: "prototyping-target" }, renderFormItems("gxg-combo-box-item", this.prototypingTargets, "prototyping-target")), h("gxg-combo-box", { disableFilter: true, label: this._componentLocale.tabBasic.userInterfaceLanguage.label, value: getSelectedGxOption(this.userInterfaceLanguages), placeholder: this.userInterfaceLanguages.length === 0
+          ? this._componentLocale.tabBasic.userInterfaceLanguage
+            .disabledPlaceholder
+          : "", disabled: this.userInterfaceLanguages.length === 0, ref: (el) => (this.userInterfaceLanguageEl = el), class: "user-interface-language", part: "user-interface-language" }, renderFormItems("gxg-combo-box-item", this.userInterfaceLanguages, "user-interface-language")))), h("div", { class: "grid basic-row-second" }, h("gx-ide-container", { noHeadingBorder: true, containerTitle: this._componentLocale.tabBasic.backEnd.backEndLabel }, h("gxg-combo-box", { disableFilter: true, label: this._componentLocale.tabBasic.backEnd.prototypingEnvironment
+          .label, value: getSelectedGxOption(this.prototypingEnvironments), placeholder: this.prototypingEnvironments.length === 0
+          ? this._componentLocale.tabBasic.backEnd
+            .prototypingEnvironment.disabledPlaceholder
+          : "", disabled: this.prototypingEnvironments.length === 0, ref: (el) => (this.prototypingEnvironmentEl = el), onValueChanged: this.prototypingEnvironmentValueChangedHandler, class: "prototyping-environment", part: "prototyping-environment" }, renderFormItems("gxg-combo-box-item", this.prototypingEnvironments, "prototyping-environment")), h("gxg-combo-box", { label: this._componentLocale.tabBasic.backEnd.dataSource.label, disableFilter: true, value: getSelectedGxOption(this.defaultDataSources), placeholder: this.defaultDataSources.length === 0
+          ? this._componentLocale.tabBasic.backEnd.dataSource
+            .disabledPlaceholder
+          : "", disabled: this.defaultDataSources.length === 0, ref: (el) => (this.dataSourceEl = el), class: "data-source", part: "data-source" }, renderFormItems("gxg-combo-box-item", this.defaultDataSources, "data-source"))), h("gx-ide-container", { noHeadingBorder: true, containerTitle: this._componentLocale.tabBasic.frontEnd.frontEndLabel }, h("gxg-form-checkbox-group", { ref: el => (this.frontEndsEl = el) }, renderFormItems("gxg-form-checkbox", this.frontEnds, "front-end"))))));
     };
     this.renderTabAdvanced = () => {
-      var _a, _b, _c;
-      return (h("gxg-tab", { tab: "advanced", "no-padding": true, flexContainer: true }, h("gx-ide-container", { displayBorderTop: true, displayBorderBottom: true, containerTitle: this._componentLocale.tabAdvanced.tabTitle }), h("div", { class: "grid knowledge-base-storage" }, h("gx-ide-container", null, h("div", { class: "grid knowledge-base-storage__col-left" }, h("gxg-combo-box", { label: this._componentLocale.tabAdvanced.serverName, disableFilter: true, value: (_a = this._initialComboValue["serverNames"]) !== null && _a !== void 0 ? _a : this.serverNames[0].id, ref: (el) => (this.serverNameEl = el), class: "server-name-combo-box", part: "server-name", onValueChanged: this.evaluateCreateDataInKbDisabled }, renderFormItems("gxg-combo-box-item", this.serverNames, "server-name")), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/search", class: "server-name-button", part: "search-server-name" }), h("gxg-form-text", { labelPosition: "above", label: this._componentLocale.tabAdvanced.databaseName, placeholder: "MyDatabase", ref: (el) => (this.databaseNameEl = el), value: this.databaseName, class: "database-name", part: "database-name" }), h("gxg-combo-box", { label: this._componentLocale.tabAdvanced.collation, disableFilter: true, value: (_b = this._initialComboValue["collations"]) !== null && _b !== void 0 ? _b : this.collations[0].id, ref: (el) => (this.collationEl = el), class: "collation-combo-box", part: "collation" }, renderFormItems("gxg-combo-box-item", this.collations, "collation")), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/reset", class: "collation-button", part: "reset-collation" }), h("gxg-form-checkbox", { label: this._componentLocale.tabAdvanced.createDataFilesInKbFolder, ref: (el) => (this.createDataFilesInKBFolderEl =
+      return (h("gxg-tab", { tab: "advanced", "no-padding": true, flexContainer: true }, h("gx-ide-container", { displayBorderBottom: true, containerTitle: this._componentLocale.tabAdvanced.tabTitle }), h("div", { class: "grid knowledge-base-storage" }, h("gx-ide-container", null, h("div", { class: "grid knowledge-base-storage__col-left" }, h("gxg-combo-box", { label: this._componentLocale.tabAdvanced.serverName.label, disableFilter: true, value: getSelectedGxOption(this.serverNames), placeholder: this.serverNames.length === 0
+          ? this._componentLocale.tabAdvanced.serverName
+            .disabledPlaceholder
+          : "", disabled: this.serverNames.length === 0, ref: (el) => (this.serverNameEl = el), class: "server-name-combo-box", part: "server-name", onValueChanged: this.evaluateCreateDataInKbDisabled }, renderFormItems("gxg-combo-box-item", this.serverNames, "server-name")), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/search", class: "server-name-button", part: "search-server-name" }), h("gxg-form-text", { labelPosition: "above", label: this._componentLocale.tabAdvanced.databaseName.label, placeholder: "MyDatabase", ref: (el) => (this.databaseNameEl = el), value: this.databaseName, class: "database-name", part: "database-name" }), h("gxg-combo-box", { label: this._componentLocale.tabAdvanced.collation.label, disableFilter: true, value: getSelectedGxOption(this.collations), ref: (el) => (this.collationEl = el), placeholder: this.collations.length === 0
+          ? this._componentLocale.tabAdvanced.collation
+            .disabledPlaceholder
+          : "", disabled: this.serverNames.length === 0, class: "collation-combo-box", part: "collation" }, renderFormItems("gxg-combo-box-item", this.collations, "collation")), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/reset", class: "collation-button", part: "reset-collation" }), h("gxg-form-checkbox", { label: this._componentLocale.tabAdvanced.createDataFilesInKbFolder, ref: (el) => (this.createDataFilesInKBFolderEl =
           el), alignTop: true, checked: this.createDataFilesInKBFolder, disabled: this.createDataInKbDisabled, class: "create-data-in-kb", part: "create-data-in-kb" }))), h("gx-ide-container", { noHeadingBorder: true }, h("div", { class: {
           "grid": true,
           "knowledge-base-storage__col-right": true,
           "knowledge-base-storage__col-right--windows-authentication": !this.userNameVisible
-        } }, h("gxg-combo-box", { label: this._componentLocale.tabAdvanced.authenticationType, disableFilter: true, value: (_c = this._initialComboValue["authenticationTypes"]) !== null && _c !== void 0 ? _c : this.authenticationTypes[0].id, ref: (el) => (this.authenticationTypeEl = el), class: "authentication-type", part: "authentication-type", onValueChanged: this.evaluateAuthenticationType }, renderFormItems("gxg-combo-box-item", this.authenticationTypes, "authentication-type")), this.userNameVisible ? (h("gxg-form-text", { labelPosition: "above", label: this._componentLocale.tabAdvanced.userName, ref: (el) => (this.userNameEl = el), value: this.userName, class: "user-name", part: "user-name" })) : null, this.passwordVisible ? (h("gxg-form-text", { labelPosition: "above", label: this._componentLocale.tabAdvanced.password, password: true, ref: (el) => (this.passwordEl = el), value: this.password, class: "password", part: "password" })) : null, this.savePasswordVisible ? (h("gxg-form-checkbox", { label: this._componentLocale.tabAdvanced.savePassword, ref: (el) => (this.savePasswordEl = el), checked: this.savePassword, class: "save-password", part: "save-password" })) : null)))));
+        } }, h("gxg-combo-box", { label: this._componentLocale.tabAdvanced.authenticationType.label, disableFilter: true, value: getSelectedGxOption(this.authenticationTypes), ref: (el) => (this.authenticationTypeEl = el), placeholder: this.authenticationTypes.length === 0
+          ? this._componentLocale.tabAdvanced.authenticationType
+            .disabledPlaceholder
+          : "", disabled: this.authenticationTypes.length === 0, class: "authentication-type", part: "authentication-type", onValueChanged: this.evaluateAuthenticationType }, renderFormItems("gxg-combo-box-item", this.authenticationTypes, "authentication-type")), this.userNameVisible ? (h("gxg-form-text", { labelPosition: "above", label: this._componentLocale.tabAdvanced.userName.label, ref: (el) => (this.userNameEl = el), value: this.userName, class: "user-name", part: "user-name" })) : null, this.passwordVisible ? (h("gxg-form-text", { labelPosition: "above", label: this._componentLocale.tabAdvanced.password.label, password: true, ref: (el) => (this.passwordEl = el), value: this.password, class: "password", part: "password" })) : null, this.savePasswordVisible ? (h("gxg-form-checkbox", { label: this._componentLocale.tabAdvanced.savePassword, ref: (el) => (this.savePasswordEl = el), checked: this.savePassword, class: "save-password", part: "save-password" })) : null)))));
     };
     this.createDataInKbDisabled = false;
     this.userNameVisible = true;
@@ -237,7 +223,6 @@ const GxIdeNewKb = class {
   // 6.COMPONENT LIFECYCLE METHODS //
   async componentWillLoad() {
     this._componentLocale = await Locale.getComponentStrings(this.el);
-    this.setInitialValues();
     this.evaluateCreateDataInKbDisabled(null);
     this.evaluateAuthenticationType(null);
     this.previousFrontEndsState = this.frontEnds;

package/dist/esm/gx-ide-new-object.entry.js

@@ -91,7 +91,6 @@ const GxIdeNewObject = class {
       await this.cancelCallback();
     };
     this.categoryOnSelectionChangedHandler = (selectionEvent) => {
-      console.log("categoryOnSelectionChangedHandler");
       const selection = selectionEvent.detail.items;
       if (selection.length > 0) {
         this.selectedCategory = this.typeCategories[selection[0].index];
@@ -101,7 +100,6 @@ const GxIdeNewObject = class {
       }
     };
     this.typeOnSelectionChangedHandler = (selectionEvent) => {
-      console.log("typeOnSelectionChangedHandler");
       const selection = selectionEvent.detail.items;
       if (selection.length > 0) {
         const selectedType = selection[0];
@@ -124,7 +122,6 @@ const GxIdeNewObject = class {
   }
   // 4.PUBLIC PROPERTY API //
   watchPropHandler(newSelectedType) {
-    console.log("selectedType changed");
     this.name = newSelectedType.name;
     this.description = newSelectedType.name;
     this.descriptionModifiedByUser = false;
@@ -150,7 +147,7 @@ const GxIdeNewObject = class {
     return (h(Host, { class: {
         "gxi-new-kb": true,
         "gxi-new-object--shadow": this.shadow
-      } }, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, h("main", { class: "main" }, h("gxg-container", { displayBorderBottom: true }, h("div", { class: "grid first-row" }, this.typeCategories.length > 1 ? (h("gxg-list-box", { "single-selection": true, id: "list-box-category", "the-title": this._componentLocale.categorySelection, height: "100%", onSelectionChanged: this.categoryOnSelectionChangedHandler }, this.typeCategories.map(category => (h("gxg-list-box-item", { key: category.id, value: category.id, icon: category.icon, part: `${category}-${category.id}` }, category.name))))) : null, h("gxg-list-box", { "single-selection": true, id: "list-box-type", "the-title": this._componentLocale.typeSelection, height: "100%", onSelectionChanged: this.typeOnSelectionChangedHandler }, this.selectedCategory.types
+      } }, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, h("main", { class: "main" }, h("gxg-container", { displayBorderBottom: true }, h("div", { class: "grid first-row" }, this.typeCategories.length > 1 ? (h("gxg-list-box", { "single-selection": true, "the-title": this._componentLocale.categorySelection, onSelectionChanged: this.categoryOnSelectionChangedHandler }, this.typeCategories.map(category => (h("gxg-list-box-item", { key: category.id, value: category.id, icon: category.icon, part: `${category}-${category.id}` }, category.name))))) : null, h("gxg-list-box", { "single-selection": true, "the-title": this._componentLocale.typeSelection, onSelectionChanged: this.typeOnSelectionChangedHandler }, this.selectedCategory.types
       ? this.selectedCategory.types.map(type => (h("gxg-list-box-item", { key: `${this.selectedCategory.id}-${type.id}`, icon: type.icon, selected: this.selectedType.id === type.id, part: `${type}-${type.id}` }, type.name)))
       : null), h("gxg-title", { type: "title-05" }, "Text about the ", this.selectedType.name))), h("gxg-container", null, h("div", { class: "grid" }, h("header", { class: "header grid" }, h("gxg-label", { labelPosition: "start" }, this._componentLocale.name), h("gxg-form-text", { "label-position": "start", placeholder: "Name", "max-width": "100%", value: this.name, ref: (el) => (this.nameEl = el), onInput: this.onInputNameHandler, onBlur: this.onBlurNameHandler, part: "name", "display-validation-styles": true, "display-validation-message": true }), h("gxg-label", { labelPosition: "start" }, this._componentLocale.description), h("gxg-form-text", { "label-position": "start", placeholder: "Description", "max-width": "100%", value: this.description, ref: (el) => (this.descriptionEl = el), onInput: this.onInputDescriptionHandler, part: "description", "display-validation-styles": true, "display-validation-message": true }), this.renderModuleFolder()))), h("gxg-container", { displayBorderTop: true }, h("gxg-button", { id: "button-create", slot: "footer", type: "primary-text-only", onClick: this.createCallbackHandler, disabled: !this.nameIsValid, part: "gxg-button gxg-button--create" }, this._componentLocale.footer.btnCreate), h("gxg-button", { id: "button-cancel", slot: "footer", type: "outlined", onClick: this.cancelCallbackHandler, part: "gxg-button gxg-button--cancel" }, this._componentLocale.footer.btnCancel))))));
   }

package/dist/esm/gx-ide-team-dev-select-recent-comment.entry.js

@@ -44,7 +44,7 @@ const GxIdeTeamDevSelectRecentComment = class {
   }
   // 10.RENDER() FUNCTION //
   render() {
-    return (h(Host, null, h("div", { class: `main-wrapper` }, h("gxg-container", { displayBorder: true }, h("gxg-list-box", { id: "max-height", singleSelection: true, height: "100%", required: true, "min-height": "50%", onSelectionChanged: this.commentSelectionChangedHandler, "no-border": true }, this.renderObjectItems(this.comments)), h("div", { slot: "footer", class: "action-buttons grid" }, h("gxg-button", { type: "primary-text-icon", onClick: this.confirmCallbackHandle }, this._componentLocale.confirmButton), h("gxg-button", { type: "outlined", onClick: this.cancelCallbackHandle }, this._componentLocale.cancelButton))))));
+    return (h(Host, null, h("div", { class: `main-wrapper` }, h("gxg-container", { displayBorder: true }, h("gxg-list-box", { singleSelection: true, onSelectionChanged: this.commentSelectionChangedHandler, "no-border": true }, this.renderObjectItems(this.comments)), h("div", { slot: "footer", class: "action-buttons grid" }, h("gxg-button", { type: "primary-text-icon", onClick: this.confirmCallbackHandle }, this._componentLocale.confirmButton), h("gxg-button", { type: "outlined", onClick: this.cancelCallbackHandle }, this._componentLocale.cancelButton))))));
   }
   static get assetsDirs() { return ["gx-ide-assets/team-dev-select-recent-comment"]; }
   get el() { return getElement(this); }

package/dist/esm/gx-ide-ww-images.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0da01575.js';
 import { L as Locale } from './locale-e183487a.js';
-import { r as renderFormItems } from './common-a3df0966.js';
+import { r as renderFormItems } from './common-ec35ec2f.js';
 import { F as FILTER_AFTER } from './constants-7882d1a8.js';
 
 const wwImagesCss = ".gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:999;border-bottom:1px solid var(--gray-01)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){box-shadow:var(--box-shadow-01) !important;height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--font-weight-regular);font-size:var(--font-size-lg);line-height:1.6em;height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}:host{display:block;border:1px solid var(--gxg-border-color--regular);background-color:var(--color-background)}:host(.gxi-object-selector--shadow){border:none;box-shadow:var(--box-shadow-01)}.filter-grid{grid-template-columns:repeat(4, 1fr)}.filter-grid>:nth-child(3),.filter-grid>:nth-child(6){display:flex;flex-direction:row;align-items:flex-end}.filter-grid>:nth-child(4){grid-area:2/1/3/4}.filter-grid>:nth-child(5){grid-area:3/1/4/2}.filter-grid>:nth-child(6){grid-area:3/4/4/5}.filter-grid>:nth-child(7){grid-area:4/1/5/4}.filter-grid>:nth-child(8){grid-area:5/1/6/2}.filter-grid>:nth-child(9){grid-area:5/2/6/3}.filter-grid>:nth-child(10){grid-area:5/3/6/4}.filter-grid>:nth-child(11){grid-area:5/4/6/5}.flex{display:flex;flex-direction:row;align-items:center}.with-gap{gap:var(--gx-ide-grid-row-gap)}.hide{display:none !important}.images-grid{grid-template-columns:repeat(3, 1fr);grid-column-gap:0}.images-grid>:nth-child(1){grid-area:1/1/1/3}.images-data-flex{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--gx-ide-grid-row-gap);text-overflow:ellipsis;overflow:hidden}.images-data-flex .image-item{display:flex;flex-direction:column;justify-content:space-between;align-items:center;width:120px}.images-data-flex .image-item .img{width:50px;height:50px;display:flex;align-items:center;justify-content:center;border:1px solid var(--gxg-border-color--regular);padding:var(--gx-ide-grid-row-gap)}.images-data-flex .image-item .img img{max-width:100%;max-height:100%}.objects-count{grid-template-columns:repeat(2, 1fr)}.objects-count *:nth-child(2){justify-content:flex-end;align-items:flex-start}";

package/dist/esm/gxg-button.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, h, H as Host, g as getElement } from './index-0d
 import { s as state } from './store-c2650ca5.js';
 import { e as exportParts } from './export-parts-7f208d57.js';
 
-const buttonCss = "/*! 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}:host{--gxg-button-icon-size:20px;display:inline-block;line-height:0;position:relative}:host .ghost-icon{width:0}:host(.button) .button-native{width:100%;height:100%;--svg-icon-regular-scale:var(\n    --svg-icon-small-scale\n  );position:relative;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;background:var(--color-primary-enabled);border:0;box-shadow:inset 0px 0px 0px 1px transparent;border-radius:var(--border-radius-xs);display:inline-flex;align-items:center;justify-content:center;padding-top:2.5px;padding-right:var(--spacing-comp-03);padding-bottom:2.5px;padding-left:var(--spacing-comp-03);line-height:var(--line-height-regular);transition:background var(--ui-animaton-speed) ease, color var(--ui-animaton-speed) ease, box-shadow var(--ui-animaton-speed) ease;}:host(.button) .button-native:hover:not([disabled]){background:var(--color-primary-hover);cursor:pointer}:host(.button) .button-native:focus:not([disabled]):not(.no-tab-index){background:var(--color-primary-enabled);outline-style:solid;outline-color:var(--color-primary-active);outline-width:var(--border-width-md);outline-offset:-2px}:host(.button) .button-native:active:not([disabled]){background:var(--color-primary-active)}:host(.button.button--disabled) .button-native{background:var(--color-primary-disabled);color:var(--color-primary-disabled);pointer-events:none}:host(.button.button--disabled){pointer-events:none}:host(.button--primary-text-only) .button-native{color:var(--color-on-primary);padding-inline-start:var(--spacing-comp-04);padding-inline-end:var(--spacing-comp-04)}:host(.button--primary-text-only.button--disabled) .button-native{color:var(--color-on-disabled)}:host(.button--primary-text-icon) .button-native{color:var(--color-on-primary);padding-inline-start:var(--spacing-comp-01);padding-inline-end:var(--spacing-comp-02)}:host(.button--primary-text-icon) .button-native gxg-icon:not(.ghost-icon){padding-inline-end:var(--spacing-comp-01)}:host(.button--primary-text-icon.button--disabled) .button-native{color:var(--color-on-disabled)}:host(.button--primary-icon-only) .button-native{background:var(--color-primary-enabled);color:var(--color-on-primary)}:host(.button--primary-icon-only) .button-native:hover:not([disabled]){background:var(--color-primary-hover);color:var(--color-primary-hover)}:host(.button--primary-icon-only) .button-native:focus:not([disabled]):not(.no-tab-index){background:var(--color-primary-enabled);color:var(--color-primary-hover)}:host(.button--primary-icon-only) .button-native:active:not([disabled]){background:var(--color-primary-active);color:var(--color-on-primary)}:host(.button--primary-icon-only) .button-native:focus{outline:none}:host(.button--secondary-text-only) .button-native{background:transparent;padding-inline-start:var(--spacing-comp-04);padding-inline-end:var(--spacing-comp-04)}:host(.button--secondary-text-only) .button-native:hover:not([disabled]){color:var(--color-primary-hover);background:transparent}:host(.button--secondary-text-only) .button-native:focus:not([disabled]):not(.no-tab-index){color:var(--color-primary-active);background:transparent;box-shadow:var(--box-shadow-values) var(--color-primary-active)}:host(.button--secondary-text-only) .button-native:active:not([disabled]){color:var(--color-primary-active);box-shadow:none}:host(.button--secondary-text-only) .button-native:focus{outline:none}:host(.button--secondary-text-only.button--disabled) .button-native{background:transparent;color:var(--color-primary-disabled)}:host(.button--secondary-text-icon) .button-native{background:transparent;padding-inline-start:0;padding-inline-start:var(--spacing-comp-01);padding-inline-end:var(--spacing-comp-02)}:host(.button--secondary-text-icon) .button-native gxg-icon:not(.ghost-icon){padding-inline-end:var(--spacing-comp-01)}:host(.button--secondary-text-icon) .button-native:hover:not([disabled]){color:var(--color-primary-hover);background:transparent}:host(.button--secondary-text-icon) .button-native:focus:not([disabled]):not(.no-tab-index){color:var(--color-primary-active);background:transparent;box-shadow:var(--box-shadow-values) var(--color-primary-active)}:host(.button--secondary-text-icon) .button-native:active:not([disabled]){color:var(--color-primary-active);box-shadow:none}:host(.button--secondary-text-icon.button--disabled) .button-native{background:transparent;color:var(--color-primary-disabled)}:host(.button--secondary-text-icon.button--disabled) .button-native gxg-icon{--icon-color:var(--color-primary-disabled)}:host(.button--secondary-icon-only) .button-native{background:transparent}:host(.button--secondary-icon-only) .button-native:hover:not([disabled]){background:transparent}:host(.button--secondary-icon-only) .button-native:focus:not([disabled]):not(.no-tab-index){background:transparent}:host(.button--secondary-icon-only) .button-native:active:not([disabled]){background:transparent}:host(.button--secondary-icon-only.button--disabled) .button-native{background:transparent}:host(.button--outlined) .button-native,:host(.button--outlined-text-icon) .button-native{box-shadow:inset 0px 0px 0px 1px var(--color-primary-enabled);background:var(--color-background);padding-inline-start:var(--spacing-comp-04);padding-inline-end:var(--spacing-comp-04)}:host(.button--outlined) .button-native:hover:not([disabled]),:host(.button--outlined-text-icon) .button-native:hover:not([disabled]){color:var(--color-primary-hover);background:var(--color-primary-hover-opacity-01);box-shadow:inset 0px 0px 0px 1px var(--color-primary-hover)}:host(.button--outlined) .button-native:focus:not([disabled]):not(.no-tab-index),:host(.button--outlined-text-icon) .button-native:focus:not([disabled]):not(.no-tab-index){color:var(--color-primary-active);background:transparent;box-shadow:inset 0px 0px 0px 2px var(--color-primary-active)}:host(.button--outlined) .button-native:active:not([disabled]),:host(.button--outlined-text-icon) .button-native:active:not([disabled]){color:var(--color-primary-active);background:transparent;box-shadow:inset 0px 0px 0px 1px var(--color-primary-active)}:host(.button--outlined) .button-native gxg-icon:not(.ghost-icon),:host(.button--outlined-text-icon) .button-native gxg-icon:not(.ghost-icon){padding-inline-end:var(--spacing-comp-01)}:host(.button--outlined.button--disabled) .button-native,:host(.button--outlined-text-icon.button--disabled) .button-native{box-shadow:inset 0px 0px 0px 1px var(--color-primary-disabled);background:var(--color-transparent);color:var(--color-primary-disabled)}:host(.button--outlined-text-icon) .button-native{padding-inline-start:var(--spacing-comp-03)}:host(.button--tertiary) .button-native{background:transparent;padding-inline-end:0;padding-inline-start:0}:host(.button--tertiary) .button-native:hover:not([disabled]){background:transparent}:host(.button--tertiary) .button-native:hover:not([disabled]) gxg-icon{--color-on-background:var(--gray-05)}:host(.button--tertiary) .button-native:focus:not([disabled]):not(.no-tab-index){background:transparent;box-shadow:var(--box-shadow-values) var(--color-primary-active)}:host(.button--tertiary) .button-native:active:not([disabled]){background:transparent}:host(.button--tertiary.button--disabled) .button-native{background:transparent}:host(.button--fullwidth){display:block}:host(.button--fullwidth) .button-native{width:100%}:host(.button--fit) .button-native{height:100% !important;width:100% !important}:host .icon-tooltip{position:absolute;border-width:0.5px;border-style:solid;border-color:var(--gray-04);color:var(--color-on-background);background-color:var(--gray-01);font-size:8px;font-weight:var(--font-weight-regular);font-family:var(--font-family-primary);padding:1px 5px;width:max-content;left:0;top:20px;display:none;opacity:0;transition-property:opacity;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}:host(.display-tooltip) .icon-tooltip{display:block}:host(.show-tooltip) .icon-tooltip{opacity:1}:host(.button--icon-only){width:var(--gxg-button-icon-size);height:var(--gxg-button-icon-size)}:host(.button--icon-only) .button-native{padding:0}:host(.large){--gxg-button-icon-size:24px}:host(.large) .button-native{height:var(--spacing-comp-05);font-size:var(--font-size-lg) !important}:host(.button--primary-text-icon.large) .button-native{padding-inline-start:var(--spacing-comp-02);padding-inline-end:var(--spacing-comp-03)}:host(.button--primary-icon-only.large) .button-native{height:var(--spacing-comp-05)}:host(.button--secondary-text-icon.large) .button-native{padding-inline-start:var(--spacing-comp-02);padding-inline-end:var(--spacing-comp-03)}:host(.button--secondary-icon-only.large) .button-native{height:var(--spacing-comp-05)}:host(.button--tertiary.large) .button-native{height:var(--spacing-comp-05)}";
+const buttonCss = "/*! 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}:host{--gxg-button-icon-size:20px;display:inline-block;line-height:0;position:relative}:host .ghost-icon{width:0}:host(.button) .button-native{width:100%;height:100%;--svg-icon-regular-scale:var(\n    --svg-icon-small-scale\n  );position:relative;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;background:var(--color-primary-enabled);border:0;box-shadow:inset 0px 0px 0px 1px transparent;border-radius:var(--border-radius-xs);display:inline-flex;align-items:center;justify-content:center;padding-top:2.5px;padding-right:var(--spacing-comp-03);padding-bottom:2.5px;padding-left:var(--spacing-comp-03);line-height:var(--line-height-regular);transition:background var(--ui-animaton-speed) ease, color var(--ui-animaton-speed) ease, box-shadow var(--ui-animaton-speed) ease;}:host(.button) .button-native:hover:not([disabled]){background:var(--color-primary-hover);cursor:pointer}:host(.button) .button-native:focus:not([disabled]):not(.no-tab-index){background:var(--color-primary-enabled);outline-style:solid;outline-color:var(--gxg-border-color--focused);outline-width:var(--border-width-md);outline-offset:-2px}:host(.button) .button-native:active:not([disabled]){background:var(--color-primary-active)}:host(.button.button--disabled) .button-native{background:var(--color-primary-disabled);color:var(--color-primary-disabled);pointer-events:none}:host(.button.button--disabled){pointer-events:none}:host(.button--primary-text-only) .button-native{color:var(--color-on-primary);padding-inline-start:var(--spacing-comp-04);padding-inline-end:var(--spacing-comp-04)}:host(.button--primary-text-only.button--disabled) .button-native{color:var(--color-on-disabled)}:host(.button--primary-text-icon) .button-native{color:var(--color-on-primary);padding-inline-start:var(--spacing-comp-01);padding-inline-end:var(--spacing-comp-02)}:host(.button--primary-text-icon) .button-native gxg-icon:not(.ghost-icon){padding-inline-end:var(--spacing-comp-01)}:host(.button--primary-text-icon.button--disabled) .button-native{color:var(--color-on-disabled)}:host(.button--primary-icon-only) .button-native{background:var(--color-primary-enabled);color:var(--color-on-primary)}:host(.button--primary-icon-only) .button-native:hover:not([disabled]){background:var(--color-primary-hover);color:var(--color-primary-hover)}:host(.button--primary-icon-only) .button-native:focus:not([disabled]):not(.no-tab-index){background:var(--color-primary-enabled);color:var(--color-primary-hover)}:host(.button--primary-icon-only) .button-native:active:not([disabled]){background:var(--color-primary-active);color:var(--color-on-primary)}:host(.button--primary-icon-only) .button-native:focus{outline:none}:host(.button--secondary-text-only) .button-native{background:transparent;padding-inline-start:var(--spacing-comp-04);padding-inline-end:var(--spacing-comp-04)}:host(.button--secondary-text-only) .button-native:hover:not([disabled]){color:var(--color-primary-hover);background:transparent}:host(.button--secondary-text-only) .button-native:focus:not([disabled]):not(.no-tab-index){color:var(--color-primary-active);background:transparent;box-shadow:var(--box-shadow-values) var(--color-primary-active)}:host(.button--secondary-text-only) .button-native:active:not([disabled]){color:var(--color-primary-active);box-shadow:none}:host(.button--secondary-text-only) .button-native:focus{outline:none}:host(.button--secondary-text-only.button--disabled) .button-native{background:transparent;color:var(--color-primary-disabled)}:host(.button--secondary-text-icon) .button-native{background:transparent;padding-inline-start:0;padding-inline-start:var(--spacing-comp-01);padding-inline-end:var(--spacing-comp-02)}:host(.button--secondary-text-icon) .button-native gxg-icon:not(.ghost-icon){padding-inline-end:var(--spacing-comp-01)}:host(.button--secondary-text-icon) .button-native:hover:not([disabled]){color:var(--color-primary-hover);background:transparent}:host(.button--secondary-text-icon) .button-native:focus:not([disabled]):not(.no-tab-index){color:var(--color-primary-active);background:transparent;box-shadow:var(--box-shadow-values) var(--color-primary-active)}:host(.button--secondary-text-icon) .button-native:active:not([disabled]){color:var(--color-primary-active);box-shadow:none}:host(.button--secondary-text-icon.button--disabled) .button-native{background:transparent;color:var(--color-primary-disabled)}:host(.button--secondary-text-icon.button--disabled) .button-native gxg-icon{--icon-color:var(--color-primary-disabled)}:host(.button--secondary-icon-only) .button-native{background:transparent}:host(.button--secondary-icon-only) .button-native:hover:not([disabled]){background:transparent}:host(.button--secondary-icon-only) .button-native:focus:not([disabled]):not(.no-tab-index){background:transparent}:host(.button--secondary-icon-only) .button-native:active:not([disabled]){background:transparent}:host(.button--secondary-icon-only.button--disabled) .button-native{background:transparent}:host(.button--outlined) .button-native,:host(.button--outlined-text-icon) .button-native{box-shadow:inset 0px 0px 0px 1px var(--color-primary-enabled);background:var(--color-background);padding-inline-start:var(--spacing-comp-04);padding-inline-end:var(--spacing-comp-04)}:host(.button--outlined) .button-native:hover:not([disabled]),:host(.button--outlined-text-icon) .button-native:hover:not([disabled]){color:var(--color-primary-hover);background:var(--color-primary-hover-opacity-01);box-shadow:inset 0px 0px 0px 1px var(--color-primary-hover)}:host(.button--outlined) .button-native:focus:not([disabled]):not(.no-tab-index),:host(.button--outlined-text-icon) .button-native:focus:not([disabled]):not(.no-tab-index){color:var(--color-primary-active);background:transparent;box-shadow:inset 0px 0px 0px 2px var(--color-primary-active)}:host(.button--outlined) .button-native:active:not([disabled]),:host(.button--outlined-text-icon) .button-native:active:not([disabled]){color:var(--color-primary-active);background:transparent;box-shadow:inset 0px 0px 0px 1px var(--color-primary-active)}:host(.button--outlined) .button-native gxg-icon:not(.ghost-icon),:host(.button--outlined-text-icon) .button-native gxg-icon:not(.ghost-icon){padding-inline-end:var(--spacing-comp-01)}:host(.button--outlined.button--disabled) .button-native,:host(.button--outlined-text-icon.button--disabled) .button-native{box-shadow:inset 0px 0px 0px 1px var(--color-primary-disabled);background:var(--color-transparent);color:var(--color-primary-disabled)}:host(.button--outlined-text-icon) .button-native{padding-inline-start:var(--spacing-comp-03)}:host(.button--tertiary) .button-native{background:transparent;padding-inline-end:0;padding-inline-start:0}:host(.button--tertiary) .button-native:hover:not([disabled]){background:transparent}:host(.button--tertiary) .button-native:hover:not([disabled]) gxg-icon{--color-on-background:var(--gray-05)}:host(.button--tertiary) .button-native:focus:not([disabled]):not(.no-tab-index){background:transparent;box-shadow:var(--box-shadow-values) var(--color-primary-active)}:host(.button--tertiary) .button-native:active:not([disabled]){background:transparent}:host(.button--tertiary.button--disabled) .button-native{background:transparent}:host(.button--fullwidth){display:block}:host(.button--fullwidth) .button-native{width:100%}:host(.button--fit) .button-native{height:100% !important;width:100% !important}:host .icon-tooltip{position:absolute;border-width:0.5px;border-style:solid;border-color:var(--gray-04);color:var(--color-on-background);background-color:var(--gray-01);font-size:8px;font-weight:var(--font-weight-regular);font-family:var(--font-family-primary);padding:1px 5px;width:max-content;left:0;top:20px;display:none;opacity:0;transition-property:opacity;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}:host(.display-tooltip) .icon-tooltip{display:block}:host(.show-tooltip) .icon-tooltip{opacity:1}:host(.button--icon-only){width:var(--gxg-button-icon-size);height:var(--gxg-button-icon-size)}:host(.button--icon-only) .button-native{padding:0}:host(.large){--gxg-button-icon-size:24px}:host(.large) .button-native{height:var(--spacing-comp-05);font-size:var(--font-size-lg) !important}:host(.button--primary-text-icon.large) .button-native{padding-inline-start:var(--spacing-comp-02);padding-inline-end:var(--spacing-comp-03)}:host(.button--primary-icon-only.large) .button-native{height:var(--spacing-comp-05)}:host(.button--secondary-text-icon.large) .button-native{padding-inline-start:var(--spacing-comp-02);padding-inline-end:var(--spacing-comp-03)}:host(.button--secondary-icon-only.large) .button-native{height:var(--spacing-comp-05)}:host(.button--tertiary.large) .button-native{height:var(--spacing-comp-05)}";
 
 const GxgButton = class {
   constructor(hostRef) {

package/dist/esm/gxg-combo-box_2.entry.js

@@ -37,7 +37,7 @@ const GxgComboBox = class {
       clearButton: "clear-button",
       toggleButton: "toggle-button",
     };
-    this.setInitialValueTimes = 0;
+    this.componentDidLoadFlag = false;
     /**
      * The presence of this attribute makes the input disabled
      */
@@ -110,7 +110,6 @@ const GxgComboBox = class {
     this.inputTextValue = "";
     this.listIsOpen = false;
     this.inputTextIcon = undefined;
-    this.inputTextIconPosition = null;
     this.noMatch = false;
     this.lastAllowedValue = undefined;
     this.slottedContent = null;
@@ -283,7 +282,7 @@ const GxgComboBox = class {
     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) {
@@ -314,7 +313,6 @@ const GxgComboBox = class {
       return value;
     };
     this.setInitialValue = () => {
-      this.setInitialValueTimes++;
       const firstItem = this.getEnabledItems()[0];
       if (!this.value || this.removedItem !== undefined) {
         if (firstItem) {
@@ -331,6 +329,8 @@ const GxgComboBox = class {
         const item = this.getItemByValue(this.value);
         if (item) {
           this.text = item.innerText;
+          this.inputTextIcon = item.icon;
+          item.selected = true;
         }
         else {
           if (this.strict) {
@@ -372,7 +372,6 @@ const GxgComboBox = class {
     this.clearIcon = () => {
       if (!this.disabled) {
         this.inputTextIcon = null;
-        this.inputTextIconPosition = null;
       }
     };
   }
@@ -381,16 +380,13 @@ const GxgComboBox = class {
       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() {
@@ -406,6 +402,7 @@ const GxgComboBox = class {
   }
   componentDidLoad() {
     this.resizeObserver();
+    this.componentDidLoadFlag = true;
   }
   disconnectedCallback() {
     this.cleanup();
@@ -445,7 +442,7 @@ const GxgComboBox = class {
   }
   itemDidLoadHandler() {
     this.setIndexes();
-    this.setInitialValue();
+    //this.setInitialValue();
   }
   keyDownComboItemHandler(event) {
     event.stopPropagation();
@@ -460,37 +457,39 @@ const GxgComboBox = class {
   /*********************************
   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;
@@ -524,11 +523,9 @@ const GxgComboBox = class {
   setIcon(icon) {
     if (icon) {
       this.inputTextIcon = icon;
-      this.inputTextIconPosition = "start";
     }
     else {
       this.inputTextIcon = null;
-      this.inputTextIconPosition = null;
     }
   }
   focus() {
@@ -598,7 +595,7 @@ const GxgComboBox = class {
         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,
@@ -618,7 +615,7 @@ const GxgComboBox = class {
 };
 GxgComboBox.style = comboBoxCss;
 
-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 = class {
   constructor(hostRef) {
@@ -680,7 +677,7 @@ const GxgComboBoxItem = class {
       return "disabled";
     }
     else if (this.selected) {
-      return "auto";
+      return "primary-enabled";
     }
     else {
       return "auto";

package/dist/esm/gxg-drop-down.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0da01575.js';
 import { s as state } from './store-c2650ca5.js';
 
-const dropDownCss = "/*! 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}:host{display:block}:host .main-container{position:relative}:host .label{font-family:var(--font-family-primary);font-size:var(--font-size-sm);color:var(--color-on-background);margin-bottom:var(--spacing-comp-01);display:inline-block}:host .select-container{background-color:var(--color-background);border-radius:var(--border-radius-sm);border-width:var(--border-width-sm);border-style:solid;border-color:var(--gray-02);height:20px;font-family:var(--font-family-primary);font-size:var(--font-size-sm);display:flex;align-items:center;padding:0 0 0 var(--spacing-comp-01);position:relative;cursor:pointer;color:var(--color-on-background);overflow:hidden;box-sizing:border-box}:host .select-container .icon{margin-left:-4px}:host .select-container.nothing-selected{color:var(--gray-04)}:host .select-container:focus{outline-style:solid;outline-color:var(--color-primary-active);outline-width:var(--border-width-md);outline-offset:-2px}:host .content-container{border-width:var(--border-width-sm);border-style:solid;border-color:var(--gray-02);border-top-width:0;padding:var(--spacing-comp-01);font-family:var(--font-family-primary);font-size:var(--font-size-sm);border-bottom-left-radius:var(--border-radius-sm);border-bottom-right-radius:var(--border-radius-sm);color:var(--color-on-background);overflow-y:auto;position:fixed;width:inherit;box-sizing:border-box;z-index:999;background-color:var(--color-background);display:none;}:host .content-container::-webkit-scrollbar{width:6px;height:6px}:host .content-container::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}:host .content-container::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}:host .content-container::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host .content-container--show{display:block}:host .arrow-down-button{margin-left:auto}:host(.position-top) .content-container{transform:translateY(calc(-100% - 20px));border-top-width:1px;border-bottom-width:0;border-top-left-radius:var(--border-radius-sm);border-top-right-radius:var(--border-radius-sm);border-bottom-left-radius:0;border-bottom-right-radius:0}:host(.large) label{font-size:var(--font-size-lg)}:host(.large) .select-container{font-size:var(--font-size-lg);height:var(--spacing-comp-05)}:host(.large) .select-container:before{top:2px}:host(.large) .select-container:after{top:14px}:host(.large) .content-container{font-size:var(--font-size-lg)}:host(.large.above) .content-container{transform:translateY(calc(-100% - 24px))}";
+const dropDownCss = "/*! 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}:host{display:block}:host .main-container{position:relative}:host .label{font-family:var(--font-family-primary);font-size:var(--font-size-sm);color:var(--color-on-background);margin-bottom:var(--spacing-comp-01);display:inline-block}:host .select-container{background-color:var(--color-background);border-radius:var(--border-radius-sm);border-width:var(--border-width-sm);border-style:solid;border-color:var(--gray-02);height:20px;font-family:var(--font-family-primary);font-size:var(--font-size-sm);display:flex;align-items:center;padding:0 0 0 var(--spacing-comp-01);position:relative;cursor:pointer;color:var(--color-on-background);overflow:hidden;box-sizing:border-box}:host .select-container .icon{margin-left:-4px}:host .select-container.nothing-selected{color:var(--gray-04)}:host .select-container:focus{outline-style:solid;outline-color:var(--gxg-border-color--focused);outline-width:var(--border-width-md);outline-offset:-2px}:host .content-container{border-width:var(--border-width-sm);border-style:solid;border-color:var(--gray-02);border-top-width:0;padding:var(--spacing-comp-01);font-family:var(--font-family-primary);font-size:var(--font-size-sm);border-bottom-left-radius:var(--border-radius-sm);border-bottom-right-radius:var(--border-radius-sm);color:var(--color-on-background);overflow-y:auto;position:fixed;width:inherit;box-sizing:border-box;z-index:999;background-color:var(--color-background);display:none;}:host .content-container::-webkit-scrollbar{width:6px;height:6px}:host .content-container::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}:host .content-container::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}:host .content-container::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host .content-container--show{display:block}:host .arrow-down-button{margin-left:auto}:host(.position-top) .content-container{transform:translateY(calc(-100% - 20px));border-top-width:1px;border-bottom-width:0;border-top-left-radius:var(--border-radius-sm);border-top-right-radius:var(--border-radius-sm);border-bottom-left-radius:0;border-bottom-right-radius:0}:host(.large) label{font-size:var(--font-size-lg)}:host(.large) .select-container{font-size:var(--font-size-lg);height:var(--spacing-comp-05)}:host(.large) .select-container:before{top:2px}:host(.large) .select-container:after{top:14px}:host(.large) .content-container{font-size:var(--font-size-lg)}:host(.large.above) .content-container{transform:translateY(calc(-100% - 24px))}";
 
 const GxgDropDown = class {
   constructor(hostRef) {