npm - @genexus/genexus-ide-ui - Versions diffs - 0.0.108 → 0.0.109 - Mend

@genexus/genexus-ide-ui 0.0.108 → 0.0.109

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (267) hide show

package/dist/components/combo-box.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { a as formMessageLogic, f as formTooltipLogic } from './form.js';
+import { f as formMessageLogic, a as formTooltipLogic } from './form.js';
 import { K as KeyboardKeys } from './types.js';
 import { e as exportParts } from './export-parts.js';
 import { s as state } from './store.js';

package/dist/components/common.js CHANGED Viewed

@@ -25,6 +25,35 @@ const renderFormItems = (componentType = "gxg-combo-box-item", options, group =
     }
     return null;
 };
+const renderModuleDataProperties = (options) => {
+    if (options.length) {
+        const items = [];
+        options.forEach(option => {
+            if (Array.isArray(option.value)) {
+                const item = (h("div", { class: "md-property__list" },
+                    h("p", { class: "md-property__key" },
+                        option.name,
+                        " :"),
+                    h("ul", null, option.value.map(subItem => {
+                        return h("li", null, subItem);
+                    }))));
+                items.push(item);
+            }
+            else {
+                const item = (h("div", { class: option.inline
+                        ? "md-property md-property--inline"
+                        : "md-property--block" },
+                    h("p", { class: "md-property__key" },
+                        option.name,
+                        " :"),
+                    h("p", { class: "md-property__value" }, option.value)));
+                items.push(item);
+            }
+        });
+        return items;
+    }
+    return null;
+};
 /**
  *
  * @param gxOptions An array of GxOptions's
@@ -49,6 +78,6 @@ const getSelectedGxOption = (gxOptions, onlyId = true) => {
     }
 };
-export { getSelectedGxOption as g, renderFormItems as r };
+export { renderModuleDataProperties as a, getSelectedGxOption as g, renderFormItems as r };
 //# sourceMappingURL=common.js.map

package/dist/components/common.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"common.js","mappings":";;AAAA;MAMa,eAAe,GAAG,CAC7B,gBAGuB,oBAAoB,EAC3C,OAAwB,EACxB,KAAK,GAAG,iBAAiB,EACzB,QAAc;IAEd,IAAI,OAAO,CAAC,MAAM,EAAE;QAClB,MAAM,KAAK,GAAsB,EAAE,CAAC;QACpC,OAAO,CAAC,OAAO,CAAC,MAAM;YACpB,IAAI,IAAI,CAAC;YACT,QAAQ,aAAa;gBACnB,KAAK,mBAAmB;oBACtB,IAAI,IACF,yBACE,UAAU,EAAE,MAAM,CAAC,EAAE,EACrB,OAAO,EAAE,MAAM,CAAC,OAAO,EACvB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,QAAQ,GAAG,QAAQ,GAAG,IAAI,EACpC,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,IAAI,EAAE,GAAG,KAAK,IAAI,MAAM,CAAC,EAAE,EAAE,GACV,CACtB,CAAC;oBACF,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;oBACjB,MAAM;gBACR,KAAK,oBAAoB;oBACvB,IAAI,IACF,0BACE,KAAK,EAAE,MAAM,CAAC,EAAE,EAChB,IAAI,EAAE,MAAM,CAAC,QAAQ,EACrB,IAAI,EAAE,GAAG,KAAK,IAAI,MAAM,CAAC,EAAE,EAAE,IAE5B,MAAM,CAAC,KAAK,CACM,CACtB,CAAC;oBACF,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;oBACjB,MAAM;gBACR,KAAK,gBAAgB;oBACnB,IAAI,IACF,sBACE,OAAO,EAAE,MAAM,CAAC,EAAE,EAClB,OAAO,EAAE,MAAM,CAAC,OAAO,EACvB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,IAAI,EAAE,KAAK,EACX,IAAI,EAAE,GAAG,KAAK,IAAI,MAAM,CAAC,EAAE,EAAE,GACb,CACnB,CAAC;oBACF,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;oBACjB,MAAM;aAGT;SACF,CAAC,CAAC;QACH,OAAO,KAAK,CAAC;KACd;IACD,OAAO,IAAI,CAAC;AACd,EAAE;AAEF;;;;;MAKa,mBAAmB,GAAG,CACjC,SAAqB,EACrB,MAAM,GAAG,IAAI;IAEb,IAAI,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,MAAM,IAAG,CAAC,EAAE;QACzB,IAAI,KAAK,GAAG,IAAI,CAAC;QACjB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACzC,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE;gBACzB,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;gBACrB,MAAM;aACP;SACF;QACD,IAAI,KAAK,IAAI,MAAM,EAAE;YACnB,OAAO,KAAK,CAAC,EAAE,CAAC;SACjB;aAAM,IAAI,CAAC,KAAK,IAAI,MAAM,EAAE;YAC3B,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;SACxB;QACD,OAAO,KAAK,CAAC;KACd;AACH;;;;","names":[],"sources":["src/common/common.tsx"],"sourcesContent":["/* STENCIL IMPORTS /\nimport { h } from \"@stencil/core\";\n/ OTHER LIBRARIES IMPORTS /\n/ CUSTOM IMPORTS /\nimport { GxgFormItemsArray, GxOption } from \"./types\";\n\nexport const renderFormItems = (\n componentType:\n \| \"gxg-combo-box-item\"\n \| \"gxg-form-checkbox\"\n \| \"gxg-form-radio\" = \"gxg-combo-box-item\",\n options: Array<GxOption>,\n group = \"undefined-group\",\n callback?: any\n): GxgFormItemsArray => {\n if (options.length) {\n const items: GxgFormItemsArray = [];\n options.forEach(option => {\n let item;\n switch (componentType) {\n case \"gxg-form-checkbox\":\n item = (\n <gxg-form-checkbox\n checkboxId={option.id}\n checked={option.checked}\n disabled={option.disabled}\n label={option.label}\n value={option.value}\n onChange={callback ? callback : null}\n iconName={option.iconName}\n part={`${group}-${option.id}`}\n ></gxg-form-checkbox>\n );\n items.push(item);\n break;\n case \"gxg-combo-box-item\":\n item = (\n <gxg-combo-box-item\n value={option.id}\n icon={option.iconName}\n part={`${group}-${option.id}`}\n >\n {option.label}\n </gxg-combo-box-item>\n );\n items.push(item);\n break;\n case \"gxg-form-radio\":\n item = (\n <gxg-form-radio\n radioId={option.id}\n checked={option.checked}\n disabled={option.disabled}\n label={option.label}\n value={option.value}\n name={group}\n part={`${group}-${option.id}`}\n ></gxg-form-radio>\n );\n items.push(item);\n break;\n default:\n break;\n }\n });\n return items;\n }\n return null;\n};\n\n/\n \n * @param gxOptions An array of GxOptions's\n * @returns The first option in the array that is 'selected'. If no one found it returns null.\n */\nexport const getSelectedGxOption = (\n gxOptions: GxOption[],\n onlyId = true\n): GxOption \| string \| void => {\n if (gxOptions?.length > 0) {\n let found = null;\n for (let i = 0; i < gxOptions.length; i++) {\n if (gxOptions[i].selected) {\n found = gxOptions[i];\n break;\n }\n }\n if (found && onlyId) {\n return found.id;\n } else if (!found && onlyId) {\n return gxOptions[0].id;\n }\n return found;\n }\n};\n"],"version":3}
1	+ {"file":"common.js","mappings":"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","names":[],"sources":["src/common/common.tsx"],"sourcesContent":["/* STENCIL IMPORTS /\nimport { h } from \"@stencil/core\";\n/ OTHER LIBRARIES IMPORTS /\n/ CUSTOM IMPORTS /\nimport { GxgFormItemsArray, GxOption } from \"./types\";\nimport { ModulePropertyData } from \"../components/modules/types\";\nexport const renderFormItems = (\n componentType:\n \| \"gxg-combo-box-item\"\n \| \"gxg-form-checkbox\"\n \| \"gxg-form-radio\" = \"gxg-combo-box-item\",\n options: Array<GxOption>,\n group = \"undefined-group\",\n callback?: any\n): GxgFormItemsArray => {\n if (options.length) {\n const items: GxgFormItemsArray = [];\n options.forEach(option => {\n let item;\n switch (componentType) {\n case \"gxg-form-checkbox\":\n item = (\n <gxg-form-checkbox\n checkboxId={option.id}\n checked={option.checked}\n disabled={option.disabled}\n label={option.label}\n value={option.value}\n onChange={callback ? callback : null}\n iconName={option.iconName}\n part={`${group}-${option.id}`}\n ></gxg-form-checkbox>\n );\n items.push(item);\n break;\n case \"gxg-combo-box-item\":\n item = (\n <gxg-combo-box-item\n value={option.id}\n icon={option.iconName}\n part={`${group}-${option.id}`}\n >\n {option.label}\n </gxg-combo-box-item>\n );\n items.push(item);\n break;\n case \"gxg-form-radio\":\n item = (\n <gxg-form-radio\n radioId={option.id}\n checked={option.checked}\n disabled={option.disabled}\n label={option.label}\n value={option.value}\n name={group}\n part={`${group}-${option.id}`}\n ></gxg-form-radio>\n );\n items.push(item);\n break;\n default:\n break;\n }\n });\n return items;\n }\n return null;\n};\n\nexport const renderModuleDataProperties = (\n options: Array<ModulePropertyData>\n): ModulePropertyData[] => {\n if (options.length) {\n const items: ModulePropertyData[] = [];\n\n options.forEach(option => {\n if (Array.isArray(option.value)) {\n const item = (\n <div class=\"md-property__list\">\n <p class=\"md-property__key\">{option.name} :</p>\n <ul>\n {option.value.map(subItem => {\n return <li>{subItem}</li>;\n })}\n </ul>\n </div>\n );\n items.push(item);\n } else {\n const item = (\n <div\n class={\n option.inline\n ? \"md-property md-property--inline\"\n : \"md-property--block\"\n }\n >\n <p class=\"md-property__key\">{option.name} :</p>\n <p class=\"md-property__value\">{option.value}</p>\n </div>\n );\n items.push(item);\n }\n });\n\n return items;\n }\n return null;\n};\n\n/\n \n * @param gxOptions An array of GxOptions's\n * @returns The first option in the array that is 'selected'. If no one found it returns null.\n */\nexport const getSelectedGxOption = (\n gxOptions: GxOption[],\n onlyId = true\n): GxOption \| string \| void => {\n if (gxOptions?.length > 0) {\n let found = null;\n for (let i = 0; i < gxOptions.length; i++) {\n if (gxOptions[i].selected) {\n found = gxOptions[i];\n break;\n }\n }\n if (found && onlyId) {\n return found.id;\n } else if (!found && onlyId) {\n return gxOptions[0].id;\n }\n return found;\n }\n};\n"],"version":3}

