@genexus/genexus-ide-ui 1.1.5 → 1.1.6

package/dist/esm/helpers-5f1c9a32.js.map

@@ -1 +0,0 @@
-{"file":"helpers-5f1c9a32.js","mappings":"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","names":[],"sources":["src/common/helpers.tsx"],"sourcesContent":["import { h } from \"@stencil/core\";\n\nimport {\n  ChCheckboxCustomEvent,\n  ComboBoxModel,\n  TreeViewItemModel\n} from \"@genexus/chameleon-controls-library\";\nexport type ChCheckboxArray = HTMLChCheckboxElement[] | null;\n\nimport { GxOption } from \"./types\";\n\nconst daysOfWeek = [\n  \"Sunday\",\n  \"Monday\",\n  \"Tuesday\",\n  \"Wednesday\",\n  \"Thursday\",\n  \"Friday\",\n  \"Saturday\"\n];\n\n/**\n * @param element an HTMLElement\n * @returns an alphabetically ordered array of all the parts and exportparts the element contains.\n */\nexport const getElementSelectorParts = (element: HTMLElement) => {\n  const queries: string[] = [];\n  const elementParts = element.shadowRoot?.querySelectorAll(`[part]`);\n  const elementExportParts =\n    element.shadowRoot?.querySelectorAll(`[exportparts]`);\n\n  elementParts?.forEach(el => {\n    queries.push(\n      `${element.tagName.toLowerCase()}::part(${el.getAttribute(\"part\")})`\n    );\n  });\n  elementExportParts?.forEach(el => {\n    queries.push(\n      ...[\n        ...el.getAttribute(\"exportparts\").matchAll(/(?:[\\w-]+:)?([\\w-]+)/g)\n      ].map(item => `${element.tagName.toLowerCase()}::part(${item[1]})`)\n    );\n  });\n\n  return queries.sort();\n};\n\n/**\n * @param selector a part selector\n * @returns A reference to the element the part belongs to.\n */\nexport const querySelectorPart = (selector: string) => {\n  const querySelectorDeep = (\n    element: HTMLElement,\n    parts: string\n  ): HTMLElement => {\n    const shadow = element.shadowRoot;\n    const partList = parts.split(\" \");\n\n    const partElement: HTMLElement = shadow.querySelector(\n      partList.map(partName => `[part~=\"${partName}\"]`).join(\"\")\n    );\n    if (partElement) {\n      return partElement;\n    }\n\n    const exportPartElement: HTMLElement = shadow.querySelector(\n      partList.map(partName => `[exportparts*=\"${partName}\"]`).join(\"\")\n    );\n    if (exportPartElement) {\n      const exportPartList: string[] = [];\n      const exportparts = exportPartElement.getAttribute(\"exportparts\");\n\n      partList.forEach(partItem => {\n        const exportPartName = exportparts.match(\n          `(?:([\\\\w-]+):)?(${partItem})`\n        )[1];\n        if (exportPartName) {\n          exportPartList.push(exportPartName);\n        }\n      });\n\n      if (partList.length === exportPartList.length) {\n        return querySelectorDeep(exportPartElement, exportPartList.join(\" \"));\n      }\n    }\n\n    return null;\n  };\n\n  const selectorItems = selector.match(\"(.*)::part\\\\(([^)]+)\\\\)\");\n  const entity = selectorItems[1];\n  const partName = selectorItems[2];\n\n  return querySelectorDeep(document.querySelector(entity), partName);\n};\n\nconst daysFromToday = (date: Date): number => {\n  const today = new Date();\n  // To calculate the time difference of two dates\n  const timeDifference = today.getTime() - date.getTime();\n  // To calculate the no. of days between two dates\n  const daysDifference = timeDifference / (1000 * 3600 * 24);\n  return Math.floor(daysDifference);\n};\n\n// - - - - - - - - - - - -\n// Date Functions\n// - - - - - - - - - - - -\n\nconst isToday = (date: Date): boolean => {\n  const today = new Date();\n  if (today.toDateString() === date.toDateString()) {\n    return true;\n  }\n  return false;\n};\n\nconst isYesterday = (date: Date): boolean => {\n  const yesterday = new Date();\n  yesterday.setDate(yesterday.getDate() - 1);\n  if (yesterday.toDateString() === date.toDateString()) {\n    return true;\n  }\n  return false;\n};\n\nexport const formatDate = (\n  date: Date,\n  type: FormatDateType = \"date-time\"\n): string => {\n  let formattedDate;\n  // validate date\n  // undefined or null\n  if (date === undefined || date === null) {\n    return \"\";\n  }\n  // If the date object is invalid it will return 'NaN' on getTime() and NaN is never equal to itself\n  const dateIsValid = date.getTime() === date.getTime();\n  if (!dateIsValid) {\n    return \"Invalid date\";\n  }\n  let locale = \"en-US\";\n  const lang = document\n    .getElementsByTagName(\"html\")[0]\n    .getAttribute(\"lang\")\n    ?.valueOf();\n  if (lang === \"es\") {\n    locale = \"es-ES\";\n  }\n  formattedDate = date.toLocaleDateString(locale);\n  const year = date.getFullYear();\n  const month = String(date.getMonth() + 1).padStart(2, \"0\");\n  const day = String(date.getDate()).padStart(2, \"0\");\n  const hours = String(date.getHours()).padStart(2, \"0\");\n  const minutes = String(date.getMinutes()).padStart(2, \"0\");\n  const time = `${hours}:${minutes}`;\n  if (type === \"date-time\") {\n    formattedDate += ` / ${date.toLocaleTimeString()}`;\n  } else if (type === \"date-time-short\") {\n    // No seconds\n    if (locale === \"es-ES\") {\n      formattedDate = `${year}-${month}-${day} ${time}`;\n    } else {\n      formattedDate = `${month}/${day}/${year} ${time}`;\n    }\n  } else if (\"pretty\") {\n    const daysPassedFromToday = daysFromToday(date);\n    const today = new Date();\n    const currentYear = today.getFullYear();\n    if (isToday(date)) {\n      return `Today ${time}`;\n    } else if (isYesterday(date)) {\n      return `Yesterday ${time}`;\n    } else if (daysPassedFromToday <= 7) {\n      // If one week or less, just show the day of the week, and the time\n      const day = daysOfWeek[date.getDay()];\n      return `${day} ${time}`;\n    } else if (currentYear === year) {\n      // If current year, show day number and month name. Example: November 17th\n      if (locale === \"es-ES\") {\n        formattedDate = `${day} de ${date.toLocaleString(\"es-ES\", {\n          month: \"long\"\n        })} ${time}`;\n      } else {\n        formattedDate = `${date.toLocaleString(\"en-US\", {\n          month: \"long\"\n        })} ${day} ${time}`;\n      }\n    } else {\n      // Display date as usual\n      formattedDate = formatDate(date, \"date-time-short\");\n    }\n  }\n  return formattedDate;\n};\n\nexport type FormatDateType =\n  | \"date\"\n  | \"date-time\"\n  | \"date-time-short\"\n  | \"pretty\";\n\n// - - - - - - - - - - - -\n// /End of Date Functions\n// - - - - - - - - - - - -\n\n/* Count the total tree nodes (by default it does not count the first level nodes)*/\nexport const countTreeItems = (\n  treeModel: TreeViewItemModel[],\n  children = false\n): number => {\n  let totalNodes = 0;\n  treeModel.forEach(node => {\n    children && totalNodes++;\n    if (node.items) {\n      totalNodes += countTreeItems(node.items, true);\n    }\n  });\n  return totalNodes;\n};\n\n/**\n * @description it evaluates the initial selected combo item\n * @param options an array of GxOption\n * @returns the initial combo value, which in this case is the id\n */\nexport const setInitialComboValue = (options: GxOption[]): string => {\n  const selected = options.find(option => option.selected);\n  if (selected) {\n    return selected.value || selected.id;\n  } else {\n    return options[0].value || options[0].id;\n  }\n};\n\nexport const escapeRegExp = (str: string) => {\n  return str.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\");\n};\n\n/**\n * @description this function highlights the character(s) that match(es) the filter value.\n * hiChar comes from (hi)light (Char)acters\n * @param text the string to find the filter value on\n * @param filterValue the filter value\n * @returns a span element\n */\nexport const hiChar = function (text: string, filterValue: string) {\n  if (text && filterValue) {\n    const escapedFilterValue = escapeRegExp(filterValue);\n    const re = new RegExp(escapedFilterValue, \"gi\");\n    return (\n      <span\n        innerHTML={text.replace(re, '<span class=\"hiChar\">$&</span>')}\n      ></span>\n    );\n  } else {\n    return text;\n  }\n};\n\nexport const closeOnOutsideClickHandler = (\n  eventInfo: PointerEvent,\n  ref: HTMLElement\n): true | void => {\n  if (!eventInfo.composedPath().includes(ref)) {\n    return true;\n  }\n};\n\nexport const mapOptionsToComboBoxItemModel = (\n  options: GxOption[]\n): ComboBoxModel =>\n  options.map(option => ({\n    value: option.id,\n    caption: option.label\n    // startImgSrc: option.iconName\n  }));\n\nexport const renderChCheckboxItems = (\n  options: GxOption[] | undefined,\n  frontEndCheckboxInputHandler: (\n    event: ChCheckboxCustomEvent<string> | InputEvent\n  ) => void,\n  checkedIds: string[]\n): HTMLChCheckboxElement[] => {\n  return options?.map(option => {\n    const value = checkedIds?.find(\n      id => option.value === id || option.id === id\n    );\n    return (\n      <ch-checkbox\n        name={option.name}\n        class=\"checkbox\"\n        checkedValue={option.value || option.id}\n        caption={option.label}\n        disabled={option.disabled}\n        value={value}\n        onInput={frontEndCheckboxInputHandler}\n        startImgSrc={option.iconName}\n        key={option.value || option.id}\n      ></ch-checkbox>\n    );\n  });\n};\n"],"version":3}

package/dist/esm/locale-643afe17.js.map

@@ -1 +0,0 @@
-{"file":"locale-643afe17.js","mappings":"AAEA,MAAM,aAAa,GAAG,gBAAgB,CAAC;AACvC,MAAM,gBAAgB,GAAG,SAAS,CAAC;AACnC,MAAM,gBAAgB,GAAG,IAAI,CAAC;AAC9B,MAAM,YAAY,GAAG,QAAQ,CAAC;AAC9B,MAAM,WAAW,GAAG,QAAQ,CAAC;AAC7B,MAAM,cAAc,GAAG,OAAO,CAAC;MAElB,MAAM;IAGT,OAAO,OAAO;QACpB,MAAM,IAAI,GACR,QAAQ;aACL,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;aAC/B,YAAY,CAAC,MAAM,CAAC;cACnB,OAAO,EAAE,IAAI,gBAAgB,CAAC;;QAGpC,OAAO,IAAI,KAAK,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC;KACvC;IAEO,OAAO,UAAU,CACvB,SAAiB,EACjB,IAAY,EACZ,MAAc;QAEd,IAAI,MAAM,KAAK,EAAE,EAAE;YACjB,MAAM,GAAG,GAAG,SAAS,GAAG,CAAC;SAC1B;QACD,MAAM,IAAI,GACR,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,IAAI,GAAG,cAAc,EAAW,CAAC;QAExG,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM;YACjC,KAAK,CAAsC,IAAI,CAAC,CAAC,IAAI,CAAC,QAAQ;gBAC5D,IAAI,QAAQ,CAAC,EAAE,EAAE;oBACf,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC;iBAC1B;qBAAM;oBACL,MAAM,EAAE,CAAC;iBACV;aACF,EAAE,MAAM,CAAC,CAAC;SACZ,CAAC,CAAC;KACJ;IAEM,aAAa,mBAAmB,CACrC,OAAoB,EACpB,MAAM,GAAG,EAAE,EACX,SAAS,GAAG,EAAE;QAEd,IAAI,SAAS,KAAK,EAAE,EAAE;YACpB,SAAS,GAAG,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,gBAAgB,EAAE,EAAE,CAAC,CAAC;SACzE;QACD,MAAM,IAAI,GAAG,MAAM,CAAC,OAAO,EAAE,CAAC;QAC9B,OAAO,MAAM,MAAM,CAAC,UAAU,CAAC,SAAS,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;KACzD;IAEM,OAAO,MAAM,CAAC,IAAY,EAAE,KAAe;QAChD,IAAI,GAAG,GAAW,IAAI,CAAC;QACvB,KAAK,CAAC,OAAO,CAAC,IAAI;YAChB,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;SACrD,CAAC,CAAC;QACH,OAAO,GAAG,CAAC;KACZ;;AArDa,uBAAgB,GAAG,EAAE;;;;","names":[],"sources":["src/common/locale.ts"],"sourcesContent":["import { Build } from \"@stencil/core\";\n\nconst ASSETS_FOLDER = \"gx-ide-assets/\";\nconst COMPONENT_PREFIX = \"gx-ide-\";\nconst DEFAULT_LANGUAGE = \"en\";\nconst LANGS_FOLDER = \"langs/\";\nconst LANG_PREFIX = \".lang.\";\nconst LANG_EXTENSION = \".json\";\n\nexport class Locale {\n  public static commonAssetsPath = \"\";\n\n  private static getLang(): string {\n    const lang =\n      document\n        .getElementsByTagName(\"html\")[0]\n        .getAttribute(\"lang\")\n        ?.valueOf() ?? DEFAULT_LANGUAGE;\n\n    // Normalize en-US\n    return lang === \"en-US\" ? \"en\" : lang;\n  }\n\n  private static getStrings(\n    component: string,\n    lang: string,\n    folder: string\n  ): Promise<any> {\n    if (folder === \"\") {\n      folder = `${component}/`;\n    }\n    const path =\n      `${ASSETS_FOLDER}${folder}${LANGS_FOLDER}${component}${LANG_PREFIX}${lang}${LANG_EXTENSION}` as const;\n\n    return new Promise((resolve, reject): void => {\n      fetch(Build.isTesting ? \"/build/\" + path : path).then(langFile => {\n        if (langFile.ok) {\n          resolve(langFile.json());\n        } else {\n          reject();\n        }\n      }, reject);\n    });\n  }\n\n  public static async getComponentStrings(\n    element: HTMLElement,\n    folder = \"\",\n    component = \"\"\n  ): Promise<any> {\n    if (component === \"\") {\n      component = element.tagName.toLowerCase().replace(COMPONENT_PREFIX, \"\");\n    }\n    const lang = Locale.getLang();\n    return await Locale.getStrings(component, lang, folder);\n  }\n\n  public static format(text: string, parms: string[]): string {\n    let ret: string = text;\n    parms.forEach(parm => {\n      ret = ret.replace(`{${parms.indexOf(parm)}}`, parm);\n    });\n    return ret;\n  }\n}\n"],"version":3}

