@genexus/genexus-ide-ui 0.0.45 → 0.0.47

package/dist/collection/components/new-kb/new-kb.js

@@ -6,52 +6,23 @@ import { renderFormItems, getSelectedGxOption } from "../../common/common";
 import { formSubmitValidation } from "../../common/form-validation";
 export class GxIdeNewKb {
   constructor() {
-    /**
-     * An object with the initial value for each multi-option element.
-     */
-    this._initialComboValue = {
-      prototypingTargets: null,
-      userInterfaceLanguages: null,
-      prototypingEnvironments: null,
-      defaultDataSources: null,
-      serverNames: null,
-      collations: null,
-      authenticationTypes: null
-    };
-    /* Used to evaluate what front end options need to be updated on 'getFrontEndsCallback'*/
-    this.previousFrontEndsState = [];
     // 7.LISTENERS //
     // 8.PUBLIC METHODS API //
     // 9.LOCAL METHODS //
-    /**
-     * Set the initial/selected option for multi-option components
-     */
-    this.setInitialValues = () => {
-      if (this._initialComboValue) {
-        Object.keys(this._initialComboValue).forEach(property => {
-          const selectedOption = getSelectedGxOption(this[property]);
-          const value = (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.selected)
-            ? selectedOption.id
-            : null;
-          if (value) {
-            this._initialComboValue[property] = value;
-          }
-        });
-      }
-    };
     /**
      * @description If Server Name first option is selected, "Create Data in Knowledge Base Folder" should be disabled
      */
     this.evaluateCreateDataInKbDisabled = (e) => {
+      var _a, _b;
       if (e) {
-        if (this.serverNames[0].id === e.detail) {
+        if (((_a = this.serverNames[0]) === null || _a === void 0 ? void 0 : _a.id) === e.detail) {
           this.createDataInKbDisabled = true;
         }
         else {
           this.createDataInKbDisabled = false;
         }
       }
-      else if (this.serverNames[0].selected) {
+      else if ((_b = this.serverNames[0]) === null || _b === void 0 ? void 0 : _b.selected) {
         this.createDataInKbDisabled = true;
       }
     };
@@ -115,23 +86,18 @@ export class GxIdeNewKb {
         const updatedFrontEndsPromise = this.getFrontEndsCallback(selectedPrototypingEnvironmentId);
         updatedFrontEndsPromise
           .then(newFrontEndsOptions => {
-          if ((newFrontEndsOptions === null || newFrontEndsOptions === void 0 ? void 0 : newFrontEndsOptions.length) > 0) {
-            let newFrontEndOptionIndex;
-            const updatedFrontEnds = [];
-            this.previousFrontEndsState.forEach(prevFrontEndOption => {
-              const optionFound = newFrontEndsOptions.find((newFrontEndOption, index) => {
-                newFrontEndOptionIndex = index;
-                return newFrontEndOption.id === prevFrontEndOption.id;
-              });
-              if (optionFound) {
-                updatedFrontEnds.push(newFrontEndsOptions[newFrontEndOptionIndex]);
-              }
-              else {
-                updatedFrontEnds.push(prevFrontEndOption);
-              }
+          const updatedFrontEnds = [];
+          newFrontEndsOptions.forEach(newFrontEnd => {
+            const foundActualFrontEnd = this.frontEnds.find(actualFrontEnd => {
+              return newFrontEnd.id === actualFrontEnd.id;
             });
-            this.frontEnds = updatedFrontEnds;
-          }
+            if (foundActualFrontEnd) {
+              // update newFrontEnd checked status with actual frontEnd checked status
+              newFrontEnd.checked = foundActualFrontEnd.checked;
+            }
+            updatedFrontEnds.push(newFrontEnd);
+          });
+          this.frontEnds = updatedFrontEnds;
         })
           .catch(() => {
           // to do
@@ -195,17 +161,37 @@ export class GxIdeNewKb {
     };
     // 10.RENDER() FUNCTION //
     this.renderTabBasic = () => {
-      var _a, _b, _c, _d;
-      return (h("gxg-tab", { tab: "basic", "no-padding": true, flexContainer: true }, h("gx-ide-container", { displayBorderBottom: true }, h("div", { class: "grid basic-row-first" }, h("gxg-combo-box", { disableFilter: true, label: this._componentLocale.tabBasic.prototypingTarget, value: (_a = this._initialComboValue["prototypingTargets"]) !== null && _a !== void 0 ? _a : this.prototypingTargets[0].id, ref: (el) => (this.prototypingTargetEl = el), onValueChanged: this.prototypingTargetValueChangedHandler, class: "prototyping-target", part: "prototyping-target" }, renderFormItems("gxg-combo-box-item", this.prototypingTargets, "prototyping-target")), h("gxg-combo-box", { disableFilter: true, label: this._componentLocale.tabBasic.userInterfaceLanguage, value: (_b = this._initialComboValue["userInterfaceLanguages"]) !== null && _b !== void 0 ? _b : this.userInterfaceLanguages[0].id, ref: (el) => (this.userInterfaceLanguageEl = el), class: "user-interface-language", part: "user-interface-language" }, renderFormItems("gxg-combo-box-item", this.userInterfaceLanguages, "user-interface-language")))), h("div", { class: "grid basic-row-second" }, h("gx-ide-container", { noHeadingBorder: true, containerTitle: this._componentLocale.tabBasic.backEnd.backEndLabel }, h("gxg-combo-box", { disableFilter: true, label: this._componentLocale.tabBasic.backEnd.prototypingEnvironment, value: (_c = this._initialComboValue["prototypingEnvironments"]) !== null && _c !== void 0 ? _c : this.prototypingEnvironments[0].id, ref: (el) => (this.prototypingEnvironmentEl = el), onValueChanged: this.prototypingEnvironmentValueChangedHandler, class: "prototyping-environment", part: "prototyping-environment" }, renderFormItems("gxg-combo-box-item", this.prototypingEnvironments, "prototyping-environment")), h("gxg-combo-box", { label: this._componentLocale.tabBasic.backEnd.dataSource, disableFilter: true, value: (_d = this._initialComboValue["defaultDataSources"]) !== null && _d !== void 0 ? _d : this.defaultDataSources[0].id, ref: (el) => (this.dataSourceEl = el), class: "data-source", part: "data-source" }, renderFormItems("gxg-combo-box-item", this.defaultDataSources, "data-source"))), h("gx-ide-container", { noHeadingBorder: true, containerTitle: this._componentLocale.tabBasic.frontEnd.frontEndLabel }, h("gxg-form-checkbox-group", { ref: el => (this.frontEndsEl = el) }, renderFormItems("gxg-form-checkbox", this.frontEnds, "front-end"))))));
+      return (h("gxg-tab", { tab: "basic", "no-padding": true, flexContainer: true }, h("gx-ide-container", { displayBorderBottom: true }, h("div", { class: "grid basic-row-first" }, h("gxg-combo-box", { disableFilter: true, label: this._componentLocale.tabBasic.prototypingTarget.label, value: getSelectedGxOption(this.prototypingTargets), ref: (el) => (this.prototypingTargetEl = el), disabled: this.prototypingTargets.length === 0, placeholder: this.prototypingTargets.length === 0
+          ? this._componentLocale.tabBasic.prototypingTarget
+            .disabledPlaceholder
+          : "", onValueChanged: this.prototypingTargetValueChangedHandler, class: "prototyping-target", part: "prototyping-target" }, renderFormItems("gxg-combo-box-item", this.prototypingTargets, "prototyping-target")), h("gxg-combo-box", { disableFilter: true, label: this._componentLocale.tabBasic.userInterfaceLanguage.label, value: getSelectedGxOption(this.userInterfaceLanguages), placeholder: this.userInterfaceLanguages.length === 0
+          ? this._componentLocale.tabBasic.userInterfaceLanguage
+            .disabledPlaceholder
+          : "", disabled: this.userInterfaceLanguages.length === 0, ref: (el) => (this.userInterfaceLanguageEl = el), class: "user-interface-language", part: "user-interface-language" }, renderFormItems("gxg-combo-box-item", this.userInterfaceLanguages, "user-interface-language")))), h("div", { class: "grid basic-row-second" }, h("gx-ide-container", { noHeadingBorder: true, containerTitle: this._componentLocale.tabBasic.backEnd.backEndLabel }, h("gxg-combo-box", { disableFilter: true, label: this._componentLocale.tabBasic.backEnd.prototypingEnvironment
+          .label, value: getSelectedGxOption(this.prototypingEnvironments), placeholder: this.prototypingEnvironments.length === 0
+          ? this._componentLocale.tabBasic.backEnd
+            .prototypingEnvironment.disabledPlaceholder
+          : "", disabled: this.prototypingEnvironments.length === 0, ref: (el) => (this.prototypingEnvironmentEl = el), onValueChanged: this.prototypingEnvironmentValueChangedHandler, class: "prototyping-environment", part: "prototyping-environment" }, renderFormItems("gxg-combo-box-item", this.prototypingEnvironments, "prototyping-environment")), h("gxg-combo-box", { label: this._componentLocale.tabBasic.backEnd.dataSource.label, disableFilter: true, value: getSelectedGxOption(this.defaultDataSources), placeholder: this.defaultDataSources.length === 0
+          ? this._componentLocale.tabBasic.backEnd.dataSource
+            .disabledPlaceholder
+          : "", disabled: this.defaultDataSources.length === 0, ref: (el) => (this.dataSourceEl = el), class: "data-source", part: "data-source" }, renderFormItems("gxg-combo-box-item", this.defaultDataSources, "data-source"))), h("gx-ide-container", { noHeadingBorder: true, containerTitle: this._componentLocale.tabBasic.frontEnd.frontEndLabel }, h("gxg-form-checkbox-group", { ref: el => (this.frontEndsEl = el) }, renderFormItems("gxg-form-checkbox", this.frontEnds, "front-end"))))));
     };
     this.renderTabAdvanced = () => {
-      var _a, _b, _c;
-      return (h("gxg-tab", { tab: "advanced", "no-padding": true, flexContainer: true }, h("gx-ide-container", { displayBorderTop: true, displayBorderBottom: true, containerTitle: this._componentLocale.tabAdvanced.tabTitle }), h("div", { class: "grid knowledge-base-storage" }, h("gx-ide-container", null, h("div", { class: "grid knowledge-base-storage__col-left" }, h("gxg-combo-box", { label: this._componentLocale.tabAdvanced.serverName, disableFilter: true, value: (_a = this._initialComboValue["serverNames"]) !== null && _a !== void 0 ? _a : this.serverNames[0].id, ref: (el) => (this.serverNameEl = el), class: "server-name-combo-box", part: "server-name", onValueChanged: this.evaluateCreateDataInKbDisabled }, renderFormItems("gxg-combo-box-item", this.serverNames, "server-name")), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/search", class: "server-name-button", part: "search-server-name" }), h("gxg-form-text", { labelPosition: "above", label: this._componentLocale.tabAdvanced.databaseName, placeholder: "MyDatabase", ref: (el) => (this.databaseNameEl = el), value: this.databaseName, class: "database-name", part: "database-name" }), h("gxg-combo-box", { label: this._componentLocale.tabAdvanced.collation, disableFilter: true, value: (_b = this._initialComboValue["collations"]) !== null && _b !== void 0 ? _b : this.collations[0].id, ref: (el) => (this.collationEl = el), class: "collation-combo-box", part: "collation" }, renderFormItems("gxg-combo-box-item", this.collations, "collation")), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/reset", class: "collation-button", part: "reset-collation" }), h("gxg-form-checkbox", { label: this._componentLocale.tabAdvanced.createDataFilesInKbFolder, ref: (el) => (this.createDataFilesInKBFolderEl =
+      return (h("gxg-tab", { tab: "advanced", "no-padding": true, flexContainer: true }, h("gx-ide-container", { displayBorderBottom: true, containerTitle: this._componentLocale.tabAdvanced.tabTitle }), h("div", { class: "grid knowledge-base-storage" }, h("gx-ide-container", null, h("div", { class: "grid knowledge-base-storage__col-left" }, h("gxg-combo-box", { label: this._componentLocale.tabAdvanced.serverName.label, disableFilter: true, value: getSelectedGxOption(this.serverNames), placeholder: this.serverNames.length === 0
+          ? this._componentLocale.tabAdvanced.serverName
+            .disabledPlaceholder
+          : "", disabled: this.serverNames.length === 0, ref: (el) => (this.serverNameEl = el), class: "server-name-combo-box", part: "server-name", onValueChanged: this.evaluateCreateDataInKbDisabled }, renderFormItems("gxg-combo-box-item", this.serverNames, "server-name")), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/search", class: "server-name-button", part: "search-server-name" }), h("gxg-form-text", { labelPosition: "above", label: this._componentLocale.tabAdvanced.databaseName.label, placeholder: "MyDatabase", ref: (el) => (this.databaseNameEl = el), value: this.databaseName, class: "database-name", part: "database-name" }), h("gxg-combo-box", { label: this._componentLocale.tabAdvanced.collation.label, disableFilter: true, value: getSelectedGxOption(this.collations), ref: (el) => (this.collationEl = el), placeholder: this.collations.length === 0
+          ? this._componentLocale.tabAdvanced.collation
+            .disabledPlaceholder
+          : "", disabled: this.serverNames.length === 0, class: "collation-combo-box", part: "collation" }, renderFormItems("gxg-combo-box-item", this.collations, "collation")), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/reset", class: "collation-button", part: "reset-collation" }), h("gxg-form-checkbox", { label: this._componentLocale.tabAdvanced.createDataFilesInKbFolder, ref: (el) => (this.createDataFilesInKBFolderEl =
           el), alignTop: true, checked: this.createDataFilesInKBFolder, disabled: this.createDataInKbDisabled, class: "create-data-in-kb", part: "create-data-in-kb" }))), h("gx-ide-container", { noHeadingBorder: true }, h("div", { class: {
           "grid": true,
           "knowledge-base-storage__col-right": true,
           "knowledge-base-storage__col-right--windows-authentication": !this.userNameVisible
-        } }, h("gxg-combo-box", { label: this._componentLocale.tabAdvanced.authenticationType, disableFilter: true, value: (_c = this._initialComboValue["authenticationTypes"]) !== null && _c !== void 0 ? _c : this.authenticationTypes[0].id, ref: (el) => (this.authenticationTypeEl = el), class: "authentication-type", part: "authentication-type", onValueChanged: this.evaluateAuthenticationType }, renderFormItems("gxg-combo-box-item", this.authenticationTypes, "authentication-type")), this.userNameVisible ? (h("gxg-form-text", { labelPosition: "above", label: this._componentLocale.tabAdvanced.userName, ref: (el) => (this.userNameEl = el), value: this.userName, class: "user-name", part: "user-name" })) : null, this.passwordVisible ? (h("gxg-form-text", { labelPosition: "above", label: this._componentLocale.tabAdvanced.password, password: true, ref: (el) => (this.passwordEl = el), value: this.password, class: "password", part: "password" })) : null, this.savePasswordVisible ? (h("gxg-form-checkbox", { label: this._componentLocale.tabAdvanced.savePassword, ref: (el) => (this.savePasswordEl = el), checked: this.savePassword, class: "save-password", part: "save-password" })) : null)))));
+        } }, h("gxg-combo-box", { label: this._componentLocale.tabAdvanced.authenticationType.label, disableFilter: true, value: getSelectedGxOption(this.authenticationTypes), ref: (el) => (this.authenticationTypeEl = el), placeholder: this.authenticationTypes.length === 0
+          ? this._componentLocale.tabAdvanced.authenticationType
+            .disabledPlaceholder
+          : "", disabled: this.authenticationTypes.length === 0, class: "authentication-type", part: "authentication-type", onValueChanged: this.evaluateAuthenticationType }, renderFormItems("gxg-combo-box-item", this.authenticationTypes, "authentication-type")), this.userNameVisible ? (h("gxg-form-text", { labelPosition: "above", label: this._componentLocale.tabAdvanced.userName.label, ref: (el) => (this.userNameEl = el), value: this.userName, class: "user-name", part: "user-name" })) : null, this.passwordVisible ? (h("gxg-form-text", { labelPosition: "above", label: this._componentLocale.tabAdvanced.password.label, password: true, ref: (el) => (this.passwordEl = el), value: this.password, class: "password", part: "password" })) : null, this.savePasswordVisible ? (h("gxg-form-checkbox", { label: this._componentLocale.tabAdvanced.savePassword, ref: (el) => (this.savePasswordEl = el), checked: this.savePassword, class: "save-password", part: "save-password" })) : null)))));
     };
     this.createDataInKbDisabled = false;
     this.userNameVisible = true;
@@ -237,7 +223,6 @@ export class GxIdeNewKb {
   // 6.COMPONENT LIFECYCLE METHODS //
   async componentWillLoad() {
     this._componentLocale = await Locale.getComponentStrings(this.el);
-    this.setInitialValues();
     this.evaluateCreateDataInKbDisabled(null);
     this.evaluateAuthenticationType(null);
     this.previousFrontEndsState = this.frontEnds;

package/dist/collection/components/new-object/new-object.js

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

package/dist/collection/components/team-dev-select-recent-comment/team-dev-select-recent-comment.js

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

package/dist/components/button.js

@@ -4,7 +4,7 @@ import { e as exportParts } from './export-parts.js';
 import { d as defineCustomElement$2 } from './icon.js';
 import { d as defineCustomElement$1 } from './icon2.js';
 
-const buttonCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:6px;height:6px}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host{--gxg-button-icon-size:20px;display:inline-block;line-height:0;position:relative}:host .ghost-icon{width:0}:host(.button) .button-native{width:100%;height:100%;--svg-icon-regular-scale:var(\n    --svg-icon-small-scale\n  );position:relative;font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em;background:var(--color-primary-enabled);border:0;box-shadow:inset 0px 0px 0px 1px transparent;border-radius:var(--border-radius-xs);display:inline-flex;align-items:center;justify-content:center;padding-top:2.5px;padding-right:var(--spacing-comp-03);padding-bottom:2.5px;padding-left:var(--spacing-comp-03);line-height:var(--line-height-regular);transition:background var(--ui-animaton-speed) ease, color var(--ui-animaton-speed) ease, box-shadow var(--ui-animaton-speed) ease;}:host(.button) .button-native:hover:not([disabled]){background:var(--color-primary-hover);cursor:pointer}:host(.button) .button-native:focus:not([disabled]):not(.no-tab-index){background:var(--color-primary-enabled);outline-style:solid;outline-color:var(--color-primary-active);outline-width:var(--border-width-md);outline-offset:-2px}:host(.button) .button-native:active:not([disabled]){background:var(--color-primary-active)}:host(.button.button--disabled) .button-native{background:var(--color-primary-disabled);color:var(--color-primary-disabled);pointer-events:none}:host(.button.button--disabled){pointer-events:none}:host(.button--primary-text-only) .button-native{color:var(--color-on-primary);padding-inline-start:var(--spacing-comp-04);padding-inline-end:var(--spacing-comp-04)}:host(.button--primary-text-only.button--disabled) .button-native{color:var(--color-on-disabled)}:host(.button--primary-text-icon) .button-native{color:var(--color-on-primary);padding-inline-start:var(--spacing-comp-01);padding-inline-end:var(--spacing-comp-02)}:host(.button--primary-text-icon) .button-native gxg-icon:not(.ghost-icon){padding-inline-end:var(--spacing-comp-01)}:host(.button--primary-text-icon.button--disabled) .button-native{color:var(--color-on-disabled)}:host(.button--primary-icon-only) .button-native{background:var(--color-primary-enabled);color:var(--color-on-primary)}:host(.button--primary-icon-only) .button-native:hover:not([disabled]){background:var(--color-primary-hover);color:var(--color-primary-hover)}:host(.button--primary-icon-only) .button-native:focus:not([disabled]):not(.no-tab-index){background:var(--color-primary-enabled);color:var(--color-primary-hover)}:host(.button--primary-icon-only) .button-native:active:not([disabled]){background:var(--color-primary-active);color:var(--color-on-primary)}:host(.button--primary-icon-only) .button-native:focus{outline:none}:host(.button--secondary-text-only) .button-native{background:transparent;padding-inline-start:var(--spacing-comp-04);padding-inline-end:var(--spacing-comp-04)}:host(.button--secondary-text-only) .button-native:hover:not([disabled]){color:var(--color-primary-hover);background:transparent}:host(.button--secondary-text-only) .button-native:focus:not([disabled]):not(.no-tab-index){color:var(--color-primary-active);background:transparent;box-shadow:var(--box-shadow-values) var(--color-primary-active)}:host(.button--secondary-text-only) .button-native:active:not([disabled]){color:var(--color-primary-active);box-shadow:none}:host(.button--secondary-text-only) .button-native:focus{outline:none}:host(.button--secondary-text-only.button--disabled) .button-native{background:transparent;color:var(--color-primary-disabled)}:host(.button--secondary-text-icon) .button-native{background:transparent;padding-inline-start:0;padding-inline-start:var(--spacing-comp-01);padding-inline-end:var(--spacing-comp-02)}:host(.button--secondary-text-icon) .button-native gxg-icon:not(.ghost-icon){padding-inline-end:var(--spacing-comp-01)}:host(.button--secondary-text-icon) .button-native:hover:not([disabled]){color:var(--color-primary-hover);background:transparent}:host(.button--secondary-text-icon) .button-native:focus:not([disabled]):not(.no-tab-index){color:var(--color-primary-active);background:transparent;box-shadow:var(--box-shadow-values) var(--color-primary-active)}:host(.button--secondary-text-icon) .button-native:active:not([disabled]){color:var(--color-primary-active);box-shadow:none}:host(.button--secondary-text-icon.button--disabled) .button-native{background:transparent;color:var(--color-primary-disabled)}:host(.button--secondary-text-icon.button--disabled) .button-native gxg-icon{--icon-color:var(--color-primary-disabled)}:host(.button--secondary-icon-only) .button-native{background:transparent}:host(.button--secondary-icon-only) .button-native:hover:not([disabled]){background:transparent}:host(.button--secondary-icon-only) .button-native:focus:not([disabled]):not(.no-tab-index){background:transparent}:host(.button--secondary-icon-only) .button-native:active:not([disabled]){background:transparent}:host(.button--secondary-icon-only.button--disabled) .button-native{background:transparent}:host(.button--outlined) .button-native,:host(.button--outlined-text-icon) .button-native{box-shadow:inset 0px 0px 0px 1px var(--color-primary-enabled);background:var(--color-background);padding-inline-start:var(--spacing-comp-04);padding-inline-end:var(--spacing-comp-04)}:host(.button--outlined) .button-native:hover:not([disabled]),:host(.button--outlined-text-icon) .button-native:hover:not([disabled]){color:var(--color-primary-hover);background:var(--color-primary-hover-opacity-01);box-shadow:inset 0px 0px 0px 1px var(--color-primary-hover)}:host(.button--outlined) .button-native:focus:not([disabled]):not(.no-tab-index),:host(.button--outlined-text-icon) .button-native:focus:not([disabled]):not(.no-tab-index){color:var(--color-primary-active);background:transparent;box-shadow:inset 0px 0px 0px 2px var(--color-primary-active)}:host(.button--outlined) .button-native:active:not([disabled]),:host(.button--outlined-text-icon) .button-native:active:not([disabled]){color:var(--color-primary-active);background:transparent;box-shadow:inset 0px 0px 0px 1px var(--color-primary-active)}:host(.button--outlined) .button-native gxg-icon:not(.ghost-icon),:host(.button--outlined-text-icon) .button-native gxg-icon:not(.ghost-icon){padding-inline-end:var(--spacing-comp-01)}:host(.button--outlined.button--disabled) .button-native,:host(.button--outlined-text-icon.button--disabled) .button-native{box-shadow:inset 0px 0px 0px 1px var(--color-primary-disabled);background:var(--color-transparent);color:var(--color-primary-disabled)}:host(.button--outlined-text-icon) .button-native{padding-inline-start:var(--spacing-comp-03)}:host(.button--tertiary) .button-native{background:transparent;padding-inline-end:0;padding-inline-start:0}:host(.button--tertiary) .button-native:hover:not([disabled]){background:transparent}:host(.button--tertiary) .button-native:hover:not([disabled]) gxg-icon{--color-on-background:var(--gray-05)}:host(.button--tertiary) .button-native:focus:not([disabled]):not(.no-tab-index){background:transparent;box-shadow:var(--box-shadow-values) var(--color-primary-active)}:host(.button--tertiary) .button-native:active:not([disabled]){background:transparent}:host(.button--tertiary.button--disabled) .button-native{background:transparent}:host(.button--fullwidth){display:block}:host(.button--fullwidth) .button-native{width:100%}:host(.button--fit) .button-native{height:100% !important;width:100% !important}:host .icon-tooltip{position:absolute;border-width:0.5px;border-style:solid;border-color:var(--gray-04);color:var(--color-on-background);background-color:var(--gray-01);font-size:8px;font-weight:var(--font-weight-regular);font-family:var(--font-family-primary);padding:1px 5px;width:max-content;left:0;top:20px;display:none;opacity:0;transition-property:opacity;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}:host(.display-tooltip) .icon-tooltip{display:block}:host(.show-tooltip) .icon-tooltip{opacity:1}:host(.button--icon-only){width:var(--gxg-button-icon-size);height:var(--gxg-button-icon-size)}:host(.button--icon-only) .button-native{padding:0}:host(.large){--gxg-button-icon-size:24px}:host(.large) .button-native{height:var(--spacing-comp-05);font-size:var(--font-size-lg) !important}:host(.button--primary-text-icon.large) .button-native{padding-inline-start:var(--spacing-comp-02);padding-inline-end:var(--spacing-comp-03)}:host(.button--primary-icon-only.large) .button-native{height:var(--spacing-comp-05)}:host(.button--secondary-text-icon.large) .button-native{padding-inline-start:var(--spacing-comp-02);padding-inline-end:var(--spacing-comp-03)}:host(.button--secondary-icon-only.large) .button-native{height:var(--spacing-comp-05)}:host(.button--tertiary.large) .button-native{height:var(--spacing-comp-05)}";
+const buttonCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:6px;height:6px}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host{--gxg-button-icon-size:20px;display:inline-block;line-height:0;position:relative}:host .ghost-icon{width:0}:host(.button) .button-native{width:100%;height:100%;--svg-icon-regular-scale:var(\n    --svg-icon-small-scale\n  );position:relative;font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em;background:var(--color-primary-enabled);border:0;box-shadow:inset 0px 0px 0px 1px transparent;border-radius:var(--border-radius-xs);display:inline-flex;align-items:center;justify-content:center;padding-top:2.5px;padding-right:var(--spacing-comp-03);padding-bottom:2.5px;padding-left:var(--spacing-comp-03);line-height:var(--line-height-regular);transition:background var(--ui-animaton-speed) ease, color var(--ui-animaton-speed) ease, box-shadow var(--ui-animaton-speed) ease;}:host(.button) .button-native:hover:not([disabled]){background:var(--color-primary-hover);cursor:pointer}:host(.button) .button-native:focus:not([disabled]):not(.no-tab-index){background:var(--color-primary-enabled);outline-style:solid;outline-color:var(--gxg-border-color--focused);outline-width:var(--border-width-md);outline-offset:-2px}:host(.button) .button-native:active:not([disabled]){background:var(--color-primary-active)}:host(.button.button--disabled) .button-native{background:var(--color-primary-disabled);color:var(--color-primary-disabled);pointer-events:none}:host(.button.button--disabled){pointer-events:none}:host(.button--primary-text-only) .button-native{color:var(--color-on-primary);padding-inline-start:var(--spacing-comp-04);padding-inline-end:var(--spacing-comp-04)}:host(.button--primary-text-only.button--disabled) .button-native{color:var(--color-on-disabled)}:host(.button--primary-text-icon) .button-native{color:var(--color-on-primary);padding-inline-start:var(--spacing-comp-01);padding-inline-end:var(--spacing-comp-02)}:host(.button--primary-text-icon) .button-native gxg-icon:not(.ghost-icon){padding-inline-end:var(--spacing-comp-01)}:host(.button--primary-text-icon.button--disabled) .button-native{color:var(--color-on-disabled)}:host(.button--primary-icon-only) .button-native{background:var(--color-primary-enabled);color:var(--color-on-primary)}:host(.button--primary-icon-only) .button-native:hover:not([disabled]){background:var(--color-primary-hover);color:var(--color-primary-hover)}:host(.button--primary-icon-only) .button-native:focus:not([disabled]):not(.no-tab-index){background:var(--color-primary-enabled);color:var(--color-primary-hover)}:host(.button--primary-icon-only) .button-native:active:not([disabled]){background:var(--color-primary-active);color:var(--color-on-primary)}:host(.button--primary-icon-only) .button-native:focus{outline:none}:host(.button--secondary-text-only) .button-native{background:transparent;padding-inline-start:var(--spacing-comp-04);padding-inline-end:var(--spacing-comp-04)}:host(.button--secondary-text-only) .button-native:hover:not([disabled]){color:var(--color-primary-hover);background:transparent}:host(.button--secondary-text-only) .button-native:focus:not([disabled]):not(.no-tab-index){color:var(--color-primary-active);background:transparent;box-shadow:var(--box-shadow-values) var(--color-primary-active)}:host(.button--secondary-text-only) .button-native:active:not([disabled]){color:var(--color-primary-active);box-shadow:none}:host(.button--secondary-text-only) .button-native:focus{outline:none}:host(.button--secondary-text-only.button--disabled) .button-native{background:transparent;color:var(--color-primary-disabled)}:host(.button--secondary-text-icon) .button-native{background:transparent;padding-inline-start:0;padding-inline-start:var(--spacing-comp-01);padding-inline-end:var(--spacing-comp-02)}:host(.button--secondary-text-icon) .button-native gxg-icon:not(.ghost-icon){padding-inline-end:var(--spacing-comp-01)}:host(.button--secondary-text-icon) .button-native:hover:not([disabled]){color:var(--color-primary-hover);background:transparent}:host(.button--secondary-text-icon) .button-native:focus:not([disabled]):not(.no-tab-index){color:var(--color-primary-active);background:transparent;box-shadow:var(--box-shadow-values) var(--color-primary-active)}:host(.button--secondary-text-icon) .button-native:active:not([disabled]){color:var(--color-primary-active);box-shadow:none}:host(.button--secondary-text-icon.button--disabled) .button-native{background:transparent;color:var(--color-primary-disabled)}:host(.button--secondary-text-icon.button--disabled) .button-native gxg-icon{--icon-color:var(--color-primary-disabled)}:host(.button--secondary-icon-only) .button-native{background:transparent}:host(.button--secondary-icon-only) .button-native:hover:not([disabled]){background:transparent}:host(.button--secondary-icon-only) .button-native:focus:not([disabled]):not(.no-tab-index){background:transparent}:host(.button--secondary-icon-only) .button-native:active:not([disabled]){background:transparent}:host(.button--secondary-icon-only.button--disabled) .button-native{background:transparent}:host(.button--outlined) .button-native,:host(.button--outlined-text-icon) .button-native{box-shadow:inset 0px 0px 0px 1px var(--color-primary-enabled);background:var(--color-background);padding-inline-start:var(--spacing-comp-04);padding-inline-end:var(--spacing-comp-04)}:host(.button--outlined) .button-native:hover:not([disabled]),:host(.button--outlined-text-icon) .button-native:hover:not([disabled]){color:var(--color-primary-hover);background:var(--color-primary-hover-opacity-01);box-shadow:inset 0px 0px 0px 1px var(--color-primary-hover)}:host(.button--outlined) .button-native:focus:not([disabled]):not(.no-tab-index),:host(.button--outlined-text-icon) .button-native:focus:not([disabled]):not(.no-tab-index){color:var(--color-primary-active);background:transparent;box-shadow:inset 0px 0px 0px 2px var(--color-primary-active)}:host(.button--outlined) .button-native:active:not([disabled]),:host(.button--outlined-text-icon) .button-native:active:not([disabled]){color:var(--color-primary-active);background:transparent;box-shadow:inset 0px 0px 0px 1px var(--color-primary-active)}:host(.button--outlined) .button-native gxg-icon:not(.ghost-icon),:host(.button--outlined-text-icon) .button-native gxg-icon:not(.ghost-icon){padding-inline-end:var(--spacing-comp-01)}:host(.button--outlined.button--disabled) .button-native,:host(.button--outlined-text-icon.button--disabled) .button-native{box-shadow:inset 0px 0px 0px 1px var(--color-primary-disabled);background:var(--color-transparent);color:var(--color-primary-disabled)}:host(.button--outlined-text-icon) .button-native{padding-inline-start:var(--spacing-comp-03)}:host(.button--tertiary) .button-native{background:transparent;padding-inline-end:0;padding-inline-start:0}:host(.button--tertiary) .button-native:hover:not([disabled]){background:transparent}:host(.button--tertiary) .button-native:hover:not([disabled]) gxg-icon{--color-on-background:var(--gray-05)}:host(.button--tertiary) .button-native:focus:not([disabled]):not(.no-tab-index){background:transparent;box-shadow:var(--box-shadow-values) var(--color-primary-active)}:host(.button--tertiary) .button-native:active:not([disabled]){background:transparent}:host(.button--tertiary.button--disabled) .button-native{background:transparent}:host(.button--fullwidth){display:block}:host(.button--fullwidth) .button-native{width:100%}:host(.button--fit) .button-native{height:100% !important;width:100% !important}:host .icon-tooltip{position:absolute;border-width:0.5px;border-style:solid;border-color:var(--gray-04);color:var(--color-on-background);background-color:var(--gray-01);font-size:8px;font-weight:var(--font-weight-regular);font-family:var(--font-family-primary);padding:1px 5px;width:max-content;left:0;top:20px;display:none;opacity:0;transition-property:opacity;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}:host(.display-tooltip) .icon-tooltip{display:block}:host(.show-tooltip) .icon-tooltip{opacity:1}:host(.button--icon-only){width:var(--gxg-button-icon-size);height:var(--gxg-button-icon-size)}:host(.button--icon-only) .button-native{padding:0}:host(.large){--gxg-button-icon-size:24px}:host(.large) .button-native{height:var(--spacing-comp-05);font-size:var(--font-size-lg) !important}:host(.button--primary-text-icon.large) .button-native{padding-inline-start:var(--spacing-comp-02);padding-inline-end:var(--spacing-comp-03)}:host(.button--primary-icon-only.large) .button-native{height:var(--spacing-comp-05)}:host(.button--secondary-text-icon.large) .button-native{padding-inline-start:var(--spacing-comp-02);padding-inline-end:var(--spacing-comp-03)}:host(.button--secondary-icon-only.large) .button-native{height:var(--spacing-comp-05)}:host(.button--tertiary.large) .button-native{height:var(--spacing-comp-05)}";
 
 const GxgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/ch-global-stylesheet.js

@@ -1,3 +1,16 @@
 const CH_GLOBAL_STYLESHEET = new CSSStyleSheet({ disabled: true });
+function adoptGlobalStyleSheet(adoptedStyleSheets) {
+  adoptedStyleSheets.push(CH_GLOBAL_STYLESHEET);
+}
+function appendStyle(text) {
+  const styleSheetParser = new CSSStyleSheet({ disabled: true });
+  styleSheetParser.replace(text);
+  for (let i = 0; i < styleSheetParser.cssRules.length; i++) {
+    CH_GLOBAL_STYLESHEET.insertRule(styleSheetParser.cssRules.item(i).cssText);
+  }
+}
+function enableStyleSheet() {
+  CH_GLOBAL_STYLESHEET.disabled = false;
+}
 
-export { CH_GLOBAL_STYLESHEET as C };
+export { appendStyle as a, adoptGlobalStyleSheet as b, enableStyleSheet as e };

package/dist/components/ch-grid-infinite-scroll.js

@@ -0,0 +1,75 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+
+const chGridInfiniteScrollCss = ":host{display:flex;grid-column-start:1;grid-column-end:-1}.loading:not([hidden]){display:contents}";
+
+const ChGridInfiniteScroll$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.infinite = createEvent(this, "infinite", 7);
+    /**
+     * Indicates whether the grid is loading or already loaded.
+     */
+    this.status = "loaded";
+    this.intersectionObserverHandler = (entries, observer) => {
+      const hasGridScroll = this.gridLayoutElement.scrollHeight !==
+        this.gridLayoutElement.clientHeight;
+      const emitInfinite = observer.root ? hasGridScroll : !hasGridScroll;
+      if (emitInfinite && entries[0].isIntersecting && this.status === "loaded") {
+        this.status = "loading";
+        this.infinite.emit();
+      }
+    };
+  }
+  componentWillLoad() {
+    this.gridLayoutElement = this.el.assignedSlot.closest("section.main");
+    this.intersectionGridLayoutObserver = new IntersectionObserver(this.intersectionObserverHandler, {
+      root: this.gridLayoutElement,
+      rootMargin: "1px"
+    });
+    this.intersectionGridLayoutObserver.observe(this.el);
+    this.intersectionDocumentObserver = new IntersectionObserver(this.intersectionObserverHandler, {
+      rootMargin: "1px"
+    });
+    this.intersectionDocumentObserver.observe(this.el);
+  }
+  disconnectedCallback() {
+    if (this.intersectionGridLayoutObserver) {
+      this.intersectionGridLayoutObserver.disconnect();
+    }
+  }
+  /**
+   * Indicates that the grid is already loaded.
+   */
+  async complete() {
+    this.status = "loaded";
+  }
+  render() {
+    return (h("div", { class: "loading", hidden: !(this.status === "loading") }, h("slot", null)));
+  }
+  get el() { return this; }
+  static get style() { return chGridInfiniteScrollCss; }
+}, [1, "ch-grid-infinite-scroll", {
+    "status": [1025],
+    "hasGridScroll": [32],
+    "complete": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ch-grid-infinite-scroll"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ch-grid-infinite-scroll":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ChGridInfiniteScroll$1);
+      }
+      break;
+  } });
+}
+
+const ChGridInfiniteScroll = ChGridInfiniteScroll$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { ChGridInfiniteScroll, defineCustomElement };

