@genexus/genexus-ide-ui 0.0.9

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

@@ -0,0 +1,250 @@
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-4f0a5746.js';
+import { L as Locale } from './locale-e183487a.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 = (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 = (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 = (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 GxIdeNewKb = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.componentDidLoadEvent = createEvent(this, "componentDidLoadEvent", 7);
+    /**
+     * An object with the initial value for each multi-option element.
+     */
+    this._initialComboValue = {
+      prototypingTargets: null,
+      userInterfaceLanguages: null,
+      prototypingEnvironments: null,
+      dataSources: null,
+      serverNames: null,
+      collations: null,
+      authenticationTypes: null
+    };
+    /**
+     * 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 value = (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.selected)
+            ? selectedOption.id
+            : null;
+          if (value) {
+            this._initialComboValue[property] = value;
+          }
+        });
+      }
+    };
+    // 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
+     */
+    this.evaluateCreateDataInKbDisabled = (e) => {
+      if (e) {
+        if (this.serverNames[0].id === e.detail) {
+          this.createDataInKbDisabled = true;
+        }
+        else {
+          this.createDataInKbDisabled = false;
+        }
+      }
+      else if (this.serverNames[0].selected) {
+        this.createDataInKbDisabled = true;
+      }
+    };
+    /**
+     * @description if "Authentication Type" is "Windows Authentication" then User Name, Password, and Save Password should not be visible.
+     */
+    this.evaluateAuthenticationType = (e) => {
+      var _a, _b;
+      let selectedOption;
+      if ((_a = this.authenticationTypes) === null || _a === void 0 ? void 0 : _a.length) {
+        selectedOption =
+          ((_b = this.authenticationTypes) === null || _b === void 0 ? void 0 : _b.find(item => item.selected)) ||
+            this.authenticationTypes[0];
+      }
+      const conditionA = (e === null || e === void 0 ? void 0 : e.detail) === "windows-authentication";
+      const conditionB = selectedOption && selectedOption.id === "windows-authentication";
+      if (conditionA || (conditionB && e === null)) {
+        this.userNameVisible = false;
+        this.passwordVisible = false;
+        this.savePasswordVisible = false;
+      }
+      else {
+        this.userNameVisible = true;
+        this.passwordVisible = true;
+        this.savePasswordVisible = true;
+      }
+    };
+    /**
+     * @description It allows defining the DBMS that will be used in the solution
+     */
+    this.selectLocationHandler = () => {
+      this.selectLocationCallback().then(kbLocation => {
+        if (kbLocation) {
+          this.kbLocation = kbLocation;
+        }
+      });
+    };
+    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
+        });
+      });
+      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;
+        }
+      });
+    };
+    this.createKbHandler = () => {
+      var _a, _b, _c;
+      if (this.onCreate) {
+        const onCreatePromise = this.onCreate({
+          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(),
+          serverName: this.serverNameEl.value,
+          databaseName: this.databaseNameEl.value,
+          collation: this.collationEl.value,
+          createDataFilesInKBFolder: this.createDataFilesInKBFolderEl.checked,
+          authenticationType: this.authenticationTypeEl.value,
+          userName: (_a = this.userNameEl) === null || _a === void 0 ? void 0 : _a.value,
+          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);
+        });
+      }
+    };
+    this.cancelKbHandler = () => {
+      if (this.onCancelHandler) {
+        this.onCancelHandler();
+      }
+    };
+    // 10.RENDER() FUNCTION //
+    this.renderTabBasic = () => {
+      var _a, _b, _c, _d;
+      return (h("gxg-tab", { tab: "basic", "no-padding": true }, h("gxg-container", { displayBorderTop: true, displayBorderBottom: true }, h("div", { class: "grid basic-row-first" }, 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")), 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("gxg-container", { fieldset: true, displayBorderEnd: true, 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), 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["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"))), 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")))));
+    };
+    this.renderTabAdvanced = () => {
+      var _a, _b, _c;
+      return (h("gxg-tab", { tab: "advanced", "no-padding": true }, h("gxg-container", { displayBorderTop: true, displayBorderBottom: true, containerTitle: this._componentLocale.tabAdvanced.tabTitle }), h("div", { class: "grid knowledge-base-storage" }, h("gxg-container", { fieldset: true, displayBorderEnd: true }, 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 =
+          el), alignTop: true, checked: this.createDataFilesInKBFolder, disabled: this.createDataInKbDisabled, class: "create-data-in-kb", part: "create-data-in-kb" }))), h("gxg-container", { fieldset: true, 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)))));
+    };
+    this.dataSources = undefined;
+    this.frontEnds = undefined;
+    this.isAdvanced = false;
+    this.kbLocation = undefined;
+    this.selectLocationCallback = undefined;
+    this.kbName = undefined;
+    this.prototypingEnvironments = undefined;
+    this.prototypingTargets = undefined;
+    this.userInterfaceLanguages = undefined;
+    this.authenticationTypes = undefined;
+    this.collations = undefined;
+    this.createDataFilesInKBFolder = false;
+    this.databaseName = undefined;
+    this.password = undefined;
+    this.savePassword = false;
+    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;
+  }
+  // 6.METHODS //
+  async componentWillLoad() {
+    this._componentLocale = await Locale.getComponentStrings(this.el);
+    this.setInitialValues();
+    this.evaluateCreateDataInKbDisabled(null);
+    this.evaluateAuthenticationType(null);
+  }
+  componentDidLoad() {
+    this.kbNameEl.focus();
+  }
+  /** *****************************
+   *  11.RENDER() FUNCTION
+   ********************************/
+  render() {
+    return (h(Host, { class: { "gx-ide-component": true } }, h("div", { class: `main-wrapper` }, h("gxg-container", null, h("header", { class: "header grid" }, h("gxg-label", { labelPosition: "start", class: "kb-label" }, this._componentLocale.header.kbName), 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" }), h("gxg-label", { labelPosition: "start", class: "location-label" }, this._componentLocale.header.kbLocation), 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" }), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/folder", onClick: this.selectLocationHandler, part: "button-select-location", class: "location-icon" }))), h("header", { class: {
+        "header": true,
+        "header--no-location-folder": !this.selectLocationCallback
+      } }), h("main", { class: "main" }, h("gxg-tabs", { height: "100%", position: "top", class: "gxg-tabs" }, h("gxg-tab-bar", { slot: "tab-bar-container", part: "tab-bar" }, h("gxg-tab-button", { slot: "tab-bar", tabLabel: this._componentLocale.tabBasic.tabLabel, tab: "basic", "is-selected": true, part: "tab-button-basic" }), 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(), h("gxg-container", { displayBorderTop: true }, h("gxg-button", { id: "button-create", slot: "footer", type: "primary-text-only", onClick: this.createKbHandler, part: "button-create" }, this._componentLocale.footer.btnCreate), h("gxg-button", { id: "button-cancel", slot: "footer", type: "outlined", onClick: this.cancelKbHandler, part: "button-cancel" }, this._componentLocale.footer.btnCancel)))))));
+  }
+  static get assetsDirs() { return ["gx-ide-assets/new-kb"]; }
+  get el() { return getElement(this); }
+};
+GxIdeNewKb.style = newKbCss;
+
+export { GxIdeNewKb as gx_ide_new_kb };

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

