@genexus/genexus-ide-ui 0.0.11 → 0.0.13

package/dist/cjs/gx-ide-entity-selector.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-93a6a7e0.js');
 
-const entitySelectorCss = ":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}:host{display:flex;flex-direction:column;color:var(--color-primary-enabled);}:host .container{display:flex;flex-direction:column;gap:30px}:host label{font-size:14px}:host .wrapper{display:inline-flex;align-items:center;gap:var(--spacing-comp-01);border:var(--gxg-border-common-styles);border-radius:var(--border-radius-sm);padding:var(--spacing-comp-01);height:var(--gxg-form-text-height);box-sizing:border-box;background-color:var(--color-background)}:host input{flex:1;border:0;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-size:var(--font-size-lg)}:host input:focus-visible{outline:none}:host(:focus-within) .wrapper{outline-style:solid;outline-color:var(--color-primary-enabled);outline-width:var(--border-width-md);outline-offset:-2px}:host(.gxg-entity-selector--button-has-focus) .wrapper{outline:none}:host([label-position=start]){flex-direction:row}:host([label-position=start]) .wrapper{flex:1}";
+const entitySelectorCss = ":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}:host{display:flex;flex-direction:column;color:var(--color-primary-enabled);}:host .container{display:flex;flex-direction:column;gap:30px}:host label{font-size:14px}:host .wrapper{display:inline-flex;align-items:center;gap:var(--spacing-comp-01);border:var(--gxg-border-common-styles);border-radius:var(--border-radius-sm);padding:var(--spacing-comp-01);height:var(--gxg-form-text-height);box-sizing:border-box;background-color:var(--color-background)}:host input{flex:1;border:0;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-size:var(--font-size-lg)}:host input:focus-visible{outline:none}:host(:focus-within) .wrapper{outline-style:solid;outline-color:var(--color-primary-active);outline-width:var(--border-width-md);outline-offset:-2px}:host(.gxg-entity-selector--button-has-focus) .wrapper{outline:none}:host([label-position=start]){flex-direction:row}:host([label-position=start]) .wrapper{flex:1}";
 
 const GxIdeEntitySelector = class {
   constructor(hostRef) {

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

@@ -0,0 +1,118 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-93a6a7e0.js');
+const locale = require('./locale-c8445ea4.js');
+const formValidation = require('./form-validation-87e3749d.js');
+
+const newEnvironmentCss = ".gxi-hidden{display:none !important}.gxi-full-height{height:100%}.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}: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-right: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-right: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}.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}";
+
+const GxIdeNewEnvironment = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.componentDidRenderEvent = index.createEvent(this, "componentDidRenderEvent", 7);
+    // 7.LISTENERS //
+    // 8.PUBLIC METHODS API //
+    // 9.LOCAL METHODS //
+    this.getFrontEndOptionsValues = () => {
+      const gxOptions = [];
+      const frontEndValues = this.frontEndsEl.getValues();
+      frontEndValues.then(result => {
+        result.forEach(checkbox => {
+          gxOptions.push({
+            id: checkbox.id,
+            checked: checkbox.value,
+            disabled: checkbox.disabled
+          });
+        });
+      });
+      return gxOptions;
+    };
+    this.getRuntimeValue = () => {
+      this.runtimeEl = [];
+      const radioGroupOptions = this.runtimeGroup.querySelectorAll("gxg-form-radio");
+      radioGroupOptions === null || radioGroupOptions === void 0 ? void 0 : radioGroupOptions.forEach(radioGroupOption => {
+        this.runtimeEl.push({
+          id: radioGroupOption.id,
+          checked: radioGroupOption.checked
+        });
+      });
+      return this.runtimeEl;
+    };
+    this.setEnvironmentHandler = async () => {
+      if (this.createCallback) {
+        const newEnvData = {
+          name: this.nameEl.value,
+          runtime: this.getRuntimeValue(),
+          language: this.languageEl.value,
+          dataStores: this.dataStoreEl.value,
+          frontEnds: this.getFrontEndOptionsValues()
+        };
+        const createCallbackPromise = this.createCallback(newEnvData);
+        createCallbackPromise.then(formSubmitResult => {
+          console.log("formSubmitResult", formSubmitResult);
+          formValidation.formSubmitValidation(formSubmitResult, this);
+        });
+      }
+    };
+    this.cancelButtonClickedHandler = async () => {
+      await this.cancelCallback();
+    };
+    this.runtimeEnvironmentChangedHandler = () => {
+      this.changedHandler();
+    };
+    this.languageValueChangedHandler = () => {
+      this.changedHandler();
+    };
+    this.dataStoreValueChangedHandler = () => {
+      this.changedHandler();
+    };
+    /**
+     * @description This function is called when any of the following data is modified: "Runtime Environment", "Data Store", "Language".
+     */
+    this.changedHandler = () => {
+      const newEnvData = {
+        name: this.nameEl.value,
+        runtime: this.getRuntimeValue(),
+        language: this.languageEl.value,
+        dataStores: this.dataStoreEl.value,
+        frontEnds: this.getFrontEndOptionsValues()
+      };
+      this.changedCallback(newEnvData);
+    };
+    this.renderTabBasic = () => {
+      return (index.h("gxg-tab", { tab: "basic", "no-padding": true, flexContainer: true }, index.h("gx-ide-container", { containerTitle: this._componentLocale.runtime, fieldset: true, displayBorderTop: true, displayBorderBottom: true }, index.h("gxg-form-radio-group", { ref: (el) => (this.runtimeGroup = el), row: true, onChange: this.runtimeEnvironmentChangedHandler, slot: "header" }, formValidation.renderFormItems("gxg-form-radio", this.runtimes, "runtime-environment"))), index.h("div", { class: "grid grid--no-gap grid--basic" }, index.h("gx-ide-container", { fieldset: true, noHeadingBorder: true, "container-title": this._componentLocale.tabBasic.backEnd.backEndLabel }, index.h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.tabBasic.backEnd.language, value: this.languages[0]["id"], ref: (el) => (this.languageEl = el), onValueChanged: this.languageValueChangedHandler, part: "language" }, formValidation.renderFormItems("gxg-combo-box-item", this.languages)), index.h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.tabBasic.backEnd.dataStores, value: this.dataStores[0]["id"], ref: (el) => (this.dataStoreEl = el), onValueChanged: this.dataStoreValueChangedHandler, part: "data-store" }, formValidation.renderFormItems("gxg-combo-box-item", this.dataStores))), index.h("gx-ide-container", { fieldset: true, noHeadingBorder: true, "container-title": this._componentLocale.tabBasic.frontEnd.frontEndLabel }, index.h("gxg-form-checkbox-group", { ref: el => (this.frontEndsEl = el) }, formValidation.renderFormItems("gxg-form-checkbox", this.frontEnds))))));
+    };
+    this.renderTabAdvanced = () => {
+      return (index.h("gxg-tab", { tab: "advanced", "no-padding": true }, index.h("gx-ide-container", { displayBorderTop: true }, index.h("slot", { name: "property-grid" }))));
+    };
+    this.hideTopBar = false;
+    this.dataStores = undefined;
+    this.frontEnds = undefined;
+    this.disableAdvanced = false;
+    this.setAsTarget = true;
+    this.runtimes = undefined;
+    this.languages = undefined;
+    this.environmentName = undefined;
+    this.createCallback = undefined;
+    this.cancelCallback = undefined;
+    this.changedCallback = undefined;
+  }
+  // 6.COMPONENT LIFECYCLE EVENTS //
+  async componentWillLoad() {
+    this._componentLocale = await locale.Locale.getComponentStrings(this.el);
+  }
+  componentDidRender() {
+    this.componentDidRenderEvent.emit(this._componentLocale.componentName);
+  }
+  // 10.RENDER() FUNCTION //
+  render() {
+    return (index.h(index.Host, { class: "gx-ide-component" }, !this.hideTopBar ? (index.h("gx-ide-top-bar", { topBarTitle: this._componentLocale.componentName })) : null, index.h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, index.h("gx-ide-container", null, index.h("header", { class: "header grid" }, index.h("gxg-label", { labelPosition: "start" }, this._componentLocale.name), index.h("gxg-form-text", { "label-position": "start", placeholder: "NewEnvironment", "max-width": "100%", value: this.environmentName, ref: (el) => (this.nameEl = el), part: "environment-name" }))), index.h("main", { class: "gxi-full-height" }, index.h("gxg-tabs", { height: "100%", position: "top", class: "gxg-tabs" }, index.h("gxg-tab-bar", { slot: "tab-bar-container" }, index.h("gxg-tab-button", { slot: "tab-bar", "tab-label": this._componentLocale.tabBasic.tabLabel, tab: "basic", "is-selected": true }), index.h("gxg-tab-button", { slot: "tab-bar", "tab-label": this._componentLocale.tabAdvanced.tabLabel, tab: "advanced", disabled: this.disableAdvanced })), this.renderTabBasic(), this.renderTabAdvanced())), index.h("gx-ide-container", { displayBorderTop: true }, index.h("gxg-form-checkbox", { label: this._componentLocale.setCurrentEnvironment, id: "show-current-environment", checked: this.setAsTarget, slot: "footer-start" }), index.h("gxg-button", { id: "button-create", slot: "footer-end", type: "primary-text-only", onClick: this.setEnvironmentHandler, part: "gxg-button gxg-button--create" }, this._componentLocale.footer.btnSetNewEnvironment), index.h("gxg-button", { id: "button-cancel", slot: "footer-end", type: "outlined", onClick: this.cancelButtonClickedHandler, part: "gxg-button gxg-button--cancel" }, this._componentLocale.footer.btnCancel)))));
+  }
+  static get assetsDirs() { return ["gx-ide-assets/new-environment"]; }
+  get el() { return index.getElement(this); }
+};
+GxIdeNewEnvironment.style = newEnvironmentCss;
+
+exports.gx_ide_new_environment = GxIdeNewEnvironment;

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

