@genexus/genexus-ide-ui 0.0.99 → 0.0.101

package/dist/genexus-ide-ui/p-4bd869d3.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["importFromDesignCss","DESIGN_DATA_TYPE_PANELS","DESIGN_DATA_TYPE_STENCILS","DESIGN_DATA_TYPE_IMAGES","DESIGN_DATA_TYPE_DESIGN_SYSTEM","DESIGN_DATA_TYPE_FONTS","GxIdeImportFromDesign","this","renderedFirstTime","loadedItems","Map","panelsSelected","stencilsSelected","fontsSelected","attachTreeMouseListeners","treeDataEl","addEventListener","treeMouseEnter","treeMouseLeave","removeTreeMouseListeners","removeEventListener","shrunkenTree","messageType","message","type","objectsTreeSelectedItemsChangedHandler","async","event","detail","length","item","_a","itemComposedId","id","idList","split","itemId","itemDesignType","selectedDesignType","loadedItem","getLoadedItem","designDataDetail","getDesignDataDetail","set","designType","selectedDesignItem","getCodeFactory","renderDetailDataTree","get","objectsTreeCheckedItemsChangedHandler","items","Array","from","values","currentParentId","result","startsWith","checked","parentId","push","fonts","panels","stencils","selectFile","optionPathEl","openFile","pathOnInputHandler","e","path","pathOnFileSelected","selectedFile","fileName","name","evaluateAccessToken","showAccessToken","requiresAccessTokenCallback","value","loadData","isLoading","source","token","accessTokenEl","undefined","designData","loadCallback","messageCallback","then","messages","map","loadFn","loadImageCallback","loadDesignSystemCallback","loadFontCallback","loadPanelDataCallback","returnedData","data","confirm","confirmCallback","moduleId","_b","filterModuleEl","styleName","optionStyleEl","importAsWebPanels","optionImportAsEl","cancel","cancelCallback","fitImagesHandler","fitImages","shrinkTreeHandler","shrinkTree","renderOptions","h","class","_componentLocale","options","onInput","onFileSelected","onBlur","ref","el","part","disabled","acceptFile","extensions","placeholder","pathPlaceholder","onClick","btnLoad","accessToken","style","styles","renderFormItems","module","defaultModule","defaultValue","selectEntityCallback","selectModuleCallback","label","importAs","designDataTreeDataModel","onChange","toggleTree","renderMessages","messagesList","text","renderMain","main","renderDesignTree","renderDesignTabs","renderNoDesignData","textAlign","config","gxgMessage","common","padding","maxWidth","noDesignSelected","selectDesign","treeModel","dragDisabled","dropDisabled","toggleCheckboxes","checkbox","onCheckedItemsChange","onSelectedItemsChange","renderFooter","slot","footer","btnOk","btnCancel","renderPanelTab","renderControlsTree","detailTreeModel","composition","preview","src","alt","renderImageTab","noPadding","buttonsBorderAbove","hidden","tabs","tokens","tab","key","code","tokensFactoryRenderEl","stylesFactoryRenderEl","codeFactoryRenderEl","watchDesignDataHandler","newDesignData","leaf","caption","tree","leftImgSrc","expanded","images","designSystem","watchShrinkTreeHandler","shrink","componentWillLoad","Locale","getComponentStrings","componentDidRender","componentDidRenderFirstTime","emit","componentName","disconnectedCallback","watchMessagesHandler","newValue","oldValue","scrollTop","scrollHeight","validate","isValid","loadTreeItemCompositionModel","controls","modelList","control","model","Object","assign","textEditorFactoryCallback","render","Host","noContentPadding","noContentGap","displayBorderBottom","slimmerFooter","gxIdeContainer","containerTitle","displayTitle"],"sources":["src/components/import-from-design/import-from-design.scss?tag=gx-ide-import-from-design&encapsulation=shadow","src/components/import-from-design/import-from-design.tsx"],"sourcesContent":["@import \"../../global/gx-ide-common.scss\";\n@import \"../../global/gx-ide-mixins.scss\";\n@import \"~@genexus/gemini/dist/collection/globals/mixins.scss\";\n\n:host {\n}\n\n/*--- Options ---*/\n.options {\n  padding: var(--gx-ide-container__padding);\n  border-block-end: 1px solid var(--gx-ide-container-border-color);\n  grid-template-columns: auto 1fr;\n  grid-template-areas:\n    \"path-url-label path-url-wrapper\"\n    \"access-token-label access-token\"\n    \"style-label style\"\n    \"module-label module\"\n    \"checkboxes-options checkboxes-options\";\n\n  .path-url-label {\n    grid-area: path-url-label;\n  }\n  .path-url-wrapper {\n    grid-area: path-url-wrapper;\n    display: flex;\n    flex-direction: row;\n    gap: var(--gx-ide-grid-row-gap);\n\n    &__buttons-container {\n      display: flex;\n      flex-direction: row;\n      gap: var(--gx-ide-container-elements-spacing);\n    }\n  }\n  .access-token-label {\n    grid-area: access-token-label;\n  }\n  .access-token {\n    grid-area: access-token;\n  }\n  .style-label {\n    grid-area: style-label;\n  }\n  .style {\n    grid-area: style;\n  }\n  .module-label {\n    grid-area: module-label;\n  }\n  .module {\n    grid-area: module;\n  }\n  .checkboxes-options {\n    grid-area: checkboxes-options;\n  }\n\n  &--hide-access-token {\n    grid-template-areas:\n      \"path-url-label path-url-wrapper\"\n      \"style-label style\"\n      \"module-label module\"\n      \"checkboxes-options checkboxes-options\";\n  }\n\n  .checkboxes-options {\n    display: flex;\n    justify-content: space-between;\n    gap: var(--gx-ide-grid-row-gap);\n\n    &__col-right {\n      display: flex;\n      opacity: 1;\n      transition: opacity 200ms;\n      gap: var(--gx-ide-grid-row-gap);\n      &--hidden {\n        opacity: 0;\n      }\n    }\n  }\n}\n\n/*--- Messages Grid ---*/\n.messages-container {\n  padding: var(--gx-ide-container__padding);\n  height: 100%;\n  overflow-y: auto;\n  @include gxg-scrollbar;\n}\n\n/*--- Main ---*/\n.main {\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  overflow: auto;\n  .design-tree,\n  .design-tabs {\n    transition: flex 200ms;\n  }\n  .tree-container {\n    flex: 1;\n  }\n  .design-tabs {\n    flex: 2;\n\n    &--fit-images {\n      img {\n        object-fit: contain;\n        width: 100%;\n        height: 100%;\n      }\n    }\n    img {\n      display: block;\n    }\n  }\n  &--shrunken-tree {\n    .tree-container {\n      flex: 0.5;\n    }\n    .design-tabs {\n      flex: 2.5;\n    }\n  }\n}\n.panel-tab {\n  height: 100%;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n\n  .panel-item {\n    width: 100%;\n    height: 100%;\n    overflow: auto;\n    @include gxg-scrollbar;\n    font-size: var(--mer-font__size--xxs);\n    line-height: normal;\n  }\n}\n\n/*--- Tabs ---*/\n.tab--hidden {\n  display: none;\n}\n","/* STENCIL IMPORTS */\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n  Method,\n  Watch\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\nimport {\n  TextAlign,\n  TextPadding,\n  TextType\n} from \"@genexus/gemini/dist/types/components/text/text\";\nimport { TreeViewItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/tree-view/tree-view/types\";\nimport { TreeViewItemModelExtended } from \"@genexus/chameleon-controls-library/dist/types/components/renders/tree-view/types\";\n/* CUSTOM IMPORTS */\nimport { Locale } from \"../../common/locale\";\nimport { config } from \"../../common/config\";\nimport { renderFormItems } from \"../../common/common\";\nimport { EntityData, GxOption } from \"../../common/types\";\nimport { CheckboxInfo } from \"@genexus/gemini\";\n\nconst DESIGN_DATA_TYPE_PANELS = \"panels\";\nconst DESIGN_DATA_TYPE_STENCILS = \"stencils\";\nconst DESIGN_DATA_TYPE_IMAGES = \"images\";\nconst DESIGN_DATA_TYPE_DESIGN_SYSTEM = \"design_system\";\nconst DESIGN_DATA_TYPE_FONTS = \"fonts\";\n\n@Component({\n  tag: \"gx-ide-import-from-design\",\n  styleUrl: \"import-from-design.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/import-from-design\"]\n})\nexport class GxIdeImportFromDesign {\n  /*\nINDEX:\n1.OWN PROPERTIES\n2.REFERENCE TO ELEMENTS\n3.STATE() VARIABLES\n4.PUBLIC PROPERTY API\n5.EVENTS (EMIT)\n6.COMPONENT LIFECYCLE EVENTS\n7.LISTENERS\n8.PUBLIC METHODS API\n9.LOCAL METHODS\n10.RENDER() FUNCTION\n*/\n\n  // 1.OWN PROPERTIES //\n\n  /**\n   * The component hard-coded strings translations.\n   */\n  private _componentLocale: any;\n  private renderedFirstTime = false;\n  /**\n   * An array that keeps track of the tree items id's (design system data type + item id) along with the content, that will be used to save and retrieve items information, in order to avoid using a callback to get items information that was already get. loadedItemsArray will be reset every time a new design is loaded.\n   */\n  private loadedItems: Map<string, ItemLoadedInfo> = new Map();\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeImportFromDesignElement;\n\n  /* References needed to collect data */\n  private optionPathEl!: HTMLGxgFormTextElement;\n  private accessTokenEl!: HTMLGxgFormTextElement;\n  private optionStyleEl!: HTMLGxgComboBoxElement;\n  private optionImportAsEl!: HTMLGxgFormCheckboxElement;\n  private filterModuleEl!: HTMLGxIdeEntitySelectorElement;\n  private messagesList: HTMLElement;\n  private panelsSelected: string[] = [];\n  private stencilsSelected: string[] = [];\n  // private imagesSelected: string[] = [];\n  // private designSystemSelected: string[] = [];\n  private fontsSelected: string[] = [];\n  private codeFactoryRenderEl!: HTMLElement;\n  private tokensFactoryRenderEl!: HTMLElement;\n  private stylesFactoryRenderEl!: HTMLElement;\n  private treeDataEl!: HTMLGxgTreeViewElement;\n\n  // 3.STATE() VARIABLES //\n\n  /**\n   * The design data loaded from file\n   */\n  @State() designData: DesignData = null;\n  @Watch(\"designData\")\n  watchDesignDataHandler(newDesignData: DesignData) {\n    if (newDesignData) {\n      this.designDataTreeDataModel = [\n        {\n          id: `parent@${DESIGN_DATA_TYPE_PANELS}`,\n          class: \"category tree-view-item\",\n          leaf: false,\n          caption: this._componentLocale.tree.panels,\n          leftImgSrc: \"general/knowledge-base\",\n          checkbox: true,\n          checked: true,\n          expanded: true,\n          items: this.designData.panels.map(item => ({\n            id: `${item.id}@${DESIGN_DATA_TYPE_PANELS}`,\n            class: \"object tree-view-item\",\n            leaf: true,\n            caption: item.name,\n            leftImgSrc: \"general/generator\",\n            checkbox: true,\n            checked: true\n          }))\n        },\n        {\n          id: `parent@${DESIGN_DATA_TYPE_STENCILS}`,\n          class: \"category tree-view-item\",\n          leaf: false,\n          caption: this._componentLocale.tree.stencils,\n          leftImgSrc: \"general/knowledge-base\",\n          checkbox: true,\n          checked: true,\n          expanded: true,\n          items: this.designData.stencils.map(item => ({\n            id: `${item.id}@${DESIGN_DATA_TYPE_STENCILS}`,\n            class: \"object tree-view-item\",\n            leaf: true,\n            caption: item.name,\n            leftImgSrc: \"general/generator\",\n            checkbox: true,\n            checked: true\n          }))\n        },\n        {\n          id: `parent@${DESIGN_DATA_TYPE_IMAGES}`,\n          class: \"category tree-view-item\",\n          leaf: false,\n          caption: this._componentLocale.tree.images,\n          leftImgSrc: \"general/knowledge-base\",\n          checkbox: true,\n          checked: true,\n          expanded: true,\n          items: this.designData.images.map(item => ({\n            id: `${item.id}@${DESIGN_DATA_TYPE_IMAGES}`,\n            class: \"object tree-view-item\",\n            leaf: true,\n            caption: item.name,\n            leftImgSrc: \"general/generator\",\n            checkbox: true,\n            checked: true\n          }))\n        },\n        {\n          id: `parent@${DESIGN_DATA_TYPE_DESIGN_SYSTEM}`,\n          class: \"category tree-view-item\",\n          leaf: false,\n          caption: this._componentLocale.tree.designSystem,\n          leftImgSrc: \"general/knowledge-base\",\n          checkbox: true,\n          checked: true,\n          expanded: true,\n          items: this.designData.designSystem.map(item => ({\n            class: \"object tree-view-item\",\n            leaf: true,\n            id: `${item.id}@${DESIGN_DATA_TYPE_DESIGN_SYSTEM}`,\n            caption: item.name,\n            leftImgSrc: \"general/generator\",\n            checkbox: true,\n            checked: true\n          }))\n        },\n        {\n          id: `parent@${DESIGN_DATA_TYPE_FONTS}`,\n          class: \"category tree-view-item\",\n          leaf: false,\n          caption: this._componentLocale.tree.fonts,\n          leftImgSrc: \"general/knowledge-base\",\n          checkbox: true,\n          checked: true,\n          expanded: true,\n          items: this.designData.fonts.map(item => ({\n            id: `${item.id}@${DESIGN_DATA_TYPE_FONTS}`,\n            class: \"object tree-view-item\",\n            leaf: true,\n            caption: item.name,\n            leftImgSrc: \"general/generator\",\n            checkbox: true,\n            checked: true\n          }))\n        }\n      ];\n    }\n  }\n\n  /**\n   * The model data loaded into the detail tree\n   */\n  @State() detailTreeModel: TreeViewItemModel[] = [];\n\n  /**\n   * If the design data is loading or not, for disabled actions\n   */\n  @State() isLoading = false;\n\n  /**\n   * The messages receive when the file is loading\n   */\n  @State() messages: MessageData[] = [];\n\n  /**\n   * The path/URL for load the design data\n   */\n  @State() path = \"\";\n\n  /**\n   * The file selected for load the design data\n   */\n  @State() selectedFile: File;\n\n  /**\n   * The type of the design data selected for show it visual tabs\n   */\n  @State() selectedDesignType: DesignType;\n\n  /**\n   * The item of the design data selected for show its contents on visual tabs\n   */\n  @State() selectedDesignItem: any;\n\n  /**\n   * When show or not the acces token input field\n   */\n  @State() showAccessToken: any;\n\n  /**\n   * the design data tree view data model\n   */\n  @State() designDataTreeDataModel: TreeViewItemModel[] = [];\n\n  /**\n   * Used to trigger a re-render after an item has been selected on renderDesignTree, in order to set the first tab as the active tab (setFirstActiveTab()), since calling this method inside objectsTreeSelectedItemsChangedHandler does not always work without a setTimeOut.\n   */\n  @State() updateTabsActiveTab: boolean = false;\n\n  /**\n   * If true, images will be fitted in the container\n   */\n  @State() fitImages = false;\n\n  /**\n   * If true, the left tree will be shrink and expanded to allow more space for the content\n   */\n  @State() shrinkTree = false;\n  @Watch(\"shrinkTree\")\n  watchShrinkTreeHandler(shrink: boolean) {\n    if (shrink) {\n      this.attachTreeMouseListeners();\n    } else {\n      this.removeTreeMouseListeners();\n    }\n  }\n\n  /**\n   * If true the left tree will be shrunken\n   */\n  @State() shrunkenTree = false;\n\n  @State() treeSh = false;\n\n  // 4.PUBLIC PROPERTY API //\n\n  /**\n   * If true it displays the component title on the header\n   */\n  @Prop() readonly displayTitle = false;\n\n  /**\n   * The valid extensions for the files that will be loaded in Path/URL (ie.: \".fig, .sketch\")\n   */\n  @Prop() readonly extensions!: string;\n\n  /**\n   * The default value for the module/folder filter\n   */\n  @Prop() readonly defaultModule: EntityData;\n\n  /**\n   * Callback invoked when the action is executed in the Module/Folder filter. It returns the information of the selected object (id and name) or 'undefined' if it was canceled.\n   */\n  @Prop() readonly selectModuleCallback: SelectModuleCallback;\n\n  /**\n   * This is a function provided by the developer that cancel the load operation.\n   */\n  @Prop() readonly cancelCallback!: CancelCallback;\n\n  /**\n   * This is a function provided by the developer that init the process of import a design.\n   */\n  @Prop() readonly confirmCallback!: ConfirmCallback;\n\n  /**\n   * This is a function provided by the developer that return the list of types of data loaded from file or url.\n   */\n  @Prop() readonly loadCallback!: LoadCallback;\n\n  /**\n   * This is a function provided by the developer that return the information of a Design System type of data.\n   */\n  // eslint-disable-next-line prettier/prettier\n  @Prop() readonly loadDesignSystemCallback!: LoadDesignSystemCallback;\n\n  /**\n   * This is a function provided by the developer that return the information of a Font type of data.\n   */\n  @Prop() readonly loadFontCallback!: LoadFontCallback;\n\n  /**\n   * This is a function provided by the developer that return the information of an Image System type of data.\n   */\n  @Prop() readonly loadImageCallback!: LoadImageCallback;\n\n  /**\n   * This is a function provided by the developer that return the information of a Panel type of data.\n   */\n  @Prop() readonly loadPanelDataCallback!: LoadPanelDataCallback;\n\n  /**\n   * Callback invoked to determinate if accessing to a design requires an authentication token\n   */\n  @Prop() readonly requiresAccessTokenCallback!: RequiresAccessTokenCallback;\n\n  /**\n   * Applies a shadow all around\n   */\n  @Prop() readonly shadow = false;\n\n  /**\n   * The styles render in the option style selector\n   */\n  @Prop() readonly styles!: GxOption[];\n\n  /**\n   * This is a function provided by the developer for create an instance of a text editor.\n   */\n  // eslint-disable-next-line prettier/prettier\n  @Prop() readonly textEditorFactoryCallback!: TextEditorFactoryCallback;\n\n  // 5.EVENTS (EMIT) //\n\n  /**\n   * This event is emitted once just after the component is fully loaded and the first render() occurs\n   */\n  @Event() componentDidRenderFirstTime: EventEmitter<boolean>;\n\n  // 6.COMPONENT LIFECYCLE EVENTS //\n\n  async componentWillLoad() {\n    this._componentLocale = await Locale.getComponentStrings(this.el);\n  }\n\n  componentDidRender() {\n    if (!this.renderedFirstTime) {\n      this.componentDidRenderFirstTime.emit(\n        this._componentLocale.componentName\n      );\n      this.renderedFirstTime = true;\n    }\n  }\n\n  disconnectedCallback() {\n    this.removeTreeMouseListeners();\n  }\n\n  // 7.LISTENERS //\n\n  @Watch(\"messages\")\n  watchMessagesHandler(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      if (this.messagesList) {\n        this.messagesList.scrollTop = this.messagesList.scrollHeight;\n      }\n    }\n  }\n\n  // 8.PUBLIC METHODS API //\n\n  /**\n   * Validate necessary data input\n   */\n  @Method()\n  async validate(): Promise<boolean> {\n    const isValid = true;\n    return isValid;\n  }\n\n  // 9.LOCAL METHODS //\n\n  private attachTreeMouseListeners = () => {\n    this.treeDataEl.addEventListener(\"mouseenter\", this.treeMouseEnter);\n    this.treeDataEl.addEventListener(\"mouseleave\", this.treeMouseLeave);\n  };\n  private removeTreeMouseListeners = () => {\n    this.treeDataEl.removeEventListener(\"mouseenter\", this.treeMouseEnter);\n    this.treeDataEl.removeEventListener(\"mouseleave\", this.treeMouseLeave);\n  };\n  private treeMouseEnter = () => {\n    this.shrunkenTree = false;\n  };\n  private treeMouseLeave = () => {\n    this.shrunkenTree = true;\n  };\n\n  private messageType = (message: MessageData): TextType => {\n    if (message.type === \"error\") {\n      return \"text-alert-error\";\n    } else if (message.type === \"warning\") {\n      return \"text-alert-warning\";\n    } else {\n      return \"text-gray\";\n    }\n  };\n\n  private loadTreeItemCompositionModel(\n    controls: DesignPanelControlData[]\n  ): TreeViewItemModel[] {\n    const modelList: TreeViewItemModel[] = [];\n    for (const control of controls) {\n      let model: TreeViewItemModel = {\n        id: control.name,\n        caption: control.name,\n        leftImgSrc: control.type,\n        checkbox: false,\n        expanded: true,\n        leaf: control.leaf\n      };\n      if (control.controls) {\n        model = {\n          ...model,\n          items: this.loadTreeItemCompositionModel(control.controls)\n        };\n      }\n      modelList.push(model);\n    }\n    return modelList;\n  }\n\n  private objectsTreeSelectedItemsChangedHandler = async (\n    event: CustomEvent<TreeViewItemModelExtended[]>\n  ) => {\n    if (event.detail.length) {\n      const item = event.detail[0]?.item;\n      const itemComposedId = item.id;\n      const idList = itemComposedId.split(\"@\");\n      const itemId = idList[0];\n      const itemDesignType: DesignType = idList[1] as DesignType;\n      if (itemId && itemId !== \"parent\") {\n        this.selectedDesignType = itemDesignType;\n        const loadedItem = this.getLoadedItem(itemComposedId);\n        if (!loadedItem) {\n          const designDataDetail: DesignItemDataDetail =\n            await this.getDesignDataDetail(itemId, this.selectedDesignType);\n          this.loadedItems.set(itemComposedId, {\n            designType: this.selectedDesignType,\n            designDataDetail: designDataDetail\n          });\n        } else {\n          /* Item has been queried already. The item content exists already. */\n          this.selectedDesignType = loadedItem.designType;\n          this.selectedDesignItem = loadedItem.designDataDetail;\n          this.getCodeFactory(loadedItem.designType);\n          this.renderDetailDataTree(loadedItem.designType);\n        }\n      }\n    }\n  };\n\n  private getLoadedItem = (id: string): ItemLoadedInfo | undefined => {\n    return this.loadedItems?.get(id);\n  };\n\n  private objectsTreeCheckedItemsChangedHandler = (\n    event: CustomEvent<Map<string, TreeViewItemModelExtended>>\n  ) => {\n    const items = Array.from(event.detail.values());\n    let currentParentId = null;\n    const result: { [key: string]: string[] } = {};\n\n    for (const item of items) {\n      if (item.item.id.startsWith(\"parent@\")) {\n        currentParentId = item.item.id.split(\"@\")[1];\n        result[currentParentId] = [];\n      } else if (item.item.checked && currentParentId) {\n        const parentId = item.item.id.split(\"@\")[1];\n        if (parentId === currentParentId) {\n          const id = item.item.id.split(\"@\")[0];\n          result[currentParentId].push(id);\n        }\n      }\n    }\n    // const { designSystem, fonts, images, panels, stencils } = result;\n    const { fonts, panels, stencils } = result;\n\n    // this.designSystemSelected = designSystem;\n    this.fontsSelected = fonts;\n    // this.imagesSelected = images;\n    this.panelsSelected = panels;\n    this.stencilsSelected = stencils;\n  };\n\n  private selectFile = (): void => {\n    this.optionPathEl.openFile();\n  };\n\n  private pathOnInputHandler = (e: any) => {\n    this.path = e.detail;\n  };\n\n  private pathOnFileSelected = (e: any) => {\n    this.selectedFile = e.detail[0];\n    const fileName = e.detail[0].name;\n    this.path = fileName;\n\n    this.evaluateAccessToken();\n  };\n\n  private evaluateAccessToken = async () => {\n    this.showAccessToken = await this.requiresAccessTokenCallback(\n      this.optionPathEl.value\n    );\n  };\n\n  private loadData = async (): Promise<void> => {\n    this.isLoading = true;\n    const source = this.selectedFile ? this.selectedFile : this.path;\n    const token = this.accessTokenEl ? this.accessTokenEl.value : undefined;\n    this.designData = null;\n    await this.loadCallback(source, token, this.messageCallback).then(\n      (designData: DesignData) => {\n        // this.isLoading = false;\n        this.messages = [];\n        this.designData = designData;\n        if (this.designData) {\n          this.panelsSelected = [\n            ...this.designData.panels.map(item => item.id)\n          ];\n          this.stencilsSelected = [\n            ...this.designData.stencils.map(item => item.id)\n          ];\n          // this.imagesSelected = [\n          //   ...this.designData.images.map(item => item.id)\n          // ];\n          // this.designSystemSelected = [\n          //   ...this.designData.designSystem.map(item => item.id)\n          // ];\n          this.fontsSelected = [...this.designData.fonts.map(item => item.id)];\n        } else {\n          // There was probably an error\n          this.panelsSelected = [];\n          this.stencilsSelected = [];\n          // this.imagesSelected = [];\n          // this.designSystemSelected = [];\n          this.fontsSelected = [];\n        }\n      }\n    );\n    this.isLoading = false;\n  };\n\n  private messageCallback: LoadMessageCallback = message => {\n    this.messages = [...this.messages, message];\n  };\n\n  private getDesignDataDetail = async (\n    id: string,\n    designType: DesignType\n  ): Promise<DesignItemDataDetail> => {\n    let loadFn:\n      | LoadPanelDataCallback\n      | LoadImageCallback\n      | LoadFontCallback\n      | LoadDesignSystemCallback;\n\n    switch (designType) {\n      case DESIGN_DATA_TYPE_IMAGES:\n        loadFn = this.loadImageCallback;\n        break;\n      case DESIGN_DATA_TYPE_DESIGN_SYSTEM:\n        loadFn = this.loadDesignSystemCallback;\n        break;\n      case DESIGN_DATA_TYPE_FONTS:\n        loadFn = this.loadFontCallback;\n        break;\n      case DESIGN_DATA_TYPE_PANELS:\n      case DESIGN_DATA_TYPE_STENCILS:\n        loadFn = this.loadPanelDataCallback;\n        break;\n    }\n\n    let returnedData: DesignItemDataDetail;\n    await loadFn(id).then((data: DesignItemDataDetail) => {\n      this.selectedDesignType = designType;\n      this.selectedDesignItem = data;\n      this.getCodeFactory(designType);\n      this.renderDetailDataTree(designType);\n      returnedData = data;\n    });\n\n    return returnedData;\n  };\n\n  private getCodeFactory(designType: string) {\n    switch (designType) {\n      case DESIGN_DATA_TYPE_PANELS:\n      case DESIGN_DATA_TYPE_STENCILS:\n        this.textEditorFactoryCallback(\n          \"html\",\n          this.codeFactoryRenderEl,\n          this.selectedDesignItem.code\n        );\n        break;\n      case DESIGN_DATA_TYPE_DESIGN_SYSTEM:\n        this.textEditorFactoryCallback(\n          \"tokens\",\n          this.tokensFactoryRenderEl,\n          this.selectedDesignItem.tokens\n        );\n        this.textEditorFactoryCallback(\n          \"styles\",\n          this.stylesFactoryRenderEl,\n          this.selectedDesignItem.styles\n        );\n        break;\n    }\n  }\n\n  private confirm = (): void => {\n    this.confirmCallback({\n      panels: this.panelsSelected,\n      stencils: this.stencilsSelected,\n      fonts: this.fontsSelected,\n      /* images: this.imagesSelected, */\n      moduleId: this.filterModuleEl?.value?.id,\n      styleName: this.optionStyleEl.value,\n      importAsWebPanels: this.optionImportAsEl.checked\n    });\n  };\n\n  private cancel = (): void => {\n    this.cancelCallback();\n    this.isLoading = false;\n  };\n\n  private fitImagesHandler = (e: CustomEvent<CheckboxInfo>) => {\n    this.fitImages = e.detail.value;\n  };\n\n  private shrinkTreeHandler = (e: CustomEvent<CheckboxInfo>) => {\n    const checked = e.detail.value;\n    this.shrinkTree = checked;\n    if (checked) {\n      this.shrunkenTree = true;\n    } else {\n      this.shrunkenTree = false;\n    }\n  };\n\n  // 9.LOCAL METHODS -> RENDERS //\n\n  private renderOptions = (): Element => {\n    return (\n      <div\n        class={{\n          \"options grid\": true,\n          \"options--hide-access-token\": !this.showAccessToken\n        }}\n      >\n        {/* #path/url label*/}\n        <gxg-label class=\"path-url-label\">\n          {this._componentLocale.options.path}\n        </gxg-label>\n\n        <div class=\"path-url-wrapper\">\n          {/* #path/url input*/}\n          <gxg-form-text\n            value={this.path}\n            onInput={this.pathOnInputHandler}\n            onFileSelected={this.pathOnFileSelected}\n            onBlur={this.evaluateAccessToken}\n            ref={(el: HTMLGxgFormTextElement) =>\n              (this.optionPathEl = el as HTMLGxgFormTextElement)\n            }\n            part=\"option-path\"\n            disabled={this.isLoading}\n            type=\"file\"\n            acceptFile={this.extensions}\n            class=\"path-url\"\n            placeholder={this._componentLocale.options.pathPlaceholder}\n          ></gxg-form-text>\n\n          <div class=\"path-url-wrapper__buttons-container\">\n            {/* #select file button*/}\n            <gxg-button\n              id=\"button-select-file\"\n              type=\"primary-text-only\"\n              onClick={this.selectFile}\n              part=\"gxg-button gxg-button--select-file\"\n              disabled={this.isLoading}\n              class=\"select-file\"\n            >\n              ...\n            </gxg-button>\n\n            {/* #load file button*/}\n            <gxg-button\n              id=\"button-load\"\n              type=\"primary-text-only\"\n              onClick={this.loadData}\n              part=\"gxg-button gxg-button--load\"\n              disabled={this.path.length === 0 || this.isLoading}\n              class=\"load-file\"\n            >\n              {this._componentLocale.options.btnLoad}\n            </gxg-button>\n          </div>\n        </div>\n\n        {/* #access token*/}\n        {this.showAccessToken\n          ? [\n              <gxg-label class={{ \"access-token-label\": true }}>\n                {this._componentLocale.options.accessToken}\n              </gxg-label>,\n              <gxg-form-text\n                class={{ \"access-token\": true }}\n                ref={(el: HTMLGxgFormTextElement) =>\n                  (this.accessTokenEl = el as HTMLGxgFormTextElement)\n                }\n                part=\"access-token\"\n                disabled={this.isLoading}\n              ></gxg-form-text>\n            ]\n          : null}\n\n        {/* #style label*/}\n        <gxg-label class=\"style-label\">\n          {this._componentLocale.options.style}\n        </gxg-label>\n\n        {/* #style*/}\n        <gxg-combo-box\n          disabled={!this.styles || this.isLoading}\n          display-validation-styles\n          display-validation-message\n          ref={(el: HTMLGxgComboBoxElement) =>\n            (this.optionStyleEl = el as HTMLGxgComboBoxElement)\n          }\n          part=\"option-style\"\n          class=\"style\"\n        >\n          {renderFormItems(\"gxg-combo-box-item\", this.styles ?? [])}\n        </gxg-combo-box>\n\n        {/* #module label*/}\n        <gxg-label class=\"module-label\">\n          {this._componentLocale.options.module}\n        </gxg-label>\n\n        {/* #module*/}\n        <gx-ide-entity-selector\n          value={this.defaultModule}\n          defaultValue={this.defaultModule}\n          selectEntityCallback={this.selectModuleCallback}\n          ref={(el: HTMLGxIdeEntitySelectorElement) =>\n            (this.filterModuleEl = el as HTMLGxIdeEntitySelectorElement)\n          }\n          class=\"module\"\n        ></gx-ide-entity-selector>\n        <div class=\"checkboxes-options\">\n          {/* # import as web panels*/}\n          <gxg-form-checkbox\n            label={this._componentLocale.options.importAs}\n            class=\"import-as-web-panels\"\n            ref={(el: HTMLGxgFormCheckboxElement) =>\n              (this.optionImportAsEl = el as HTMLGxgFormCheckboxElement)\n            }\n            part=\"option-import-as-web-panels\"\n            disabled={this.isLoading}\n          ></gxg-form-checkbox>\n\n          <div\n            class={{\n              \"checkboxes-options__col-right\": true,\n              \"checkboxes-options__col-right--hidden\":\n                !this.designDataTreeDataModel.length\n            }}\n          >\n            {/* # fit images*/}\n            <gxg-form-checkbox\n              label={this._componentLocale.options.fitImages}\n              part=\"fit-images-checkbox\"\n              disabled={this.isLoading || !this.designDataTreeDataModel.length}\n              onChange={this.fitImagesHandler}\n            ></gxg-form-checkbox>\n\n            {/* # shrink tree*/}\n            <gxg-form-checkbox\n              label={this._componentLocale.options.toggleTree}\n              part=\"shrink-tree-checkbox\"\n              disabled={this.isLoading || !this.designDataTreeDataModel.length}\n              onChange={this.shrinkTreeHandler}\n            ></gxg-form-checkbox>\n          </div>\n        </div>\n      </div>\n    );\n  };\n\n  private renderMessages = (): Element => {\n    return this.messages.length > 0 ? (\n      <div\n        class=\"messages-container\"\n        ref={(el: HTMLElement) => (this.messagesList = el as HTMLElement)}\n      >\n        {this.messages.map(message => (\n          <gxg-text type={this.messageType(message)}>\n            {message.type}: {message.text}\n          </gxg-text>\n        ))}\n      </div>\n    ) : null;\n  };\n\n  private renderDetailDataTree(designType: string) {\n    switch (designType) {\n      case DESIGN_DATA_TYPE_PANELS:\n      case DESIGN_DATA_TYPE_STENCILS:\n        this.detailTreeModel = this.loadTreeItemCompositionModel(\n          this.selectedDesignItem.composition.controls\n        );\n        break;\n    }\n  }\n\n  private renderMain = () => {\n    if (this.designData) {\n      return (\n        /* #main*/\n        <main\n          class={{ \"main\": true, \"main--shrunken-tree\": this.shrunkenTree }}\n        >\n          {[this.renderDesignTree(), this.renderDesignTabs()]}\n        </main>\n      );\n    } else if (!this.isLoading) {\n      return <main class=\"main\">{this.renderNoDesignData()}</main>;\n    } else {\n      return this.renderMessages();\n    }\n  };\n\n  private renderNoDesignData = () => {\n    if (!this.isLoading) {\n      return (\n        <gxg-text\n          textAlign={config.gxgMessage.common.textAlign as TextAlign}\n          padding={config.gxgMessage.common.textAlign as TextPadding}\n          type={config.gxgMessage.common.type as TextType}\n          maxWidth={config.gxgMessage.common.maxWidth}\n          part=\"no-design-selected\"\n        >\n          {this._componentLocale.messages.noDesignSelected} <br />\n          <gxg-text\n            type=\"text-link-no-line\"\n            onClick={this.selectFile}\n            part=\"begin-by-loading-one\"\n          >\n            {this._componentLocale.messages.selectDesign}\n          </gxg-text>\n        </gxg-text>\n      );\n    }\n  };\n\n  private renderDesignTree = (): HTMLGxgTreeViewElement => {\n    return (\n      <div class=\"tree-container\">\n        <gxg-tree-view\n          part=\"data-tree\"\n          class=\"design-tree\"\n          id=\"data-tree\"\n          treeModel={this.designDataTreeDataModel}\n          dragDisabled={true}\n          dropDisabled={true}\n          toggleCheckboxes={true}\n          checkbox={true}\n          checked={true}\n          onCheckedItemsChange={this.objectsTreeCheckedItemsChangedHandler}\n          onSelectedItemsChange={this.objectsTreeSelectedItemsChangedHandler}\n          ref={el => (this.treeDataEl = el as HTMLGxgTreeViewElement)}\n        ></gxg-tree-view>\n      </div>\n    );\n  };\n\n  private renderFooter = () => {\n    return [\n      <gxg-button\n        id=\"button-ok\"\n        type=\"primary-text-only\"\n        onClick={this.confirm}\n        part=\"gxg-button gxg-button--ok\"\n        disabled={this.isLoading}\n        slot=\"footer-end\"\n      >\n        {this._componentLocale.footer.btnOk}\n      </gxg-button>,\n      <gxg-button\n        id=\"button-cancel\"\n        type=\"outlined\"\n        onClick={this.cancel}\n        part=\"gxg-button gxg-button--cancel\"\n        slot=\"footer-end\"\n      >\n        {this._componentLocale.footer.btnCancel}\n      </gxg-button>\n    ];\n  };\n\n  private renderPanelTab = (): Element => {\n    const renderControlsTree =\n      (this.selectedDesignType === DESIGN_DATA_TYPE_PANELS ||\n        this.selectedDesignType === DESIGN_DATA_TYPE_STENCILS) &&\n      this.detailTreeModel.length > 0;\n\n    return (\n      <div\n        class={{\n          \"panel-tab\": true,\n          \"panel-tab--controls-tree\": renderControlsTree\n        }}\n        part=\"data-panel-composition-container\"\n      >\n        {this.selectedDesignItem &&\n        this.selectedDesignItem.composition &&\n        this.selectedDesignItem.composition.preview ? (\n          <div part=\"data-panel-composition-preview\" class=\"panel-item\">\n            <img\n              src={\n                this.selectedDesignItem && this.selectedDesignItem.composition\n                  ? this.selectedDesignItem.composition.preview\n                  : undefined\n              }\n              alt=\"Preview\"\n            />\n          </div>\n        ) : null}\n\n        {renderControlsTree ? (\n          <gxg-tree-view\n            part=\"data-panel-composition-tree\"\n            class=\"panel-item\"\n            id=\"gxg-tree-panel-data\"\n            treeModel={this.detailTreeModel}\n            dragDisabled={true}\n            dropDisabled={true}\n          ></gxg-tree-view>\n        ) : null}\n      </div>\n    );\n  };\n\n  private renderImageTab = () => {\n    return (\n      <div part=\"data-panel-composition-preview\" class=\"data-preview\">\n        <img\n          src={this.selectedDesignItem ? this.selectedDesignItem : undefined}\n          alt=\"Preview\"\n        />\n      </div>\n    );\n  };\n\n  private renderDesignTabs = (): Element => {\n    return (\n      <gxg-tabs\n        class={{\n          \"design-tabs\": true,\n          \"design-tabs--fit-images\": this.fitImages\n        }}\n        part=\"data-tabs\"\n        no-border\n        noPadding\n        buttonsBorderAbove\n      >\n        <gxg-tab-bar slot=\"tab-bar-container\">\n          {/* tokens*/}\n          <gxg-tab-button\n            hidden={\n              !this.selectedDesignType ||\n              this.selectedDesignType !== DESIGN_DATA_TYPE_DESIGN_SYSTEM\n            }\n            slot=\"tab-bar\"\n            tab-label={this._componentLocale.tabs.tokens}\n            tab=\"tokens\"\n            key=\"tokens\"\n            is-selected\n          ></gxg-tab-button>\n          {/* styles*/}\n          <gxg-tab-button\n            hidden={\n              !this.selectedDesignType ||\n              this.selectedDesignType !== DESIGN_DATA_TYPE_DESIGN_SYSTEM\n            }\n            slot=\"tab-bar\"\n            tab-label={this._componentLocale.tabs.styles}\n            tab=\"styles\"\n            key=\"styles\"\n          ></gxg-tab-button>\n          {/* composition*/}\n          <gxg-tab-button\n            hidden={\n              !this.selectedDesignType ||\n              this.selectedDesignType === DESIGN_DATA_TYPE_DESIGN_SYSTEM\n            }\n            slot=\"tab-bar\"\n            tab-label={this._componentLocale.tabs.composition}\n            tab=\"composition\"\n            key=\"composition\"\n            is-selected\n          ></gxg-tab-button>\n          {/* code*/}\n          <gxg-tab-button\n            hidden={\n              !this.selectedDesignType ||\n              (this.selectedDesignType !== DESIGN_DATA_TYPE_PANELS &&\n                this.selectedDesignType !== DESIGN_DATA_TYPE_STENCILS)\n            }\n            slot=\"tab-bar\"\n            tab-label={this._componentLocale.tabs.code}\n            tab=\"code\"\n            key=\"code\"\n          ></gxg-tab-button>\n        </gxg-tab-bar>\n        {/* tokens */}\n        <gxg-tab tab=\"tokens\" key=\"tokens\">\n          <div\n            ref={(el: HTMLElement) =>\n              (this.tokensFactoryRenderEl = el as HTMLElement)\n            }\n          ></div>\n        </gxg-tab>\n        {/* styles */}\n        <gxg-tab tab=\"styles\" key=\"styles\">\n          <div\n            ref={(el: HTMLElement) =>\n              (this.stylesFactoryRenderEl = el as HTMLElement)\n            }\n          ></div>\n        </gxg-tab>\n        {/* composition */}\n        <gxg-tab tab=\"composition\" key=\"composition\">\n          {this.selectedDesignType === DESIGN_DATA_TYPE_IMAGES ||\n          this.selectedDesignType === DESIGN_DATA_TYPE_FONTS\n            ? this.renderImageTab()\n            : this.renderPanelTab()}\n        </gxg-tab>\n        {/* code */}\n        <gxg-tab tab=\"code\" key=\"code\">\n          <div\n            ref={(el: HTMLElement) =>\n              (this.codeFactoryRenderEl = el as HTMLElement)\n            }\n          ></div>\n        </gxg-tab>\n      </gxg-tabs>\n    );\n  };\n\n  // 10.RENDER() FUNCTION //\n\n  render(): void {\n    return (\n      <Host class=\"gx-ide-component\">\n        <div class=\"gx-ide-main-wrapper\">\n          <gx-ide-container\n            noContentPadding\n            noContentGap\n            displayBorderBottom\n            part=\"options-container\"\n            slimmerFooter={config.gxIdeContainer.slimmerFooter}\n            containerTitle={\n              this.displayTitle ? this._componentLocale.componentName : null\n            }\n          >\n            {this.renderOptions()}\n            {this.renderMain()}\n            {this.renderFooter()}\n          </gx-ide-container>\n        </div>\n      </Host>\n    );\n  }\n}\n\nexport type LoadMessageCallback = (message: MessageData) => void;\nexport type LoadCallback = (\n  source: string | File,\n  token: string | undefined,\n  onMessage: LoadMessageCallback\n) => Promise<DesignData | undefined>;\nexport type LoadPanelDataCallback = (id: string) => Promise<DesignPanelData>;\nexport type LoadImageCallback = (id: string) => Promise<string>;\nexport type LoadFontCallback = (id: string) => Promise<string>;\nexport type LoadDesignSystemCallback = (\n  id: string\n) => Promise<DesignSystemData>;\nexport type TextEditorFactoryCallback = (\n  type: TextEditorType,\n  parent: HTMLElement,\n  text: string\n) => Promise<void>;\nexport type SelectModuleCallback = () => Promise<EntityData | undefined>;\n\nexport type RequiresAccessTokenCallback = (source: string) => Promise<boolean>;\nexport type ConfirmCallback = (data: DesignImportData) => Promise<boolean>;\nexport type CancelCallback = () => Promise<void>;\n\nexport interface MessageData {\n  type: \"error\" | \"warning\" | \"info\";\n  text: string;\n}\n\nexport interface DesignData {\n  panels: DesignItemData[];\n  stencils: DesignItemData[];\n  images: DesignItemData[];\n  designSystem: DesignItemData[];\n  fonts: DesignItemData[];\n}\n\nexport interface DesignItemData {\n  id: string;\n  name: string;\n}\n\nexport interface DesignPanelData {\n  composition: DesignPanelCompositionData;\n  code?: string;\n}\n\nexport interface DesignPanelCompositionData {\n  preview?: string;\n  controls: DesignPanelControlData[];\n}\n\nexport interface DesignPanelControlData {\n  name: string;\n  type: string;\n  leaf?: boolean;\n  controls: DesignPanelControlData[];\n}\n\nexport interface DesignSystemData {\n  tokens: string;\n  styles: string;\n}\n\ntype DesignItemDataDetail = DesignPanelData | DesignSystemData | string;\n\nexport interface DesignImportData {\n  panels: string[];\n  stencils: string[];\n  fonts: string[];\n  moduleId: string;\n  /*  images: string[]; */\n  styleName: string;\n  importAsWebPanels: boolean;\n}\n\nexport type DesignType =\n  | typeof DESIGN_DATA_TYPE_PANELS\n  | typeof DESIGN_DATA_TYPE_STENCILS\n  | typeof DESIGN_DATA_TYPE_IMAGES\n  | typeof DESIGN_DATA_TYPE_DESIGN_SYSTEM\n  | typeof DESIGN_DATA_TYPE_FONTS;\n\nexport type ItemLoadedInfo = {\n  designType: DesignType;\n  designDataDetail: DesignItemDataDetail;\n};\n\ntype TextEditorType = \"html\" | \"styles\" | \"tokens\";\n"],"mappings":"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"}

