@genexus/genexus-ide-ui 1.0.1 → 1.0.2

package/dist/components/helpers.js

@@ -18,7 +18,9 @@ const daysFromToday = (date) => {
     const daysDifference = timeDifference / (1000 * 3600 * 24);
     return Math.floor(daysDifference);
 };
-/* --- Date Functions ---*/
+// - - - - - - - - - - - -
+// Date Functions
+// - - - - - - - - - - - -
 const isToday = (date) => {
     const today = new Date();
     if (today.toDateString() === date.toDateString()) {
@@ -108,7 +110,9 @@ const formatDate = (date, type = "date-time") => {
     }
     return formattedDate;
 };
-/* --- End of Date Functions ---*/
+// - - - - - - - - - - - -
+// /End of Date Functions
+// - - - - - - - - - - - -
 /* Count the total tree nodes (by default it does not count the first level nodes)*/
 const countTreeItems = (treeModel, children = false) => {
     let totalNodes = 0;
@@ -137,9 +141,16 @@ const setInitialComboValue = (options) => {
 const escapeRegExp = (str) => {
     return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 };
+/**
+ * @description this function highlights the character(s) that match(es) the filter value.
+ * hiChar comes from (hi)light (Char)acters
+ * @param text the string to find the filter value on
+ * @param filterValue the filter value
+ * @returns a span element
+ */
 const hiChar = function (text, filterValue) {
+    // console.log(text, filterValue);
     if (text && filterValue) {
-        /* this function highlights the character(s) that match(es) the filter value. (hi)light (Char)acters */
         const escapedFilterValue = escapeRegExp(filterValue);
         const re = new RegExp(escapedFilterValue, "gi");
         return (h("span", { innerHTML: text.replace(re, '<span class="hiChar">$&</span>') }));
@@ -153,7 +164,24 @@ const closeOnOutsideClickHandler = (eventInfo, ref) => {
         return true;
     }
 };
+const formSubmitValidation = (result, ref) => {
+    var _a;
+    (_a = result.fieldErrors) === null || _a === void 0 ? void 0 : _a.forEach(element => {
+        const key = element.key;
+        const message = element.message;
+        const hasError = element.hasError;
+        const reference = ref[`${key}El`];
+        if (reference && hasError && message.trim()) {
+            reference.validationStatus = "error";
+            reference.validationMessage = message;
+        }
+        else if (reference && !hasError) {
+            reference.validationStatus = "indeterminate";
+            reference.validationMessage = null;
+        }
+    });
+};
 
-export { closeOnOutsideClickHandler as a, countTreeItems as c, formatDate as f, hiChar as h, setInitialComboValue as s };
+export { formatDate as a, closeOnOutsideClickHandler as b, countTreeItems as c, formSubmitValidation as f, hiChar as h, setInitialComboValue as s };
 
 //# sourceMappingURL=helpers.js.map

package/dist/components/helpers.js.map

@@ -1 +1 @@
-{"file":"helpers.js","mappings":"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","names":[],"sources":["src/common/helpers.tsx"],"sourcesContent":["/* STENCIL IMPORTS */\nimport { h } from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\nimport { TreeViewItemModel } from \"@genexus/chameleon-controls-library\";\n/* CUSTOM IMPORTS */\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/* --- Date Functions ---*/\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/* --- End of Date Functions ---*/\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\nexport const hiChar = function (text: string, filterValue: string) {\n  if (text && filterValue) {\n    /* this function highlights the character(s) that match(es) the filter value. (hi)light (Char)acters */\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"],"version":3}
+{"file":"helpers.js","mappings":";;AAAA;AASA,MAAM,UAAU,GAAG;IACjB,QAAQ;IACR,QAAQ;IACR,SAAS;IACT,WAAW;IACX,UAAU;IACV,QAAQ;IACR,UAAU;CACX,CAAC;AA8EF,MAAM,aAAa,GAAG,CAAC,IAAU;IAC/B,MAAM,KAAK,GAAG,IAAI,IAAI,EAAE,CAAC;;IAEzB,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;;IAExD,MAAM,cAAc,GAAG,cAAc,IAAI,IAAI,GAAG,IAAI,GAAG,EAAE,CAAC,CAAC;IAC3D,OAAO,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;AACpC,CAAC,CAAC;AAEF;AACA;AACA;AAEA,MAAM,OAAO,GAAG,CAAC,IAAU;IACzB,MAAM,KAAK,GAAG,IAAI,IAAI,EAAE,CAAC;IACzB,IAAI,KAAK,CAAC,YAAY,EAAE,KAAK,IAAI,CAAC,YAAY,EAAE,EAAE;QAChD,OAAO,IAAI,CAAC;KACb;IACD,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,IAAU;IAC7B,MAAM,SAAS,GAAG,IAAI,IAAI,EAAE,CAAC;IAC7B,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC;IAC3C,IAAI,SAAS,CAAC,YAAY,EAAE,KAAK,IAAI,CAAC,YAAY,EAAE,EAAE;QACpD,OAAO,IAAI,CAAC;KACb;IACD,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;MAEW,UAAU,GAAG,CACxB,IAAU,EACV,OAAuB,WAAW;;IAElC,IAAI,aAAa,CAAC;;;IAGlB,IAAI,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,IAAI,EAAE;QACvC,OAAO,EAAE,CAAC;KACX;;IAED,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,EAAE,KAAK,IAAI,CAAC,OAAO,EAAE,CAAC;IACtD,IAAI,CAAC,WAAW,EAAE;QAChB,OAAO,cAAc,CAAC;KACvB;IACD,IAAI,MAAM,GAAG,OAAO,CAAC;IACrB,MAAM,IAAI,GAAG,MAAA,QAAQ;SAClB,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;SAC/B,YAAY,CAAC,MAAM,CAAC,0CACnB,OAAO,EAAE,CAAC;IACd,IAAI,IAAI,KAAK,IAAI,EAAE;QACjB,MAAM,GAAG,OAAO,CAAC;KAClB;IACD,aAAa,GAAG,IAAI,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAChD,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;IAChC,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IAC3D,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IACpD,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IACvD,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IAC3D,MAAM,IAAI,GAAG,GAAG,KAAK,IAAI,OAAO,EAAE,CAAC;IACnC,IAAI,IAAI,KAAK,WAAW,EAAE;QACxB,aAAa,IAAI,MAAM,IAAI,CAAC,kBAAkB,EAAE,EAAE,CAAC;KACpD;SAAM,IAAI,IAAI,KAAK,iBAAiB,EAAE;;QAErC,IAAI,MAAM,KAAK,OAAO,EAAE;YACtB,aAAa,GAAG,GAAG,IAAI,IAAI,KAAK,IAAI,GAAG,IAAI,IAAI,EAAE,CAAC;SACnD;aAAM;YACL,aAAa,GAAG,GAAG,KAAK,IAAI,GAAG,IAAI,IAAI,IAAI,IAAI,EAAE,CAAC;SACnD;KACF;SAAoB;QACnB,MAAM,mBAAmB,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;QAChD,MAAM,KAAK,GAAG,IAAI,IAAI,EAAE,CAAC;QACzB,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC;QACxC,IAAI,OAAO,CAAC,IAAI,CAAC,EAAE;YACjB,OAAO,SAAS,IAAI,EAAE,CAAC;SACxB;aAAM,IAAI,WAAW,CAAC,IAAI,CAAC,EAAE;YAC5B,OAAO,aAAa,IAAI,EAAE,CAAC;SAC5B;aAAM,IAAI,mBAAmB,IAAI,CAAC,EAAE;;YAEnC,MAAM,GAAG,GAAG,UAAU,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;YACtC,OAAO,GAAG,GAAG,IAAI,IAAI,EAAE,CAAC;SACzB;aAAM,IAAI,WAAW,KAAK,IAAI,EAAE;;YAE/B,IAAI,MAAM,KAAK,OAAO,EAAE;gBACtB,aAAa,GAAG,GAAG,GAAG,OAAO,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE;oBACxD,KAAK,EAAE,MAAM;iBACd,CAAC,IAAI,IAAI,EAAE,CAAC;aACd;iBAAM;gBACL,aAAa,GAAG,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE;oBAC9C,KAAK,EAAE,MAAM;iBACd,CAAC,IAAI,GAAG,IAAI,IAAI,EAAE,CAAC;aACrB;SACF;aAAM;;YAEL,aAAa,GAAG,UAAU,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC;SACrD;KACF;IACD,OAAO,aAAa,CAAC;AACvB,EAAE;AAQF;AACA;AACA;AAEA;MACa,cAAc,GAAG,CAC5B,SAA8B,EAC9B,QAAQ,GAAG,KAAK;IAEhB,IAAI,UAAU,GAAG,CAAC,CAAC;IACnB,SAAS,CAAC,OAAO,CAAC,IAAI;QACpB,QAAQ,IAAI,UAAU,EAAE,CAAC;QACzB,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,UAAU,IAAI,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;SAChD;KACF,CAAC,CAAC;IACH,OAAO,UAAU,CAAC;AACpB,EAAE;AAEF;;;;;MAKa,oBAAoB,GAAG,CAAC,OAAmB;IACtD,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,QAAQ,CAAC,CAAC;IACzD,IAAI,QAAQ,EAAE;QACZ,OAAO,QAAQ,CAAC,KAAK,IAAI,QAAQ,CAAC,EAAE,CAAC;KACtC;SAAM;QACL,OAAO,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;KAC1C;AACH,EAAE;AAEK,MAAM,YAAY,GAAG,CAAC,GAAW;IACtC,OAAO,GAAG,CAAC,OAAO,CAAC,qBAAqB,EAAE,MAAM,CAAC,CAAC;AACpD,CAAC,CAAC;AAEF;;;;;;;MAOa,MAAM,GAAG,UAAU,IAAY,EAAE,WAAmB;;IAE/D,IAAI,IAAI,IAAI,WAAW,EAAE;QACvB,MAAM,kBAAkB,GAAG,YAAY,CAAC,WAAW,CAAC,CAAC;QACrD,MAAM,EAAE,GAAG,IAAI,MAAM,CAAC,kBAAkB,EAAE,IAAI,CAAC,CAAC;QAChD,QACE,YACE,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,EAAE,EAAE,gCAAgC,CAAC,GACvD,EACR;KACH;SAAM;QACL,OAAO,IAAI,CAAC;KACb;AACH,EAAE;MAEW,0BAA0B,GAAG,CACxC,SAAuB,EACvB,GAAgB;IAEhB,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;QAC3C,OAAO,IAAI,CAAC;KACb;AACH,EAAE;MAEW,oBAAoB,GAAG,CAClC,MAA+C,EAC/C,GAAQ;;IAER,MAAA,MAAM,CAAC,WAAW,0CAAE,OAAO,CAAC,OAAO;QACjC,MAAM,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC;QACxB,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC;QAChC,MAAM,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC;QAElC,MAAM,SAAS,GAAkB,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC;QACjD,IAAI,SAAS,IAAI,QAAQ,IAAI,OAAO,CAAC,IAAI,EAAE,EAAE;YAC3C,SAAS,CAAC,gBAAgB,GAAG,OAAO,CAAC;YACrC,SAAS,CAAC,iBAAiB,GAAG,OAAO,CAAC;SACvC;aAAM,IAAI,SAAS,IAAI,CAAC,QAAQ,EAAE;YACjC,SAAS,CAAC,gBAAgB,GAAG,eAAe,CAAC;YAC7C,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC;SACpC;KACF,CAAC,CAAC;AACL;;;;","names":[],"sources":["src/common/helpers.tsx"],"sourcesContent":["/* STENCIL IMPORTS */\nimport { h } from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\nimport { TreeViewItemModel } from \"@genexus/chameleon-controls-library\";\nimport { FormComponent } from \"@genexus/gemini/dist/types/common/interfaces\";\n/* CUSTOM IMPORTS */\nimport { GxOption } from \"./types\";\nimport { FormSubmitResult, ConnectionResultData } from \"../common/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  // console.log(text, filterValue);\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 formSubmitValidation = (\n  result: FormSubmitResult | ConnectionResultData,\n  ref: any\n) => {\n  result.fieldErrors?.forEach(element => {\n    const key = element.key;\n    const message = element.message;\n    const hasError = element.hasError;\n\n    const reference: FormComponent = ref[`${key}El`];\n    if (reference && hasError && message.trim()) {\n      reference.validationStatus = \"error\";\n      reference.validationMessage = message;\n    } else if (reference && !hasError) {\n      reference.validationStatus = \"indeterminate\";\n      reference.validationMessage = null;\n    }\n  });\n};\n"],"version":3}

package/dist/components/ide-loader.js

@@ -1,87 +1,67 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
-const ideLoaderCss = ":host{display:block}ch-window::part(mask){overflow:hidden}ch-window::part(main){height:100%}ch-window::part(window){width:100%;height:100%}.loader__wrapper{opacity:0;transition:var(--show-transition) opacity;width:100%;height:100%;display:flex;background-color:var(--gxg-ide-loader-wrapper__background-color--from);backdrop-filter:var(--gxg-ide-loader-wrapper__backdrop-filter);padding:var(--gxg-ide-loader-wrapper__padding);flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;color:var(--gxg-ide-loader-wrapper__color)}.loader__wrapper--visible{opacity:1}.loader__spinner{border:var(--gxg-ide-loader-spinner__border);border-top:var(--gxg-ide-loader-spinner__border-top);border-radius:50%;-webkit-animation:spinner 0.6s infinite linear;animation:spinner 0.6s infinite linear;width:var(--gxg-ide-loader-spinner__width);height:var(--gxg-ide-loader-spinner__width);flex-shrink:0}.loader__content-wrapper{display:flex;flex-direction:column;margin-block-start:var(--gxg-ide-loader-content-wrapper__mbs);gap:var(--gxg-ide-loader-content-wrapper__gap);max-width:var(--gxg-ide-loader-content-wrapper__max-width)}.loader__content-wrapper--hidden{display:none}@keyframes wrapper{from{background-color:var(--gxg-ide-loader-wrapper__background-color--from)}to{background-color:var(--gxg-ide-loader-wrapper__background-color--to)}}@-webkit-keyframes spinner{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(359deg)}}@keyframes spinner{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}:host([display-border]) .loader__wrapper{border:1px solid var(--mer-color__elevation--02)}";
+const ideLoaderCss = ".loader__wrapper{position:absolute;border:none;opacity:0;transition:var(--show-transition) opacity;inline-size:100%;block-size:100%;display:flex;background-color:var(--gxg-ide-loader-wrapper__background-color--from);backdrop-filter:var(--gxg-ide-loader-wrapper__backdrop-filter);padding:var(--gxg-ide-loader-wrapper__padding);flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;color:var(--gxg-ide-loader-wrapper__color)}.loader__wrapper--visible{opacity:1}.loader__spinner{border:var(--gxg-ide-loader-spinner__border);border-block-start:var(--gxg-ide-loader-spinner__border-top);border-radius:50%;animation:spinner 0.6s infinite linear;inline-size:var(--gxg-ide-loader-spinner__width);block-size:var(--gxg-ide-loader-spinner__width);flex-shrink:0;opacity:1}.loader__content-wrapper{display:flex;text-align:center;flex-direction:column;margin-block-start:var(--gxg-ide-loader-content-wrapper__mbs);gap:var(--mer-spacing--xs);max-block-size:var(--gxg-ide-loader-content-wrapper__max-width);animation:fadeIn var(--mer-timing--fast) forwards;opacity:1}.loader__content-wrapper--hidden{display:none}@keyframes wrapper{0%{background-color:var(--gxg-ide-loader-wrapper__background-color--from)}100%{background-color:var(--gxg-ide-loader-wrapper__background-color--to)}}@keyframes spinner{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}:host([display-border]) .loader__wrapper{border:1px solid var(--mer-color__elevation--02)}@keyframes fadeIn{0%{opacity:0}}";
 
+var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _IdeLoader_timeoutReference, _IdeLoader_cancelProcess, _IdeLoader_renderCancelButton, _IdeLoader_renderDescription, _IdeLoader_renderTitle;
+const CSS_BUNDLES = [
+    "resets/box-sizing",
+    "components/button",
+    "utils/typography"
+];
 const IdeLoader = /*@__PURE__*/ proxyCustomElement(class IdeLoader extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
         this.loaderFinished = createEvent(this, "loaderFinished", 7);
-        // 6.COMPONENT LIFECYCLE EVENTS //
-        // 7.LISTENERS //
-        // 8.PUBLIC METHODS API //
-        // 9.LOCAL METHODS //
-        this.renderTitle = () => {
-            return this.loaderTitle ? (h("gxg-title", { class: "loader__title", type: "title-04", alignment: "center" }, this.loaderTitle)) : null;
-        };
-        this.renderDescription = () => {
-            return this.description ? (h("gxg-text", { class: "loader__description", type: "text-regular", textAlign: "center" }, this.description)) : null;
-        };
-        this.renderCancelButton = () => {
-            return this.cancelLabel ? (h("gxg-button", { class: {
-                    [`loader__cancel-button`]: true
-                }, type: "secondary-text-icon", onClick: this.cancelProcess }, this.cancelLabel)) : null;
-        };
-        this.cancelProcess = () => {
+        _IdeLoader_timeoutReference.set(this, void 0);
+        _IdeLoader_cancelProcess.set(this, () => {
             if (this.cancelCallback) {
                 this.cancelCallback();
             }
-            clearTimeout(this.timeoutReference);
+            clearTimeout(__classPrivateFieldGet(this, _IdeLoader_timeoutReference, "f"));
             this.show = false;
-        };
-        this.showWindow = false;
-        this.showWrapper = false;
-        this.loaderTitle = undefined;
-        this.description = undefined;
-        this.cancelLabel = undefined;
+        });
+        _IdeLoader_renderCancelButton.set(this, () => this.cancelLabel && (h("div", null, h("button", { class: "button-secondary", type: "button", onClick: __classPrivateFieldGet(this, _IdeLoader_cancelProcess, "f") }, this.cancelLabel))));
+        _IdeLoader_renderDescription.set(this, () => this.description && h("p", { class: "text-body-italic-s" }, this.description));
+        _IdeLoader_renderTitle.set(this, () => this.loaderTitle && h("p", { class: "text-body-regular-m" }, this.loaderTitle));
+        this.showWrapper = true;
+        this.abortTime = 5 * 60 * 1000;
         this.cancelCallback = undefined;
-        this.show = false;
-        this.abortTime = 300000;
+        this.cancelLabel = undefined;
+        this.description = undefined;
         this.displayBorder = false;
-        this.borderRadius = "0";
-        this.container = undefined;
-    }
-    showHandler(show) {
-        if (show) {
-            this.showWindow = true;
-            this.showWrapper = true;
-        }
-        else {
-            this.showWindow = false;
-            this.showWrapper = false;
-            this.loaderFinished.emit();
-        }
+        this.loaderTitle = undefined;
+        this.show = false;
     }
-    //  10.RENDER() FUNCTION //
     render() {
-        return (h(Host, null, h("ch-window", { closeOnEscape: false, closeOnOutsideClick: false, container: this.container, hidden: !this.showWindow, modal: false, showFooter: false, showHeader: false }, h("div", { class: {
+        return (h(Host, null, h("ch-theme", { model: CSS_BUNDLES }), this.show && (h("div", { class: {
                 [`loader__wrapper`]: true,
                 "loader__wrapper--visible": this.showWrapper
-            }, style: { borderRadius: this.borderRadius }, part: "loader-wrapper" }, h("div", { class: "loader__spinner" }), h("div", { class: {
+            }, part: "loader-wrapper", popover: "" }, h("div", { class: "loader__spinner" }), h("div", { class: {
                 "loader__content-wrapper": true,
                 "loader__content-wrapper--hidden": !this.description && !this.loaderTitle && !this.cancelLabel
-            } }, this.renderTitle(), this.renderDescription(), this.renderCancelButton())))));
+            } }, __classPrivateFieldGet(this, _IdeLoader_renderTitle, "f").call(this), __classPrivateFieldGet(this, _IdeLoader_renderDescription, "f").call(this), __classPrivateFieldGet(this, _IdeLoader_renderCancelButton, "f").call(this))))));
     }
-    static get watchers() { return {
-        "show": ["showHandler"]
-    }; }
     static get style() { return ideLoaderCss; }
 }, [1, "gx-ide-loader", {
-        "loaderTitle": [1, "loader-title"],
-        "description": [1],
-        "cancelLabel": [1, "cancel-label"],
-        "cancelCallback": [16],
-        "show": [1028],
         "abortTime": [2, "abort-time"],
+        "cancelCallback": [16],
+        "cancelLabel": [1, "cancel-label"],
+        "description": [1],
         "displayBorder": [516, "display-border"],
-        "borderRadius": [513, "border-radius"],
-        "container": [16],
-        "showWindow": [32],
+        "loaderTitle": [1, "loader-title"],
+        "show": [1028],
         "showWrapper": [32]
-    }, undefined, {
-        "show": ["showHandler"]
     }]);
+_IdeLoader_timeoutReference = new WeakMap(), _IdeLoader_cancelProcess = new WeakMap(), _IdeLoader_renderCancelButton = new WeakMap(), _IdeLoader_renderDescription = new WeakMap(), _IdeLoader_renderTitle = new WeakMap();
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;

package/dist/components/ide-loader.js.map

@@ -1 +1 @@
-{"file":"ide-loader.js","mappings":";;AAAA,MAAM,YAAY,GAAG,olDAAolD;;MCgB5lD,SAAS;;;;;;;;;;QA6FZ,gBAAW,GAAG;YACpB,OAAO,IAAI,CAAC,WAAW,IACrB,iBAAW,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,UAAU,EAAC,SAAS,EAAC,QAAQ,IAChE,IAAI,CAAC,WAAW,CACP,IACV,IAAI,CAAC;SACV,CAAC;QAEM,sBAAiB,GAAG;YAC1B,OAAO,IAAI,CAAC,WAAW,IACrB,gBACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,cAAc,EACnB,SAAS,EAAC,QAAQ,IAEjB,IAAI,CAAC,WAAW,CACR,IACT,IAAI,CAAC;SACV,CAAC;QAEM,uBAAkB,GAAG;YAC3B,OAAO,IAAI,CAAC,WAAW,IACrB,kBACE,KAAK,EAAE;oBACL,CAAC,uBAAuB,GAAG,IAAI;iBAChC,EACD,IAAI,EAAC,qBAAqB,EAC1B,OAAO,EAAE,IAAI,CAAC,aAAa,IAE1B,IAAI,CAAC,WAAW,CACN,IACX,IAAI,CAAC;SACV,CAAC;QAEM,kBAAa,GAAG;YACtB,IAAI,IAAI,CAAC,cAAc,EAAE;gBACvB,IAAI,CAAC,cAAc,EAAE,CAAC;aACvB;YACD,YAAY,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;YACpC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;SACnB,CAAC;0BAzHoB,KAAK;2BAKJ,KAAK;;;;;oBA2BI,KAAK;yBAKA,MAAM;6BAKgB,KAAK;4BAKP,GAAG;;;IAG5D,WAAW,CAAC,IAAa;QACvB,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;SACzB;aAAM;YACL,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;YACxB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;YACzB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;SAC5B;KACF;;IAkED,MAAM;QACJ,QACE,EAAC,IAAI,QACH,iBACE,aAAa,EAAE,KAAK,EACpB,mBAAmB,EAAE,KAAK,EAC1B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,MAAM,EAAE,CAAC,IAAI,CAAC,UAAU,EACxB,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,KAAK,EACjB,UAAU,EAAE,KAAK,IAEjB,WACE,KAAK,EAAE;gBACL,CAAC,iBAAiB,GAAG,IAAI;gBACzB,0BAA0B,EAAE,IAAI,CAAC,WAAW;aAC7C,EACD,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE,EAC1C,IAAI,EAAC,gBAAgB,IAErB,WAAK,KAAK,EAAC,iBAAiB,GAAO,EACnC,WACE,KAAK,EAAE;gBACL,yBAAyB,EAAE,IAAI;gBAC/B,iCAAiC,EAC/B,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,WAAW;aAC9D,IAEA,IAAI,CAAC,WAAW,EAAE,EAClB,IAAI,CAAC,iBAAiB,EAAE,EACxB,IAAI,CAAC,kBAAkB,EAAE,CACtB,CACF,CACI,CACP,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/_helpers/ide-loader/ide-loader.scss?tag=gx-ide-loader&encapsulation=shadow","src/components/_helpers/ide-loader/ide-loader.tsx"],"sourcesContent":[":host {\n  display: block;\n}\nch-window::part(mask) {\n  overflow: hidden;\n}\nch-window::part(main) {\n  height: 100%;\n}\nch-window::part(window) {\n  width: 100%;\n  height: 100%;\n}\n.loader {\n  &__wrapper {\n    opacity: 0;\n    transition: var(--show-transition) opacity;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    background-color: var(--gxg-ide-loader-wrapper__background-color--from);\n    backdrop-filter: var(--gxg-ide-loader-wrapper__backdrop-filter);\n    padding: var(--gxg-ide-loader-wrapper__padding);\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    // -webkit-animation: wrapper 0.5s infinite alternate;\n    // animation: wrapper 0.5s infinite alternate;\n    color: var(--gxg-ide-loader-wrapper__color);\n\n    &--visible {\n      opacity: 1;\n    }\n  }\n  &__spinner {\n    border: var(--gxg-ide-loader-spinner__border);\n    border-top: var(--gxg-ide-loader-spinner__border-top);\n    border-radius: 50%;\n    -webkit-animation: spinner 0.6s infinite linear;\n    animation: spinner 0.6s infinite linear;\n    width: var(--gxg-ide-loader-spinner__width);\n    height: var(--gxg-ide-loader-spinner__width);\n    flex-shrink: 0;\n  }\n\n  &__content-wrapper {\n    display: flex;\n    flex-direction: column;\n    margin-block-start: var(--gxg-ide-loader-content-wrapper__mbs);\n    gap: var(--gxg-ide-loader-content-wrapper__gap);\n    max-width: var(--gxg-ide-loader-content-wrapper__max-width);\n    &--hidden {\n      display: none;\n    }\n  }\n}\n\n/*background color animation*/\n@keyframes wrapper {\n  from {\n    background-color: var(--gxg-ide-loader-wrapper__background-color--from);\n  }\n  to {\n    background-color: var(--gxg-ide-loader-wrapper__background-color--to);\n  }\n}\n/*spinner animation*/\n@-webkit-keyframes spinner {\n  from {\n    -webkit-transform: rotate(0deg);\n  }\n  to {\n    -webkit-transform: rotate(359deg);\n  }\n}\n@keyframes spinner {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(359deg);\n  }\n}\n\n:host([display-border]) {\n  .loader {\n    &__wrapper {\n      border: 1px solid var(--mer-color__elevation--02);\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Watch,\n  State,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\n@Component({\n  tag: \"gx-ide-loader\",\n  styleUrl: \"ide-loader.scss\",\n  shadow: true\n})\nexport class IdeLoader {\n  // 1.OWN PROPERTIES //\n\n  private timeoutReference: ReturnType<typeof setTimeout>;\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  // 3.STATE() VARIABLES //\n\n  /**\n   * shows the ch-window\n   */\n  @State() showWindow = false;\n\n  /**\n   * shows the '.loader-wrapper'\n   */\n  @State() showWrapper = false;\n\n  // 4.PUBLIC PROPERTY API | WATCH'S //\n\n  /**\n   * The loader title (optional)\n   */\n  @Prop() readonly loaderTitle: string;\n\n  /**\n   * The loader description (optional)\n   */\n  @Prop() readonly description: string;\n\n  /**\n   * The cancel button label (optional)\n   */\n  @Prop() readonly cancelLabel: string;\n\n  /**\n   * The cancel callback\n   */\n  @Prop() readonly cancelCallback: IdeLoaderCancelCallback;\n\n  /**\n   * It shows the loader\n   */\n  @Prop({ mutable: true }) show = false;\n\n  /**\n   * The time the loader will await before abort.\n   */\n  @Prop() readonly abortTime: number = 300000; // 5 minutes\n\n  /**\n   * Displays a border all around\n   */\n  @Prop({ reflect: true }) readonly displayBorder: boolean = false;\n\n  /**\n   * The border radius value that applies on the .loader__wrapper\n   */\n  @Prop({ reflect: true }) readonly borderRadius: string = \"0\";\n\n  @Watch(\"show\")\n  showHandler(show: boolean): void {\n    if (show) {\n      this.showWindow = true;\n      this.showWrapper = true;\n    } else {\n      this.showWindow = false;\n      this.showWrapper = false;\n      this.loaderFinished.emit();\n    }\n  }\n\n  /**\n   * The container element for the loader.\n   */\n  @Prop() readonly container: HTMLElement;\n\n  // 5.EVENTS (EMIT) //\n\n  /**\n   * This event is emitted when \"show\" is false.\n   */\n  @Event() loaderFinished: EventEmitter<void>;\n\n  // 6.COMPONENT LIFECYCLE EVENTS //\n\n  // 7.LISTENERS //\n\n  // 8.PUBLIC METHODS API //\n\n  // 9.LOCAL METHODS //\n\n  private renderTitle = (): HTMLGxgTitleElement | null => {\n    return this.loaderTitle ? (\n      <gxg-title class=\"loader__title\" type=\"title-04\" alignment=\"center\">\n        {this.loaderTitle}\n      </gxg-title>\n    ) : null;\n  };\n\n  private renderDescription = (): HTMLGxgTextElement | null => {\n    return this.description ? (\n      <gxg-text\n        class=\"loader__description\"\n        type=\"text-regular\"\n        textAlign=\"center\"\n      >\n        {this.description}\n      </gxg-text>\n    ) : null;\n  };\n\n  private renderCancelButton = (): HTMLGxgButtonElement | null => {\n    return this.cancelLabel ? (\n      <gxg-button\n        class={{\n          [`loader__cancel-button`]: true\n        }}\n        type=\"secondary-text-icon\"\n        onClick={this.cancelProcess}\n      >\n        {this.cancelLabel}\n      </gxg-button>\n    ) : null;\n  };\n\n  private cancelProcess = (): void => {\n    if (this.cancelCallback) {\n      this.cancelCallback();\n    }\n    clearTimeout(this.timeoutReference);\n    this.show = false;\n  };\n\n  //  10.RENDER() FUNCTION //\n\n  render() {\n    return (\n      <Host>\n        <ch-window\n          closeOnEscape={false}\n          closeOnOutsideClick={false}\n          container={this.container}\n          hidden={!this.showWindow}\n          modal={false}\n          showFooter={false}\n          showHeader={false}\n        >\n          <div\n            class={{\n              [`loader__wrapper`]: true,\n              \"loader__wrapper--visible\": this.showWrapper\n            }}\n            style={{ borderRadius: this.borderRadius }}\n            part=\"loader-wrapper\"\n          >\n            <div class=\"loader__spinner\"></div>\n            <div\n              class={{\n                \"loader__content-wrapper\": true,\n                \"loader__content-wrapper--hidden\":\n                  !this.description && !this.loaderTitle && !this.cancelLabel\n              }}\n            >\n              {this.renderTitle()}\n              {this.renderDescription()}\n              {this.renderCancelButton()}\n            </div>\n          </div>\n        </ch-window>\n      </Host>\n    );\n  }\n}\n\nexport type IdeLoaderCancelCallback = () => void;\n"],"version":3}
+{"file":"ide-loader.js","mappings":";;AAAA,MAAM,YAAY,GAAG,y9CAAy9C;;;;;;;;;;ACY9+C,MAAM,WAAW,GAAmB;IAClC,mBAAmB;IACnB,mBAAmB;IACnB,kBAAkB;CACnB,CAAC;MAMW,SAAS;;;;;;QACpB,8CAAiD;QA+CjD,mCAAiB;YACf,IAAI,IAAI,CAAC,cAAc,EAAE;gBACvB,IAAI,CAAC,cAAc,EAAE,CAAC;aACvB;YACD,YAAY,CAAC,uBAAA,IAAI,mCAAkB,CAAC,CAAC;YACrC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;SACnB,EAAC;QAEF,wCAAsB,MACpB,IAAI,CAAC,WAAW,KACd,eACE,cACE,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,uBAAA,IAAI,gCAAe,IAE3B,IAAI,CAAC,WAAW,CACV,CACL,CACP,EAAC;QAEJ,uCAAqB,MACnB,IAAI,CAAC,WAAW,IAAI,SAAG,KAAK,EAAC,oBAAoB,IAAE,IAAI,CAAC,WAAW,CAAK,EAAC;QAE3E,iCAAe,MACb,IAAI,CAAC,WAAW,IAAI,SAAG,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,WAAW,CAAK,EAAC;2BAnErD,IAAI;yBAKU,CAAC,GAAG,EAAE,GAAG,IAAI;;;;6BAoBS,KAAK;;oBAUhC,KAAK;;IAkCrC,MAAM;QACJ,QACE,EAAC,IAAI,QACH,gBAAU,KAAK,EAAE,WAAW,GAAa,EACxC,IAAI,CAAC,IAAI,KACR,WACE,KAAK,EAAE;gBACL,CAAC,iBAAiB,GAAG,IAAI;gBACzB,0BAA0B,EAAE,IAAI,CAAC,WAAW;aAC7C,EACD,IAAI,EAAC,gBAAgB,EACrB,OAAO,EAAC,EAAE,IAEV,WAAK,KAAK,EAAC,iBAAiB,GAAO,EACnC,WACE,KAAK,EAAE;gBACL,yBAAyB,EAAE,IAAI;gBAC/B,iCAAiC,EAC/B,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,WAAW;aAC9D,IAEA,uBAAA,IAAI,8BAAa,MAAjB,IAAI,CAAe,EACnB,uBAAA,IAAI,oCAAmB,MAAvB,IAAI,CAAqB,EACzB,uBAAA,IAAI,qCAAoB,MAAxB,IAAI,CAAsB,CACvB,CACF,CACP,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/_helpers/ide-loader/ide-loader.scss?tag=gx-ide-loader&encapsulation=shadow","src/components/_helpers/ide-loader/ide-loader.tsx"],"sourcesContent":["$animation: fadeIn var(--mer-timing--fast) forwards;\n\n.loader {\n  &__wrapper {\n    position: absolute;\n    border: none;\n    opacity: 0;\n    transition: var(--show-transition) opacity;\n    inline-size: 100%;\n    block-size: 100%;\n    display: flex;\n    background-color: var(--gxg-ide-loader-wrapper__background-color--from);\n    backdrop-filter: var(--gxg-ide-loader-wrapper__backdrop-filter);\n    padding: var(--gxg-ide-loader-wrapper__padding);\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    color: var(--gxg-ide-loader-wrapper__color);\n\n    &--visible {\n      opacity: 1;\n    }\n  }\n  &__spinner {\n    border: var(--gxg-ide-loader-spinner__border);\n    border-block-start: var(--gxg-ide-loader-spinner__border-top);\n    border-radius: 50%;\n    animation: spinner 0.6s infinite linear;\n    inline-size: var(--gxg-ide-loader-spinner__width);\n    block-size: var(--gxg-ide-loader-spinner__width);\n    flex-shrink: 0;\n    opacity: 1;\n  }\n\n  &__content-wrapper {\n    display: flex;\n    text-align: center;\n    flex-direction: column;\n    margin-block-start: var(--gxg-ide-loader-content-wrapper__mbs);\n    gap: var(--mer-spacing--xs);\n    max-block-size: var(--gxg-ide-loader-content-wrapper__max-width);\n    &--hidden {\n      display: none;\n    }\n    animation: $animation;\n    opacity: 1;\n  }\n}\n\n/*background color animation*/\n@keyframes wrapper {\n  0% {\n    background-color: var(--gxg-ide-loader-wrapper__background-color--from);\n  }\n  100% {\n    background-color: var(--gxg-ide-loader-wrapper__background-color--to);\n  }\n}\n@keyframes spinner {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(359deg);\n  }\n}\n\n:host([display-border]) {\n  .loader {\n    &__wrapper {\n      border: 1px solid var(--mer-color__elevation--02);\n    }\n  }\n}\n\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport { MercuryBundles } from \"@genexus/mercury\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"components/button\",\n  \"utils/typography\"\n];\n@Component({\n  tag: \"gx-ide-loader\",\n  styleUrl: \"ide-loader.scss\",\n  shadow: true\n})\nexport class IdeLoader {\n  #timeoutReference: ReturnType<typeof setTimeout>;\n\n  /**\n   * shows the '.loader-wrapper'\n   */\n  @State() showWrapper = true;\n\n  /**\n   * The time the loader will await before abort.\n   */\n  @Prop() readonly abortTime: number = 5 * 60 * 1000; // 5 minutes\n\n  /**\n   * The cancel callback\n   */\n  @Prop() readonly cancelCallback: IdeLoaderCancelCallback;\n\n  /**\n   * The cancel button label (optional)\n   */\n  @Prop() readonly cancelLabel: string;\n\n  /**\n   * The loader description (optional)\n   */\n  @Prop() readonly description: string;\n\n  /**\n   * Displays a border all around\n   */\n  @Prop({ reflect: true }) readonly displayBorder: boolean = false;\n\n  /**\n   * The loader title (optional)\n   */\n  @Prop() readonly loaderTitle: string;\n\n  /**\n   * It shows the loader\n   */\n  @Prop({ mutable: true }) show = false;\n\n  /**\n   * This event is emitted when \"show\" is false.\n   */\n  @Event() loaderFinished: EventEmitter<void>;\n\n  #cancelProcess = (): void => {\n    if (this.cancelCallback) {\n      this.cancelCallback();\n    }\n    clearTimeout(this.#timeoutReference);\n    this.show = false;\n  };\n\n  #renderCancelButton = (): HTMLButtonElement | null =>\n    this.cancelLabel && (\n      <div>\n        <button\n          class=\"button-secondary\"\n          type=\"button\"\n          onClick={this.#cancelProcess}\n        >\n          {this.cancelLabel}\n        </button>\n      </div>\n    );\n\n  #renderDescription = (): HTMLParagraphElement | null =>\n    this.description && <p class=\"text-body-italic-s\">{this.description}</p>;\n\n  #renderTitle = (): HTMLParagraphElement | null =>\n    this.loaderTitle && <p class=\"text-body-regular-m\">{this.loaderTitle}</p>;\n\n  render() {\n    return (\n      <Host>\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        {this.show && (\n          <div\n            class={{\n              [`loader__wrapper`]: true,\n              \"loader__wrapper--visible\": this.showWrapper\n            }}\n            part=\"loader-wrapper\"\n            popover=\"\"\n          >\n            <div class=\"loader__spinner\"></div>\n            <div\n              class={{\n                \"loader__content-wrapper\": true,\n                \"loader__content-wrapper--hidden\":\n                  !this.description && !this.loaderTitle && !this.cancelLabel\n              }}\n            >\n              {this.#renderTitle()}\n              {this.#renderDescription()}\n              {this.#renderCancelButton()}\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n\nexport type IdeLoaderCancelCallback = () => void;\n"],"version":3}

