@genexus/genexus-ide-ui 0.0.92 → 0.0.94

package/dist/components/list-box.js

@@ -7,7 +7,7 @@ import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './button.js';
 import { d as defineCustomElement$1 } from './icon2.js';
 
-const listBoxCss = ":host(.gxg--disabled) .form-element,:host(.gxg--disabled.form-element){pointer-events:none;background-color:var(--gxg-background-color--disabled) !important;color:var(--gxg-color--disabled) !important;border-color:var(--gxg-border-color--disabled) !important;cursor:default !important}:root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);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(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.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-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{cursor:initial}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px);height:var(--gxg-scrollbar-width, 6px)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px);border:var(--gxg-scrollbar-track-thumb-border);background-clip:padding-box}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04)}:host(.gxg-validation--warning) .form-element{border-color:var(--color-warning-dark)}:host(.gxg-validation--warning) .form-element:focus{outline-color:var(--color-warning-dark);border-color:var(--color-warning-dark)}:host(.gxg-validation--warning) .form-element:focus+.checkmark{--checkmark-border-color:var(--color-warning-dark)}:host(.gxg-validation--error) .form-element{border-color:var(--color-error-dark)}:host(.gxg-validation--error) .form-element:focus{outline-color:var(--color-error-dark);border-color:var(--color-error-dark)}:host(.gxg-validation--error) .form-element:focus+.checkmark{--checkmark-border-color:var(--color-error-dark)}:host(.gxg-validation--success) .form-element{border-color:var(--color-success-dark)}:host(.gxg-validation--success) .form-element:focus{outline-color:var(--color-success-dark);border-color:var(--color-success-dark)}:host(.gxg-validation--success) .form-element:focus+.checkmark{--checkmark-border-color:var(--color-success-dark)}.tooltip-outer-wrapper{display:grid;grid-template-columns:0fr;transition:grid-template-columns var(--timing-02)}:host(.tooltip--visible) .tooltip-outer-wrapper{grid-template-columns:1fr}.tooltip-inner-wrapper{overflow:hidden;transition:150ms width;width:0}.tooltip-inner-wrapper gxg-icon{display:flex;position:relative !important;top:0 !important;transform:none !important;margin-inline-start:var(--spacing-comp-01)}.tooltip-inner-wrapper--visible{width:24px}.tooltip-inner-wrapper--hidden{display:none}:host{display:block;font-size:var(--font-size-sm);font-family:var(--font-family-primary);background-color:var(--color-background);color:var(--color-on-background);height:100%}:host .container{height:100%;border:var(--border-radius-xs) var(--border-style-regular) var(--gxg-border-color--regular);border-radius:var(--border-radius-sm);overflow:hidden}:host .header{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;background-color:var(--gray-01);border-bottom:var(--gxg-border-common-styles);padding:var(--spacing-comp-01) var(--spacing-comp-02);text-transform:capitalize;font-size:inherit;font-weight:var(--font-weight-semibold);color:var(--color-on-background)}:host .icon{margin-inline-end:var(--spacing-comp-01)}:host .checkbox{margin-inline-end:var(--spacing-comp-01)}:host.selected{background-color:var(--color-secondary-active);color:var(--color-always-white)}.main{overflow-y:auto;cursor:initial}.main::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px);height:var(--gxg-scrollbar-width, 6px)}.main::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}.main::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px);border:var(--gxg-scrollbar-track-thumb-border);background-clip:padding-box}.main::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04)}.main--no-border{border:none}.container:focus-within{outline:none}.container:not(:focus-within){--gxg-border-color--focused:transparent}:host([no-border]) .container{border:none}.suggestions__container{background-color:var(--gray-01);color:var(--gray-06);font-family:inherit;font-size:var(--font-size-sm);padding:var(--spacing-comp-01) var(--spacing-comp-02);display:flex;gap:var(--spacing-comp-01);align-items:center}.suggestions__list{margin:0;padding:0;list-style-type:none;flex-grow:1}:host([no-border]) .container{border:none}:host([border-top]) .container{border-top:1px solid var(--gxg-border-color--regular)}:host([border-end]) .container{border-inline-end:1px solid var(--gxg-border-color--regular)}:host([border-bottom]) .container{border-bottom:1px solid var(--gxg-border-color--regular)}:host([border-start]) .container{border-inline-start:1px solid var(--gxg-border-color--regular)}:host(.gxg--disabled) .header{color:var(--gxg-color--disabled);border-bottom-color:var(--gxg-border-color--disabled)}.messages-wrapper{margin-top:var(--spacing-comp-02);display:flex;gap:var(--spacing-comp-01);flex-direction:column}:host(.large){font-size:var(--font-size-lg)}";
+const listBoxCss = ":host(.gxg--disabled) .form-element,:host(.gxg--disabled.form-element){pointer-events:none;background-color:var(--gxg-background-color--disabled) !important;color:var(--gxg-color--disabled) !important;border-color:var(--gxg-border-color--disabled) !important;cursor:default !important}:root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);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(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.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-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{cursor:initial}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px);height:var(--gxg-scrollbar-width, 6px)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px);border:var(--gxg-scrollbar-track-thumb-border);background-clip:padding-box}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04)}:host(.gxg-validation--warning) .form-element{border-color:var(--color-warning-dark)}:host(.gxg-validation--warning) .form-element:focus{outline-color:var(--color-warning-dark);border-color:var(--color-warning-dark)}:host(.gxg-validation--warning) .form-element:focus+.checkmark{--checkmark-border-color:var(--color-warning-dark)}:host(.gxg-validation--error) .form-element{border-color:var(--color-error-dark)}:host(.gxg-validation--error) .form-element:focus{outline-color:var(--color-error-dark);border-color:var(--color-error-dark)}:host(.gxg-validation--error) .form-element:focus+.checkmark{--checkmark-border-color:var(--color-error-dark)}:host(.gxg-validation--success) .form-element{border-color:var(--color-success-dark)}:host(.gxg-validation--success) .form-element:focus{outline-color:var(--color-success-dark);border-color:var(--color-success-dark)}:host(.gxg-validation--success) .form-element:focus+.checkmark{--checkmark-border-color:var(--color-success-dark)}.tooltip-outer-wrapper{display:grid;grid-template-columns:0fr;transition:grid-template-columns var(--timing-02)}:host(.tooltip--visible) .tooltip-outer-wrapper{grid-template-columns:1fr}.tooltip-inner-wrapper{overflow:hidden;transition:150ms width;width:0}.tooltip-inner-wrapper gxg-icon{display:flex;position:relative !important;top:0 !important;transform:none !important;margin-inline-start:var(--spacing-comp-01)}.tooltip-inner-wrapper--visible{width:24px}.tooltip-inner-wrapper--hidden{display:none}:host{display:block;font-size:var(--font-size-sm);font-family:var(--font-family-primary);background-color:var(--color-background);color:var(--color-on-background);height:100%}:host .container{height:100%;border:var(--border-radius-xs) var(--border-style-regular) var(--gxg-border-color--regular);border-radius:var(--border-radius-sm);overflow:hidden}:host .header{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;background-color:var(--gray-01);border-bottom:var(--gxg-border-common-styles);padding:var(--spacing-comp-01) var(--spacing-comp-02);text-transform:capitalize;font-size:inherit;font-weight:var(--font-weight-semibold);color:var(--color-on-background)}:host .icon{margin-inline-end:var(--spacing-comp-01)}:host .checkbox{margin-inline-end:var(--spacing-comp-01)}:host.selected{background-color:var(--color-secondary-active);color:var(--color-always-white)}.main{overflow-y:auto;cursor:initial}.main::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px);height:var(--gxg-scrollbar-width, 6px)}.main::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}.main::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px);border:var(--gxg-scrollbar-track-thumb-border);background-clip:padding-box}.main::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04)}.main--no-border{border:none}.container:focus-within{outline:none}.container:not(:focus-within){--gxg-border-color--focused:transparent}:host([no-border]) .container{border:none}.suggestions__container{background-color:var(--gray-01);color:var(--gray-06);font-family:inherit;font-size:var(--font-size-sm);padding:var(--spacing-comp-01) var(--spacing-comp-02);display:flex;gap:var(--spacing-comp-01);align-items:center;display:none}.suggestions__list{margin:0;padding:0;list-style-type:none;flex-grow:1}:host([no-border]) .container{border:none}:host([border-top]) .container{border-top:1px solid var(--gxg-border-color--regular)}:host([border-end]) .container{border-inline-end:1px solid var(--gxg-border-color--regular)}:host([border-bottom]) .container{border-bottom:1px solid var(--gxg-border-color--regular)}:host([border-start]) .container{border-inline-start:1px solid var(--gxg-border-color--regular)}:host(.gxg--disabled) .header{color:var(--gxg-color--disabled);border-bottom-color:var(--gxg-border-color--disabled)}.messages-wrapper{margin-top:var(--spacing-comp-02);display:flex;gap:var(--spacing-comp-01);flex-direction:column}:host(.large){font-size:var(--font-size-lg)}";
 
 const GxgListBox = /*@__PURE__*/ proxyCustomElement(class GxgListBox extends HTMLElement {
     constructor() {
@@ -15,59 +15,56 @@ const GxgListBox = /*@__PURE__*/ proxyCustomElement(class GxgListBox extends HTM
          * This is needed to evaluate if keyboard suggestions should be displayed.
          */
         this.userUsedKeyboard = false;
-        this.firstChange = true;
+        this.selectedItemsState = [];
         /*VALIDATION*/
         this.formMessageLogic = formMessageLogic;
-        this.initialSetup = () => {
-            /*set index to every item*/
+        this.setIndexes = () => {
             const allItems = this.getAllItems();
-            if (allItems === null || allItems === void 0 ? void 0 : allItems.length)
-                allItems.forEach((item, i) => {
-                    item.index = i;
+            allItems.forEach((item, i) => {
+                item.index = i;
+            });
+        };
+        this.initialSetup = () => {
+            const enabledItems = this.getEnabledItems();
+            const selectedItemsLength = this.selectedItemsLength();
+            //1. Select item if allowsEmpty is false and no item is currently selected
+            const selectItem = !this.allowsEmpty && selectedItemsLength === 0;
+            if (selectItem) {
+                const firstDeselectedItem = enabledItems.find(item => {
+                    return !item.selected;
                 });
-            /*conditions to do setup*/
-            const selectItem = !this.allowsEmpty && this.selectedItemsLength() === 0;
-            const unselectItems = this.singleSelection && this.selectedItemsLength() > 1;
-            const setCheckbox = this.checkboxes;
-            const disableListbox = this.disabled;
-            const doSetup = selectItem || setCheckbox || unselectItems || disableListbox;
-            /*/conditions to do setup*/
-            if (doSetup) {
-                const enabledItems = this.getEnabledItems();
+                firstDeselectedItem && (firstDeselectedItem.selected = true);
+            }
+            else if (this.singleSelection && selectedItemsLength > 1) {
+                //Only one item can be selected. Unselect every selected items, except the first one.
                 const selectedItems = this.getSelectedItemsFunc();
-                if (selectItem) {
-                    const firstDeselectedItem = enabledItems.find((item) => {
-                        return !item.selected;
-                    });
-                    firstDeselectedItem && (firstDeselectedItem.selected = true);
-                }
-                else if (unselectItems) {
-                    if (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) {
-                        selectedItems.forEach((item, i) => {
-                            /*keep only the first one selected*/
-                            i !== 0 && (item.selected = false);
-                        });
+                selectedItems.forEach((selectedItem, i) => {
+                    if (i !== 0) {
+                        selectedItem.selected = false;
                     }
-                }
-                if (setCheckbox) {
-                    enabledItems.forEach((item) => {
-                        item.checkbox = true;
-                        !this.disableSuggestions && (item.emitCheckboxChange = true);
-                    });
-                }
-                if (disableListbox) {
-                    enabledItems.forEach((item) => {
-                        item.disabled = true;
-                    });
+                });
+            }
+            //2. Set active item, if not active item exists yet
+            const currentActiveItem = this.getActiveItem();
+            if (!currentActiveItem) {
+                const firstEnabledItem = this.getEnabledItems()[0];
+                if (firstEnabledItem) {
+                    firstEnabledItem.active = true;
+                    this.activeItem = firstEnabledItem;
                 }
             }
-            /*Do updateSelectedItems to initialize this.getSelectedItems array*/
-            this.selectedItemsLength() > 0 && this.updateSelectedItems();
-        };
-        this.setInitialActive = () => {
-            const firstSelectedItem = this.getFirstSelectedItem();
-            if (firstSelectedItem) {
-                this.setActiveItem(firstSelectedItem);
+            //3. Set index on every item
+            this.setIndexes();
+            //4. disable items
+            if (this.disabled) {
+                this.disabledHandler(true);
+            }
+            //5. set checkboxes
+            if (this.checkboxes) {
+                const allItems = this.getAllItems();
+                allItems.forEach(item => {
+                    item.checkbox = true;
+                });
             }
         };
         this.handleKeyDown = (e) => {
@@ -75,7 +72,7 @@ const GxgListBox = /*@__PURE__*/ proxyCustomElement(class GxgListBox extends HTM
             const ctrlKey = e.ctrlKey;
             const cmdKey = e.metaKey;
             const shiftKey = e.shiftKey;
-            const activeItemIndex = this.getIndexByElement(this.activeItem);
+            //const activeItemIndex = this.getIndexByElement(this.activeItem);
             if (e.code === "ArrowDown" ||
                 e.code === "ArrowUp" ||
                 e.code === "Space" ||
@@ -85,7 +82,7 @@ const GxgListBox = /*@__PURE__*/ proxyCustomElement(class GxgListBox extends HTM
                 e.preventDefault();
             }
             if (e.code === "ArrowDown" || e.code === "ArrowUp") {
-                this.HandleArrow(e.code, shiftKey, activeItemIndex);
+                this.handleArrow(e.code, shiftKey);
             }
             else if (e.code === "Space") {
                 if (shiftKey && ctrlKey) {
@@ -93,7 +90,7 @@ const GxgListBox = /*@__PURE__*/ proxyCustomElement(class GxgListBox extends HTM
                     const changedLength = this.setCheckboxState(this.getHighlightedItems(), false);
                     changedLength > 0 && (this.hideKeyboardSuggestions = true);
                 }
-                else if (shiftKey && !ctrlKey) {
+                else if (shiftKey && (!ctrlKey || !cmdKey)) {
                     const changedLength = this.setCheckboxState(this.getHighlightedItems(), true);
                     changedLength > 0 && (this.hideKeyboardSuggestions = true);
                 }
@@ -116,7 +113,8 @@ const GxgListBox = /*@__PURE__*/ proxyCustomElement(class GxgListBox extends HTM
                             this.clearHighlightedItems();
                         }
                         else {
-                            this.selectHighlightedItems();
+                            this.selectItems(this.activeItem);
+                            //this.selectHighlightedItems();
                         }
                     }
                 }
@@ -131,20 +129,16 @@ const GxgListBox = /*@__PURE__*/ proxyCustomElement(class GxgListBox extends HTM
                 /*Deselect highlighted items*/
                 this.unselectHighlightedItems();
             }
+            this.evaluateSelectedItems();
         };
-        this.HandleArrow = (direction, shiftKey, activeItemIndex) => {
+        this.handleArrow = (direction, shiftKey) => {
             /*Get the next element*/
             let newElement;
-            if (activeItemIndex >= 0) {
-                direction === "ArrowDown"
-                    ? (newElement = this.getNextItem(activeItemIndex))
-                    : (newElement = this.getPrevItem(activeItemIndex));
-            }
-            else {
+            const activeElement = this.getActiveItem();
+            newElement =
                 direction === "ArrowDown"
-                    ? (newElement = this.getFirstEnabledItem())
-                    : null;
-            }
+                    ? (newElement = this.getNextItem(activeElement))
+                    : (newElement = this.getPrevItem(activeElement));
             /*Handle*/
             if (newElement) {
                 this.singleSelection &&
@@ -190,31 +184,54 @@ const GxgListBox = /*@__PURE__*/ proxyCustomElement(class GxgListBox extends HTM
             let index;
             const enabledItems = this.getEnabledItems();
             if (enabledItems === null || enabledItems === void 0 ? void 0 : enabledItems.length) {
-                const element = enabledItems.find((item) => item === el);
+                const element = enabledItems.find(item => item === el);
                 element && (index = element.index);
             }
             return index;
         };
+        this.evaluateSelectedItems = () => {
+            const selectedItemsArray = [];
+            const selectedItemsArrayFullInfo = [];
+            const selectedItems = this.getSelectedItems();
+            selectedItems.then(result => {
+                result.forEach(item => {
+                    selectedItemsArray.push(item.value);
+                    selectedItemsArrayFullInfo.push({
+                        active: item.active,
+                        selected: item.selected,
+                        checked: item.checked,
+                        index: item.index,
+                        value: item.value
+                    });
+                });
+                const arraysDiffer = JSON.stringify(this.selectedItemsState) !==
+                    JSON.stringify(selectedItemsArray);
+                if (arraysDiffer) {
+                    this.selectedItemsState = selectedItemsArray;
+                    this.selectedItems = [...selectedItemsArrayFullInfo];
+                }
+            });
+        };
         this.updateSelectedItems = () => {
             const selectedItemsArray = [];
-            const selectedItems = this.getSelectedItemsFunc();
-            selectedItems.forEach((item) => {
-                selectedItemsArray.push({
-                    active: item.active,
-                    selected: item.selected,
-                    checked: item.checked,
-                    index: item.index,
-                    value: item.value || item.textContent,
+            const selectedItems = this.getSelectedItems();
+            selectedItems.then(result => {
+                result.forEach(item => {
+                    selectedItemsArray.push(item.value);
                 });
+                const arraysDiffer = JSON.stringify(this.selectedItemsState) !==
+                    JSON.stringify(selectedItemsArray);
+                if (arraysDiffer) {
+                    this.selectedItemsState = selectedItemsArray;
+                }
             });
-            this.selectedItems = [...selectedItemsArray];
         };
         /* OTHER */
         this.getAllItems = () => {
             const allItemsArray = [];
             const allItems = this.el.querySelectorAll("gxg-list-box-item");
             if (allItems === null || allItems === void 0 ? void 0 : allItems.length) {
-                allItems.forEach((item) => {
+                allItems.forEach(item => {
                     allItemsArray.push(item);
                 });
             }
@@ -232,7 +249,7 @@ const GxgListBox = /*@__PURE__*/ proxyCustomElement(class GxgListBox extends HTM
         this.emitEmptySelection = false;
         this.keyboardSuggestions = {
             checkCheckbox: "to check a checkbox press (shift + space)",
-            uncheckCheckbox: "to uncheck a checkbox press (shift + ctrl + space)",
+            uncheckCheckbox: "to uncheck a checkbox press (shift + ctrl + space)"
         };
         this.disableSuggestions = false;
         this.noBorder = false;
@@ -257,13 +274,13 @@ const GxgListBox = /*@__PURE__*/ proxyCustomElement(class GxgListBox extends HTM
     async getSelectedItems() {
         const selectedItems = this.getSelectedItemsFunc();
         const selectedItemsInformation = [];
-        selectedItems.forEach((selectedItem) => {
+        selectedItems.forEach(selectedItem => {
             selectedItemsInformation.push({
                 active: selectedItem.active,
                 selected: selectedItem.selected,
                 checked: selectedItem.checked,
                 index: selectedItem.index,
-                value: selectedItem.value,
+                value: selectedItem.value || selectedItem.textContent
             });
         });
         return selectedItemsInformation;
@@ -273,21 +290,23 @@ const GxgListBox = /*@__PURE__*/ proxyCustomElement(class GxgListBox extends HTM
             this.headerHeight = this.header.clientHeight;
         }
     }
-    componentWillLoad() {
-        this.initialSetup();
-    }
     componentDidLoad() {
-        this.setInitialActive();
+        //this.setInitialActive();
     }
     itemLoadedHandler() {
-        //this.initialSetup();
+        this.initialSetup();
+        this.updateSelectedItems();
     }
     itemClickedHandler(event) {
-        this.containerEl.focus();
         const { clickedItem, ctrlKey, cmdKey, shiftKey, index } = event["detail"];
+        if (this.singleSelection) {
+            this.setActiveItem(clickedItem);
+        }
+        this.containerEl.focus();
         //this.clearActiveItem();
         if (this.singleSelection) {
-            if (this.activeItem === clickedItem && !this.allowsEmpty) {
+            if (clickedItem.selected &&
+                !this.allowsEmpty) {
                 /*same item. do nothing.*/
                 return;
             }
@@ -303,7 +322,7 @@ const GxgListBox = /*@__PURE__*/ proxyCustomElement(class GxgListBox extends HTM
         }
         else {
             /*multiple-selection allowed*/
-            if (shiftKey || !ctrlKey) {
+            if (shiftKey || (!cmdKey && !cmdKey)) {
                 this.clearHighlightedItems();
                 this.clearSelectedItems();
             }
@@ -324,7 +343,7 @@ const GxgListBox = /*@__PURE__*/ proxyCustomElement(class GxgListBox extends HTM
                 }
                 this.selectMultipleItems(fromIndex, toIndex);
             }
-            else if (ctrlKey) {
+            else if (ctrlKey || cmdKey) {
                 if (!this.allowsEmpty &&
                     this.selectedItemsLength() === 1 &&
                     clickedItem.selected) {
@@ -340,12 +359,10 @@ const GxgListBox = /*@__PURE__*/ proxyCustomElement(class GxgListBox extends HTM
             }
         }
         this.setActiveItem(clickedItem);
+        this.evaluateSelectedItems();
     }
     selectedItemsHandler(newArray) {
-        if (!this.firstChange && (newArray.length > 0 || this.emitEmptySelection)) {
-            this.selectionChanged.emit({ items: newArray });
-        }
-        this.firstChange = false;
+        this.selectionChanged.emit({ items: newArray });
     }
     checkedItemsHandler(newArray) {
         this.checkedChanged.emit(newArray);
@@ -353,13 +370,13 @@ const GxgListBox = /*@__PURE__*/ proxyCustomElement(class GxgListBox extends HTM
     disabledHandler(disabled) {
         if (disabled) {
             const enabledItems = this.getEnabledItems();
-            enabledItems === null || enabledItems === void 0 ? void 0 : enabledItems.forEach((item) => {
+            enabledItems === null || enabledItems === void 0 ? void 0 : enabledItems.forEach(item => {
                 item.disabled = true;
             });
         }
         else {
             const disabledItems = this.getDisabledItems();
-            disabledItems === null || disabledItems === void 0 ? void 0 : disabledItems.forEach((item) => {
+            disabledItems === null || disabledItems === void 0 ? void 0 : disabledItems.forEach(item => {
                 item.disabled = false;
             });
         }
@@ -379,7 +396,7 @@ const GxgListBox = /*@__PURE__*/ proxyCustomElement(class GxgListBox extends HTM
         const checkedItemsArray = [];
         const enabledItems = this.getEnabledItems();
         if (enabledItems === null || enabledItems === void 0 ? void 0 : enabledItems.length) {
-            enabledItems.forEach((enabledItem) => {
+            enabledItems.forEach(enabledItem => {
                 let item;
                 if (enabledItem === checkedItemEl) {
                     item = checkedItemEl;
@@ -394,7 +411,7 @@ const GxgListBox = /*@__PURE__*/ proxyCustomElement(class GxgListBox extends HTM
                         selected: item.selected,
                         checked: checked,
                         index: item.index,
-                        value: item.value || item.textContent,
+                        value: item.value || item.textContent
                     });
                 }
             });
@@ -413,7 +430,7 @@ const GxgListBox = /*@__PURE__*/ proxyCustomElement(class GxgListBox extends HTM
             ? this.el.querySelectorAll("gxg-list-box-item[selected]:not([highlighted])")
             : this.el.querySelectorAll("gxg-list-box-item[selected]");
         if (actualSelectedItems.length > 0) {
-            actualSelectedItems.forEach((item) => {
+            actualSelectedItems.forEach(item => {
                 this.unselectItems(item);
             });
         }
@@ -422,7 +439,7 @@ const GxgListBox = /*@__PURE__*/ proxyCustomElement(class GxgListBox extends HTM
         const selectedItemsArray = [];
         const enabledItems = this.getAllItems();
         if (enabledItems === null || enabledItems === void 0 ? void 0 : enabledItems.length) {
-            enabledItems.forEach((item) => {
+            enabledItems.forEach(item => {
                 item.selected && selectedItemsArray.push(item);
             });
         }
@@ -444,7 +461,7 @@ const GxgListBox = /*@__PURE__*/ proxyCustomElement(class GxgListBox extends HTM
     unhighlightAll(ignoreActiveItem = false) {
         const enabledItems = this.getEnabledItems();
         if (enabledItems === null || enabledItems === void 0 ? void 0 : enabledItems.length) {
-            enabledItems.forEach((item) => {
+            enabledItems.forEach(item => {
                 ignoreActiveItem && item === this.activeItem
                     ? null
                     : (item.highlighted = false);
@@ -455,7 +472,7 @@ const GxgListBox = /*@__PURE__*/ proxyCustomElement(class GxgListBox extends HTM
     }
     toggleHighlightedItems() {
         const highlightedItems = this.getHighlightedItems();
-        highlightedItems.forEach((item) => {
+        highlightedItems.forEach(item => {
             this.toggleItem(item);
         });
     }
@@ -470,7 +487,7 @@ const GxgListBox = /*@__PURE__*/ proxyCustomElement(class GxgListBox extends HTM
     clearHighlightedItems() {
         const enabledItems = this.getEnabledItems();
         if (enabledItems === null || enabledItems === void 0 ? void 0 : enabledItems.length) {
-            enabledItems.forEach((item) => {
+            enabledItems.forEach(item => {
                 item.highlighted && this.unhighlightItem(item);
             });
         }
@@ -479,7 +496,7 @@ const GxgListBox = /*@__PURE__*/ proxyCustomElement(class GxgListBox extends HTM
         const highlightedItemsArray = [];
         const enabledItems = this.getEnabledItems();
         if (enabledItems === null || enabledItems === void 0 ? void 0 : enabledItems.length) {
-            enabledItems.forEach((item) => {
+            enabledItems.forEach(item => {
                 item.highlighted && highlightedItemsArray.push(item);
             });
         }
@@ -492,7 +509,7 @@ const GxgListBox = /*@__PURE__*/ proxyCustomElement(class GxgListBox extends HTM
         let highlightedItemsLength = 0;
         const enabledItems = this.getEnabledItems();
         if (enabledItems === null || enabledItems === void 0 ? void 0 : enabledItems.length) {
-            enabledItems.forEach((item) => {
+            enabledItems.forEach(item => {
                 this.highlightItem(item, true);
                 highlightedItemsLength++;
             });
@@ -504,42 +521,42 @@ const GxgListBox = /*@__PURE__*/ proxyCustomElement(class GxgListBox extends HTM
         const enabledItems = this.getEnabledItems();
         let itemByIndex;
         if (enabledItems === null || enabledItems === void 0 ? void 0 : enabledItems.length) {
-            itemByIndex = enabledItems.find((item) => item.index === index);
+            itemByIndex = enabledItems.find(item => item.index === index);
         }
         return itemByIndex;
     }
     /* PREV/NEXT */
-    getNextItem(index) {
-        const allItems = this.getAllItems();
-        if (index === -1) {
-            return allItems[0];
-        }
-        const allItemsLength = allItems.length;
-        let nextItemIndex = index + 1;
-        while (nextItemIndex < allItemsLength && allItems[nextItemIndex].disabled) {
-            nextItemIndex++;
+    getNextItem(currentActive) {
+        const enabledItems = this.getEnabledItems();
+        const enabledActiveItemIndex = enabledItems.findIndex(enabledItem => {
+            return enabledItem === currentActive;
+        });
+        //If is the last item, select the first one
+        if (enabledActiveItemIndex === enabledItems.length - 1) {
+            return enabledItems[0];
         }
-        if (nextItemIndex < allItemsLength && !allItems[nextItemIndex].disabled) {
-            return allItems[nextItemIndex];
+        else {
+            return enabledItems[enabledActiveItemIndex + 1];
         }
-        return null;
     }
-    getPrevItem(index) {
-        const allItems = this.getAllItems();
-        let prevItemIndex = index - 1;
-        while (prevItemIndex > -1 && allItems[prevItemIndex].disabled) {
-            prevItemIndex--;
+    getPrevItem(currentActive) {
+        const enabledItems = this.getEnabledItems();
+        const enabledActiveItemIndex = enabledItems.findIndex(enabledItem => {
+            return enabledItem === currentActive;
+        });
+        //If is the first item, select the last one
+        if (enabledActiveItemIndex === 0) {
+            return enabledItems[enabledItems.length - 1];
         }
-        if (prevItemIndex > -1 && !allItems[prevItemIndex].disabled) {
-            return allItems[prevItemIndex];
+        else {
+            return enabledItems[enabledActiveItemIndex - 1];
         }
-        return null;
     }
     /* SELECTED */
     selectItems(items) {
         let selected = 0;
         if (items && Array.isArray(items) && items.length > 0) {
-            items.forEach((item) => {
+            items.forEach(item => {
                 if (!item.selected && !item.disabled) {
                     (item.selected = true) && selected++;
                 }
@@ -552,7 +569,7 @@ const GxgListBox = /*@__PURE__*/ proxyCustomElement(class GxgListBox extends HTM
             }
             this.activeItem !== items && this.unhighlightItem(items);
         }
-        this.updateSelectedItems();
+        //this.updateSelectedItems();
         return selected;
     }
     unselectItems(items) {
@@ -562,7 +579,7 @@ const GxgListBox = /*@__PURE__*/ proxyCustomElement(class GxgListBox extends HTM
             Array.isArray(items) &&
             items.length > 0 &&
             selectedItemsLength > 0) {
-            items.forEach((item) => {
+            items.forEach(item => {
                 if (item.selected && !item.disabled) {
                     if (this.allowsEmpty) {
                         item.selected = false;
@@ -587,7 +604,7 @@ const GxgListBox = /*@__PURE__*/ proxyCustomElement(class GxgListBox extends HTM
             }
             this.activeItem !== items && this.unhighlightItem(items);
         }
-        unselected > 0 && this.updateSelectedItems();
+        //unselected > 0 && this.updateSelectedItems();
         return unselected;
     }
     toggleItem(item) {
@@ -601,7 +618,7 @@ const GxgListBox = /*@__PURE__*/ proxyCustomElement(class GxgListBox extends HTM
     /* ACTIVE */
     getActiveItem() {
         const enabledItems = this.getEnabledItems();
-        return enabledItems.find((item) => item.active);
+        return enabledItems.find(item => item.active);
     }
     setActiveItem(item) {
         if (item) {
@@ -624,7 +641,7 @@ const GxgListBox = /*@__PURE__*/ proxyCustomElement(class GxgListBox extends HTM
     getEnabledItems() {
         const enabledItemsArray = [];
         const enabledItems = this.el.querySelectorAll("gxg-list-box-item");
-        enabledItems.forEach((item) => {
+        enabledItems.forEach(item => {
             !item.disabled && enabledItemsArray.push(item);
         });
         return enabledItemsArray;
@@ -633,7 +650,7 @@ const GxgListBox = /*@__PURE__*/ proxyCustomElement(class GxgListBox extends HTM
     getDisabledItems() {
         const disabledItemsArray = [];
         const allItems = this.el.querySelectorAll("gxg-list-box-item");
-        allItems.forEach((item) => {
+        allItems.forEach(item => {
             item.disabled && disabledItemsArray.push(item);
         });
         return disabledItemsArray;
@@ -642,7 +659,7 @@ const GxgListBox = /*@__PURE__*/ proxyCustomElement(class GxgListBox extends HTM
     setCheckboxState(items, check = true) {
         if (items && Array.isArray(items) && items.length !== 0) {
             let changed = 0;
-            items.forEach((item) => {
+            items.forEach(item => {
                 if (!item.checked && check) {
                     item.checked = true;
                     changed++;
@@ -719,14 +736,14 @@ const GxgListBox = /*@__PURE__*/ proxyCustomElement(class GxgListBox extends HTM
                 [formClasses["VALIDATION_WARNING_CLASS"]]: this.validationStatus === "warning",
                 [formClasses["VALIDATION_ERROR_CLASS"]]: this.validationStatus === "error",
                 [formClasses["VALIDATION_SUCCESS_CLASS"]]: this.validationStatus === "success",
-                [commonClassesNames["DISABLED_CLASS"]]: this.disabled,
-            }, onKeyDown: this.handleKeyDown }, h("div", { class: { container: true, "form-element": true }, tabindex: this.disabled ? "-1" : "0", ref: (el) => (this.containerEl = el) }, this.theTitle ? (h("header", { class: { header: true }, ref: (el) => (this.header = el) }, this.theTitle)) : null, !this.disableSuggestions && !this.hideKeyboardSuggestions
+                [commonClassesNames["DISABLED_CLASS"]]: this.disabled
+            }, onKeyDown: this.handleKeyDown }, h("div", { class: { container: true, "form-element": true }, tabindex: this.disabled ? "-1" : "0", ref: el => (this.containerEl = el) }, this.theTitle ? (h("header", { class: { header: true }, ref: el => (this.header = el) }, this.theTitle)) : null, !this.disableSuggestions && !this.hideKeyboardSuggestions
             ? this.renderKeyboardSuggestions()
             : null, h("main", { class: {
-                main: true,
+                main: true
             }, style: {
-                height: `calc(100% - ${this.headerHeight}px)`,
-            }, ref: (el) => (this.main = el) }, h("slot", null))), formMessageLogic(this)));
+                height: `calc(100% - ${this.headerHeight}px)`
+            }, ref: el => (this.main = el) }, h("slot", null))), formMessageLogic(this)));
     }
     static get watchers() { return {
         "selectedItems": ["selectedItemsHandler"],