package/dist/genexus-ide-ui/p-032b4a81.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["shareKbCss","CSS_BUNDLES","GxIdeShareKb","_GxIdeShareKb_showMoreIcon","set","this","getIconPath","category","name","colorType","_GxIdeShareKb_versionsSelect","value","caption","_GxIdeShareKb__componentLocale","_GxIdeShareKb_renderedFirstTime","_GxIdeShareKb_shortcutsSrc","getAssetPath","_GxIdeShareKb_versionSelectedTypeEl","_GxIdeShareKb_KBNameEl","_GxIdeShareKb_cancelHandler","cancelCallback","_GxIdeShareKb_changeConnectionHandler","async","changeConnectionCallback","authenticationType","connectionData","serverUrl","userName","userPassword","_GxIdeShareKb_shareKBHandler","shareKBCallback","kbName","then","formSubmitResult","validatableControls","validateControls","_GxIdeShareKb_evaluateTooltipRender","controlReference","get","id","hasError","message","h","class","actionElement","blockAlign","config","tooltipSettings","inlineAlign","delay","_GxIdeShareKb_initializeValidatableControls","__classPrivateFieldGet","forEach","validatableControl","reference","undefined","_GxIdeShareKb_kbNameInputHandler","event","detail","_GxIdeShareKb_versionsChangedHandler","versionSelectedType","_GxIdeShareKb_renderFooter","disableShareKbButton","length","onClick","part","footer","cancel","disabled","shareKB","Map","componentDidLoad","call","componentDidRender","componentDidRenderFirstTime","emit","componentName","__classPrivateFieldSet","componentWillLoad","Locale","getComponentStrings","el","render","Host","model","src","ref","chShortcutsEl","header","user","change","htmlFor","kb","aliasLabel","onInput","placeholder","localKbNamePlaceholder","onChange","versionsLabel","readonly","enableSelectVersionsButton","versionsPlaceholder","versionsPlaceholderDisabled","versionsValueInput"],"sources":["src/components/team-dev/share-kb/share-kb.scss?tag=gx-ide-share-kb&encapsulation=shadow","src/components/team-dev/share-kb/share-kb.tsx"],"sourcesContent":[":host {\n  display: grid;\n  block-size: 100%;\n  grid-template-rows: max-content 1fr max-content;\n}\n\n.section {\n  display: contents;\n}\n\n// - - - - - - - - - - -\n// Header\n// - - - - - - - - - - -\n\nheader {\n  display: grid;\n  grid-template-rows: max-content;\n  grid-template-columns: 1fr 1fr max-content;\n}\n\n.button-change {\n  align-self: center;\n  justify-self: end;\n}\n\n// - - - - - - - - - - -\n// Main\n// - - - - - - - - - - -\n\n.main {\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-template-rows: max-content 1fr max-content max-content;\n}\n\n.search-kbs {\n  inline-size: 50%;\n}\n\n.versions-container {\n  grid-auto-rows: max-content;\n\n  &__input {\n    display: grid;\n    grid-template-columns: 1fr max-content;\n    gap: var(--mer-spacing--xs);\n  }\n}\n","// Stencil\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  State,\n  getAssetPath\n} from \"@stencil/core\";\n\n// Other Libraries\nimport { getIconPath, MercuryBundles } from \"@genexus/mercury\";\n\n// Custom Imports\nimport { config } from \"../../../common/config\";\nimport { GXServerConnectionData } from \"../connect-gx-server/connect-gx-server\";\nimport { FormSubmitResult } from \"../../../common/types\";\nimport {\n  ControlValidation,\n  validateControls\n} from \"../../../common/form-validation\";\nimport { Locale } from \"../../../common/locale\";\nimport { RadioGroupItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/radio-group/types\";\nimport { ChEditCustomEvent } from \"@genexus/chameleon-controls-library\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"utils/form--full\",\n  \"utils/layout\",\n  \"utils/typography\",\n  \"utils/spacing\",\n  \"components/list-box\",\n  \"components/tooltip\",\n  \"chameleon/scrollbar\"\n];\n\n@Component({\n  tag: \"gx-ide-share-kb\",\n  styleUrl: \"share-kb.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/share-kb\"]\n})\nexport class GxIdeShareKb {\n  #showMoreIcon = getIconPath({\n    category: \"gemini-tools\",\n    name: \"show-more-horizontal\",\n    colorType: \"on-elevation\"\n  });\n\n  #versionsSelect: RadioGroupItemModel[] = [\n    { value: \"Trunk\", caption: \"Trunk Version\" },\n    { value: \"All\", caption: \"All Versions\" }\n    // { value: \"Select\", caption: \"Select Version\" } TODO: display once \"gx-ide-select-kb-versions\" is ready.\n  ];\n\n  [key: string]: any;\n\n  #_componentLocale: any;\n  // uncomment #kbVersionsIds when versions selector is available\n  // #kbVersionsIds: string[] = [];\n  #renderedFirstTime = false;\n  #shortcutsSrc = getAssetPath(\n    `./gx-ide-assets/create-kb-from-server/shortcuts.json`\n  );\n  // #selectedKbId: string;\n\n  #versionSelectedTypeEl: HTMLChRadioGroupRenderElement;\n\n  @Element() el: HTMLGxIdeShareKbElement;\n\n  #KBNameEl!: HTMLChEditElement;\n\n  /**\n   * State to enable/disable the select versions button\n   */\n  @State() enableSelectVersionsButton: boolean = false;\n\n  @State() validatableControls = new Map<string, ControlValidation>();\n\n  /**\n   * The version selected type\n   */\n  @State() versionSelectedType: VersionOption;\n\n  /**\n   * String value to show the number of versions selected (\"N versions selected\")\n   */\n  @State() versionsValueInput: string = \"\";\n\n  /**\n   * Set of data required when executing any of the callbacks that require a connection to the server.\n   */\n  @Prop() readonly connectionData: GXServerConnectionData;\n\n  /**\n   * Callback that is invoked when the dialog is closed\n   */\n  @Prop() readonly cancelCallback!: () => Promise<void>;\n\n  /**\n   * The host reopens the gx-ide-connect-server login modal with the previous data, and closes the current modal\n   */\n  @Prop() readonly changeConnectionCallback: (\n    data: GXServerConnectionData\n  ) => Promise<void>;\n\n  /**\n   * The name of the KB.\n   */\n  @Prop({ mutable: true }) kbName: string;\n\n  /**\n   * Callback that must be invoked when the Share button is pressed.\n   */\n  @Prop() readonly shareKBCallback: (\n    data: ShareKBData\n  ) => Promise<FormSubmitResult>;\n\n  /**\n   *  Callback invoked by pressing the ellipsis in the version selector. Receives the KB selected by the user, and displays the version selector dialog. Returns a list of versions chosen by the user.\n   */\n  @Prop() readonly selectKBVersionsCallback: (\n    selectedKB: string\n  ) => Promise<KBVersion[]>;\n\n  /**\n   * Emitted once just after the component is fully loaded and the first render() occurs\n   */\n  @Event() componentDidRenderFirstTime: EventEmitter<boolean>;\n\n  componentDidLoad() {\n    this.versionSelectedType = this.#versionSelectedTypeEl\n      .value as VersionOption;\n\n    this.#initializeValidatableControls();\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  async componentWillLoad() {\n    this.#_componentLocale = await Locale.getComponentStrings(this.el);\n  }\n\n  #cancelHandler = (): void => {\n    this.cancelCallback();\n  };\n\n  #changeConnectionHandler = async (): Promise<void> => {\n    this.changeConnectionCallback({\n      authenticationType: this.connectionData.authenticationType,\n      serverUrl: this.connectionData.serverUrl,\n      userName: this.connectionData.userName,\n      userPassword: this.connectionData.userPassword\n    });\n  };\n\n  #shareKBHandler = async (): Promise<void> => {\n    // uncomment the following lines when versions selector is available\n    // if (this.versionSelectedType !== \"Select\") {\n    //   this.#kbVersionsIds = [];\n    // }\n    this.shareKBCallback({\n      name: this.kbName,\n      serverUrl: this.connectionData.serverUrl\n    }).then((formSubmitResult: FormSubmitResult) => {\n      this.validatableControls = validateControls(\n        formSubmitResult,\n        this.validatableControls\n      );\n    });\n  };\n\n  // TODO: evaluate if this should be a global helper function.\n  // It is used on other dialogs as well.\n  #evaluateTooltipRender = (\n    controlReference: HTMLElement\n  ): HTMLChTooltipElement =>\n    this.validatableControls?.get(controlReference?.id)?.hasError &&\n    this.validatableControls.get(controlReference.id)?.message && (\n      <ch-tooltip\n        class=\"tooltip\"\n        actionElement={controlReference as unknown as HTMLButtonElement}\n        blockAlign={config.tooltipSettings.blockAlign}\n        inlineAlign={config.tooltipSettings.inlineAlign}\n        delay={config.tooltipSettings.delay}\n      >\n        {this.validatableControls.get(controlReference.id).message}\n      </ch-tooltip>\n    );\n\n  #initializeValidatableControls = () => {\n    // populate validatableControls with the controls that could have errors.\n    const validatableControls: HTMLElement[] = [this.#KBNameEl];\n    validatableControls.forEach(validatableControl => {\n      if (validatableControl.id) {\n        this.validatableControls.set(validatableControl.id, {\n          reference: validatableControl,\n          hasError: false,\n          message: undefined\n        });\n      }\n    });\n  };\n\n  #kbNameInputHandler = (event: ChEditCustomEvent<string> | InputEvent) => {\n    this.kbName = event.detail as string;\n  };\n\n  // #selectedVersionHandler = async () => {\n  //   if (this.selectKBVersionsCallback) {\n  //     await this.selectKBVersionsCallback(this.#selectedKbId).then(result => {\n  //       if (result?.length) {\n  //         this.versionsValueInput = result.length\n  //           .toString()\n  //           .concat(this.#_componentLocale.kb.versionSelectedFieldValue);\n  //         this.#kbVersionsIds = result.map(kbVersion =>\n  //           kbVersion.id.toString()\n  //         );\n  //       }\n  //     });\n  //   }\n  // };\n\n  #versionsChangedHandler = (event: CustomEvent<string>) => {\n    this.versionSelectedType = event.detail as VersionOption;\n  };\n\n  #renderFooter = () => {\n    const disableShareKbButton = !this.kbName.length;\n    return (\n      <footer class=\"footer control-footer-with-border spacing-body-inline spacing-body-block-end\">\n        <div class=\"buttons-spacer\">\n          <button\n            // cancel button\n            class=\"button-secondary\"\n            onClick={this.#cancelHandler}\n            part=\"button button-cancel\"\n          >\n            {this.#_componentLocale.footer.cancel}\n          </button>\n\n          <button\n            // share kb button\n            class=\"button-primary\"\n            onClick={!disableShareKbButton && this.#shareKBHandler}\n            disabled={disableShareKbButton}\n            part=\"button button-create-kb\"\n          >\n            {this.#_componentLocale.footer.shareKB}\n          </button>\n        </div>\n      </footer>\n    );\n  };\n\n  render(): void {\n    return (\n      <Host class=\"widget\">\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <ch-shortcuts\n          src={this.#shortcutsSrc}\n          ref={(el: HTMLChShortcutsElement) =>\n            (this.chShortcutsEl = el as HTMLChShortcutsElement)\n          }\n        ></ch-shortcuts>\n\n        <section class=\"section\">\n          <header class=\"header control-header-with-border space-body spacing-body-inline spacing-body-block-start\">\n            <div class=\"field field-block\">\n              <label class=\"label\">\n                {this.#_componentLocale.header.serverUrl}\n              </label>\n              <p>{this.connectionData.serverUrl}</p>\n            </div>\n\n            <div class=\"field field-block\">\n              <label class=\"label\">{this.#_componentLocale.header.user}</label>\n              <p>{this.connectionData.userName}</p>\n            </div>\n\n            <button\n              class=\"button-tertiary button-change\"\n              onClick={this.#changeConnectionHandler}\n            >\n              {this.#_componentLocale.header.change}\n            </button>\n          </header>\n\n          <section class=\"main field-group spacing-body\">\n            <div class=\"field field-block\">\n              <label class=\"label\" htmlFor=\"alias\">\n                {this.#_componentLocale.kb.aliasLabel}\n              </label>\n              <ch-edit\n                // alias\n                class=\"input\"\n                id=\"kb-name\"\n                value={this.kbName}\n                onInput={this.#kbNameInputHandler}\n                placeholder={this.#_componentLocale.kb.localKbNamePlaceholder}\n                ref={(el: HTMLChEditElement) =>\n                  (this.#KBNameEl = el as HTMLChEditElement)\n                }\n              ></ch-edit>\n              {this.#evaluateTooltipRender(this.#KBNameEl)}\n            </div>\n\n            <div class=\"versions-container field-group\">\n              <ch-radio-group-render\n                class=\"radio-group\"\n                model={this.#versionsSelect}\n                onChange={this.#versionsChangedHandler}\n                value={this.#versionsSelect[0].value}\n                ref={el =>\n                  (this.#versionSelectedTypeEl =\n                    el as HTMLChRadioGroupRenderElement)\n                }\n              ></ch-radio-group-render>\n\n              {this.versionSelectedType === \"Select\" && (\n                <div class=\"versions-container__item field-group\">\n                  <div class=\"field field-block\">\n                    <label class=\"label\" htmlFor=\"control-id-1\">\n                      {this.#_componentLocale.kb.versionsLabel}\n                    </label>\n                    <div class=\"versions-container__input\">\n                      <ch-edit\n                        class=\"input\"\n                        readonly\n                        placeholder={\n                          this.enableSelectVersionsButton\n                            ? this.#_componentLocale.kb.versionsPlaceholder\n                            : this.#_componentLocale.kb\n                                .versionsPlaceholderDisabled\n                        }\n                        value={this.versionsValueInput}\n                      ></ch-edit>\n                      <button\n                        class=\"button-tertiary button-icon-only\"\n                        // onClick={this.#selectedVersionHandler}\n                        disabled={!this.enableSelectVersionsButton}\n                      >\n                        <ch-image\n                          src={this.#showMoreIcon}\n                          class=\"icon-sm\"\n                        ></ch-image>\n                      </button>\n                    </div>\n                  </div>\n                </div>\n              )}\n            </div>\n          </section>\n\n          {this.#renderFooter()}\n        </section>\n      </Host>\n    );\n  }\n}\n\nexport type KBData = {\n  id: string;\n  name: string;\n};\n\nexport type KBVersion = {\n  id: number;\n  name: string;\n  type: VersionType;\n};\n\nexport type ConnectionResultData = {\n  formResult: FormSubmitResult;\n  kbs: KBData[];\n};\n\nexport type ShareKBData = {\n  name: string;\n  serverUrl: string;\n};\n\nexport type VersionOption = \"Trunk\" | \"All\" | \"Select\";\n\nexport type VersionType = \"Branch\" | \"Frozen\";\n"],"mappings":"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"}

package/dist/genexus-ide-ui/p-0d83a34d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["entitySelectorCss","CSS_BUNDLES","SELECT_DEFAULT_ICON","getIconPath","category","name","colorType","CLEAR_ICON","GxIdeEntitySelector","_GxIdeEntitySelector_componentLocale","set","this","_GxIdeEntitySelector_btnClearClickHandler","value","defaultValue","iconSrc","_GxIdeEntitySelector_btnSelectClickHandler","selectEntityCallback","then","result","_GxIdeEntitySelector_buttonFocusHandler","e","type","buttonHasFocus","_GxIdeEntitySelector_renderControl","h","part","class","accessibleName","labelPosition","__classPrivateFieldGet","entitySelectorInputAccessibleName","disabled","entitySelectorNameAttribute","startImgSrc","readonly","id","clearButtonLabel","title","onClick","onFocus","undefined","onBlur","src","selectButtonLabel","_GxIdeEntitySelector_updateIconSrc","valueChangedHandler","valueChanged","emit","call","componentWillLoad","__classPrivateFieldSet","Locale","getComponentStrings","el","connectedCallback","render","Host","model","field","htmlFor","labelCaption"],"sources":["src/components/_helpers/entity-selector/entity-selector.scss?tag=gx-ide-entity-selector&encapsulation=shadow","src/components/_helpers/entity-selector/entity-selector.tsx"],"sourcesContent":["/*wrapper*/\n.wrapper {\n  display: grid;\n  grid-template-columns: 1fr max-content max-content;\n  gap: var(--mer-spacing--xs);\n  border-radius: var(--control__border-radius);\n  border: var(--control__border-width) var(--control__border-style)\n    var(--control__border-color);\n  padding: var(--control__padding-block) var(--control__padding-inline);\n\n  &:hover {\n    --control__border-color: var(--control__border-color--hover);\n  }\n  &:focus {\n  }\n}\n/*input*/\n.input {\n  --control__padding-block: 0;\n  --control__padding-inline: 0;\n  // Remove control border. We want to simulate a input that includes two buttons at the end.\n  --control__border-width: 0;\n  --focus__outline-width: 0;\n}\n:host(:focus-within) {\n  .wrapper {\n    --control__border-color: var(--focus__outline-color);\n  }\n}\n:host(.entity-selector--button-has-focus) {\n  .wrapper {\n    outline: none;\n  }\n}\n\n:host([disabled]) {\n  pointer-events: none;\n  .wrapper {\n    background-color: var(--control__background-color--disabled);\n    border-color: var(--control__border-color--disabled);\n  }\n}\n/*custom button icon*/\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  State,\n  Event,\n  EventEmitter,\n  Watch\n} from \"@stencil/core\";\n\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\n\nimport { Locale } from \"../../../common/locale\";\nimport { LabelPosition } from \"../../../common/types\";\nimport { EntityData } from \"../../../common/types\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"components/edit\",\n  \"components/button\",\n  \"components/icon\",\n  \"utils/form\"\n];\nconst SELECT_DEFAULT_ICON = getIconPath({\n  category: \"gemini-tools\",\n  name: \"show-more-horizontal\",\n  colorType: \"primary\"\n});\nconst CLEAR_ICON = getIconPath({\n  category: \"gemini-tools\",\n  name: \"reset\",\n  colorType: \"primary\"\n});\n\n@Component({\n  tag: \"gx-ide-entity-selector\",\n  styleUrl: \"entity-selector.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/entity-selector\"]\n})\nexport class GxIdeEntitySelector {\n  #componentLocale: any;\n\n  @Element() el: HTMLGxIdeEntitySelectorElement;\n\n  /**\n   * Adds/removes a CSS class on the host. It removes focus-within styles when\n   * focus is on a button.\n   */\n  @State() buttonHasFocus = false;\n\n  @State() iconSrc: string = null;\n\n  /**\n   * Default value for the component. Used when the 'X' button is pressed.\n   */\n  @Prop() readonly defaultValue?: EntityData | null | undefined;\n\n  /**\n   * This attribute lets you specify if the element is disabled.\n   */\n  @Prop({ reflect: true }) readonly disabled: boolean = false;\n\n  /**\n   * The label caption. Only visible if \"labelPosition\" is not \"none\".\n   * I no \"labelCaption\" is provided, a generic caption \"Select Entity\" will be provided\n   */\n  @Prop() readonly labelCaption?: string;\n\n  /**\n   * The label position\n   */\n  @Prop({ reflect: true }) readonly labelPosition?: LabelPosition =\n    \"block-start\";\n\n  /**\n   * This property specifies the `name` of the control when used in a form.\n   */\n  @Prop({ reflect: true }) readonly name?: string;\n\n  /**\n   * Callback invoked when the action button is pressed. Returns the new value.\n   */\n  @Prop() readonly selectEntityCallback!: () => Promise<EntityData> | null;\n\n  /**\n   * Value currently assigned.\n   */\n  @Prop({ mutable: true }) value: EntityData | null | undefined;\n  @Watch(\"value\")\n  valueChangedHandler() {\n    this.valueChanged.emit(this.value);\n    this.#updateIconSrc();\n  }\n\n  /**\n   * Emits the input value every time it changes\n   */\n  @Event() valueChanged: EventEmitter<EntityData>;\n\n  // 6.Component Lifecycle Events\n\n  async componentWillLoad() {\n    this.#componentLocale = await Locale.getComponentStrings(this.el);\n  }\n\n  connectedCallback() {\n    this.#updateIconSrc();\n  }\n\n  #btnClearClickHandler = () => {\n    this.value = this.defaultValue;\n    this.iconSrc = this.defaultValue?.iconSrc;\n  };\n\n  #btnSelectClickHandler = () => {\n    this.selectEntityCallback().then(result => {\n      if (result) {\n        this.value = result;\n      }\n    });\n  };\n\n  #buttonFocusHandler = (e: FocusEvent) => {\n    if (e.type === \"focus\") {\n      this.buttonHasFocus = true;\n    } else if (e.type === \"blur\") {\n      this.buttonHasFocus = false;\n    }\n  };\n\n  #renderControl = (): HTMLDivElement => {\n    return (\n      <div part=\"wrapper\" class=\"wrapper\">\n        <ch-edit\n          accessibleName={\n            this.labelPosition === \"none\" &&\n            this.#componentLocale.entitySelectorInputAccessibleName\n          }\n          class=\"input\"\n          disabled={this.disabled}\n          name={this.name || this.#componentLocale.entitySelectorNameAttribute}\n          startImgSrc={this.iconSrc}\n          readonly\n          value={this.value?.name || this.defaultValue?.name}\n          id=\"entity-input\"\n        ></ch-edit>\n\n        <button\n          part=\"button-clear\"\n          class=\"icon-button\"\n          aria-label={this.#componentLocale.clearButtonLabel}\n          title={this.#componentLocale.clearButtonLabel}\n          type=\"button\"\n          disabled={this.disabled}\n          onClick={this.#btnClearClickHandler}\n          onFocus={this.buttonHasFocus ? this.#buttonFocusHandler : undefined}\n          onBlur={!this.buttonHasFocus ? this.#buttonFocusHandler : undefined}\n        >\n          <ch-image\n            class=\"icon-md\"\n            src={CLEAR_ICON}\n            disabled={this.disabled}\n          ></ch-image>\n        </button>\n\n        <button\n          class=\"icon-button\"\n          aria-label={this.#componentLocale.selectButtonLabel}\n          title={this.#componentLocale.selectButtonLabel}\n          type=\"button\"\n          disabled={!this.selectEntityCallback || this.disabled}\n          onClick={this.#btnSelectClickHandler}\n          onBlur={!this.buttonHasFocus ? this.#buttonFocusHandler : undefined}\n          onFocus={this.buttonHasFocus ? this.#buttonFocusHandler : undefined}\n        >\n          <ch-image\n            class=\"icon-md\"\n            src={SELECT_DEFAULT_ICON}\n            disabled={this.disabled}\n          ></ch-image>\n        </button>\n      </div>\n    );\n  };\n\n  #updateIconSrc = () => {\n    if (this.value && this.value.iconSrc) {\n      this.iconSrc = this.value.iconSrc;\n    }\n  };\n\n  render() {\n    return (\n      <Host\n        class={{\n          \"entity-selector--button-has-focus\": this.buttonHasFocus\n        }}\n      >\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        {this.labelPosition !== \"none\" ? (\n          <div\n            class={{\n              \"field\": true,\n              \"field-block\": this.labelPosition === \"block-start\",\n              \"field-inline\": this.labelPosition === \"inline-start\"\n            }}\n          >\n            <label class=\"label\" htmlFor=\"entity-input\">\n              {this.labelCaption ||\n                this.#componentLocale.entitySelectorInputAccessibleName}\n            </label>\n            {this.#renderControl()}\n          </div>\n        ) : (\n          this.#renderControl()\n        )}\n      </Host>\n    );\n  }\n}\n\nexport type EntitySelectorLabels = {\n  buttonClearLabel: string;\n  buttonSelectLabel: string;\n};\n"],"mappings":"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"}