package/dist/components/ch-grid-rowset-legend.js

@@ -1,4 +1,35 @@
-import { C as ChGridRowsetLegend$1, d as defineCustomElement$1 } from './ch-grid-rowset-legend2.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const chGridRowsetLegendCss = ":host{display:flex;grid-column-start:1;grid-column-end:-1;margin-inline-start:calc(var(--indent) * (var(--level) - 1))}:host::part(selector-label){display:none}";
+
+const ChGridRowsetLegend$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.rowsetLegendClicked = createEvent(this, "rowsetLegendClicked", 7);
+  }
+  clickHandler() {
+    this.rowsetLegendClicked.emit();
+  }
+  render() {
+    return (h(Host, null, h("div", { part: "caret" }), h("label", { part: "selector-label" }, h("input", { type: "checkbox", part: "selector" })), h("div", { part: "icon" }), h("slot", null)));
+  }
+  static get style() { return chGridRowsetLegendCss; }
+}, [1, "ch-grid-rowset-legend", undefined, [[1, "click", "clickHandler"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ch-grid-rowset-legend"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ch-grid-rowset-legend":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ChGridRowsetLegend$1);
+      }
+      break;
+  } });
+}
 
 const ChGridRowsetLegend = ChGridRowsetLegend$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ch-grid-virtual-scroller.js

