@genexus/genexus-ide-ui 0.0.60 → 0.0.62

package/dist/{esm/gxg-ide-loader.entry.js → components/ide-loader.js}

@@ -1,10 +1,15 @@
-import { r as registerInstance, h, H as Host } from './index-0da01575.js';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './ch-window2.js';
+import { d as defineCustomElement$2 } from './ch-window-close2.js';
+import { d as defineCustomElement$1 } from './title2.js';
 
 const ideLoaderCss = ":host(.gxg--disabled) .form-element,:host(.gxg--disabled.form-element){pointer-events:none;background-color:var(--gxg-background-color--disabled) !important;color:var(--gxg-color--disabled) !important;border-color:var(--gxg-border-color--disabled) !important;cursor:default !important}:host{display:block}ch-window::part(mask){overflow:hidden}ch-window::part(main){height:100%}ch-window::part(window){width:100%;height:100%}.loader-wrapper{opacity:0;transition:var(--show-transition) opacity;width:100%;height:100%;display:flex;background-color:rgba(var(--color-background--rgb), 0.45);backdrop-filter:blur(15px);padding:var(--spacing-comp-05);flex-direction:column;gap:var(--spacing-comp-04);align-items:center;justify-content:center;box-sizing:border-box;-webkit-animation:wrapper 0.6s infinite alternate;animation:wrapper 0.6s infinite alternate;color:var(--color-on-secondary)}.loader-wrapper--visible{opacity:1}.loader-spinner{border:2px var(--gray-01) solid;border-top:2px var(--color-primary-enabled) solid;border-radius:50%;-webkit-animation:spinner 0.6s infinite linear;animation:spinner 0.6s infinite linear;width:30px;height:30px}.loader-description{max-width:400px;text-align:center}@keyframes wrapper{from{background-color:rgba(var(--color-background--rgb), 0.45)}to{background-color:rgba(var(--gray-02--rgb), 0.25)}}@-webkit-keyframes spinner{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(359deg)}}@keyframes spinner{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}";
 
-const IdeLoader = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
+const IdeLoader = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
     /*
   INDEX:
   1.OWN PROPERTIES
@@ -68,7 +73,41 @@ const IdeLoader = class {
   static get watchers() { return {
     "show": ["showHandler"]
   }; }
-};
-IdeLoader.style = ideLoaderCss;
+  static get style() { return ideLoaderCss; }
+}, [1, "gxg-ide-loader", {
+    "description": [1],
+    "show": [4],
+    "container": [16],
+    "showWindow": [32],
+    "showWrapper": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["gxg-ide-loader", "ch-window", "ch-window-close", "gxg-title"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gxg-ide-loader":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, IdeLoader);
+      }
+      break;
+    case "ch-window":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ch-window-close":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "gxg-title":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
 
-export { IdeLoader as gxg_ide_loader };
+export { IdeLoader as I, defineCustomElement as d };

package/dist/components/index.d.ts

@@ -1,26 +1,32 @@
 /* GenexusIdeUi custom elements */
-export { GxIdeBpmAppDeclaration as GxIdeBpmAppDeclaration } from '../types/components/application-declaration/bpm-app-declaration';
-export { GxIdeContainer as GxIdeContainer } from '../types/components/container/container';
+export { GxIdeBpmAppDeclaration as GxIdeBpmAppDeclaration } from '../types/components/bpm-application-declaration/bpm-app-declaration';
+export { GxIdeContainer as GxIdeContainer } from '../types/components/_helpers/container/container';
 export { GxIdeCreateKbFromServer as GxIdeCreateKbFromServer } from '../types/components/create-kb-from-server/create-kb-from-server';
-export { GxIdeDirectorySelector as GxIdeDirectorySelector } from '../types/components/directory-selector/directory-selector';
-export { GxIdeEntitySelector as GxIdeEntitySelector } from '../types/components/entity-selector/entity-selector';
+export { GxIdeDirectorySelector as GxIdeDirectorySelector } from '../types/components/_helpers/directory-selector/directory-selector';
+export { GxIdeEntitySelector as GxIdeEntitySelector } from '../types/components/_helpers/entity-selector/entity-selector';
+export { GxIdeFileSelector as GxIdeFileSelector } from '../types/components/file-selector/file-selector';
 export { GxIdeKbManagerExport as GxIdeKbManagerExport } from '../types/components/kb-manager-export/kb-manager-export';