package/dist/genexus-ide-ui/{p-5ca84a03.entry.js → p-4e155cd5.entry.js}

@@ -4,13 +4,36 @@ import { f as s } from "./p-13a818ba.js";
 
 import { f as a, c as n } from "./p-537654ad.js";
 
-import { r as l } from "./p-efa273d7.js";
+import { K as l } from "./p-a78773a3.js";
 
 import { s as c } from "./p-12e3a3de.js";
 
 import { e as d } from "./p-1a098c4f.js";
 
-import "./p-a78773a3.js";
+const repositionScroll = (e, t, o) => {
+  const r = e;
+  const i = r?.scrollHeight > r?.clientHeight;
+  if (i && t) {
+    const e = r.scrollTop;
+    if (o === l.ARROW_UP) {
+      const o = r.getBoundingClientRect().top;
+      const i = t.getBoundingClientRect().top;
+      if (i < o) {
+        const t = o - i;
+        r.scrollTo(0, e - t);
+      }
+    } else if (o === l.ARROW_DOWN) {
+      const o = r.getBoundingClientRect().bottom;
+      const i = t.getBoundingClientRect().bottom;
+      if (i > o) {
+        console.log("selectedItemBottom", i);
+        console.log("scrollableElementBottom", o);
+        const t = i - o;
+        r.scrollTo(0, e + t);
+      }
+    }
+  }
+};
 
 const g = ":host(.gxg--disabled) .form-element,:host(.gxg--disabled.form-element){pointer-events:none;background-color:var(--ds-background-color-disabled) !important;color:var(--ds-color--disabled) !important;border-color:var(--ds-border-color-disabled) !important;cursor:default !important}:root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-01--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-02{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-02--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--color-on-primary)}.gxg-title-03{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-03--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-04{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-04--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-05{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-05--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable)}.gxg-text--negative{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text--gray{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--dimmed)}.gxg-quote{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);font-style:italic}.gxg-quote--negative{color:var(--ds-base-font-color--negative)}.gxg-link{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--ds-base-font-color--link-hover)}.gxg-link:active{color:var(--ds-base-font-color--link-active)}.gxg-link-gray{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed)}.gxg-link-gray:hover{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed);filter:brightness(1.4)}.gxg-alert-error{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--error);display:inline-block}.gxg-alert-warning{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--warning);display:inline-block}.gxg-alert-success{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--success);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(--ds-base-font-family-primary);font-weight:var(--gxg-label-font-weight);font-size:var(--gxg-label-font-size);color:var(--gxg-label-color);text-align:center;line-height:1.455em;display:flex;align-items:center}.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-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gxg-scrollbar::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}:host(.gxg-validation--warning) .form-element{border-color:var(--ds-border-color--warning)}:host(.gxg-validation--warning) .form-element:focus{outline-color:var(--ds-border-color--warning);border-color:var(--ds-border-color--warning)}:host(.gxg-validation--warning) .form-element:focus+.checkmark{--checkmark-border-color:var(--ds-border-color--warning)}:host(.gxg-validation--error) .form-element{border-color:var(--ds-border-color--error)}:host(.gxg-validation--error) .form-element:focus{outline-color:var(--ds-border-color--error);border-color:var(--ds-border-color--error)}:host(.gxg-validation--error) .form-element:focus+.checkmark{--checkmark-border-color:var(--ds-border-color--error)}:host(.gxg-validation--success) .form-element{border-color:var(--ds-border-color--success)}:host(.gxg-validation--success) .form-element:focus{outline-color:var(--ds-border-color--success);border-color:var(--ds-border-color--success)}:host(.gxg-validation--success) .form-element:focus+.checkmark{--checkmark-border-color:var(--ds-border-color--success)}.tooltip-outer-wrapper{display:grid;grid-template-columns:0fr;transition:grid-template-columns var(--timing-02)}:host(.tooltip--visible) .tooltip-outer-wrapper{grid-template-columns:1fr}.tooltip-inner-wrapper{--margin-inline-start:6px;overflow:hidden;transition:150ms width;width:0}.tooltip-inner-wrapper gxg-icon{display:flex;position:relative !important;top:0 !important;transform:none !important;margin-inline-start:var(--margin-inline-start);box-sizing:border-box}.tooltip-inner-wrapper--visible{width:calc(var(--ds-icon-size-box--small) + var(--margin-inline-start))}.tooltip-inner-wrapper--hidden{display:none}:host{display:block;font-size:var(--ds-base-font-size);font-family:var(--ds-base-font-family-primary);background-color:var(--ds-base-background-color);color:var(--ds-base-font-color);height:100%}:host .container{height:100%;border:var(--gxg-list-box-container__border);border-radius:var(--gxg-list-box-general__border-radius);overflow:hidden;box-sizing:border-box}:host .header{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;background-color:var(--gxg-list-box-header__background-color);border-bottom:var(--ds-border-common-styles);padding:var(--gxg-list-box-header__padding);text-transform:capitalize;font-size:inherit;font-weight:var(--gxg-list-box-header__font-weight);color:var(--gxg-list-box-header__color)}:host .icon{margin-inline-end:var(--spacing-comp-01)}:host .checkbox{margin-inline-end:var(--spacing-comp-01)}.main{overflow-y:auto;padding:var(--gxg-list-box-main__padding);box-sizing:border-box}.main::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.main::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.main::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.main::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.main::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.main--no-border{border:none}.container:focus-within{outline:none}.container:not(:focus-within){--ds-border-color-control--focused:transparent;--ds-border-color--focused:transparent;--ds-focus-border-color:transparent}:host([no-border]) .container{border:none}.suggestions__container{background-color:var(--gxg-list-box-suggestions-container__background-color);color:var(--gxg-list-box-suggestions-container__color);font-family:inherit;font-size:var(--gxg-list-box-suggestions-container__font-size);padding:var(--gxg-list-box-suggestions-container__padding);display:flex;gap:var(--gxg-list-box-suggestions-container__gap);align-items:center}.suggestions__list{margin:0;padding:0;list-style-type:none;flex-grow:1}:host([no-border]) .container{border:none}:host([border-top]) .container{border-top:1px solid var(--ds-border-color--regular)}:host([border-end]) .container{border-inline-end:1px solid var(--ds-border-color--regular)}:host([border-bottom]) .container{border-bottom:1px solid var(--ds-border-color--regular)}:host([border-start]) .container{border-inline-start:1px solid var(--ds-border-color--regular)}:host(.gxg--disabled) .header{color:var(--ds-color--disabled);border-bottom-color:var(--ds-border-color-disabled)}.messages-wrapper{margin-top:var(--spacing-comp-02);display:flex;gap:var(--spacing-comp-01);flex-direction:column}";
 