package/dist/genexus-ide-ui/p-0e53f1ef.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["wwImagesCss","CSS_BUNDLES","GxIdeWWImages","this","renderedFirstTime","attachDetectClickOutsideFilter","document","addEventListener","detectClickOutsideFilter","removeDetectClickOutsideFilter","removeEventListener","e","clickedOutside","closeOnOutsideClickHandler","filterEl","filtersHidden","saveInitialFilterData","filterInitialData","name","filterNameEl","value","module","filterModuleEl","searchContents","filterSearchContentsEl","category","filterCategoryEl","allDescendants","filterAllDescendantsEl","checked","modified","filterModifiedEl","dateTime","filterModifiedDateEl","after","filterAfterTypeEl","user","filterUserEl","style","filterStyleEl","language","filterLanguageEl","density","filterDensityEl","layer","filterLayerEl","renderFilter","h","class","ref","el","label","_componentLocale","filter","part","defaultModule","defaultValue","selectEntityCallback","selectModuleCallback","onClick","resetFilterHandler","type","icon","toggleFiltersHandler","search","defaultCategory","disabled","categories","renderFormItems","labelPosition","center","hide","filterModified","filterAfterType","FILTER_AFTER","DATE_TIME","afterLabel","id","NONE","afterNone","IMPORT","LAST_BUILD","centerLabel","styles","languages","densities","layers","renderImagesData","contentBorderEnd","noContentPadding","titleType","containerTitle","secondaryFilter","imagesDataTitle","slot","placeholder","onInput","filterInputHandler","chGridEl","rowSelectionMode","columnName","columnNameHidden","settingable","size","config","tabularGrid","colSize","maxContent","tableHead","common","description","commonDouble","modifiedDate","lastUser","importDate","filteredImages","map","obj","rowid","src","hiChar","filterImagesInputValue","formatDate","renderImages","imagesTitle","titleHeightAsInput","imagesSelectedItems","item","url","alt","getImages","filters","parent","modifiedAfter","modifiedBy","loadCallback","then","items","images","selectedObjectsIds","deselectAll","filterImagesInformationHandler","newObjectCallbackHandler","newObjectCallback","openSelectionCallBackHandler","openSelectionCallback","deleteSelectionCallbackHandler","deleteSelectionCallback","selectAll","selectAllRows","listenChanges","detail","ev","loadImageItemsCallback","rowsId","selectionObjectChangedCallback","preventDefault","stopPropagation","contextMenuCallback","selection","selectedRowsId","clientX","clientY","filterValue","toLocaleLowerCase","image","nameMatch","includes","moduleMatch","descriptionMatch","modifiedDateMatch","toString","importDateMatch","filtersHiddenHandler","hidden","componentWillLoad","Locale","getComponentStrings","componentDidLoadEvent","emit","componentDidLoad","focus","componentDidRender","componentDidRenderFirstTime","componentName","keyDownHandler","eventInfo","activeElement","key","validate","isValid","reload","render","Host","model","noContentGap","displayTitle","slimmerFooter","gxIdeContainer","footer","btnSelectAll","btnNew","length","objCount","matching"],"sources":["src/components/ww-images/ww-images.scss?tag=gx-ide-ww-images&encapsulation=shadow","src/components/ww-images/ww-images.tsx"],"sourcesContent":["@import \"../../global/gx-ide-common.scss\";\n@import \"../../global/gx-ide-mixins.scss\";\n@import \"../../../node_modules/@genexus/mercury/dist/assets/scss/helpers.scss\";\n\n:host {\n  display: block;\n}\n\n/*--- Filter ---*/\n.module-folder::part(wrapper) {\n  padding-block: 1.5px;\n  margin-block-start: var(--gxg-label-separation-vertical);\n}\n.filter--padding {\n  padding: var(--gx-ide-container__padding);\n}\n.filter--gap {\n  gap: var(--gx-ide-grid-row-gap);\n}\n.filter {\n  display: flex;\n  flex-direction: column;\n  &__first-row {\n    display: flex;\n    gap: var(--gx-ide-grid-column-gap);\n    .name,\n    .module-folder {\n      flex: 1;\n    }\n    .filter-btn {\n      flex: none;\n    }\n    .second-column {\n      display: flex;\n      flex-direction: row;\n      align-items: end;\n      gap: var(--gx-ide-grid-column-gap);\n    }\n    > * {\n      flex: 1;\n    }\n  }\n  .checkboxes-label-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: 0;\n  }\n  .checkboxes-wrapper {\n    display: flex;\n    gap: var(--gx-ide-grid-column-gap);\n    border-radius: var(--border-radius-sm);\n    height: var(--gxg-form-text-height);\n    box-sizing: border-box;\n    align-items: center;\n    padding-inline-start: var(--mer-spacing--2xs);\n  }\n  .user {\n    max-width: 100% !important;\n  }\n}\n\n/*Filter*/\n.filters-outer-wrapper {\n  display: grid;\n  grid-template-rows: 1fr;\n  transition: grid-template-rows 200ms;\n  &--hidden {\n    grid-template-rows: 0fr;\n  }\n}\n.filters-inner-wrapper {\n  padding-top: var(--gx-ide-container__padding);\n  display: grid;\n  overflow: hidden;\n  grid-template-columns: repeat(12, 1fr);\n  grid-template-rows: repeat(3, 1fr);\n\n  .search-contents {\n    grid-area: 1 / 1 / 2 / 5;\n  }\n  .category {\n    grid-area: 1 / 5 / 2 / 9;\n  }\n  .options {\n    grid-area: 1 / 9 / 2 / 13;\n  }\n  .date-time {\n    grid-area: 2 / 1 / 3 / 5;\n  }\n  .after-date-time {\n    grid-area: 2 / 5 / 3 / 9;\n  }\n  .user {\n    grid-area: 2 / 9 / 3 / 13;\n  }\n  .style {\n    grid-area: 3 / 1 / 4 / 4;\n  }\n  .language {\n    grid-area: 3 / 4 / 4 / 7;\n  }\n  .density {\n    grid-area: 3 / 7 / 4 / 10;\n  }\n  .layer {\n    grid-area: 3 / 10 / 4 / 13;\n  }\n}\n\ngxg-date-picker {\n  position: absolute;\n  inline-size: calc(33% - 16px);\n}\ngxg-date-picker::part(input) {\n  block-size: 26px;\n}\n\n.master-wrapper {\n  height: 100%;\n  position: relative;\n  display: grid;\n  grid-template-rows: auto 1fr;\n}\n\n/*--- Grid/Images Container ---*/\n.grid-images-container {\n  border-top: 1px solid var(--gx-ide-container-border-color);\n  display: grid;\n  grid-template-columns: 1fr 220px;\n  grid-column-gap: 0;\n  grid-row-gap: 0;\n  overflow: auto;\n}\n.images-information {\n  &__header {\n    display: flex;\n    align-items: center;\n    gap: var(--gx-ide-grid-column-gap);\n    &-title {\n      flex: none;\n    }\n  }\n}\n\n/* Objects Table */\n.images-grid {\n  grid-template-columns: repeat(2, 1fr);\n  grid-column-gap: 0;\n  > :nth-child(1) {\n    grid-area: 1 / 1 / 1 / 3;\n  }\n}\n.images-container {\n  .image-item {\n    display: inline-block;\n    width: 50%;\n    height: 110px; /*should be half the images container width (actually is 220px)*/\n    &__container {\n      padding: var(--gx-ide-container__padding);\n      img {\n        width: 100%;\n        height: 100%;\n        object-fit: scale-down;\n      }\n    }\n    &__name {\n      @include ellipsis;\n      text-align: center;\n      width: 100%;\n      display: block;\n      font-size: 10px;\n      padding: 4px 8px;\n      box-sizing: border-box;\n      background-color: var(--gray-00);\n    }\n    &:nth-child(odd) {\n      .image-item__name {\n        border-inline-end: 1px solid var(--gray-02);\n      }\n    }\n  }\n}\n.objects-count {\n  grid-template-columns: repeat(2, 1fr);\n  *:nth-child(2) {\n    justify-content: flex-end;\n    align-items: flex-start;\n  }\n}\n\n@include hiChar;\n\n@include tabular-grid-cell-layout(\n  $tabular-grid-selector: \".tabular-grid-ww-images\",\n  $tabular-grid-cell-node-type: \"text\",\n  $tabular-grid-cell-apply-ellipsis: true,\n  $tabular-grid-affected-columns-nth-list: (\n    4\n  )\n);\n","/* STENCIL IMPORTS */\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n  Method,\n  Listen,\n  Watch\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\nimport { ChGridRowContextMenuEvent } from \"@genexus/chameleon-controls-library\";\nimport { DatePickerDate } from \"@genexus/gemini/dist/types/components/date-picker/date-picker\";\nimport { MercuryBundles } from \"@genexus/mercury\";\n/* CUSTOM IMPORTS */\nimport { Locale } from \"../../common/locale\";\nimport { GxOption } from \"../../common/types\";\nimport { config } from \"../../common/config\";\nimport { renderFormItems } from \"../../common/common\";\nimport { EntityData, ContextMenuInfo } from \"../../common/types\";\nimport { FILTER_AFTER } from \"../../common/constants\";\nimport {\n  formatDate,\n  hiChar,\n  closeOnOutsideClickHandler\n} from \"../../common/helpers\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  // \"utils/form\",\n  // \"utils/layout\",\n  // \"utils/typography\",\n  // \"components/button\",\n  // \"components/checkbox\",\n  // \"components/edit\",\n  \"components/tabular-grid\"\n];\n\n@Component({\n  tag: \"gx-ide-ww-images\",\n  styleUrl: \"ww-images.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/ww-images\"]\n})\nexport class GxIdeWWImages {\n  // 1.OWN PROPERTIES //\n\n  /**\n   * The component hard-coded strings translations.\n   */\n  private _componentLocale: any;\n  private renderedFirstTime = false;\n  private filterInitialData: FilerInitialData;\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeWwImagesElement;\n\n  private filterEl: HTMLDivElement;\n  /* References needed to collect data */\n  private filterNameEl!: HTMLGxgFormTextElement;\n  private filterSearchContentsEl!: HTMLGxgFormTextElement;\n  private filterCategoryEl!: HTMLGxgComboBoxElement;\n  private filterModuleEl!: HTMLGxIdeEntitySelectorElement;\n  private filterModifiedEl!: HTMLGxgFormCheckboxElement;\n  private filterAllDescendantsEl!: HTMLGxgFormCheckboxElement;\n  private filterAfterTypeEl!: HTMLGxgComboBoxElement;\n  private filterUserEl!: HTMLGxgFormTextElement;\n  private filterModifiedDateEl!: HTMLGxgDatePickerElement;\n  private filterStyleEl!: HTMLGxgComboBoxElement;\n  private filterLanguageEl!: HTMLGxgComboBoxElement;\n  private filterDensityEl!: HTMLGxgComboBoxElement;\n  private filterLayerEl!: HTMLGxgComboBoxElement;\n  private chGridEl!: HTMLChGridElement;\n\n  // 3.STATE() VARIABLES //\n\n  @State() filtersHidden = true;\n  @Watch(\"filtersHidden\")\n  filtersHiddenHandler(hidden: boolean): void {\n    if (hidden) {\n      this.removeDetectClickOutsideFilter();\n    } else {\n      this.attachDetectClickOutsideFilter();\n    }\n  }\n\n  /**\n   * The after types render in the after selector\n   */\n  @State() filterAfterType = \"\";\n\n  /**\n   * For show or hide the filters relative to modifiers\n   */\n  @State() filterModified = false;\n\n  /**\n   * The images rendered in the table\n   */\n  @State() images: ImageData[] = [];\n\n  /**\n   * The images rendered in the table, after the filter\n   */\n  @State() filteredImages: ImageData[] = [];\n\n  /**\n   * The items of the image that is selected\n   */\n  @State() imagesSelectedItems: ImageItemData[] = [];\n\n  /**\n   * The selected images in the table of images\n   */\n  @State() selectedObjectsIds: string[] = [];\n\n  /**\n   * The images filter input text value\n   */\n  @State() filterImagesInputValue = \"\";\n\n  // 4.PUBLIC PROPERTY API | WATCH'S //\n\n  /**\n   * If true it displays the component title on the header\n   */\n  @Prop() readonly displayTitle = false;\n\n  /**\n   * Displays a secondary filter, used to filter over the filtered images\n   */\n  @Prop() readonly secondaryFilter = false;\n\n  /**\n   * The categories render in the filter category selector\n   */\n  @Prop() readonly categories!: GxOption[];\n\n  /**\n   * The densities render in the filter density selector\n   */\n  @Prop() readonly densities!: GxOption[];\n\n  /**\n   * The default value for the 'categories' filter\n   */\n  @Prop() readonly defaultCategory: string;\n\n  /**\n   * The default value for the module/folder filter\n   */\n  @Prop() readonly defaultModule: EntityData;\n\n  /**\n   * The default value for the type filter\n   */\n  @Prop() readonly defaultType: string;\n\n  /**\n   * The modules/folders render in the module/folder selector\n   */\n  @Prop() readonly filterModules!: GxOption[];\n\n  /**\n   * The languages render in the filter language selector\n   */\n  @Prop() readonly languages!: GxOption[];\n\n  /**\n   * The layers render in the filter layer selector\n   */\n  @Prop() readonly layers!: GxOption[];\n\n  /**\n   * This is a function provided by the developer for expanded the data of images that is double-clicked or entered.\n   */\n  @Prop() readonly contextMenuCallback!: ContextMenuCallback;\n\n  /**\n   * This is a function provided by the developer for expanded the data of images that is double-clicked or entered.\n   */\n  @Prop() readonly deleteSelectionCallback!: DeleteSelectionCallback;\n\n  /**\n   * This is a function provided by the developer that return a list of images to populate the table of images.\n   */\n  @Prop() readonly loadCallback!: LoadCallback;\n\n  /**\n   * This is a function provided by the developer that return a list of items of the image selected.\n   */\n  @Prop() readonly loadImageItemsCallback!: LoadImageItemsCallback;\n\n  /**\n   * This is a function provided by the developer for expanded the data of images that is double-clicked or entered.\n   */\n  @Prop() readonly newObjectCallback!: NewObjectCallback;\n\n  /**\n   * This is a function provided by the developer for expanded the data of images that is double-clicked or entered.\n   */\n  @Prop() readonly openSelectionCallback!: OpenSelectionCallback;\n\n  /**\n   * Callback invoked when the action is executed on the Module/Folder filter (button '...'). 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 for expanded the data of images that is double-clicked or entered.\n   */\n  @Prop() readonly selectionObjectChangedCallback!: SelectionObjectCallback;\n\n  /**\n   * Applies a shadow all around\n   */\n  @Prop() readonly shadow = false;\n\n  /**\n   * The styles render in the filter style selector\n   */\n  @Prop() readonly styles!: GxOption[];\n\n  /**\n   * The types render in the filter type selector\n   */\n  @Prop() readonly types!: GxOption[];\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() componentDidLoadEvent: EventEmitter<boolean>;\n\n  /**\n   * @description Gets fired when the component has rendered for the first time.\n   */\n  @Event() componentDidRenderFirstTime: EventEmitter<string>;\n\n  // 6.COMPONENT LIFECYCLE EVENTS //\n\n  async componentWillLoad() {\n    this._componentLocale = await Locale.getComponentStrings(this.el);\n    this.componentDidLoadEvent.emit(true);\n  }\n\n  componentDidLoad() {\n    this.listenChanges();\n    this.getImages();\n    this.saveInitialFilterData();\n    this.filterNameEl.focus();\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  // 7.LISTENERS //\n\n  @Listen(\"keydown\", { passive: true })\n  keyDownHandler(eventInfo: KeyboardEvent) {\n    if (document.activeElement === this.el) {\n      switch (eventInfo.key) {\n        case \"Enter\":\n          this.openSelectionCallBackHandler();\n          break;\n        case \"Delete\":\n          this.deleteSelectionCallbackHandler();\n          break;\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  /**\n   * This method reload the view, refreshing the filters and the table of images.\n   */\n  @Method()\n  async reload(): Promise<void> {\n    this.getImages();\n  }\n\n  // 9.LOCAL METHODS //\n\n  private attachDetectClickOutsideFilter = () => {\n    document.addEventListener(\"click\", this.detectClickOutsideFilter);\n  };\n  private removeDetectClickOutsideFilter = () => {\n    document.removeEventListener(\"click\", this.detectClickOutsideFilter);\n  };\n  private detectClickOutsideFilter = (e: PointerEvent): void => {\n    const clickedOutside = closeOnOutsideClickHandler(e, this.filterEl);\n    if (clickedOutside) {\n      this.filtersHidden = true;\n    } else {\n      this.filtersHidden = false;\n    }\n  };\n\n  /**\n   * @description This is needed for resetting the filter. When the user resets the filter, all the filter controls values have to be restored to the value they had on componentDidLoad.\n   */\n  private saveInitialFilterData = () => {\n    this.filterInitialData = {\n      name: this.filterNameEl.value,\n      module: this.filterModuleEl.value,\n      searchContents: this.filterSearchContentsEl.value,\n      category: this.filterCategoryEl.value,\n      allDescendants: this.filterAllDescendantsEl.checked,\n      modified: this.filterModifiedEl.checked,\n      dateTime: this.filterModifiedDateEl.value,\n      after: this.filterAfterTypeEl.value,\n      user: this.filterUserEl.value,\n      style: this.filterStyleEl.value,\n      language: this.filterLanguageEl.value,\n      density: this.filterDensityEl.value,\n      layer: this.filterLayerEl.value\n    };\n  };\n\n  // 9.LOCAL METHODS -> Renders //\n\n  private renderFilter = (): Element => {\n    return (\n      <div\n        class=\"filter filter--padding\"\n        ref={(el: HTMLDivElement) => (this.filterEl = el as HTMLDivElement)}\n      >\n        <div class=\"filter__first-row\">\n          {/* name */}\n          <gxg-form-text\n            label-position=\"above\"\n            label={this._componentLocale.filter.name}\n            ref={(el: HTMLGxgFormTextElement) =>\n              (this.filterNameEl = el as HTMLGxgFormTextElement)\n            }\n            part=\"filter-name\"\n            class=\"name\"\n          ></gxg-form-text>\n\n          <div class=\"second-column\">\n            {/* module/folder */}\n            <gx-ide-entity-selector\n              label-position=\"above\"\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-folder\"\n              part=\"filter-module-folder\"\n            ></gx-ide-entity-selector>\n\n            {/* reset filter button */}\n            <gxg-button\n              onClick={this.resetFilterHandler}\n              part=\"gxg-button-reset-filter\"\n              type=\"secondary-icon-only\"\n              icon=\"gemini-tools/reset\"\n              class=\"reset-filter-btn\"\n            ></gxg-button>\n\n            {/* filter button */}\n            <gxg-button\n              onClick={this.toggleFiltersHandler}\n              part=\"gxg-button gxg-button--more-less\"\n              type=\"secondary-icon-only\"\n              icon={\n                true ? \"window-tools/filter-conditions\" : \"window-tools/filter\"\n              }\n              class=\"filter-btn\"\n            ></gxg-button>\n          </div>\n        </div>\n\n        <div\n          class={{\n            \"filters-outer-wrapper\": true,\n            \"filters-outer-wrapper--hidden\": this.filtersHidden\n          }}\n        >\n          <div\n            class={{\n              \"filter\": true,\n              \"filter--gap\": true,\n              \"filters-inner-wrapper\": true\n            }}\n          >\n            {/* search contents */}\n            <gxg-form-text\n              label-position=\"above\"\n              label={this._componentLocale.filter.search}\n              ref={(el: HTMLGxgFormTextElement) =>\n                (this.filterSearchContentsEl = el as HTMLGxgFormTextElement)\n              }\n              class={{ \"search-contents\": true }}\n              part=\"filter-search\"\n            ></gxg-form-text>\n\n            {/* category */}\n            <gxg-combo-box\n              disable-filter\n              label={this._componentLocale.filter.category}\n              value={this.defaultCategory}\n              disabled={!this.categories}\n              ref={(el: HTMLGxgComboBoxElement) =>\n                (this.filterCategoryEl = el as HTMLGxgComboBoxElement)\n              }\n              class=\"category\"\n              part=\"filter-category\"\n            >\n              {renderFormItems(\"gxg-combo-box-item\", this.categories ?? [])}\n            </gxg-combo-box>\n\n            <div class=\"options\">\n              <gxg-label labelPosition=\"above\" center={false}>\n                Options:\n              </gxg-label>\n              {/* all descendants*/}\n              <div class=\"checkboxes-wrapper\">\n                <gxg-form-checkbox\n                  label={this._componentLocale.filter.allDescendants}\n                  ref={(el: HTMLGxgFormCheckboxElement) =>\n                    (this.filterAllDescendantsEl =\n                      el as HTMLGxgFormCheckboxElement)\n                  }\n                  class=\"all-descendants\"\n                  part=\"filter-all-descendants\"\n                ></gxg-form-checkbox>\n\n                {/* modified */}\n                <gxg-form-checkbox\n                  label={this._componentLocale.filter.modified}\n                  ref={(el: HTMLGxgFormCheckboxElement) =>\n                    (this.filterModifiedEl = el as HTMLGxgFormCheckboxElement)\n                  }\n                  class=\"modified\"\n                  part=\"filter-modified\"\n                ></gxg-form-checkbox>\n              </div>\n            </div>\n\n            {/* date/time*/}\n            <div\n              class={{\n                \"hide\":\n                  !this.filterModified ||\n                  this.filterAfterType !== FILTER_AFTER.DATE_TIME,\n                \"date-time\": true\n              }}\n              part=\"filter-datetime\"\n            >\n              <div class=\"date-time-wrapper\">\n                <gxg-label label-position=\"above\">\n                  {this._componentLocale.filter.dateTime}\n                </gxg-label>\n                <gxg-date-picker\n                  class=\"date-picker\"\n                  disabled={!this.filterModified}\n                  ref={(el: HTMLGxgDatePickerElement) =>\n                    (this.filterModifiedDateEl = el as HTMLGxgDatePickerElement)\n                  }\n                ></gxg-date-picker>\n              </div>\n            </div>\n\n            {/* after date/time  */}\n            <gxg-combo-box\n              class=\"after-date-time\"\n              disabled={!this.filterModified}\n              label={this._componentLocale.filter.afterLabel}\n              disable-filter\n              value={this.filterAfterType}\n              ref={(el: HTMLGxgComboBoxElement) =>\n                (this.filterAfterTypeEl = el as HTMLGxgComboBoxElement)\n              }\n              part=\"filter-after-type\"\n            >\n              {renderFormItems(\"gxg-combo-box-item\", [\n                {\n                  id: FILTER_AFTER.NONE,\n                  label: this._componentLocale.filter.afterNone,\n                  value: FILTER_AFTER.NONE\n                },\n                {\n                  id: FILTER_AFTER.DATE_TIME,\n                  label: this._componentLocale.filter[FILTER_AFTER.DATE_TIME],\n                  value: FILTER_AFTER.DATE_TIME\n                },\n                {\n                  id: FILTER_AFTER.IMPORT,\n                  label: this._componentLocale.filter[FILTER_AFTER.IMPORT],\n                  value: FILTER_AFTER.IMPORT\n                },\n                {\n                  id: FILTER_AFTER.LAST_BUILD,\n                  label: this._componentLocale.filter[FILTER_AFTER.LAST_BUILD],\n                  value: FILTER_AFTER.LAST_BUILD\n                }\n              ])}\n            </gxg-combo-box>\n\n            {/* user  */}\n            <gxg-form-text\n              disabled={!this.filterModified}\n              labelPosition=\"above\"\n              label={this._componentLocale.filter.user}\n              ref={(el: HTMLGxgFormTextElement) =>\n                (this.filterUserEl = el as HTMLGxgFormTextElement)\n              }\n              value=\"hey\"\n              centerLabel={false}\n              class=\"user\"\n              part=\"filter-user\"\n            ></gxg-form-text>\n\n            {/* style*/}\n            <gxg-combo-box\n              disable-filter\n              label={this._componentLocale.filter.style}\n              disabled={!this.styles}\n              ref={(el: HTMLGxgComboBoxElement) =>\n                (this.filterStyleEl = el as HTMLGxgComboBoxElement)\n              }\n              class=\"style\"\n              part=\"filter-style\"\n            >\n              {renderFormItems(\"gxg-combo-box-item\", this.styles ?? [])}\n            </gxg-combo-box>\n\n            {/* language*/}\n            <gxg-combo-box\n              disable-filter\n              label={this._componentLocale.filter.language}\n              disabled={!this.languages}\n              ref={(el: HTMLGxgComboBoxElement) =>\n                (this.filterLanguageEl = el as HTMLGxgComboBoxElement)\n              }\n              class=\"language\"\n              part=\"filter-language\"\n            >\n              {renderFormItems(\"gxg-combo-box-item\", this.languages ?? [])}\n            </gxg-combo-box>\n\n            {/* density*/}\n            <gxg-combo-box\n              disable-filter\n              label={this._componentLocale.filter.density}\n              disabled={!this.densities}\n              ref={(el: HTMLGxgComboBoxElement) =>\n                (this.filterDensityEl = el as HTMLGxgComboBoxElement)\n              }\n              class=\"density\"\n              part=\"filter-density\"\n            >\n              {renderFormItems(\"gxg-combo-box-item\", this.densities ?? [])}\n            </gxg-combo-box>\n\n            {/* layer*/}\n            <gxg-combo-box\n              disable-filter\n              label={this._componentLocale.filter.layer}\n              disabled={!this.layers}\n              ref={(el: HTMLGxgComboBoxElement) =>\n                (this.filterLayerEl = el as HTMLGxgComboBoxElement)\n              }\n              class=\"layer\"\n              part=\"filter-layer\"\n            >\n              {renderFormItems(\"gxg-combo-box-item\", this.layers ?? [])}\n            </gxg-combo-box>\n          </div>\n        </div>\n      </div>\n    );\n  };\n\n  private renderImagesData = (): Element => {\n    return (\n      /* images information*/\n      <gx-ide-container\n        contentBorderEnd\n        noContentPadding\n        titleType=\"secondary\"\n        containerTitle={\n          !this.secondaryFilter ? this._componentLocale.imagesDataTitle : null\n        }\n        class={{ \"images-information\": true, \"overflow-auto\": true }}\n        part=\"grid-container\"\n      >\n        {this.secondaryFilter ? (\n          <header class=\"images-information__header\" slot=\"header\">\n            <gx-ide-title\n              type=\"secondary\"\n              class=\"images-information__header-title\"\n            >\n              {this._componentLocale.imagesDataTitle}\n            </gx-ide-title>\n            <gxg-form-text\n              icon=\"gemini-tools/search\"\n              icon-position=\"start\"\n              placeholder=\"Search by any field\"\n              onInput={this.filterInputHandler as any}\n            ></gxg-form-text>\n          </header>\n        ) : null}\n\n        <ch-tabular-grid\n          ref={(el: HTMLChTabularGridElement) => (this.chGridEl = el)}\n          part=\"ch-grid-images\"\n          rowSelectionMode=\"single\"\n          class=\"tabular-grid tabular-grid-ww-images\"\n        >\n          <ch-tabular-grid-columnset class=\"tabular-grid-column-set\">\n            <ch-tabular-grid-column\n              columnName=\"\"\n              columnNameHidden={false}\n              settingable={false}\n              size={config.tabularGrid.colSize.maxContent}\n              class=\"tabular-grid-column\"\n            ></ch-tabular-grid-column>\n            <ch-tabular-grid-column\n              columnName={this._componentLocale.tableHead.name}\n              columnNameHidden={false}\n              settingable={false}\n              class=\"tabular-grid-column\"\n              size={config.tabularGrid.colSize.common}\n            ></ch-tabular-grid-column>\n            <ch-tabular-grid-column\n              columnName={this._componentLocale.tableHead.module}\n              columnNameHidden={false}\n              settingable={false}\n              size={config.tabularGrid.colSize.common}\n              class=\"tabular-grid-column\"\n            ></ch-tabular-grid-column>\n            <ch-tabular-grid-column\n              columnName={this._componentLocale.tableHead.description}\n              columnNameHidden={false}\n              settingable={false}\n              size={config.tabularGrid.colSize.commonDouble}\n              class=\"tabular-grid-column\"\n            ></ch-tabular-grid-column>\n            <ch-tabular-grid-column\n              columnName={this._componentLocale.tableHead.modifiedDate}\n              columnNameHidden={false}\n              settingable={false}\n              size={config.tabularGrid.colSize.maxContent}\n              class=\"tabular-grid-column\"\n            ></ch-tabular-grid-column>\n            <ch-tabular-grid-column\n              columnName={this._componentLocale.tableHead.lastUser}\n              columnNameHidden={false}\n              settingable={false}\n              size={config.tabularGrid.colSize.maxContent}\n              class=\"tabular-grid-column\"\n            ></ch-tabular-grid-column>\n            <ch-tabular-grid-column\n              columnName={this._componentLocale.tableHead.importDate}\n              columnNameHidden={false}\n              settingable={false}\n              size={config.tabularGrid.colSize.maxContent}\n              class=\"tabular-grid-column\"\n            ></ch-tabular-grid-column>\n          </ch-tabular-grid-columnset>\n          {this.filteredImages.map((obj: ImageData) => (\n            <ch-tabular-grid-row rowid={obj.id} class=\"tabular-grid-row\">\n              <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n                <ch-image src={obj.icon}></ch-image>\n              </ch-tabular-grid-cell>\n              <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n                {hiChar(obj.name, this.filterImagesInputValue)}\n              </ch-tabular-grid-cell>\n              <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n                {hiChar(obj.module, this.filterImagesInputValue)}\n              </ch-tabular-grid-cell>\n              <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n                {hiChar(obj.description, this.filterImagesInputValue)}\n              </ch-tabular-grid-cell>\n              <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n                {hiChar(\n                  `${formatDate(obj.modifiedDate)}`,\n                  this.filterImagesInputValue\n                )}\n              </ch-tabular-grid-cell>\n              <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n                {hiChar(obj.lastUser, this.filterImagesInputValue)}\n              </ch-tabular-grid-cell>\n              <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n                {hiChar(\n                  `${formatDate(obj.importDate)}`,\n                  this.filterImagesInputValue\n                )}\n              </ch-tabular-grid-cell>\n            </ch-tabular-grid-row>\n          ))}\n        </ch-tabular-grid>\n      </gx-ide-container>\n    );\n  };\n\n  private renderImages = (): Element => {\n    return (\n      /* tiles */\n      <gx-ide-container\n        containerTitle={this._componentLocale.imagesTitle}\n        noContentPadding\n        titleType=\"secondary\"\n        class=\"overflow-auto\"\n        titleHeightAsInput={\n          this.secondaryFilter ? this._componentLocale.imagesDataTitle : null\n        }\n        part=\"image-data-container\"\n      >\n        <div class=\"images-container\">\n          {this.imagesSelectedItems.map(item => (\n            <div class=\"image-item\">\n              <div class=\"image-item__container\">\n                <div class=\"img\">\n                  <img src={item.url} alt={item.id} />\n                </div>\n              </div>\n              <span class=\"image-item__name\">{item.name}</span>\n            </div>\n          ))}\n        </div>\n      </gx-ide-container>\n    );\n  };\n\n  // 9.LOCAL METHODS -> Other //\n\n  private getImages = (): void => {\n    let filters: ImageFiltersData = {\n      name: this.filterNameEl.value,\n      parent: this.filterModuleEl.value ? this.filterModuleEl.value.id : null\n    };\n\n    const modified = this.filterModifiedEl.checked;\n    const modifiedAfter = this.filterAfterTypeEl.value;\n    filters = {\n      ...filters,\n      searchContents: this.filterSearchContentsEl.value,\n      category: this.filterCategoryEl.value,\n      allDescendants: this.filterAllDescendantsEl.checked,\n      modifiedAfter: modified ? modifiedAfter : null,\n      modifiedBy: modified ? this.filterUserEl.value : null,\n      modifiedDate:\n        modified && modifiedAfter === FILTER_AFTER.DATE_TIME\n          ? (this.filterModifiedDateEl.value as Date)\n          : null,\n      style: this.filterStyleEl.value,\n      language: this.filterLanguageEl.value,\n      density: this.filterDensityEl.value,\n      layer: this.filterLayerEl.value\n    };\n\n    this.loadCallback(filters).then((items: ImageData[]) => {\n      this.images = items;\n      this.selectedObjectsIds = [];\n      this.deselectAll();\n      this.filterImagesInformationHandler();\n    });\n  };\n\n  private newObjectCallbackHandler = (): void => {\n    this.newObjectCallback();\n  };\n\n  private openSelectionCallBackHandler = (): void => {\n    this.openSelectionCallback(this.selectedObjectsIds);\n  };\n\n  private deleteSelectionCallbackHandler = (): void => {\n    this.deleteSelectionCallback(this.selectedObjectsIds);\n  };\n\n  private resetFilterHandler = () => {\n    if (this.filterInitialData) {\n      this.filterNameEl.value = this.filterInitialData.name;\n      this.filterModuleEl.value = this.filterInitialData.module;\n      this.filterSearchContentsEl.value = this.filterInitialData.searchContents;\n      this.filterCategoryEl.value = this.filterInitialData.category;\n      this.filterAllDescendantsEl.checked =\n        this.filterInitialData.allDescendants;\n      this.filterModifiedEl.checked = this.filterInitialData.modified;\n      this.filterModifiedDateEl.value = this.filterInitialData.dateTime;\n      this.filterAfterTypeEl.value = this.filterInitialData.after;\n      this.filterUserEl.value = this.filterInitialData.user;\n      this.filterStyleEl.value = this.filterInitialData.style;\n      this.filterLanguageEl.value = this.filterInitialData.language;\n      this.filterDensityEl.value = this.filterInitialData.density;\n      this.filterLayerEl.value = this.filterInitialData.layer;\n    }\n  };\n\n  private toggleFiltersHandler = () => {\n    this.filtersHidden = !this.filtersHidden;\n  };\n\n  private selectAll = (): void => {\n    (this.chGridEl as any).selectAllRows();\n  };\n\n  private deselectAll = (): void => {\n    (this.chGridEl as any).selectAllRows(false);\n  };\n\n  private listenChanges = (): void => {\n    /* name */\n    this.filterNameEl.addEventListener(\"change\", () => {\n      this.getImages();\n    });\n    /* module/folder */\n    this.filterModuleEl.addEventListener(\"valueChanged\", () => {\n      this.getImages();\n    });\n    /* search contents*/\n    this.filterSearchContentsEl.addEventListener(\"change\", () => {\n      this.getImages();\n    });\n    /* category */\n    this.filterCategoryEl.addEventListener(\"valueChanged\", () => {\n      this.getImages();\n    });\n    /* (options) -> all descendants */\n    this.filterAllDescendantsEl.addEventListener(\"change\", () => {\n      this.getImages();\n    });\n    /* (options) -> modified */\n    this.filterModifiedEl.addEventListener(\"change\", (e: any) => {\n      this.filterModified = e.detail.value;\n      this.getImages();\n    });\n    /* date/time */\n    this.filterModifiedDateEl.addEventListener(\"valueChanged\", () => {\n      this.getImages();\n    });\n    /* after */\n    this.filterAfterTypeEl.addEventListener(\"valueChanged\", () => {\n      this.filterAfterType = this.filterAfterTypeEl.value;\n      this.getImages();\n    });\n    /* user */\n    this.filterUserEl.addEventListener(\"change\", () => {\n      this.getImages();\n    });\n    /* style */\n    this.filterStyleEl.addEventListener(\"valueChanged\", () => {\n      this.getImages();\n    });\n    /* language */\n    this.filterLanguageEl.addEventListener(\"valueChanged\", () => {\n      this.getImages();\n    });\n    /* density */\n    this.filterDensityEl.addEventListener(\"valueChanged\", () => {\n      this.getImages();\n    });\n    /* layer */\n    this.filterLayerEl.addEventListener(\"valueChanged\", () => {\n      this.getImages();\n    });\n\n    // for grid selection\n    this.chGridEl.addEventListener(\"selectionChanged\", (ev: any): void => {\n      this.loadImageItemsCallback(ev.detail.rowsId[0]).then(\n        (items: ImageItemData[]) => {\n          this.imagesSelectedItems = items;\n        }\n      );\n    });\n    this.chGridEl.addEventListener(\"rowDoubleClicked\", (): void => {\n      this.openSelectionCallBackHandler();\n    });\n    this.chGridEl.addEventListener(\"selectionChanged\", (ev: any): void => {\n      this.selectedObjectsIds = ev.detail.rowsId;\n      this.selectionObjectChangedCallback(this.selectedObjectsIds);\n    });\n    this.chGridEl.addEventListener(\n      \"rowContextMenu\",\n      (ev: CustomEvent<ChGridRowContextMenuEvent>): void => {\n        ev.preventDefault();\n        ev.stopPropagation();\n        this.contextMenuCallback({\n          selection: ev.detail.selectedRowsId,\n          clientX: ev.detail.clientX,\n          clientY: ev.detail.clientY\n        });\n      }\n    );\n  };\n\n  private filterInputHandler = (e: CustomEvent<EventEmitter>) => {\n    this.filterImagesInputValue = e.detail as unknown as string;\n    this.filterImagesInformationHandler();\n  };\n\n  private filterImagesInformationHandler = () => {\n    const filterValue = this.filterImagesInputValue.toLocaleLowerCase();\n    this.filteredImages = this.images.filter(image => {\n      const nameMatch = image.name.toLocaleLowerCase().includes(filterValue);\n      const moduleMatch = image.module\n        .toLocaleLowerCase()\n        .includes(filterValue);\n      const descriptionMatch = image.description\n        .toLocaleLowerCase()\n        .includes(filterValue);\n      const modifiedDateMatch = image.modifiedDate\n        .toString()\n        .includes(filterValue);\n      const lastUser = image.lastUser.toLocaleLowerCase().includes(filterValue);\n      const importDateMatch =\n        image.importDate && image.importDate.toString().includes(filterValue);\n\n      return (\n        nameMatch ||\n        moduleMatch ||\n        descriptionMatch ||\n        modifiedDateMatch ||\n        lastUser ||\n        importDateMatch\n      );\n    });\n  };\n\n  // 10.RENDER() FUNCTION //\n\n  render(): void {\n    return (\n      <Host class=\"gx-ide-component\">\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <div class=\"gx-ide-main-wrapper\">\n          <gx-ide-container\n            noContentPadding\n            noContentGap\n            containerTitle={\n              this.displayTitle ? this._componentLocale.componentName : null\n            }\n            slimmerFooter={config.gxIdeContainer.slimmerFooter}\n          >\n            <div class=\"master-wrapper\">\n              {this.renderFilter()}\n              <div class=\"grid-images-container\">\n                {this.renderImagesData()}\n                {this.renderImages()}\n              </div>\n            </div>\n\n            {/* select all button */}\n            <gxg-button\n              id=\"button-select-all\"\n              type=\"outlined\"\n              onClick={this.selectAll}\n              part=\"gxg-button gxg-button--select-all\"\n              slot=\"footer-end\"\n            >\n              {this._componentLocale.footer.btnSelectAll}\n            </gxg-button>\n\n            {/* new file button*/}\n            <gxg-button\n              id=\"button-new-file\"\n              type=\"primary-text-icon\"\n              icon=\"objects/image\"\n              onClick={this.newObjectCallbackHandler}\n              part=\"gxg-button gxg-button--new-file\"\n              slot=\"footer-end\"\n            >\n              {this._componentLocale.footer.btnNew}\n            </gxg-button>\n\n            {/* matching objects */}\n            <gxg-text\n              class=\"align-end\"\n              part=\"objects-matching\"\n              slot=\"footer-start\"\n            >\n              {`${this.filteredImages.length} ${this._componentLocale.objCount.matching}`}\n            </gxg-text>\n          </gx-ide-container>\n        </div>\n      </Host>\n    );\n  }\n}\n\nexport type SelectionObjectCallback = (ids: string[]) => Promise<void>;\nexport type OpenSelectionCallback = (ids: string[]) => Promise<void>;\nexport type DeleteSelectionCallback = (ids: string[]) => Promise<void>;\nexport type SelectModuleCallback = () => Promise<EntityData | undefined>;\nexport type ContextMenuCallback = (\n  contextMenuInfo: ContextMenuInfo\n) => Promise<void>;\nexport type NewObjectCallback = () => Promise<void>;\nexport type LoadCallback = (filters: ImageFiltersData) => Promise<ImageData[]>;\nexport type LoadImageItemsCallback = (id: string) => Promise<ImageItemData[]>;\n\nexport type ImageFiltersData = {\n  name?: string;\n  searchContents?: string;\n  category?: string;\n  parent?: string;\n  allDescendants?: boolean;\n  modifiedAfter?: string;\n  modifiedBy?: string;\n  modifiedDate?: Date;\n  style?: string;\n  language?: string;\n  density?: string;\n  layer?: string;\n};\n\nexport type ImageData = {\n  id: string;\n  icon: string;\n  name: string;\n  description: string;\n  parent: string;\n  module: string;\n  modifiedDate?: Date;\n  lastUser?: string;\n  importDate?: Date;\n};\n\nexport type ImageItemData = {\n  id: string;\n  name: string;\n  url: string;\n};\n\ntype FilerInitialData = {\n  name: string;\n  module: EntityData;\n  searchContents: string;\n  category: string;\n  allDescendants: boolean;\n  modified: boolean;\n  dateTime: DatePickerDate;\n  after: string;\n  user: string;\n  style: string;\n  language: string;\n  density: string;\n  layer: string;\n};\n"],"mappings":"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"}