-export { GxIdeListSelector as GxIdeListSelector } from '../types/components/list-selector/list-selector';
-export { GxIdeListSelectorItem as GxIdeListSelectorItem } from '../types/components/list-selector/list-selector-item/list-selector-item';
+export { GxIdeKbManagerImport as GxIdeKbManagerImport } from '../types/components/kb-manager-import/kb-manager-import';
+export { GxIdeListSelector as GxIdeListSelector } from '../types/components/_helpers/list-selector/list-selector';
+export { GxIdeListSelectorItem as GxIdeListSelectorItem } from '../types/components/_helpers/list-selector/list-selector-item/list-selector-item';
 export { GxIdeNewEnvironment as GxIdeNewEnvironment } from '../types/components/new-environment/new-environment';
 export { GxIdeNewKb as GxIdeNewKb } from '../types/components/new-kb/new-kb';
 export { GxIdeNewObject as GxIdeNewObject } from '../types/components/new-object/new-object';
 export { GxIdeObjectSelector as GxIdeObjectSelector } from '../types/components/object-selector/object-selector';
 export { GxIdeReferences as GxIdeReferences } from '../types/components/references/references';
 export { GxIdeShareKb as GxIdeShareKb } from '../types/components/share-kb/share-kb';
-export { GxIdeTeamDevCommit as GxIdeTeamDevCommit } from '../types/components/team-dev-commit/team-dev-commit';
-export { GxIdeTeamDevSelectRecentComment as GxIdeTeamDevSelectRecentComment } from '../types/components/team-dev-select-recent-comment/team-dev-select-recent-comment';
-export { GxIdeTeamDevUpdate as GxIdeTeamDevUpdate } from '../types/components/team-dev-update/team-dev-update';
-export { GxIdeTeamDevUpdatePartialSelection as GxIdeTeamDevUpdatePartialSelection } from '../types/components/team-dev-update-partial-selection/team-dev-update-partial-selection';
-export { GxIdeTeamDevUpdateToRevision as GxIdeTeamDevUpdateToRevision } from '../types/components/team-dev-update-to-revision/team-dev-update-to-revision';
-export { GxIdeTemplate as GxIdeTemplate } from '../types/components/_template/template';
+export { GxIdeStatusButtons as GxIdeStatusButtons } from '../types/components/_helpers/status-buttons/gx-ide-status-buttons';
+export { GxIdeSwitchPanel as GxIdeSwitchPanel } from '../types/components/_helpers/switcher/switch-panel/switch-panel';
+export { GxIdeSwitcher as GxIdeSwitcher } from '../types/components/_helpers/switcher/switcher';
+export { GxIdeTeamDevCommit as GxIdeTeamDevCommit } from '../types/components/team-dev/commit/team-dev-commit';
+export { GxIdeTeamDevSelectRecentComment as GxIdeTeamDevSelectRecentComment } from '../types/components/team-dev/select-recent-comment/team-dev-select-recent-comment';
+export { GxIdeTeamDevUpdate as GxIdeTeamDevUpdate } from '../types/components/team-dev/update/team-dev-update';
+export { GxIdeTeamDevUpdatePartialSelection as GxIdeTeamDevUpdatePartialSelection } from '../types/components/team-dev/update-partial-selection/team-dev-update-partial-selection';
+export { GxIdeTeamDevUpdateToRevision as GxIdeTeamDevUpdateToRevision } from '../types/components/team-dev/update-to-revision/team-dev-update-to-revision';
+export { GxIdeTemplate as GxIdeTemplate } from '../types/components/_starting-template/template';
 export { GxIdeTest as GxIdeTest } from '../types/components/_test/test';