@@ -0,0 +1,32 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4f0a5746.js';
+import { L as Locale } from './locale-e183487a.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 GxIdeTemplate = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.componentDidLoadEvent = createEvent(this, "componentDidLoadEvent", 7);
+    // 7.LISTENERS //
+    // 8.PUBLIC METHODS API //
+    // 9.LOCAL METHODS //
+    this.renderPresentation = () => {
+      return Locale.format(this._componentLocale.presentation, [this.firstName]);
+    };
+    this.firstName = undefined;
+  }
+  // 6.METHODS //
+  async componentWillLoad() {
+    this._componentLocale = await Locale.getComponentStrings(this.el);
+    this.componentDidLoadEvent.emit(true);
+  }
+  // 10.RENDER() FUNCTION //
+  render() {
+    return (h(Host, { class: { "gx-ide-component": true } }, h("p", null, this.renderPresentation())));
+  }
+  static get assetsDirs() { return ["gx-ide-assets/template"]; }
+  get el() { return getElement(this); }
+};
+GxIdeTemplate.style = templateCss;
+
+export { GxIdeTemplate as gx_ide_template };

package/dist/esm/gx-ide-test.entry.js

@@ -0,0 +1,81 @@
+import { h, r as registerInstance, H as Host } from './index-4f0a5746.js';
+
+/* eslint-disable @typescript-eslint/no-use-before-define */
+const renderTreeItems = (treeItemsModel, firstCall = true) => {
+  if (treeItemsModel === null || treeItemsModel === void 0 ? void 0 : treeItemsModel.length) {
+    if (firstCall) {
+      return treeItemsModel.map((item) => {
+        return renderTreeItem(item);
+      });
+    }
+    else {
+      return (h("gxg-tree", { slot: "tree" }, treeItemsModel.map((item) => {
+        return renderTreeItem(item);
+      })));
+    }
+  }
+};
+const renderTreeItem = (item) => {
+  var _a;
+  const childrenLength = item.items ? item.items.length : 0;
+  const isLeaf = !!(childrenLength === 0 || item.leaf);
+  const lazy = !!item.lazy;
+  return (h("gxg-tree-item", { checkbox: item.checkbox, checked: item.checked, disabled: item.disabled, icon: item.icon, itemId: item.id, indeterminate: item.indeterminate, key: `tree-item-${item.id}`, label: item.label, leaf: isLeaf && !lazy, numberOfChildren: childrenLength, opened: item.opened, selected: item.selected }, [item.label, ((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) && renderTreeItems(item.items, false)]));
+};
+
+const testCss = ":host{display:block}";
+
+const GxIdeUiTest = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /* Gxg-Tree Methods*/
+    this.closeTreeNodeHandler = () => {
+      this.tree.toggleItems(["number-1-1-2"], false);
+    };
+    this.openTreeNodeHandler = () => {
+      this.tree.toggleItems(["number-1-1-2"], true);
+    };
+    this.toggleTreeNodeHandler = () => {
+      this.tree.toggleItems(["number-1-1-2"]);
+    };
+    this.getSelectedItemsHandler = () => {
+      (async () => {
+        const selected = await this.tree.getSelectedItems();
+        console.log(selected);
+      })();
+    };
+    this.getCheckedItemsHandler = () => {
+      (async () => {
+        const checked = await this.tree.getCheckedItems();
+        console.log(checked);
+      })();
+    };
+    this.deleteNodeHandler = () => {
+      this.treeModel = [];
+    };
+    this.treeModel = undefined;
+    this.lazyLoadTreeItemsCallback = undefined;
+  }
+  loadLazyChildrenHandler(e) {
+    const treeItemId = e.detail;
+    if (this.lazyLoadTreeItemsCallback) {
+      const promise = this.lazyLoadTreeItemsCallback(treeItemId);
+      setTimeout(() => {
+        promise.then(result => {
+          this.treeModel = result;
+        });
+      }, 1000);
+    }
+  }
+  render() {
+    if (this.treeModel) {
+      return (h(Host, null, h("gxg-tree", { id: "masterTree", checked: true, ref: el => (this.tree = el) }, renderTreeItems(this.treeModel)), ",", h("div", { class: "tree-buttons" }, h("gxg-button", { type: "outlined", onClick: this.closeTreeNodeHandler }, "Close 1-1-2"), h("gxg-button", { type: "outlined", onClick: this.openTreeNodeHandler }, "Open 1-1-2"), h("gxg-button", { type: "outlined", onClick: this.toggleTreeNodeHandler }, "Toggle 1-1-2"), h("gxg-button", { type: "outlined", onClick: this.getSelectedItemsHandler }, "Get Selected Items"), h("gxg-button", { type: "outlined", onClick: this.getCheckedItemsHandler }, "Get Checked Items"), h("gxg-button", { type: "outlined", onClick: this.deleteNodeHandler }, "Delete Tree"))));
+    }
+    else {
+      return h("slot", null);
+    }
+  }
+};
+GxIdeUiTest.style = testCss;
+
+export { GxIdeUiTest as gx_ide_test };