@@ -7,6 +7,7 @@ const ChGridVirtualScrollerLegend = /*@__PURE__*/ proxyCustomElement(class exten
     super();
     this.__registerHost();
     this.viewPortItemsChanged = createEvent(this, "viewPortItemsChanged", 7);
+    this.resizeObserver = new ResizeObserver(this.resizeHandler.bind(this));
     /**
      * Height of each row in pixels.
      */
@@ -27,34 +28,12 @@ const ChGridVirtualScrollerLegend = /*@__PURE__*/ proxyCustomElement(class exten
      * The maximum number of items that can fit on the screen at any given time.
      */
     this.maxViewPortItems = 1;
-    this.resizeObserver = new ResizeObserver(this.resizeHandler.bind(this));
-  }
-  componentWillLoad() {
-    this.gridMainEl = this.el.assignedSlot.parentElement;
-    this.resizeObserver.observe(this.gridMainEl);
-    this.resizeObserver.observe(document.documentElement);
-  }
-  componentDidLoad() {
-    this.updateViewPortItems();
-  }
-  disconnectedCallback() {
-    this.resizeObserver.disconnect();
-  }
-  itemsHandler() {
-    if (this.gridMainEl) {
-      this.updateViewPortItems();
-    }
   }
   rowHeightHandler() {
     if (this.gridMainEl) {
       this.updateViewPortItems();
     }
   }
-  maxViewPortItemsHandler() {
-    if (this.gridMainEl) {
-      this.updateViewPortItems();
-    }
-  }
   hasScrollHandler() {
     if (this.hasGridScroll) {
       this.gridMainEl.addEventListener("scroll", this.updateViewPortItems.bind(this), { passive: true });
@@ -75,6 +54,32 @@ const ChGridVirtualScrollerLegend = /*@__PURE__*/ proxyCustomElement(class exten
     }
     this.updateViewPortItems();
   }
+  maxViewPortItemsHandler() {
+    if (this.gridMainEl) {
+      this.updateViewPortItems();
+    }
+  }
+  itemsHandler() {
+    if (this.gridMainEl) {
+      this.updateViewPortItems();
+    }
+  }
+  itemsCountHandler() {
+    if (this.gridMainEl) {
+      this.updateViewPortItems();
+    }
+  }
+  componentWillLoad() {
+    this.gridMainEl = this.el.assignedSlot.parentElement;
+    this.resizeObserver.observe(this.gridMainEl);
+    this.resizeObserver.observe(document.documentElement);
+  }
+  componentDidLoad() {
+    this.updateViewPortItems();
+  }
+  disconnectedCallback() {
+    this.resizeObserver.disconnect();
+  }
   resizeHandler() {
     const rowHeights = getComputedStyle(this.gridMainEl).gridTemplateRows.split(" ");
     this.browserHeight = document.documentElement.clientHeight;
@@ -130,15 +135,17 @@ const ChGridVirtualScrollerLegend = /*@__PURE__*/ proxyCustomElement(class exten
   }
   get el() { return this; }
   static get watchers() { return {
-    "items": ["itemsHandler"],
     "rowHeight": ["rowHeightHandler"],
-    "maxViewPortItems": ["maxViewPortItemsHandler"],
     "hasGridScroll": ["hasScrollHandler"],
-    "hasWindowScroll": ["hasWindowScrollHandler"]
+    "hasWindowScroll": ["hasWindowScrollHandler"],
+    "maxViewPortItems": ["maxViewPortItemsHandler"],
+    "items": ["itemsHandler"],
+    "itemsCount": ["itemsCountHandler"]
   }; }
   static get style() { return chGridVirtualScrollerCss; }
 }, [0, "ch-grid-virtual-scroller", {
     "items": [16],
+    "itemsCount": [2, "items-count"],
     "viewPortItems": [1040],
     "rowHeight": [32],
     "browserHeight": [32],

package/dist/components/ch-grid2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, h, Host } from '@stencil/core/internal/client';
-import { C as CH_GLOBAL_STYLESHEET } from './ch-global-stylesheet.js';
-import { m as mouseEventModifierKey, M as MouseEventButton, a as mouseEventHasButtonPressed, b as MouseEventButtons } from './helpers.js';
+import { b as adoptGlobalStyleSheet } from './ch-global-stylesheet.js';
+import { f as focusComposedPath, m as mouseEventModifierKey, M as MouseEventButton, a as mouseEventHasButtonPressed, b as MouseEventButtons } from './helpers.js';
 import { d as defineCustomElement$4 } from './ch-grid-settings2.js';
 import { d as defineCustomElement$3 } from './ch-grid-settings-columns2.js';
 import { d as defineCustomElement$2 } from './ch-window2.js';
@@ -1507,7 +1507,7 @@ class ChGridManager {
     this.styleSheet.insertRule(`:host {}`, StyleRule.BASE_LAYER);
     this.styleSheet.insertRule(".main {}", StyleRule.COLUMNS_WIDTH);
     this.grid.shadowRoot.adoptedStyleSheets.push(this.styleSheet);
-    this.grid.shadowRoot.adoptedStyleSheets.push(CH_GLOBAL_STYLESHEET);
+    adoptGlobalStyleSheet(this.grid.shadowRoot.adoptedStyleSheets);
     this.columns = new ChGridManagerColumns(this);
     this.selection = new ChGridManagerSelection(this);
     this.rowActions = new ChGridManagerRowActions(this);
@@ -1976,7 +1976,7 @@ const ChGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
     }
   }
   windowKeyDownHandler(eventInfo) {
-    if (document.activeElement === this.el &&
+    if (focusComposedPath()[0] === this.el &&
       [
         " ",
         "+",
@@ -1994,7 +1994,7 @@ const ChGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
     }
   }
   keyDownHandler(eventInfo) {
-    if (document.activeElement === this.el) {
+    if (focusComposedPath()[0] === this.el) {
       switch (eventInfo.key) {
         case " ":
           this.toggleRowsMarked();
@@ -2045,17 +2045,23 @@ const ChGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
             ? this.rowHighlighted
             : null);
     }
-    if (this.manager.selection.selecting) {
-      const row = this.manager.getRowEventTarget(eventInfo);
-      const cell = this.manager.getCellEventTarget(eventInfo);
-      if (row &&
-        (this.manager.selection.selectingRow !== row ||
-          this.manager.selection.selectingCell !== cell)) {
-        const isKeyModifierPressed = mouseEventModifierKey(eventInfo);
-        const isMouseButtonRightPressed = mouseEventHasButtonPressed(eventInfo, MouseEventButtons.RIGHT);
-        this.selectByPointerEvent(row, cell, isKeyModifierPressed && !isMouseButtonRightPressed, !isMouseButtonRightPressed, isMouseButtonRightPressed);
-        this.manager.selection.selectingRow = row;
-        this.manager.selection.selectingCell = cell;
+    selectingBlock: {
+      if (this.manager.selection.selecting) {
+        if (focusComposedPath()[0] !== this.el) {
+          this.stopSelecting();
+          break selectingBlock;
+        }
+        const row = this.manager.getRowEventTarget(eventInfo);
+        const cell = this.manager.getCellEventTarget(eventInfo);
+        if (row &&
+          (this.manager.selection.selectingRow !== row ||
+            this.manager.selection.selectingCell !== cell)) {
+          const isKeyModifierPressed = mouseEventModifierKey(eventInfo);
+          const isMouseButtonRightPressed = mouseEventHasButtonPressed(eventInfo, MouseEventButtons.RIGHT);
+          this.selectByPointerEvent(row, cell, isKeyModifierPressed && !isMouseButtonRightPressed, !isMouseButtonRightPressed, isMouseButtonRightPressed);
+          this.manager.selection.selectingRow = row;
+          this.manager.selection.selectingCell = cell;
+        }
       }
     }
   }
@@ -2078,9 +2084,7 @@ const ChGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
     }
   }
   mouseUpHandler() {
-    this.manager.selection.selecting = false;
-    this.manager.selection.selectingRow = null;
-    this.manager.selection.selectingCell = null;
+    this.stopSelecting();
   }
   dblclickHandler(eventInfo) {
     const row = this.manager.getRowEventTarget(eventInfo);
@@ -2106,8 +2110,8 @@ const ChGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
       const cellFocused = ((_a = this.cellSelected) === null || _a === void 0 ? void 0 : _a.row) === targetRow ? this.cellSelected : null;
       const rowContextMenuEventInfo = this.rowContextMenu.emit({
         rowId: targetRow.rowId,
-        cellId: cellFocused.cellId,
-        columnId: cellFocused.column.columnId,
+        cellId: cellFocused === null || cellFocused === void 0 ? void 0 : cellFocused.cellId,
+        columnId: cellFocused === null || cellFocused === void 0 ? void 0 : cellFocused.column.columnId,
         selectedRowsId: this.rowsSelected.map(row => row.rowId),
         clientX: eventInfo.clientX,
         clientY: eventInfo.clientY
@@ -2444,6 +2448,11 @@ const ChGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
     this.cellSelected = cellSelected;
     rowFocused === null || rowFocused === void 0 ? void 0 : rowFocused.ensureVisible();
   }
+  stopSelecting() {
+    this.manager.selection.selecting = false;
+    this.manager.selection.selectingRow = null;
+    this.manager.selection.selectingCell = null;
+  }
   renderSettings() {
     return (h("ch-grid-settings", { grid: this.el, ref: el => (this.settingsUI = el), exportparts: "\n          mask:settings-mask,\n          window:settings-window,\n          header:settings-header,\n          caption:settings-caption,\n          close:settings-close,\n          main:settings-main,\n          footer:settings-footer\n        " }, h("slot", { name: "settings" }, h("ch-grid-settings-columns", { part: "settings-columns", columns: [...this.manager.getColumns()], exportparts: "\n              column:settings-columns-item,\n              column-label:settings-columns-label,\n              column-visible:settings-columns-visible,\n              column-visible-checked:settings-columns-visible-checked\n            " }))));
   }