-export { GxIdeTopBar as GxIdeTopBar } from '../types/components/top-bar/top-bar';
+export { GxIdeTitle as GxIdeTitle } from '../types/components/_helpers/title/title';
+export { GxIdeTopBar as GxIdeTopBar } from '../types/components/_helpers/top-bar/top-bar';
 export { GxIdeWWImages as GxIdeWwImages } from '../types/components/ww-images/ww-images';
 
 /**

package/dist/components/index.js

@@ -67,7 +67,9 @@ export { GxIdeContainer, defineCustomElement as defineCustomElementGxIdeContaine
 export { GxIdeCreateKbFromServer, defineCustomElement as defineCustomElementGxIdeCreateKbFromServer } from './gx-ide-create-kb-from-server.js';
 export { GxIdeDirectorySelector, defineCustomElement as defineCustomElementGxIdeDirectorySelector } from './gx-ide-directory-selector.js';
 export { GxIdeEntitySelector, defineCustomElement as defineCustomElementGxIdeEntitySelector } from './gx-ide-entity-selector.js';
+export { GxIdeFileSelector, defineCustomElement as defineCustomElementGxIdeFileSelector } from './gx-ide-file-selector.js';
 export { GxIdeKbManagerExport, defineCustomElement as defineCustomElementGxIdeKbManagerExport } from './gx-ide-kb-manager-export.js';
+export { GxIdeKbManagerImport, defineCustomElement as defineCustomElementGxIdeKbManagerImport } from './gx-ide-kb-manager-import.js';
 export { GxIdeListSelector, defineCustomElement as defineCustomElementGxIdeListSelector } from './gx-ide-list-selector.js';
 export { GxIdeListSelectorItem, defineCustomElement as defineCustomElementGxIdeListSelectorItem } from './gx-ide-list-selector-item.js';
 export { GxIdeNewEnvironment, defineCustomElement as defineCustomElementGxIdeNewEnvironment } from './gx-ide-new-environment.js';
@@ -76,6 +78,9 @@ export { GxIdeNewObject, defineCustomElement as defineCustomElementGxIdeNewObjec
 export { GxIdeObjectSelector, defineCustomElement as defineCustomElementGxIdeObjectSelector } from './gx-ide-object-selector.js';
 export { GxIdeReferences, defineCustomElement as defineCustomElementGxIdeReferences } from './gx-ide-references.js';
 export { GxIdeShareKb, defineCustomElement as defineCustomElementGxIdeShareKb } from './gx-ide-share-kb.js';
+export { GxIdeStatusButtons, defineCustomElement as defineCustomElementGxIdeStatusButtons } from './gx-ide-status-buttons.js';
+export { GxIdeSwitchPanel, defineCustomElement as defineCustomElementGxIdeSwitchPanel } from './gx-ide-switch-panel.js';
+export { GxIdeSwitcher, defineCustomElement as defineCustomElementGxIdeSwitcher } from './gx-ide-switcher.js';
 export { GxIdeTeamDevCommit, defineCustomElement as defineCustomElementGxIdeTeamDevCommit } from './gx-ide-team-dev-commit.js';
 export { GxIdeTeamDevSelectRecentComment, defineCustomElement as defineCustomElementGxIdeTeamDevSelectRecentComment } from './gx-ide-team-dev-select-recent-comment.js';
 export { GxIdeTeamDevUpdate, defineCustomElement as defineCustomElementGxIdeTeamDevUpdate } from './gx-ide-team-dev-update.js';
@@ -83,6 +88,7 @@ export { GxIdeTeamDevUpdatePartialSelection, defineCustomElement as defineCustom
 export { GxIdeTeamDevUpdateToRevision, defineCustomElement as defineCustomElementGxIdeTeamDevUpdateToRevision } from './gx-ide-team-dev-update-to-revision.js';
 export { GxIdeTemplate, defineCustomElement as defineCustomElementGxIdeTemplate } from './gx-ide-template.js';
 export { GxIdeTest, defineCustomElement as defineCustomElementGxIdeTest } from './gx-ide-test.js';
+export { GxIdeTitle, defineCustomElement as defineCustomElementGxIdeTitle } from './gx-ide-title.js';
 export { GxIdeTopBar, defineCustomElement as defineCustomElementGxIdeTopBar } from './gx-ide-top-bar.js';
 export { GxIdeWwImages, defineCustomElement as defineCustomElementGxIdeWwImages } from './gx-ide-ww-images.js';
 export { GxgAccordion, defineCustomElement as defineCustomElementGxgAccordion } from './gxg-accordion.js';
@@ -137,6 +143,7 @@ export { GxgOptions, defineCustomElement as defineCustomElementGxgOptions } from
 export { GxgOptionsItem, defineCustomElement as defineCustomElementGxgOptionsItem } from './gxg-options-item.js';
 export { GxgPaginator, defineCustomElement as defineCustomElementGxgPaginator } from './gxg-paginator.js';
 export { GxgPill, defineCustomElement as defineCustomElementGxgPill } from './gxg-pill.js';
+export { GxgPills, defineCustomElement as defineCustomElementGxgPills } from './gxg-pills.js';
 export { GxgProgressBar, defineCustomElement as defineCustomElementGxgProgressBar } from './gxg-progress-bar.js';
 export { GxgScroll, defineCustomElement as defineCustomElementGxgScroll } from './gxg-scroll.js';
 export { GxgSelect, defineCustomElement as defineCustomElementGxgSelect } from './gxg-select.js';
@@ -157,6 +164,7 @@ export { GxgTabs, defineCustomElement as defineCustomElementGxgTabs } from './gx
 export { GxgTest, defineCustomElement as defineCustomElementGxgTest } from './gxg-test.js';
 export { GxgText, defineCustomElement as defineCustomElementGxgText } from './gxg-text.js';
 export { GxgTitle, defineCustomElement as defineCustomElementGxgTitle } from './gxg-title.js';
+export { GxgTitleEditable, defineCustomElement as defineCustomElementGxgTitleEditable } from './gxg-title-editable.js';
 export { GxgToggle, defineCustomElement as defineCustomElementGxgToggle } from './gxg-toggle.js';
 export { GxgToolbar, defineCustomElement as defineCustomElementGxgToolbar } from './gxg-toolbar.js';
 export { GxgToolbarItem, defineCustomElement as defineCustomElementGxgToolbarItem } from './gxg-toolbar-item.js';

package/dist/components/list-selector-item.js

@@ -0,0 +1,175 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './icon.js';
+import { d as defineCustomElement$1 } from './icon2.js';
+
+const listSelectorItemCss = "*,::after,::before{box-sizing:border-box}gx-ide-list-selector-item{display:block;max-width:100%;display:flex;font-size:inherit}gx-ide-list-selector-item:hover .label{background-color:var(--gxg-background-color--hover);cursor:pointer}gx-ide-list-selector-item:hover input:checked+.label{background-color:var(--gxg-background-color--selected-hover)}gx-ide-list-selector-item:not(:first-child){border-block-start:var(--gx-ide-list-items-border)}gx-ide-list-selector-item:not(:first-child):has(input:checked){border-block-color:var(--gxg-border-color--selected)}gx-ide-list-selector-item[readonly]:not([readonly=false]) .label{pointer-events:none;background-color:transparent}gx-ide-list-selector-item[ellipsis]:not([ellipsis=false]) .label__description{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}input{width:0;height:0;opacity:0;margin:0}input:focus+.label{outline:var(--border-width-md) solid var(--color-primary-active);outline-offset:-2px}input:checked+.label{background-color:var(--gxg-background-color--selected)}.label{width:100%}.label__index{align-self:baseline}.label__wrapper{display:flex;min-height:28px;align-items:center;gap:var(--spacing-comp-02);padding:var(--spacing-comp-01) var(--spacing-comp-02);width:100%}.label__description{flex:1;display:flex;align-items:center;gap:var(--spacing-comp-02)}gx-ide-list-selector-item[no-border]{border-block-start:none}.label__universal-slot{display:flex;align-items:center;justify-content:center}";
+
+const GxIdeListSelectorItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.itemSelectionChanged = createEvent(this, "itemSelectionChanged", 7);
+    this.hasUniversalSlot = false;
+    this.index = undefined;
+    // 6.COMPONENT LIFECYCLE METHODS //
+    // 7.LISTENERS //
+    // 8.PUBLIC METHODS API //
+    // 9.LOCAL METHODS //
+    /**
+     * Checks if this item parentElement is a gx-ide-list-selector, and assigns a reference
+     */
+    this.evaluateParentIsListSelector = () => {
+      const parentList = this.el.parentElement;
+      this.parentIsListSelector = (parentList === null || parentList === void 0 ? void 0 : parentList.nodeName) === "GX-IDE-LIST-SELECTOR";
+      this.parentIsListSelector && (this.parentList = parentList);
+    };
+    /**
+     * Determines the type of item, based on the parent list-selector 'type' property value
+     */
+    this.evaluateType = () => {
+      const parentList = this.el
+        .parentElement;
+      this.type = parentList.type === "single-selection" ? "radio" : "checkbox";
+    };
+    /**
+     * Evaluates if is selectable, considering the parent list-selector 'selectable' property value, only if it is undefined on this item
+     */
+    this.evaluateSelectable = () => {
+      if (this.readonly === undefined && this.parentIsListSelector) {
+        this.readonly = this.parentList.readonly;
+      }
+    };
+    /**
+     * Evaluates if text should truncate with ellipsis, considering the parent list-selector 'ellipsis' property value, only if it is undefined on this item
+     */
+    this.evaluateEllipsis = () => {
+      if (this.ellipsis === undefined && this.parentIsListSelector) {
+        this.ellipsis = this.parentList.ellipsis;
+      }
+    };
+    /**
+     * Evaluates if this item should be initially checked, only if the parent list-selector listValue equals this item value.
+     */
+    this.evaluateChecked = () => {
+      if (this.checked === undefined &&
+        this.parentIsListSelector &&
+        this.parentList.value !== undefined &&
+        this.parentList.value === this.itemValue) {
+        this.checked = true;
+      }
+    };
+    this.evaluateBorder = () => {
+      if (this.parentIsListSelector) {
+        this.noBorder = this.parentList.noItemsBorder;
+      }
+    };
+    this.evaluateUniversalSlot = () => {
+      this.hasUniversalSlot = !!this.el.querySelector("[slot=universal]");
+    };
+    /**
+     * Gets the listName required value, that is needed for the list selection to properly work
+     */
+    this.assignName = () => {
+      this.parentIsListSelector &&
+        this.parentList.listName &&
+        (this.name = this.parentList.listName);
+    };
+    this.evaluateOrderedList = () => {
+      if (this.parentIsListSelector && this.parentList.ordered) {
+        let index = Array.from(this.parentList.children).indexOf(this.el) + 1;
+        if (index < 10) {
+          // This will make descriptions to be nicely aligned, between one digit, and two digit indexes items.
+          index = `0${index}`;
+        }
+        else {
+          index = `${index}`;
+        }
+        this.index = index;
+      }
+    };
+    this.evaluateIconColor = () => {
+      this.parentIsListSelector &&
+        this.parentList.iconsColor &&
+        this.iconColor === undefined &&
+        (this.iconColor = this.parentList.iconsColor);
+    };
+    this.evaluateIconSize = () => {
+      this.parentIsListSelector &&
+        this.parentList.iconsSize &&
+        (this.iconSize = this.parentList.iconsSize);
+    };
+    this.onChangeHandler = (e) => {
+      this.itemChecked = e.target.checked;
+      this.itemSelectionChanged.emit({
+        itemId: this.itemId,
+        itemValue: this.itemValue
+      });
+    };
+    this.itemId = undefined;
+    this.itemValue = undefined;
+    this.itemChecked = false;
+    this.readonly = undefined;
+    this.ellipsis = undefined;
+    this.icon = undefined;
+    this.iconColor = undefined;
+    this.iconSize = undefined;
+    this.noBorder = false;
+    this.universalSlotEnd = false;
+  }
+  // 5.EVENTS (EMIT) //
+  componentWillLoad() {
+    this.evaluateParentIsListSelector();
+    this.evaluateType();
+    this.evaluateSelectable();
+    this.evaluateEllipsis();
+    this.evaluateChecked();
+    this.evaluateIconColor();
+    this.evaluateIconSize();
+    this.evaluateBorder();
+    this.evaluateUniversalSlot();
+    this.assignName();
+    this.evaluateOrderedList();
+  }
+  // 10.RENDER() FUNCTION //
+  render() {
+    return (h(Host, { role: "listitem" }, h("input", { type: this.type, id: this.itemId, name: this.name, value: this.itemValue, checked: this.itemChecked, onChange: this.onChangeHandler, disabled: this.readonly, part: "input" }), h("label", { class: "label", htmlFor: this.itemId, part: "label" }, h("div", { class: "label__wrapper" }, this.index ? (h("span", { class: "label__index" }, this.index, ". ")) : null, this.icon ? (h("gxg-icon", { class: "label__icon", type: this.icon, size: this.iconSize, color: this.iconColor, part: "icon" })) : null, this.hasUniversalSlot ? (h("span", { class: "label__universal-slot", part: "universal-slot" }, h("slot", { name: "universal" }))) : null, h("span", { class: "label__description", part: "description" }, this.itemValue ? this.itemValue : h("slot", null))))));
+  }
+  get el() { return this; }
+  static get style() { return listSelectorItemCss; }
+}, [4, "gx-ide-list-selector-item", {
+    "itemId": [513, "item-id"],
+    "itemValue": [1, "item-value"],
+    "itemChecked": [1028, "item-checked"],
+    "readonly": [1540],
+    "ellipsis": [1540],
+    "icon": [1],
+    "iconColor": [1025, "icon-color"],
+    "iconSize": [1025, "icon-size"],
+    "noBorder": [1540, "no-border"],
+    "universalSlotEnd": [516, "universal-slot-end"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["gx-ide-list-selector-item", "ch-icon", "gxg-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gx-ide-list-selector-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GxIdeListSelectorItem);
+      }
+      break;
+    case "ch-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "gxg-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { GxIdeListSelectorItem as G, defineCustomElement as d };

package/dist/components/list-selector.js

@@ -0,0 +1,146 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './title2.js';
+
+const listSelectorCss = "*,::after,::before{box-sizing:border-box}:host{display:flex;flex-direction:column;max-height:100%;font-family:var(--font-family-primary)}gxg-title{display:block;margin-block-end:var(--gxg-label-margin-vertical)}.list{background-color:unset;border:none;color:inherit;font:inherit;margin:0;padding:0;outline:0;list-style-type:none;margin:0;padding:0;color:var(--gx-ide-component-text-color);background-color:var(--gx-ide-component-background-color);font-size:var(--gx-ide-component-text-size);font-weight:var(--font-weight-regular);display:block;background-color:var(--color-background);max-height:100%;overflow-y:auto;border:1px solid var(--gx-ide-container-border-color)}.list::-webkit-scrollbar{width:6px;height:6px}.list::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.list::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.list::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.list .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}:host([no-list-border]) .list{border:none}";
+
+const GxIdeListSelector = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.selectionChanged = createEvent(this, "selectionChanged", 7);
+    // 8.PUBLIC METHODS API //
+    // 9.LOCAL METHODS //
+    /**
+     * It evaluates the checked items, and checks or unchecks if needed
+     */
+    this.evaluateChecked = () => {
+      const allListItems = Array.from(this.el.querySelectorAll("gx-ide-list-selector-item"));
+      const checkedItems = allListItems.filter(item => item.itemChecked);
+      /**
+       * INDEX
+       * 1.required and no one checked
+       * 2.single-selection, and more than one checked
+       */
+      /* 1.required and no one checked*/
+      if (this.required && checkedItems.length === 0) {
+        allListItems[0].itemChecked = true;
+      }
+      else if (this.type === "single-selection" && checkedItems.length > 1) {
+        /* 2.single-selection, and more than one checked*/
+        checkedItems.forEach((item, i) => {
+          if (i !== 0) {
+            item.itemChecked = false;
+          }
+        });
+      }
+    };
+    /**
+     * It evaluates the initial value/s
+     */
+    this.evaluateInitialValue = () => {
+      const checkedItems = this.getChecked();
+      if (this.type === "single-selection" && checkedItems.length > 0) {
+        this.value = checkedItems[0].itemValue;
+      }
+      else if (this.type === "multi-selection" && checkedItems.length > 0) {
+        const values = [];
+        checkedItems.forEach(checked => {
+          values.push(checked.itemValue);
+        });
+        this.value = values;
+      }
+    };
+    this.getChecked = () => {
+      const checkedItems = [];
+      const allItems = this.el.querySelectorAll("gx-ide-list-selector-item");
+      allItems.forEach(item => {
+        if (item.itemChecked) {
+          checkedItems.push(item);
+        }
+      });
+      return checkedItems;
+    };
+    this.listTitle = undefined;
+    this.ordered = false;
+    this.readonly = false;
+    this.type = "single-selection";
+    this.required = false;
+    this.ellipsis = false;
+    this.value = undefined;
+    this.iconsColor = "auto";
+    this.iconsSize = "regular";
+    this.listName = undefined;
+    this.noItemsBorder = false;
+    this.noListBorder = false;
+  }
+  // 6.COMPONENT LIFECYCLE METHODS //
+  componentWillLoad() {
+    this.evaluateChecked();
+    this.evaluateInitialValue();
+  }
+  // 7.LISTENERS //
+  itemSelectionChangedHandler(event) {
+    event.stopPropagation();
+    const checkedItemsInfo = [];
+    const checkedItems = this.getChecked();
+    const newValue = [];
+    checkedItems.forEach(item => {
+      const value = item.itemValue;
+      newValue.push(value);
+      checkedItemsInfo.push({
+        itemId: item.itemId,
+        itemValue: value
+      });
+    });
+    /* update this.value*/
+    if (this.type === "single-selection" && newValue.length > 0) {
+      this.value = newValue[0] || undefined;
+    }
+    else {
+      /* multi-selection*/
+      this.value = newValue;
+    }
+    /* emit selectionChanged*/
+    this.selectionChanged.emit(checkedItemsInfo);
+  }
+  // 10.RENDER() FUNCTION //
+  render() {
+    return (h(Host, { exportparts: "input:input" }, this.listTitle ? (h("gxg-title", { type: "title-04" }, this.listTitle)) : null, this.ordered ? (h("ol", { class: "list", part: "list" }, h("slot", null))) : (h("ul", { class: "list", part: "list" }, h("slot", null)))));
+  }
+  get el() { return this; }
+  static get style() { return listSelectorCss; }
+}, [1, "gx-ide-list-selector", {
+    "listTitle": [1, "list-title"],
+    "ordered": [4],
+    "readonly": [4],
+    "type": [1],
+    "required": [4],
+    "ellipsis": [4],
+    "value": [1025],
+    "iconsColor": [1, "icons-color"],
+    "iconsSize": [1, "icons-size"],
+    "listName": [1, "list-name"],
+    "noItemsBorder": [4, "no-items-border"],
+    "noListBorder": [516, "no-list-border"]
+  }, [[2, "itemSelectionChanged", "itemSelectionChangedHandler"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["gx-ide-list-selector", "gxg-title"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gx-ide-list-selector":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GxIdeListSelector);
+      }
+      break;
+    case "gxg-title":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { GxIdeListSelector as G, defineCustomElement as d };

package/dist/components/title.js

@@ -1,65 +1,60 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { s as state } from './store.js';
+import { d as defineCustomElement$1 } from './title2.js';
 
-const titleCss = "/*! 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:var(--gxg-scrollbar-width, 6px)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);cursor:pointer}:host h1,:host h2,:host h3,:host h4,:host h5{margin:0;color:inherit;background-color:transparent}:host([alignment=start]) h1,:host([alignment=start]) h2,:host([alignment=start]) h3,:host([alignment=start]) h4,:host([alignment=start]) h5{text-align:start}:host([alignment=center]) h1,:host([alignment=center]) h2,:host([alignment=center]) h3,:host([alignment=center]) h4,:host([alignment=center]) h5{text-align:center}:host([alignment=end]) h1,:host([alignment=end]) h2,:host([alignment=end]) h3,:host([alignment=end]) h4,:host([alignment=end]) h5{text-align:end}:host(.large) .gxg-title-01{font-size:var(--font-size-xl)}:host(.large) .gxg-title-02{font-size:var(--font-size-lg)}:host(.large) .gxg-title-03{font-size:var(--font-size-lg)}:host(.large) .gxg-title-04{font-size:var(--font-size-xl)}:host(.large) .gxg-title-05{font-size:var(--font-size-lg)}";
+const titleCss = ":host{--gx-ide-title-padding:var(--gx-ide-container--padding, --spacing-comp-03);display:flex;flex-direction:column;color:var(--gx-ide-component-text-color);font-family:var(--font-family-primary);line-height:1.6em;background-color:transparent;padding:0}:host(.alignment--start){align-items:start}:host(.alignment--center){align-items:center}:host(.alignment--start){text-align:start}:host([padding]){padding:var(--gx-ide-title-padding)}:host([no-padding-bottom]){padding-bottom:0}:host([border]){border-bottom:1px solid var(--gx-ide-container-border-color)}:host(.title-type--secondary){color:var(--gray-06)}";
 
-const GxgTitle = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const GxIdeTitle = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
-    /**
-     * Title type
-     */
-    this.type = "title-01";
-    /**
-     * Title type
-     */
+    this.titleCaption = undefined;
+    this.type = "primary";
     this.alignment = "start";
+    this.padding = false;
+    this.noPaddingBottom = false;
+    this.border = false;
   }
-  titleType() {
-    let title;
-    switch (this.type) {
-      case "title-01":
-        title = (h("h1", { class: "gxg-title-01", part: "title" }, h("slot", null)));
-        break;
-      case "title-02":
-        title = (h("h2", { class: "gxg-title-02", part: "title" }, h("slot", null)));
-        break;
-      case "title-03":
-        title = (h("h3", { class: "gxg-title-03", part: "title" }, h("slot", null)));
-        break;
-      case "title-04":
-        title = (h("h4", { class: "gxg-title-04", part: "title" }, h("slot", null)));
-        break;
-      case "title-05":
-        title = (h("h5", { class: "gxg-title-05", part: "title" }, h("slot", null)));
-        break;
-      default:
-        title = (h("h1", { class: "gxg-title-06", part: "title" }, h("slot", null)));
+  componentWillLoad() {
+    if (this.type === "primary") {
+      this.geminiType = "title-04";
+    }
+    else if (this.type === "secondary") {
+      this.geminiType = "title-05";
     }
-    return title;
   }
   render() {
-    return h(Host, { class: { large: state.large } }, this.titleType(), " ");
+    return (h(Host, { class: {
+        [`alignment--${this.alignment}`]: true,
+        [`title-type--${this.type}`]: true
+      } }, h("gxg-title", { type: this.geminiType }, h("slot", null))));
   }
   static get style() { return titleCss; }
-}, [1, "gxg-title", {
+}, [1, "gx-ide-title", {
+    "titleCaption": [1, "title-caption"],
     "type": [1],
-    "alignment": [513]
+    "alignment": [1],
+    "padding": [516],
+    "noPaddingBottom": [516, "no-padding-bottom"],
+    "border": [516]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["gxg-title"];
+  const components = ["gx-ide-title", "gxg-title"];
   components.forEach(tagName => { switch (tagName) {
+    case "gx-ide-title":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GxIdeTitle);
+      }
+      break;
     case "gxg-title":
       if (!customElements.get(tagName)) {
-        customElements.define(tagName, GxgTitle);
+        defineCustomElement$1();
       }
       break;
   } });
 }
 
-export { GxgTitle as G, defineCustomElement as d };
+export { GxIdeTitle as G, defineCustomElement as d };