package/dist/components/container.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './title2.js';
-import { d as defineCustomElement$1 } from './title.js';
+import { d as defineCustomElement$2 } from './title.js';
+import { d as defineCustomElement$1 } from './title2.js';
-const containerCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-01--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-02{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-02--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--color-on-primary)}.gxg-title-03{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-03--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-04{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-04--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-05{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-05--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable)}.gxg-text--negative{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text--gray{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--dimmed)}.gxg-quote{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);font-style:italic}.gxg-quote--negative{color:var(--ds-base-font-color--negative)}.gxg-link{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--ds-base-font-color--link-hover)}.gxg-link:active{color:var(--ds-base-font-color--link-active)}.gxg-link-gray{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed)}.gxg-link-gray:hover{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed);filter:brightness(1.4)}.gxg-alert-error{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--error);display:inline-block}.gxg-alert-warning{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--warning);display:inline-block}.gxg-alert-success{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--success);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--ds-base-font-family-primary);font-weight:var(--gxg-label-font-weight);font-size:var(--gxg-label-font-size);color:var(--gxg-label-color);text-align:center;line-height:1.455em;display:flex;align-items:center}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gxg-scrollbar::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}:host{--gx-ide-container-elements-spacing:var(--mer-spacing--xs);display:block;height:100%;box-sizing:border-box}.container{display:grid;height:100%;grid-template-rows:auto 1fr auto;box-sizing:border-box}.heading,.content,.footer,.footer-above{padding:var(--gx-ide-container__padding)}.container--padding-s{--gx-ide-container__padding:var(--mer-spacing--xs)}.container--padding-m{--gx-ide-container__padding:var(--mer-spacing--sm)}.container--padding-l{--gx-ide-container__padding:var(--mer-spacing--md)}.container--display-border{border:1px solid var(--gx-ide-container-border-color)}.container--display-border-top{border-top:1px solid var(--gx-ide-container-border-color)}.container--display-border-end{border-inline-end:1px solid var(--gx-ide-container-border-color)}.container--display-border-bottom{border-bottom:1px solid var(--gx-ide-container-border-color)}.container--display-border-start{border-inline-start:1px solid var(--gx-ide-container-border-color)}.container--overflow-hidden-y{overflow-y:hidden}.heading{display:flex;flex-direction:column;gap:var(--gx-ide-container__padding);width:100%;box-sizing:border-box;border-bottom:1px solid var(--gx-ide-container-border-color)}.heading--no-border{border-bottom:0}.heading--no-padding{padding:0}.heading--inactive{color:var(--gxg-color--disabled)}.heading--padding-top{padding:var(--gx-ide-container__padding) 0 0 0}.heading--slimmer{padding-top:var(--mer-spacing--xs);padding-bottom:var(--mer-spacing--xs)}.heading--form-text-height .heading__title{min-height:var(--gxg-form-text-height);justify-content:center}.heading--flex-row{flex-direction:row;align-items:center;justify-content:center}.content{overflow-x:auto;display:flex;flex-direction:column;gap:var(--gx-ide-form-items-gap);box-sizing:border-box;}.content::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.content::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.content::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.content::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.content::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.content--no-padding{padding:0}.content--no-border-top{border-top:none}.content--flex{display:flex}.content--no-gap{gap:0}.content--align-items-start{align-items:start}.content--align-items-center{align-items:center}.content--align-items-end{align-items:end}.content--justify-content-start{justify-content:start}.content--justify-content-center{justify-content:center}.content--justify-content-end{justify-content:end}.content--border-end{border-inline-end:1px solid var(--gx-ide-container-border-color)}.container--only-content{grid-template-rows:1fr}.container--no-header:not(.container--only-content){grid-template-rows:1fr auto}.container--no-footer:not(.container--only-content){grid-template-rows:auto 1fr}.footer-above{border-top:1px solid var(--gx-ide-container-border-color)}.footer-above--no-border-top{border-top:0}.footer-above--slimmer{padding-top:var(--mer-spacing--xs);padding-bottom:var(--mer-spacing--xs)}.footer-above--no-padding{padding:0}.footer{display:flex;gap:var(--gx-ide-container-elements-spacing);flex-wrap:wrap;justify-content:space-between;align-items:center;border-top:1px solid var(--gx-ide-container-border-color)}.footer__start,.footer__end{display:flex;gap:var(--gx-ide-container-elements-spacing)}.footer--no-border{border-top:0}.footer--no-padding{padding:0}.footer--slimmer{padding-top:var(--mer-spacing--xs);padding-bottom:var(--mer-spacing--xs)}";
+const containerCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-01--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-02{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-02--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--color-on-primary)}.gxg-title-03{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-03--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-04{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-04--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-05{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-05--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable)}.gxg-text--negative{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text--gray{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--dimmed)}.gxg-quote{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);font-style:italic}.gxg-quote--negative{color:var(--ds-base-font-color--negative)}.gxg-link{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--ds-base-font-color--link-hover)}.gxg-link:active{color:var(--ds-base-font-color--link-active)}.gxg-link-gray{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed)}.gxg-link-gray:hover{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed);filter:brightness(1.4)}.gxg-alert-error{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--error);display:inline-block}.gxg-alert-warning{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--warning);display:inline-block}.gxg-alert-success{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--success);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--ds-base-font-family-primary);font-weight:var(--gxg-label-font-weight);font-size:var(--gxg-label-font-size);color:var(--gxg-label-color);text-align:center;line-height:1.455em;display:flex;align-items:center}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gxg-scrollbar::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}:host{--gx-ide-container-elements-spacing:var(--mer-spacing--xs);display:block;height:100%;box-sizing:border-box}.container{display:grid;height:100%;grid-template-rows:auto 1fr auto;box-sizing:border-box}.heading,.content,.footer,.footer-above{padding:var(--gx-ide-container__padding)}.container--padding-s{--gx-ide-container__padding:var(--mer-spacing--xs)}.container--padding-m{--gx-ide-container__padding:var(--mer-spacing--sm)}.container--padding-l{--gx-ide-container__padding:var(--mer-spacing--md)}.container--display-border{border:1px solid var(--gx-ide-container-border-color)}.container--display-border-top{border-top:1px solid var(--gx-ide-container-border-color)}.container--display-border-end{border-inline-end:1px solid var(--gx-ide-container-border-color)}.container--display-border-bottom{border-bottom:1px solid var(--gx-ide-container-border-color)}.container--display-border-start{border-inline-start:1px solid var(--gx-ide-container-border-color)}.container--overflow-hidden-y{overflow-y:hidden}.heading{display:flex;flex-direction:column;gap:var(--gx-ide-container__padding);width:100%;box-sizing:border-box;border-bottom:1px solid var(--gx-ide-container-border-color)}.heading--no-border{border-bottom:0}.heading--no-padding{padding:0}.heading--no-padding-block-end{padding-block-end:0}.heading--no-gap{gap:0}.heading--inactive{color:var(--gxg-color--disabled)}.heading--padding-top{padding:var(--gx-ide-container__padding) 0 0 0}.heading--slimmer{padding-top:var(--mer-spacing--xs);padding-bottom:var(--mer-spacing--xs)}.heading--form-text-height .heading__title{min-height:var(--gxg-form-text-height);justify-content:center}.heading--flex-row{flex-direction:row;align-items:center;justify-content:center}.content{overflow-x:auto;display:flex;flex-direction:column;gap:var(--gx-ide-form-items-gap);box-sizing:border-box;}.content::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.content::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.content::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.content::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.content::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.content--no-padding{padding:0}.content--no-border-top{border-top:none}.content--flex{display:flex}.content--no-gap{gap:0}.content--align-items-start{align-items:start}.content--align-items-center{align-items:center}.content--align-items-end{align-items:end}.content--justify-content-start{justify-content:start}.content--justify-content-center{justify-content:center}.content--justify-content-end{justify-content:end}.content--border-end{border-inline-end:1px solid var(--gx-ide-container-border-color)}.container--only-content{grid-template-rows:1fr}.container--no-header:not(.container--only-content){grid-template-rows:1fr auto}.container--no-footer:not(.container--only-content){grid-template-rows:auto 1fr}.footer-above{border-top:1px solid var(--gx-ide-container-border-color)}.footer-above--no-border-top{border-top:0}.footer-above--slimmer{padding-top:var(--mer-spacing--xs);padding-bottom:var(--mer-spacing--xs)}.footer-above--no-padding{padding:0}.footer{display:flex;gap:var(--gx-ide-container-elements-spacing);flex-wrap:wrap;justify-content:space-between;align-items:center;border-top:1px solid var(--gx-ide-container-border-color)}.footer__start,.footer__end{display:flex;gap:var(--gx-ide-container-elements-spacing)}.footer--no-border{border-top:0}.footer--no-padding{padding:0}.footer--slimmer{padding-top:var(--mer-spacing--xs);padding-bottom:var(--mer-spacing--xs)}";
 const GxIdeContainer = /*@__PURE__*/ proxyCustomElement(class GxIdeContainer extends HTMLElement {
     constructor() {
@@ -18,6 +18,8 @@ const GxIdeContainer = /*@__PURE__*/ proxyCustomElement(class GxIdeContainer ext
                 "heading--no-border": this.noHeadingBorder || this.hasOnlyHeading,
                 [`heading--justify-${this.headingJustify}`]: true,
                 "heading--no-padding": this.noHeadingPadding,
+                "heading--no-padding-block-end": this.noHeadingPaddingBlockEnd,
+                "heading--no-gap": this.noHeadingGap,
                 "heading--padding-top": this.headingPaddingTop && ((_a = this.containerTitle) === null || _a === void 0 ? void 0 : _a.length) > 0,
                 "heading--form-text-height": this.titleHeightAsInput,
                 "heading--flex-row": this.flexRow
@@ -66,7 +68,9 @@ const GxIdeContainer = /*@__PURE__*/ proxyCustomElement(class GxIdeContainer ext
         this.sectionsPadding = "m";
         this.titleAlignment = "center";
         this.noHeadingBorder = false;
+        this.noHeadingGap = false;
         this.noHeadingPadding = false;
+        this.noHeadingPaddingBlockEnd = false;
         this.headingPaddingTop = false;
         this.headingJustify = "center";
         this.titleHeightAsInput = false;
@@ -182,7 +186,9 @@ const GxIdeContainer = /*@__PURE__*/ proxyCustomElement(class GxIdeContainer ext
         "sectionsPadding": [1, "sections-padding"],
         "titleAlignment": [1, "title-alignment"],
         "noHeadingBorder": [4, "no-heading-border"],
+        "noHeadingGap": [4, "no-heading-gap"],
         "noHeadingPadding": [4, "no-heading-padding"],
+        "noHeadingPaddingBlockEnd": [4, "no-heading-padding-block-end"],
         "headingPaddingTop": [4, "heading-padding-top"],
         "headingJustify": [1, "heading-justify"],
         "titleHeightAsInput": [4, "title-height-as-input"],

package/dist/components/container.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"container.js","mappings":"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","names":[],"sources":["src/components/_helpers/container/container.scss?tag=gx-ide-container&encapsulation=shadow","src/components/_helpers/container/container.tsx"],"sourcesContent":["@import \"../../../../node_modules/@genexus/gemini/dist/gemini/globals/mixins.scss\";\n\n/*****************************\nHOST / GENERAL\n*****************************/\n:host {\n --gx-ide-container-elements-spacing: var(--mer-spacing--xs);\n display: block;\n height: 100%;\n box-sizing: border-box;\n}\n.container {\n display: grid;\n height: 100%;\n grid-template-rows: auto 1fr auto;\n box-sizing: border-box;\n}\n.heading,\n.content,\n.footer,\n.footer-above {\n padding: var(--gx-ide-container__padding);\n}\n/PADDING/\n.container--padding-s {\n --gx-ide-container__padding: var(--mer-spacing--xs);\n}\n.container--padding-m {\n --gx-ide-container__padding: var(--mer-spacing--sm);\n}\n.container--padding-l {\n --gx-ide-container__padding: var(--mer-spacing--md);\n}\n/BORDERS/\n.container--display-border {\n border: 1px solid var(--gx-ide-container-border-color);\n}\n.container--display-border-top {\n border-top: 1px solid var(--gx-ide-container-border-color);\n}\n.container--display-border-end {\n border-inline-end: 1px solid var(--gx-ide-container-border-color);\n}\n.container--display-border-bottom {\n border-bottom: 1px solid var(--gx-ide-container-border-color);\n}\n.container--display-border-start {\n border-inline-start: 1px solid var(--gx-ide-container-border-color);\n}\n.container--overflow-hidden-y {\n overflow-y: hidden;\n}\n/****************************\nHEADING\n****************************/\n.heading {\n // @include gxg-flex-justify();\n display: flex;\n flex-direction: column;\n gap: var(--gx-ide-container__padding);\n width: 100%;\n box-sizing: border-box;\n border-bottom: 1px solid var(--gx-ide-container-border-color);\n &--no-border {\n border-bottom: 0;\n }\n &--no-padding {\n padding: 0;\n }\n &--inactive {\n color: var(--gxg-color--disabled);\n }\n &--padding-top {\n padding: var(--gx-ide-container__padding) 0 0 0;\n }\n &--slimmer {\n padding-top: var(--mer-spacing--xs);\n padding-bottom: var(--mer-spacing--xs);\n }\n &--form-text-height {\n .heading__title {\n min-height: var(--gxg-form-text-height);\n justify-content: center;\n }\n }\n &--flex-row {\n flex-direction: row;\n align-items: center;\n justify-content: center;\n }\n}\n/***************************\nCONTENT\n*****************************/\n.content {\n overflow-x: auto;\n display: flex;\n flex-direction: column;\n gap: var(--gx-ide-form-items-gap);\n box-sizing: border-box;\n @include gxg-scrollbar();\n\n &--no-padding {\n padding: 0;\n }\n &--no-border-top {\n border-top: none;\n }\n &--flex {\n display: flex;\n }\n &--no-gap {\n gap: 0;\n }\n &--align-items-start {\n align-items: start;\n }\n &--align-items-center {\n align-items: center;\n }\n &--align-items-end {\n align-items: end;\n }\n &--justify-content-start {\n justify-content: start;\n }\n &--justify-content-center {\n justify-content: center;\n }\n &--justify-content-end {\n justify-content: end;\n }\n &--border-end {\n border-inline-end: 1px solid var(--gx-ide-container-border-color);\n }\n}\n/only content/\n.container--only-content {\n grid-template-rows: 1fr;\n}\n/no header, but has footer/\n.container--no-header:not(.container--only-content) {\n grid-template-rows: 1fr auto;\n}\n/no footer, but has header/\n.container--no-footer:not(.container--only-content) {\n grid-template-rows: auto 1fr;\n}\n/****************************\nFOOTER\n*****************************/\n/ABOVE/\n.footer-above {\n border-top: 1px solid var(--gx-ide-container-border-color);\n &--no-border-top {\n border-top: 0;\n }\n &--slimmer {\n padding-top: var(--mer-spacing--xs);\n padding-bottom: var(--mer-spacing--xs);\n }\n &--no-padding {\n padding: 0;\n }\n}\n/START and END/\n.footer {\n display: flex;\n gap: var(--gx-ide-container-elements-spacing);\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: center;\n border-top: 1px solid var(--gx-ide-container-border-color);\n &__start,\n &__end {\n display: flex;\n gap: var(--gx-ide-container-elements-spacing);\n }\n &--no-border {\n border-top: 0;\n }\n &--no-padding {\n padding: 0;\n }\n &--slimmer {\n padding-top: var(--mer-spacing--xs);\n padding-bottom: var(--mer-spacing--xs);\n }\n}\n","import { Component, Host, h, Prop, Element, State } from \"@stencil/core\";\nimport { TitleAlignment } from \"@genexus/gemini/dist/types/common/types\";\nimport { TitleType } from \"../title/title\";\n@Component({\n tag: \"gx-ide-container\",\n styleUrl: \"container.scss\",\n shadow: true\n})\nexport class GxIdeContainer {\n /\nINDEX:\n1.OWN PROPERTIES\n2.REFERENCE TO ELEMENTS\n3.STATE() VARIABLES\n4.PUBLIC PROPERTY API\n5.EVENTS (EMIT)\n6.COMPONENT LIFECYCLE EVENTS\n7.LISTENERS\n8.PUBLIC METHODS API\n9.LOCAL METHODS\n10.RENDER() FUNCTION\n/\n\n // 1.OWN PROPERTIES //\n\n / GENERAL /\n\n /\n By setting the title to inactive, the color will be gray instead of black.\n /\n @Prop() readonly inactiveTitle: boolean = false;\n\n /\n The title of the container\n /\n @Prop() readonly containerTitle: string;\n\n /\n The title of the container\n /\n @Prop() readonly titleType: TitleType = \"primary\";\n\n /\n Displays a border all around the container\n /\n @Prop() readonly displayBorder: boolean = false;\n\n /\n Displays a border on the top\n /\n @Prop() readonly displayBorderTop: boolean = false;\n\n /\n Displays a border at the end\n /\n @Prop() readonly displayBorderEnd: boolean = false;\n\n /\n Displays a border at on the bottom\n /\n @Prop() readonly displayBorderBottom: boolean = false;\n\n /\n Displays a border at the start\n /\n @Prop() readonly displayBorderStart: boolean = false;\n\n /\n The container general padding (applies to .heading, .content, and .footer)\n /\n @Prop() readonly sectionsPadding: SectionsPadding = \"m\";\n\n / HEADING/\n\n /\n Title alignment\n /\n @Prop() readonly titleAlignment: TitleAlignment = \"center\";\n\n /\n Removes the border bottom from the heading\n /\n @Prop() readonly noHeadingBorder: boolean = false;\n\n /\n Removes the padding from the heading\n /\n @Prop() readonly noHeadingPadding: boolean = false;\n\n /\n Adds padding to the top of the heading\n /\n @Prop() readonly headingPaddingTop: boolean = false;\n\n /\n The heading justification\n /\n @Prop() readonly headingJustify: HeadingJustify = \"center\";\n\n /\n It forces the .heading__title min-height to be as tall as the gxg-form-text height. This is useful when you are displaying two gx-ide-container's on the same row, both of them display a title, and one of them displays a gxg-form-text in the header (usually used to filter content). Without this property set to true, the .heading without a gxg-from-text would be shorter. At the time of writing, this is used on ww-images.\n /\n @Prop() readonly titleHeightAsInput: boolean = false;\n\n /\n Makes the header (.heading) display flex:row, instad of the default flex:column.\n /\n @Prop() readonly flexRow: boolean = false;\n\n / CONTENT /\n\n /\n Makes the content a flex container\n /\n @Prop() readonly flexContent: boolean = false;\n\n /\n Removes the border-top from the content\n /\n @Prop() readonly noContentBorderTop: boolean = false;\n\n /\n Removes the padding from the content\n /\n @Prop() readonly noContentPadding: boolean = false;\n\n /\n Removes the gap from the content\n /\n @Prop() readonly noContentGap: boolean = false;\n\n /\n Align items\n /\n @Prop() readonly alignItems: AlignItems = undefined;\n\n /\n Justify content\n /\n @Prop() readonly justifyContent: JustifyContent = undefined;\n\n /\n Display border end on the content\n /\n @Prop() readonly contentBorderEnd: boolean = false;\n\n / FOOTER ABOVE /\n\n /\n Makes the above footer vertical padding slimmer\n /\n @Prop() readonly slimmerAboveFooter: boolean = false;\n\n /\n Removes the above padding from the footer\n /\n @Prop() readonly noAboveFooterPadding: boolean = false;\n\n /\n Removes the above border top\n /\n @Prop() readonly noBorderAboveFooter: boolean = false;\n\n / FOOTER > START and FOOTER > END/\n\n /\n Makes the footer vertical padding slimmer\n /\n @Prop() readonly slimmerFooter: boolean = false;\n\n /\n Removes the padding from the footer\n /\n @Prop() readonly noFooterPadding: boolean = false;\n\n /\n The footer justification\n /\n @Prop() readonly footerJustify: FooterJustify = \"end\";\n\n /\n Removes the border top from the footer\n /\n @Prop() readonly noBorderFooter: boolean = false;\n\n // 2. REFERENCE TO ELEMENTS //\n\n @Element() el: HTMLGxIdeContainerElement;\n\n // 3.STATE() VARIABLES //\n\n /\n A boolean variable indicating if the component has or not any content for the 'header' slot\n /\n @State() hasHeaderSlot = false;\n\n /\n A boolean variable indicating if the component has or not any content slotted content (regular slotted content, without 'slot' attribute)\n /\n @State() hasSlottedContent = false;\n\n /\n A boolean variable indicating if the component has or not any content for the 'footer' slot\n /\n @State() hasFooterSlot = false;\n\n /\n A boolean variable indicating if the component has or not any content for the 'footer' slot\n /\n @State() hasAboveFooterSlot = false;\n\n /\n A boolean variable indicating that the container only has the heading section\n /\n @State() hasOnlyHeading = false;\n\n /\n A boolean variable indicating that the container only has the content section\n /\n @State() hasOnlyContent = false;\n\n /\n A boolean variable indicating that the container only has the footer section\n */\n @State() hasOnlyFooter = false;\n\n // 4.PUBLIC PROPERTY API //\n\n // 5.EVENTS (EMIT) //\n\n // 6.COMPONENT LIFECYCLE EVENTS //\n\n componentWillLoad() {\n this.evaluateSlots();\n }\n\n // 7.LISTENERS //\n\n // 8.PUBLIC METHODS API //\n\n // 9.LOCAL METHODS //\n\n private evaluateSlots() {\n // header\n const headerSlot = this.el.querySelectorAll(':scope > [slot=\"header\"]');\n if (headerSlot.length) {\n this.hasHeaderSlot = true;\n }\n // content\n const slottedContent = this.el.querySelectorAll(\":scope > :not([slot])\");\n if (slottedContent.length) {\n this.hasSlottedContent = true;\n }\n // footer\n const footerAboveSlot = this.el.querySelectorAll(\n ':scope > [slot=\"footer-above\"]'\n );\n const footerStartSlot = this.el.querySelectorAll(\n ':scope > [slot=\"footer-start\"]'\n );\n const footerEndSlot = this.el.querySelectorAll(\n ':scope > [slot=\"footer-end\"]'\n );\n if (footerStartSlot.length \|\| footerEndSlot.length) {\n this.hasFooterSlot = true;\n }\n if (footerAboveSlot.length) {\n this.hasAboveFooterSlot = true;\n }\n }\n\n private evaluateSections() {\n // has only heading\n if (\n !this.hasSlottedContent &&\n !this.hasFooterSlot &&\n !this.hasAboveFooterSlot\n ) {\n this.hasOnlyHeading = true;\n }\n // has only content\n if (\n this.hasSlottedContent &&\n !this.containerTitle &&\n !this.hasHeaderSlot &&\n !this.hasAboveFooterSlot &&\n !this.hasFooterSlot\n ) {\n this.hasOnlyContent = true;\n }\n // has only footer\n if (\n !this.hasSlottedContent &&\n !this.containerTitle &&\n !this.hasAboveFooterSlot\n ) {\n this.hasOnlyFooter = true;\n }\n }\n\n private headingClasses = (): string \| { [className: string]: boolean } => {\n return {\n \"heading\": true,\n \"heading--inactive\": this.inactiveTitle,\n \"heading--slimmer\": this.titleType === \"secondary\",\n \"heading--no-border\": this.noHeadingBorder \|\| this.hasOnlyHeading,\n [`heading--justify-${this.headingJustify}`]: true,\n \"heading--no-padding\": this.noHeadingPadding,\n \"heading--padding-top\":\n this.headingPaddingTop && this.containerTitle?.length > 0,\n \"heading--form-text-height\": this.titleHeightAsInput,\n \"heading--flex-row\": this.flexRow\n };\n };\n\n private contentClasses = (): string \| { [className: string]: boolean } => {\n return {\n \"content\": true,\n \"content--flex\": this.flexContent,\n \"content--no-padding\": this.noContentPadding,\n \"content--no-gap\": this.noContentGap,\n \"content--no-border-top\": this.noContentBorderTop,\n \"content--border-end\": this.contentBorderEnd,\n [`content--align-items-${this.alignItems}`]:\n this.alignItems !== undefined,\n [`content--justify-content-${this.justifyContent}`]:\n this.justifyContent !== undefined\n };\n };\n\n private aboveFooter = (): JSX.Element \| null => {\n return this.hasAboveFooterSlot ? (\n <footer\n class={{\n \"footer-above\": true,\n \"footer-above--no-border-top\": this.noBorderAboveFooter,\n \"footer-above--no-padding\": this.noAboveFooterPadding,\n \"footer-above--slimmer\": this.slimmerFooter\n }}\n >\n <slot name=\"footer-above\"></slot>\n </footer>\n ) : null;\n };\n\n private footer = (): JSX.Element \| null => {\n return this.hasFooterSlot ? (\n <footer\n class={{\n \"footer\": true,\n \"footer--no-border\":\n this.hasOnlyFooter \|\|\n !this.hasSlottedContent \|\|\n this.noBorderFooter,\n [`footer--justify-${this.footerJustify}`]: true,\n [`footer--justify-${this.footerJustify}`]: true,\n \"footer--no-padding\": this.noFooterPadding,\n \"footer--slimmer\": this.slimmerFooter\n }}\n >\n <div class=\"footer__start\">\n <slot name=\"footer-start\"></slot>\n </div>\n <div class=\"footer__end\">\n <slot name=\"footer-end\"></slot>\n </div>\n </footer>\n ) : null;\n };\n\n // 10.RENDER() FUNCTION //\n\n render() {\n this.evaluateSections();\n const result = [\n this.containerTitle \|\| this.hasHeaderSlot ? (\n <header class={this.headingClasses()}>\n {this.containerTitle ? (\n <gx-ide-title\n class=\"heading__title\"\n type={this.titleType}\n alignment={this.titleAlignment as any}\n >\n {this.containerTitle}\n </gx-ide-title>\n ) : null}\n {this.hasHeaderSlot ? (\n <div class=\"heading__inner-wrapper\">\n <slot name=\"header\"></slot>\n </div>\n ) : null}\n </header>\n ) : null,\n this.hasSlottedContent ? (\n <div class={this.contentClasses()} part=\"content\">\n <slot></slot>\n </div>\n ) : null,\n this.aboveFooter(),\n this.footer()\n ];\n\n return (\n <Host>\n <div\n class={{\n \"container\": true,\n [`container--padding-${this.sectionsPadding}`]: true,\n \"container--display-border\": this.displayBorder,\n \"container--display-border-top\": this.displayBorderTop,\n \"container--display-border-end\": this.displayBorderEnd,\n \"container--display-border-bottom\": this.displayBorderBottom,\n \"container--display-border-start\": this.displayBorderStart,\n \"container--only-content\": this.hasOnlyContent,\n \"container--no-header\": !this.hasHeaderSlot && !this.containerTitle,\n \"container--no-footer\": !this.hasFooterSlot\n }}\n >\n {result}\n </div>\n </Host>\n );\n }\n}\n\nexport type HeadingJustify = \"start\" \| \"center\" \| \"end\";\nexport type FooterJustify = \"start\" \| \"center\" \| \"end\";\nexport type SectionsPadding = \"s\" \| \"m\" \| \"l\";\nexport type AlignItems = \"start\" \| \"center\" \| \"end\";\nexport type JustifyContent = \"start\" \| \"center\" \| \"end\";\n"],"version":3}
1	+ {"file":"container.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,2lXAA2lX;;MCQnmX,cAAc;;;;;QAgSjB,mBAAc,GAAG;;YACvB,OAAO;gBACL,SAAS,EAAE,IAAI;gBACf,mBAAmB,EAAE,IAAI,CAAC,aAAa;gBACvC,kBAAkB,EAAE,IAAI,CAAC,SAAS,KAAK,WAAW;gBAClD,oBAAoB,EAAE,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,cAAc;gBACjE,CAAC,oBAAoB,IAAI,CAAC,cAAc,EAAE,GAAG,IAAI;gBACjD,qBAAqB,EAAE,IAAI,CAAC,gBAAgB;gBAC5C,+BAA+B,EAAE,IAAI,CAAC,wBAAwB;gBAC9D,iBAAiB,EAAE,IAAI,CAAC,YAAY;gBACpC,sBAAsB,EACpB,IAAI,CAAC,iBAAiB,IAAI,CAAA,MAAA,IAAI,CAAC,cAAc,0CAAE,MAAM,IAAG,CAAC;gBAC3D,2BAA2B,EAAE,IAAI,CAAC,kBAAkB;gBACpD,mBAAmB,EAAE,IAAI,CAAC,OAAO;aAClC,CAAC;SACH,CAAC;QAEM,mBAAc,GAAG;YACvB,OAAO;gBACL,SAAS,EAAE,IAAI;gBACf,eAAe,EAAE,IAAI,CAAC,WAAW;gBACjC,qBAAqB,EAAE,IAAI,CAAC,gBAAgB;gBAC5C,iBAAiB,EAAE,IAAI,CAAC,YAAY;gBACpC,wBAAwB,EAAE,IAAI,CAAC,kBAAkB;gBACjD,qBAAqB,EAAE,IAAI,CAAC,gBAAgB;gBAC5C,CAAC,wBAAwB,IAAI,CAAC,UAAU,EAAE,GACxC,IAAI,CAAC,UAAU,KAAK,SAAS;gBAC/B,CAAC,4BAA4B,IAAI,CAAC,cAAc,EAAE,GAChD,IAAI,CAAC,cAAc,KAAK,SAAS;aACpC,CAAC;SACH,CAAC;QAEM,gBAAW,GAAG;YACpB,OAAO,IAAI,CAAC,kBAAkB,IAC5B,cACE,KAAK,EAAE;oBACL,cAAc,EAAE,IAAI;oBACpB,6BAA6B,EAAE,IAAI,CAAC,mBAAmB;oBACvD,0BAA0B,EAAE,IAAI,CAAC,oBAAoB;oBACrD,uBAAuB,EAAE,IAAI,CAAC,aAAa;iBAC5C,IAED,YAAM,IAAI,EAAC,cAAc,GAAQ,CAC1B,IACP,IAAI,CAAC;SACV,CAAC;QAEM,WAAM,GAAG;YACf,OAAO,IAAI,CAAC,aAAa,IACvB,cACE,KAAK,EAAE;oBACL,QAAQ,EAAE,IAAI;oBACd,mBAAmB,EACjB,IAAI,CAAC,aAAa;wBAClB,CAAC,IAAI,CAAC,iBAAiB;wBACvB,IAAI,CAAC,cAAc;oBACrB,CAAC,mBAAmB,IAAI,CAAC,aAAa,EAAE,GAAG,IAAI;oBAC/C,CAAC,mBAAmB,IAAI,CAAC,aAAa,EAAE,GAAG,IAAI;oBAC/C,oBAAoB,EAAE,IAAI,CAAC,eAAe;oBAC1C,iBAAiB,EAAE,IAAI,CAAC,aAAa;iBACtC,IAED,WAAK,KAAK,EAAC,eAAe,IACxB,YAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B,EACN,WAAK,KAAK,EAAC,aAAa,IACtB,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B,CACC,IACP,IAAI,CAAC;SACV,CAAC;6BA9VwC,KAAK;;yBAUP,SAAS;6BAKP,KAAK;gCAKF,KAAK;gCAKL,KAAK;mCAKF,KAAK;kCAKN,KAAK;+BAKA,GAAG;8BAOL,QAAQ;+BAKd,KAAK;4BAKR,KAAK;gCAKD,KAAK;wCAKG,KAAK;iCAKZ,KAAK;8BAKD,QAAQ;kCAKX,KAAK;uBAKhB,KAAK;2BAOD,KAAK;kCAKE,KAAK;gCAKP,KAAK;4BAKT,KAAK;0BAKJ,SAAS;8BAKD,SAAS;gCAKd,KAAK;kCAOH,KAAK;oCAKH,KAAK;mCAKN,KAAK;6BAOX,KAAK;+BAKH,KAAK;6BAKD,KAAK;8BAKV,KAAK;6BAWvB,KAAK;iCAKD,KAAK;6BAKT,KAAK;kCAKA,KAAK;8BAKT,KAAK;8BAKL,KAAK;6BAKN,KAAK;;;;;IAQ9B,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;;;;IAQO,aAAa;;QAEnB,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,0BAA0B,CAAC,CAAC;QACxE,IAAI,UAAU,CAAC,MAAM,EAAE;YACrB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;SAC3B;;QAED,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC;QAC1E,IAAI,cAAc,CAAC,MAAM,EAAE;YACzB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;SAC/B;;QAED,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAC9C,iCAAiC,CAClC,CAAC;QACF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAC9C,iCAAiC,CAClC,CAAC;QACF,MAAM,aAAa,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAC5C,+BAA+B,CAChC,CAAC;QACF,IAAI,eAAe,CAAC,MAAM,IAAI,aAAa,CAAC,MAAM,EAAE;YAClD,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;SAC3B;QACD,IAAI,eAAe,CAAC,MAAM,EAAE;YAC1B,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;SAChC;KACF;IAEO,gBAAgB;;QAEtB,IACE,CAAC,IAAI,CAAC,iBAAiB;YACvB,CAAC,IAAI,CAAC,aAAa;YACnB,CAAC,IAAI,CAAC,kBAAkB,EACxB;YACA,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;SAC5B;;QAED,IACE,IAAI,CAAC,iBAAiB;YACtB,CAAC,IAAI,CAAC,cAAc;YACpB,CAAC,IAAI,CAAC,aAAa;YACnB,CAAC,IAAI,CAAC,kBAAkB;YACxB,CAAC,IAAI,CAAC,aAAa,EACnB;YACA,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;SAC5B;;QAED,IACE,CAAC,IAAI,CAAC,iBAAiB;YACvB,CAAC,IAAI,CAAC,cAAc;YACpB,CAAC,IAAI,CAAC,kBAAkB,EACxB;YACA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;SAC3B;KACF;;IA4ED,MAAM;QACJ,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,MAAM,MAAM,GAAG;YACb,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,aAAa,IACvC,cAAQ,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,IACjC,IAAI,CAAC,cAAc,IAClB,oBACE,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,SAAS,EAAE,IAAI,CAAC,cAAqB,IAEpC,IAAI,CAAC,cAAc,CACP,IACb,IAAI,EACP,IAAI,CAAC,aAAa,IACjB,WAAK,KAAK,EAAC,wBAAwB,IACjC,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,IACJ,IAAI,CACD,IACP,IAAI;YACR,IAAI,CAAC,iBAAiB,IACpB,WAAK,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAAE,IAAI,EAAC,SAAS,IAC/C,eAAa,CACT,IACJ,IAAI;YACR,IAAI,CAAC,WAAW,EAAE;YAClB,IAAI,CAAC,MAAM,EAAE;SACd,CAAC;QAEF,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;gBACjB,CAAC,sBAAsB,IAAI,CAAC,eAAe,EAAE,GAAG,IAAI;gBACpD,2BAA2B,EAAE,IAAI,CAAC,aAAa;gBAC/C,+BAA+B,EAAE,IAAI,CAAC,gBAAgB;gBACtD,+BAA+B,EAAE,IAAI,CAAC,gBAAgB;gBACtD,kCAAkC,EAAE,IAAI,CAAC,mBAAmB;gBAC5D,iCAAiC,EAAE,IAAI,CAAC,kBAAkB;gBAC1D,yBAAyB,EAAE,IAAI,CAAC,cAAc;gBAC9C,sBAAsB,EAAE,CAAC,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,cAAc;gBACnE,sBAAsB,EAAE,CAAC,IAAI,CAAC,aAAa;aAC5C,IAEA,MAAM,CACH,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/_helpers/container/container.scss?tag=gx-ide-container&encapsulation=shadow","src/components/_helpers/container/container.tsx"],"sourcesContent":["@import \"../../../../node_modules/@genexus/gemini/dist/gemini/globals/mixins.scss\";\n\n/*****************************\nHOST / GENERAL\n*****************************/\n:host {\n --gx-ide-container-elements-spacing: var(--mer-spacing--xs);\n display: block;\n height: 100%;\n box-sizing: border-box;\n}\n.container {\n display: grid;\n height: 100%;\n grid-template-rows: auto 1fr auto;\n box-sizing: border-box;\n}\n.heading,\n.content,\n.footer,\n.footer-above {\n padding: var(--gx-ide-container__padding);\n}\n/PADDING/\n.container--padding-s {\n --gx-ide-container__padding: var(--mer-spacing--xs);\n}\n.container--padding-m {\n --gx-ide-container__padding: var(--mer-spacing--sm);\n}\n.container--padding-l {\n --gx-ide-container__padding: var(--mer-spacing--md);\n}\n/BORDERS/\n.container--display-border {\n border: 1px solid var(--gx-ide-container-border-color);\n}\n.container--display-border-top {\n border-top: 1px solid var(--gx-ide-container-border-color);\n}\n.container--display-border-end {\n border-inline-end: 1px solid var(--gx-ide-container-border-color);\n}\n.container--display-border-bottom {\n border-bottom: 1px solid var(--gx-ide-container-border-color);\n}\n.container--display-border-start {\n border-inline-start: 1px solid var(--gx-ide-container-border-color);\n}\n.container--overflow-hidden-y {\n overflow-y: hidden;\n}\n/****************************\nHEADING\n****************************/\n.heading {\n // @include gxg-flex-justify();\n display: flex;\n flex-direction: column;\n gap: var(--gx-ide-container__padding);\n width: 100%;\n box-sizing: border-box;\n border-bottom: 1px solid var(--gx-ide-container-border-color);\n &--no-border {\n border-bottom: 0;\n }\n &--no-padding {\n padding: 0;\n }\n &--no-padding-block-end {\n padding-block-end: 0;\n }\n &--no-gap {\n gap: 0;\n }\n &--inactive {\n color: var(--gxg-color--disabled);\n }\n &--padding-top {\n padding: var(--gx-ide-container__padding) 0 0 0;\n }\n &--slimmer {\n padding-top: var(--mer-spacing--xs);\n padding-bottom: var(--mer-spacing--xs);\n }\n &--form-text-height {\n .heading__title {\n min-height: var(--gxg-form-text-height);\n justify-content: center;\n }\n }\n &--flex-row {\n flex-direction: row;\n align-items: center;\n justify-content: center;\n }\n}\n/***************************\nCONTENT\n*****************************/\n.content {\n overflow-x: auto;\n display: flex;\n flex-direction: column;\n gap: var(--gx-ide-form-items-gap);\n box-sizing: border-box;\n @include gxg-scrollbar();\n\n &--no-padding {\n padding: 0;\n }\n &--no-border-top {\n border-top: none;\n }\n &--flex {\n display: flex;\n }\n &--no-gap {\n gap: 0;\n }\n &--align-items-start {\n align-items: start;\n }\n &--align-items-center {\n align-items: center;\n }\n &--align-items-end {\n align-items: end;\n }\n &--justify-content-start {\n justify-content: start;\n }\n &--justify-content-center {\n justify-content: center;\n }\n &--justify-content-end {\n justify-content: end;\n }\n &--border-end {\n border-inline-end: 1px solid var(--gx-ide-container-border-color);\n }\n}\n/only content/\n.container--only-content {\n grid-template-rows: 1fr;\n}\n/no header, but has footer/\n.container--no-header:not(.container--only-content) {\n grid-template-rows: 1fr auto;\n}\n/no footer, but has header/\n.container--no-footer:not(.container--only-content) {\n grid-template-rows: auto 1fr;\n}\n/****************************\nFOOTER\n*****************************/\n/ABOVE/\n.footer-above {\n border-top: 1px solid var(--gx-ide-container-border-color);\n &--no-border-top {\n border-top: 0;\n }\n &--slimmer {\n padding-top: var(--mer-spacing--xs);\n padding-bottom: var(--mer-spacing--xs);\n }\n &--no-padding {\n padding: 0;\n }\n}\n/START and END/\n.footer {\n display: flex;\n gap: var(--gx-ide-container-elements-spacing);\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: center;\n border-top: 1px solid var(--gx-ide-container-border-color);\n &__start,\n &__end {\n display: flex;\n gap: var(--gx-ide-container-elements-spacing);\n }\n &--no-border {\n border-top: 0;\n }\n &--no-padding {\n padding: 0;\n }\n &--slimmer {\n padding-top: var(--mer-spacing--xs);\n padding-bottom: var(--mer-spacing--xs);\n }\n}\n","import { Component, Host, h, Prop, Element, State } from \"@stencil/core\";\nimport { TitleAlignment } from \"@genexus/gemini/dist/types/common/types\";\nimport { TitleType } from \"../title/title\";\n@Component({\n tag: \"gx-ide-container\",\n styleUrl: \"container.scss\",\n shadow: true\n})\nexport class GxIdeContainer {\n // 1.OWN PROPERTIES //\n\n / GENERAL /\n\n /\n By setting the title to inactive, the color will be gray instead of black.\n /\n @Prop() readonly inactiveTitle: boolean = false;\n\n /\n The title of the container\n /\n @Prop() readonly containerTitle: string;\n\n /\n The title of the container\n /\n @Prop() readonly titleType: TitleType = \"primary\";\n\n /\n Displays a border all around the container\n /\n @Prop() readonly displayBorder: boolean = false;\n\n /\n Displays a border on the top\n /\n @Prop() readonly displayBorderTop: boolean = false;\n\n /\n Displays a border at the end\n /\n @Prop() readonly displayBorderEnd: boolean = false;\n\n /\n Displays a border at on the bottom\n /\n @Prop() readonly displayBorderBottom: boolean = false;\n\n /\n Displays a border at the start\n /\n @Prop() readonly displayBorderStart: boolean = false;\n\n /\n The container general padding (applies to .heading, .content, and .footer)\n /\n @Prop() readonly sectionsPadding: SectionsPadding = \"m\";\n\n / HEADING/\n\n /\n Title alignment\n /\n @Prop() readonly titleAlignment: TitleAlignment = \"center\";\n\n /\n Removes the border bottom from the heading\n /\n @Prop() readonly noHeadingBorder: boolean = false;\n\n /\n Removes the heading gap\n /\n @Prop() readonly noHeadingGap: boolean = false;\n\n /\n Removes the padding from the heading\n /\n @Prop() readonly noHeadingPadding: boolean = false;\n\n /\n Removes the padding block end from the heading\n /\n @Prop() readonly noHeadingPaddingBlockEnd: boolean = false;\n\n /\n Adds padding to the top of the heading\n /\n @Prop() readonly headingPaddingTop: boolean = false;\n\n /\n The heading justification\n /\n @Prop() readonly headingJustify: HeadingJustify = \"center\";\n\n /\n It forces the .heading__title min-height to be as tall as the gxg-form-text height. This is useful when you are displaying two gx-ide-container's on the same row, both of them display a title, and one of them displays a gxg-form-text in the header (usually used to filter content). Without this property set to true, the .heading without a gxg-from-text would be shorter. At the time of writing, this is used on ww-images.\n /\n @Prop() readonly titleHeightAsInput: boolean = false;\n\n /\n Makes the header (.heading) display flex:row, instad of the default flex:column.\n /\n @Prop() readonly flexRow: boolean = false;\n\n / CONTENT /\n\n /\n Makes the content a flex container\n /\n @Prop() readonly flexContent: boolean = false;\n\n /\n Removes the border-top from the content\n /\n @Prop() readonly noContentBorderTop: boolean = false;\n\n /\n Removes the padding from the content\n /\n @Prop() readonly noContentPadding: boolean = false;\n\n /\n Removes the gap from the content\n /\n @Prop() readonly noContentGap: boolean = false;\n\n /\n Align items\n /\n @Prop() readonly alignItems: AlignItems = undefined;\n\n /\n Justify content\n /\n @Prop() readonly justifyContent: JustifyContent = undefined;\n\n /\n Display border end on the content\n /\n @Prop() readonly contentBorderEnd: boolean = false;\n\n / FOOTER ABOVE /\n\n /\n Makes the above footer vertical padding slimmer\n /\n @Prop() readonly slimmerAboveFooter: boolean = false;\n\n /\n Removes the above padding from the footer\n /\n @Prop() readonly noAboveFooterPadding: boolean = false;\n\n /\n Removes the above border top\n /\n @Prop() readonly noBorderAboveFooter: boolean = false;\n\n / FOOTER > START and FOOTER > END/\n\n /\n Makes the footer vertical padding slimmer\n /\n @Prop() readonly slimmerFooter: boolean = false;\n\n /\n Removes the padding from the footer\n /\n @Prop() readonly noFooterPadding: boolean = false;\n\n /\n The footer justification\n /\n @Prop() readonly footerJustify: FooterJustify = \"end\";\n\n /\n Removes the border top from the footer\n /\n @Prop() readonly noBorderFooter: boolean = false;\n\n // 2. REFERENCE TO ELEMENTS //\n\n @Element() el: HTMLGxIdeContainerElement;\n\n // 3.STATE() VARIABLES //\n\n /\n A boolean variable indicating if the component has or not any content for the 'header' slot\n /\n @State() hasHeaderSlot = false;\n\n /\n A boolean variable indicating if the component has or not any content slotted content (regular slotted content, without 'slot' attribute)\n /\n @State() hasSlottedContent = false;\n\n /\n A boolean variable indicating if the component has or not any content for the 'footer' slot\n /\n @State() hasFooterSlot = false;\n\n /\n A boolean variable indicating if the component has or not any content for the 'footer' slot\n /\n @State() hasAboveFooterSlot = false;\n\n /\n A boolean variable indicating that the container only has the heading section\n /\n @State() hasOnlyHeading = false;\n\n /\n A boolean variable indicating that the container only has the content section\n /\n @State() hasOnlyContent = false;\n\n /\n A boolean variable indicating that the container only has the footer section\n */\n @State() hasOnlyFooter = false;\n\n // 4.PUBLIC PROPERTY API //\n\n // 5.EVENTS (EMIT) //\n\n // 6.COMPONENT LIFECYCLE EVENTS //\n\n componentWillLoad() {\n this.evaluateSlots();\n }\n\n // 7.LISTENERS //\n\n // 8.PUBLIC METHODS API //\n\n // 9.LOCAL METHODS //\n\n private evaluateSlots() {\n // header\n const headerSlot = this.el.querySelectorAll(':scope > [slot=\"header\"]');\n if (headerSlot.length) {\n this.hasHeaderSlot = true;\n }\n // content\n const slottedContent = this.el.querySelectorAll(\":scope > :not([slot])\");\n if (slottedContent.length) {\n this.hasSlottedContent = true;\n }\n // footer\n const footerAboveSlot = this.el.querySelectorAll(\n ':scope > [slot=\"footer-above\"]'\n );\n const footerStartSlot = this.el.querySelectorAll(\n ':scope > [slot=\"footer-start\"]'\n );\n const footerEndSlot = this.el.querySelectorAll(\n ':scope > [slot=\"footer-end\"]'\n );\n if (footerStartSlot.length \|\| footerEndSlot.length) {\n this.hasFooterSlot = true;\n }\n if (footerAboveSlot.length) {\n this.hasAboveFooterSlot = true;\n }\n }\n\n private evaluateSections() {\n // has only heading\n if (\n !this.hasSlottedContent &&\n !this.hasFooterSlot &&\n !this.hasAboveFooterSlot\n ) {\n this.hasOnlyHeading = true;\n }\n // has only content\n if (\n this.hasSlottedContent &&\n !this.containerTitle &&\n !this.hasHeaderSlot &&\n !this.hasAboveFooterSlot &&\n !this.hasFooterSlot\n ) {\n this.hasOnlyContent = true;\n }\n // has only footer\n if (\n !this.hasSlottedContent &&\n !this.containerTitle &&\n !this.hasAboveFooterSlot\n ) {\n this.hasOnlyFooter = true;\n }\n }\n\n private headingClasses = (): string \| { [className: string]: boolean } => {\n return {\n \"heading\": true,\n \"heading--inactive\": this.inactiveTitle,\n \"heading--slimmer\": this.titleType === \"secondary\",\n \"heading--no-border\": this.noHeadingBorder \|\| this.hasOnlyHeading,\n [`heading--justify-${this.headingJustify}`]: true,\n \"heading--no-padding\": this.noHeadingPadding,\n \"heading--no-padding-block-end\": this.noHeadingPaddingBlockEnd,\n \"heading--no-gap\": this.noHeadingGap,\n \"heading--padding-top\":\n this.headingPaddingTop && this.containerTitle?.length > 0,\n \"heading--form-text-height\": this.titleHeightAsInput,\n \"heading--flex-row\": this.flexRow\n };\n };\n\n private contentClasses = (): string \| { [className: string]: boolean } => {\n return {\n \"content\": true,\n \"content--flex\": this.flexContent,\n \"content--no-padding\": this.noContentPadding,\n \"content--no-gap\": this.noContentGap,\n \"content--no-border-top\": this.noContentBorderTop,\n \"content--border-end\": this.contentBorderEnd,\n [`content--align-items-${this.alignItems}`]:\n this.alignItems !== undefined,\n [`content--justify-content-${this.justifyContent}`]:\n this.justifyContent !== undefined\n };\n };\n\n private aboveFooter = (): JSX.Element \| null => {\n return this.hasAboveFooterSlot ? (\n <footer\n class={{\n \"footer-above\": true,\n \"footer-above--no-border-top\": this.noBorderAboveFooter,\n \"footer-above--no-padding\": this.noAboveFooterPadding,\n \"footer-above--slimmer\": this.slimmerFooter\n }}\n >\n <slot name=\"footer-above\"></slot>\n </footer>\n ) : null;\n };\n\n private footer = (): JSX.Element \| null => {\n return this.hasFooterSlot ? (\n <footer\n class={{\n \"footer\": true,\n \"footer--no-border\":\n this.hasOnlyFooter \|\|\n !this.hasSlottedContent \|\|\n this.noBorderFooter,\n [`footer--justify-${this.footerJustify}`]: true,\n [`footer--justify-${this.footerJustify}`]: true,\n \"footer--no-padding\": this.noFooterPadding,\n \"footer--slimmer\": this.slimmerFooter\n }}\n >\n <div class=\"footer__start\">\n <slot name=\"footer-start\"></slot>\n </div>\n <div class=\"footer__end\">\n <slot name=\"footer-end\"></slot>\n </div>\n </footer>\n ) : null;\n };\n\n // 10.RENDER() FUNCTION //\n\n render() {\n this.evaluateSections();\n const result = [\n this.containerTitle \|\| this.hasHeaderSlot ? (\n <header class={this.headingClasses()}>\n {this.containerTitle ? (\n <gx-ide-title\n class=\"heading__title\"\n type={this.titleType}\n alignment={this.titleAlignment as any}\n >\n {this.containerTitle}\n </gx-ide-title>\n ) : null}\n {this.hasHeaderSlot ? (\n <div class=\"heading__inner-wrapper\">\n <slot name=\"header\"></slot>\n </div>\n ) : null}\n </header>\n ) : null,\n this.hasSlottedContent ? (\n <div class={this.contentClasses()} part=\"content\">\n <slot></slot>\n </div>\n ) : null,\n this.aboveFooter(),\n this.footer()\n ];\n\n return (\n <Host>\n <div\n class={{\n \"container\": true,\n [`container--padding-${this.sectionsPadding}`]: true,\n \"container--display-border\": this.displayBorder,\n \"container--display-border-top\": this.displayBorderTop,\n \"container--display-border-end\": this.displayBorderEnd,\n \"container--display-border-bottom\": this.displayBorderBottom,\n \"container--display-border-start\": this.displayBorderStart,\n \"container--only-content\": this.hasOnlyContent,\n \"container--no-header\": !this.hasHeaderSlot && !this.containerTitle,\n \"container--no-footer\": !this.hasFooterSlot\n }}\n >\n {result}\n </div>\n </Host>\n );\n }\n}\n\nexport type HeadingJustify = \"start\" \| \"center\" \| \"end\";\nexport type FooterJustify = \"start\" \| \"center\" \| \"end\";\nexport type SectionsPadding = \"s\" \| \"m\" \| \"l\";\nexport type AlignItems = \"start\" \| \"center\" \| \"end\";\nexport type JustifyContent = \"start\" \| \"center\" \| \"end\";\n"],"version":3}

package/dist/components/dropdown.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { f as focusComposedPath } from './helpers.js';
 import { i as isPseudoElementImg } from './utils.js';
 import { d as defineCustomElement$1 } from './popover.js';
-const dropdownCss = ":where(button){all:unset}*,::after,::before{box-sizing:border-box}:host{--ch-dropdown-item__image-size:0.875em;--separation:0px;--separation-x:var(--separation);--separation-y:var(--separation);display:flex;position:relative;inline-size:100%;block-size:100%}.expandable-button{display:flex;align-items:center;justify-content:center;align-self:center;position:relative;inline-size:100%;block-size:100%;cursor:pointer;z-index:108}.expandable-button:focus-visible{outline:1px solid currentColor}::slotted([slot=action]){pointer-events:none}.list{display:flex;flex-direction:column}.action{display:flex;align-items:center;inline-size:100%;block-size:100%;cursor:pointer;text-align:start}.action:focus-visible{outline:1px solid currentColor}.pseudo-img--start::before,.pseudo-img--end::after{content:\"\";display:block;inline-size:var(--ch-dropdown-item__image-size);block-size:var(--ch-dropdown-item__image-size);min-inline-size:var(--ch-dropdown-item__image-size)}.start-img-type--background::before{background:no-repeat center/100% var(--ch-dropdown-item-start-img)}.end-img-type--background::after{background:no-repeat center/100% var(--ch-dropdown-item-end-img)}.start-img-type--mask::before{-webkit-mask:var(--ch-dropdown-item-start-img) 50% 50%/100% 100% no-repeat;background-color:currentColor}.end-img-type--mask::after{-webkit-mask:var(--ch-dropdown-item-end-img) 50% 50%/100% 100% no-repeat;background-color:currentColor}.content{inline-size:100%}";
+const dropdownCss = ":where(a,button){all:unset}a,button{display:flex;align-items:center;inline-size:100%;block-size:100%;cursor:pointer}*,::after,::before{box-sizing:border-box}:host{--ch-dropdown-item__image-size:0.875em;--ch-dropdown-item__background-image-size:100%;--ch-dropdown-separation:0px;--ch-dropdown-separation-x:var(--ch-dropdown-separation);--ch-dropdown-separation-y:var(--ch-dropdown-separation);display:flex;position:relative;inline-size:100%;block-size:100%}.expandable-button{justify-content:center;align-self:center;position:relative;z-index:108}::slotted([slot=action]){pointer-events:none}ch-popover{--ch-popover-separation-x:var(--ch-dropdown-separation-x);--ch-popover-separation-y:var(--ch-dropdown-separation-y)}.list{display:flex;flex-direction:column}.action{text-align:start}.pseudo-img--start::before,.pseudo-img--end::after{content:\"\";display:block;inline-size:var(--ch-dropdown-item__image-size);block-size:var(--ch-dropdown-item__image-size);min-inline-size:var(--ch-dropdown-item__image-size)}.pseudo-img--start{--ch-dropdown-item-img:var(--ch-dropdown-item-start-img)}.pseudo-img--end{--ch-dropdown-item-img:var(--ch-dropdown-item-end-img)}.start-img-type--background::before,.end-img-type--background::after{background:no-repeat center/var(--ch-dropdown-item__background-image-size) var(--ch-dropdown-item-img)}.start-img-type--mask::before,.end-img-type--mask::after{-webkit-mask:var(--ch-dropdown-item-img) 50% 50%/var(--ch-dropdown-item__background-image-size) var(--ch-dropdown-item__background-image-size) no-repeat;background-color:currentColor}.content{inline-size:100%}";
 var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
     if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");

package/dist/components/dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dropdown.js","mappings":"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","names":[],"sources":["node_modules/@genexus/chameleon-controls-library/dist/collection/components/dropdown/dropdown.css?tag=ch-dropdown&encapsulation=shadow","node_modules/@genexus/chameleon-controls-library/dist/collection/components/dropdown/dropdown.js"],"sourcesContent":[":where(button) {\n all: unset;\n}\n\n,\n::after,\n::before {\n box-sizing: border-box;\n}\n\n:host {\n --ch-dropdown-item__image-size: 0.875em;\n --separation: 0px;\n --separation-x: var(--separation);\n --separation-y: var(--separation);\n display: flex;\n position: relative;\n inline-size: 100%;\n block-size: 100%;\n}\n\n.expandable-button {\n display: flex;\n align-items: center;\n justify-content: center;\n align-self: center;\n position: relative;\n inline-size: 100%;\n block-size: 100%;\n cursor: pointer;\n z-index: 108;\n}\n.expandable-button:focus-visible {\n outline: 1px solid currentColor;\n}\n\n::slotted([slot=action]) {\n pointer-events: none;\n}\n\n.list {\n display: flex;\n flex-direction: column;\n}\n\n.action {\n display: flex;\n align-items: center;\n inline-size: 100%;\n block-size: 100%;\n cursor: pointer;\n text-align: start;\n}\n.action:focus-visible {\n outline: 1px solid currentColor;\n}\n\n.pseudo-img--start::before,\n.pseudo-img--end::after {\n content: \"\";\n display: block;\n inline-size: var(--ch-dropdown-item__image-size);\n block-size: var(--ch-dropdown-item__image-size);\n min-inline-size: var(--ch-dropdown-item__image-size);\n}\n\n.start-img-type--background::before {\n background: no-repeat center/100% var(--ch-dropdown-item-start-img);\n}\n\n.end-img-type--background::after {\n background: no-repeat center/100% var(--ch-dropdown-item-end-img);\n}\n\n.start-img-type--mask::before {\n -webkit-mask: var(--ch-dropdown-item-start-img) 50% 50%/100% 100% no-repeat;\n background-color: currentColor;\n}\n\n.end-img-type--mask::after {\n -webkit-mask: var(--ch-dropdown-item-end-img) 50% 50%/100% 100% no-repeat;\n background-color: currentColor;\n}\n\n.content {\n inline-size: 100%;\n}","import { Host, h } from \"@stencil/core\";\nimport { focusComposedPath } from \"../common/helpers\";\nimport { isPseudoElementImg } from \"../../common/utils\";\nconst mapDropdownAlignToChWindowAlign = {\n OutsideStart: \"outside-start\",\n InsideStart: \"inside-start\",\n Center: \"center\",\n InsideEnd: \"inside-end\",\n OutsideEnd: \"outside-end\"\n};\nconst DROPDOWN_TAG_NAME = \"ch-dropdown\";\nconst WINDOW_ID = \"window\";\nconst elementIsDropdown = (element) => element?.tagName?.toLowerCase() === DROPDOWN_TAG_NAME;\nexport class ChDropDown {\n constructor() {\n this.actionGroupParent = false;\n this.buttonAccessibleName = undefined;\n this.caption = undefined;\n this.endImgSrc = undefined;\n this.endImgType = \"background\";\n this.expanded = false;\n this.href = undefined;\n this.leaf = false;\n this.level = undefined;\n this.nestedDropdown = false;\n this.openOnFocus = false;\n this.position = \"Center_OutsideEnd\";\n this.shortcut = undefined;\n this.showFooter = false;\n this.showHeader = false;\n this.startImgSrc = undefined;\n this.startImgType = \"background\";\n }\n #firstExpanded = false;\n // Refs\n #mainAction;\n el;\n handleExpandedChange(newExpandedValue) {\n if (newExpandedValue) {\n // Click\n document.addEventListener(\"click\", this.#closeOnClickOutside, {\n capture: true,\n passive: true\n });\n }\n else {\n // Click\n document.removeEventListener(\"click\", this.#closeOnClickOutside, {\n capture: true\n });\n // This is a WA to avoid a StencilJS's (or browser) issue when reusing\n // the top layer and interacting with the Tab key in the same top layer.\n // After the second opening, the Tab key stops working\n this.#mainAction.popoverTargetElement = null;\n }\n }\n /\n Fired when the visibility of the dropdown section is changed by user\n * interaction.\n /\n expandedChange;\n onActionClick() {\n // this.#closeDropdown();\n // @todo This behavior must be specified by a property\n // this.returnFocusToButton();\n }\n onRecursiveClose(event) {\n const stopperLevel = event.detail;\n if (this.level === stopperLevel) {\n event.stopPropagation();\n }\n this.#closeDropdown();\n }\n /\n Focus the dropdown action.\n /\n async focusElement() {\n this.#mainAction.focus();\n }\n /\n Collapse the content of the dropdown.\n /\n async collapseDropdown() {\n if (this.expanded) {\n this.expandedChange.emit(false);\n this.expanded = false;\n }\n }\n /\n Expand the content of the dropdown.\n /\n async expandDropdown() {\n if (!this.expanded) {\n this.expandedChange.emit(true);\n this.expanded = true;\n }\n }\n #closeDropdownSibling = () => {\n const currentFocusedElement = focusComposedPath();\n const currentFocusedItem = currentFocusedElement[currentFocusedElement.length - 1];\n if (!elementIsDropdown(currentFocusedItem)) {\n return;\n }\n if (currentFocusedItem.level < this.level) {\n return;\n }\n // Fire an event to close all dropdown parents up to a certain level\n currentFocusedItem.dispatchEvent(new CustomEvent(\"recursiveClose\", { bubbles: true, detail: this.level }));\n };\n #closeDropdown = () => {\n this.expandedChange.emit(false);\n this.expanded = false;\n };\n /\n Returns focus to the expandable button when closing the dropdown. Only\n * works if `openOnFocus = \"false\"`\n /\n // eslint-disable-next-line @stencil-community/own-props-must-be-private\n // #returnFocusToButton = () => {\n // if (!this.openOnFocus) {\n // this.#mainAction.focus();\n // }\n // };\n // eslint-disable-next-line @stencil-community/own-props-must-be-private\n #closeOnClickOutside = (event) => {\n if (event.composedPath().find(el => el === this.el) === undefined) {\n this.#closeDropdown();\n }\n };\n #handleMouseEnter = (event) => {\n event.stopPropagation();\n // We first must close the current expanded dropdown, since with the\n // keyboard we could have expanded a different dropdown\n this.#closeDropdownSibling();\n if (!this.expanded) {\n this.expandedChange.emit(true);\n this.expanded = true;\n }\n };\n #handleMouseLeave = (event) => {\n event.stopPropagation();\n if (this.expanded) {\n this.expandedChange.emit(false);\n this.expanded = false;\n }\n };\n // /\n // Check if the next focused element is a child element of the dropdown\n // * control.\n // */\n // // eslint-disable-next-line @stencil-community/own-props-must-be-private\n // #handleKeyUpEvents = (event: KeyboardEvent) => {\n // if (event.code !== TAB_KEY) {\n // return;\n // }\n // const isChildElement = event.composedPath().includes(this.el);\n // if (isChildElement) {\n // return;\n // }\n // this.#closeDropdown();\n // };\n #handleButtonClick = (event) => {\n event.stopPropagation();\n // If the nested dropdown is expanded and its expandable button is clicked\n // with the MOUSE and not the keyboard, do not change the visibility\n if (this.nestedDropdown && this.expanded && event.pointerType) {\n return;\n }\n // if (!this.expanded) {\n // // We first must close the current expanded dropdown, since with the\n // // mouse we could have expanded a different dropdown\n // this.#closeDropdownSibling();\n // }\n this.expanded = !this.expanded;\n this.expandedChange.emit(!this.expanded);\n };\n #dropDownItemContent = () => [\n h(\"span\", { slot: \"action\", class: \"content\", part: \"content\" }, this.caption),\n !!this.shortcut && (h(\"span\", { \"aria-hidden\": \"true\", slot: \"action\", part: \"shortcut\" }, this.shortcut))\n ];\n #firstLevelRender = () => (h(\"button\", { popoverTarget: WINDOW_ID, \"aria-controls\": WINDOW_ID, \"aria-expanded\": this.expanded.toString(), \"aria-haspopup\": \"true\", \"aria-label\": this.buttonAccessibleName, class: \"expandable-button\", part: \"action button expandable-action expandable-button\", type: \"button\", onClick: this.#handleButtonClick, ref: el => (this.#mainAction = el) }, h(\"slot\", { name: \"action\" })));\n #actionRender = () => {\n const pseudoStartImage = isPseudoElementImg(this.startImgSrc, this.startImgType);\n const pseudoEndImage = isPseudoElementImg(this.endImgSrc, this.endImgType);\n return this.href ? (h(\"a\", { \"aria-controls\": !this.leaf ? WINDOW_ID : null, \"aria-expanded\": !this.leaf ? this.expanded.toString() : null, \"aria-haspopup\": !this.leaf ? \"true\" : null, class: {\n action: true,\n [`start-img-type--${this.startImgType} pseudo-img--start`]: pseudoStartImage,\n [`end-img-type--${this.endImgType} pseudo-img--end`]: pseudoEndImage\n }, part: this.leaf\n ? \"action link\"\n : \"action link expandable-action expandable-link\", href: this.href, onClick: this.#handleButtonClick, onMouseEnter: !this.leaf && !this.actionGroupParent ? this.#handleMouseEnter : null, ref: el => (this.#mainAction = el) }, this.#dropDownItemContent())) : (h(\"button\", { popoverTarget: WINDOW_ID, \"aria-controls\": !this.leaf ? WINDOW_ID : null, \"aria-expanded\": !this.leaf ? this.expanded.toString() : null, \"aria-haspopup\": !this.leaf ? \"true\" : null, class: {\n action: true,\n [`start-img-type--${this.startImgType} pseudo-img--start`]: pseudoStartImage,\n [`end-img-type--${this.endImgType} pseudo-img--end`]: pseudoEndImage\n }, part: this.leaf\n ? \"action button\"\n : \"action button expandable-action expandable-button\", type: \"button\", onMouseEnter: !this.leaf && !this.actionGroupParent ? this.#handleMouseEnter : null, onClick: this.#handleButtonClick, ref: el => (this.#mainAction = el) }, this.#dropDownItemContent()));\n };\n #popoverRender = () => {\n this.#firstExpanded \|\|= this.expanded;\n if (!this.#firstExpanded) {\n return \"\";\n }\n const aligns = this.position.split(\"_\");\n const alignX = aligns[0];\n const alignY = aligns[1];\n const xAlignMapping = mapDropdownAlignToChWindowAlign[alignX];\n const yAlignMapping = mapDropdownAlignToChWindowAlign[alignY];\n const noNeedToAddDivListWrapper = !this.showHeader && !this.showFooter;\n return (h(\"ch-popover\", { role: noNeedToAddDivListWrapper ? \"list\" : null, id: WINDOW_ID, part: \"window\", actionById: true, actionElement: this.#mainAction, firstLayer: this.level === -1 \|\| this.actionGroupParent, mode: \"manual\", hidden: !this.expanded, inlineAlign: xAlignMapping, blockAlign: yAlignMapping }, noNeedToAddDivListWrapper ? (h(\"slot\", null)) : ([\n this.showHeader && h(\"slot\", { name: \"header\" }),\n h(\"div\", { role: \"list\", class: \"list\", part: \"list\" }, h(\"slot\", null)),\n this.showFooter && h(\"slot\", { name: \"footer\" })\n ])));\n };\n render() {\n return (h(Host, { role: this.level !== -1 ? \"listitem\" : null, style: !!this.startImgSrc \|\| !!this.endImgSrc\n ? {\n \"--ch-dropdown-item-start-img\": `url(\"${this.startImgSrc}\")`,\n \"--ch-dropdown-item-end-img\": `url(\"${this.endImgSrc}\")`\n }\n : undefined, onMouseLeave: !this.actionGroupParent && this.level !== -1\n ? this.#handleMouseLeave\n : null }, this.level === -1 && !this.leaf\n ? this.#firstLevelRender()\n : this.#actionRender(), !this.leaf && this.#popoverRender()));\n }\n static get is() { return \"ch-dropdown\"; }\n static get encapsulation() { return \"shadow\"; }\n static get originalStyleUrls() {\n return {\n \"$\": [\"dropdown.scss\"]\n };\n }\n static get styleUrls() {\n return {\n \"$\": [\"dropdown.css\"]\n };\n }\n static get properties() {\n return {\n \"actionGroupParent\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Specifies if the current parent of the item is the action-group control.\"\n },\n \"attribute\": \"action-group-parent\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"buttonAccessibleName\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"This attribute lets you specify the label for the expandable button.\\nImportant for accessibility.\"\n },\n \"attribute\": \"button-accessible-name\",\n \"reflect\": false\n },\n \"caption\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Specifies the caption that the control will display.\"\n },\n \"attribute\": \"caption\",\n \"reflect\": false\n },\n \"endImgSrc\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Specifies the src of the end image.\"\n },\n \"attribute\": \"end-img-src\",\n \"reflect\": false\n },\n \"endImgType\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"ImageRender\",\n \"resolved\": \"\\\"background\\\" \| \\\"img\\\" \| \\\"mask\\\"\",\n \"references\": {\n \"ImageRender\": {\n \"location\": \"import\",\n \"path\": \"../../common/types\",\n \"id\": \"src/common/types.ts::ImageRender\"\n }\n }\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Specifies how the end image will be rendered.\"\n },\n \"attribute\": \"end-img-type\",\n \"reflect\": false,\n \"defaultValue\": \"\\\"background\\\"\"\n },\n \"expanded\": {\n \"type\": \"boolean\",\n \"mutable\": true,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"`true` to display the dropdown section.\"\n },\n \"attribute\": \"expanded\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"href\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Specifies the hyperlink of the item. If this property is defined, the\\ncontrol will render an anchor tag with this `href`. Otherwise, it will\\nrender a button tag.\"\n },\n \"attribute\": \"href\",\n \"reflect\": false\n },\n \"leaf\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Specifies whether the item contains a subtree. `true` if the item does not\\nhave a subtree.\"\n },\n \"attribute\": \"leaf\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"level\": {\n \"type\": \"number\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"number\",\n \"resolved\": \"number\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Level in the render at which the item is placed.\"\n },\n \"attribute\": \"level\",\n \"reflect\": false\n },\n \"nestedDropdown\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"This attribute lets you specify if the control is nested in another\\ndropdown. Useful to manage keyboard interaction.\"\n },\n \"attribute\": \"nested-dropdown\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"openOnFocus\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Determine if the dropdown section should be opened when the expandable\\nbutton of the control is focused.\\nTODO: Add implementation\"\n },\n \"attribute\": \"open-on-focus\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"position\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"DropdownPosition\",\n \"resolved\": \"\\\"Center_OutsideEnd\\\" \| \\\"Center_OutsideStart\\\" \| \\\"InsideEnd_OutsideEnd\\\" \| \\\"InsideEnd_OutsideStart\\\" \| \\\"InsideStart_OutsideEnd\\\" \| \\\"InsideStart_OutsideStart\\\" \| \\\"OutsideEnd_Center\\\" \| \\\"OutsideEnd_InsideEnd\\\" \| \\\"OutsideEnd_InsideStart\\\" \| \\\"OutsideEnd_OutsideEnd\\\" \| \\\"OutsideEnd_OutsideStart\\\" \| \\\"OutsideStart_Center\\\" \| \\\"OutsideStart_InsideEnd\\\" \| \\\"OutsideStart_InsideStart\\\" \| \\\"OutsideStart_OutsideEnd\\\" \| \\\"OutsideStart_OutsideStart\\\"\",\n \"references\": {\n \"DropdownPosition\": {\n \"location\": \"import\",\n \"path\": \"./types\",\n \"id\": \"src/components/dropdown/types.ts::DropdownPosition\"\n }\n }\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Specifies the position of the dropdown section that is placed relative to\\nthe expandable button.\"\n },\n \"attribute\": \"position\",\n \"reflect\": false,\n \"defaultValue\": \"\\\"Center_OutsideEnd\\\"\"\n },\n \"shortcut\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Specifies the shortcut caption that the control will display.\"\n },\n \"attribute\": \"shortcut\",\n \"reflect\": false\n },\n \"showFooter\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"`true` to make available a slot to show a footer element.\"\n },\n \"attribute\": \"show-footer\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"showHeader\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"`true` to make available a slot to show a header element.\"\n },\n \"attribute\": \"show-header\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"startImgSrc\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Specifies the src for the left img.\"\n },\n \"attribute\": \"start-img-src\",\n \"reflect\": false\n },\n \"startImgType\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"ImageRender\",\n \"resolved\": \"\\\"background\\\" \| \\\"img\\\" \| \\\"mask\\\"\",\n \"references\": {\n \"ImageRender\": {\n \"location\": \"import\",\n \"path\": \"../../common/types\",\n \"id\": \"src/common/types.ts::ImageRender\"\n }\n }\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Specifies how the start image will be rendered.\"\n },\n \"attribute\": \"start-img-type\",\n \"reflect\": false,\n \"defaultValue\": \"\\\"background\\\"\"\n }\n };\n }\n static get events() {\n return [{\n \"method\": \"expandedChange\",\n \"name\": \"expandedChange\",\n \"bubbles\": true,\n \"cancelable\": true,\n \"composed\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Fired when the visibility of the dropdown section is changed by user\\ninteraction.\"\n },\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n }\n }];\n }\n static get methods() {\n return {\n \"focusElement\": {\n \"complexType\": {\n \"signature\": \"() => Promise<void>\",\n \"parameters\": [],\n \"references\": {\n \"Promise\": {\n \"location\": \"global\",\n \"id\": \"global::Promise\"\n }\n },\n \"return\": \"Promise<void>\"\n },\n \"docs\": {\n \"text\": \"Focus the dropdown action.\",\n \"tags\": []\n }\n },\n \"collapseDropdown\": {\n \"complexType\": {\n \"signature\": \"() => Promise<void>\",\n \"parameters\": [],\n \"references\": {\n \"Promise\": {\n \"location\": \"global\",\n \"id\": \"global::Promise\"\n }\n },\n \"return\": \"Promise<void>\"\n },\n \"docs\": {\n \"text\": \"Collapse the content of the dropdown.\",\n \"tags\": []\n }\n },\n \"expandDropdown\": {\n \"complexType\": {\n \"signature\": \"() => Promise<void>\",\n \"parameters\": [],\n \"references\": {\n \"Promise\": {\n \"location\": \"global\",\n \"id\": \"global::Promise\"\n }\n },\n \"return\": \"Promise<void>\"\n },\n \"docs\": {\n \"text\": \"Expand the content of the dropdown.\",\n \"tags\": []\n }\n }\n };\n }\n static get elementRef() { return \"el\"; }\n static get watchers() {\n return [{\n \"propName\": \"expanded\",\n \"methodName\": \"handleExpandedChange\"\n }];\n }\n static get listeners() {\n return [{\n \"name\": \"actionClick\",\n \"method\": \"onActionClick\",\n \"target\": undefined,\n \"capture\": false,\n \"passive\": false\n }, {\n \"name\": \"recursiveClose\",\n \"method\": \"onRecursiveClose\",\n \"target\": undefined,\n \"capture\": false,\n \"passive\": false\n }];\n }\n}\n//# sourceMappingURL=dropdown.js.map\n"],"version":3}
1	+ {"file":"dropdown.js","mappings":"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","names":[],"sources":["node_modules/@genexus/chameleon-controls-library/dist/collection/components/dropdown/dropdown.css?tag=ch-dropdown&encapsulation=shadow","node_modules/@genexus/chameleon-controls-library/dist/collection/components/dropdown/dropdown.js"],"sourcesContent":[":where(a, button) {\n all: unset;\n}\n\na,\nbutton {\n display: flex;\n align-items: center;\n inline-size: 100%;\n block-size: 100%;\n cursor: pointer;\n}\n\n,\n::after,\n::before {\n box-sizing: border-box;\n}\n\n:host {\n --ch-dropdown-item__image-size: 0.875em;\n --ch-dropdown-item__background-image-size: 100%;\n --ch-dropdown-separation: 0px;\n --ch-dropdown-separation-x: var(--ch-dropdown-separation);\n --ch-dropdown-separation-y: var(--ch-dropdown-separation);\n display: flex;\n position: relative;\n inline-size: 100%;\n block-size: 100%;\n}\n\n.expandable-button {\n justify-content: center;\n align-self: center;\n position: relative;\n z-index: 108;\n}\n\n::slotted([slot=action]) {\n pointer-events: none;\n}\n\nch-popover {\n --ch-popover-separation-x: var(--ch-dropdown-separation-x);\n --ch-popover-separation-y: var(--ch-dropdown-separation-y);\n}\n\n.list {\n display: flex;\n flex-direction: column;\n}\n\n.action {\n text-align: start;\n}\n\n.pseudo-img--start::before,\n.pseudo-img--end::after {\n content: \"\";\n display: block;\n inline-size: var(--ch-dropdown-item__image-size);\n block-size: var(--ch-dropdown-item__image-size);\n min-inline-size: var(--ch-dropdown-item__image-size);\n}\n\n.pseudo-img--start {\n --ch-dropdown-item-img: var(--ch-dropdown-item-start-img);\n}\n\n.pseudo-img--end {\n --ch-dropdown-item-img: var(--ch-dropdown-item-end-img);\n}\n\n.start-img-type--background::before,\n.end-img-type--background::after {\n background: no-repeat center/var(--ch-dropdown-item__background-image-size) var(--ch-dropdown-item-img);\n}\n\n.start-img-type--mask::before,\n.end-img-type--mask::after {\n -webkit-mask: var(--ch-dropdown-item-img) 50% 50%/var(--ch-dropdown-item__background-image-size) var(--ch-dropdown-item__background-image-size) no-repeat;\n background-color: currentColor;\n}\n\n.content {\n inline-size: 100%;\n}","import { Host, h } from \"@stencil/core\";\nimport { focusComposedPath } from \"../common/helpers\";\nimport { isPseudoElementImg } from \"../../common/utils\";\nconst mapDropdownAlignToChWindowAlign = {\n OutsideStart: \"outside-start\",\n InsideStart: \"inside-start\",\n Center: \"center\",\n InsideEnd: \"inside-end\",\n OutsideEnd: \"outside-end\"\n};\nconst DROPDOWN_TAG_NAME = \"ch-dropdown\";\nconst WINDOW_ID = \"window\";\nconst elementIsDropdown = (element) => element?.tagName?.toLowerCase() === DROPDOWN_TAG_NAME;\nexport class ChDropDown {\n constructor() {\n this.actionGroupParent = false;\n this.buttonAccessibleName = undefined;\n this.caption = undefined;\n this.endImgSrc = undefined;\n this.endImgType = \"background\";\n this.expanded = false;\n this.href = undefined;\n this.leaf = false;\n this.level = undefined;\n this.nestedDropdown = false;\n this.openOnFocus = false;\n this.position = \"Center_OutsideEnd\";\n this.shortcut = undefined;\n this.showFooter = false;\n this.showHeader = false;\n this.startImgSrc = undefined;\n this.startImgType = \"background\";\n }\n #firstExpanded = false;\n // Refs\n #mainAction;\n el;\n handleExpandedChange(newExpandedValue) {\n if (newExpandedValue) {\n // Click\n document.addEventListener(\"click\", this.#closeOnClickOutside, {\n capture: true,\n passive: true\n });\n }\n else {\n // Click\n document.removeEventListener(\"click\", this.#closeOnClickOutside, {\n capture: true\n });\n // This is a WA to avoid a StencilJS's (or browser) issue when reusing\n // the top layer and interacting with the Tab key in the same top layer.\n // After the second opening, the Tab key stops working\n this.#mainAction.popoverTargetElement = null;\n }\n }\n /\n Fired when the visibility of the dropdown section is changed by user\n * interaction.\n /\n expandedChange;\n onActionClick() {\n // this.#closeDropdown();\n // @todo This behavior must be specified by a property\n // this.returnFocusToButton();\n }\n onRecursiveClose(event) {\n const stopperLevel = event.detail;\n if (this.level === stopperLevel) {\n event.stopPropagation();\n }\n this.#closeDropdown();\n }\n /\n Focus the dropdown action.\n /\n async focusElement() {\n this.#mainAction.focus();\n }\n /\n Collapse the content of the dropdown.\n /\n async collapseDropdown() {\n if (this.expanded) {\n this.expandedChange.emit(false);\n this.expanded = false;\n }\n }\n /\n Expand the content of the dropdown.\n /\n async expandDropdown() {\n if (!this.expanded) {\n this.expandedChange.emit(true);\n this.expanded = true;\n }\n }\n #closeDropdownSibling = () => {\n const currentFocusedElement = focusComposedPath();\n const currentFocusedItem = currentFocusedElement[currentFocusedElement.length - 1];\n if (!elementIsDropdown(currentFocusedItem)) {\n return;\n }\n if (currentFocusedItem.level < this.level) {\n return;\n }\n // Fire an event to close all dropdown parents up to a certain level\n currentFocusedItem.dispatchEvent(new CustomEvent(\"recursiveClose\", { bubbles: true, detail: this.level }));\n };\n #closeDropdown = () => {\n this.expandedChange.emit(false);\n this.expanded = false;\n };\n /\n Returns focus to the expandable button when closing the dropdown. Only\n * works if `openOnFocus = \"false\"`\n /\n // eslint-disable-next-line @stencil-community/own-props-must-be-private\n // #returnFocusToButton = () => {\n // if (!this.openOnFocus) {\n // this.#mainAction.focus();\n // }\n // };\n // eslint-disable-next-line @stencil-community/own-props-must-be-private\n #closeOnClickOutside = (event) => {\n if (event.composedPath().find(el => el === this.el) === undefined) {\n this.#closeDropdown();\n }\n };\n #handleMouseEnter = (event) => {\n event.stopPropagation();\n // We first must close the current expanded dropdown, since with the\n // keyboard we could have expanded a different dropdown\n this.#closeDropdownSibling();\n if (!this.expanded) {\n this.expandedChange.emit(true);\n this.expanded = true;\n }\n };\n #handleMouseLeave = (event) => {\n event.stopPropagation();\n if (this.expanded) {\n this.expandedChange.emit(false);\n this.expanded = false;\n }\n };\n // /\n // Check if the next focused element is a child element of the dropdown\n // * control.\n // */\n // // eslint-disable-next-line @stencil-community/own-props-must-be-private\n // #handleKeyUpEvents = (event: KeyboardEvent) => {\n // if (event.code !== TAB_KEY) {\n // return;\n // }\n // const isChildElement = event.composedPath().includes(this.el);\n // if (isChildElement) {\n // return;\n // }\n // this.#closeDropdown();\n // };\n #handleButtonClick = (event) => {\n event.stopPropagation();\n // If the nested dropdown is expanded and its expandable button is clicked\n // with the MOUSE and not the keyboard, do not change the visibility\n if (this.nestedDropdown && this.expanded && event.pointerType) {\n return;\n }\n // if (!this.expanded) {\n // // We first must close the current expanded dropdown, since with the\n // // mouse we could have expanded a different dropdown\n // this.#closeDropdownSibling();\n // }\n this.expanded = !this.expanded;\n this.expandedChange.emit(!this.expanded);\n };\n #dropDownItemContent = () => [\n h(\"span\", { slot: \"action\", class: \"content\", part: \"content\" }, this.caption),\n !!this.shortcut && (h(\"span\", { \"aria-hidden\": \"true\", slot: \"action\", part: \"shortcut\" }, this.shortcut))\n ];\n #firstLevelRender = () => (h(\"button\", { popoverTarget: WINDOW_ID, \"aria-controls\": WINDOW_ID, \"aria-expanded\": this.expanded.toString(), \"aria-haspopup\": \"true\", \"aria-label\": this.buttonAccessibleName, class: \"expandable-button\", part: \"action button expandable-action expandable-button\", type: \"button\", onClick: this.#handleButtonClick, ref: el => (this.#mainAction = el) }, h(\"slot\", { name: \"action\" })));\n #actionRender = () => {\n const pseudoStartImage = isPseudoElementImg(this.startImgSrc, this.startImgType);\n const pseudoEndImage = isPseudoElementImg(this.endImgSrc, this.endImgType);\n return this.href ? (h(\"a\", { \"aria-controls\": !this.leaf ? WINDOW_ID : null, \"aria-expanded\": !this.leaf ? this.expanded.toString() : null, \"aria-haspopup\": !this.leaf ? \"true\" : null, class: {\n action: true,\n [`start-img-type--${this.startImgType} pseudo-img--start`]: pseudoStartImage,\n [`end-img-type--${this.endImgType} pseudo-img--end`]: pseudoEndImage\n }, part: this.leaf\n ? \"action link\"\n : \"action link expandable-action expandable-link\", href: this.href, onClick: this.#handleButtonClick, onMouseEnter: !this.leaf && !this.actionGroupParent ? this.#handleMouseEnter : null, ref: el => (this.#mainAction = el) }, this.#dropDownItemContent())) : (h(\"button\", { popoverTarget: WINDOW_ID, \"aria-controls\": !this.leaf ? WINDOW_ID : null, \"aria-expanded\": !this.leaf ? this.expanded.toString() : null, \"aria-haspopup\": !this.leaf ? \"true\" : null, class: {\n action: true,\n [`start-img-type--${this.startImgType} pseudo-img--start`]: pseudoStartImage,\n [`end-img-type--${this.endImgType} pseudo-img--end`]: pseudoEndImage\n }, part: this.leaf\n ? \"action button\"\n : \"action button expandable-action expandable-button\", type: \"button\", onMouseEnter: !this.leaf && !this.actionGroupParent ? this.#handleMouseEnter : null, onClick: this.#handleButtonClick, ref: el => (this.#mainAction = el) }, this.#dropDownItemContent()));\n };\n #popoverRender = () => {\n this.#firstExpanded \|\|= this.expanded;\n if (!this.#firstExpanded) {\n return \"\";\n }\n const aligns = this.position.split(\"_\");\n const alignX = aligns[0];\n const alignY = aligns[1];\n const xAlignMapping = mapDropdownAlignToChWindowAlign[alignX];\n const yAlignMapping = mapDropdownAlignToChWindowAlign[alignY];\n const noNeedToAddDivListWrapper = !this.showHeader && !this.showFooter;\n return (h(\"ch-popover\", { role: noNeedToAddDivListWrapper ? \"list\" : null, id: WINDOW_ID, part: \"window\", actionById: true, actionElement: this.#mainAction, firstLayer: this.level === -1 \|\| this.actionGroupParent, mode: \"manual\", hidden: !this.expanded, inlineAlign: xAlignMapping, blockAlign: yAlignMapping }, noNeedToAddDivListWrapper ? (h(\"slot\", null)) : ([\n this.showHeader && h(\"slot\", { name: \"header\" }),\n h(\"div\", { role: \"list\", class: \"list\", part: \"list\" }, h(\"slot\", null)),\n this.showFooter && h(\"slot\", { name: \"footer\" })\n ])));\n };\n render() {\n return (h(Host, { role: this.level !== -1 ? \"listitem\" : null, style: !!this.startImgSrc \|\| !!this.endImgSrc\n ? {\n \"--ch-dropdown-item-start-img\": `url(\"${this.startImgSrc}\")`,\n \"--ch-dropdown-item-end-img\": `url(\"${this.endImgSrc}\")`\n }\n : undefined, onMouseLeave: !this.actionGroupParent && this.level !== -1\n ? this.#handleMouseLeave\n : null }, this.level === -1 && !this.leaf\n ? this.#firstLevelRender()\n : this.#actionRender(), !this.leaf && this.#popoverRender()));\n }\n static get is() { return \"ch-dropdown\"; }\n static get encapsulation() { return \"shadow\"; }\n static get originalStyleUrls() {\n return {\n \"$\": [\"dropdown.scss\"]\n };\n }\n static get styleUrls() {\n return {\n \"$\": [\"dropdown.css\"]\n };\n }\n static get properties() {\n return {\n \"actionGroupParent\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Specifies if the current parent of the item is the action-group control.\"\n },\n \"attribute\": \"action-group-parent\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"buttonAccessibleName\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"This attribute lets you specify the label for the expandable button.\\nImportant for accessibility.\"\n },\n \"attribute\": \"button-accessible-name\",\n \"reflect\": false\n },\n \"caption\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Specifies the caption that the control will display.\"\n },\n \"attribute\": \"caption\",\n \"reflect\": false\n },\n \"endImgSrc\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Specifies the src of the end image.\"\n },\n \"attribute\": \"end-img-src\",\n \"reflect\": false\n },\n \"endImgType\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"ImageRender\",\n \"resolved\": \"\\\"background\\\" \| \\\"img\\\" \| \\\"mask\\\"\",\n \"references\": {\n \"ImageRender\": {\n \"location\": \"import\",\n \"path\": \"../../common/types\",\n \"id\": \"src/common/types.ts::ImageRender\"\n }\n }\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Specifies how the end image will be rendered.\"\n },\n \"attribute\": \"end-img-type\",\n \"reflect\": false,\n \"defaultValue\": \"\\\"background\\\"\"\n },\n \"expanded\": {\n \"type\": \"boolean\",\n \"mutable\": true,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"`true` to display the dropdown section.\"\n },\n \"attribute\": \"expanded\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"href\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Specifies the hyperlink of the item. If this property is defined, the\\ncontrol will render an anchor tag with this `href`. Otherwise, it will\\nrender a button tag.\"\n },\n \"attribute\": \"href\",\n \"reflect\": false\n },\n \"leaf\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Specifies whether the item contains a subtree. `true` if the item does not\\nhave a subtree.\"\n },\n \"attribute\": \"leaf\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"level\": {\n \"type\": \"number\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"number\",\n \"resolved\": \"number\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Level in the render at which the item is placed.\"\n },\n \"attribute\": \"level\",\n \"reflect\": false\n },\n \"nestedDropdown\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"This attribute lets you specify if the control is nested in another\\ndropdown. Useful to manage keyboard interaction.\"\n },\n \"attribute\": \"nested-dropdown\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"openOnFocus\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Determine if the dropdown section should be opened when the expandable\\nbutton of the control is focused.\\nTODO: Add implementation\"\n },\n \"attribute\": \"open-on-focus\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"position\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"DropdownPosition\",\n \"resolved\": \"\\\"Center_OutsideEnd\\\" \| \\\"Center_OutsideStart\\\" \| \\\"InsideEnd_OutsideEnd\\\" \| \\\"InsideEnd_OutsideStart\\\" \| \\\"InsideStart_OutsideEnd\\\" \| \\\"InsideStart_OutsideStart\\\" \| \\\"OutsideEnd_Center\\\" \| \\\"OutsideEnd_InsideEnd\\\" \| \\\"OutsideEnd_InsideStart\\\" \| \\\"OutsideEnd_OutsideEnd\\\" \| \\\"OutsideEnd_OutsideStart\\\" \| \\\"OutsideStart_Center\\\" \| \\\"OutsideStart_InsideEnd\\\" \| \\\"OutsideStart_InsideStart\\\" \| \\\"OutsideStart_OutsideEnd\\\" \| \\\"OutsideStart_OutsideStart\\\"\",\n \"references\": {\n \"DropdownPosition\": {\n \"location\": \"import\",\n \"path\": \"./types\",\n \"id\": \"src/components/dropdown/types.ts::DropdownPosition\"\n }\n }\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Specifies the position of the dropdown section that is placed relative to\\nthe expandable button.\"\n },\n \"attribute\": \"position\",\n \"reflect\": false,\n \"defaultValue\": \"\\\"Center_OutsideEnd\\\"\"\n },\n \"shortcut\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Specifies the shortcut caption that the control will display.\"\n },\n \"attribute\": \"shortcut\",\n \"reflect\": false\n },\n \"showFooter\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"`true` to make available a slot to show a footer element.\"\n },\n \"attribute\": \"show-footer\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"showHeader\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"`true` to make available a slot to show a header element.\"\n },\n \"attribute\": \"show-header\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"startImgSrc\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Specifies the src for the left img.\"\n },\n \"attribute\": \"start-img-src\",\n \"reflect\": false\n },\n \"startImgType\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"ImageRender\",\n \"resolved\": \"\\\"background\\\" \| \\\"img\\\" \| \\\"mask\\\"\",\n \"references\": {\n \"ImageRender\": {\n \"location\": \"import\",\n \"path\": \"../../common/types\",\n \"id\": \"src/common/types.ts::ImageRender\"\n }\n }\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Specifies how the start image will be rendered.\"\n },\n \"attribute\": \"start-img-type\",\n \"reflect\": false,\n \"defaultValue\": \"\\\"background\\\"\"\n }\n };\n }\n static get events() {\n return [{\n \"method\": \"expandedChange\",\n \"name\": \"expandedChange\",\n \"bubbles\": true,\n \"cancelable\": true,\n \"composed\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Fired when the visibility of the dropdown section is changed by user\\ninteraction.\"\n },\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n }\n }];\n }\n static get methods() {\n return {\n \"focusElement\": {\n \"complexType\": {\n \"signature\": \"() => Promise<void>\",\n \"parameters\": [],\n \"references\": {\n \"Promise\": {\n \"location\": \"global\",\n \"id\": \"global::Promise\"\n }\n },\n \"return\": \"Promise<void>\"\n },\n \"docs\": {\n \"text\": \"Focus the dropdown action.\",\n \"tags\": []\n }\n },\n \"collapseDropdown\": {\n \"complexType\": {\n \"signature\": \"() => Promise<void>\",\n \"parameters\": [],\n \"references\": {\n \"Promise\": {\n \"location\": \"global\",\n \"id\": \"global::Promise\"\n }\n },\n \"return\": \"Promise<void>\"\n },\n \"docs\": {\n \"text\": \"Collapse the content of the dropdown.\",\n \"tags\": []\n }\n },\n \"expandDropdown\": {\n \"complexType\": {\n \"signature\": \"() => Promise<void>\",\n \"parameters\": [],\n \"references\": {\n \"Promise\": {\n \"location\": \"global\",\n \"id\": \"global::Promise\"\n }\n },\n \"return\": \"Promise<void>\"\n },\n \"docs\": {\n \"text\": \"Expand the content of the dropdown.\",\n \"tags\": []\n }\n }\n };\n }\n static get elementRef() { return \"el\"; }\n static get watchers() {\n return [{\n \"propName\": \"expanded\",\n \"methodName\": \"handleExpandedChange\"\n }];\n }\n static get listeners() {\n return [{\n \"name\": \"actionClick\",\n \"method\": \"onActionClick\",\n \"target\": undefined,\n \"capture\": false,\n \"passive\": false\n }, {\n \"name\": \"recursiveClose\",\n \"method\": \"onRecursiveClose\",\n \"target\": undefined,\n \"capture\": false,\n \"passive\": false\n }];\n }\n}\n//# sourceMappingURL=dropdown.js.map\n"],"version":3}

package/dist/components/form-checkbox.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, createEvent, Host } from '@stencil/core/internal/client';
-import { a as formMessageLogic } from './form.js';
+import { f as formMessageLogic } from './form.js';
 import { f as formClasses, c as commonClassesNames } from './classesNames.js';
 import { s as state } from './store.js';
 import { e as exportParts } from './export-parts.js';

package/dist/components/form-radio-group.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { a as formMessageLogic, r as requiredLabel } from './form.js';
+import { f as formMessageLogic, r as requiredLabel } from './form.js';
 import { f as formClasses } from './classesNames.js';
 import { d as defineCustomElement$2 } from './gxg-label2.js';
 import { d as defineCustomElement$1 } from './tooltip.js';

package/dist/components/form-text.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, createEvent, Host } from '@stencil/core/internal/client';
-import { r as requiredLabel, f as formTooltipLogic, a as formMessageLogic } from './form.js';
+import { r as requiredLabel, a as formTooltipLogic, f as formMessageLogic } from './form.js';
 import { f as formClasses, c as commonClassesNames } from './classesNames.js';
 import { s as state } from './store.js';
 import { e as exportParts } from './export-parts.js';

package/dist/components/form-textarea.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { a as formMessageLogic, r as requiredLabel, f as formTooltipLogic } from './form.js';
+import { f as formMessageLogic, r as requiredLabel, a as formTooltipLogic } from './form.js';
 import { s as state } from './store.js';
 import { f as formClasses, c as commonClassesNames } from './classesNames.js';
 import { e as exportParts } from './export-parts.js';

package/dist/components/form.js CHANGED Viewed

@@ -51,6 +51,6 @@ function formTooltipLogic(comp, hideTooltip) {
     }
 }
-export { formMessageLogic as a, formMessage as b, formTooltipLogic as f, requiredLabel as r };
+export { formTooltipLogic as a, formMessage as b, formMessageLogic as f, requiredLabel as r };
 //# sourceMappingURL=form.js.map

package/dist/components/gx-ide-add-module-servers.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface GxIdeAddModuleServers extends Components.GxIdeAddModuleServers, HTMLElement {}
+export const GxIdeAddModuleServers: {
+    prototype: GxIdeAddModuleServers;
+    new (): GxIdeAddModuleServers;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;