@@ -135,7 +158,7 @@ const f = class {
         if ((this.singleSelection || !this.singleSelection && t) && !o.selected && !this.allowsEmpty) {
           this.selectItems(o);
         }
-        l(this.main, o, e);
+        repositionScroll(this.main, o, e);
       }
     };
     /* SELECTED */    this.setSiblingSelected = async () => {
@@ -842,4 +865,4 @@ const b = class {
 b.style = h;
 
 export { f as gxg_list_box, b as gxg_list_box_item };
-//# sourceMappingURL=p-5ca84a03.entry.js.map
+//# sourceMappingURL=p-4e155cd5.entry.js.map

package/dist/genexus-ide-ui/p-4e155cd5.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["repositionScroll","scollableElementRef","activeItem","direction","scrollableElement","hasVerticalScrollbar","scrollHeight","clientHeight","scrollableElementScrollTop","scrollTop","KK","ARROW_UP","scrollableElementTop","getBoundingClientRect","top","selectedItemTop","offset","scrollTo","ARROW_DOWN","scrollableElementBottom","bottom","selectedItemBottom","console","log","listBoxCss","GxgListBox","constructor","hostRef","this","userUsedKeyboard","selectedItemsState","formMessageLogic","setIndexes","allItems","getAllItems","forEach","item","i","index","initialSetup","enabledItems","getEnabledItems","selectedItemsLength","selectItem","allowsEmpty","firstDeselectedItem","find","selected","singleSelection","selectedItems","getSelectedItemsFunc","selectedItem","currentActiveItem","getActiveItem","firstEnabledItem","active","disabled","disabledHandler","checkboxes","checkbox","handleKeyDown","e","ctrlKey","cmdKey","metaKey","shiftKey","code","preventDefault","handleArrow","unselectHighlightedItems","clearSelectedItems","selectItems","clearHighlightedItems","checked","highlightAll","newElement","activeElement","getNextItem","getPrevItem","unhighlightAll","setActiveItem","highlightItem","main","setSiblingSelected","async","length","siblingIsSelected","getIndexByElement","el","element","evaluateSelectedItems","selectedItemsArray","selectedItemsArrayFullInfo","getSelectedItems","then","result","push","value","arraysDiffer","JSON","stringify","updateSelectedItems","allItemsArray","querySelectorAll","theTitle","undefined","emitEmptySelection","keyboardSuggestions","checkCheckbox","uncheckCheckbox","disableSuggestions","noBorder","borderTop","borderEnd","borderBottom","borderStart","checkedItems","hideKeyboardSuggestions","headerHeight","required","validationStatus","validationMessage","informationMessage","selectedItemsInformation","textContent","componentDidRender","header","componentDidLoad","checkboxClickedHandler","containerEl","focus","itemLoadedHandler","itemClickedHandler","event","clickedItem","unselectItems","fromIndex","toIndex","activeItemIndex","selectMultipleItems","unhighlightItem","toggleItem","selectedItemsHandler","newArray","selectionChanged","emit","items","checkedItemsHandler","checkedChanged","disabledItems","getDisabledItems","hideKeyboardSuggestionsHandler","newValue","oldValue","localStorage","setItem","itemSelectedHandler","checkboxStateChangedHandler","checkedItemEl","detail","checkedItem","checkedItemValue","checkedItemsArray","enabledItem","getItem","ignoreHighlighted","actualSelectedItems","doNotActivate","highlighted","ignoreActiveItem","toggleHighlightedItems","highlightedItems","getHighlightedItems","selectHighlightedItems","spacePressed","highlightedItemsArray","getHighlightedItemsLength","highlightedItemsLength","getItemByIndex","itemByIndex","currentActive","enabledActiveItemIndex","findIndex","Array","isArray","unselected","clearActiveItem","enabledItemsArray","disabledItemsArray","setCheckboxState","check","changed","getFirstEnabledItem","getFirstSelectedItem","comparator","fromIndexCopy","renderKeyboardSuggestions","Object","keys","itemsArray","key","listItem","h","class","type","icon","onClick","render","Host","large","state","formClasses","commonClassesNames","onKeyDown","container","tabindex","ref","style","height","listBoxItemCss","GxgListboxItem","parts","handleCheckboxClick","checkboxClicked","stopPropagation","target","attachExportParts","part","getAttribute","exportPartsResult","exportParts","exportparts","emitCheckboxChange","mouseOver","watchPropHandler","itemSelected","checkedChangedHandler","checkboxChangedHandler","checkboxStateChanged","iconColor","componentWillLoad","itemLoaded","itemClickedFunc","itemClicked","onMouseOver","onMouseOut","bind","color","size"],"sources":["node_modules/@genexus/gemini/dist/collection/common/reposition-scroll.js","node_modules/@genexus/gemini/dist/collection/components/list-box/list-box.css?tag=gxg-list-box&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/list-box/list-box.js","node_modules/@genexus/gemini/dist/collection/components/list-box-item/list-box-item.css?tag=gxg-list-box-item&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/list-box-item/list-box-item.js"],"sourcesContent":["import { KeyboardKeys as KK } from \"./types\";\nexport const repositionScroll = (scollableElementRef, activeItem, direction) => {\n    const scrollableElement = scollableElementRef;\n    const hasVerticalScrollbar = scrollableElement?.scrollHeight > scrollableElement?.clientHeight;\n    if (hasVerticalScrollbar && activeItem) {\n        const scrollableElementScrollTop = scrollableElement.scrollTop;\n        if (direction === KK.ARROW_UP) {\n            const scrollableElementTop = scrollableElement.getBoundingClientRect().top;\n            const selectedItemTop = activeItem.getBoundingClientRect().top;\n            if (selectedItemTop < scrollableElementTop) {\n                const offset = scrollableElementTop - selectedItemTop;\n                scrollableElement.scrollTo(0, scrollableElementScrollTop - offset);\n            }\n        }\n        else if (direction === KK.ARROW_DOWN) {\n            const scrollableElementBottom = scrollableElement.getBoundingClientRect().bottom;\n            const selectedItemBottom = activeItem.getBoundingClientRect().bottom;\n            if (selectedItemBottom > scrollableElementBottom) {\n                console.log(\"selectedItemBottom\", selectedItemBottom);\n                console.log(\"scrollableElementBottom\", scrollableElementBottom);\n                const offset = selectedItemBottom - scrollableElementBottom;\n                scrollableElement.scrollTo(0, scrollableElementScrollTop + offset);\n            }\n        }\n    }\n};\n//# sourceMappingURL=reposition-scroll.js.map\n",":host(.gxg--disabled) .form-element,\n:host(.gxg--disabled.form-element) {\n  pointer-events: none;\n  background-color: var(--ds-background-color-disabled) !important;\n  color: var(--ds-color--disabled) !important;\n  border-color: var(--ds-border-color-disabled) !important;\n  cursor: default !important;\n}\n\n:root {\n  --ui-animaton-speed: 0.2s;\n}\n\n/*ALIGNMENT*/\n/*Ellipsis*/\n/*****************************************************\nTYPOGRAPHY\n*****************************************************/\n/*Title 01 (Positive)*/\n.gxg-title-01 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-01-font-weight);\n  font-size: var(--ds-title-01-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n/*Title 01 (Negative)*/\n.gxg-title-01--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-01-font-weight);\n  font-size: var(--ds-title-01-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 02 (Positive)*/\n.gxg-title-02 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-02-font-weight);\n  font-size: var(--ds-title-02-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-02--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-02-font-weight);\n  font-size: var(--ds-title-02-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--color-on-primary);\n}\n\n/*Title 03*/\n.gxg-title-03 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-03-font-weight);\n  font-size: var(--ds-title-03-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-03--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-03-font-weight);\n  font-size: var(--ds-title-03-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 04*/\n.gxg-title-04 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-04-font-weight);\n  font-size: var(--ds-title-04-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-04--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-04-font-weight);\n  font-size: var(--ds-title-04-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 05*/\n.gxg-title-05 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-05-font-weight);\n  font-size: var(--ds-title-05-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-05--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-05-font-weight);\n  font-size: var(--ds-title-05-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Text*/\n.gxg-text {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-text--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n.gxg-text--gray {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--dimmed);\n}\n\n/*Quote*/\n.gxg-quote {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  font-style: italic;\n}\n\n.gxg-quote--negative {\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Link*/\n.gxg-link {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n}\n.gxg-link:hover {\n  color: var(--ds-base-font-color--link-hover);\n}\n.gxg-link:active {\n  color: var(--ds-base-font-color--link-active);\n}\n\n.gxg-link-gray {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n  color: var(--ds-base-font-color--dimmed);\n}\n.gxg-link-gray:hover {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n  color: var(--ds-base-font-color--dimmed);\n  filter: brightness(1.4);\n}\n\n/*Alerts*/\n.gxg-alert-error {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--error);\n  display: inline-block;\n}\n\n.gxg-alert-warning {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--warning);\n  display: inline-block;\n}\n\n.gxg-alert-success {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--success);\n  display: inline-block;\n}\n\n/*Tab*/\n.gxg-tab--disabled {\n  color: var(--color-primary-disabled);\n  pointer-events: none;\n}\n.gxg-tab--disabled[disabled] {\n  color: var(--color-primary-disabled);\n  pointer-events: none;\n}\n\n/*Label*/\n.gxg-label {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--gxg-label-font-weight);\n  font-size: var(--gxg-label-font-size);\n  color: var(--gxg-label-color);\n  text-align: center;\n  line-height: 1.455em;\n  display: flex;\n  align-items: center;\n}\n.gxg-label:hover {\n  color: var(--color-primary-hover);\n}\n.gxg-label:focus {\n  color: var(--color-primary-active);\n}\n.gxg-label:active {\n  color: var(--color-primary-active);\n}\n.gxg-label[disabled] {\n  color: var(--color-primary-disabled);\n}\n\n.gxg-label--negative {\n  color: var(--color-on-primary);\n}\n.gxg-label--negative[disabled] {\n  color: var(--color-on-disabled);\n}\n\n/*****************************************************\nGXG-BUTTON and GXG-BUTTON-GROUP COMMON STYLES\n*****************************************************/\n/*****************************************************\nFORM ELEMENTS\n*****************************************************/\n.gxg-scrollbar {\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n}\n.gxg-scrollbar::-webkit-scrollbar {\n  width: var(--gxg-scrollbar-width);\n  height: var(--gxg-scrollbar-width);\n}\n.gxg-scrollbar::-webkit-scrollbar-track {\n  background-color: var(--gxg-scrollbar-track-background);\n  border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb {\n  background-color: var(--gxg-scrollbar-track-thumb-background);\n  border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb:hover {\n  background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n.gxg-scrollbar::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n\n/*Warning*/\n:host(.gxg-validation--warning) .form-element {\n  border-color: var(--ds-border-color--warning);\n}\n:host(.gxg-validation--warning) .form-element:focus {\n  outline-color: var(--ds-border-color--warning);\n  border-color: var(--ds-border-color--warning);\n}\n:host(.gxg-validation--warning) .form-element:focus + .checkmark {\n  --checkmark-border-color: var(--ds-border-color--warning);\n}\n\n/*Error*/\n:host(.gxg-validation--error) .form-element {\n  border-color: var(--ds-border-color--error);\n}\n:host(.gxg-validation--error) .form-element:focus {\n  outline-color: var(--ds-border-color--error);\n  border-color: var(--ds-border-color--error);\n}\n:host(.gxg-validation--error) .form-element:focus + .checkmark {\n  --checkmark-border-color: var(--ds-border-color--error);\n}\n\n/*Success*/\n:host(.gxg-validation--success) .form-element {\n  border-color: var(--ds-border-color--success);\n}\n:host(.gxg-validation--success) .form-element:focus {\n  outline-color: var(--ds-border-color--success);\n  border-color: var(--ds-border-color--success);\n}\n:host(.gxg-validation--success) .form-element:focus + .checkmark {\n  --checkmark-border-color: var(--ds-border-color--success);\n}\n\n/*Tooltip*/\n.tooltip-outer-wrapper {\n  display: grid;\n  grid-template-columns: 0fr;\n  transition: grid-template-columns var(--timing-02);\n}\n\n:host(.tooltip--visible) .tooltip-outer-wrapper {\n  grid-template-columns: 1fr;\n}\n\n.tooltip-inner-wrapper {\n  --margin-inline-start: 6px;\n  overflow: hidden;\n  transition: 150ms width;\n  width: 0;\n}\n.tooltip-inner-wrapper gxg-icon {\n  display: flex;\n  position: relative !important;\n  top: 0 !important;\n  transform: none !important;\n  margin-inline-start: var(--margin-inline-start);\n  box-sizing: border-box;\n}\n.tooltip-inner-wrapper--visible {\n  width: calc(var(--ds-icon-size-box--small) + var(--margin-inline-start));\n}\n.tooltip-inner-wrapper--hidden {\n  display: none;\n}\n\n:host {\n  display: block;\n  font-size: var(--ds-base-font-size);\n  font-family: var(--ds-base-font-family-primary);\n  background-color: var(--ds-base-background-color);\n  color: var(--ds-base-font-color);\n  height: 100%;\n}\n:host .container {\n  height: 100%;\n  border: var(--gxg-list-box-container__border);\n  border-radius: var(--gxg-list-box-general__border-radius);\n  overflow: hidden;\n  box-sizing: border-box;\n}\n:host .header {\n  width: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  box-sizing: border-box;\n  background-color: var(--gxg-list-box-header__background-color);\n  border-bottom: var(--ds-border-common-styles);\n  padding: var(--gxg-list-box-header__padding);\n  text-transform: capitalize;\n  font-size: inherit;\n  font-weight: var(--gxg-list-box-header__font-weight);\n  color: var(--gxg-list-box-header__color);\n}\n:host .icon {\n  margin-inline-end: var(--spacing-comp-01);\n}\n:host .checkbox {\n  margin-inline-end: var(--spacing-comp-01);\n}\n\n.main {\n  overflow-y: auto;\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n  padding: var(--gxg-list-box-main__padding);\n  box-sizing: border-box;\n}\n.main::-webkit-scrollbar {\n  width: var(--gxg-scrollbar-width);\n  height: var(--gxg-scrollbar-width);\n}\n.main::-webkit-scrollbar-track {\n  background-color: var(--gxg-scrollbar-track-background);\n  border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n.main::-webkit-scrollbar-thumb {\n  background-color: var(--gxg-scrollbar-track-thumb-background);\n  border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n.main::-webkit-scrollbar-thumb:hover {\n  background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n.main::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n.main--no-border {\n  border: none;\n}\n\n.container:focus-within {\n  outline: none;\n}\n\n.container:not(:focus-within) {\n  --ds-border-color-control--focused: transparent;\n  --ds-border-color--focused: transparent;\n  --ds-focus-border-color: transparent;\n}\n\n:host([no-border]) .container {\n  border: none;\n}\n\n/*SUGGESTION LIST*/\n.suggestions__container {\n  background-color: var(--gxg-list-box-suggestions-container__background-color);\n  color: var(--gxg-list-box-suggestions-container__color);\n  font-family: inherit;\n  font-size: var(--gxg-list-box-suggestions-container__font-size);\n  padding: var(--gxg-list-box-suggestions-container__padding);\n  display: flex;\n  gap: var(--gxg-list-box-suggestions-container__gap);\n  align-items: center;\n}\n.suggestions__list {\n  margin: 0;\n  padding: 0;\n  list-style-type: none;\n  flex-grow: 1;\n}\n\n/*BORDERS*/\n:host([no-border]) .container {\n  border: none;\n}\n\n:host([border-top]) .container {\n  border-top: 1px solid var(--ds-border-color--regular);\n}\n\n:host([border-end]) .container {\n  border-inline-end: 1px solid var(--ds-border-color--regular);\n}\n\n:host([border-bottom]) .container {\n  border-bottom: 1px solid var(--ds-border-color--regular);\n}\n\n:host([border-start]) .container {\n  border-inline-start: 1px solid var(--ds-border-color--regular);\n}\n\n/*Disabled*/\n:host(.gxg--disabled) .header {\n  color: var(--ds-color--disabled);\n  border-bottom-color: var(--ds-border-color-disabled);\n}\n\n/*********************************************\nVALIDATION\n**********************************************/\n.messages-wrapper {\n  margin-top: var(--spacing-comp-02);\n  display: flex;\n  gap: var(--spacing-comp-01);\n  flex-direction: column;\n}","import { Host, h } from \"@stencil/core\";\nimport { formMessageLogic } from \"../../common/form\";\nimport { formClasses } from \"../../common/classesNames\";\nimport { commonClassesNames } from \"../../common/classesNames\";\nimport { repositionScroll } from \"../../common/reposition-scroll\";\nimport state from \"../store\";\nexport class GxgListBox {\n    constructor() {\n        this.theTitle = undefined;\n        this.checkboxes = false;\n        this.singleSelection = false;\n        this.allowsEmpty = false;\n        this.emitEmptySelection = false;\n        this.keyboardSuggestions = {\n            checkCheckbox: \"to check a checkbox press (shift + space)\",\n            uncheckCheckbox: \"to uncheck a checkbox press (shift + ctrl + space)\"\n        };\n        this.disableSuggestions = false;\n        this.noBorder = false;\n        this.borderTop = false;\n        this.borderEnd = false;\n        this.borderBottom = false;\n        this.borderStart = false;\n        this.selectedItems = [];\n        this.checkedItems = [];\n        this.hideKeyboardSuggestions = true;\n        this.headerHeight = 0;\n        this.disabled = false;\n        this.required = false;\n        this.validationStatus = \"indeterminate\";\n        this.validationMessage = undefined;\n        this.informationMessage = undefined;\n    }\n    /**\n     * This event emits the items that are currently selected. event.detail contains the selected items as objects. Each object contains the item idex and the item value. If value was not provided, the value will be the item innerText.\n     */\n    selectionChanged;\n    checkedChanged;\n    el;\n    header;\n    main;\n    containerEl;\n    /**\n     * This is needed to evaluate if keyboard suggestions should be displayed.\n     */\n    userUsedKeyboard = false;\n    activeItem;\n    selectedItemsState = [];\n    /*VALIDATION*/\n    formMessageLogic = formMessageLogic;\n    /*********************************\n    METHODS\n    *********************************/\n    async getSelectedItems() {\n        const selectedItems = this.getSelectedItemsFunc();\n        const selectedItemsInformation = [];\n        selectedItems.forEach(selectedItem => {\n            selectedItemsInformation.push({\n                active: selectedItem.active,\n                selected: selectedItem.selected,\n                checked: selectedItem.checked,\n                index: selectedItem.index,\n                value: selectedItem.value || selectedItem.textContent\n            });\n        });\n        return selectedItemsInformation;\n    }\n    componentDidRender() {\n        if (this.theTitle) {\n            this.headerHeight = this.header.clientHeight;\n        }\n    }\n    componentDidLoad() {\n        //this.setInitialActive();\n    }\n    setIndexes = () => {\n        const allItems = this.getAllItems();\n        allItems.forEach((item, i) => {\n            item.index = i;\n        });\n    };\n    initialSetup = () => {\n        const enabledItems = this.getEnabledItems();\n        const selectedItemsLength = this.selectedItemsLength();\n        //1. Select item if allowsEmpty is false and no item is currently selected\n        const selectItem = !this.allowsEmpty && selectedItemsLength === 0;\n        if (selectItem) {\n            const firstDeselectedItem = enabledItems.find(item => {\n                return !item.selected;\n            });\n            firstDeselectedItem && (firstDeselectedItem.selected = true);\n        }\n        else if (this.singleSelection && selectedItemsLength > 1) {\n            //Only one item can be selected. Unselect every selected items, except the first one.\n            const selectedItems = this.getSelectedItemsFunc();\n            selectedItems.forEach((selectedItem, i) => {\n                if (i !== 0) {\n                    selectedItem.selected = false;\n                }\n            });\n        }\n        //2. Set active item, if not active item exists yet\n        const currentActiveItem = this.getActiveItem();\n        if (!currentActiveItem) {\n            const firstEnabledItem = this.getEnabledItems()[0];\n            if (firstEnabledItem) {\n                firstEnabledItem.active = true;\n                this.activeItem = firstEnabledItem;\n            }\n        }\n        //3. Set index on every item\n        this.setIndexes();\n        //4. disable items\n        if (this.disabled) {\n            this.disabledHandler(true);\n        }\n        //5. set checkboxes\n        if (this.checkboxes) {\n            const allItems = this.getAllItems();\n            allItems.forEach(item => {\n                item.checkbox = true;\n            });\n        }\n    };\n    checkboxClickedHandler() {\n        this.containerEl.focus();\n    }\n    itemLoadedHandler() {\n        this.initialSetup();\n        this.updateSelectedItems();\n    }\n    itemClickedHandler(event) {\n        const { clickedItem, ctrlKey, cmdKey, shiftKey, index } = event[\"detail\"];\n        if (this.singleSelection) {\n            this.setActiveItem(clickedItem);\n        }\n        this.containerEl.focus();\n        //this.clearActiveItem();\n        if (this.singleSelection) {\n            if (clickedItem.selected &&\n                !this.allowsEmpty) {\n                /*same item. do nothing.*/\n                return;\n            }\n            if (this.allowsEmpty && (ctrlKey || cmdKey)) {\n                this.unselectItems(clickedItem);\n            }\n            else {\n                this.clearHighlightedItems();\n                this.clearSelectedItems();\n                this.selectItems(clickedItem);\n                this.highlightItem(clickedItem);\n            }\n        }\n        else {\n            /*multiple-selection allowed*/\n            if (shiftKey || (!cmdKey && !cmdKey)) {\n                this.clearHighlightedItems();\n                this.clearSelectedItems();\n            }\n            if (shiftKey) {\n                if (this.activeItem === clickedItem)\n                    return;\n                let fromIndex;\n                const toIndex = index;\n                if (this.activeItem) {\n                    const activeItemIndex = this.getIndexByElement(this.activeItem);\n                    if (index === activeItemIndex) {\n                        return;\n                    }\n                    fromIndex = activeItemIndex;\n                }\n                else {\n                    fromIndex = 0;\n                }\n                this.selectMultipleItems(fromIndex, toIndex);\n            }\n            else if (ctrlKey || cmdKey) {\n                if (!this.allowsEmpty &&\n                    this.selectedItemsLength() === 1 &&\n                    clickedItem.selected) {\n                    return;\n                }\n                this.unhighlightItem(this.activeItem);\n                this.toggleItem(clickedItem);\n                this.highlightItem(clickedItem);\n            }\n            else {\n                this.selectItems(clickedItem);\n                this.highlightItem(clickedItem);\n            }\n        }\n        this.setActiveItem(clickedItem);\n        this.evaluateSelectedItems();\n    }\n    selectedItemsHandler(newArray) {\n        this.selectionChanged.emit({ items: newArray });\n    }\n    checkedItemsHandler(newArray) {\n        this.checkedChanged.emit(newArray);\n    }\n    disabledHandler(disabled) {\n        if (disabled) {\n            const enabledItems = this.getEnabledItems();\n            enabledItems?.forEach(item => {\n                item.disabled = true;\n            });\n        }\n        else {\n            const disabledItems = this.getDisabledItems();\n            disabledItems?.forEach(item => {\n                item.disabled = false;\n            });\n        }\n    }\n    hideKeyboardSuggestionsHandler(newValue, oldValue) {\n        newValue === true &&\n            oldValue === false &&\n            localStorage.setItem(\"gxg-list-box-hide-keyboard-suggestions\", \"true\");\n    }\n    itemSelectedHandler() {\n        this.setSiblingSelected();\n    }\n    checkboxStateChangedHandler(e) {\n        const checkedItemEl = e.detail.checkedItem;\n        const checkedItemValue = e.detail.checked;\n        /*Update checkboxes array*/\n        const checkedItemsArray = [];\n        const enabledItems = this.getEnabledItems();\n        if (enabledItems?.length) {\n            enabledItems.forEach(enabledItem => {\n                let item;\n                if (enabledItem === checkedItemEl) {\n                    item = checkedItemEl;\n                }\n                else {\n                    item = enabledItem;\n                }\n                const checked = enabledItem === checkedItemEl ? checkedItemValue : item.checked;\n                if (item && checked) {\n                    checkedItemsArray.push({\n                        active: item.active,\n                        selected: item.selected,\n                        checked: checked,\n                        index: item.index,\n                        value: item.value || item.textContent\n                    });\n                }\n            });\n            this.checkedItems = checkedItemsArray;\n        }\n        /*Local Storage*/\n        const localStorageExists = localStorage.getItem(\"gxg-list-box-hide-keyboard-suggestions\");\n        if (!localStorageExists &&\n            !this.disableSuggestions &&\n            this.userUsedKeyboard) {\n            // this.hideKeyboardSuggestions = false;\n        }\n    }\n    handleKeyDown = (e) => {\n        this.userUsedKeyboard = true;\n        const ctrlKey = e.ctrlKey;\n        const cmdKey = e.metaKey;\n        const shiftKey = e.shiftKey;\n        //const activeItemIndex = this.getIndexByElement(this.activeItem);\n        if (e.code === \"ArrowDown\" ||\n            e.code === \"ArrowUp\" ||\n            e.code === \"Space\" ||\n            e.code === \"Backspace\" ||\n            e.code === \"Delete\" ||\n            e.code === \"KeyA\") {\n            e.preventDefault();\n        }\n        if (e.code === \"ArrowDown\" || e.code === \"ArrowUp\") {\n            this.handleArrow(e.code, shiftKey);\n        }\n        else if (e.code === \"Space\") {\n            if (shiftKey && ctrlKey) {\n                /*uncheck checkbox*/\n                // const changedLength = this.setCheckboxState(\n                //   this.getHighlightedItems(),\n                //   false\n                // );\n                //changedLength > 0 && (this.hideKeyboardSuggestions = true);\n            }\n            else if (shiftKey && (!ctrlKey || !cmdKey)) {\n                // const changedLength = this.setCheckboxState(\n                //   this.getHighlightedItems(),\n                //   true\n                // );\n                // changedLength > 0 && (this.hideKeyboardSuggestions = true);\n            }\n            else if (!shiftKey &&\n                (ctrlKey || cmdKey) &&\n                this.selectedItemsLength() >= 1) {\n                this.unselectHighlightedItems(true);\n            }\n            else if (!ctrlKey && !cmdKey) {\n                if (this.singleSelection) {\n                    if (this.activeItem === this.getSelectedItemsFunc()[0]) {\n                        return;\n                    }\n                    this.clearSelectedItems();\n                    this.selectItems(this.activeItem);\n                }\n                else {\n                    /*multi-select allowed*/\n                    if (ctrlKey || cmdKey) {\n                        this.clearHighlightedItems();\n                    }\n                    else {\n                        this.selectItems(this.activeItem);\n                        //this.selectHighlightedItems();\n                    }\n                }\n            }\n            const selectedItems = this.getSelectedItemsFunc();\n            if (!ctrlKey || !cmdKey) {\n                selectedItems.forEach(item => {\n                    item.checked = true;\n                });\n            }\n            else {\n                selectedItems.forEach(item => {\n                    item.checked = false;\n                });\n            }\n        }\n        else if (e.code === \"KeyA\" &&\n            (ctrlKey || cmdKey) &&\n            !this.singleSelection) {\n            /*highlight all*/\n            this.highlightAll();\n        }\n        else if (e.code === \"Delete\" || e.code === \"Backspace\") {\n            /*Deselect highlighted items*/\n            this.unselectHighlightedItems();\n        }\n        //this.evaluateSelectedItems();\n    };\n    handleArrow = (direction, shiftKey) => {\n        /*Get the next element*/\n        let newElement;\n        const activeElement = this.getActiveItem();\n        newElement =\n            direction === \"ArrowDown\"\n                ? (newElement = this.getNextItem(activeElement))\n                : (newElement = this.getPrevItem(activeElement));\n        /*Handle*/\n        if (newElement) {\n            this.singleSelection &&\n                !this.allowsEmpty &&\n                newElement !== this.getSelectedItemsFunc()[0] &&\n                this.clearSelectedItems();\n            if (shiftKey && !this.singleSelection) {\n                !this.activeItem.selected && this.selectItems(this.activeItem);\n                !newElement.selected && this.selectItems(newElement);\n            }\n            this.unhighlightAll();\n            this.setActiveItem(newElement);\n            this.highlightItem(newElement);\n            if (shiftKey && !this.singleSelection) {\n                //this.selectItems(this.activeItem);\n            }\n            if ((this.singleSelection || (!this.singleSelection && shiftKey)) &&\n                !newElement.selected &&\n                !this.allowsEmpty) {\n                this.selectItems(newElement);\n            }\n            else if (this.singleSelection) {\n            }\n            repositionScroll(this.main, newElement, direction);\n        }\n    };\n    /* SELECTED */\n    setSiblingSelected = async () => {\n        const allItems = this.getAllItems();\n        allItems.forEach((item, i) => {\n            if (i === allItems.length - 1) {\n                item.siblingIsSelected = false;\n            }\n            else {\n                if (allItems[i + 1].selected) {\n                    item.siblingIsSelected = true;\n                }\n                else {\n                    item.siblingIsSelected = false;\n                }\n            }\n        });\n    };\n    clearSelectedItems(ignoreHighlighted = false) {\n        const actualSelectedItems = ignoreHighlighted\n            ? this.el.querySelectorAll(\"gxg-list-box-item[selected]:not([highlighted])\")\n            : this.el.querySelectorAll(\"gxg-list-box-item[selected]\");\n        if (actualSelectedItems.length > 0) {\n            actualSelectedItems.forEach(item => {\n                this.unselectItems(item);\n            });\n        }\n    }\n    selectedItemsLength = () => {\n        return this.getSelectedItemsFunc().length;\n    };\n    getSelectedItemsFunc() {\n        const selectedItemsArray = [];\n        const enabledItems = this.getAllItems();\n        if (enabledItems?.length) {\n            enabledItems.forEach(item => {\n                item.selected && selectedItemsArray.push(item);\n            });\n        }\n        return selectedItemsArray;\n    }\n    /* HIGHLIGHTED */\n    highlightItem(item, doNotActivate = false) {\n        if (item) {\n            this.singleSelection && this.clearHighlightedItems();\n            item.highlighted = true;\n            !doNotActivate && (this.activeItem = item);\n        }\n    }\n    unhighlightItem(item) {\n        if (item) {\n            item.highlighted = false;\n        }\n    }\n    unhighlightAll(ignoreActiveItem = false) {\n        const enabledItems = this.getEnabledItems();\n        if (enabledItems?.length) {\n            enabledItems.forEach(item => {\n                ignoreActiveItem && item === this.activeItem\n                    ? null\n                    : (item.highlighted = false);\n            });\n            return enabledItems.length;\n        }\n        return 0;\n    }\n    toggleHighlightedItems() {\n        const highlightedItems = this.getHighlightedItems();\n        highlightedItems.forEach(item => {\n            this.toggleItem(item);\n        });\n    }\n    selectHighlightedItems() {\n        const selectedItems = this.selectItems(this.getHighlightedItems());\n        return selectedItems;\n    }\n    unselectHighlightedItems(spacePressed = false) {\n        const length = this.unselectItems(this.getHighlightedItems(), spacePressed);\n        return length;\n    }\n    clearHighlightedItems() {\n        const enabledItems = this.getEnabledItems();\n        if (enabledItems?.length) {\n            enabledItems.forEach(item => {\n                item.highlighted && this.unhighlightItem(item);\n            });\n        }\n    }\n    getHighlightedItems() {\n        const highlightedItemsArray = [];\n        const enabledItems = this.getEnabledItems();\n        if (enabledItems?.length) {\n            enabledItems.forEach(item => {\n                item.highlighted && highlightedItemsArray.push(item);\n            });\n        }\n        return highlightedItemsArray;\n    }\n    getHighlightedItemsLength() {\n        return this.getHighlightedItems().length;\n    }\n    highlightAll() {\n        let highlightedItemsLength = 0;\n        const enabledItems = this.getEnabledItems();\n        if (enabledItems?.length) {\n            enabledItems.forEach(item => {\n                this.highlightItem(item, true);\n                highlightedItemsLength++;\n            });\n        }\n        return highlightedItemsLength;\n    }\n    /* INDEX */\n    getItemByIndex(index) {\n        const enabledItems = this.getEnabledItems();\n        let itemByIndex;\n        if (enabledItems?.length) {\n            itemByIndex = enabledItems.find(item => item.index === index);\n        }\n        return itemByIndex;\n    }\n    getIndexByElement = (el) => {\n        let index;\n        const enabledItems = this.getEnabledItems();\n        if (enabledItems?.length) {\n            const element = enabledItems.find(item => item === el);\n            element && (index = element.index);\n        }\n        return index;\n    };\n    /* PREV/NEXT */\n    getNextItem(currentActive) {\n        const enabledItems = this.getEnabledItems();\n        const enabledActiveItemIndex = enabledItems.findIndex(enabledItem => {\n            return enabledItem === currentActive;\n        });\n        //If is the last item, do nothing\n        if (enabledActiveItemIndex === enabledItems.length - 1) {\n            return null;\n        }\n        else {\n            return enabledItems[enabledActiveItemIndex + 1];\n        }\n    }\n    getPrevItem(currentActive) {\n        const enabledItems = this.getEnabledItems();\n        const enabledActiveItemIndex = enabledItems.findIndex(enabledItem => {\n            return enabledItem === currentActive;\n        });\n        //If is the first item, do nothing\n        if (enabledActiveItemIndex === 0) {\n            return null;\n        }\n        else {\n            return enabledItems[enabledActiveItemIndex - 1];\n        }\n    }\n    /* SELECTED */\n    selectItems(items) {\n        let selected = 0;\n        if (items && Array.isArray(items) && items.length > 0) {\n            items.forEach(item => {\n                if (!item.selected && !item.disabled) {\n                    (item.selected = true) && selected++;\n                }\n                this.activeItem !== item && this.unhighlightItem(item);\n            });\n        }\n        else if (items && !Array.isArray(items)) {\n            if (!items.selected && !items.disabled) {\n                (items.selected = true) && selected++;\n            }\n            this.activeItem !== items && this.unhighlightItem(items);\n        }\n        //this.updateSelectedItems();\n        return selected;\n    }\n    unselectItems(items, spacePressed = false) {\n        let unselected = 0;\n        let selectedItemsLength = this.selectedItemsLength();\n        if (items &&\n            Array.isArray(items) &&\n            items.length > 0 &&\n            selectedItemsLength > 0) {\n            items.forEach(item => {\n                if (item.selected && !item.disabled) {\n                    if (this.allowsEmpty) {\n                        item.selected = false;\n                        unselected++;\n                    }\n                    else {\n                        /*al least one item has to stay selected*/\n                        if (selectedItemsLength > 1) {\n                            item.selected = false;\n                            unselected++;\n                            selectedItemsLength--;\n                        }\n                    }\n                }\n                this.activeItem !== item && this.unhighlightItem(item);\n                if (spacePressed) {\n                    item.checked = false;\n                }\n            });\n        }\n        else if (items && !Array.isArray(items)) {\n            if (items.selected && !items.disabled) {\n                items.selected = false;\n                if (spacePressed) {\n                    items.checked = false;\n                }\n                unselected++;\n            }\n            this.activeItem !== items && this.unhighlightItem(items);\n        }\n        //unselected > 0 && this.updateSelectedItems();\n        return unselected;\n    }\n    toggleItem(item) {\n        if (item?.selected) {\n            this.unselectItems(item);\n        }\n        else {\n            this.selectItems(item);\n        }\n    }\n    evaluateSelectedItems = () => {\n        const selectedItemsArray = [];\n        const selectedItemsArrayFullInfo = [];\n        const selectedItems = this.getSelectedItems();\n        selectedItems.then(result => {\n            result.forEach(item => {\n                selectedItemsArray.push(item.value);\n                selectedItemsArrayFullInfo.push({\n                    active: item.active,\n                    selected: item.selected,\n                    checked: item.checked,\n                    index: item.index,\n                    value: item.value\n                });\n            });\n            const arraysDiffer = JSON.stringify(this.selectedItemsState) !==\n                JSON.stringify(selectedItemsArray);\n            if (arraysDiffer) {\n                this.selectedItemsState = selectedItemsArray;\n                this.selectedItems = [...selectedItemsArrayFullInfo];\n            }\n        });\n    };\n    updateSelectedItems = () => {\n        const selectedItemsArray = [];\n        const selectedItems = this.getSelectedItems();\n        selectedItems.then(result => {\n            result.forEach(item => {\n                selectedItemsArray.push(item.value);\n            });\n            const arraysDiffer = JSON.stringify(this.selectedItemsState) !==\n                JSON.stringify(selectedItemsArray);\n            if (arraysDiffer) {\n                this.selectedItemsState = selectedItemsArray;\n            }\n        });\n    };\n    /* ACTIVE */\n    getActiveItem() {\n        const enabledItems = this.getEnabledItems();\n        return enabledItems.find(item => item.active);\n    }\n    setActiveItem(item) {\n        if (item) {\n            this.clearActiveItem(); /*Only one active item allowed at a time*/\n            item.active = true;\n            this.activeItem = item;\n            return true;\n        }\n        return false;\n    }\n    clearActiveItem() {\n        const activeItem = this.getActiveItem();\n        if (activeItem) {\n            activeItem.active = false;\n            return true;\n        }\n        return false;\n    }\n    /* ENABLED */\n    getEnabledItems() {\n        const enabledItemsArray = [];\n        const enabledItems = this.el.querySelectorAll(\"gxg-list-box-item\");\n        enabledItems.forEach(item => {\n            !item.disabled && enabledItemsArray.push(item);\n        });\n        return enabledItemsArray;\n    }\n    /* DISABLED*/\n    getDisabledItems() {\n        const disabledItemsArray = [];\n        const allItems = this.el.querySelectorAll(\"gxg-list-box-item\");\n        allItems.forEach(item => {\n            item.disabled && disabledItemsArray.push(item);\n        });\n        return disabledItemsArray;\n    }\n    /* CHECKBOX */\n    setCheckboxState(items, check = true) {\n        if (items && Array.isArray(items) && items.length !== 0) {\n            let changed = 0;\n            items.forEach(item => {\n                if (!item.checked && check) {\n                    item.checked = true;\n                    changed++;\n                }\n                else if (item.checked && !check) {\n                    item.checked = false;\n                    changed++;\n                }\n            });\n            return changed;\n        }\n        else if (!(items && Array.isArray(items))) {\n            const item = items;\n            if (!item.checked && check) {\n                item.checked = true;\n                return 1;\n            }\n            else if (item.checked && !check) {\n                item.checked = false;\n                return 1;\n            }\n        }\n        return 0;\n    }\n    /* OTHER */\n    getAllItems = () => {\n        const allItemsArray = [];\n        const allItems = this.el.querySelectorAll(\"gxg-list-box-item\");\n        if (allItems?.length) {\n            allItems.forEach(item => {\n                allItemsArray.push(item);\n            });\n        }\n        return allItemsArray;\n    };\n    getFirstEnabledItem() {\n        return this.getEnabledItems()[0] || null;\n    }\n    getFirstSelectedItem() {\n        const enabledItems = this.getEnabledItems();\n        if (enabledItems?.length && enabledItems[0].selected) {\n            return enabledItems[0];\n        }\n        return undefined;\n    }\n    selectMultipleItems(fromIndex, toIndex) {\n        let comparator = toIndex;\n        const selectedItems = [];\n        if (fromIndex === toIndex) {\n            return;\n        }\n        else if (fromIndex > toIndex) {\n            const fromIndexCopy = fromIndex;\n            fromIndex = toIndex;\n            toIndex = fromIndexCopy;\n            comparator = fromIndex;\n        }\n        for (let i = fromIndex; i <= toIndex; i++) {\n            const item = this.getItemByIndex(i);\n            item && selectedItems.push(item);\n            if (i === comparator) {\n                this.highlightItem(item);\n            }\n        }\n        if (selectedItems?.length > 0) {\n            this.selectItems(selectedItems);\n        }\n    }\n    renderKeyboardSuggestions() {\n        if (Object.keys(this.keyboardSuggestions).length) {\n            const itemsArray = [];\n            for (const key in this.keyboardSuggestions) {\n                const listItem = (h(\"li\", { class: \"suggestions-__list-item\" }, this.keyboardSuggestions[key]));\n                itemsArray.push(listItem);\n            }\n            return (h(\"div\", { class: \"suggestions suggestions__container\" }, h(\"ul\", { class: \"suggestions__list\" }, itemsArray), h(\"gxg-button\", { class: \"suggestions__button\", type: \"secondary-icon-only\", icon: \"gemini-tools/close\", onClick: () => (this.hideKeyboardSuggestions = true) })));\n        }\n    }\n    /* RENDER */\n    render() {\n        return (h(Host, { class: {\n                large: state.large,\n                \"has-title\": !!this.theTitle,\n                [formClasses[\"VALIDATION_INDETERMINATE_CLASS\"]]: this.validationStatus === \"indeterminate\",\n                [formClasses[\"VALIDATION_WARNING_CLASS\"]]: this.validationStatus === \"warning\",\n                [formClasses[\"VALIDATION_ERROR_CLASS\"]]: this.validationStatus === \"error\",\n                [formClasses[\"VALIDATION_SUCCESS_CLASS\"]]: this.validationStatus === \"success\",\n                [commonClassesNames[\"DISABLED_CLASS\"]]: this.disabled\n            }, onKeyDown: this.handleKeyDown }, h(\"div\", { class: { container: true, \"form-element\": true }, tabindex: this.disabled ? \"-1\" : \"0\", ref: el => (this.containerEl = el) }, this.theTitle ? (h(\"header\", { class: { header: true }, ref: el => (this.header = el) }, this.theTitle)) : null, !this.disableSuggestions && !this.hideKeyboardSuggestions\n            ? this.renderKeyboardSuggestions()\n            : null, h(\"main\", { class: {\n                main: true\n            }, style: {\n                height: `calc(100% - ${this.headerHeight}px)`\n            }, ref: el => (this.main = el) }, h(\"slot\", null))), formMessageLogic(this)));\n    }\n    static get is() { return \"gxg-list-box\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"list-box.scss\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"list-box.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"theTitle\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The listbox title that appears on the header\"\n                },\n                \"attribute\": \"the-title\",\n                \"reflect\": false\n            },\n            \"checkboxes\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute will display a checkbox for every item\"\n                },\n                \"attribute\": \"checkboxes\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"singleSelection\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute will deactivate multi-selection\"\n                },\n                \"attribute\": \"single-selection\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"allowsEmpty\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute allows the list-box to not have any list-box-item selected\"\n                },\n                \"attribute\": \"allows-empty\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"emitEmptySelection\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute prevents 'selectionChanged' event from being emitted if the selection is empty.\"\n                },\n                \"attribute\": \"emit-empty-selection\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"keyboardSuggestions\": {\n                \"type\": \"unknown\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"KeyboardSuggestions\",\n                    \"resolved\": \"{ checkCheckbox: string; uncheckCheckbox: string; }\",\n                    \"references\": {\n                        \"KeyboardSuggestions\": {\n                            \"location\": \"local\",\n                            \"path\": \"/home/circleci/repo/src/components/list-box/list-box.tsx\",\n                            \"id\": \"src/components/list-box/list-box.tsx::KeyboardSuggestions\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"An object with suggestions about the possible keyboard combinations\"\n                },\n                \"defaultValue\": \"{\\n    checkCheckbox: \\\"to check a checkbox press (shift + space)\\\",\\n    uncheckCheckbox: \\\"to uncheck a checkbox press (shift + ctrl + space)\\\"\\n  }\"\n            },\n            \"disableSuggestions\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Disable suggestions about keyboard combinations\"\n                },\n                \"attribute\": \"disable-suggestions\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"noBorder\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute disables the border all around\"\n                },\n                \"attribute\": \"no-border\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"borderTop\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute adds a border to the top\"\n                },\n                \"attribute\": \"border-top\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"borderEnd\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute adds a border to the end\"\n                },\n                \"attribute\": \"border-end\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"borderBottom\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute adds a border to the bottom\"\n                },\n                \"attribute\": \"border-bottom\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"borderStart\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute adds a border to the start\"\n                },\n                \"attribute\": \"border-start\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"disabled\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute makes the component disabled\"\n                },\n                \"attribute\": \"disabled\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"required\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Make the radio-buttons required\"\n                },\n                \"attribute\": \"required\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"validationStatus\": {\n                \"type\": \"string\",\n                \"mutable\": true,\n                \"complexType\": {\n                    \"original\": \"ValidationStatus\",\n                    \"resolved\": \"\\\"error\\\" | \\\"indeterminate\\\" | \\\"success\\\" | \\\"warning\\\"\",\n                    \"references\": {\n                        \"ValidationStatus\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../common/types\",\n                            \"id\": \"src/common/types.ts::ValidationStatus\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The validation status\"\n                },\n                \"attribute\": \"validation-status\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"indeterminate\\\"\"\n            },\n            \"validationMessage\": {\n                \"type\": \"string\",\n                \"mutable\": true,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The required message if this input is required and no value is provided (optional). If this is not provided, the default browser required message will show up\"\n                },\n                \"attribute\": \"validation-message\",\n                \"reflect\": false\n            },\n            \"informationMessage\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"An informative message to help the user filling the information\"\n                },\n                \"attribute\": \"information-message\",\n                \"reflect\": false\n            }\n        };\n    }\n    static get states() {\n        return {\n            \"selectedItems\": {},\n            \"checkedItems\": {},\n            \"hideKeyboardSuggestions\": {},\n            \"headerHeight\": {}\n        };\n    }\n    static get events() {\n        return [{\n                \"method\": \"selectionChanged\",\n                \"name\": \"selectionChanged\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"This event emits the items that are currently selected. event.detail contains the selected items as objects. Each object contains the item idex and the item value. If value was not provided, the value will be the item innerText.\"\n                },\n                \"complexType\": {\n                    \"original\": \"SelectionChangedEvent\",\n                    \"resolved\": \"{ items: ItemsInformation[]; }\",\n                    \"references\": {\n                        \"SelectionChangedEvent\": {\n                            \"location\": \"local\",\n                            \"path\": \"/home/circleci/repo/src/components/list-box/list-box.tsx\",\n                            \"id\": \"src/components/list-box/list-box.tsx::SelectionChangedEvent\"\n                        }\n                    }\n                }\n            }, {\n                \"method\": \"checkedChanged\",\n                \"name\": \"checkedChanged\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"\"\n                },\n                \"complexType\": {\n                    \"original\": \"any\",\n                    \"resolved\": \"any\",\n                    \"references\": {}\n                }\n            }];\n    }\n    static get methods() {\n        return {\n            \"getSelectedItems\": {\n                \"complexType\": {\n                    \"signature\": \"() => Promise<ItemsInformation[]>\",\n                    \"parameters\": [],\n                    \"references\": {\n                        \"Promise\": {\n                            \"location\": \"global\",\n                            \"id\": \"global::Promise\"\n                        },\n                        \"ItemsInformation\": {\n                            \"location\": \"local\",\n                            \"path\": \"/home/circleci/repo/src/components/list-box/list-box.tsx\",\n                            \"id\": \"src/components/list-box/list-box.tsx::ItemsInformation\"\n                        },\n                        \"HTMLGxgListBoxItemElement\": {\n                            \"location\": \"global\",\n                            \"id\": \"global::HTMLGxgListBoxItemElement\"\n                        }\n                    },\n                    \"return\": \"Promise<ItemsInformation[]>\"\n                },\n                \"docs\": {\n                    \"text\": \"*******************************\\nMETHODS\\n*******************************\",\n                    \"tags\": []\n                }\n            }\n        };\n    }\n    static get elementRef() { return \"el\"; }\n    static get watchers() {\n        return [{\n                \"propName\": \"selectedItems\",\n                \"methodName\": \"selectedItemsHandler\"\n            }, {\n                \"propName\": \"checkedItems\",\n                \"methodName\": \"checkedItemsHandler\"\n            }, {\n                \"propName\": \"disabled\",\n                \"methodName\": \"disabledHandler\"\n            }, {\n                \"propName\": \"hideKeyboardSuggestions\",\n                \"methodName\": \"hideKeyboardSuggestionsHandler\"\n            }];\n    }\n    static get listeners() {\n        return [{\n                \"name\": \"checkboxClicked\",\n                \"method\": \"checkboxClickedHandler\",\n                \"target\": undefined,\n                \"capture\": false,\n                \"passive\": false\n            }, {\n                \"name\": \"itemLoaded\",\n                \"method\": \"itemLoadedHandler\",\n                \"target\": undefined,\n                \"capture\": false,\n                \"passive\": false\n            }, {\n                \"name\": \"itemClicked\",\n                \"method\": \"itemClickedHandler\",\n                \"target\": undefined,\n                \"capture\": false,\n                \"passive\": false\n            }, {\n                \"name\": \"itemSelected\",\n                \"method\": \"itemSelectedHandler\",\n                \"target\": undefined,\n                \"capture\": false,\n                \"passive\": false\n            }, {\n                \"name\": \"checkboxStateChanged\",\n                \"method\": \"checkboxStateChangedHandler\",\n                \"target\": undefined,\n                \"capture\": false,\n                \"passive\": false\n            }];\n    }\n}\n//# sourceMappingURL=list-box.js.map\n",":host(.gxg--disabled) .form-element,\n:host(.gxg--disabled.form-element) {\n  pointer-events: none;\n  background-color: var(--ds-background-color-disabled) !important;\n  color: var(--ds-color--disabled) !important;\n  border-color: var(--ds-border-color-disabled) !important;\n  cursor: default !important;\n}\n\n:root {\n  --ui-animaton-speed: 0.2s;\n}\n\n/*ALIGNMENT*/\n/*Ellipsis*/\n/*****************************************************\nTYPOGRAPHY\n*****************************************************/\n/*Title 01 (Positive)*/\n.gxg-title-01 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-01-font-weight);\n  font-size: var(--ds-title-01-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n/*Title 01 (Negative)*/\n.gxg-title-01--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-01-font-weight);\n  font-size: var(--ds-title-01-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 02 (Positive)*/\n.gxg-title-02 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-02-font-weight);\n  font-size: var(--ds-title-02-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-02--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-02-font-weight);\n  font-size: var(--ds-title-02-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--color-on-primary);\n}\n\n/*Title 03*/\n.gxg-title-03 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-03-font-weight);\n  font-size: var(--ds-title-03-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-03--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-03-font-weight);\n  font-size: var(--ds-title-03-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 04*/\n.gxg-title-04 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-04-font-weight);\n  font-size: var(--ds-title-04-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-04--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-04-font-weight);\n  font-size: var(--ds-title-04-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 05*/\n.gxg-title-05 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-05-font-weight);\n  font-size: var(--ds-title-05-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-05--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-05-font-weight);\n  font-size: var(--ds-title-05-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Text*/\n.gxg-text {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-text--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n.gxg-text--gray {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--dimmed);\n}\n\n/*Quote*/\n.gxg-quote {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  font-style: italic;\n}\n\n.gxg-quote--negative {\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Link*/\n.gxg-link {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n}\n.gxg-link:hover {\n  color: var(--ds-base-font-color--link-hover);\n}\n.gxg-link:active {\n  color: var(--ds-base-font-color--link-active);\n}\n\n.gxg-link-gray {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n  color: var(--ds-base-font-color--dimmed);\n}\n.gxg-link-gray:hover {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n  color: var(--ds-base-font-color--dimmed);\n  filter: brightness(1.4);\n}\n\n/*Alerts*/\n.gxg-alert-error {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--error);\n  display: inline-block;\n}\n\n.gxg-alert-warning {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--warning);\n  display: inline-block;\n}\n\n.gxg-alert-success {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--success);\n  display: inline-block;\n}\n\n/*Tab*/\n.gxg-tab--disabled {\n  color: var(--color-primary-disabled);\n  pointer-events: none;\n}\n.gxg-tab--disabled[disabled] {\n  color: var(--color-primary-disabled);\n  pointer-events: none;\n}\n\n/*Label*/\n.gxg-label {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--gxg-label-font-weight);\n  font-size: var(--gxg-label-font-size);\n  color: var(--gxg-label-color);\n  text-align: center;\n  line-height: 1.455em;\n  display: flex;\n  align-items: center;\n}\n.gxg-label:hover {\n  color: var(--color-primary-hover);\n}\n.gxg-label:focus {\n  color: var(--color-primary-active);\n}\n.gxg-label:active {\n  color: var(--color-primary-active);\n}\n.gxg-label[disabled] {\n  color: var(--color-primary-disabled);\n}\n\n.gxg-label--negative {\n  color: var(--color-on-primary);\n}\n.gxg-label--negative[disabled] {\n  color: var(--color-on-disabled);\n}\n\n/*****************************************************\nGXG-BUTTON and GXG-BUTTON-GROUP COMMON STYLES\n*****************************************************/\n/*****************************************************\nFORM ELEMENTS\n*****************************************************/\n.gxg-scrollbar {\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n}\n.gxg-scrollbar::-webkit-scrollbar {\n  width: var(--gxg-scrollbar-width);\n  height: var(--gxg-scrollbar-width);\n}\n.gxg-scrollbar::-webkit-scrollbar-track {\n  background-color: var(--gxg-scrollbar-track-background);\n  border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb {\n  background-color: var(--gxg-scrollbar-track-thumb-background);\n  border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb:hover {\n  background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n.gxg-scrollbar::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n\n:host {\n  --ds-icon-size-box--regular: var(--gxg-list-box-item-icon__size-box--regular);\n  --ds-icon-size--regular: var(--gxg-list-box-item-icon__size--regular);\n  display: block;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: inherit;\n  color: inherit;\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  -moz-user-select: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  -o-user-select: none;\n  outline: none;\n  border-bottom: var(--gxg-list-box-item__border) !important;\n}\n:host .container {\n  display: flex;\n  align-items: center;\n  padding: var(--gxg-list-box-item-container__padding);\n  width: 100%;\n  height: var(--ds-list-item-height--spaced);\n  box-sizing: border-box;\n}\n:host .icon {\n  margin-inline-end: var(--gxg-list-box-item-icon__margin-inline-end);\n  flex-shrink: 0;\n}\n:host gxg-form-checkbox::part(box) {\n  outline: none;\n}\n\n.checkbox {\n  margin-inline-end: 8px;\n}\n\n:host(:not([disabled])) {\n  cursor: pointer !important;\n}\n\n:host([disabled]) {\n  pointer-events: none;\n  border-bottom: transparent;\n  color: var(--ds-color-on-disabled);\n}\n\n:host(:hover:not([selected])) {\n  background-color: var(--gxg-list-box-item__background-color--hover);\n}\n\n:host(.has-icon.no-checkbox) .container {\n  padding-inline-start: calc(var(--gxg-list-box-item-container-icon-no-checkbox__padding-inline-start) * 1.5);\n}\n\n.description {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n  /* Adjust as needed */\n}\n\n/*HIGHLIGHTED*/\n/*ACTIVE*/\n:host([active]) {\n  outline: var(--ds-focus-border-width) solid var(--ds-border-color-control--focused);\n  outline-offset: -1px;\n  outline-offset: 0;\n  color: var(--ds-item-color--hover);\n  outline-offset: var(--gxg-tree-view-item__outline-offset--active);\n}\n\n/*SELECTED*/\n:host([selected]:not(.gxg--disabled)) {\n  background-color: var(--ds-item-background-color--selected);\n  color: var(--gxg-grid-row-cell__color--selected);\n}\n\n:host([selected][sibling-is-selected]:not(.gxg--disabled)) {\n  border-bottom-color: var(--ds-item-border-color--selected) !important;\n}\n\n:host([selected]:hover) {\n  background-color: var(--ds-item-background-color--selected-hover);\n}\n\n:host:last-child {\n  border-bottom: none;\n}","import { Host, h } from \"@stencil/core\";\nimport state from \"../store\";\nimport { commonClassesNames } from \"../../common/classesNames\";\nimport { exportParts } from \"../../common/export-parts\";\nexport class GxgListboxItem {\n    constructor() {\n        this.disabled = undefined;\n        this.icon = undefined;\n        this.selected = false;\n        this.siblingIsSelected = false;\n        this.highlighted = false;\n        this.active = false;\n        this.index = null;\n        this.emitCheckboxChange = true;\n        this.value = undefined;\n        this.checkbox = false;\n        this.checked = false;\n        this.mouseOver = false;\n    }\n    parts = {\n        checkbox: \"checkbox\"\n    };\n    exportparts;\n    el;\n    /**\n     * (This event is for internal use.)\n     */\n    itemClicked;\n    /**\n     * (This event is for internal use.)\n     */\n    itemLoaded;\n    /**\n     * (This event is for internal use.)\n     */\n    itemSelected;\n    /**\n     * (This event is for internal use.)\n     */\n    checkboxStateChanged;\n    /**\n     * (This event is for internal use.)\n     */\n    checkboxClicked;\n    watchPropHandler() {\n        this.itemSelected.emit();\n    }\n    checkedChangedHandler(e) {\n        this.checked = e;\n    }\n    checkboxChangedHandler(e) {\n        const checked = e.detail.value;\n        this.emitCheckboxChange &&\n            this.checkboxStateChanged.emit({\n                checkedItem: this.el,\n                checked: checked\n            });\n    }\n    handleCheckboxClick = (e) => {\n        this.checkboxClicked.emit(this.el);\n        e.stopPropagation();\n        e.target.checked\n            ? (this.checked = true)\n            : (this.checked = false);\n    };\n    iconColor() {\n        if (this.disabled) {\n            return \"disabled\";\n        }\n        else if (this.selected) {\n            return \"primary-enabled\";\n        }\n        else {\n            return \"auto\";\n        }\n    }\n    componentWillLoad() {\n        this.attachExportParts();\n    }\n    attachExportParts = () => {\n        const part = this.el.getAttribute(\"part\");\n        const exportPartsResult = exportParts(part, this.parts);\n        exportPartsResult.length && (this.exportparts = exportPartsResult);\n    };\n    componentDidLoad() {\n        this.itemLoaded.emit({ value: this.value });\n    }\n    itemClickedFunc(e) {\n        this.itemClicked.emit({\n            clickedItem: this.el,\n            ctrlKey: e.ctrlKey,\n            cmdKey: e.metaKey,\n            shiftKey: e.shiftKey,\n            index: this.index\n        });\n    }\n    onMouseOver() {\n        this.mouseOver = true;\n    }\n    onMouseOut() {\n        this.mouseOver = false;\n    }\n    render() {\n        return (h(Host, { class: {\n                \"has-icon\": this.icon !== undefined,\n                \"no-checkbox\": !this.checkbox,\n                large: state.large,\n                [commonClassesNames[\"DISABLED_CLASS\"]]: this.disabled\n            }, onClick: this.itemClickedFunc.bind(this),\n            // onMouseOver={this.onMouseOver.bind(this)}\n            // onMouseOut={this.onMouseOut.bind(this)}\n            exportParts: this.exportparts ? this.exportparts : null }, h(\"div\", { class: { container: true, \"form-element\": true } }, this.checkbox && !this.disabled ? (h(\"gxg-form-checkbox\", { tabindex: \"-1\", checked: this.checked, onClick: this.handleCheckboxClick, disabled: this.disabled, part: this.parts.checkbox, class: \"checkbox\" })) : null, this.icon !== undefined ? (h(\"gxg-icon\", { class: \"icon\", color: this.iconColor(), size: \"regular\", type: this.icon })) : null, h(\"div\", { class: \"description\" }, h(\"slot\", null)))));\n    }\n    static get is() { return \"gxg-list-box-item\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"list-box-item.scss\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"list-box-item.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"disabled\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute disabled the list-box-item\"\n                },\n                \"attribute\": \"disabled\",\n                \"reflect\": true\n            },\n            \"icon\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Any icon that belongs to Gemini icon library: https://gx-gemini.netlify.app/?path=/story/icons\"\n                },\n                \"attribute\": \"icon\",\n                \"reflect\": false,\n                \"defaultValue\": \"undefined\"\n            },\n            \"selected\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute sets this item as selected\"\n                },\n                \"attribute\": \"selected\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"siblingIsSelected\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"This property is for internal use\"\n                },\n                \"attribute\": \"sibling-is-selected\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"highlighted\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute sets this item as highlighted\"\n                },\n                \"attribute\": \"highlighted\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"active\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute sets this item as active (it is as if it was focused)\\nOnly one item at a time should be active.\"\n                },\n                \"attribute\": \"active\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"index\": {\n                \"type\": \"number\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"number\",\n                    \"resolved\": \"number\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"This property is set by the list-box item. It should not be set by the user.\"\n                },\n                \"attribute\": \"index\",\n                \"reflect\": true,\n                \"defaultValue\": \"null\"\n            },\n            \"emitCheckboxChange\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute emits the 'checkboxChanged' event every time a checkbox value is changed.\"\n                },\n                \"attribute\": \"emit-checkbox-change\",\n                \"reflect\": false,\n                \"defaultValue\": \"true\"\n            },\n            \"value\": {\n                \"type\": \"any\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"any\",\n                    \"resolved\": \"any\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The item value. If value is not provided, the value will be the item innerHTML.\"\n                },\n                \"attribute\": \"value\",\n                \"reflect\": false,\n                \"defaultValue\": \"undefined\"\n            },\n            \"checkbox\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute will add a checkbox to the item.\"\n                },\n                \"attribute\": \"checkbox\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"checked\": {\n                \"type\": \"boolean\",\n                \"mutable\": true,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute will make the checkbox checked.\"\n                },\n                \"attribute\": \"checked\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            }\n        };\n    }\n    static get states() {\n        return {\n            \"mouseOver\": {}\n        };\n    }\n    static get events() {\n        return [{\n                \"method\": \"itemClicked\",\n                \"name\": \"itemClicked\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"(This event is for internal use.)\"\n                },\n                \"complexType\": {\n                    \"original\": \"ItemClicked\",\n                    \"resolved\": \"{ clickedItem: HTMLGxgListBoxItemElement; ctrlKey: boolean; cmdKey: boolean; shiftKey: boolean; index: number; }\",\n                    \"references\": {\n                        \"ItemClicked\": {\n                            \"location\": \"local\",\n                            \"path\": \"/home/circleci/repo/src/components/list-box-item/list-box-item.tsx\",\n                            \"id\": \"src/components/list-box-item/list-box-item.tsx::ItemClicked\"\n                        }\n                    }\n                }\n            }, {\n                \"method\": \"itemLoaded\",\n                \"name\": \"itemLoaded\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"(This event is for internal use.)\"\n                },\n                \"complexType\": {\n                    \"original\": \"any\",\n                    \"resolved\": \"any\",\n                    \"references\": {}\n                }\n            }, {\n                \"method\": \"itemSelected\",\n                \"name\": \"itemSelected\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"(This event is for internal use.)\"\n                },\n                \"complexType\": {\n                    \"original\": \"any\",\n                    \"resolved\": \"any\",\n                    \"references\": {}\n                }\n            }, {\n                \"method\": \"checkboxStateChanged\",\n                \"name\": \"checkboxStateChanged\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"(This event is for internal use.)\"\n                },\n                \"complexType\": {\n                    \"original\": \"ItemChecked\",\n                    \"resolved\": \"{ checkedItem: HTMLGxgListBoxItemElement; checked: boolean; }\",\n                    \"references\": {\n                        \"ItemChecked\": {\n                            \"location\": \"local\",\n                            \"path\": \"/home/circleci/repo/src/components/list-box-item/list-box-item.tsx\",\n                            \"id\": \"src/components/list-box-item/list-box-item.tsx::ItemChecked\"\n                        }\n                    }\n                }\n            }, {\n                \"method\": \"checkboxClicked\",\n                \"name\": \"checkboxClicked\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"(This event is for internal use.)\"\n                },\n                \"complexType\": {\n                    \"original\": \"any\",\n                    \"resolved\": \"any\",\n                    \"references\": {}\n                }\n            }];\n    }\n    static get elementRef() { return \"el\"; }\n    static get watchers() {\n        return [{\n                \"propName\": \"selected\",\n                \"methodName\": \"watchPropHandler\"\n            }];\n    }\n    static get listeners() {\n        return [{\n                \"name\": \"checked\",\n                \"method\": \"checkedChangedHandler\",\n                \"target\": undefined,\n                \"capture\": false,\n                \"passive\": false\n            }, {\n                \"name\": \"change\",\n                \"method\": \"checkboxChangedHandler\",\n                \"target\": undefined,\n                \"capture\": false,\n                \"passive\": false\n            }];\n    }\n}\n//# sourceMappingURL=list-box-item.js.map\n"],"mappings":"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"}

package/dist/genexus-ide-ui/p-4fc6d6a7.entry.js

@@ -0,0 +1,24 @@
+import { r as s, h as o, H as r } from "./p-2776d2f9.js";
+
+const t = ":host{display:block}";
+
+const n = class {
+  constructor(o) {
+    s(this, o);
+    this.displayTitle = false;
+  }
+  // 5.EVENTS (EMIT) //
+  // 6.COMPONENT LIFECYCLE METHODS //
+  // 7.LISTENERS //
+  // 8.PUBLIC METHODS API //
+  // 9.LOCAL METHODS //
+  // 10.RENDER() FUNCTION //
+  render() {
+    return o(r, null, "window");
+  }
+};
+
+n.style = t;
+
+export { n as gxg_window_v2 };
+//# sourceMappingURL=p-4fc6d6a7.entry.js.map

package/dist/genexus-ide-ui/p-4fc6d6a7.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["windowCss","GxgWindowV2","constructor","hostRef","this","displayTitle","render","h","Host"],"sources":["node_modules/@genexus/gemini/dist/collection/components/window-v2/window.css?tag=gxg-window-v2&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/window-v2/window-v2.js"],"sourcesContent":[":host {\n  display: block;\n}","import { Host, h } from \"@stencil/core\";\nexport class GxgWindowV2 {\n    constructor() {\n        this.displayTitle = false;\n    }\n    // 5.EVENTS (EMIT) //\n    // 6.COMPONENT LIFECYCLE METHODS //\n    // 7.LISTENERS //\n    // 8.PUBLIC METHODS API //\n    // 9.LOCAL METHODS //\n    // 10.RENDER() FUNCTION //\n    render() {\n        return h(Host, null, \"window\");\n    }\n    static get is() { return \"gxg-window-v2\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"window.scss\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"window.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"displayTitle\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"false\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If true it displays the component title on the header\"\n                },\n                \"attribute\": \"display-title\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            }\n        };\n    }\n}\n//# sourceMappingURL=window-v2.js.map\n"],"mappings":";;AAAA,MAAMA,IAAY;;MCCLC,IAAW;EACpB,WAAAC,CAAAC;;IACIC,KAAKC,eAAe;;;;;;;;EAQxB,MAAAC;IACI,OAAOC,EAAEC,GAAM,MAAM"}