package/dist/esm/gxg-accordion-item.entry.js

@@ -0,0 +1,217 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4f0a5746.js';
+import { s as state } from './store-75f5d491.js';
+import { e as exportParts } from './export-parts-7f208d57.js';
+
+const accordionItemCss = "@charset \"UTF-8\";/*! 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{position:relative;outline:none;display:block;margin-bottom:var(--spacing-lay-s);font-family:\"Times New Roman\", Times, serif}:host:last-child{margin-bottom:0}:host .item__header__button{display:flex;align-items:center;border-width:var(--border-width-md);border-style:solid;border-color:transparent}:host .item__header__button:focus{outline:none;border-color:var(--color-primary-active)}:host .item__header__button__title-subtitle__title{margin:0}:host .item__header__button__title-subtitle__subtitle{margin:0}:host .item__header__button__meta-icon-wrapper__icon{display:flex}:host .item__header__button:hover{cursor:pointer}:host .item__container{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;text-align:start}:host .disabled-layer{width:100%;height:100%;position:absolute;z-index:99;cursor:not-allowed}:host([mode=classical]) .item__header__button,:host([mode=boxed]) .item__header__button{justify-content:space-between;padding-top:0;padding-inline-end:var(--spacing-comp-01);padding-bottom:0;padding-inline-start:var(--spacing-comp-02);min-height:20px;transition-property:background-color;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}:host([mode=classical]) .item__header__button .cover,:host([mode=boxed]) .item__header__button .cover{position:absolute;height:100%;width:100%;left:0;top:0;background-color:transparent;z-index:10}:host([mode=classical]) .item__header__button .cover.hidden,:host([mode=boxed]) .item__header__button .cover.hidden{display:none}:host([mode=classical]) .item__header__button__title-subtitle,:host([mode=boxed]) .item__header__button__title-subtitle{margin-inline-end:var(--spacing-comp-04);width:100%}:host([mode=classical]) .item__header__button__title-subtitle__title,:host([mode=boxed]) .item__header__button__title-subtitle__title{display:flex;align-items:center;text-align:start;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;letter-spacing:0.06em}:host([mode=classical]) .item__header__button__title-subtitle__title gxg-form-text::part(input),:host([mode=boxed]) .item__header__button__title-subtitle__title gxg-form-text::part(input){letter-spacing:0.06em}:host([mode=classical]) .item__header__button__title-subtitle__title__icon,:host([mode=boxed]) .item__header__button__title-subtitle__title__icon{display:flex;margin-inline-end:var(--spacing-comp-01)}:host([mode=classical]) .item__header__button__title-subtitle__subtitle,:host([mode=boxed]) .item__header__button__title-subtitle__subtitle{padding-bottom:2px;max-width:300px;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;text-align:start}:host([mode=classical]) .item__header__button__meta-icon-wrapper,:host([mode=boxed]) .item__header__button__meta-icon-wrapper{display:flex;align-items:center;flex-shrink:0}:host([mode=classical]) .item__header__button__meta-icon-wrapper__meta,:host([mode=boxed]) .item__header__button__meta-icon-wrapper__meta{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;display:flex;margin-right:var(--spacing-comp-02)}:host([mode=classical]) .item__container,:host([mode=boxed]) .item__container{padding-top:var(--spacing-comp-02);padding-inline-end:var(--spacing-comp-02);padding-bottom:var(--spacing-comp-02);padding-inline-start:var(--spacing-comp-02)}:host([mode=classical].has-subtitle) .item__header__button,:host([mode=boxed].has-subtitle) .item__header__button{align-items:start}:host([mode=classical][no-padding]) .item__container,:host([mode=boxed][no-padding]) .item__container{padding:0}:host([mode=classical][has-border]) .item__container{border:var(--border-width-sm) solid var(--gray-02);border-top:0}:host([mode=classical]) .item__header__button{background-color:var(--color-secondary-enabled)}:host([mode=classical]) .item__header__button:hover{background-color:var(--color-secondary-hover)}:host([mode=classical]) .item__container{background-color:var(--color-background)}:host([mode=classical]) .item--disabled{cursor:not-allowed}:host([mode=classical]) .item--disabled .item__header__button{background-color:var(--color-primary-disabled)}:host([mode=classical]) .item--disabled .item__header__button .icon-wrapper{padding-inline-end:2px}:host([mode=classical]) .item--disabled .item__header__button__title-subtitle__title,:host([mode=classical]) .item--disabled .item__header__button__title-subtitle__subtitle{color:var(--color-on-disabled)}:host([mode=classical]) .item--disabled .item__header__button__meta-icon-wrapper__meta{color:var(--color-on-primary);opacity:0.3}:host([mode=classical][editable-title]) .item__header__button__title-subtitle__subtitle{margin-inline-start:5px}:host([mode=classical][editable-title]) .item--disabled .item__header__button__title-subtitle__title{opacity:0.3}:host([mode=boxed]) .item{background-color:var(--gray-01);transition-property:border-color;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease}:host([mode=boxed]) .item__header__button{background:transparent}:host([mode=boxed]) .item__header__button:hover{background-color:var(--gray-02)}:host([mode=boxed]) .item__container{background:transparent}:host([mode=boxed]) .item:hover{border-color:var(--color-primary-hover)}:host([mode=boxed]) .item--disabled .item__header__button__title-subtitle__title,:host([mode=boxed]) .item--disabled .item__header__button__title-subtitle__subtitle{color:var(--color-primary-disabled)}:host([mode=boxed]) .item--disabled .item__header__button__meta-icon-wrapper__meta{opacity:0.5}:host([mode=boxed][editable-title]) .item__header__button__title-subtitle__subtitle{margin-inline-start:5px}:host([mode=boxed][editable-title]) .item--disabled .item__header__button__title-subtitle__title{opacity:0.5}:host([mode=slim]) .item__header__button,:host([mode=minimal]) .item__header__button{justify-content:flex-end;flex-direction:row-reverse}:host([mode=slim]) .item__container,:host([mode=minimal]) .item__container{padding-top:var(--spacing-comp-01);padding-inline-end:0;padding-bottom:var(--spacing-comp-01);padding-inline-start:0}:host([mode=slim][no-padding]) .item__container,:host([mode=minimal][no-padding]) .item__container{padding:0;margin-inline-start:0}:host([mode=slim]){margin-bottom:var(--spacing-lay-xs)}:host([mode=slim]) .item__header__button{padding:2px 0}:host([mode=slim]) .item__header__button:hover gxg-icon{background-color:var(--color-primary-hover)}:host([mode=slim]) .item__header__button:active gxg-icon{background-color:var(--color-primary-active)}:host([mode=slim]) .item__header__button gxg-icon{background:var(--color-primary-enabled);border-radius:50%;margin-inline-end:var(--spacing-comp-02);width:16px;height:16px}:host([mode=slim]) .item__header__button__title-subtitle__title{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}:host([mode=slim]) .item__container{margin-inline-start:26px}:host([mode=slim]) .item--open gxg-icon{background:var(--color-primary-active)}:host([mode=slim]) .item--disabled{cursor:not-allowed;pointer-events:none}:host([mode=slim]) .item--disabled gxg-icon{background:var(--color-primary-disabled)}:host([mode=minimal]){margin-bottom:var(--spacing-lay-xs)}:host([mode=minimal]) .item__header__button gxg-icon{margin-inline-end:var(--spacing-comp-01)}:host([mode=minimal]) .item__header__button__title-subtitle__title{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}:host([mode=minimal]) .item__container{margin-inline-start:26px}:host([mode=classical].large) .item__header__button__title-subtitle__title,:host([mode=boxed].large) .item__header__button__title-subtitle__title{font-size:var(--font-size-lg)}:host([mode=classical].large) .item__header__button__title-subtitle__subtitle,:host([mode=boxed].large) .item__header__button__title-subtitle__subtitle{font-size:var(--font-size-lg)}:host([mode=classical].large) .item__header__button__meta-icon-wrapper__meta,:host([mode=boxed].large) .item__header__button__meta-icon-wrapper__meta{font-size:var(--font-size-lg)}:host([mode=classical].large) .item__container,:host([mode=boxed].large) .item__container{font-size:var(--font-size-lg)}:host([mode=slim].large) .item__header__button__title-subtitle__title{font-size:var(--font-size-lg)}:host([mode=slim].large) .item__container{font-size:var(--font-size-lg)}:host([mode=minimal].large) .item__header__button__title-subtitle__title{font-size:var(--font-size-lg)}:host([mode=minimal].large) .item__container{font-size:var(--font-size-lg)}";
+
+const GxgAccordionItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.accordionItemClicked = createEvent(this, "accordionItemClicked", 7);
+    this.accordionItemLoaded = createEvent(this, "accordionItemLoaded", 7);
+    this.accordionTitleClicked = createEvent(this, "accordionTitleClicked", 7);
+    this.titleChanged = createEvent(this, "titleChanged", 7);
+    this.parts = {
+      header: "header",
+    };
+    /**
+     * The presence of this attribute makes the accordion-item disabled and not focusable
+     */
+    this.disabled = false;
+    /**
+     * The presence of this attribute makes the accordion title editable
+     */
+    this.editableTitle = false;
+    /**
+     * The accordion flavor (No need to set this attribute on each of the the accordion-item's, only once at gxg-accordion)
+     */
+    this.mode = "classical";
+    /**
+     * The accordion subtitle (optional)
+     */
+    this.itemSubtitle = null;
+    /**
+     * The accordion title icon
+     */
+    this.titleIcon = null;
+    /**
+     * Set the status to "open" if you want the accordion-item open by default
+     */
+    this.status = "closed";
+    /**
+     * The presence of this attribue adds a border to the accordion item.
+     */
+    this.hasBorder = false;
+    /*
+     *If this accordion is nested into an accordion-item
+     */
+    this.nestedAccordion = false;
+    /*
+     *accordion min-height
+     */
+    this.minHeight = null;
+    /*
+     *accordion mode
+     */
+    this.accordionMode = null;
+    /*
+     * Has slotted meta
+     */
+    this.hasSlottedMeta = null;
+    this.attachExportParts = () => {
+      const part = this.el.getAttribute("part");
+      const exportPartsResult = exportParts(part, this.parts);
+      exportPartsResult.length && (this.exportparts = exportPartsResult);
+    };
+  }
+  itemClickedHandler(e) {
+    if (e.detail != 0) {
+      this.accordionItemClicked.emit(this.itemId);
+    }
+  }
+  titleClickedHandler() {
+    this.accordionTitleClicked.emit("title clicked");
+  }
+  printIcon() {
+    let iType;
+    let iColor;
+    if (this.status === "open" && !this.disabled) {
+      iType = "navigation/chevron-up";
+      if (this.mode === "classical") {
+        iColor = "alwaysblack";
+      }
+      else if (this.mode === "boxed" || this.mode === "minimal") {
+        iColor = "onbackground";
+      }
+      else {
+        iColor = "negative";
+      }
+    }
+    else {
+      //item closed
+      iType = "navigation/chevron-down";
+      if (this.mode === "classical") {
+        if (this.disabled) {
+          iColor = "ondisabled";
+        }
+        else {
+          //item not disabled
+          iColor = "alwaysblack";
+        }
+      }
+      else if (this.mode === "boxed" || this.mode === "minimal") {
+        if (this.disabled) {
+          iColor = "disabled";
+        }
+        else {
+          iColor = "onbackground";
+        }
+      }
+      else {
+        //item alternate
+        iColor = "negative";
+      }
+    }
+    return (h("gxg-icon", { slot: "icon", size: "regular", type: iType, color: iColor }));
+  }
+  componentWillLoad() {
+    if (!this.itemId) {
+      console.warn("gxg-accordion-item 'itemId' property is mandatory.");
+    }
+    this.accordionItemLoaded.emit(this.itemId);
+    const slottedMeta = this.el.querySelector("[slot=meta]");
+    if (slottedMeta !== null) {
+      this.hasSlottedMeta = true;
+    }
+    this.attachExportParts();
+  }
+  componentDidLoad() {
+    //Get accordion mode
+    this.accordionMode = this.el.parentElement.getAttribute("mode");
+    //Detect if this accordion-item has an accordion in it
+    const accordion = this.el.querySelector("gxg-accordion");
+    if (accordion !== null) {
+      this.nestedAccordion = true;
+    }
+    //Detect click on input ".outer-wrapper"
+    const gxgFormText = this.el.shadowRoot.querySelector("gxg-form-text");
+    if (gxgFormText !== null) {
+      const outerWrapper = gxgFormText.shadowRoot.querySelector(".outer-wrapper");
+      outerWrapper.addEventListener("click", function (e) {
+        if (!e.path[0].classList.contains("input")) {
+          this.status = "closed";
+        }
+      }.bind(this));
+    }
+  }
+  ariaExpanded() {
+    if (this.status === "closed") {
+      return "false";
+    }
+    else {
+      return "true";
+    }
+  }
+  ariaDisabled() {
+    if (this.disabled) {
+      return "true";
+    }
+    else {
+      return "false";
+    }
+  }
+  gxgFormTextClickedHandler(e) {
+    e.stopPropagation();
+  }
+  changedTitleHandler(event) {
+    if (this.editableTitle) {
+      this.itemTitle = event.detail;
+      this.titleChanged.emit(this.itemTitle);
+    }
+  }
+  keyDownHandler(e) {
+    if (e.code === "Enter") {
+      this.accordionItemClicked.emit(this.itemId);
+    }
+  }
+  itemSubtitleTrimmed(subtitle) {
+    if (subtitle.length > 50) {
+      return subtitle;
+    }
+    else {
+      return "";
+    }
+  }
+  render() {
+    return (h(Host, { class: {
+        "nested-acordion": this.nestedAccordion,
+        "has-subtitle": this.itemSubtitle !== null,
+        large: state.large,
+      }, exportParts: this.exportparts ? this.exportparts : null }, 
+    //disabled layer prevents interacting with the component and enables to use "not-allowed" cursor
+    this.disabled ? h("div", { class: "disabled-layer" }) : null, h("div", { class: {
+        item: true,
+        "item--disabled": this.disabled === true,
+      } }, h("header", { class: "item__header" }, h("div", { class: "item__header__button", id: "accordion-" + this.itemId, onClick: this.itemClickedHandler.bind(this), tabindex: !this.disabled ? 0 : -1, "aria-expanded": this.ariaExpanded(), "aria-controls": this.itemId, "aria-disabled": this.ariaDisabled(), onKeyDown: this.keyDownHandler.bind(this), part: this.parts.header }, this.editableTitle &&
+      (this.mode === "classical" || this.mode === "boxed") ? (
+    //div.cover prevents the editable-title to be edited when the accordion-item is closed
+    h("div", { class: {
+        cover: true,
+        hidden: this.status === "open",
+      } })) : null, h("div", { class: "item__header__button__title-subtitle" }, h("h1", { class: "item__header__button__title-subtitle__title", onClick: this.titleClickedHandler.bind(this) }, this.titleIcon !== null &&
+      (this.accordionMode === "classical" ||
+        this.accordionMode === "boxed") ? (h("div", { class: "item__header__button__title-subtitle__title__icon" }, h("gxg-icon", { size: "regular", type: this.titleIcon, color: this.disabled ? "ondisabled" : "auto" }))) : null, this.editableTitle &&
+      (this.mode === "classical" || this.mode === "boxed") ? (
+    //editable title should only be available for "classical" or "boxed" modes
+    h("gxg-form-text", { onChange: (event) => this.changedTitleHandler(event), minimal: true, "over-dark-background": this.disabled && this.mode === "classical"
+        , value: this.itemTitle, onClick: this.gxgFormTextClickedHandler.bind(this), "text-style": "title-02", class: "input" })) : (this.itemTitle)), (this.mode === "classical" || this.mode === "boxed") &&
+      this.itemSubtitle !== null ? (h("h2", { class: "item__header__button__title-subtitle__subtitle", title: this.itemSubtitleTrimmed(this.itemSubtitle) }, this.itemSubtitle.length > 50
+      ? this.itemSubtitle.slice(0, 50) + "..."
+      : this.itemSubtitle)) : null), h("div", { class: "item__header__button__meta-icon-wrapper" }, this.hasSlottedMeta &&
+      (this.mode === "classical" || this.mode === "boxed") ? (h("div", { class: "item__header__button__meta-icon-wrapper__meta" }, h("slot", { name: "meta" }))) : null, h("div", { class: "item__header__button__meta-icon-wrapper__icon" }, this.printIcon())))), this.status === "open" && !this.disabled ? (h("main", { class: "item__container", id: this.itemId, role: "region", "aria-labelledby": "accordion-" + this.itemId }, h("slot", null))) : (""))));
+  }
+  get el() { return getElement(this); }
+};
+GxgAccordionItem.style = accordionItemCss;
+
+export { GxgAccordionItem as gxg_accordion_item };