@@ -4,56 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-93a6a7e0.js');
 const locale = require('./locale-c8445ea4.js');
+const formValidation = require('./form-validation-87e3749d.js');
 
-/* STENCIL IMPORTS */
-const renderFormItems = (componentType = "gxg-combo-box-item", options, group = "undefined-group", callback) => {
-  if (options.length) {
-    const items = [];
-    options.forEach(option => {
-      let item;
-      switch (componentType) {
-        case "gxg-form-checkbox":
-          item = (index.h("gxg-form-checkbox", { checkboxId: option.id, checked: option.checked, disabled: option.disabled, label: option.label, value: option.value, onChange: callback ? callback : null, iconName: option.iconName, part: `${group}-${option.id}` }));
-          items.push(item);
-          break;
-        case "gxg-combo-box-item":
-          item = (index.h("gxg-combo-box-item", { value: option.id, icon: option.iconName, part: `${group}-${option.id}` }, option.label));
-          items.push(item);
-          break;
-        case "gxg-form-radio":
-          item = (index.h("gxg-form-radio", { "radio-id": option.id, checked: option.checked, disabled: option.disabled, label: option.label, value: option.value, name: group, part: `${group}-${option.id}` }));
-          items.push(item);
-          break;
-      }
-    });
-    return items;
-  }
-  return null;
-};
-/**
- *
- * @param gxgOptions An array of GxgOptions's
- * @returns The first option in the array that is 'selected'. If no one found it returns null.
- */
-const getSelectedGxgOption = (gxgOptions) => {
-  let found;
-  if (gxgOptions === null || gxgOptions === void 0 ? void 0 : gxgOptions.length) {
-    for (let i = 0; i < gxgOptions.length; i++) {
-      if (gxgOptions[i].selected) {
-        found = gxgOptions[i];
-        break;
-      }
-    }
-  }
-  return found;
-};
-
-const newKbCss = ".gxi-hidden{display:none !important}.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}:host{display:block;border:1px solid var(--gxg-border-color--regular);background-color:var(--color-background)}.header{grid-template-columns:auto 1fr min-content;grid-template-areas:\"kb-label kb-input .\" \"location-label location-input location-icon\"}.header .kb-input{grid-area:kb-input}.header .kb-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}.knowledge-base-storage{grid-template-areas:\"knowledge-base-storage__col-left knowledge-base-storage__col-right\";grid-template-columns:repeat(2, 1fr);gap:0}.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:last baseline}.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:last baseline}.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\"}";
+const newKbCss = ".gxi-hidden{display:none !important}.gxi-full-height{height:100%}.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}: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-right: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-right:2px}:host{display:block;border:1px solid var(--gxg-border-color--regular);background-color:var(--color-background)}.header{grid-template-columns:auto 1fr min-content;grid-template-areas:\"kb-label kb-input .\" \"location-label location-input location-icon\"}.header .kb-input{grid-area:kb-input}.header .kb-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:center}.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:center}.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\"}";
 
 const GxIdeNewKb = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.componentDidLoadEvent = index.createEvent(this, "componentDidLoadEvent", 7);