package/dist/genexus-ide-ui/p-11dccb8f.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["bpmAppDeclarationCss","CSS_BUNDLES","ADD_ICON","getIconPath","category","name","colorType","FILTER_ICON","MORE_ICON","SUGGEST_OPTIONS","alreadyProcessed","autoExpand","hideMatchesAndShowNonMatches","highlightMatchedItems","matchCase","regularExpression","strict","renderActiveItemIconOnExpand","GxIdeBpmAppDeclaration","_GxIdeBpmAppDeclaration_componentLocale","set","this","_GxIdeBpmAppDeclaration_animateEmptyState","_GxIdeBpmAppDeclaration_shortcutsSrc","getAssetPath","_GxIdeBpmAppDeclaration_ACCESS_CAPTION_MAP","in","undefined","out","inout","_GxIdeBpmAppDeclaration_setAccessCaptions","__classPrivateFieldGet","dataMappings","access","_GxIdeBpmAppDeclaration_applicationInputChangedHandler","async","event","selectedApplicationName","detail","application","mappings","getDataMappingCallback","_GxIdeBpmAppDeclaration_cancelCallbackHandler","cancelCallback","_GxIdeBpmAppDeclaration_clearApplicationHandler","typeIcon","_GxIdeBpmAppDeclaration_confirmCallbackHandler","confirmCallback","_GxIdeBpmAppDeclaration_mapRelevantDataOptionsToComboBoxModel","relevantDataOptions","map","optionName","caption","value","_GxIdeBpmAppDeclaration_mapSuggestedApplicationsToComboBoxModel","suggestedApplicationsNames","applicationName","_GxIdeBpmAppDeclaration_relevantDataInputHandler","mappingIndex","inputValue","relevantData","_GxIdeBpmAppDeclaration_selectApplicationCallbackHandler","applicationDeclarationData","selectApplicationCallback","_GxIdeBpmAppDeclaration_setApplicationData","call","_GxIdeBpmAppDeclaration_selectMappingCallbackHandler","parameter","returnedRelevantData","selectMappingCallback","currentRelevantDataOptions","indexOfReturnedRelevantData","indexOf","push","_GxIdeBpmAppDeclaration_updateApplicationData","applicationData","applicationComboBoxModel","startImgSrc","_GxIdeBpmAppDeclaration_suggestInputHandler","suggestedApplicationNames","suggestApplicationsCallback","_GxIdeBpmAppDeclaration_renderDataMappingsGrid","applicationDataToDisplay","length","__classPrivateFieldSet","h","class","title","scrollable","part","columnName","firstColName","firstColNameParameter","settingable","size","config","tabularGrid","colSize","common","secondColName","sortable","auto","obj","index","rowId","key","model","onInput","onClick","buttons","selectMapping","src","isAnimated","stateIconSrc","stateTitle","emptyState","stateDescription","description","componentWillLoad","Locale","getComponentStrings","el","render","Host","slot","suggestDebounce","inputDebounce","suggest","suggestOptions","onChange","selectApplication","cancelButton","confirmButton"],"sources":["src/components/bpm/application-declaration/bpm-app-declaration.scss?tag=gx-ide-bpm-app-declaration&encapsulation=shadow","src/components/bpm/application-declaration/bpm-app-declaration.tsx"],"sourcesContent":["@import \"../../../global/gx-ide-common.scss\";\n@import \"../../../global/gx-ide-mixins.scss\";\n@import \"../../../../node_modules/@genexus/mercury/dist/assets/scss/helpers.scss\";\n\n:host {\n  display: grid;\n  block-size: 100%;\n  grid-template-rows: max-content 1fr max-content;\n  overflow: auto;\n}\n\n.section {\n  display: contents;\n}\n\n.header {\n  display: grid;\n  grid-template-columns: 1fr max-content;\n}\n\n.data-mapping-grid-container,\n.data-mapping-grid-container .field {\n  overflow: auto;\n  block-size: 100%;\n}\n\n.tabular-grid-application-declaration {\n  overflow: auto;\n}\nch-tabular-grid.empty-result::part(main) {\n  // WA to avoid scrollbar flickering when displaying the empty-state message\n  overflow: hidden;\n}\n\n.pill-tag {\n  // base styles for this class defined on \"gx-ide-common.scss\"\n  min-inline-size: 40px;\n  margin-inline-end: 10px;\n}\n\n@include tabular-grid-cell-layout(\n  $tabular-grid-selector: \".tabular-grid-application-declaration\",\n  $tabular-grid-cell-node-type: \"element\",\n  $tabular-grid-affected-columns-nth-list: (\n    2\n  )\n);\n\n// WA\n.tabular-grid-cell:nth-child(2) {\n  padding: 0 !important;\n  display: grid;\n  align-items: stretch;\n  justify-content: stretch;\n  --ds-focus-border-width: none;\n}\n.tabular-grid-cell:nth-child(3) {\n  padding: 0 !important;\n  align-items: center !important;\n  justify-content: center !important;\n}\n.tabular-grid {\n  overflow: auto;\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Element,\n  Event,\n  EventEmitter,\n  getAssetPath\n} from \"@stencil/core\";\n\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\n\nimport { Locale } from \"../../../common/locale\";\nimport { config } from \"../../../common/config\";\nimport { ComboBoxModel } from \"@genexus/chameleon-controls-library\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"components/button\",\n  \"components/combo-box\",\n  \"components/icon\",\n  \"components/tabular-grid\",\n  \"utils/elevation\",\n  \"utils/form\",\n  \"utils/layout\",\n  \"utils/spacing\"\n];\n\nconst ADD_ICON = getIconPath({\n  category: \"system\",\n  name: \"add\",\n  colorType: \"neutral\"\n});\nconst FILTER_ICON = getIconPath({\n  category: \"window-tools\",\n  name: \"filter\",\n  colorType: \"on-elevation\"\n});\nconst MORE_ICON = getIconPath({\n  category: \"system\",\n  name: \"more-horizontal\",\n  colorType: \"primary\"\n});\n\nconst SUGGEST_OPTIONS = {\n  alreadyProcessed: true,\n  autoExpand: false,\n  hideMatchesAndShowNonMatches: false,\n  highlightMatchedItems: false,\n  matchCase: false,\n  regularExpression: false,\n  strict: false,\n  renderActiveItemIconOnExpand: true\n};\n\n@Component({\n  tag: \"gx-ide-bpm-app-declaration\",\n  styleUrl: \"bpm-app-declaration.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/bpm-app-declaration\"]\n})\nexport class GxIdeBpmAppDeclaration {\n  /**\n   * The component hard-coded strings translations.\n   */\n  // eslint-disable-next-line @stencil-community/own-props-must-be-private\n  #componentLocale: any;\n  #animateEmptyState = true;\n  #shortcutsSrc = getAssetPath(\n    `./gx-ide-assets/bpm-app-declaration/shortcuts.json`\n  );\n\n  #ACCESS_CAPTION_MAP: Record<DataMappingAccess, string> = {\n    // To be defined on componentWillLoad\n    in: undefined,\n    out: undefined,\n    inout: undefined\n  };\n\n  @Element() el: HTMLGxIdeBpmAppDeclarationElement;\n\n  /**\n   * The application ComoBoxModel. When the component renders for the first time, it is required\n   * to display the application typeIcon. Later, it is required to display the suggested application\n   * options with the combo suggest.\n   */\n  @State() applicationComboBoxModel: ComboBoxModel = [];\n\n  /**\n   * Current value of the application declaration. Keep in mind that this property will be used by\n   * the host to initialize the component, meaning it will assign the current declaration value.\n   */\n  @Prop({ mutable: true }) application: ApplicationDeclarationData;\n\n  /**\n   * Callback invoked when user cancels application declaration\n   */\n  @Prop() readonly cancelCallback: CancelCallback;\n\n  /**\n   * Callback invoked when user confirms application declaration\n   */\n  @Prop() readonly confirmCallback: ConfirmCallback;\n\n  /**\n   * Callback invoked when user select one of the options provided by the suggest\n   */\n  @Prop() readonly getDataMappingCallback: GetDataMappingCallback;\n\n  /**\n   * Callback invoked to get access to selection application dialog\n   */\n  @Prop() readonly selectApplicationCallback: SelectApplicationCallback;\n\n  /**\n   * Callback invoked when user press mapping auto-def button\n   */\n  @Prop() readonly selectMappingCallback: SelectMappingCallback;\n\n  /**\n   * Callback invoked to get options for application input suggest\n   */\n  @Prop() readonly suggestApplicationsCallback: SuggestApplicationsCallback;\n\n  /**\n   * @description Gets fired when the component has rendered for the first time.\n   */\n  @Event() componentDidRenderFirstTime: EventEmitter<string>;\n\n  async componentWillLoad() {\n    this.#componentLocale = await Locale.getComponentStrings(this.el);\n    this.#setApplicationData(this.application.application);\n    if (this.application.mappings.length === 0) {\n      this.#animateEmptyState = false;\n    }\n    this.#setAccessCaptions();\n  }\n\n  #setAccessCaptions = () => {\n    this.#ACCESS_CAPTION_MAP.in = this.#componentLocale.dataMappings.access.in;\n    this.#ACCESS_CAPTION_MAP.out =\n      this.#componentLocale.dataMappings.access.out;\n    this.#ACCESS_CAPTION_MAP.inout =\n      this.#componentLocale.dataMappings.access.inout;\n  };\n\n  #applicationInputChangedHandler = async (\n    event: CustomEvent<string> | InputEvent\n  ) => {\n    const selectedApplicationName = event.detail as string;\n    this.application.mappings = await this.getDataMappingCallback(\n      selectedApplicationName\n    );\n  };\n\n  #cancelCallbackHandler = () => {\n    this.cancelCallback();\n  };\n\n  #clearApplicationHandler = () => {\n    this.application = {\n      application: {\n        name: \"\",\n        typeIcon: \"\"\n      },\n      mappings: []\n    };\n  };\n\n  #confirmCallbackHandler = () => {\n    this.confirmCallback(this.application);\n  };\n\n  #mapRelevantDataOptionsToComboBoxModel = (\n    relevantDataOptions: string[]\n  ): ComboBoxModel => {\n    return relevantDataOptions.map(optionName => {\n      return {\n        caption: optionName,\n        value: optionName\n      };\n    });\n  };\n\n  #mapSuggestedApplicationsToComboBoxModel = (\n    suggestedApplicationsNames: string[]\n  ): ComboBoxModel => {\n    return suggestedApplicationsNames.map(applicationName => {\n      return {\n        caption: applicationName,\n        value: applicationName\n      };\n    });\n  };\n\n  #relevantDataInputHandler =\n    (mappingIndex: number) =>\n    async (event: CustomEvent<string> | InputEvent) => {\n      const inputValue = event.detail as string;\n      this.application.mappings[mappingIndex].relevantData = inputValue;\n    };\n\n  #selectApplicationCallbackHandler = async () => {\n    const applicationDeclarationData = await this.selectApplicationCallback();\n    if (applicationDeclarationData) {\n      this.#setApplicationData(applicationDeclarationData.application);\n      this.application.mappings = applicationDeclarationData.mappings;\n    }\n  };\n\n  #selectMappingCallbackHandler =\n    (parameter: string, mappingIndex: number) => async () => {\n      const returnedRelevantData = await this.selectMappingCallback(parameter);\n      if (returnedRelevantData) {\n        const currentRelevantDataOptions =\n          this.application.mappings[mappingIndex].relevantDataOptions;\n\n        const indexOfReturnedRelevantData =\n          currentRelevantDataOptions.indexOf(returnedRelevantData);\n\n        if (indexOfReturnedRelevantData === -1) {\n          // returnedRelevantData is a new option. Add to combo-box.\n          currentRelevantDataOptions.push(returnedRelevantData);\n        }\n        // Set as selected\n        this.application.mappings[mappingIndex].relevantData =\n          returnedRelevantData;\n\n        this.#updateApplicationData();\n      }\n    };\n\n  #setApplicationData = (applicationData: ApplicationData) => {\n    if (applicationData) {\n      const applicationName = applicationData.name;\n      this.application.application.name = applicationName;\n      this.applicationComboBoxModel = [\n        {\n          caption: applicationName,\n          value: applicationName,\n          startImgSrc: applicationData.typeIcon\n        }\n      ];\n    }\n  };\n\n  #suggestInputHandler = async (event: CustomEvent<string> | InputEvent) => {\n    const inputValue = event.detail as string;\n    this.application.application.name = inputValue;\n    const suggestedApplicationNames: string[] =\n      await this.suggestApplicationsCallback(inputValue);\n\n    this.applicationComboBoxModel =\n      this.#mapSuggestedApplicationsToComboBoxModel(suggestedApplicationNames);\n  };\n\n  #updateApplicationData = () => {\n    this.application = { ...this.application };\n  };\n\n  // Renders\n\n  #renderDataMappingsGrid = (): Element => {\n    const applicationDataToDisplay = this.application.mappings.length;\n    if (applicationDataToDisplay) {\n      // Set as animated for the next time.\n      this.#animateEmptyState = true;\n    }\n    return (\n      <div class=\"field-group data-mapping-grid-container\">\n        <div class=\"field field-block\">\n          <label class=\"spacing-body-inline-start label\">\n            {this.#componentLocale.dataMappings.title}\n          </label>\n          <ch-tabular-grid\n            class={{\n              \"tabular-grid\": true,\n              \"tabular-grid-application-declaration\": true,\n              \"scrollable\": true,\n              \"empty-result\": !applicationDataToDisplay\n            }}\n            part=\"ch-grid-data-mappings\"\n          >\n            <ch-tabular-grid-columnset class=\"tabular-grid-column-set\">\n              <ch-tabular-grid-column\n                class=\"tabular-grid-column\"\n                columnName={\n                  this.application.application?.typeIcon ===\n                  \"objects/transaction\"\n                    ? this.#componentLocale.dataMappings.firstColName\n                    : this.#componentLocale.dataMappings.firstColNameParameter\n                }\n                settingable={false}\n                size={config.tabularGrid.colSize.common}\n              ></ch-tabular-grid-column>\n\n              <ch-tabular-grid-column\n                class=\"tabular-grid-column\"\n                columnName={this.#componentLocale.dataMappings.secondColName}\n                settingable={false}\n                sortable={false}\n                size={config.tabularGrid.colSize.common}\n              ></ch-tabular-grid-column>\n              <ch-tabular-grid-column\n                class=\"tabular-grid-column\"\n                settingable={false}\n                sortable={false}\n                size={config.tabularGrid.colSize.auto}\n              ></ch-tabular-grid-column>\n            </ch-tabular-grid-columnset>\n\n            {this.application.mappings.length ? (\n              <ch-tabular-grid-rowset class=\"tabular-grid-rowset\">\n                {this.application.mappings.map(\n                  (obj: DataMappingData, index) => (\n                    <ch-tabular-grid-row\n                      class=\"tabular-grid-row\"\n                      rowId={`${index}-${obj.parameter}`}\n                      key={`${index}-${obj.parameter}-grid-row`}\n                    >\n                      <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n                        <span class=\"pill-tag elevation-3\">\n                          {\n                            this.#ACCESS_CAPTION_MAP[\n                              obj.access as DataMappingAccess\n                            ]\n                          }\n                        </span>\n                        {obj.parameter}\n                      </ch-tabular-grid-cell>\n                      <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n                        <ch-combo-box-render\n                          class=\"combo-box\"\n                          model={this.#mapRelevantDataOptionsToComboBoxModel(\n                            obj.relevantDataOptions\n                          )}\n                          value={obj.relevantData}\n                          key={`${index}-${obj.parameter}-combo-box`}\n                          onInput={this.#relevantDataInputHandler(index)}\n                        ></ch-combo-box-render>\n                      </ch-tabular-grid-cell>\n                      <ch-tabular-grid-cell class=\"tabular-grid-cell\">\n                        <button\n                          data-index={index}\n                          onClick={this.#selectMappingCallbackHandler(\n                            obj.parameter,\n                            index\n                          )}\n                          class=\"button-tertiary button-icon-only\"\n                          aria-label={\n                            this.#componentLocale.buttons.selectMapping\n                          }\n                          title={this.#componentLocale.buttons.selectMapping}\n                        >\n                          <ch-image class=\"icon-md\" src={ADD_ICON}></ch-image>\n                        </button>\n                      </ch-tabular-grid-cell>\n                    </ch-tabular-grid-row>\n                  )\n                )}\n              </ch-tabular-grid-rowset>\n            ) : (\n              <ch-tabular-grid-rowset class=\"tabular-grid-rowset\">\n                <ch-tabular-grid-rowset-empty>\n                  <gx-ide-empty-state\n                    isAnimated={this.#animateEmptyState}\n                    stateIconSrc={FILTER_ICON}\n                    stateTitle={this.#componentLocale.emptyState.title}\n                    stateDescription={\n                      this.#componentLocale.emptyState.description\n                    }\n                  ></gx-ide-empty-state>\n                </ch-tabular-grid-rowset-empty>\n              </ch-tabular-grid-rowset>\n            )}\n          </ch-tabular-grid>\n        </div>\n      </div>\n    );\n  };\n\n  render() {\n    return (\n      <Host class=\"widget\">\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <section class=\"section\">\n          <header slot=\"header\" class=\"header spacing-body\">\n            <ch-combo-box-render\n              class=\"combo-box\"\n              value={this.application.application.name}\n              model={this.applicationComboBoxModel}\n              suggestDebounce={config.inputDebounce}\n              suggest\n              suggestOptions={SUGGEST_OPTIONS}\n              onInput={this.#suggestInputHandler}\n              onChange={this.#applicationInputChangedHandler}\n            ></ch-combo-box-render>\n\n            <div class=\"buttons-spacer\">\n              <button\n                onClick={this.#selectApplicationCallbackHandler}\n                class=\"button-tertiary button-icon-only\"\n                aria-label={this.#componentLocale.buttons.selectApplication}\n                title={this.#componentLocale.buttons.selectApplication}\n              >\n                <ch-image class=\"icon-md\" src={MORE_ICON}></ch-image>\n              </button>\n              <button\n                onClick={this.#clearApplicationHandler}\n                class=\"button-secondary\"\n              >\n                Clear\n              </button>\n            </div>\n          </header>\n\n          {this.#renderDataMappingsGrid()}\n\n          <footer class=\"control-footer spacing-body-block-end spacing-body-inline\">\n            <div class=\"buttons-spacer\">\n              <button\n                class=\"button-secondary\"\n                onClick={this.#cancelCallbackHandler}\n              >\n                {this.#componentLocale.buttons.cancelButton}\n              </button>\n              <button\n                class=\"button-primary\"\n                onClick={this.#confirmCallbackHandler}\n              >\n                {this.#componentLocale.buttons.confirmButton}\n              </button>\n            </div>\n          </footer>\n        </section>\n        <ch-shortcuts src={this.#shortcutsSrc}></ch-shortcuts>\n      </Host>\n    );\n  }\n}\n\nexport type ApplicationDeclarationData = {\n  application?: ApplicationData;\n  mappings: DataMappingData[];\n};\nexport type ApplicationData = {\n  name: string;\n  typeIcon: string;\n};\n\ntype DataMappingAccess = \"in\" | \"out\" | \"inout\";\n\nexport type DataMappingData = {\n  parameter: string;\n  access: DataMappingAccess;\n  relevantDataOptions: string[];\n  relevantData?: string;\n};\n\nexport type SuggestApplicationsCallback = (\n  prefix: string\n) => Promise<string[] | undefined>;\n\nexport type SelectApplicationCallback = () => Promise<\n  ApplicationDeclarationData | undefined\n>;\n\nexport type SelectMappingCallback = (parameter: string) => Promise<string>;\n\nexport type ConfirmCallback = (\n  data: ApplicationDeclarationData\n) => Promise<void>;\n\nexport type CancelCallback = () => Promise<void>;\n\nexport type GetDataMappingCallback = (\n  applicationName: string\n) => Promise<DataMappingData[]>;\n"],"mappings":"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"}

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