package/dist/components/list-selector.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
-const listSelectorCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-01--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-02{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-02--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--color-on-primary)}.gxg-title-03{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-03--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-04{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-04--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-05{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-05--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable)}.gxg-text--negative{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text--gray{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--dimmed)}.gxg-quote{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);font-style:italic}.gxg-quote--negative{color:var(--ds-base-font-color--negative)}.gxg-link{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--ds-base-font-color--link-hover)}.gxg-link:active{color:var(--ds-base-font-color--link-active)}.gxg-link-gray{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed)}.gxg-link-gray:hover{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed);filter:brightness(1.4)}.gxg-alert-error{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--error);display:inline-block}.gxg-alert-warning{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--warning);display:inline-block}.gxg-alert-success{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--success);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--ds-base-font-family-primary);font-weight:var(--gxg-label-font-weight);font-size:var(--gxg-label-font-size);color:var(--gxg-label-color);text-align:center;line-height:1.455em;display:flex;align-items:center}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gxg-scrollbar::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.overflow-auto{overflow:auto}.justify-start{display:flex;justify-content:start}.justify-center{display:flex;justify-content:center}.justify-end{display:flex;justify-content:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--mer-color__neutral-gray--800)}ch-grid-column:first-child{padding-inline-start:var(--gx-ide-container__padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gx-ide-container__padding) !important}ch-grid-cell{--mer-spacing--xs:var(--gx-ide-container__padding)}.layout{display:grid;gap:var(--mer-spacing--lg);box-sizing:border-box}.layout--two-cols{grid-template-columns:1fr 1fr}.layout--space-above{padding-block-start:var(--mer-spacing--lg)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--mer-font__weight--regular);font-size:var(--mer-font__size--xs);font-family:var(--mer-font-family--primary);height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-main::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-main::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-main::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-overflow::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.tree-view-primary{font-size:var(--mer-font__size--2xs)}p{margin:0;font-size:var(--mer-font__size--xxs)}*,::after,::before{box-sizing:border-box}:host{display:flex;flex-direction:column;max-height:100%;font-family:var(--mer-font-family--primary)}gxg-title{display:block;margin-block-end:var(--gxg-label-margin-vertical)}.list{background-color:unset;border:none;color:inherit;font:inherit;margin:0;padding:0;outline:0;list-style-type:none;margin:0;padding:0;color:var(--gx-ide-component-text-color);background-color:var(--gx-ide-component-background-color);font-size:var(--gx-ide-component-text-size);font-weight:var(--mer-font__weight--regular);display:block;background-color:var(--mer-color__surface);max-height:100%;overflow-y:auto;border:1px solid var(--gx-ide-container-border-color);border-radius:var(--ds-form-control-border-radius)}.list::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.list::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.list::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.list::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.list::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}:host([no-list-border]) .list{border:none}";
+const listSelectorCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-01--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-02{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-02--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--color-on-primary)}.gxg-title-03{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-03--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-04{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-04--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-05{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-05--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable)}.gxg-text--negative{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text--gray{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--dimmed)}.gxg-quote{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);font-style:italic}.gxg-quote--negative{color:var(--ds-base-font-color--negative)}.gxg-link{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--ds-base-font-color--link-hover)}.gxg-link:active{color:var(--ds-base-font-color--link-active)}.gxg-link-gray{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed)}.gxg-link-gray:hover{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed);filter:brightness(1.4)}.gxg-alert-error{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--error);display:inline-block}.gxg-alert-warning{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--warning);display:inline-block}.gxg-alert-success{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--success);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--ds-base-font-family-primary);font-weight:var(--gxg-label-font-weight);font-size:var(--gxg-label-font-size);color:var(--gxg-label-color);text-align:center;line-height:1.455em;display:flex;align-items:center}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gxg-scrollbar::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.button-primary-destructive{--control__border-color:var(--button-primary__border-color--destructive);background-color:var(--button-primary__bg-color--destructive);color:var(--button-primary__color--destructive)}.button-primary-destructive:hover{--control__border-color:var(\n    --button-primary__bg-color--destructive-hover\n  );background-color:var(--button-primary__bg-color--destructive-hover);color:var(--button-primary__color--destructive)}.button-primary-destructive:active{--control__border-color:var(\n    --button-primary__bg-color--destructive-active\n  );background-color:var(--button-primary__bg-color--destructive-active);color:var(--button-primary__color--destructive)}.button-secondary-destructive{--control__border-color:var(--button-secondary__border-color--destructive);background-color:var(--button-secondary__bg-color--destructive);color:var(--button-secondary__color--destructive)}.button-secondary-destructive:hover{--control__border-color:var(\n    --button-secondary__bg-color--destructive-hover\n  );background-color:var(--button-secondary__bg-color--destructive-hover);color:var(--button-secondary__color--destructive)}.button-secondary-destructive:active{--control__border-color:var(\n    --button-secondary__bg-color--destructive-active\n  );background-color:var(--button-secondary__bg-color--destructive-active);color:var(--button-secondary__color--destructive)}:host{display:grid;block-size:100%}.card-regular{background-color:var(--mer-surface__elevation--01);border:var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);border-radius:var(--mer-border__radius--md);padding:var(--mer-spacing--md) var(--mer-spacing--md);display:grid}.card-small{background-color:var(--mer-surface__elevation--02);border-radius:var(--mer-border__radius--sm);padding:var(--mer-spacing--sm) var(--mer-spacing--sm)}.card-small--actionable:hover{background-color:var(--mer-color__neutral-gray--600)}.card-small--actionable:active{background-color:var(--mer-color__neutral-gray--650)}.card-small:focus-visible{outline:var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);outline-offset:var(--focus__outline-offset)}.empty-state{block-size:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--mer-spacing--sm);text-align:center}.empty-state__title,.empty-state__button,.empty-state__link{max-inline-size:300px}.opacity-0{opacity:0}.opacity-1{opacity:1}.display-contents{display:contents}.gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.overflow-auto{overflow:auto}.justify-start{display:flex;justify-content:start}.justify-center{display:flex;justify-content:center}.justify-end{display:flex;justify-content:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--mer-color__neutral-gray--800)}ch-grid-column:first-child{padding-inline-start:var(--gx-ide-container__padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gx-ide-container__padding) !important}ch-grid-cell{--mer-spacing--xs:var(--gx-ide-container__padding)}.layout{display:grid;gap:var(--mer-spacing--lg);box-sizing:border-box}.layout--two-cols{grid-template-columns:1fr 1fr}.layout--space-above{padding-block-start:var(--mer-spacing--lg)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--mer-font__weight--regular);font-size:var(--mer-font__size--xs);font-family:var(--mer-font-family--primary);height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-main::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-main::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-main::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-overflow::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.tree-view-primary{font-size:var(--mer-font__size--2xs)}p{margin:0;font-size:var(--mer-font__size--xxs)}.buttons-container{display:flex;gap:var(--mer-spacing--xs)}*,::after,::before{box-sizing:border-box}:host{display:flex;flex-direction:column;max-height:100%;font-family:var(--mer-font-family--primary)}gxg-title{display:block;margin-block-end:var(--gxg-label-margin-vertical)}.list{background-color:unset;border:none;color:inherit;font:inherit;margin:0;padding:0;outline:0;list-style-type:none;margin:0;padding:0;color:var(--gx-ide-component-text-color);background-color:var(--gx-ide-component-background-color);font-size:var(--gx-ide-component-text-size);font-weight:var(--mer-font__weight--regular);display:block;background-color:var(--mer-color__surface);max-height:100%;overflow-y:auto;border:1px solid var(--gx-ide-container-border-color);border-radius:var(--ds-form-control-border-radius)}.list::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.list::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.list::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.list::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.list::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}:host([no-list-border]) .list{border:none}";
 
 const GxIdeListSelector = /*@__PURE__*/ proxyCustomElement(class GxIdeListSelector extends HTMLElement {
     constructor() {

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

@@ -1 +1 @@
-{"file":"list-selector.js","mappings":"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","names":[],"sources":["src/components/_helpers/list-selector/list-selector.scss?tag=gx-ide-list-selector&encapsulation=shadow","src/components/_helpers/list-selector/list-selector.tsx"],"sourcesContent":["@import \"../../../global/reset.scss\";\n@import \"../../../global/gx-ide-mixins.scss\";\n@import \"../../../global/gx-ide-common.scss\";\n@include box-sizing;\n\n:host {\n  display: flex;\n  flex-direction: column;\n  max-height: 100%;\n  font-family: var(--mer-font-family--primary);\n}\ngxg-title {\n  display: block;\n  margin-block-end: var(--gxg-label-margin-vertical);\n}\n.list {\n  @include reset-defaults;\n  @include reset-list;\n  @include base-component-styles;\n  @include gxg-scrollbar;\n  display: block;\n  background-color: var(--mer-color__surface);\n  max-height: 100%;\n  overflow-y: auto;\n  border: 1px solid var(--gx-ide-container-border-color);\n  border-radius: var(--ds-form-control-border-radius);\n}\n/*no border*/\n:host([no-list-border]) {\n  .list {\n    border: none;\n  }\n}\n","/* STENCIL IMPORTS */\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Listen,\n  // Watch,\n  Element,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\nimport { Color, Size } from \"@genexus/gemini/dist/types/components/icon/icon\";\n/* CUSTOM IMPORTS */\nimport { ItemData } from \"./list-selector-item/list-selector-item\";\n\n@Component({\n  tag: \"gx-ide-list-selector\",\n  styleUrl: \"list-selector.scss\",\n  shadow: true\n})\nexport class GxIdeListSelector {\n  // 1.OWN PROPERTIES | WATCH'S //\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeListSelectorElement;\n\n  // 3.STATE() VARIABLES //\n\n  // 4.PUBLIC PROPERTY API | WATCH'S //\n\n  /**\n   * The list title (optional)\n   */\n  @Prop() readonly listTitle: string;\n\n  /**\n   * It determines if the list is ordered, or unordered\n   */\n  @Prop() readonly ordered: boolean = false;\n\n  /**\n   * Makes the list readonly\n   */\n  @Prop() readonly readonly: boolean = false;\n\n  /**\n   * It determines the type of list: single-selection or multi-selection\n   */\n  @Prop() readonly type: \"single-selection\" | \"multi-selection\" =\n    \"single-selection\";\n\n  /**\n   * Makes the list required\n   */\n  @Prop() readonly required: boolean = false;\n\n  /**\n   * The presence of this property will force all the items to not-wrap, and have ellipsis\n   */\n  @Prop() readonly ellipsis: boolean = false;\n\n  /**\n   * The value of the initial (or initials) checked list-item/s\n   */\n  @Prop({ mutable: true }) value: string | string[];\n\n  /**\n   * Icons color\n   */\n  @Prop() readonly iconsColor: Color = \"auto\";\n\n  /**\n   * Icons size\n   */\n  @Prop() readonly iconsSize: Size = \"small\";\n\n  // @Watch(\"value\")\n  // valueHandler(newValue: string) {\n  //   const foundItem = this.getItemByValue(newValue);\n  //   if (foundItem) {\n  //     const input = foundItem.querySelector(\"input\");\n  //     input.checked = true;\n  //   }\n  // }\n\n  /**\n   * The name of this list. This is a required attribute for the list to work.\n   */\n  @Prop() readonly listName!: string;\n\n  /**\n   * Disables the items border\n   */\n  @Prop() readonly noItemsBorder: boolean = false;\n\n  /**\n   * Disables the list border\n   */\n  @Prop({ reflect: true }) readonly noListBorder: boolean = false;\n\n  // 5.EVENTS (EMIT) //\n\n  /**\n   * Emits the actual selection\n   */\n  @Event() selectionChanged: EventEmitter<CheckedItemsInfo>;\n\n  // 6.COMPONENT LIFECYCLE METHODS //\n\n  componentWillLoad() {\n    this.evaluateChecked();\n    this.evaluateInitialValue();\n  }\n\n  // 7.LISTENERS //\n\n  @Listen(\"itemSelectionChanged\", { capture: true })\n  itemSelectionChangedHandler(event: CustomEvent<ItemData>) {\n    event.stopPropagation();\n    const selectedItem = event.detail;\n    if (this.type === \"single-selection\") {\n      this.clearPrevSelected(selectedItem);\n    }\n    const checkedItemsInfo: CheckedItemsInfo = [];\n    const checkedItems: HTMLGxIdeListSelectorItemElement[] = this.getChecked();\n    const newValue: string | string[] = [];\n    checkedItems.forEach(item => {\n      const value = item.itemValue;\n      newValue.push(value);\n      checkedItemsInfo.push({\n        itemId: item.itemId,\n        itemValue: value,\n        itemIcon: item.icon,\n        itemChecked: true\n      });\n    });\n    /* update this.value*/\n    if (this.type === \"single-selection\" && newValue.length > 0) {\n      this.value = newValue[0] || undefined;\n    } else {\n      /* multi-selection*/\n      this.value = newValue;\n    }\n    /* emit selectionChanged*/\n    this.selectionChanged.emit(checkedItemsInfo);\n  }\n\n  // 8.PUBLIC METHODS API //\n\n  // 9.LOCAL METHODS //\n\n  /**\n   * It evaluates the checked items, and checks or unchecks if needed\n   */\n  private evaluateChecked = () => {\n    const allListItems = Array.from(\n      this.el.querySelectorAll(\"gx-ide-list-selector-item\")\n    );\n    const checkedItems = allListItems.filter(item => item.itemChecked);\n    /**\n     * INDEX\n     * 1.required and no one checked\n     * 2.single-selection, and more than one checked\n     */\n\n    /* 1.required and no one checked*/\n    if (this.required && checkedItems.length === 0) {\n      allListItems[0].itemChecked = true;\n    } else if (this.type === \"single-selection\" && checkedItems.length > 1) {\n      /* 2.single-selection, and more than one checked*/\n      checkedItems.forEach((item, i) => {\n        if (i !== 0) {\n          item.itemChecked = false;\n        }\n      });\n    }\n  };\n\n  /**\n   * It evaluates the initial value/s\n   */\n  private evaluateInitialValue = () => {\n    const checkedItems = this.getChecked();\n    if (this.type === \"single-selection\" && checkedItems.length > 0) {\n      this.value = checkedItems[0].itemValue;\n    } else if (this.type === \"multi-selection\" && checkedItems.length > 0) {\n      const values: string[] = [];\n      checkedItems.forEach(checked => {\n        values.push(checked.itemValue);\n      });\n      this.value = values;\n    }\n  };\n\n  private getChecked = (): HTMLGxIdeListSelectorItemElement[] => {\n    const checkedItems: HTMLGxIdeListSelectorItemElement[] = [];\n    const allItems = this.el.querySelectorAll(\"gx-ide-list-selector-item\");\n    allItems.forEach(item => {\n      if (item.itemChecked) {\n        checkedItems.push(item);\n      }\n    });\n    return checkedItems;\n  };\n\n  private clearPrevSelected = (currentSelected: ItemData) => {\n    const allItems = this.el.querySelectorAll(\"gx-ide-list-selector-item\");\n    allItems.forEach(item => {\n      if (item.itemChecked && item.itemId !== currentSelected.itemId) {\n        item.itemChecked = false;\n      }\n    });\n  };\n\n  // 10.RENDER() FUNCTION //\n\n  render() {\n    return (\n      <Host exportparts=\"input:input\">\n        {this.listTitle ? (\n          <gxg-title type=\"title-04\">{this.listTitle}</gxg-title>\n        ) : null}\n        {this.ordered ? (\n          <ol class=\"list\" part=\"list\">\n            <slot></slot>\n          </ol>\n        ) : (\n          <ul class=\"list\" part=\"list\">\n            <slot></slot>\n          </ul>\n        )}\n      </Host>\n    );\n  }\n}\n\nexport type CheckedItemsInfo = ItemData[];\n"],"version":3}
+{"file":"list-selector.js","mappings":"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","names":[],"sources":["src/components/_helpers/list-selector/list-selector.scss?tag=gx-ide-list-selector&encapsulation=shadow","src/components/_helpers/list-selector/list-selector.tsx"],"sourcesContent":["@import \"../../../global/reset.scss\";\n@import \"../../../global/gx-ide-mixins.scss\";\n@import \"../../../global/gx-ide-common.scss\";\n@include box-sizing;\n\n:host {\n  display: flex;\n  flex-direction: column;\n  max-height: 100%;\n  font-family: var(--mer-font-family--primary);\n}\ngxg-title {\n  display: block;\n  margin-block-end: var(--gxg-label-margin-vertical);\n}\n.list {\n  @include reset-defaults;\n  @include reset-list;\n  @include base-component-styles;\n  @include gxg-scrollbar;\n  display: block;\n  background-color: var(--mer-color__surface);\n  max-height: 100%;\n  overflow-y: auto;\n  border: 1px solid var(--gx-ide-container-border-color);\n  border-radius: var(--ds-form-control-border-radius);\n}\n/*no border*/\n:host([no-list-border]) {\n  .list {\n    border: none;\n  }\n}\n","/* STENCIL IMPORTS */\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Listen,\n  // Watch,\n  Element,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\nimport { Color, Size } from \"@genexus/gemini/dist/types/components/icon/icon\";\n/* CUSTOM IMPORTS */\nimport { ItemData } from \"./list-selector-item/list-selector-item\";\n\n@Component({\n  tag: \"gx-ide-list-selector\",\n  styleUrl: \"list-selector.scss\",\n  shadow: true\n})\nexport class GxIdeListSelector {\n  // 1.OWN PROPERTIES | WATCH'S //\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeListSelectorElement;\n\n  // 3.STATE() VARIABLES //\n\n  // 4.PUBLIC PROPERTY API | WATCH'S //\n\n  /**\n   * The list title (optional)\n   */\n  @Prop() readonly listTitle: string;\n\n  /**\n   * It determines if the list is ordered, or unordered\n   */\n  @Prop() readonly ordered: boolean = false;\n\n  /**\n   * Makes the list readonly\n   */\n  @Prop() readonly readonly: boolean = false;\n\n  /**\n   * It determines the type of list: single-selection or multi-selection\n   */\n  @Prop() readonly type: \"single-selection\" | \"multi-selection\" =\n    \"single-selection\";\n\n  /**\n   * Makes the list required\n   */\n  @Prop() readonly required: boolean = false;\n\n  /**\n   * The presence of this property will force all the items to not-wrap, and have ellipsis\n   */\n  @Prop() readonly ellipsis: boolean = false;\n\n  /**\n   * The value of the initial (or initials) checked list-item/s\n   */\n  @Prop({ mutable: true }) value: string | string[];\n\n  /**\n   * Icons color\n   */\n  @Prop() readonly iconsColor: Color = \"auto\";\n\n  /**\n   * Icons size\n   */\n  @Prop() readonly iconsSize: Size = \"small\";\n\n  // @Watch(\"value\")\n  // valueHandler(newValue: string) {\n  //   const foundItem = this.getItemByValue(newValue);\n  //   if (foundItem) {\n  //     const input = foundItem.querySelector(\"input\");\n  //     input.checked = true;\n  //   }\n  // }\n\n  /**\n   * The name of this list. This is a required attribute for the list to work.\n   */\n  @Prop() readonly listName!: string;\n\n  /**\n   * Disables the items border\n   */\n  @Prop() readonly noItemsBorder: boolean = false;\n\n  /**\n   * Disables the list border\n   */\n  @Prop({ reflect: true }) readonly noListBorder: boolean = false;\n\n  // 5.EVENTS (EMIT) //\n\n  /**\n   * Emits the actual selection\n   */\n  @Event() selectionChanged: EventEmitter<CheckedItemsInfo>;\n\n  // 6.COMPONENT LIFECYCLE METHODS //\n\n  componentWillLoad() {\n    this.evaluateChecked();\n    this.evaluateInitialValue();\n  }\n\n  // 7.LISTENERS //\n\n  @Listen(\"itemSelectionChanged\", { capture: true })\n  itemSelectionChangedHandler(event: CustomEvent<ItemData>) {\n    event.stopPropagation();\n    const selectedItem = event.detail;\n    if (this.type === \"single-selection\") {\n      this.clearPrevSelected(selectedItem);\n    }\n    const checkedItemsInfo: CheckedItemsInfo = [];\n    const checkedItems: HTMLGxIdeListSelectorItemElement[] = this.getChecked();\n    const newValue: string | string[] = [];\n    checkedItems.forEach(item => {\n      const value = item.itemValue;\n      newValue.push(value);\n      checkedItemsInfo.push({\n        itemId: item.itemId,\n        itemValue: value,\n        itemIcon: item.icon,\n        itemChecked: true\n      });\n    });\n    /* update this.value*/\n    if (this.type === \"single-selection\" && newValue.length > 0) {\n      this.value = newValue[0] || undefined;\n    } else {\n      /* multi-selection*/\n      this.value = newValue;\n    }\n    /* emit selectionChanged*/\n    this.selectionChanged.emit(checkedItemsInfo);\n  }\n\n  // 8.PUBLIC METHODS API //\n\n  // 9.LOCAL METHODS //\n\n  /**\n   * It evaluates the checked items, and checks or unchecks if needed\n   */\n  private evaluateChecked = () => {\n    const allListItems = Array.from(\n      this.el.querySelectorAll(\"gx-ide-list-selector-item\")\n    );\n    const checkedItems = allListItems.filter(item => item.itemChecked);\n    /**\n     * INDEX\n     * 1.required and no one checked\n     * 2.single-selection, and more than one checked\n     */\n\n    /* 1.required and no one checked*/\n    if (this.required && checkedItems.length === 0) {\n      allListItems[0].itemChecked = true;\n    } else if (this.type === \"single-selection\" && checkedItems.length > 1) {\n      /* 2.single-selection, and more than one checked*/\n      checkedItems.forEach((item, i) => {\n        if (i !== 0) {\n          item.itemChecked = false;\n        }\n      });\n    }\n  };\n\n  /**\n   * It evaluates the initial value/s\n   */\n  private evaluateInitialValue = () => {\n    const checkedItems = this.getChecked();\n    if (this.type === \"single-selection\" && checkedItems.length > 0) {\n      this.value = checkedItems[0].itemValue;\n    } else if (this.type === \"multi-selection\" && checkedItems.length > 0) {\n      const values: string[] = [];\n      checkedItems.forEach(checked => {\n        values.push(checked.itemValue);\n      });\n      this.value = values;\n    }\n  };\n\n  private getChecked = (): HTMLGxIdeListSelectorItemElement[] => {\n    const checkedItems: HTMLGxIdeListSelectorItemElement[] = [];\n    const allItems = this.el.querySelectorAll(\"gx-ide-list-selector-item\");\n    allItems.forEach(item => {\n      if (item.itemChecked) {\n        checkedItems.push(item);\n      }\n    });\n    return checkedItems;\n  };\n\n  private clearPrevSelected = (currentSelected: ItemData) => {\n    const allItems = this.el.querySelectorAll(\"gx-ide-list-selector-item\");\n    allItems.forEach(item => {\n      if (item.itemChecked && item.itemId !== currentSelected.itemId) {\n        item.itemChecked = false;\n      }\n    });\n  };\n\n  // 10.RENDER() FUNCTION //\n\n  render() {\n    return (\n      <Host exportparts=\"input:input\">\n        {this.listTitle ? (\n          <gxg-title type=\"title-04\">{this.listTitle}</gxg-title>\n        ) : null}\n        {this.ordered ? (\n          <ol class=\"list\" part=\"list\">\n            <slot></slot>\n          </ol>\n        ) : (\n          <ul class=\"list\" part=\"list\">\n            <slot></slot>\n          </ul>\n        )}\n      </Host>\n    );\n  }\n}\n\nexport type CheckedItemsInfo = ItemData[];\n"],"version":3}