+    this.componentDidRenderEvent = index.createEvent(this, "componentDidRenderEvent", 7);
     /**
      * An object with the initial value for each multi-option element.
      */
@@ -66,13 +24,16 @@ const GxIdeNewKb = class {
       collations: null,
       authenticationTypes: null
     };
+    // 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 = getSelectedGxgOption(this[property]);
+          const selectedOption = formValidation.getSelectedGxOption(this[property]);
           const value = (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.selected)
             ? selectedOption.id
             : null;
@@ -82,9 +43,6 @@ const GxIdeNewKb = class {
         });
       }
     };
-    // 7.LISTENERS //
-    // 8.PUBLIC METHODS API //
-    // 9.LOCAL METHODS //
     /**
      * @description If Server Name first option is selected, "Create Data in Knowledge Base Folder" should be disabled
      */
@@ -135,40 +93,31 @@ const GxIdeNewKb = class {
         }
       });
     };
-    this.getFrontEndsOptionsValues = () => {
-      this.frontEndsOptionsArray = [];
-      const frontEndsOptions = this.frontEndsBoxEl.querySelectorAll("gxg-form-checkbox");
-      frontEndsOptions === null || frontEndsOptions === void 0 ? void 0 : frontEndsOptions.forEach(frontEndsOption => {
-        this.frontEndsOptionsArray.push({
-          id: frontEndsOption.id,
-          checked: frontEndsOption.checked
+    this.getFrontEndOptionsValues = () => {
+      const gxOptions = [];
+      const frontEndValues = this.frontEndsEl.getValues();
+      frontEndValues.then(result => {
+        result.forEach(checkbox => {
+          gxOptions.push({
+            id: checkbox.id,
+            checked: checkbox.value,
+            disabled: checkbox.disabled
+          });
         });
       });
-      return this.frontEndsOptionsArray;
-    };
-    this.validation = (result) => {
-      result.forEach(item => {
-        const key = Object.entries(item)[0];
-        const reference = this[`${Object.keys(item)[0]}El`];
-        const status = key[1].status;
-        const message = key[1].message;
-        if (reference && status && message) {
-          reference.validationStatus = status;
-          reference.validationMessage = message;
-        }
-      });
+      return gxOptions;
     };
     this.createKbHandler = () => {
       var _a, _b, _c;
-      if (this.onCreate) {
-        const onCreatePromise = this.onCreate({
+      if (this.createCallback) {
+        const createCallbackPromise = this.createCallback({
           kbName: this.kbNameEl.value,
           kbLocation: this.locationEl.value,
           prototypingTarget: this.prototypingTargetEl.value,
           userInterfaceLanguage: this.userInterfaceLanguageEl.value,
           prototypingEnvironment: this.prototypingEnvironmentEl.value,
           dataSource: this.dataSourceEl.value,
-          frontEnds: this.getFrontEndsOptionsValues(),
+          frontEnds: this.getFrontEndOptionsValues(),
           serverName: this.serverNameEl.value,
           databaseName: this.databaseNameEl.value,
           collation: this.collationEl.value,
@@ -178,30 +127,35 @@ const GxIdeNewKb = class {
           password: (_b = this.passwordEl) === null || _b === void 0 ? void 0 : _b.value,
           savePassword: (_c = this.savePasswordEl) === null || _c === void 0 ? void 0 : _c.checked
         });
-        onCreatePromise.then(result => {
-          this.validation(result);
+        createCallbackPromise.then(formSubmitResult => {
+          formValidation.formSubmitValidation(formSubmitResult, this);
         });
       }
     };
     this.cancelKbHandler = () => {
-      if (this.onCancelHandler) {
-        this.onCancelHandler();
+      if (this.cancelCallback) {
+        this.cancelCallback();
       }
     };
     // 10.RENDER() FUNCTION //
     this.renderTabBasic = () => {
       var _a, _b, _c, _d;
-      return (index.h("gxg-tab", { tab: "basic", "no-padding": true }, index.h("gxg-container", { displayBorderTop: true, displayBorderBottom: true }, index.h("div", { class: "grid basic-row-first" }, index.h("gxg-combo-box", { disabled: !this.isAdvanced, 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), class: "prototyping-target", part: "prototyping-target" }, renderFormItems("gxg-combo-box-item", this.prototypingTargets, "prototyping-target")), index.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")))), index.h("div", { class: "grid basic-row-second" }, index.h("gxg-container", { fieldset: true, displayBorderEnd: true, noHeadingBorder: true, containerTitle: this._componentLocale.tabBasic.backEnd.backEndLabel }, index.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), class: "prototyping-environment", part: "prototyping-environment" }, renderFormItems("gxg-combo-box-item", this.prototypingEnvironments, "prototyping-environment")), index.h("gxg-combo-box", { label: this._componentLocale.tabBasic.backEnd.dataSource, disableFilter: true, value: (_d = this._initialComboValue["dataSources"]) !== null && _d !== void 0 ? _d : this.dataSources[0].id, ref: (el) => (this.dataSourceEl = el), class: "data-source", part: "data-source" }, renderFormItems("gxg-combo-box-item", this.dataSources, "data-source"))), index.h("gxg-container", { fieldset: true, noHeadingBorder: true, containerTitle: this._componentLocale.tabBasic.frontEnd.frontEndLabel, ref: el => (this.frontEndsBoxEl = el) }, renderFormItems("gxg-form-checkbox", this.frontEnds, "front-end")))));
+      return (index.h("gxg-tab", { tab: "basic", "no-padding": true, flexContainer: true }, index.h("gx-ide-container", { displayBorderTop: true, displayBorderBottom: true }, index.h("div", { class: "grid basic-row-first" }, index.h("gxg-combo-box", { disabled: !this.isAdvanced, 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), class: "prototyping-target", part: "prototyping-target" }, formValidation.renderFormItems("gxg-combo-box-item", this.prototypingTargets, "prototyping-target")), index.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" }, formValidation.renderFormItems("gxg-combo-box-item", this.userInterfaceLanguages, "user-interface-language")))), index.h("div", { class: "grid basic-row-second" }, index.h("gx-ide-container", { fieldset: true, noHeadingBorder: true, containerTitle: this._componentLocale.tabBasic.backEnd.backEndLabel }, index.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), class: "prototyping-environment", part: "prototyping-environment" }, formValidation.renderFormItems("gxg-combo-box-item", this.prototypingEnvironments, "prototyping-environment")), index.h("gxg-combo-box", { label: this._componentLocale.tabBasic.backEnd.dataSource, disableFilter: true, value: (_d = this._initialComboValue["dataSources"]) !== null && _d !== void 0 ? _d : this.dataSources[0].id, ref: (el) => (this.dataSourceEl = el), class: "data-source", part: "data-source" }, formValidation.renderFormItems("gxg-combo-box-item", this.dataSources, "data-source"))), index.h("gx-ide-container", { fieldset: true, noHeadingBorder: true, containerTitle: this._componentLocale.tabBasic.frontEnd.frontEndLabel }, index.h("gxg-form-checkbox-group", { ref: el => (this.frontEndsEl = el) }, formValidation.renderFormItems("gxg-form-checkbox", this.frontEnds, "front-end"))))));
     };
     this.renderTabAdvanced = () => {
       var _a, _b, _c;
-      return (index.h("gxg-tab", { tab: "advanced", "no-padding": true }, index.h("gxg-container", { displayBorderTop: true, displayBorderBottom: true, containerTitle: this._componentLocale.tabAdvanced.tabTitle }), index.h("div", { class: "grid knowledge-base-storage" }, index.h("gxg-container", { fieldset: true, displayBorderEnd: true }, index.h("div", { class: "grid knowledge-base-storage__col-left" }, index.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")), index.h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/search", class: "server-name-button", part: "search-server-name" }), index.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" }), index.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")), index.h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/reset", class: "collation-button", part: "reset-collation" }), index.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" }))), index.h("gxg-container", { fieldset: true, noHeadingBorder: true }, index.h("div", { class: {
+      return (index.h("gxg-tab", { tab: "advanced", "no-padding": true, flexContainer: true }, index.h("gx-ide-container", { displayBorderTop: true, displayBorderBottom: true, containerTitle: this._componentLocale.tabAdvanced.tabTitle }), index.h("div", { class: "grid knowledge-base-storage" }, index.h("gx-ide-container", { fieldset: true }, index.h("div", { class: "grid knowledge-base-storage__col-left" }, index.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 }, formValidation.renderFormItems("gxg-combo-box-item", this.serverNames, "server-name")), index.h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/search", class: "server-name-button", part: "search-server-name" }), index.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" }), index.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" }, formValidation.renderFormItems("gxg-combo-box-item", this.collations, "collation")), index.h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/reset", class: "collation-button", part: "reset-collation" }), index.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" }))), index.h("gx-ide-container", { fieldset: true, noHeadingBorder: true }, index.h("div", { class: {
           "grid": true,
           "knowledge-base-storage__col-right": true,
           "knowledge-base-storage__col-right--windows-authentication": !this.userNameVisible
-        } }, index.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 ? (index.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 ? (index.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 ? (index.h("gxg-form-checkbox", { label: this._componentLocale.tabAdvanced.savePassword, ref: (el) => (this.savePasswordEl = el), checked: this.savePassword, class: "save-password", part: "save-password" })) : null)))));
+        } }, index.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 }, formValidation.renderFormItems("gxg-combo-box-item", this.authenticationTypes, "authentication-type")), this.userNameVisible ? (index.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 ? (index.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 ? (index.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;
+    this.passwordVisible = true;
+    this.savePasswordVisible = true;
+    this.hideTopBar = false;
     this.dataSources = undefined;
     this.frontEnds = undefined;
     this.isAdvanced = false;
@@ -220,31 +174,26 @@ const GxIdeNewKb = class {
     this.serverNames = undefined;
     this.userName = undefined;
     this.test = undefined;
-    this.onCreate = undefined;
-    this.onCancelHandler = undefined;
-    this.createDataInKbDisabled = false;
-    this.userNameVisible = true;
-    this.passwordVisible = true;
-    this.savePasswordVisible = true;
+    this.createCallback = undefined;
+    this.cancelCallback = undefined;
   }
-  // 6.METHODS //
+  // 6.COMPONENT LIFECYCLE METHODS //
   async componentWillLoad() {
     this._componentLocale = await locale.Locale.getComponentStrings(this.el);
     this.setInitialValues();
     this.evaluateCreateDataInKbDisabled(null);
     this.evaluateAuthenticationType(null);
   }
-  componentDidLoad() {
-    this.kbNameEl.focus();
+  componentDidRender() {
+    this.componentDidRenderEvent.emit(this._componentLocale.componentName);
   }
   /** *****************************
    *  11.RENDER() FUNCTION
    ********************************/
   render() {
-    return (index.h(index.Host, { class: { "gx-ide-component": true } }, index.h("div", { class: `main-wrapper` }, index.h("gxg-container", null, index.h("header", { class: "header grid" }, index.h("gxg-label", { labelPosition: "start", class: "kb-label" }, this._componentLocale.header.kbName), index.h("gxg-form-text", { labelPosition: "start", placeholder: "SalesInventory", "max-width": "100%", value: this.kbName, ref: (el) => (this.kbNameEl = el), part: "kb-name", class: "kb-input" }), index.h("gxg-label", { labelPosition: "start", class: "location-label" }, this._componentLocale.header.kbLocation), index.h("gxg-form-text", { labelPosition: "start", placeholder: "C:\\Models", maxWidth: "100%", value: this.kbLocation, ref: (el) => (this.locationEl = el), disabled: !this.isAdvanced, part: "kb-location", class: "location-input" }), index.h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/folder", onClick: this.selectLocationHandler, part: "button-select-location", class: "location-icon" }))), index.h("header", { class: {
-        "header": true,
-        "header--no-location-folder": !this.selectLocationCallback
-      } }), index.h("main", { class: "main" }, index.h("gxg-tabs", { height: "100%", position: "top", class: "gxg-tabs" }, index.h("gxg-tab-bar", { slot: "tab-bar-container", part: "tab-bar" }, index.h("gxg-tab-button", { slot: "tab-bar", tabLabel: this._componentLocale.tabBasic.tabLabel, tab: "basic", "is-selected": true, part: "tab-button-basic" }), index.h("gxg-tab-button", { slot: "tab-bar", tabLabel: this._componentLocale.tabAdvanced.tabLabel, tab: "advanced", disabled: !this.isAdvanced, part: "tab-button-advanced" })), this.renderTabBasic(), this.renderTabAdvanced(), index.h("gxg-container", { displayBorderTop: true }, index.h("gxg-button", { id: "button-create", slot: "footer", type: "primary-text-only", onClick: this.createKbHandler, part: "button-create" }, this._componentLocale.footer.btnCreate), index.h("gxg-button", { id: "button-cancel", slot: "footer", type: "outlined", onClick: this.cancelKbHandler, part: "button-cancel" }, this._componentLocale.footer.btnCancel)))))));
+    return (index.h(index.Host, { class: "gx-ide-component" }, !this.hideTopBar ? (index.h("gx-ide-top-bar", { topBarTitle: this._componentLocale.componentName })) : null, index.h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, index.h("gx-ide-container", null, index.h("header", { class: "header grid" }, index.h("gxg-label", { labelPosition: "start", class: "kb-label" }, this._componentLocale.header.kbName), index.h("gxg-form-text", { labelPosition: "start", placeholder: "SalesInventory", "max-width": "100%", value: this.kbName, ref: (el) => (this.kbNameEl = el), part: "kb-name", class: "kb-input" }), index.h("gxg-label", { labelPosition: "start", class: "location-label" }, this._componentLocale.header.kbLocation), index.h("gxg-form-text", { labelPosition: "start", placeholder: "C:\\Models", maxWidth: "100%", value: this.kbLocation, ref: (el) => (this.locationEl = el), disabled: !this.isAdvanced, part: "kb-location", class: "location-input" }), index.h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/folder", onClick: this.selectLocationHandler, part: "button-select-location", class: "location-icon" }))), index.h("main", { class: "gxi-full-height" }, index.h("gxg-tabs", { height: "100%", position: "top", class: "gxg-tabs" }, index.h("gxg-tab-bar", { slot: "tab-bar-container", part: "tab-bar" }, index.h("gxg-tab-button", { slot: "tab-bar", tabLabel: this._componentLocale.tabBasic.tabLabel, tab: "basic", "is-selected": true, part: "tab-button-basic" }), index.h("gxg-tab-button", { slot: "tab-bar", tabLabel: this._componentLocale.tabAdvanced.tabLabel, tab: "advanced",
+      // disabled={!this.isAdvanced}
+      part: "tab-button-advanced" })), this.renderTabBasic(), this.renderTabAdvanced())), index.h("gx-ide-container", { displayBorderTop: true }, index.h("gxg-button", { id: "button-create", type: "primary-text-only", onClick: this.createKbHandler, part: "button-create", slot: "footer-end" }, this._componentLocale.footer.btnCreate), index.h("gxg-button", { id: "button-cancel", type: "outlined", onClick: this.cancelKbHandler, part: "button-cancel", slot: "footer-end" }, this._componentLocale.footer.btnCancel)))));
   }
   static get assetsDirs() { return ["gx-ide-assets/new-kb"]; }
   get el() { return index.getElement(this); }

package/dist/cjs/gx-ide-template.cjs.entry.js

@@ -5,28 +5,27 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-93a6a7e0.js');
 const locale = require('./locale-c8445ea4.js');
 
-const templateCss = ".gxi-hidden{display:none !important}.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}:host{display:block}";
+const templateCss = ".gxi-hidden{display:none !important}.gxi-full-height{height:100%}.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}: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-right: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-right:2px}:host{display:block}";
 
 const GxIdeTemplate = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.componentDidLoadEvent = index.createEvent(this, "componentDidLoadEvent", 7);
-    // 7.LISTENERS //
-    // 8.PUBLIC METHODS API //
-    // 9.LOCAL METHODS //
-    this.renderPresentation = () => {
-      return locale.Locale.format(this._componentLocale.presentation, [this.firstName]);
-    };
-    this.firstName = undefined;
+    this.componentDidRenderEvent = index.createEvent(this, "componentDidRenderEvent", 7);
+    this.hideTopBar = false;
   }
-  // 6.METHODS //
+  // 6.COMPONENT LIFECYCLE METHODS //
   async componentWillLoad() {
     this._componentLocale = await locale.Locale.getComponentStrings(this.el);
-    this.componentDidLoadEvent.emit(true);
   }
+  componentDidRender() {
+    this.componentDidRenderEvent.emit(this._componentLocale.componentName);
+  }
+  // 7.LISTENERS //
+  // 8.PUBLIC METHODS API //
+  // 9.LOCAL METHODS //
   // 10.RENDER() FUNCTION //
   render() {
-    return (index.h(index.Host, { class: { "gx-ide-component": true } }, index.h("p", null, this.renderPresentation())));
+    return (index.h(index.Host, { class: "gx-ide-component" }, !this.hideTopBar ? (index.h("gx-ide-top-bar", { topBarTitle: this._componentLocale.componentName })) : null, index.h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, index.h("gx-ide-container", { fullHeight: true, "container-title": "Header Title" }, index.h("p", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis natus nam, veritatis aspernatur consequatur omnis blanditiis! Praesentium, ex labore? Odit, officiis eius rerum pariatur ea dicta possimus perferendis molestiae sunt!q"), index.h("gxg-form-text", { label: "Name", placeholder: "Elon Musk", labelPosition: "start", centerLabel: true }), index.h("gxg-button", { slot: "footer" }, "Create")))));
   }
   static get assetsDirs() { return ["gx-ide-assets/template"]; }
   get el() { return index.getElement(this); }

package/dist/cjs/gxg-breadcrumb.cjs.entry.js

@@ -12,7 +12,6 @@ const GxgBreadcrumb = class {
     this.breadcrumbClicked = index.createEvent(this, "breadcrumbClicked", 7);
   }
   breadcrumbClickedFunc() {
-    parseInt(this.el.getAttribute("data-index"), 10);
     this.breadcrumbClicked.emit({
       id: this.id,
     });

package/dist/cjs/gxg-button-group.cjs.entry.js

@@ -13,7 +13,7 @@ const GxgButtonGroup = class {
     /**
     The button group title alignment
     */
-    this.titleAlignment = "left";
+    this.titleAlignment = "start";
     /**
     Wether the button group is disabled or not
     */

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

@@ -6,7 +6,7 @@ const index = require('./index-93a6a7e0.js');
 const store = require('./store-49485138.js');
 const exportParts = require('./export-parts-931a23ad.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}: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-enabled);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}: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 GxgButton = class {
   constructor(hostRef) {
@@ -95,7 +95,7 @@ const GxgButton = class {
     if (this.type !== "primary-text-only" &&
       this.type !== "secondary-text-only" &&
       this.icon !== undefined) {
-      return (index.h("gxg-icon", { type: this.icon, color: this.iconColor(), size: this.iconSize() }));
+      return (index.h("gxg-icon", { type: this.icon, color: this.iconColor(), size: this.iconSize(), part: "icon" }));
     }
   }
   iconSize() {