@@ -1 +0,0 @@
-{"version":3,"names":["convertActionToTreeViewItem","operations","treeData","forEach","operation","importCategoryTreeItem","id","caption","name","expanded","leaf","checkbox","push","openApiImportCss","CSS_BUNDLES","FILE_ICON","getIconPath","category","colorType","MENU_DELETE","CHECKBOX_ALL_CHECKED_VALUE","CHECKBOX_ALL_UNCHECKED_VALUE","GxIdeOpenAPIImport","_GxIdeOpenAPIImport__componentLocale","set","this","_GxIdeOpenAPIImport_renderedFirstTime","_GxIdeOpenAPIImport_shortcutsSrc","getAssetPath","_GxIdeOpenAPIImport_chShortcutsEl","_GxIdeOpenAPIImport_fileInputHiddenEl","_GxIdeOpenAPIImport_parentEl","_GxIdeOpenAPIImport_objectsTreeEl","_GxIdeOpenAPIImport_cancelImportHandler","cancelCallback","_GxIdeOpenAPIImport_handleImport","async","importCallback","selectedOperations","_GxIdeOpenAPIImport_objectsTreeCheckedItemsChangedHandler","event","detail","size","allItems","checkedItems","values","filter","node","item","checked","map","length","selectAllCheckboxValue","selectAllCheckboxIndeterminate","_GxIdeOpenAPIImport_handleSelectAll","__classPrivateFieldGet","updateAllItemsProperties","op","_GxIdeOpenAPIImport_objectTreeClickedHandler","selectedOperationForDescription","description","_GxIdeOpenAPIImport_removeFileSelection","selectedFile","value","actionListItems","_GxIdeOpenAPIImport_selectFileInputChangedHandler","target","files","loadCallback","_GxIdeOpenAPIImport_selectFileInputHandler","click","_GxIdeOpenAPIImport_renderFooter","h","class","checkedValue","unCheckedValue","main","selectAll","indeterminate","onInput","disabled","importingIsInProcess","part","slot","onClick","footer","cancel","import","componentDidRender","componentDidRenderFirstTime","emit","componentName","__classPrivateFieldSet","componentWillLoad","Locale","getComponentStrings","el","suspendShortcuts","suspend","render","Host","model","src","ref","role","htmlFor","header","fileNameLabel","autoFocus","type","readonly","placeholder","fileNamePlaceholder","startImgSrc","hidden","accept","onChange","removeFileSelection","title","selectFileButton","moduleFolderLabel","defaultParent","defaultValue","selectEntityCallback","selectParentCallback","labelPosition","onCheckedItemsChange","onSelectedItemsChange","procedureDescription","call"],"sources":["src/components/open-api-import/helpers.ts","src/components/open-api-import/open-api-import.scss?tag=gx-ide-open-api-import&encapsulation=shadow","src/components/open-api-import/open-api-import.tsx"],"sourcesContent":["import { ApiOperationData } from \"./open-api-import\";\nimport { TreeViewItemModel } from \"@genexus/chameleon-controls-library\";\n\nexport const convertActionToTreeViewItem = (\n  operations: ApiOperationData[]\n): TreeViewItemModel[] => {\n  const treeData: TreeViewItemModel[] = [];\n  if (!operations) {\n    return treeData;\n  }\n  operations.forEach(operation => {\n    const importCategoryTreeItem: TreeViewItemModel = {\n      id: operation.id,\n      caption: `${operation.name}`,\n      expanded: true,\n      leaf: true,\n      checkbox: true\n    };\n    treeData.push(importCategoryTreeItem);\n  });\n  return treeData;\n};\n","section {\n  display: grid;\n  block-size: 100%;\n  grid-template-rows: max-content 1fr max-content;\n}\n\n.main {\n  position: relative;\n  display: contents;\n}\n\n.input-file {\n  display: flex;\n}\n\n.field {\n  width: 100%;\n}\n\n.control-header__operations,\n.control-header__description {\n  padding-block-start: var(--mer-spacing--md);\n}\n\n.header__field-group {\n  grid-template:\n    \"import-file-label import-file-name buttons-container\" max-content\n    \"module-folder-label module-folder module-folder\" max-content\n    / max-content 1fr max-content;\n}\n.module-folder-name {\n  grid-area: module-folder;\n}\n.module-folder-label {\n  grid-area: module-folder-label;\n}\n.import-file-label {\n  grid-area: import-file-label;\n}\n\n.header__buttons-container {\n  grid-area: buttons-container;\n}\n\n.section-grid {\n  display: grid;\n  grid-template:\n    \"top-content-operations top-content-description\" max-content\n    \"operations-area operations-description\" 1fr\n    / 1fr 1fr;\n  background-color: var(--items-container__bg-color);\n  border-style: var(--items-container__border-style);\n  border-width: var(--items-container__border-width);\n  border-color: var(--items-container__border-color);\n  border-block-start: 0;\n  overflow-y: auto;\n}\n\n.list-wrapper {\n  grid-area: operations-area;\n  border-inline-end: var(--section-common-border);\n}\n.label {\n  margin-top: 6px !important;\n}\n\n.tree-operations::part(item__header) {\n  // WA Since this is a tree without parent node.\n  // This componnent should ideally by an action-list,\n  // but at the time of writting it doesn't support checkboxes.\n  padding-inline-start: 0;\n}\n\n.procedure-description {\n  grid-area: operations-description;\n  overflow: auto;\n  text-align: justify;\n}\n\n.control-header__operations {\n  grid-area: top-content-operations;\n  background-color: var(--items-container__bg-color);\n}\n\n.control-header__description {\n  grid-area: top-content-description;\n  background-color: var(--items-container__bg-color);\n}\n.text-align-center {\n  text-align: center;\n}\n","/* STENCIL IMPORTS */\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n  getAssetPath,\n  Method\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\n/* CUSTOM IMPORTS */\nimport { Locale } from \"../../common/locale\";\nimport { EntityData } from \"../../common/types\";\nimport { getIconPath, MercuryBundles } from \"@genexus/mercury\";\nimport {\n  TreeViewItemModel,\n  TreeViewItemModelExtended,\n  ChCheckboxCustomEvent\n} from \"@genexus/chameleon-controls-library\";\nimport { convertActionToTreeViewItem } from \"./helpers\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"components/button\",\n  \"components/checkbox\",\n  \"components/edit\",\n  \"components/icon\",\n  \"components/tree-view\",\n  \"components/list-box\",\n  \"utils/form\",\n  \"utils/layout\",\n  \"utils/spacing\",\n  \"utils/typography\"\n];\n\nconst FILE_ICON = getIconPath({\n  category: \"gemini-tools\",\n  name: \"file\",\n  colorType: \"on-elevation\"\n});\n\nconst MENU_DELETE = getIconPath({\n  category: \"menus\",\n  name: \"delete\",\n  colorType: \"primary\"\n});\n\nconst CHECKBOX_ALL_CHECKED_VALUE = \"allChecked\";\nconst CHECKBOX_ALL_UNCHECKED_VALUE = \"allUnchecked\";\n\n@Component({\n  tag: \"gx-ide-open-api-import\",\n  styleUrl: \"open-api-import.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/open-api-import\"]\n})\nexport class GxIdeOpenAPIImport {\n  #_componentLocale: any;\n  #renderedFirstTime = false;\n  #shortcutsSrc = getAssetPath(`./gx-ide-assets/new-object/shortcuts.json`);\n\n  @Element() el: HTMLGxIdeOpenApiImportElement;\n\n  #chShortcutsEl: HTMLChShortcutsElement;\n  #fileInputHiddenEl!: HTMLInputElement;\n  #parentEl!: HTMLGxIdeEntitySelectorElement;\n\n  @State() actionListItems: TreeViewItemModel[] = [];\n  @State() importingIsInProcess = false;\n  @State() operations: ApiOperationData[] = [];\n  @State() selectedFile: File;\n  @State() selectedOperationForDescription: string;\n  @State() selectedOperations: string[] = [];\n  @State() selectAllCheckboxValue: string;\n  @State() selectAllCheckboxIndeterminate: boolean = false;\n\n  /**\n   * Default value for the Module/Folder field.\n   */\n  @Prop() readonly defaultParent: EntityData;\n\n  /**\n   * If true it displays the component title on the header\n   */\n  @Prop() readonly displayTitle = false;\n\n  /**\n   * Callback invoked when the user wants to cancel the export process.\n   */\n  @Prop() readonly cancelCallback: CancelCallback;\n\n  /**\n   * Callback invoked when the user wants to initiate the import process.\n   */\n  @Prop() readonly importCallback: ImportCallback;\n\n  /**\n   * Callback invoked must be loaded the content for an specification API\n   */\n  @Prop() readonly loadCallback: LoadCallback;\n\n  /**\n   * Callback invoked when action is executed on Module/Folder filter (button '...').\n   */\n  @Prop() readonly selectParentCallback: SelectParentCallback;\n\n  /**\n   * @description Gets fired when the component has rendered for the first time.\n   */\n  @Event() componentDidRenderFirstTime: EventEmitter<string>;\n\n  #objectsTreeEl!: HTMLChTreeViewRenderElement;\n\n  componentDidRender() {\n    if (!this.#renderedFirstTime) {\n      this.componentDidRenderFirstTime.emit(\n        this.#_componentLocale.componentName\n      );\n      this.#renderedFirstTime = true;\n    }\n  }\n\n  async componentWillLoad() {\n    this.#_componentLocale = await Locale.getComponentStrings(this.el);\n  }\n\n  /**\n   * Suspends or reactivates the shortcuts\n   */\n  @Method()\n  async suspendShortcuts(suspendShortcuts: boolean) {\n    if (suspendShortcuts) {\n      this.#chShortcutsEl.suspend = true;\n    } else {\n      this.#chShortcutsEl.suspend = false;\n    }\n  }\n\n  // 9.LOCAL METHODS //\n  #cancelImportHandler = () => {\n    if (this.cancelCallback) {\n      this.cancelCallback();\n    }\n  };\n\n  #handleImport = async () => {\n    await this.importCallback(this.selectedOperations);\n  };\n\n  #objectsTreeCheckedItemsChangedHandler = (\n    event: CustomEvent<Map<string, TreeViewItemModelExtended>>\n  ) => {\n    if (event.detail.size === 0) {\n      return;\n    }\n    const allItems = event.detail;\n    const checkedItems = [...allItems.values()].filter(\n      node => node.item.checked\n    );\n    this.selectedOperations = checkedItems.map(item => item.item.id);\n\n    // Evaluate \"Select All\" checkbox state (siguiendo el patrón de kb-manager-import)\n    if (allItems.size === checkedItems.length) {\n      this.selectAllCheckboxValue = CHECKBOX_ALL_CHECKED_VALUE;\n      this.selectAllCheckboxIndeterminate = false;\n    } else if (checkedItems.length === 0) {\n      this.selectAllCheckboxValue = CHECKBOX_ALL_UNCHECKED_VALUE;\n      this.selectAllCheckboxIndeterminate = false;\n    } else {\n      this.selectAllCheckboxIndeterminate = true;\n    }\n  };\n\n  #handleSelectAll = (event: ChCheckboxCustomEvent<string> | InputEvent) => {\n    if (\"detail\" in event && this.#objectsTreeEl) {\n      const checked =\n        (event as ChCheckboxCustomEvent<string>).detail ===\n        CHECKBOX_ALL_CHECKED_VALUE;\n      // Usar updateAllItemsProperties como en kb-manager-import\n      this.#objectsTreeEl.updateAllItemsProperties({ checked: checked });\n      this.selectedOperations = checked ? this.operations.map(op => op.id) : [];\n      this.selectAllCheckboxValue = checked\n        ? CHECKBOX_ALL_CHECKED_VALUE\n        : CHECKBOX_ALL_UNCHECKED_VALUE;\n      this.selectAllCheckboxIndeterminate = false;\n    }\n  };\n\n  #objectTreeClickedHandler = (\n    event: CustomEvent<TreeViewItemModelExtended[]>\n  ) => {\n    this.selectedOperationForDescription = this.operations.filter(\n      op => op.id === event.detail[0]?.item.id\n    )[0]?.description;\n  };\n\n  #removeFileSelection = () => {\n    this.selectedFile = null;\n    this.#fileInputHiddenEl.value = null;\n    this.operations = [];\n    this.actionListItems = [];\n    this.selectedOperationForDescription = null;\n  };\n\n  #selectFileInputChangedHandler = async (event: InputEvent) => {\n    const target = event.target as HTMLInputElement;\n    if (target.files?.length > 0) {\n      this.selectedFile = target.files[0];\n      this.operations = await this.loadCallback(\n        this.selectedFile,\n        this.#parentEl.value.id\n      );\n      this.actionListItems = convertActionToTreeViewItem(this.operations);\n    }\n  };\n\n  #selectFileInputHandler = () => {\n    this.#fileInputHiddenEl.click();\n  };\n\n  #renderFooter = (): HTMLElement => {\n    return (\n      <footer class=\"control-footer control-footer-space-between spacing-body-block-end spacing-body-inline\">\n        <div class=\"buttons-spacer\">\n          <ch-checkbox\n            id=\"select-all-checkbox\"\n            class=\"checkbox\"\n            checkedValue={CHECKBOX_ALL_CHECKED_VALUE}\n            unCheckedValue={CHECKBOX_ALL_UNCHECKED_VALUE}\n            caption={this.#_componentLocale.main.selectAll}\n            value={this.selectAllCheckboxValue}\n            indeterminate={this.selectAllCheckboxIndeterminate}\n            onInput={this.#handleSelectAll}\n            disabled={this.importingIsInProcess || !this.operations?.length}\n            part=\"select-all-checkbox\"\n          ></ch-checkbox>\n        </div>\n        <div class=\"buttons-spacer\">\n          <button\n            class=\"button-secondary\"\n            slot=\"footer-end\"\n            part=\"button-cancel\"\n            onClick={this.#cancelImportHandler}\n          >\n            {this.#_componentLocale.footer.cancel}\n          </button>\n\n          <button\n            class=\"button-primary\"\n            slot=\"footer-end\"\n            part=\"button-confirm\"\n            onClick={this.#handleImport}\n          >\n            {this.#_componentLocale.footer.import}\n          </button>\n        </div>\n      </footer>\n    );\n  };\n\n  render() {\n    return (\n      <Host class=\"widget\">\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <ch-shortcuts\n          src={this.#shortcutsSrc}\n          ref={(el: HTMLChShortcutsElement) =>\n            (this.#chShortcutsEl = el as HTMLChShortcutsElement)\n          }\n        ></ch-shortcuts>\n        <section>\n          <header\n            class=\"header control-header-with-border space-body spacing-body-inline spacing-body-block-start\"\n            role=\"banner\"\n          >\n            <div class=\"field-group header__field-group\">\n              <div class=\"import-file-label\">\n                <div class=\"field field-block\">\n                  <label class=\"label\" htmlFor=\"file-name\">\n                    {this.#_componentLocale.header.fileNameLabel}\n                  </label>\n                </div>\n              </div>\n              <div class=\"input-file\">\n                <div class=\"field input-file\">\n                  <ch-edit\n                    autoFocus\n                    id=\"file-name\"\n                    class=\"input file\"\n                    part=\"file-name\"\n                    type=\"text\"\n                    readonly\n                    value={this.selectedFile?.name}\n                    placeholder={\n                      this.#_componentLocale.header.fileNamePlaceholder\n                    }\n                    startImgSrc={FILE_ICON}\n                  ></ch-edit>\n                  <input\n                    hidden\n                    type=\"file\"\n                    accept=\".json, .yaml\"\n                    onChange={this.#selectFileInputChangedHandler}\n                    ref={(el: HTMLInputElement) =>\n                      (this.#fileInputHiddenEl = el as HTMLInputElement)\n                    }\n                  />\n                </div>\n                <div class=\"cancel-btn \">\n                  <button\n                    aria-label={\n                      this.#_componentLocale.header.removeFileSelection\n                    }\n                    title={this.#_componentLocale.header.removeFileSelection}\n                    id=\"reset-all-button\"\n                    class=\"button-tertiary button-icon-only\"\n                    part=\"reset-all-button\"\n                    onClick={this.#removeFileSelection}\n                  >\n                    <ch-image class=\"icon-md\" src={MENU_DELETE}></ch-image>\n                  </button>\n                </div>\n              </div>\n\n              <div class=\"header__buttons-container\">\n                <button\n                  id=\"select-file-load-button\"\n                  class=\"button-primary\"\n                  part=\"select-file-load-button\"\n                  onClick={this.#selectFileInputHandler}\n                  disabled={this.importingIsInProcess}\n                >\n                  {this.#_componentLocale.header.selectFileButton}\n                </button>\n              </div>\n              <div class=\"module-folder-label\">\n                <div class=\"field field-block\">\n                  <label class=\"label\">\n                    {this.#_componentLocale.header.moduleFolderLabel}\n                  </label>\n                </div>\n              </div>\n              <div class=\"field module-folder-name \">\n                <gx-ide-entity-selector\n                  value={this.defaultParent}\n                  defaultValue={this.defaultParent}\n                  selectEntityCallback={this.selectParentCallback}\n                  labelPosition=\"none\"\n                  ref={(el: HTMLGxIdeEntitySelectorElement) =>\n                    (this.#parentEl = el as HTMLGxIdeEntitySelectorElement)\n                  }\n                  class=\"module-folder\"\n                ></gx-ide-entity-selector>\n              </div>\n            </div>\n          </header>\n\n          <main class=\"main\">\n            <div class=\"section-grid\">\n              <h2\n                id=\"operations-title\"\n                class=\"control-header control-header-with-border control-header__operations subtitle-regular-xs text-align-center spacing-body-inline\"\n              >\n                {this.#_componentLocale.main.operations}\n              </h2>\n\n              <div\n                class=\"list-wrapper field-group spacing-body-block-start spacing-body-inline scrollable\"\n                role=\"region\"\n                aria-labelledby=\"operations-title\"\n              >\n                <ch-tree-view-render\n                  class=\"tree-view tree-operations\"\n                  model={this.actionListItems}\n                  show-lines=\"last\"\n                  onCheckedItemsChange={\n                    this.#objectsTreeCheckedItemsChangedHandler\n                  }\n                  onSelectedItemsChange={this.#objectTreeClickedHandler}\n                  ref={el =>\n                    (this.#objectsTreeEl = el as HTMLChTreeViewRenderElement)\n                  }\n                ></ch-tree-view-render>\n              </div>\n\n              <h2\n                id=\"description-title\"\n                class=\"control-header control-header-with-border control-header__description subtitle-regular-xs text-align-center spacing-body-inline\"\n              >\n                {this.#_componentLocale.main.procedureDescription}\n              </h2>\n\n              <div\n                class=\"procedure-description field-group spacing-body-block-start spacing-body-inline scrollable\"\n                role=\"region\"\n                aria-labelledby=\"description-title\"\n              >\n                {this.selectedOperationForDescription}\n              </div>\n            </div>\n          </main>\n          {this.#renderFooter()}\n        </section>\n      </Host>\n    );\n  }\n}\n\nexport type ApiOperationData = {\n  id: string;\n  name: string;\n  description: string;\n};\nexport type SelectionEventDetail = {\n  itemId: string;\n  itemValue: string;\n};\n\nexport type CancelCallback = () => Promise<void>;\nexport type ImportCallback = (operationIds: string[]) => Promise<boolean>;\nexport type SelectParentCallback = () => Promise<EntityData | undefined>;\nexport type LoadCallback = (\n  source: string | File,\n  parentId: string\n) => Promise<ApiOperationData[]>;\n"],"mappings":"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"}

