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

@genexus/genexus-ide-ui 0.0.108 → 0.0.110

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 (265) hide show

package/dist/components/container.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { d as defineCustomElement$2 } from './title2.js';
 import { d as defineCustomElement$1 } from './title.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":"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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 &--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/gx-ide-create-kb-from-server.js CHANGED Viewed

@@ -153,7 +153,7 @@ const GxIdeCreateKbFromServer$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeCr
                 label: sUrl,
                 value: sUrl
             })), "server-urls")
-            : null)), h("div", { class: "grid grid-data" }, h("div", null, h("div", { class: "grid grid-data-account" }, h("gxg-combo-box", { disableFilter: true, value: this.authenticationTypes[0].id, ref: (el) => (this.authenticationTypeEl = el), class: "authentication-type", part: "authentication-type", onValueChanged: this.evaluateAuthenticationType }, renderFormItems("gxg-combo-box-item", this.authenticationTypes, "authentication-type")), h("gxg-label", { labelPosition: "start", class: "kb-label" }, `${this._componentLocale.label.userName}:`), h("gxg-form-text", { ref: (el) => (this.userNameEl = el), value: this.userName, class: "user-name", part: "user-name" }), h("gxg-label", { labelPosition: "start", class: "kb-label" }, `${this._componentLocale.label.password}:`), h("gxg-form-text", { password: true, ref: (el) => (this.passwordEl = el), value: this.password, class: "password", part: "password" }), h("div", null, h("gxg-button", { id: "button-connect", type: "primary-text-only", onClick: this.connectCallbackHandler, part: "button-connect" }, this._componentLocale.buttons.connect)))), h("div", { class: "grid" }, h("div", { class: "grid-data-kbs" }, h("div", { class: "search-kbs" }, h("gxg-form-text", { ref: (el) => (this.searchKBEl = el), class: "search-kb-input", part: "search-kb", disabled: this.selectionKbDisabled, placeholder: this._componentLocale.label.searchKbs })), h("div", { class: "box-kbs" }, h("gxg-list-box", { singleSelection: true, disabled: this.selectionKbDisabled, ref: (el) => (this.listBoxEl = el), part: "kbs" }, this.kbs
+            : null)), h("div", { class: "grid grid-data" }, h("div", null, h("div", { class: "grid grid-data-account" }, h("gxg-combo-box", { "tool-tip": true, disableFilter: true, value: this.authenticationTypes[0].id, ref: (el) => (this.authenticationTypeEl = el), class: "authentication-type", part: "authentication-type", onValueChanged: this.evaluateAuthenticationType }, renderFormItems("gxg-combo-box-item", this.authenticationTypes, "authentication-type")), h("gxg-label", { labelPosition: "start", class: "kb-label" }, `${this._componentLocale.label.userName}:`), h("gxg-form-text", { ref: (el) => (this.userNameEl = el), "tool-tip": true, value: this.userName, class: "user-name", part: "user-name" }), h("gxg-label", { labelPosition: "start", class: "kb-label" }, `${this._componentLocale.label.password}:`), h("gxg-form-text", { "tool-tip": true, password: true, ref: (el) => (this.passwordEl = el), value: this.password, class: "password", part: "password" }), h("div", null, h("gxg-button", { id: "button-connect", type: "primary-text-only", onClick: this.connectCallbackHandler, part: "button-connect" }, this._componentLocale.buttons.connect)))), h("div", { class: "grid" }, h("div", { class: "grid-data-kbs" }, h("div", { class: "search-kbs" }, h("gxg-form-text", { ref: (el) => (this.searchKBEl = el), class: "search-kb-input", part: "search-kb", disabled: this.selectionKbDisabled, placeholder: this._componentLocale.label.searchKbs })), h("div", { class: "box-kbs" }, h("gxg-list-box", { singleSelection: true, disabled: this.selectionKbDisabled, ref: (el) => (this.listBoxEl = el), part: "kbs" }, this.kbs
             .filter(kb => kb.name
             .toLowerCase()
             .includes(this.kbSearchText.toLowerCase()))

package/dist/components/gx-ide-create-kb-from-server.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"gx-ide-create-kb-from-server.js","mappings":"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","names":["GxIdeCreateKbFromServer"],"sources":["src/components/create-kb-from-server/create-kb-from-server.scss?tag=gx-ide-create-kb-from-server&encapsulation=shadow","src/components/create-kb-from-server/create-kb-from-server.tsx"],"sourcesContent":["@import \"../../global/gx-ide-common.scss\";\n@import \"../../global/gx-ide-mixins.scss\";\n\n:host {\n display: block;\n border: 1px solid var(--gxg-border-color--regular);\n background-color: var(--mer-color__surface);\n}\n:host(.gxi-create-kb-from-server--shadow) {\n}\n\n.grid-data {\n grid-template-columns: repeat(2, 1fr);\n}\n.grid-data-account {\n grid-template-columns: auto 1fr;\n > :nth-child(1) {\n grid-area: 1 / 1 / 2 / 3;\n }\n > :nth-child(6) {\n grid-area: 4 / 2 / 5 / 3;\n }\n}\n.grid-data-kbs {\n display: flex;\n flex-direction: column;\n gap: var(--gx-ide-grid-row-gap);\n .search-kbs {\n width: 100%;\n display: flex;\n }\n .box-kbs {\n height: 150px;\n }\n}\n.grid-data-kbs-footer {\n display: flex;\n}\n.flex {\n display: flex;\n > :nth-child(2) {\n flex: 1;\n }\n}\n","/* STENCIL IMPORTS /\nimport {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n State,\n getAssetPath,\n Watch\n} from \"@stencil/core\";\n/ OTHER LIBRARIES IMPORTS /\nimport { SelectionChangedEvent } from \"@genexus/gemini/dist/types/components/list-box/list-box\";\n/ CUSTOM IMPORTS /\nimport { GxOption } from \"../../common/types\";\nimport { Locale } from \"../../common/locale\";\nimport { renderFormItems } from \"../../common/common\";\nimport {\n FormSubmitResult,\n GxServerAuthenticationType\n} from \"../../common/types\";\nimport { formSubmitValidation } from \"../../common/form-validation\";\n\n@Component({\n tag: \"gx-ide-create-kb-from-server\",\n styleUrl: \"create-kb-from-server.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/create-kb-from-server\"]\n})\nexport class GxIdeCreateKbFromServer {\n [key: string]: any;\n\n /\nINDEX:\n1.OWN PROPERTIES\n2.REFERENCE TO ELEMENTS\n3.STATE() VARIABLES\n4.PUBLIC PROPERTY API \| WATCH'S\n5.EVENTS (EMIT)\n6.METHODS\n7.LISTENERS\n8.PUBLIC METHODS API\n9.LOCAL METHODS\n10.RENDER() FUNCTION\n/\n\n // 1.OWN PROPERTIES //\n\n /\n The component hard-coded strings translations.\n /\n private _componentLocale: any;\n private renderedFirstTime = false;\n private shortcutsSrc = getAssetPath(\n `./gx-ide-assets/create-kb-from-server/shortcuts.json`\n );\n\n / References needed to collect data with \"Connect\" and \"Create\" buttons submit/\n private authenticationTypeEl!: HTMLGxgComboBoxElement;\n private serverUrlsEl!: HTMLGxgComboBoxElement;\n private kbNameEl!: HTMLGxgFormTextElement;\n private passwordEl!: HTMLGxgFormTextElement;\n private userNameEl!: HTMLGxgFormTextElement;\n private searchKBEl!: HTMLGxgFormTextElement;\n private listBoxEl!: HTMLElement;\n private kbIdSelected: string = null;\n private authenticationTypes: GxOption[] = [];\n\n // 2. REFERENCE TO ELEMENTS //\n\n @Element() el: HTMLGxIdeCreateKbFromServerElement;\n\n // 3.STATE() VARIABLES //\n\n /\n Disabled or not the part for select and create the KB\n /\n @State() selectionKbDisabled = true;\n\n /\n KBs that return from connect to the server\n /\n\n @State() kbs: KBData[] = [];\n @Watch(\"kbs\")\n watchPropHandler(newKbs: KBData[]) {\n / When the list of servers are updated, the first server is selected by default /\n this.kbIdSelected = newKbs[0].id;\n this.kbName = newKbs[0].name;\n }\n\n /\n KBs search text\n /\n @State() kbSearchText = \"\";\n\n // 4.PUBLIC PROPERTY API \| WATCH'S //\n\n /\n If true it displays the component title on the header\n /\n @Prop() readonly displayTitle = false;\n\n /\n Callback that will be invoked when the user connect to the kb server (‘Connect’ button)\n /\n @Prop() readonly connectCallback: (\n data: GXServerConnectionData\n ) => Promise<ConnectionResultData>;\n\n /\n Callback that will be invoked when the user confirms KB creation (‘Create’ button)\n /\n @Prop() readonly createKBCallback: (\n data: CreateKBData\n ) => Promise<FormSubmitResult>;\n\n /\n If is true then the user can specify a server url that don't be in the combo box of server urls.\n /\n @Prop() readonly enableCustomServer: boolean = false;\n\n /\n The knowledge base default suggested name\n /\n // eslint-disable-next-line @stencil-community/strict-mutable\n @Prop({ mutable: true }) kbName: string;\n\n /\n Password for the database connection.\n /\n @Prop() readonly password: string;\n\n /\n Array of URLs of cataloged servers to be displayed in the combo\n /\n @Prop() readonly serverUrls!: string[];\n\n /\n Username for the database connection.\n /\n @Prop() readonly userName: string;\n\n // 5.EVENTS (EMIT) //\n\n /\n This event is emitted once just after the component is fully loaded and the first render() occurs\n /\n @Event() componentDidRenderFirstTime: EventEmitter<boolean>;\n\n // 6.METHODS //\n\n async componentWillLoad() {\n this._componentLocale = await Locale.getComponentStrings(this.el);\n this.setAuthenticationTypes();\n }\n\n componentDidLoad() {\n (this.serverUrlsEl as HTMLElement).focus();\n this.addEventListeners();\n }\n\n componentDidRender() {\n if (!this.renderedFirstTime) {\n this.componentDidRenderFirstTime.emit(\n this._componentLocale.componentName\n );\n this.renderedFirstTime = true;\n }\n }\n\n // 7.LISTENERS //\n\n // 8.PUBLIC METHODS API //\n\n // 9.LOCAL METHODS //\n\n private setAuthenticationTypes = () => {\n this.authenticationTypes = [\n {\n id: \"genexus\",\n value: \"genexus\",\n label: this._componentLocale.authenticationTypes.genexusAccount\n },\n {\n id: \"local\",\n value: \"local\",\n label: this._componentLocale.authenticationTypes.local\n }\n ];\n };\n\n private addEventListeners = () => {\n this.serverUrlsEl.addEventListener(\"valueChanged\", () => {\n this.reset();\n });\n\n this.searchKBEl.addEventListener(\n \"valueChanged\",\n (e: CustomEvent<string>) => {\n this.kbNameEl.value = \"\";\n this.kbIdSelected = null;\n this.kbSearchText = e.detail;\n }\n );\n\n this.listBoxEl.addEventListener(\n \"selectionChanged\",\n (ev: CustomEvent<SelectionChangedEvent>): void => {\n const selectedItems = ev.detail.items;\n let selectedItem;\n if (selectedItems.length > 0) {\n selectedItem = ev.detail.items[0];\n }\n if (selectedItem) {\n this.kbIdSelected = selectedItem.value;\n const kbSelected = this.kbs.find(kb => kb.id === this.kbIdSelected);\n if (kbSelected) {\n this.kbNameEl.value = kbSelected.name;\n }\n }\n }\n );\n };\n\n private reset() {\n this.kbs = [];\n this.kbIdSelected = null;\n this.selectionKbDisabled = true;\n this.searchKBEl.value = \"\";\n this.kbSearchText = \"\";\n }\n\n private createKbHandler = (): void => {\n if (this.createKBCallback) {\n const createKBCallbackPromise = this.createKBCallback({\n id: this.kbIdSelected,\n name: this.kbNameEl.value\n });\n createKBCallbackPromise.then((formSubmitResult: FormSubmitResult) => {\n formSubmitValidation(formSubmitResult, this);\n });\n }\n };\n\n private connectCallbackHandler = (): void => {\n if (this.connectCallback) {\n const connectCallbackPromise = this.connectCallback({\n serverUrl: this.serverUrlsEl.value,\n authenticationType: this.authenticationTypeEl.value,\n user: this.userNameEl?.value,\n password: this.passwordEl?.value\n });\n connectCallbackPromise.then(\n (connectionResultData: ConnectionResultData) => {\n formSubmitValidation(connectionResultData.formResult, this);\n if (\n connectionResultData.formResult.success &&\n connectionResultData.kbs\n ) {\n this.kbs = connectionResultData.kbs;\n this.selectionKbDisabled = false;\n }\n }\n );\n }\n };\n\n // 10.RENDER() FUNCTION //\n\n // 11.RENDER() FUNCTION //\n\n render(): void {\n return (\n <Host class=\"gx-ide-component\">\n <div class=\"gx-ide-main-wrapper\">\n <gx-ide-container\n containerTitle={\n this.displayTitle ? this._componentLocale.componentName : null\n }\n >\n <div class=\"flex\">\n {/ #kb name /}\n <gxg-label labelPosition=\"start\" class=\"kb-label\">\n {this._componentLocale.label.serverUrl}\n </gxg-label>\n <gxg-combo-box\n disableFilter={!this.enableCustomServer}\n ref={(el: HTMLGxgComboBoxElement) =>\n (this.serverUrlsEl = el as HTMLGxgComboBoxElement)\n }\n class=\"server-urls-combo-box\"\n part=\"server-urls\"\n >\n {this.serverUrls\n ? renderFormItems(\n \"gxg-combo-box-item\",\n this.serverUrls.map(sUrl => ({\n id: sUrl,\n label: sUrl,\n value: sUrl\n })),\n \"server-urls\"\n )\n : null}\n </gxg-combo-box>\n </div>\n <div class=\"grid grid-data\">\n <div>\n <div class=\"grid grid-data-account\">\n {/ #authentication type /}\n <gxg-combo-box\n disableFilter\n value={this.authenticationTypes[0].id}\n ref={(el: HTMLGxgComboBoxElement) =>\n (this.authenticationTypeEl = el as HTMLGxgComboBoxElement)\n }\n class=\"authentication-type\"\n part=\"authentication-type\"\n onValueChanged={this.evaluateAuthenticationType}\n >\n {renderFormItems(\n \"gxg-combo-box-item\",\n this.authenticationTypes,\n \"authentication-type\"\n )}\n </gxg-combo-box>\n\n {/ #user name /}\n <gxg-label labelPosition=\"start\" class=\"kb-label\">\n {`${this._componentLocale.label.userName}:`}\n </gxg-label>\n <gxg-form-text\n ref={(el: HTMLGxgFormTextElement) =>\n (this.userNameEl = el as HTMLGxgFormTextElement)\n }\n value={this.userName}\n class=\"user-name\"\n part=\"user-name\"\n ></gxg-form-text>\n\n {/ #password /}\n <gxg-label labelPosition=\"start\" class=\"kb-label\">\n {`${this._componentLocale.label.password}:`}\n </gxg-label>\n <gxg-form-text\n password\n ref={(el: HTMLGxgFormTextElement) =>\n (this.passwordEl = el as HTMLGxgFormTextElement)\n }\n value={this.password}\n class=\"password\"\n part=\"password\"\n ></gxg-form-text>\n\n {/ #connect /}\n <div>\n <gxg-button\n id=\"button-connect\"\n type=\"primary-text-only\"\n onClick={this.connectCallbackHandler}\n part=\"button-connect\"\n >\n {this._componentLocale.buttons.connect}\n </gxg-button>\n </div>\n </div>\n </div>\n\n <div class=\"grid\">\n <div class=\"grid-data-kbs\">\n <div class=\"search-kbs\">\n <gxg-form-text\n ref={(el: HTMLGxgFormTextElement) =>\n (this.searchKBEl = el as HTMLGxgFormTextElement)\n }\n class=\"search-kb-input\"\n part=\"search-kb\"\n disabled={this.selectionKbDisabled}\n placeholder={this._componentLocale.label.searchKbs}\n ></gxg-form-text>\n </div>\n <div class=\"box-kbs\">\n <gxg-list-box\n singleSelection\n disabled={this.selectionKbDisabled}\n ref={(el: HTMLElement) => (this.listBoxEl = el)}\n part=\"kbs\"\n >\n {this.kbs\n .filter(kb =>\n kb.name\n .toLowerCase()\n .includes(this.kbSearchText.toLowerCase())\n )\n .map(kb => (\n <gxg-list-box-item value={kb.id} key={kb.id}>\n {kb.name}\n </gxg-list-box-item>\n ))}\n </gxg-list-box>\n </div>\n </div>\n <div class=\"grid grid-data-kbs-footer\">\n {/ #kbName /}\n <gxg-form-text\n ref={(el: HTMLGxgFormTextElement) =>\n (this.kbNameEl = el as HTMLGxgFormTextElement)\n }\n label={this._componentLocale.localKb}\n value={this.kbName}\n class=\"kb-name\"\n part=\"kb-name\"\n disabled={this.selectionKbDisabled}\n ></gxg-form-text>\n\n {/ #create button */}\n <div>\n <gxg-button\n id=\"button-create\"\n type=\"primary-text-only\"\n onClick={this.createKbHandler}\n part=\"button-create\"\n disabled={this.selectionKbDisabled}\n >\n {this._componentLocale.buttons.create}\n </gxg-button>\n </div>\n </div>\n </div>\n </div>\n </gx-ide-container>\n </div>\n <gxg-shortcuts src={this.shortcutsSrc}></gxg-shortcuts>\n </Host>\n );\n }\n}\n\nexport interface GXServerConnectionData {\n serverUrl: string;\n authenticationType: GxServerAuthenticationType;\n user: string;\n password: string;\n}\nexport type ConnectionResultData = {\n formResult: FormSubmitResult;\n kbs: KBData[];\n};\nexport interface KBData {\n id: string;\n name: string;\n}\nexport interface CreateKBData {\n id: string;\n name: string;\n}\n"],"version":3}
1	+ {"file":"gx-ide-create-kb-from-server.js","mappings":"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","names":["GxIdeCreateKbFromServer"],"sources":["src/components/create-kb-from-server/create-kb-from-server.scss?tag=gx-ide-create-kb-from-server&encapsulation=shadow","src/components/create-kb-from-server/create-kb-from-server.tsx"],"sourcesContent":["@import \"../../global/gx-ide-common.scss\";\n@import \"../../global/gx-ide-mixins.scss\";\n\n:host {\n display: block;\n border: 1px solid var(--gxg-border-color--regular);\n background-color: var(--mer-color__surface);\n}\n:host(.gxi-create-kb-from-server--shadow) {\n}\n\n.grid-data {\n grid-template-columns: repeat(2, 1fr);\n}\n.grid-data-account {\n grid-template-columns: auto 1fr;\n > :nth-child(1) {\n grid-area: 1 / 1 / 2 / 3;\n }\n > :nth-child(6) {\n grid-area: 4 / 2 / 5 / 3;\n }\n}\n.grid-data-kbs {\n display: flex;\n flex-direction: column;\n gap: var(--gx-ide-grid-row-gap);\n .search-kbs {\n width: 100%;\n display: flex;\n }\n .box-kbs {\n height: 150px;\n }\n}\n.grid-data-kbs-footer {\n display: flex;\n}\n.flex {\n display: flex;\n > :nth-child(2) {\n flex: 1;\n }\n}\n","/* STENCIL IMPORTS /\nimport {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n State,\n getAssetPath,\n Watch\n} from \"@stencil/core\";\n/ OTHER LIBRARIES IMPORTS /\nimport { SelectionChangedEvent } from \"@genexus/gemini/dist/types/components/list-box/list-box\";\n/ CUSTOM IMPORTS /\nimport { GxOption } from \"../../common/types\";\nimport { Locale } from \"../../common/locale\";\nimport { renderFormItems } from \"../../common/common\";\nimport {\n FormSubmitResult,\n GxServerAuthenticationType\n} from \"../../common/types\";\nimport { formSubmitValidation } from \"../../common/form-validation\";\n\n@Component({\n tag: \"gx-ide-create-kb-from-server\",\n styleUrl: \"create-kb-from-server.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/create-kb-from-server\"]\n})\nexport class GxIdeCreateKbFromServer {\n [key: string]: any;\n\n /\nINDEX:\n1.OWN PROPERTIES\n2.REFERENCE TO ELEMENTS\n3.STATE() VARIABLES\n4.PUBLIC PROPERTY API \| WATCH'S\n5.EVENTS (EMIT)\n6.METHODS\n7.LISTENERS\n8.PUBLIC METHODS API\n9.LOCAL METHODS\n10.RENDER() FUNCTION\n/\n\n // 1.OWN PROPERTIES //\n\n /\n The component hard-coded strings translations.\n /\n private _componentLocale: any;\n private renderedFirstTime = false;\n private shortcutsSrc = getAssetPath(\n `./gx-ide-assets/create-kb-from-server/shortcuts.json`\n );\n\n / References needed to collect data with \"Connect\" and \"Create\" buttons submit/\n private authenticationTypeEl!: HTMLGxgComboBoxElement;\n private serverUrlsEl!: HTMLGxgComboBoxElement;\n private kbNameEl!: HTMLGxgFormTextElement;\n private passwordEl!: HTMLGxgFormTextElement;\n private userNameEl!: HTMLGxgFormTextElement;\n private searchKBEl!: HTMLGxgFormTextElement;\n private listBoxEl!: HTMLElement;\n private kbIdSelected: string = null;\n private authenticationTypes: GxOption[] = [];\n\n // 2. REFERENCE TO ELEMENTS //\n\n @Element() el: HTMLGxIdeCreateKbFromServerElement;\n\n // 3.STATE() VARIABLES //\n\n /\n Disabled or not the part for select and create the KB\n /\n @State() selectionKbDisabled = true;\n\n /\n KBs that return from connect to the server\n /\n\n @State() kbs: KBData[] = [];\n @Watch(\"kbs\")\n watchPropHandler(newKbs: KBData[]) {\n / When the list of servers are updated, the first server is selected by default /\n this.kbIdSelected = newKbs[0].id;\n this.kbName = newKbs[0].name;\n }\n\n /\n KBs search text\n /\n @State() kbSearchText = \"\";\n\n // 4.PUBLIC PROPERTY API \| WATCH'S //\n\n /\n If true it displays the component title on the header\n /\n @Prop() readonly displayTitle = false;\n\n /\n Callback that will be invoked when the user connect to the kb server (‘Connect’ button)\n /\n @Prop() readonly connectCallback: (\n data: GXServerConnectionData\n ) => Promise<ConnectionResultData>;\n\n /\n Callback that will be invoked when the user confirms KB creation (‘Create’ button)\n /\n @Prop() readonly createKBCallback: (\n data: CreateKBData\n ) => Promise<FormSubmitResult>;\n\n /\n If is true then the user can specify a server url that don't be in the combo box of server urls.\n /\n @Prop() readonly enableCustomServer: boolean = false;\n\n /\n The knowledge base default suggested name\n /\n // eslint-disable-next-line @stencil-community/strict-mutable\n @Prop({ mutable: true }) kbName: string;\n\n /\n Password for the database connection.\n /\n @Prop() readonly password: string;\n\n /\n Array of URLs of cataloged servers to be displayed in the combo\n /\n @Prop() readonly serverUrls!: string[];\n\n /\n Username for the database connection.\n /\n @Prop() readonly userName: string;\n\n // 5.EVENTS (EMIT) //\n\n /\n This event is emitted once just after the component is fully loaded and the first render() occurs\n /\n @Event() componentDidRenderFirstTime: EventEmitter<boolean>;\n\n // 6.METHODS //\n\n async componentWillLoad() {\n this._componentLocale = await Locale.getComponentStrings(this.el);\n this.setAuthenticationTypes();\n }\n\n componentDidLoad() {\n (this.serverUrlsEl as HTMLElement).focus();\n this.addEventListeners();\n }\n\n componentDidRender() {\n if (!this.renderedFirstTime) {\n this.componentDidRenderFirstTime.emit(\n this._componentLocale.componentName\n );\n this.renderedFirstTime = true;\n }\n }\n\n // 7.LISTENERS //\n\n // 8.PUBLIC METHODS API //\n\n // 9.LOCAL METHODS //\n\n private setAuthenticationTypes = () => {\n this.authenticationTypes = [\n {\n id: \"genexus\",\n value: \"genexus\",\n label: this._componentLocale.authenticationTypes.genexusAccount\n },\n {\n id: \"local\",\n value: \"local\",\n label: this._componentLocale.authenticationTypes.local\n }\n ];\n };\n\n private addEventListeners = () => {\n this.serverUrlsEl.addEventListener(\"valueChanged\", () => {\n this.reset();\n });\n\n this.searchKBEl.addEventListener(\n \"valueChanged\",\n (e: CustomEvent<string>) => {\n this.kbNameEl.value = \"\";\n this.kbIdSelected = null;\n this.kbSearchText = e.detail;\n }\n );\n\n this.listBoxEl.addEventListener(\n \"selectionChanged\",\n (ev: CustomEvent<SelectionChangedEvent>): void => {\n const selectedItems = ev.detail.items;\n let selectedItem;\n if (selectedItems.length > 0) {\n selectedItem = ev.detail.items[0];\n }\n if (selectedItem) {\n this.kbIdSelected = selectedItem.value;\n const kbSelected = this.kbs.find(kb => kb.id === this.kbIdSelected);\n if (kbSelected) {\n this.kbNameEl.value = kbSelected.name;\n }\n }\n }\n );\n };\n\n private reset() {\n this.kbs = [];\n this.kbIdSelected = null;\n this.selectionKbDisabled = true;\n this.searchKBEl.value = \"\";\n this.kbSearchText = \"\";\n }\n\n private createKbHandler = (): void => {\n if (this.createKBCallback) {\n const createKBCallbackPromise = this.createKBCallback({\n id: this.kbIdSelected,\n name: this.kbNameEl.value\n });\n createKBCallbackPromise.then((formSubmitResult: FormSubmitResult) => {\n formSubmitValidation(formSubmitResult, this);\n });\n }\n };\n\n private connectCallbackHandler = (): void => {\n if (this.connectCallback) {\n const connectCallbackPromise = this.connectCallback({\n serverUrl: this.serverUrlsEl.value,\n authenticationType: this.authenticationTypeEl.value,\n user: this.userNameEl?.value,\n password: this.passwordEl?.value\n });\n connectCallbackPromise.then(\n (connectionResultData: ConnectionResultData) => {\n formSubmitValidation(connectionResultData.formResult, this);\n if (\n connectionResultData.formResult.success &&\n connectionResultData.kbs\n ) {\n this.kbs = connectionResultData.kbs;\n this.selectionKbDisabled = false;\n }\n }\n );\n }\n };\n\n // 10.RENDER() FUNCTION //\n\n // 11.RENDER() FUNCTION //\n\n render(): void {\n return (\n <Host class=\"gx-ide-component\">\n <div class=\"gx-ide-main-wrapper\">\n <gx-ide-container\n containerTitle={\n this.displayTitle ? this._componentLocale.componentName : null\n }\n >\n <div class=\"flex\">\n {/ #kb name /}\n <gxg-label labelPosition=\"start\" class=\"kb-label\">\n {this._componentLocale.label.serverUrl}\n </gxg-label>\n <gxg-combo-box\n disableFilter={!this.enableCustomServer}\n ref={(el: HTMLGxgComboBoxElement) =>\n (this.serverUrlsEl = el as HTMLGxgComboBoxElement)\n }\n class=\"server-urls-combo-box\"\n part=\"server-urls\"\n >\n {this.serverUrls\n ? renderFormItems(\n \"gxg-combo-box-item\",\n this.serverUrls.map(sUrl => ({\n id: sUrl,\n label: sUrl,\n value: sUrl\n })),\n \"server-urls\"\n )\n : null}\n </gxg-combo-box>\n </div>\n <div class=\"grid grid-data\">\n <div>\n <div class=\"grid grid-data-account\">\n {/ #authentication type /}\n <gxg-combo-box\n tool-tip\n disableFilter\n value={this.authenticationTypes[0].id}\n ref={(el: HTMLGxgComboBoxElement) =>\n (this.authenticationTypeEl = el as HTMLGxgComboBoxElement)\n }\n class=\"authentication-type\"\n part=\"authentication-type\"\n onValueChanged={this.evaluateAuthenticationType}\n >\n {renderFormItems(\n \"gxg-combo-box-item\",\n this.authenticationTypes,\n \"authentication-type\"\n )}\n </gxg-combo-box>\n\n {/ #user name /}\n <gxg-label labelPosition=\"start\" class=\"kb-label\">\n {`${this._componentLocale.label.userName}:`}\n </gxg-label>\n <gxg-form-text\n ref={(el: HTMLGxgFormTextElement) =>\n (this.userNameEl = el as HTMLGxgFormTextElement)\n }\n tool-tip\n value={this.userName}\n class=\"user-name\"\n part=\"user-name\"\n ></gxg-form-text>\n\n {/ #password /}\n <gxg-label labelPosition=\"start\" class=\"kb-label\">\n {`${this._componentLocale.label.password}:`}\n </gxg-label>\n <gxg-form-text\n tool-tip\n password\n ref={(el: HTMLGxgFormTextElement) =>\n (this.passwordEl = el as HTMLGxgFormTextElement)\n }\n value={this.password}\n class=\"password\"\n part=\"password\"\n ></gxg-form-text>\n\n {/ #connect /}\n <div>\n <gxg-button\n id=\"button-connect\"\n type=\"primary-text-only\"\n onClick={this.connectCallbackHandler}\n part=\"button-connect\"\n >\n {this._componentLocale.buttons.connect}\n </gxg-button>\n </div>\n </div>\n </div>\n\n <div class=\"grid\">\n <div class=\"grid-data-kbs\">\n <div class=\"search-kbs\">\n <gxg-form-text\n ref={(el: HTMLGxgFormTextElement) =>\n (this.searchKBEl = el as HTMLGxgFormTextElement)\n }\n class=\"search-kb-input\"\n part=\"search-kb\"\n disabled={this.selectionKbDisabled}\n placeholder={this._componentLocale.label.searchKbs}\n ></gxg-form-text>\n </div>\n <div class=\"box-kbs\">\n <gxg-list-box\n singleSelection\n disabled={this.selectionKbDisabled}\n ref={(el: HTMLElement) => (this.listBoxEl = el)}\n part=\"kbs\"\n >\n {this.kbs\n .filter(kb =>\n kb.name\n .toLowerCase()\n .includes(this.kbSearchText.toLowerCase())\n )\n .map(kb => (\n <gxg-list-box-item value={kb.id} key={kb.id}>\n {kb.name}\n </gxg-list-box-item>\n ))}\n </gxg-list-box>\n </div>\n </div>\n <div class=\"grid grid-data-kbs-footer\">\n {/ #kbName /}\n <gxg-form-text\n ref={(el: HTMLGxgFormTextElement) =>\n (this.kbNameEl = el as HTMLGxgFormTextElement)\n }\n label={this._componentLocale.localKb}\n value={this.kbName}\n class=\"kb-name\"\n part=\"kb-name\"\n disabled={this.selectionKbDisabled}\n ></gxg-form-text>\n\n {/ #create button */}\n <div>\n <gxg-button\n id=\"button-create\"\n type=\"primary-text-only\"\n onClick={this.createKbHandler}\n part=\"button-create\"\n disabled={this.selectionKbDisabled}\n >\n {this._componentLocale.buttons.create}\n </gxg-button>\n </div>\n </div>\n </div>\n </div>\n </gx-ide-container>\n </div>\n <gxg-shortcuts src={this.shortcutsSrc}></gxg-shortcuts>\n </Host>\n );\n }\n}\n\nexport interface GXServerConnectionData {\n serverUrl: string;\n authenticationType: GxServerAuthenticationType;\n user: string;\n password: string;\n}\nexport type ConnectionResultData = {\n formResult: FormSubmitResult;\n kbs: KBData[];\n};\nexport interface KBData {\n id: string;\n name: string;\n}\nexport interface CreateKBData {\n id: string;\n name: string;\n}\n"],"version":3}

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

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