package/dist/genexus-ide-ui/p-2dbf722d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["ACTIVE_ITEM_DEFAULT_ICON","getIconPath","category","name","colorType","convertItemsNodeListToFlattenedTreeViewModel","itemsList","checkboxType","itemsListFlattenedTreeViewModel","processNode","item","startImgSrc","active","iconStart","leaf","nodes","length","checkbox","metaData","JSON","stringify","versionType","type","push","caption","checked","endImgSrc","iconEnd","expanded","id","toString","items","metadata","parts","selected","forEach","childNode","convertItemsListToTreeViewModel","itemsListTreeViewModel","order","parseInt","findItemNode","itemNode","result","findItemInArray","itemsNodes","setAllLeafsCheckedFalse","uncheck","unselectAllNodes","unselect","checkItems","idsChecked","itemFind","expandItems","selectItems","idsSelected","searchInNode","node","parents","searchParentsItems","ids","rootItem","results","findFirstActiveNode","findActiveWithPath","nodeList","currentPath","nodePath","path","selectKbItemsCss","CSS_BUNDLES","SYSTEM_SEARCH_ICON","VIEW_AS_TREE_ID","VIEW_AS_LIST_ID","TOGGLE_CHECKBOXES_CHECKED_VALUE","GxIdeSelectKbItems","_GxIdeSelectKbItems__componentLocale","set","this","_GxIdeSelectKbItems_checkedNodesIds","_GxIdeSelectKbItems_chShortcutsEl","_GxIdeSelectKbItems_selectedNodesIds","_GxIdeSelectKbItems_shortcutsSrc","getAssetPath","_GxIdeSelectKbItems_updatedModelList","_GxIdeSelectKbItems_viewItemsAsModel","_GxIdeSelectKbItems_treeViewRenderEl","_GxIdeSelectKbItems_cancelHandler","cancelCallback","_GxIdeSelectKbItems_checkedItemsChangeHandler","async","e","checkedNodesIds","detail","__classPrivateFieldSet","__classPrivateFieldGet","checkedChanged","_GxIdeSelectKbItems_confirmHandler","confirmCallback","_GxIdeSelectKbItems_contextMenuHandler","itemContextMenuCallback","info","isSelected","find","updateItemsProperties","clientX","contextmenuEvent","clientY","selection","_GxIdeSelectKbItems_executeDialogAction","callback","_GxIdeSelectKbItems_patternSearchValueChangedHandler","event","searchPatternValue","_GxIdeSelectKbItems_renderActionButtons","h","dialogActions","map","action","class","part","onClick","call","disabled","loading","_GxIdeSelectKbItems_renderFooter","footer","cancel","select","_GxIdeSelectKbItems_selectedItemsChangeHandler","selectedNodesIds","selectionChanged","_GxIdeSelectKbItems_toggleAndSelectNodesInModelItems","selectedItemsIds","nodesToToggle","newItemsSelected","newItemsExpanded","_GxIdeSelectKbItems_updateViews","_GxIdeSelectKbItems_toggleCheckedNodesInModelItems","newItemsList","nodeVersionsListTreeModel","nodeListFlattenedTreeModel","_GxIdeSelectKbItems_viewItemsAsChangedHandler","selectedViewType","nodesVersionsViewType","_GxIdeSelectKbItems_toggleCheckboxesChangedHandler","toggleCheckboxes","_GxIdeSelectKbItems_scrollIntoActiveVersionNode","doScrollIntoView","activeItemNode","scrollIntoVisible","activeItemCallback","watchNodeListHandler","componentWillLoad","Locale","getComponentStrings","el","value","main","tree","suspendShortcuts","suspend","updateSelection","render","Host","model","src","ref","htmlFor","onChange","checkedValue","onInput","placeholder","header","searchPatternPlaceholder","containerRef","activeItem","loaderTitle","loader","title","show","expandableButton","onItemContextmenu","onCheckedItemsChange","onSelectedItemsChange","expandOnClick","multiSelection","filter","filterType"],"sources":["src/components/select-kb-items/helpers.tsx","src/components/select-kb-items/select-kb-items.scss?tag=gx-ide-select-kb-items&encapsulation=shadow","src/components/select-kb-items/select-kb-items.tsx"],"sourcesContent":["import { ItemNode, CheckboxType, ActiveNode } from \"./select-kb-items\";\nimport { TreeViewItemModel } from \"@genexus/chameleon-controls-library\";\nimport { getIconPath } from \"@genexus/mercury\";\n\nexport const ACTIVE_ITEM_DEFAULT_ICON = getIconPath({\n  category: \"system\",\n  name: \"check-circle\",\n  colorType: \"primary\"\n});\n\nexport const convertItemsNodeListToFlattenedTreeViewModel = (\n  itemsList: ItemNode[],\n  checkboxType: CheckboxType\n): TreeViewItemModel[] => {\n  const itemsListFlattenedTreeViewModel: TreeViewItemModel[] = [];\n\n  const processNode = (item: ItemNode) => {\n    const startImgSrc =\n      item.active && !item.iconStart\n        ? ACTIVE_ITEM_DEFAULT_ICON\n        : item.iconStart;\n    const leaf = !item.nodes?.length;\n    const checkbox =\n      checkboxType === \"all\" ||\n      (checkboxType === \"custom\" && item.checkbox) ||\n      (checkboxType === \"leaf\" && leaf);\n    const metaData = JSON.stringify({\n      versionType: item.type\n    });\n    itemsListFlattenedTreeViewModel.push({\n      caption: item.name,\n      checkbox: checkbox,\n      checked: item.checked,\n      startImgSrc: startImgSrc,\n      endImgSrc: item.iconEnd,\n      expanded: item.expanded,\n      id: item.id.toString(),\n      items: null,\n      leaf: leaf,\n      metadata: metaData,\n      parts: item.parts,\n      selected: item.selected\n    });\n\n    if (item.nodes) {\n      item.nodes.forEach(childNode => processNode(childNode));\n    }\n  };\n\n  itemsList.forEach(item => processNode(item));\n  return itemsListFlattenedTreeViewModel;\n};\n\nexport const convertItemsListToTreeViewModel = (\n  itemsList: ItemNode[],\n  checkboxType: CheckboxType\n): TreeViewItemModel[] => {\n  const itemsListTreeViewModel: TreeViewItemModel[] = [];\n  itemsList.forEach(item => {\n    const startImgSrc =\n      item.active && !item.iconStart\n        ? ACTIVE_ITEM_DEFAULT_ICON\n        : item.iconStart;\n    const leaf = !item.nodes?.length;\n    const checkbox =\n      checkboxType === \"all\" ||\n      (checkboxType === \"custom\" && item.checkbox) ||\n      (checkboxType === \"leaf\" && leaf);\n    const expanded = item.expanded;\n    const iconStart = startImgSrc;\n    const iconEnd = item.iconEnd;\n    const metaData = JSON.stringify({\n      versionType: item.type\n    });\n    const order = parseInt(item.id);\n    itemsListTreeViewModel.push({\n      caption: item.name,\n      checkbox: checkbox,\n      checked: item.checked,\n      startImgSrc: iconStart,\n      endImgSrc: iconEnd,\n      expanded: expanded,\n      id: item.id.toString(),\n      items: !leaf\n        ? convertItemsListToTreeViewModel(item.nodes, checkboxType)\n        : null,\n      leaf: leaf,\n      metadata: metaData,\n      parts: item.parts,\n      order: order,\n      selected: item.selected\n    });\n  });\n\n  return itemsListTreeViewModel;\n};\n\nconst findItemNode = (id: string, item: ItemNode): ItemNode | null => {\n  if (item.id === id) {\n    return item;\n  }\n\n  if (item.nodes) {\n    for (const itemNode of item.nodes) {\n      const result = findItemNode(id, itemNode);\n      if (result) {\n        return result;\n      }\n    }\n  }\n  return null;\n};\n\nfunction findItemInArray(itemsNodes: ItemNode[], id: string): ItemNode | null {\n  for (const item of itemsNodes) {\n    const result = findItemNode(id, item);\n    if (result) {\n      return result;\n    }\n  }\n  return null;\n}\nconst setAllLeafsCheckedFalse = (itemsList: ItemNode[]): ItemNode[] => {\n  const uncheck = (itemNode: ItemNode) => {\n    itemNode.checked = false;\n    if (itemNode.nodes?.length) {\n      itemNode.nodes.forEach(childNode => uncheck(childNode));\n    }\n  };\n\n  itemsList.forEach(item => uncheck(item));\n  return itemsList;\n};\n\nexport const unselectAllNodes = (itemsList: ItemNode[]) => {\n  const unselect = (itemNode: ItemNode) => {\n    itemNode.selected = false;\n    if (itemNode.nodes?.length) {\n      itemNode.nodes.forEach(childNode => unselect(childNode));\n    }\n  };\n\n  itemsList.forEach(item => unselect(item));\n};\n\nexport const checkItems = (\n  itemsList: ItemNode[],\n  idsChecked: string[]\n): ItemNode[] => {\n  setAllLeafsCheckedFalse(itemsList);\n  idsChecked.forEach(id => {\n    const itemFind = findItemInArray(itemsList, id);\n    if (itemFind) {\n      itemFind.checked = true;\n    }\n  });\n\n  return itemsList;\n};\n\nexport const expandItems = (\n  itemsList: ItemNode[],\n  idsChecked: string[]\n): ItemNode[] => {\n  idsChecked.forEach(id => {\n    const itemFind = findItemInArray(itemsList, id);\n    if (itemFind) {\n      itemFind.expanded = true;\n    }\n  });\n\n  return itemsList;\n};\n\nexport const selectItems = (\n  itemsList: ItemNode[],\n  idsSelected: string[]\n): ItemNode[] => {\n  idsSelected.forEach(id => {\n    const itemFind = findItemInArray(itemsList, id);\n    if (itemFind) {\n      itemFind.selected = true;\n    }\n  });\n  return itemsList;\n};\n\nfunction searchInNode(item: ItemNode, id: string): string[] | null {\n  // If the current node is the searched node, we return an empty list (it has no parents in this branch)\n  if (item.id === id) {\n    return [];\n  }\n\n  // We traverse each child looking for the target node\n  if (item.nodes?.length) {\n    for (const node of item.nodes) {\n      const parents = searchInNode(node, id);\n      if (parents !== null) {\n        // If we find it, we include the current node at the beginning of the path and return\n        return [item.id, ...parents];\n      }\n    }\n  }\n  return null;\n}\n\nexport const searchParentsItems = (\n  items: ItemNode[],\n  ids: string[]\n): string[] | null => {\n  const parents: string[] = [];\n  for (const id of ids) {\n    for (const rootItem of items) {\n      const results = searchInNode(rootItem, id);\n      if (results !== null) {\n        results.forEach(result => {\n          parents.push(result);\n        });\n      }\n    }\n  }\n  return parents;\n};\n\n/**\n * Recursively searches for the first node with the active=true property\n * @param nodes Array of nodes to search through\n * @returns An object with caption, iconStart, and path to the first active node found, or null if none is found\n */\nexport const findFirstActiveNode = (nodes: ItemNode[]): ActiveNode | null => {\n  // Helper function that keeps track of the path during recursion\n  const findActiveWithPath = (\n    nodeList: ItemNode[],\n    currentPath: string[] = []\n  ): ActiveNode | null => {\n    // Base case: if nodes is undefined or empty\n    if (!nodeList || nodeList.length === 0) {\n      return null;\n    }\n\n    // Iterate through each node in the array\n    for (const node of nodeList) {\n      // Create a new path that includes the current node\n      const nodePath = [...currentPath, node.id];\n\n      // Check if the current node is active\n      if (node.active === true) {\n        return {\n          caption: node.name,\n          iconStart: node.iconStart,\n          path: nodePath\n        };\n      }\n\n      // If the node has children, search through them with the updated path\n      if (node.nodes && node.nodes.length > 0) {\n        const result = findActiveWithPath(node.nodes, nodePath);\n        // If we find an active node in this subtree, return it immediately\n        if (result !== null) {\n          return result;\n        }\n      }\n    }\n\n    // No active node found in any of the nodes\n    return null;\n  };\n\n  // Start the search with an empty path\n  return findActiveWithPath(nodes);\n};\n",":host {\n  display: grid;\n  block-size: 100%;\n  grid-template-rows: max-content 1fr max-content;\n}\n\n.header.has-active-item {\n  grid-area: header;\n}\n\n.section {\n  display: contents;\n}\n\n// header\n.header {\n  grid-template-areas:\n    \"view-mode view-mode\"\n    \"pattern-filter active-item\";\n  grid-template-columns: minmax(150px, 350px) max-content;\n  --field-group__column-gap: var(\n    --mer-spacing--md\n  ); // WA: OVerriding this variable is not a good approeach to reduce the gap.TODO: Think about the right solution.\n}\n.view-mode__toggle-checkboxes {\n  grid-area: view-mode;\n}\n.pattern-filter {\n  grid-area: pattern-filter;\n  max-inline-size: 350px;\n}\n\n.active-item {\n  grid-area: active-item;\n  background-color: var(--mer-surface__elevation--01);\n  border-radius: var(--mer-border__radius--sm);\n  padding: var(--mer-spacing--xs) var(--mer-spacing--sm);\n  display: flex;\n  align-items: center;\n  gap: var(--mer-spacing--xs);\n}\n.active-item {\n  &__icon-container {\n    display: contents;\n  }\n  &__icon {\n    pointer-events: none; // We do not want the icon to change the colors, since the clickable area is the caption only\n  }\n  &__link {\n    text-decoration: underline;\n    // TODO: There should be a class in Merucry to apply link styles\n    color: var(--mer-text__primary);\n    cursor: pointer;\n    &:hover {\n      color: var(--mer-text__primary--hover);\n    }\n    &:active {\n      color: var(--mer-text__primary--active);\n    }\n  }\n}\n\n.view-mode__toggle-checkboxes {\n  grid-template-columns: max-content max-content;\n}\n.field__items-view-type {\n  align-items: center;\n  .label {\n    margin-block-start: 0 !important; // WA to center label with radio-group\n  }\n}\n.field__toggle-checkboxes {\n  .label {\n    margin-block-start: 0 !important; // WA to center label with radio-group\n  }\n}\n\n.trees {\n  position: relative;\n}\n","import {\n  Component,\n  Element,\n  getAssetPath,\n  Host,\n  h,\n  Prop,\n  State,\n  Watch,\n  Method\n} from \"@stencil/core\";\n\nimport {\n  ChCheckboxCustomEvent,\n  TreeViewItemModel,\n  TreeViewItemModelExtended\n} from \"@genexus/chameleon-controls-library\";\n\nimport {\n  checkItems,\n  convertItemsListToTreeViewModel,\n  convertItemsNodeListToFlattenedTreeViewModel,\n  expandItems,\n  searchParentsItems,\n  selectItems,\n  unselectAllNodes,\n  findFirstActiveNode\n} from \"./helpers\";\nimport { getIconPath, MercuryBundles } from \"@genexus/mercury\";\nimport { Locale } from \"../../common/locale\";\nimport { ContextMenuInfo } from \"../../common/types\";\nimport { RadioGroupItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/radio-group/types\";\n\nimport { ACTIVE_ITEM_DEFAULT_ICON } from \"./helpers\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"chameleon/scrollbar\",\n  \"components/tooltip\",\n  \"components/tree-view\",\n  \"utils/form--full\",\n  \"utils/layout\",\n  \"utils/spacing\",\n  \"utils/typography\"\n];\n\nconst SYSTEM_SEARCH_ICON = getIconPath({\n  category: \"system\",\n  name: \"search\",\n  colorType: \"on-surface\"\n});\n\nconst VIEW_AS_TREE_ID: NodesVersionsViewType = \"tree\";\nconst VIEW_AS_LIST_ID: NodesVersionsViewType = \"list\";\n\nconst TOGGLE_CHECKBOXES_CHECKED_VALUE = \"on\";\n\n@Component({\n  tag: \"gx-ide-select-kb-items\",\n  styleUrl: \"select-kb-items.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/select-kb-items\"]\n})\nexport class GxIdeSelectKbItems {\n  #_componentLocale: any;\n\n  #checkedNodesIds: string[] = [];\n  #chShortcutsEl: HTMLChShortcutsElement;\n  #selectedNodesIds: string[] = [];\n  #shortcutsSrc = getAssetPath(\n    `./gx-ide-assets/select-kb-items/shortcuts.json`\n  );\n  #updatedModelList: ItemNode[] = [];\n\n  #viewItemsAsModel: RadioGroupItemModel[];\n\n  @Element() el: HTMLGxIdeSelectKbItemsElement;\n  #treeViewRenderEl: HTMLChTreeViewRenderElement;\n\n  /**\n   * Represents the active version node caption and icon (if any)\n   */\n  @State() activeItemNode: ActiveNode;\n\n  /**\n   * Represents the nodes list model\n   */\n  @State() nodeListFlattenedTreeModel: TreeViewItemModel[] = [];\n\n  /**\n   * To show a loader when the component is loading\n   */\n  @State() loading: boolean = true;\n\n  /**\n   * View type for the nodes.\n   */\n  @State() nodesVersionsViewType: NodesVersionsViewType = \"tree\";\n\n  /**\n   * Represents the nodes tree model\n   */\n  @State() nodeVersionsListTreeModel: TreeViewItemModel[] = [];\n\n  /**\n   * \"Search Pattern\" input value, used to filter the nodes tree/list.\n   */\n  @State() searchPatternValue: string = null;\n\n  /**\n   * It maps to the ch-tree-view-render \"toggleCheckboxes\" property.\n   */\n  @State() toggleCheckboxes: boolean = true;\n\n  /**\n   * Callback emitted when the user clicks on the \"Active item\"\n   */\n  @Prop() readonly activeItemCallback?: () => Promise<void>;\n\n  /**\n   * Callback emitted when the 'cancel' button is pressed\n   */\n  @Prop() readonly cancelCallback?: () => Promise<void>;\n\n  /**\n   * Defines which nodes of the component have checkboxes.\n   */\n  @Prop() readonly checkboxType: CheckboxType;\n\n  /**\n   * Define if a item node is expanded on click interaction. If false item-node will only be expanded on double click.\n   */\n  @Prop() readonly expandOnClick: boolean = true;\n\n  /**\n   * Callback emitted when the items checked items change\n   */\n  @Prop() readonly checkedChanged?: (checkedItems: string[]) => Promise<void>;\n\n  /**\n   * Callback emitted when the 'select' button is pressed\n   */\n  @Prop() readonly confirmCallback?: (checkedItems: string[]) => Promise<void>;\n\n  /**\n   * Set of additional actions (callbacks) to those already provided by default by the selector (cancelCallback and selectCallback)\n   */\n  @Prop() readonly dialogActions: DialogAction[] = [];\n\n  /**\n   * Callback emitted when the user right click on an item\n   */\n  @Prop() readonly itemContextMenuCallback: (\n    info: ContextMenuInfo\n  ) => Promise<void>;\n\n  /**\n   * Represents the itemLis list model\n   */\n  @Prop() readonly itemsList: ItemNode[] = [];\n\n  @Watch(\"itemsList\")\n  watchNodeListHandler(newItemsList: ItemNode[]) {\n    if (newItemsList.length > 0) {\n      this.loading = false;\n    }\n    this.#updateViews(newItemsList);\n\n    // Check and update activeItem\n    this.activeItemNode = findFirstActiveNode(newItemsList);\n  }\n\n  /**\n   * This define if the selection is unique or not\n   */\n  @Prop() readonly multiSelection?: boolean = false;\n\n  /**\n   * Callback emitted when the items selection change\n   */\n  @Prop() readonly selectionChanged?: (selectedItem: string[]) => Promise<void>;\n\n  async componentWillLoad() {\n    this.#_componentLocale = await Locale.getComponentStrings(this.el);\n    this.#viewItemsAsModel = [\n      { value: VIEW_AS_TREE_ID, caption: this.#_componentLocale.main.tree },\n      { value: VIEW_AS_LIST_ID, caption: \"List\" }\n    ];\n    this.watchNodeListHandler(this.itemsList);\n  }\n\n  /**\n   * Suspends or reactivates the shortcuts\n   */\n  @Method()\n  async suspendShortcuts(suspendShortcuts: boolean) {\n    if (suspendShortcuts) {\n      this.#chShortcutsEl.suspend = true;\n    } else {\n      this.#chShortcutsEl.suspend = false;\n    }\n  }\n\n  /**\n   * Allow to update the selected items\n   */\n  @Method()\n  async updateSelection(selectedItemsIds: string[]) {\n    // first clear selected\n    this.#treeViewRenderEl.updateItemsProperties(this.#selectedNodesIds, {\n      selected: false\n    });\n    // then select\n    this.#treeViewRenderEl.updateItemsProperties(selectedItemsIds, {\n      selected: true\n    });\n  }\n\n  #cancelHandler = () => {\n    if (this.cancelCallback) {\n      this.cancelCallback();\n    }\n  };\n\n  #checkedItemsChangeHandler = async (\n    e: CustomEvent<Map<string, TreeViewItemModelExtended>>\n  ) => {\n    const checkedNodesIds: string[] = [];\n    e.detail.forEach(node => {\n      node.item.checked && checkedNodesIds.push(node.item.id);\n    });\n    this.#checkedNodesIds = checkedNodesIds;\n    this.#updatedModelList = checkItems(this.itemsList, this.#checkedNodesIds);\n\n    if (this.checkedChanged) {\n      this.checkedChanged(this.#checkedNodesIds);\n    }\n  };\n\n  #confirmHandler = () => {\n    if (this.confirmCallback) {\n      this.confirmCallback(this.#checkedNodesIds);\n    }\n  };\n\n  #contextMenuHandler = async (\n    e: CustomEvent<{\n      id: string;\n      itemRef: HTMLChTreeViewItemElement;\n      metadata: string;\n      contextmenuEvent: PointerEvent;\n    }>\n  ) => {\n    if (this.itemContextMenuCallback) {\n      let info: ContextMenuInfo;\n      const isSelected = this.#selectedNodesIds.find(id => id === e.detail.id);\n      if (!this.#selectedNodesIds.length || !isSelected) {\n        await this.#treeViewRenderEl.updateItemsProperties(\n          this.#selectedNodesIds,\n          { selected: false }\n        );\n        await this.#treeViewRenderEl.updateItemsProperties([e.detail.id], {\n          selected: true\n        });\n        info = {\n          clientX: e.detail.contextmenuEvent.clientX,\n          clientY: e.detail.contextmenuEvent.clientY,\n          selection: [e.detail.id]\n        };\n      } else {\n        info = {\n          clientX: e.detail.contextmenuEvent.clientX,\n          clientY: e.detail.contextmenuEvent.clientY,\n          selection: this.#selectedNodesIds\n        };\n      }\n      this.itemContextMenuCallback(info);\n    }\n  };\n\n  #executeDialogAction = (\n    callback: (checkedNodesIds: string[], selectedNodesIds: string[]) => void\n  ) => {\n    return () => {\n      callback(this.#checkedNodesIds, this.#selectedNodesIds);\n    };\n  };\n\n  #patternSearchValueChangedHandler = (\n    event: CustomEvent<string> | InputEvent\n  ) => {\n    this.searchPatternValue = event.detail.toString();\n  };\n\n  #renderActionButtons = (): HTMLElement[] => {\n    return (\n      <div>\n        {this.dialogActions.map(action => {\n          return (\n            <button\n              class={\"button-tertiary\"}\n              part={`button button-${action.name}`}\n              onClick={this.#executeDialogAction(action.callback)}\n              disabled={this.loading}\n            >\n              {action.name}\n            </button>\n          );\n        })}\n      </div>\n    );\n  };\n\n  #renderFooter = (): HTMLElement => {\n    return (\n      <footer class=\"footer control-footer-with-border spacing-body-inline spacing-body-block-end control-footer-space-between\">\n        {this.#renderActionButtons()}\n        <div class=\"buttons-spacer \">\n          {this.cancelCallback && (\n            <button\n              class={\"button-secondary\"}\n              part={\"cancel-button\"}\n              onClick={this.#cancelHandler}\n            >\n              {this.#_componentLocale.footer.cancel}\n            </button>\n          )}\n          {this.confirmCallback && (\n            <button\n              class={\"button-primary\"}\n              part={\"confirm-button\"}\n              onClick={this.#confirmHandler}\n              disabled={this.loading}\n            >\n              {this.#_componentLocale.footer.select}\n            </button>\n          )}\n        </div>\n      </footer>\n    );\n  };\n\n  #selectedItemsChangeHandler = (\n    e: CustomEvent<TreeViewItemModelExtended[]>\n  ) => {\n    const selectedNodesIds: string[] = [];\n    unselectAllNodes(this.itemsList);\n    e.detail.forEach(node => {\n      selectedNodesIds.push(node.item.id);\n    });\n    this.#selectedNodesIds = selectedNodesIds;\n    if (this.selectionChanged) {\n      this.selectionChanged(this.#selectedNodesIds);\n    }\n\n    this.#updatedModelList = selectItems(this.itemsList, selectedNodesIds);\n  };\n\n  #toggleAndSelectNodesInModelItems = async (selectedItemsIds: string[]) => {\n    const nodesToToggle = searchParentsItems(this.itemsList, selectedItemsIds);\n    const newItemsSelected = selectItems(this.itemsList, selectedItemsIds);\n    const newItemsExpanded = expandItems(newItemsSelected, nodesToToggle);\n    this.#updateViews(newItemsExpanded);\n  };\n\n  #toggleCheckedNodesInModelItems = async (selectedItemsIds: string[]) => {\n    const nodesToToggle = searchParentsItems(this.itemsList, selectedItemsIds);\n    const newItemsExpanded = expandItems(this.itemsList, nodesToToggle);\n    this.#updateViews(newItemsExpanded);\n  };\n\n  #updateViews = (newItemsList: ItemNode[]) => {\n    this.nodeVersionsListTreeModel = convertItemsListToTreeViewModel(\n      newItemsList,\n      this.checkboxType\n    );\n\n    this.nodeListFlattenedTreeModel =\n      convertItemsNodeListToFlattenedTreeViewModel(\n        newItemsList,\n        this.checkboxType\n      );\n  };\n\n  #viewItemsAsChangedHandler = async (event: CustomEvent<string>) => {\n    const selectedViewType = event.detail as NodesVersionsViewType;\n    this.nodesVersionsViewType = selectedViewType;\n    if (this.nodesVersionsViewType === \"tree\") {\n      await this.#toggleAndSelectNodesInModelItems(this.#selectedNodesIds);\n      await this.#toggleCheckedNodesInModelItems(this.#checkedNodesIds);\n    }\n    this.#updateViews(this.#updatedModelList);\n  };\n\n  #toggleCheckboxesChangedHandler = (\n    event: ChCheckboxCustomEvent<string> | InputEvent\n  ) => {\n    this.toggleCheckboxes = event.detail === TOGGLE_CHECKBOXES_CHECKED_VALUE;\n  };\n\n  #scrollIntoActiveVersionNode = () => {\n    const doScrollIntoView =\n      this.#treeViewRenderEl && this.activeItemNode?.path;\n    if (doScrollIntoView) {\n      this.#treeViewRenderEl.scrollIntoVisible(this.activeItemNode.path);\n    }\n\n    if (this.activeItemCallback) {\n      this.activeItemCallback();\n    }\n  };\n\n  render() {\n    return (\n      <Host class=\"widget\">\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <ch-shortcuts\n          src={this.#shortcutsSrc}\n          ref={(el: HTMLChShortcutsElement) =>\n            (this.#chShortcutsEl = el as HTMLChShortcutsElement)\n          }\n        ></ch-shortcuts>\n        <section class=\"section\">\n          <header class=\"header control-header field-group spacing-body-block-start spacing-body-inline\">\n            <div class=\"field-group view-mode__toggle-checkboxes\">\n              <div class=\"field field-inline field__items-view-type\">\n                <label class=\"label\" htmlFor=\"view-mode\">\n                  Select view mode:\n                </label>\n                <ch-radio-group-render\n                  class=\"radio-group\"\n                  id=\"view-mode\"\n                  model={this.#viewItemsAsModel}\n                  onChange={this.#viewItemsAsChangedHandler}\n                  value={this.#viewItemsAsModel[0].value}\n                ></ch-radio-group-render>\n              </div>\n\n              {this.checkboxType !== \"none\" && (\n                <div class=\"field field-inline field__toggle-checkboxes\">\n                  <label class=\"label\" htmlFor=\"toggle-checkboxes\">\n                    Toggle Checkboxes\n                  </label>\n                  <ch-checkbox\n                    class=\"checkbox\"\n                    id=\"toggle-checkboxes\"\n                    checkedValue={TOGGLE_CHECKBOXES_CHECKED_VALUE}\n                    value={TOGGLE_CHECKBOXES_CHECKED_VALUE}\n                    onInput={this.#toggleCheckboxesChangedHandler}\n                  ></ch-checkbox>\n                </div>\n              )}\n            </div>\n\n            <ch-edit\n              class=\"input pattern-filter\"\n              placeholder={\n                this.#_componentLocale.header.searchPatternPlaceholder\n              }\n              startImgSrc={SYSTEM_SEARCH_ICON}\n              onInput={this.#patternSearchValueChangedHandler}\n            ></ch-edit>\n            {this.activeItemNode && (\n              <div class=\"active-item\">\n                <span\n                  class=\"active-item__icon-container\"\n                  // make this span the icon container, to prevent icon state changes when\n                  // interacting with div.active-item\n                >\n                  <ch-image\n                    class=\"icon-md active-item__icon\"\n                    src={\n                      this.activeItemNode.iconStart || ACTIVE_ITEM_DEFAULT_ICON\n                    }\n                    containerRef={null}\n                  ></ch-image>\n                </span>\n                {this.#_componentLocale.header.activeItem}\n                <button\n                  class=\"active-item__link\"\n                  onClick={this.#scrollIntoActiveVersionNode}\n                >\n                  {this.activeItemNode.caption}\n                </button>\n              </div>\n            )}\n          </header>\n\n          <div class=\"spacing-body-inline-start trees\">\n            {this.loading ? (\n              <gx-ide-loader\n                loaderTitle={this.#_componentLocale.loader.title}\n                show\n              ></gx-ide-loader>\n            ) : (\n              <ch-tree-view-render\n                class=\"tree-view\"\n                model={\n                  this.nodesVersionsViewType === \"tree\"\n                    ? this.nodeVersionsListTreeModel\n                    : this.nodeListFlattenedTreeModel\n                }\n                show-lines={\n                  this.nodesVersionsViewType === \"tree\" ? \"all\" : \"none\"\n                }\n                expandableButton={\n                  this.nodesVersionsViewType === \"tree\" ? \"decorative\" : \"no\"\n                }\n                onItemContextmenu={this.#contextMenuHandler}\n                onCheckedItemsChange={this.#checkedItemsChangeHandler}\n                onSelectedItemsChange={this.#selectedItemsChangeHandler}\n                expandOnClick={this.expandOnClick}\n                multiSelection={this.multiSelection}\n                filter={this.searchPatternValue}\n                filterType=\"caption\"\n                toggleCheckboxes={this.toggleCheckboxes}\n                ref={(el: HTMLChTreeViewRenderElement) => {\n                  this.#treeViewRenderEl = el as HTMLChTreeViewRenderElement;\n                }}\n              ></ch-tree-view-render>\n            )}\n          </div>\n          {(this.dialogActions.length > 0 ||\n            this.cancelCallback ||\n            this.confirmCallback) &&\n            this.#renderFooter()}\n        </section>\n      </Host>\n    );\n  }\n}\n\nexport type CheckboxType = \"none\" | \"all\" | \"leaf\" | \"custom\";\n\nexport type DialogAction = {\n  name: string;\n  callback: DialogActionCallback;\n};\n\nexport type DialogActionCallback = (...args: any[]) => void;\n\nexport type ItemCommon = {\n  icon: string;\n  expanded: boolean;\n};\n\nexport type ItemNode = {\n  active?: boolean;\n  checkbox?: boolean;\n  checked?: boolean;\n  expanded?: boolean;\n  iconStart?: string;\n  iconEnd?: string;\n  id: string;\n  name: string;\n  nodes?: ItemNode[];\n  parts?: string;\n  selected?: boolean;\n  type: ItemType;\n};\n\nexport type ActiveNode = {\n  caption: string;\n  iconStart?: string;\n  path: string[]; // for using the scrollIntoVisible method of the tree-view-render\n};\n\nexport type ItemType = {\n  id: string;\n  name: string;\n};\n\ntype NodesVersionsViewType = \"tree\" | \"list\";\n"],"mappings":"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"}

package/dist/genexus-ide-ui/p-2e90a13a.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["directorySelectorCss","GxIdeDirectorySelector","this","defaultIcon","evaluateLabelPosition","label","labelPosition","centerLabel","btnSelectClickHandler","selectDirectoryCallback","then","result","value","valueChangedHandler","e","detail","buttonSelectMouseEnterHandler","icon","buttonSelectMouseLeaveHandler","buttonSelectLabel","componentWillLoad","render","h","Host","center","class","part","onValueChanged","onClick","accessibilityLabels","type","disabled","onMouseEnter","onMouseLeave"],"sources":["src/components/_helpers/directory-selector/directory-selector.scss?tag=gx-ide-directory-selector&encapsulation=shadow","src/components/_helpers/directory-selector/directory-selector.tsx"],"sourcesContent":["@import \"../../../../node_modules/@genexus/gemini/dist/collection/globals/mixins.scss\";\n\n:host {\n  display: flex;\n  flex-direction: column;\n\n  .container {\n    display: flex;\n    flex-direction: column;\n    gap: 30px;\n  }\n  /*label*/\n  label {\n    font-size: 14px;\n  }\n  /*wrapper*/\n  .wrapper {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--gx-ide-grid-column-gap);\n  }\n}\n/*label position*/\n:host([label-position=\"start\"]) {\n  flex-direction: row;\n  .wrapper {\n    flex: 1;\n  }\n}\n","/* STENCIL IMPORTS */\nimport { Component, Host, h, Prop, State } from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\n/* CUSTOM IMPORTS */\n\n@Component({\n  tag: \"gx-ide-directory-selector\",\n  styleUrl: \"directory-selector.scss\",\n  shadow: true\n})\nexport class GxIdeDirectorySelector {\n  /*\nINDEX:\n1.OWN PROPERTIES \n2.REFERENCE TO ELEMENTS\n3.STATE() VARIABLES\n4.PUBLIC PROPERTY API | WATCH'S\n5.EVENTS (EMIT)\n6.METHODS\n7.LISTENERS\n8.PUBLIC METHODS API\n9.LOCAL METHODS\n10.RENDER() FUNCTION\n*/\n\n  // 1.OWN PROPERTIES | WATCH'S //\n\n  private defaultIcon = \"objects/folder\";\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  // 3.STATE() VARIABLES //\n\n  @State() icon = this.defaultIcon;\n\n  // 4.PUBLIC PROPERTY API | WATCH'S //\n\n  /**\n   *  This property provides the user a way to define custom aria-label descriptions.\n   */\n  @Prop() readonly accessibilityLabels: DirectorySelectorLabels = {\n    buttonSelectLabel: \"displays the directory selector\"\n  };\n\n  /**\n   * The label associated with the input (optional)\n   */\n  @Prop() readonly label?: string;\n\n  /**\n   * The label position\n   */\n  @Prop({ reflect: true }) readonly labelPosition?: LabelPosition = \"start\";\n\n  /**\n   * Centers the label\n   */\n  @Prop({ mutable: true }) centerLabel = true;\n\n  /**\n   * The label width\n   */\n  @Prop() readonly labelWidth: string;\n\n  /**\n   * Callback that will be called when the user presses the action button. Returns the new value (directory path) assigned to the component.\n   */\n  @Prop() readonly selectDirectoryCallback: () => Promise<string>;\n\n  /**\n   * Value currently assigned.\n   */\n  @Prop({ mutable: true }) value: string;\n\n  // 5.EVENTS (EMIT) //\n\n  // 6.METHODS //\n\n  componentWillLoad() {\n    this.evaluateLabelPosition();\n  }\n\n  private evaluateLabelPosition = (): void => {\n    if (this.label && this.labelPosition === \"above\") {\n      this.centerLabel = false;\n    }\n  };\n\n  // 7.LISTENERS //\n\n  // 8.PUBLIC METHODS API //\n\n  // 9.LOCAL METHODS //\n\n  private btnSelectClickHandler = () => {\n    this.selectDirectoryCallback &&\n      this.selectDirectoryCallback().then(result => {\n        if (result) {\n          this.value = result;\n        } else {\n          // to be defined\n        }\n      });\n  };\n\n  private valueChangedHandler = (e: CustomEvent<string>) => {\n    this.value = e.detail;\n  };\n\n  private buttonSelectMouseEnterHandler = (): void => {\n    this.icon = \"objects/folder-open\";\n  };\n\n  private buttonSelectMouseLeaveHandler = (): void => {\n    this.icon = this.defaultIcon;\n  };\n\n  // 10.RENDER() FUNCTION //\n\n  render() {\n    return (\n      <Host>\n        {this.label ? (\n          <gxg-label\n            labelPosition={this.labelPosition}\n            center={this.centerLabel}\n          >\n            {this.label}\n          </gxg-label>\n        ) : null}\n        <div class=\"wrapper\">\n          <gxg-form-text\n            part=\"input\"\n            value={this.value}\n            onValueChanged={this.valueChangedHandler}\n          ></gxg-form-text>\n          <gxg-button\n            part=\"button-select\"\n            onClick={this.btnSelectClickHandler}\n            aria-label={this.accessibilityLabels?.buttonSelectLabel}\n            type=\"secondary-icon-only\"\n            icon={this.icon}\n            disabled={!this.selectDirectoryCallback}\n            onMouseEnter={this.buttonSelectMouseEnterHandler}\n            onMouseLeave={this.buttonSelectMouseLeaveHandler}\n          ></gxg-button>\n        </div>\n      </Host>\n    );\n  }\n}\n\nexport type DirectorySelectorLabels = {\n  buttonSelectLabel: string;\n};\nexport type LabelPosition = \"start\" | \"above\";\n"],"mappings":";;AAAA,MAAMA,IAAuB;;MCUhBC,IAAsB;;;;;;;;;;;;;;;;;QAiBzBC,KAAAC,cAAc;IAuDdD,KAAAE,wBAAwB;MAC9B,IAAIF,KAAKG,SAASH,KAAKI,kBAAkB,SAAS;QAChDJ,KAAKK,cAAc;;;;;;QAUfL,KAAAM,wBAAwB;MAC9BN,KAAKO,2BACHP,KAAKO,0BAA0BC,MAAKC;QAClC,IAAIA,GAAQ;UACVT,KAAKU,QAAQD;;;AAIf;IAGET,KAAAW,sBAAuBC;MAC7BZ,KAAKU,QAAQE,EAAEC;AAAM;IAGfb,KAAAc,gCAAgC;MACtCd,KAAKe,OAAO;AAAqB;IAG3Bf,KAAAgB,gCAAgC;MACtChB,KAAKe,OAAOf,KAAKC;AAAW;gBAjFdD,KAAKC;+BAO2C;MAC9DgB,mBAAmB;;;yBAW6C;uBAK3B;;;;;;;EAqBvC,iBAAAC;IACElB,KAAKE;;;EAwCP,MAAAiB;IACE,OACEC,EAACC,GAAI,MACFrB,KAAKG,QACJiB,EAAA;MACEhB,eAAeJ,KAAKI;MACpBkB,QAAQtB,KAAKK;OAEZL,KAAKG,SAEN,MACJiB,EAAA;MAAKG,OAAM;OACTH,EAAA;MACEI,MAAK;MACLd,OAAOV,KAAKU;MACZe,gBAAgBzB,KAAKW;QAEvBS,EAAA;MACEI,MAAK;MACLE,SAAS1B,KAAKM;MAAqB,cACvBN,KAAK2B,qBAAqBV;MACtCW,MAAK;MACLb,MAAMf,KAAKe;MACXc,WAAW7B,KAAKO;MAChBuB,cAAc9B,KAAKc;MACnBiB,cAAc/B,KAAKgB"}